Chapter 6: Robot Style - Start

The beginning of the Robot Style project from Chapter 6 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland (me to!)

by Paul Sijpkes

HTML

<div id="robot">
<div id="head">
    <div class="eye" id="righteye"></div>
    <div class="eye" id="lefteye"></div>
    <div id="nose"></div>
    <div id="mouth"></div>
</div>
<div class="arm" id="rightarm"></div>
<div id="body"><p>goofy &lt;jane</p></div>
<div class="arm" id="leftarm"></div>
<div class="leg" id="rightleg"></div>
<div class="leg" id="leftleg"></div>
<div class="butt"id="leftbuttcheek"></div>
<div class="butt"id="rightbuttcheek"></div>

CSS

body {
    font-family:calabri;
}
p {
    font-size: 1em;
}
.eye {
    background-color:#68f;
    width:12px;
    height:20%;
    border-radius: 50%;
}
.arm {
    background-color: aqua;
    position: absolute;
    top: 35%;
    width: 5%;
    height: 40%;
}
.leg {
    background-color: green;
    position: absolute;
    top: 90%;
    width: 5%;
    height: 90%;
    left: 65%;
}

#head {
    width:30%;
    height:30%;
    border-radius: 15%;
    background-color: black;
    position: absolute;
    left: 33%;
    top: 5%;
}
#righteye {
    position: absolute;
    left: 20%;
    top: 20%;
}
#lefteye {
    position: absolute;
    left: 60%;
    top: 20%;
}
#nose {
    position: absolute;
    left: 45%;
    top: 50%;
    width: 10%;
    height: 10%;
    background-color: pink;
}
#mouth {
    position: absolute;
    width: 65%;
    height: 15%;
    left: 20%;
    top: 70%;
    background-color:red;
}
#body {
    position: absolute;
    left: 25%;
    top: 35%;
    width: 45%;
    height: 55%;
    background-color:green;
    text-align:center;
    padding-top: 30px;
}

#rightarm {
    position:absolute;
    left:20%;
}
#leftarm {
    position: absolute;
    left: 70%;
}
#leftleg {
    position:absolute;
    left:25%;
    width:35%;
  }                                                 #leftbuttcheek {
    background-color: black;
    position:absolute;
    top: 85%;
    width: 10%;
    height: 15%;
     left:35%                                                 }                                     #rightbuttcheek {
    background-color: brown;
    position:absolute;
    top: 85%;
    width: 10%;
    height: 15%;
    right: 45%;