MR BUILD A FACE

MBAF.html

<!-- im still working on this! -->

<div class = "backg"></div>

<div id = "head">
<div id = "top"></div>
<div id= "bottom"></div>
</div>

<div class = "drag" id = "eye1">
<div id = "lid"></div>
 <div id = "pupil"></div>
</div>

<div class = "drag" id = "eye2">
  <div id = "lid2"></div>
 <div id = "pupil2"></div>
</div>


<div class = "drag" id = "nose">
  <div id = "shine"></div>
</div>

<div div class = "drag" id = "mouth">
<div id = "teeth1" ></div>
  <div id = "teeth2" ></div>
  <div id = "teeth3" ></div>
  <div id = "teeth4" ></div>
  <div id = "teeth5" ></div>
</div>

<div class = "drag" id = "nose2">
  <div id = "shine2"></div>
</div>

script.js

$(document).ready(function(){
    $(".drag").draggable();
});

style.css

.backg{background-color:grey;
height:1000px;
width:1000px;
position:absolute;}

#top {
	width: 250px;
	height: 300px;
	background: brown;
	border-radius: 200px;
  position:absolute;
  margin-left:25px;
}
#bottom {
	width: 300px;
	height: 300px;
	background: brown;
	border-radius: 200px;
  margin-top:145px;
  position:absolute;}

#head{
margin-top:60px;
margin-left:60px;
position:absolute;}

#nose{
	width: 100px;
	height: 100px;
  margin-left:600px;
	background: red;
	border-radius: 50px;
}

#shine{
background-color:#FFC0C0;
height:20px;
width:20px;
margin-left:60px;
margin-top:20px;
position:absolute;}

#eye1{
	width: 100px;
	height: 100px;
 margin-left:400px;
	background: lightgrey;
	border-radius: 50px;
  position:absolute;
}

#lid {
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     margin-left:5px;
     background:#701C00;
    position:absolute;  
}

#pupil{
  background-color:black;
  height:30px;
  width:30px;
  position:absolute;
  margin-left:35px;
  margin-top:44px;
}
/* second eye */
#eye2{
	width: 100px;
	height: 100px;
 margin-left:400px;
  margin-top: 100px;
	background: lightgrey;
	border-radius: 50px;
  position:absolute;
}

#lid2 {
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     margin-left:5px;
     background:#701C00;
    position:absolute;  
}

#pupil2{
  background-color:black;
  height:30px;
  width:30px;
  position:absolute;
  margin-left:35px;
  margin-top:44px;
}

/* mouth */
#mouth{
     height:75px;
     width:174px;
     border-radius: 0 0 90px 90px;
     background:black;
    margin-left:500px;
    margin-top:100px;
}

#teeth1{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left: 5px;
margin-top:2px;}

#teeth2{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left: 40px;
margin-top:2px;}

#teeth3{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left: 75px;
margin-top:2px;}

#teeth4{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left: 110px;
margin-top:2px;}

#teeth5{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left: 140px;
margin-top:2px;}

/* nose 2 */
#nose2 {
   display:block;
   width:100px; 
   height:150px;
   background-color:purple;
   position:absolute;
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

#shine2{background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left:50px;
margin-top:25px;}