Android logo using html & css

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;
}

Output:

Rahul

Web developer with 6+ years of experience in modern web technologies. I share practical tutorials, UI inspiration, and real-world projects. I also cover Artificial Intelligence, focusing on useful tools, automation, and workflows that actually work.

Leave a Comment Cancel reply