Team:Virginia/AnimationTest

From 2014.igem.org

(Difference between revisions)
 
(27 intermediate revisions not shown)
Line 15: Line 15:
    
    
   <style>
   <style>
 +
 +
html{
 +
padding: 0px;
 +
margin: 0px;
 +
}
 +
 +
.globalWrapper{
 +
padding:0px;
 +
margin:0px;
 +
}
         .row{
         .row{
     height:250px;
     height:250px;
Line 20: Line 30:
     }
     }
 +
 +
section{
 +
width:100%;
 +
height:100%;
 +
background-color:yellow;
 +
}
     .col{
     .col{
margin: 0.8em;
margin: 0.8em;
width:20%;
width:20%;
-
background-color:yellow;
 
height: 230px;
height: 230px;
     }
     }
Line 30: Line 45:
     #first{
     #first{
   height: 800px;
   height: 800px;
-
   background-color:pink;
+
   background-color:#67BCDB;
padding: 30px 0px 0px 0px;
padding: 30px 0px 0px 0px;
}
}
#second{
#second{
-
   background-color:cyan;
+
   background-color:#A2AB58;
   height:800px;
   height:800px;
}
}
Line 41: Line 56:
#third{
#third{
    
    
-
   background-color:purple;
+
   background-color:#E44424;
   height:800px;
   height:800px;
}
}
Line 67: Line 82:
<br>
<br>
<br>
<br>
-
<img class="wow slideInLeft" src = "http://i.imgur.com/IbIibHB.jpg">
+
<img src = "http://i.imgur.com/IbIibHB.jpg" class="wow slideInLeft">
<br>
<br>
<br>
<br>
Line 76: Line 91:
<div id= "third" >
<div id= "third" >
<br>
<br>
-
<div class = "row" style="text-align:center;">
+
<div class = "row" style="text-align:center;" >
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;" ><section class="wow fadeInLeft">cello</p></div>
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;"><section class="wow zoomInDown">cello</p></div>
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;"><section class="wow fadeInRight">cello</p></div>
</div>
</div>
-
<div class = "row" style="text-align:center;">
+
<div class = "row" style="text-align:center;" >
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;" ><section class="wow fadeInLeft">cello</p></div>
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;"><section class="wow zoomInDown">cello</p></div>
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;"><section class="wow fadeInRight">cello</p></div>
</div>
</div>
-
<div class = "row" style="text-align:center;">
+
<div class = "row" style="text-align:center;" >
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;" ><section class="wow fadeInLeft">cello</p></div>
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;"><section class="wow zoomInDown">cello</p></div>
-
<div class="col"  style="display:inline-block;">cello</div>
+
<div class="col"  style="display:inline-block;"><section class="wow fadeInRight">cello</p></div>
</div>
</div>
Line 95: Line 110:
<div id="second">
<div id="second">
-
<h1>There you have it.</h1>
+
<h1 class="wow swing">There you have it.</h1>
-
<div id="pic"><img height="600" src="http://i.imgur.com/wWHpXrb.jpg"></div>
+
<div class="wow rollIn" data-wow-delay="1s"><img height="600" src="http://i.imgur.com/wWHpXrb.jpg"></div>
</div>
</div>
    
    

Latest revision as of 14:42, 8 August 2014

2014 Virginia iGEM

Welcome to the animation test page. We're currently in the process of making objects move. This is great, just look at all this!






Our project this year is pretty awesome. Come back later for some cool info. Filler text! What on earth does the quick brown fox jumps over the lazy dog. Biohazards are here. Hello earbuds.


cello

cello

cello

cello

cello

cello

cello

cello

cello

There you have it.