The Odin Project HTML and CSS 101 - Assignment
A Pen by Sonya Moisset on CodePen.
<html> | |
<body> | |
<div class="android"> | |
<div class="head"> | |
<div class="left_antenna"></div> | |
<div class="right_antenna"></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> |
The Odin Project HTML and CSS 101 - Assignment
A Pen by Sonya Moisset on CodePen.
div { | |
margin: 0; | |
padding: 0; | |
} | |
div div { | |
background: #000; | |
position: relative; | |
} | |
.android { | |
height: 400px; | |
width: 335px; | |
margin: 100px auto; | |
} | |
.head { | |
width: 220px; | |
height: 100px; | |
top: 30px; | |
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: #fff; | |
width: 20px; | |
height: 20px; | |
position: absolute; | |
top: 40px; | |
border-radius: 10px; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
} | |
.left_eye { | |
left: 50px; | |
} | |
.right_eye { | |
right: 50px; | |
} | |
.left_antenna, | |
.right_antenna { | |
width: 5px; | |
height: 50px; | |
position: absolute; | |
top: -35px; | |
border-radius: 3px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
} | |
.left_antenna { | |
left: 50px; | |
transform: rotate(-30deg); | |
-webkit-transform: rotate(-30deg); | |
-moz-transform: rotate(-30deg); | |
} | |
.right_antenna { | |
right: 50px; | |
transform: rotate(30deg); | |
-webkit-transform: rotate(30deg); | |
-moz-transform: rotate(30deg); | |
} | |
.body { | |
width: 220px; | |
height: 185px; | |
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: -60px; | |
} | |
.right_arm { | |
right: -60px; | |
} | |
.left_leg { | |
left: 45px; | |
} | |
.right_leg { | |
right: 45px; | |
} | |
.head:hover { | |
-webkit-transform: rotate(-5deg) translate(-5px, -10px); | |
-transform: rotate(-5deg) translate(-5px, -10px); | |
-moz-transform: rotate(-5deg) translate(-5px, -10px); | |
} | |
.left_arm:hover { | |
-webkit-transform: rotate(15deg) translate(-15px, 0); | |
-transform: rotate(15deg) translate(-15px, 0); | |
-moz-transform: rotate(15deg) translate(-15px, 0); | |
} | |
.right_arm:hover { | |
-webkit-transform: rotate(-30deg) translate(30px, 0); | |
-transform: rotate(-30deg) translate(30px, 0); | |
-moz-transform: rotate(-30deg) translate(30px, 0); | |
} |