Responsive grid with CSS Grids

Responsive grid with CSS Grids

by jayesh1511

HTML

<div id='main'>
      <div id='leftHand' class='hands'></div>
      <div id='rightHand' class='hands'></div>
      <div id='mainBody'></div>
      <div class='head'>
        <div id='leftEye' class='eyes'></div>
        <div id='rightEye' class='eyes'></div>
        <div id='leftAntenna' class='antenna'></div>
        <div id='rightAntenna' class='antenna'></div>
      </div>
      <div id='leftLeg' class='legs'></div>
      <div id='rightLeg' class='legs'></div>
  </div>

CSS

body {
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 10px;
    font-size: 13px;
    background-color: #434444;
}

#main {
    margin-left: 40%;
    margin-top: 15%;
    z-index: 2px;
    position: absolute;
    background-color: #434454;
}

#mainBody {
    height: 140px;
    width: 150px;
    position: absolute;
    border-radius: 0px 0px 15px 15px;
}

div {
    /* Android specific green color */
 background-color: #a4c639;
}

.head {
    position: absolute;
    height: 68px;
    width: 150px; 
    margin-top: -75px;
    border-radius: 120px 120px 0 0; 
    -moz-border-radius: 120px 120px 0 0;
    -webkit-border-radius: 90px 90px 0 0;
}

.eyes {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;   
}

#leftEye {
    margin-left: 35px;
    margin-top: 20px;
}

#rightEye {
    margin-left: 110px;
    margin-top: 20px;
}

.eyes:hover {
    background-color: black;
}

.antenna {
    height: 8px;
    width: 50px;    
    position: absolute;
    border-radius: 15px;
    margin-top: -10px;
}

.hands:hover {
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
}

#leftHand:hover {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
}

#rightHand:hover {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
}

#rightAntenna {
    -moz-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    -webkit-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    transform: rotate(55deg);
}

#leftAntenna {
    margin-left: 100px;
    -moz-transform: rotate(-55deg);
    -o-transform: rotate(-55deg);
    -webkit-transform: rotate(-55deg);
    -ms-transform:...