Adding html,css,js

css/main.css

@@ -94,7 +94,22 @@ textarea {
 /* ==========================================================================
    Author's custom styles
    ========================================================================== */
+.blueSquare {
+  background-color:blue;
+  width:100px;
+  height:100px;
+  -webkit-animation: spin 4s infinite linear;
+}
+.redRectangle {
+  background-color:red;
+  width:200px;
+  height:100px;
+}
 
+@-webkit-keyframes spin {
+    0%  {-webkit-transform: rotate(0deg);}
+    100% {-webkit-transform: rotate(360deg);}   
+}
 
 
 

index.html

@@ -20,7 +20,14 @@
         <![endif]-->
 
         <!-- Add your site or application content here -->
-        <p>Hello world! This is HTML5 Boilerplate.</p>
+        <div id="blueSquare">
+
+        </div>
+
+        <div id="redRectangle">
+
+        </div>
+
 
         <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>

js/main.js

@@ -0,0 +1,2 @@
+document.getElementById('blueSquare').className = 'blueSquare';
+document.getElementById('redRectangle').className = 'redRectangle';