Updated new clouds and cylinder for week 3 code

noelking · noelking · commit a90f712947ea · 2015-10-17T20:58:22.000+01:00
diff --git a/www/css/style.css b/www/css/style.css
@@ -53,6 +53,66 @@ div.ground {
 	width: 100%;
 }	
 
+div.c2 {
+	top: 0px;
+	-webkit-animation: moveclouds 3s linear infinite;
+}
+
+div.c3 {
+	top: 300px;
+	-webkit-animation: moveclouds 5s linear infinite;
+	background: pink;
+}
+
+div.c3:before, div.c3:after { 
+	background: pink;
+}
+
+div.c4 {
+	top: 100px;
+	-webkit-animation: moveclouds 10s linear infinite;
+	background: orange;
+}
+
+div.c4:before, div.c4:after { 
+	background: orange;
+}
+
+div.cylinder {
+	position: relative;
+	margin-bottom: 0px;
+	z-index: 100;
+	height: 320px;
+	bottom: 20%;
+}
+
+div.cylinder .middle {
+	width: 50px;
+	height: 250px;
+	background: #870000;
+	position: absolute;
+}
+
+div.cylinder .top {
+	width: 50px;
+	height: 30px;
+	background: #BD0000;
+	-webkit-border-radius: 30px / 15px;
+	position: absolute;
+	top: -10px;
+	z-index: 110;
+}
+
+div.cylinder .bottom {
+	width: 50px;
+	height: 40px;
+	background: #870000;
+	-webkit-border-radius: 30px / 15px;
+	position: absolute;
+	bottom: 40px;
+	box-shadow: 0px 0px 10px rdba(0,0,0,0.75);
+}
+
 
 
 
diff --git a/www/index.html b/www/index.html
@@ -12,6 +12,15 @@
     <body>
         <div class="clouds">
             <div class="cloud c1"></div>
+            <div class="cloud c2"></div>
+            <div class="cloud c3"></div>
+        	<div class="cloud c4"></div>
+        </div>
+        
+        <div class="cylinder">
+        	<div class="top"></div>
+        	<div class="middle"></div>
+        	<div class="bottom"></div>
         </div>
         
         <div class="ground">
