How to make Nike Logo in HTML and CSS
Complete Source code
In this blog I'll be provide you the source code of creating NIKE logo in HTML and CSS in a easy and understandable manner which you like more and implement according you on this source code which make your CSS concept clear and attractive . For more join and follow us on YOUTUBE , INSTAGRAM.
HTML + CSS
_________________________________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nike logo</title>
</head>
<style>
body {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
}
.nike{
position: absolute;
overflow: hidden;
width: 50vmin;
aspect-ratio: 14/5;
}
.nike::before{
content: '';
position: absolute;
background-color: black;
width: 37%;
height: 550%;
bottom: -134%;
left: 70.5%;
border-top-left-radius: 48% 17%;
border-top-right-radius: 120% 40%;
transform: rotate(-113deg);
z-index: 1;
}
.nike::after{
content: "";
position: absolute;
background: white;
width: 30%;
height: 400%;
bottom: -73%;
left: 64%;
border-top-left-radius: 64% 14%;
border-top-right-radius: 125% 46%;
transform: rotate(-105deg);
z-index: 2;
}
</style>
<body>
<div class="nike"></div>
</body>
</html>
______________________________
.png)
.png "Diwali Fire Crackers Using HTML , CSS , and Js")
.png "Music Player using JavaScript")
.png)
0 Comments