Hello Guys, In this article or video we will see React JS Logo Using Only HTML & CSS. If you learn How to Create this Amazing Logo so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on HTML file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>React JS Logo - Pure Coding</title>
</head>
<body>
<div class="react-logo">
<div class="circle"></div>
</div>
</body>
</html>
Then add this code on CSS file:
CSS:
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
background: #222;
}
.react-logo {
width: 300px;
height: 120px;
border: 9px solid #61dafb;
border-radius: 50%;
display: grid;
place-items: center;
position: relative;
}
.react-logo::before, .react-logo::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 9px solid #61dafb;
border-radius: 50%;
}
.react-logo::before {
transform: rotate(60deg);
}
.react-logo::after {
transform: rotate(-60deg);
}
.react-logo .circle {
width: 40px;
height: 40px;
background: #61dafb;
border-radius: 50%;
}
