Hello guys today we will create Android logo Using HTML & CSS
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html> <head> <title>Android Logo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="logo_outer"> <div class="android"> <div class="head"> <div class="left-ant"></div> <div class="right-ant"></div> <div class="left-eye"></div> <div class="right-eye"></div> </div> <div class="body"> <div class="left-arm"></div> <div class="right-arm"></div> <div class="left-leg"></div> <div class="right-leg"></div> </div> </div> </div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.head {
width: 220px;
height: 100px;
top: 0;
border-radius: 110px 110px 0 0;
background: #a4ca39;
position: relative;
}
.left-ant, .right-ant {
width: 6px;
height: 50px;
position: absolute;
top: -34px;
border-radius: 3px;
background: #a4ca39;
}
.left-ant {
left: 50px;
transform: rotate(-30deg);
}
.right-ant {
right: 50px;
transform: rotate(30deg);
}
.left-eye {
left: 50px;
}
.left-eye, .right-eye {
background: #fff;
width: 20px;
height: 20px;
position: absolute;
top: 42px;
border-radius: 10px;
}
.right-eye {
right: 50px;
}
.body {
width: 220px;
height: 184px;
top: 10px;
border-radius: 0 0 25px 25px;
background: #a4ca39;
position: relative;
}
.body > div {
background: #a4ca39;
}
.left-arm {
left: -60px;
}
.left-arm, .right-arm {
height: 150px;
border-radius: 25px;
}
.left-arm, .right-arm, .left-leg, .right-leg {
width: 50px;
position: absolute;
transition: all 0.1s ease-in;
}
.right-arm {
right: -60px;
}
.left-leg {
left: 45px;
}
.left-leg, .right-leg {
height: 80px;
top: 182px;
border-radius: 0 0 25px 25px;
-webkit-border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
}
.right-leg {
right: 45px;
}