Android Logo with HTML and CSS
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 - 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);
}
Developer | Diego Ponce |
Username | wifi |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 2,000 Kb |
Views | 18,216 |
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!
Name | Size |
Minimalist Mike Wazowski | 2,401 Kb |
Responsive email form example | 1,645 Kb |
Minimalist Minion | 2,521 Kb |
Babylon.js animation | 2,128 Kb |
Birthday message | 4,285 Kb |
Retro Photo Effect | 1,747 Kb |
Grid animation | 2,663 Kb |
Spinning Message | 2,722 Kb |
Animated text dots | 1,867 Kb |
CSS3 Animated Pacman | 2,935 Kb |
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!
Name | Username | Size |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
Svg sky | Omodev | 7,070 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!