"
Team:Virginia/AnimationTest
From 2014.igem.org
(Difference between revisions)
| (50 intermediate revisions not shown) | |||
| Line 15: | Line 15: | ||
<style> | <style> | ||
| + | |||
| + | html{ | ||
| + | padding: 0px; | ||
| + | margin: 0px; | ||
| + | } | ||
| + | |||
| + | .globalWrapper{ | ||
| + | padding:0px; | ||
| + | margin:0px; | ||
| + | } | ||
.row{ | .row{ | ||
| - | height: | + | height:250px; |
margin: 0px 0px; | margin: 0px 0px; | ||
} | } | ||
| + | |||
| + | section{ | ||
| + | width:100%; | ||
| + | height:100%; | ||
| + | background-color:yellow; | ||
| + | } | ||
.col{ | .col{ | ||
margin: 0.8em; | margin: 0.8em; | ||
width:20%; | width:20%; | ||
| - | + | height: 230px; | |
| - | height: | + | |
} | } | ||
#first{ | #first{ | ||
height: 800px; | height: 800px; | ||
| - | background-color: | + | background-color:#67BCDB; |
padding: 30px 0px 0px 0px; | padding: 30px 0px 0px 0px; | ||
} | } | ||
#second{ | #second{ | ||
| - | background-color: | + | background-color:#A2AB58; |
height:800px; | height:800px; | ||
} | } | ||
| Line 41: | Line 56: | ||
#third{ | #third{ | ||
| - | background-color: | + | background-color:#E44424; |
height:800px; | height:800px; | ||
} | } | ||
| Line 63: | Line 78: | ||
<body> | <body> | ||
<div id="first"> | <div id="first"> | ||
| - | <h1>2014 Virginia iGEM</h1> | + | <h1 class="wow swing">2014 Virginia iGEM</h1> |
| - | <p id ="largish">Welcome to the animation test page. We're currently in the process of making objects move. This is great, just look at all this!</p> | + | <p class="wow fadeIn" data-wow-delay="1s" id ="largish">Welcome to the animation test page. We're currently in the process of making objects move. This is great, just look at all this!</p> |
<br> | <br> | ||
<br> | <br> | ||
| - | <img src = "http://i.imgur.com/IbIibHB.jpg"> | + | <img src = "http://i.imgur.com/IbIibHB.jpg" class="wow slideInLeft"> |
<br> | <br> | ||
<br> | <br> | ||
<br> | <br> | ||
| - | <p id ="largish">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.</p> | + | <p id ="largish" class="wow bounceInUp">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.</p> |
</div> | </div> | ||
<div id= "third" > | <div id= "third" > | ||
| - | <div class = "row" style="text-align:center;"> | + | <br> |
| - | <div class="col" style="display:inline-block;">cello</div> | + | <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;"><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> | ||
| + | |||
| + | </div> | ||
| + | |||
| + | <div id="second"> | ||
| + | <h1 class="wow swing">There you have it.</h1> | ||
| + | <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.
There you have it.
