Android Logo with HTML and CSS

Developer
Diego Ponce
Size
2,000 Kb
Views
18,207

How do I make an android logo with html and css?

The Android logo made with HTML and CSS with some cool hover action and love :). What is a android logo with html and css? How do you make a android logo with html and css? This script and codes were developed by Diego Ponce on 21 November 2022, Monday.

Android Logo with HTML and CSS Previews
IQ Test

Android Logo with HTML and CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Android Logo with HTML and CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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>
</body>
</html>

Android Logo with HTML and CSS - Script Codes CSS Codes

*{ background:#393A3A;
}
div {margin: 0 auto; padding: 0;}
div div {background: #A4CA39; position: relative;}
.android{	height: 404px; width: 334px;	margin: 20px auto;
}
.head{	width: 220px; height: 100px;	top: 32px;	border-radius: 110px 110px 0 0;	-moz-border-radius: 110px 110px 0 0;	-webkit-border-radius: 110px 110px 0 0;	-webkit-transition: all 0.1s ease-in;
}
.left_eye, .right_eye {	background: #393A3A;	width: 20px; height: 20px;	position: absolute; top: 42px;	border-radius: 10px;	-moz-border-radius: 10px;	-webkit-border-radius: 10px;
}
.left_eye {left: 50px;}
.right_eye {right: 50px;}
.left_ant, .right_ant{	width: 6px; height: 50px;	position: absolute; top: -34px;	border-radius: 3px;	-webkit-border-radius: 3px;	-moz-border-radius: 3px;
}
.left_ant {	left: 50px;	transform: rotate(-30deg);	-webkit-transform: rotate(-30deg);	-moz-transform: rotate(-30deg);
}
.right_ant {	right: 50px;	transform: rotate(30deg);	-webkit-transform: rotate(30deg);	-moz-transform: rotate(30deg);
}
.body{	width: 220px; height: 184px;	top: 40px;	border-radius: 0 0 25px 25px;	-webkit-border-radius: 0 0 25px 25px;	-moz-border-radius: 0 0 25px 25px;
}
.left_arm, .right_arm, .left_leg, .right_leg {	width: 50px; position: absolute;	-webkit-transition: all 0.1s ease-in;
}
.left_arm, .right_arm {	height: 150px;	border-radius: 25px;	-moz-border-radius: 25px;	-webkit-border-radius: 25px;
}
.left_leg, .right_leg {	height: 80px; top: 182px;	border-radius: 0 0 25px 25px;	-moz-border-radius: 0 0 25px 25px;	-webkit-border-radius: 0 0 25px 25px;
}
.left_arm {left: -58px;}
.right_arm {right: -58px;}
.left_leg {left: 45px;}
.right_leg {right: 45px;}
.head:hover {	-webkit-transform: rotate(-5deg) translate(-4px, -8px);	-transform: rotate(-5deg) translate(-4px, -8px);	-moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.left_arm:hover{	-webkit-transform: rotate(15deg) translate(-14px, 0);	-transform: rotate(15deg) translate(-14px, 0);	-moz-transform: rotate(15deg) translate(-14px, 0);
}
.right_arm:hover{	-webkit-transform: rotate(-30deg) translate(30px, 0);	-transform: rotate(-30deg) translate(30px, 0);	-moz-transform: rotate(-30deg) translate(30px, 0);
}
Android Logo with HTML and CSS - Script Codes
Android Logo with HTML and CSS - Script Codes
Home Page Home
Developer Diego Ponce
Username wifi
Uploaded November 21, 2022
Rating 3
Size 2,000 Kb
Views 18,207
Do you need developer help for Android Logo with HTML and CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Diego Ponce (wifi) Script Codes
Name
Animated text fill
Grid animation
CSS Pokeball
Spinning Message
Microsoft Logo
Slide from top
Push Button
Morphing animation
Text Fill
Babylon.js animation
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!