http://2014.igem.org/wiki/index.php?title=Special:Contributions&feed=atom&limit=50&target=Shashank+dbeb+iitd
2014.igem.org - User contributions [en]
2024-03-29T08:18:58Z
From 2014.igem.org
MediaWiki 1.16.5
http://2014.igem.org/Team:IIT_Delhi
Team:IIT Delhi
2015-07-23T14:20:33Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/style}}<br />
{{CSS/foundation}}<br />
{{CSS/reveal}}<br />
{{CSS/home}}<br />
{{CSS/Generic}}<br />
{{CSS/js-image-slider}}<br />
{{CSS/style2}}<br />
{{CSS/style3}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><br />
<meta name="description" content="iGEM 2014 IIT Delhi"><br />
<meta name="keywords" content="igem iitdelhi 2014, biotech, biobricks, parts, notebook, bio, chem, iit, delhi, hauz khas , new delhi, molecular biology, genetics, synthetic, biology, competition, iGEM, MIT, USA, abhishek, bharti"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<meta http-equiv="cache-control" content="public" /> <br />
<title>iGEM IIT Delhi 2014</title><br />
<link rel='shortcut icon' id='favicon' href='https://static.igem.org/mediawiki/2014/7/76/Favicon3.png' /><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'><br />
<br />
<br />
<br />
<br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'><br />
<!--map=====================<br />
<!--Script for google map at footer--><br />
<script<br />
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"><br />
</script><br />
<br />
<script><br />
function initialize()<br />
{<br />
var mapProp = {<br />
center:new google.maps.LatLng(28.5450,77.1922),<br />
zoom:5,<br />
mapTypeId:google.maps.MapTypeId.ROADMAP<br />
};<br />
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);<br />
}<br />
<br />
google.maps.event.addDomListener(window, 'load', initialize);<br />
</script><br />
<br />
<br />
<br />
<!-------------EDITS ON------------------------><br />
<br />
<br />
<style><br />
.dock-container {<br />
position: relative;<br />
top: 10px; height: 50px; padding-left: 20px; }<br />
a.dock-item { <br />
display: block; <br />
width: 50px; position: absolute;<br />
bottom: 0; text-align: center;<br />
text-decoration: none; color: #333; }<br />
.dock-item span { display: none; padding-left: 20px; }<br />
.dock-item img { <br />
border: 0; <br />
margin: 5px 10px 0px;<br />
width: 100%;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!--------------EDITS OFF------------------------><br />
<br />
<br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><br />
<br />
<!-- Remove all empty <p> tags --><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$("p").filter( function() {<br />
return $.trim($(this).html()) == '';<br />
}).remove()<br />
});<br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<br />
<br />
<br />
<div class="container_home"><br />
<br />
<br />
<!--Header============================================--><br />
<div class="topblack"></div><br />
<div class="topwhite"><br />
<!--<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/c/c0/Igem_iitdelhi_logo2.gif"/></a></div>--><br />
<br />
<br />
<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/b/b4/Logo_igem_iitdelhi.png"/></a><br />
</div><br />
<br />
<div class="logotext"><img src="https://static.igem.org/mediawiki/2014/7/71/Text_iitd.jpg"/></div><br />
<br />
<br />
<div class="igemlogo"><a href="https://igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/e/e2/Igemlogo.png"/></a></div><br />
<br />
<br />
<!-----EDIT GOING ON============--------><br />
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="./javascripts/fisheye-iutil.min.js"></script><br />
<br />
<script><br />
$(function () { <br />
// Dock initialize<br />
$('#dock').Fisheye(<br />
{<br />
maxWidth: 30,<br />
items: 'a',<br />
itemsText: 'span',<br />
container: '.dock-container',<br />
itemWidth: 50,<br />
proximity: 60,<br />
alignment : 'left',<br />
valign: 'bottom',<br />
halign : 'center'<br />
}<br />
);<br />
});<br />
</script><br />
<div id="dock"><br />
<div class="dock-container"><br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
</div><!-- end div .dock-container --><br />
</div><!-- end div .dock #dock --><br />
<br />
<br />
<!-----EDITS ABOVE==========================---><br />
<br />
<br />
<br />
<!-- Navigation bar--><br />
<div id="nav"><br />
<div id="nav_wrapper"><br />
<ul><br />
<li class="nav_item_home" class="home"><a href="https://2014.igem.org/Team:IIT_Delhi">Home</a></li><li class="project"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project">Project</a></li><li class="modeling"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">Modeling</a></li><li class="team"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team">Team</a></li><li class="notebook"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">Notebook</a></li><li class="attributions"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">Attributions</a></li><li class="safety"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety">Safety</a></li><li class="parts"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts">Parts</a></li><li class="achievements"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">Achievements</a></li><br />
<br />
</ul><br />
</div><br />
</div><br />
<br />
<br />
<!--Follow us link===============--><br />
<div class="links"><br />
<p class="followus">Follow Us</p><br />
<div class="link_bg"><br />
<table border="0" cellspacing="2"><br />
<tr><br />
<td><br />
<a href="https://www.facebook.com/igemiitdelhi" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/51/Fb.png" alt="facebook" title="Facebook" onmouseover="this.src='https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/5/51/Fb.png';" /> </a> </td><br />
<br />
<td ><br />
<a href="https://twitter.com/iGEM_IIT_Delhi" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/f/f7/Twitter.png" alt="twitter" title="Twitter" onmouseover="this.src='https://static.igem.org/mediawiki/2014/5/56/Twitterhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/f/f7/Twitter.png';"/></a> </td><br />
<br />
<td><br />
<a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Youtube.png" alt="you tube" title="Youtube" onmouseover="this.src='https://static.igem.org/mediawiki/2014/9/91/Youtubehover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/a/af/Youtube.png';"/></a> </td><br />
</tr><br />
<br />
</table><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
<br />
<br />
<!--=========Incredible India=========--><br />
<div class="incredibleIndia"></div><br />
<div class="incredibleIndiaheader"><img class="mainheader" src="https://static.igem.org/mediawiki/2014/a/a7/Headerincredibleindia2.png"/><img class="centerlogo" src="https://static.igem.org/mediawiki/2014/2/22/Igem_iitdelhi_logo128PX.gif"/></div><br />
<div class="fadedbackground"><img src="https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png"/></div><br />
<div class="redpatternedbg"><img src="https://static.igem.org/mediawiki/2014/1/11/Redpattern_iitd.png"/></div><br />
<br />
<div class="textbg_iitd"><img src="https://static.igem.org/mediawiki/2014/c/ce/Textbg_iitd.png"/><br />
<div class="aboutus"><h4>Our Aim:</h4><p>We aim to genetically engineer bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of chimneys of various industries and car exhausts into harmless byproducts. NOx and SOx are well known pollutants responsible for various respiratory disorders in humans such as asthma, bronchitis etc. They help in formation of Ozone in the lower troposphere where it acts as an irritant of the skin, eyes and lungs. On the other hand, oxides of Sulfur are the main culprits behind acid rain which corrodes buildings, destroys crops and acidifies water bodies, killing aquatic life.<br><br><br />
<br />
We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would <br />
be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.<br><br><br />
<br />
Our proposed design promises easy and effective scalability. Depending on the site of installation (i.e.industrial chimney or in the exhaust of a vehicle), the volume of our inputs can be altered to obtain the desired output. Moreover, the fact that all the sub-components of our model work independently of each other means that they can be easily detached and replaced, making the system very handy. Around 56% of the population in India is still involved in agricultural activities. If the production of NOx and SOx continues unabated like today, the damaging effects of acid rain on the crops will jeopardize the livelihoods of a large section of India’s population in the future. This will have serious economic and social repercussions. And if the concentration of NOx and SOx in the atmosphere keeps building up, it will adversely affect the health of the people, particularly those who cannot pay for their treatment. Also, since our model makes use of bacteria instead of metallic catalysts to reduce the gases, the potential toxicity that can arise from metal by-products of catalyst degradation can be successfully eliminated. Hence, looking at all the positive aspects of our proposed model, we believe that it will help to create a greener and a healthier future.</p></div><br />
<br />
</div><br />
<br />
<div class="flagview"><br />
<a href="http://info.flagcounter.com/AJ8u"><img src="http://s11.flagcounter.com/count/AJ8u/bg_373737/txt_FFFFFF/border_373737/columns_3/maxflags_10/viewers_0/labels_1/pageviews_1/flags_1/" alt="Free counters!" border="0"><br />
</a><br />
</div><br />
<br />
<div class="videobackground"><br />
<div class="animatedlogo"><img src="https://static.igem.org/mediawiki/2014/1/18/Igem_iitdelhi_logo_300px.gif"/></div><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Videobg_iitd.png"/><br />
<div class="youtubevideobg"><br />
<div class="igemvideo"><br />
<video poster="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" controls="" style="width:563px; height:302px;"><br />
<source style="width:563px; height:302px;" src="https://static.igem.org/mediawiki/2014/3/30/Take_a_Stand_IGEM_IIT_DELHI_2014.mp4" type="video/mp4"><br />
<a href="https://www.youtube.com/watch?v=RSS953TgzWk"><img border="0" src="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" alt="Click to view on Youtube" width="563" height="302"></a><br />
</video><br />
</div><br />
</div><br />
<div class="fblike_share"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Figemiitdelhi&amp;width=300&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:21px;" allowTransparency="true"></iframe></div><br />
<br />
<div class="twitter_follow"><a href="https://twitter.com/iGEM_IIT_Delhi" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @iGEM_IIT_Delhi</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div><br />
<br />
</div><br />
<br />
<br />
<br />
<br />
<div class="sponsorsbg"><br />
<div class="sponsortext"><p>OUR ESTEEMED SPONSORS</p></div><br />
<div class="sponsors_iitd"><br />
<br />
<div class="sponsors_iitd2"><br />
<div class="pic1"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/63/Mahindra_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Mahindra_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic2"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/67/Idt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/4/49/Idt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic3"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/4/4f/Fitt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/5/54/Fitt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic4"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/71/Dbt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic5"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/77/Posterguy.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Posterguy_text.png" alt="Abhishek"><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
</div><!--sponsor ends--><br />
<br />
<br />
<div class="footerbg"><br />
<br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">ACHIEVEMENTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Developer: ABHISHEK BHARTI & SHASHANK YADAV </p><br />
<center>"We won a Bronze Medal at the iGEM Giant Jamboree 2014"</center></div><br />
<br />
</div><br />
<br />
<div class="gifouterdiv"><br />
<div class="gifbg"><img src="https://static.igem.org/mediawiki/2014/6/63/Story_of_ECO_COLI.gif"/></div><br />
<div class="mascotinnerlayer"><img class="mascot_iitd" src="https://static.igem.org/mediawiki/2014/8/8b/Mascot_iitdelhi.gif"/></div><br />
</div><br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi
Team:IIT Delhi
2015-07-22T07:27:18Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/style}}<br />
{{CSS/foundation}}<br />
{{CSS/reveal}}<br />
{{CSS/home}}<br />
{{CSS/Generic}}<br />
{{CSS/js-image-slider}}<br />
{{CSS/style2}}<br />
{{CSS/style3}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><br />
<meta name="description" content="iGEM 2014 IIT Delhi"><br />
<meta name="keywords" content="igem iitdelhi 2014, biotech, biobricks, parts, notebook, bio, chem, iit, delhi, hauz khas , new delhi, molecular biology, genetics, synthetic, biology, competition, iGEM, MIT, USA, abhishek, bharti"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<meta http-equiv="cache-control" content="public" /> <br />
<title>iGEM IIT Delhi 2014</title><br />
<link rel='shortcut icon' id='favicon' href='https://static.igem.org/mediawiki/2014/7/76/Favicon3.png' /><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'><br />
<br />
<br />
<br />
<br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'><br />
<!--map=====================<br />
<!--Script for google map at footer--><br />
<script<br />
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"><br />
</script><br />
<br />
<script><br />
function initialize()<br />
{<br />
var mapProp = {<br />
center:new google.maps.LatLng(28.5450,77.1922),<br />
zoom:5,<br />
mapTypeId:google.maps.MapTypeId.ROADMAP<br />
};<br />
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);<br />
}<br />
<br />
google.maps.event.addDomListener(window, 'load', initialize);<br />
</script><br />
<br />
<br />
<br />
<!-------------EDITS ON------------------------><br />
<br />
<br />
<style><br />
.dock-container {<br />
position: relative;<br />
top: 10px; height: 50px; padding-left: 20px; }<br />
a.dock-item { <br />
display: block; <br />
width: 50px; position: absolute;<br />
bottom: 0; text-align: center;<br />
text-decoration: none; color: #333; }<br />
.dock-item span { display: none; padding-left: 20px; }<br />
.dock-item img { <br />
border: 0; <br />
margin: 5px 10px 0px;<br />
width: 100%;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!--------------EDITS OFF------------------------><br />
<br />
<br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><br />
<br />
<!-- Remove all empty <p> tags --><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$("p").filter( function() {<br />
return $.trim($(this).html()) == '';<br />
}).remove()<br />
});<br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<br />
<br />
<br />
<div class="container_home"><br />
<br />
<br />
<!--Header============================================--><br />
<div class="topblack"></div><br />
<div class="topwhite"><br />
<!--<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/c/c0/Igem_iitdelhi_logo2.gif"/></a></div>--><br />
<br />
<br />
<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/b/b4/Logo_igem_iitdelhi.png"/></a><br />
</div><br />
<br />
<div class="logotext"><img src="https://static.igem.org/mediawiki/2014/7/71/Text_iitd.jpg"/></div><br />
<br />
<br />
<div class="igemlogo"><a href="https://igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/e/e2/Igemlogo.png"/></a></div><br />
<br />
<br />
<!-----EDIT GOING ON============--------><br />
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="./javascripts/fisheye-iutil.min.js"></script><br />
<br />
<script><br />
$(function () { <br />
// Dock initialize<br />
$('#dock').Fisheye(<br />
{<br />
maxWidth: 30,<br />
items: 'a',<br />
itemsText: 'span',<br />
container: '.dock-container',<br />
itemWidth: 50,<br />
proximity: 60,<br />
alignment : 'left',<br />
valign: 'bottom',<br />
halign : 'center'<br />
}<br />
);<br />
});<br />
</script><br />
<div id="dock"><br />
<div class="dock-container"><br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
</div><!-- end div .dock-container --><br />
</div><!-- end div .dock #dock --><br />
<br />
<br />
<!-----EDITS ABOVE==========================---><br />
<br />
<br />
<br />
<!-- Navigation bar--><br />
<div id="nav"><br />
<div id="nav_wrapper"><br />
<ul><br />
<li class="nav_item_home" class="home"><a href="https://2014.igem.org/Team:IIT_Delhi">Home</a></li><li class="project"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project">Project</a></li><li class="modeling"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">Modeling</a></li><li class="team"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team">Team</a></li><li class="notebook"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">Notebook</a></li><li class="attributions"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">Attributions</a></li><li class="safety"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety">Safety</a></li><li class="parts"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts">Parts</a></li><li class="achievements"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">Achievements</a></li><br />
<br />
</ul><br />
</div><br />
</div><br />
<br />
<br />
<!--Follow us link===============--><br />
<div class="links"><br />
<p class="followus">Follow Us</p><br />
<div class="link_bg"><br />
<table border="0" cellspacing="2"><br />
<tr><br />
<td><br />
<a href="https://www.facebook.com/igemiitdelhi" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/51/Fb.png" alt="facebook" title="Facebook" onmouseover="this.src='https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/5/51/Fb.png';" /> </a> </td><br />
<br />
<td ><br />
<a href="https://twitter.com/iGEM_IIT_Delhi" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/f/f7/Twitter.png" alt="twitter" title="Twitter" onmouseover="this.src='https://static.igem.org/mediawiki/2014/5/56/Twitterhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/f/f7/Twitter.png';"/></a> </td><br />
<br />
<td><br />
<a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Youtube.png" alt="you tube" title="Youtube" onmouseover="this.src='https://static.igem.org/mediawiki/2014/9/91/Youtubehover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/a/af/Youtube.png';"/></a> </td><br />
</tr><br />
<br />
</table><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
<br />
<br />
<!--=========Incredible India=========--><br />
<div class="incredibleIndia"></div><br />
<div class="incredibleIndiaheader"><img class="mainheader" src="https://static.igem.org/mediawiki/2014/a/a7/Headerincredibleindia2.png"/><img class="centerlogo" src="https://static.igem.org/mediawiki/2014/2/22/Igem_iitdelhi_logo128PX.gif"/></div><br />
<div class="fadedbackground"><img src="https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png"/></div><br />
<div class="redpatternedbg"><img src="https://static.igem.org/mediawiki/2014/1/11/Redpattern_iitd.png"/></div><br />
<br />
<div class="textbg_iitd"><img src="https://static.igem.org/mediawiki/2014/c/ce/Textbg_iitd.png"/><br />
<div class="aboutus"><h4>Our Aim:</h4><p>We aim to genetically engineer bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of chimneys of various industries and car exhausts into harmless byproducts. NOx and SOx are well known pollutants responsible for various respiratory disorders in humans such as asthma, bronchitis etc. They help in formation of Ozone in the lower troposphere where it acts as an irritant of the skin, eyes and lungs. On the other hand, oxides of Sulfur are the main culprits behind acid rain which corrodes buildings, destroys crops and acidifies water bodies, killing aquatic life.<br><br><br />
<br />
We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would <br />
be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.<br><br><br />
<br />
Our proposed design promises easy and effective scalability. Depending on the site of installation (i.e.industrial chimney or in the exhaust of a vehicle), the volume of our inputs can be altered to obtain the desired output. Moreover, the fact that all the sub-components of our model work independently of each other means that they can be easily detached and replaced, making the system very handy. Around 56% of the population in India is still involved in agricultural activities. If the production of NOx and SOx continues unabated like today, the damaging effects of acid rain on the crops will jeopardize the livelihoods of a large section of India’s population in the future. This will have serious economic and social repercussions. And if the concentration of NOx and SOx in the atmosphere keeps building up, it will adversely affect the health of the people, particularly those who cannot pay for their treatment. Also, since our model makes use of bacteria instead of metallic catalysts to reduce the gases, the potential toxicity that can arise from metal by-products of catalyst degradation can be successfully eliminated. Hence, looking at all the positive aspects of our proposed model, we believe that it will help to create a greener and a healthier future.</p></div><br />
<br />
</div><br />
<br />
<div class="flagview"><br />
<a href="http://info.flagcounter.com/AJ8u"><img src="http://s11.flagcounter.com/count/AJ8u/bg_373737/txt_FFFFFF/border_373737/columns_3/maxflags_10/viewers_0/labels_1/pageviews_1/flags_1/" alt="Free counters!" border="0"><br />
</a><br />
</div><br />
<br />
<div class="videobackground"><br />
<div class="animatedlogo"><img src="https://static.igem.org/mediawiki/2014/1/18/Igem_iitdelhi_logo_300px.gif"/></div><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Videobg_iitd.png"/><br />
<div class="youtubevideobg"><br />
<div class="igemvideo"><br />
<video poster="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" controls="" style="width:563px; height:302px;"><br />
<source style="width:563px; height:302px;" src="https://static.igem.org/mediawiki/2014/3/30/Take_a_Stand_IGEM_IIT_DELHI_2014.mp4" type="video/mp4"><br />
<a href="https://www.youtube.com/watch?v=RSS953TgzWk"><img border="0" src="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" alt="Click to view on Youtube" width="563" height="302"></a><br />
</video><br />
</div><br />
</div><br />
<div class="fblike_share"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Figemiitdelhi&amp;width=300&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:21px;" allowTransparency="true"></iframe></div><br />
<br />
<div class="twitter_follow"><a href="https://twitter.com/iGEM_IIT_Delhi" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @iGEM_IIT_Delhi</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div><br />
<br />
</div><br />
<br />
<br />
<br />
<br />
<div class="sponsorsbg"><br />
<div class="sponsortext"><p>OUR ESTEEMED SPONSORS</p></div><br />
<div class="sponsors_iitd"><br />
<br />
<div class="sponsors_iitd2"><br />
<div class="pic1"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/63/Mahindra_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Mahindra_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic2"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/67/Idt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/4/49/Idt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic3"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/4/4f/Fitt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/5/54/Fitt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic4"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/71/Dbt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic5"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/77/Posterguy.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Posterguy_text.png" alt="Abhishek"><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
</div><!--sponsor ends--><br />
<br />
<br />
<div class="footerbg"><br />
<br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">ACHIEVEMENTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Developer: ABHISHEK BHARTI & SHASHANK YADAV </p><br />
<center>"We won a Bronze Medal at the iGEM Giant Jamboree 2014"</center></div><br />
<br />
</div><br />
<br />
<div class="gifouterdiv"><br />
<div class="gifbg"><img src="https://static.igem.org/mediawiki/2014/6/63/Story_of_ECO_COLI.gif"/></div><br />
<div class="mascotinnerlayer"><img class="mascot_iitd" src="https://static.igem.org/mediawiki/2014/8/8b/Mascot_iitdelhi.gif"/></div><br />
</div><br />
<br />
<br />
<br />
<!--Slider=================================<br />
<br />
<div class="slider2"><br />
<div class="container3"><br />
<div id="content-slider"><br />
<div id="slider"><br />
<div id="mask"><br />
<ul><br />
<li id="first" class="firstanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/2/28/Iitdelhi.jpg" alt="iit delhi" /><br />
</a><br />
</li><br />
<br />
<li id="second" class="secondanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/8/8a/Prof.jpg" alt="Discussion"/><br />
</a><br />
</li><br />
<br />
<li id="third" class="thirdanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/8/83/Presentation.jpg" alt="Presentation"/><br />
</a><br />
<br />
</li><br />
<br />
<li id="fourth" class="fourthanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/c/c7/Sponsor.jpg" alt="Sponsor"/><br />
</a><br />
</li><br />
<br />
<li id="fifth" class="fifthanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/b/b8/Team.jpg" alt="Team"/><br />
</a><br />
</li><br />
</ul><br />
</div><br />
<div class="progress-bar"></div><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
--><br />
<br />
<br />
<!--Flip Menu==============================--><br />
<!--<br />
<div id="container2" ><br />
<br />
<br />
<div class="wrapper" ><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/2/23/Projectiitd.png" width="240px" height="81px" /><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project"><br />
<span class="information"> <b> Description of our project </b></span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/c/cf/Partsiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts"><br />
<span class="information"> parts used, developed and submitted to the registry !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/b/bd/Modeling_copy.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling"><br />
<span class="information"> prediction of our results using simulink !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/1/1f/Teamiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team"><br />
<span class="information">our hardworking team !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/e/e8/Notebookiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook"><br />
<span class="information">our detailed datewise work manual !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/e/e8/Safetyiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety"><br />
<span class="information">safety form about the working conditions in our lab</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/9/9e/Attributes_copy.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions"><br />
<span class="information">attributions</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/0/02/Sponsorsiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/sponsors"><br />
<span class="information">thanks to our sponsors !</span><br />
</a><br />
</div><br />
</div><br />
<br />
</div><br />
--><br />
<br />
<!--Flip Menu ends here============== --><br />
<!--Video1================================--><br />
<br />
<!--Crowd funding========================--><br />
<br />
<br />
<!--Facebook plugin========================--><br />
<br />
<br />
<!--tweeter plugin==========================--><br />
<br />
<!--Footer===========================================--><br />
<br />
<br />
<br />
<div class="footer"><br />
<br />
<!-- Navigation bar at footer--><br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="maplink"><br />
<table class="maptable"><br />
<tr><td><a href="http://www.iitd.ac.in/" target="_blank">Indian Institute of Technology (IIT) Delhi, India</a></td><br />
<td>|</td><br />
<td><a href="https://www.google.com/maps/place/Indian+Institute+of+Technology+Delhi" target="_blank">View Map</a></td><td></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Contact: <a href="https://plus.google.com/u/0/+AbhishekBharti26/posts" target="_blank">Developer</a></p></div><br />
<br />
<br />
</div><br />
<br />
<br />
<br />
<br />
</div><br />
<br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi
Team:IIT Delhi
2015-07-22T07:25:07Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/style}}<br />
{{CSS/foundation}}<br />
{{CSS/reveal}}<br />
{{CSS/home}}<br />
{{CSS/Generic}}<br />
{{CSS/js-image-slider}}<br />
{{CSS/style2}}<br />
{{CSS/style3}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><br />
<meta name="description" content="iGEM 2014 IIT Delhi"><br />
<meta name="keywords" content="igem iitdelhi 2014, biotech, biobricks, parts, notebook, bio, chem, iit, delhi, hauz khas , new delhi, molecular biology, genetics, synthetic, biology, competition, iGEM, MIT, USA, abhishek, bharti"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<meta http-equiv="cache-control" content="public" /> <br />
<title>iGEM IIT Delhi 2014</title><br />
<link rel='shortcut icon' id='favicon' href='https://static.igem.org/mediawiki/2014/7/76/Favicon3.png' /><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'><br />
<br />
<br />
<br />
<br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'><br />
<!--map=====================<br />
<!--Script for google map at footer--><br />
<script<br />
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"><br />
</script><br />
<br />
<script><br />
function initialize()<br />
{<br />
var mapProp = {<br />
center:new google.maps.LatLng(28.5450,77.1922),<br />
zoom:5,<br />
mapTypeId:google.maps.MapTypeId.ROADMAP<br />
};<br />
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);<br />
}<br />
<br />
google.maps.event.addDomListener(window, 'load', initialize);<br />
</script><br />
<br />
<br />
<br />
<!-------------EDITS ON------------------------><br />
<br />
<br />
<style><br />
.dock-container {<br />
position: relative;<br />
top: 10px; height: 50px; padding-left: 20px; }<br />
a.dock-item { <br />
display: block; <br />
width: 50px; position: absolute;<br />
bottom: 0; text-align: center;<br />
text-decoration: none; color: #333; }<br />
.dock-item span { display: none; padding-left: 20px; }<br />
.dock-item img { <br />
border: 0; <br />
margin: 5px 10px 0px;<br />
width: 100%;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!--------------EDITS OFF------------------------><br />
<br />
<br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><br />
<br />
<!-- Remove all empty <p> tags --><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$("p").filter( function() {<br />
return $.trim($(this).html()) == '';<br />
}).remove()<br />
});<br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<br />
<br />
<br />
<div class="container_home"><br />
<br />
<br />
<!--Header============================================--><br />
<div class="topblack"></div><br />
<div class="topwhite"><br />
<!--<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/c/c0/Igem_iitdelhi_logo2.gif"/></a></div>--><br />
<br />
<br />
<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/b/b4/Logo_igem_iitdelhi.png"/></a><br />
</div><br />
<br />
<div class="logotext"><img src="https://static.igem.org/mediawiki/2014/7/71/Text_iitd.jpg"/></div><br />
<br />
<br />
<div class="igemlogo"><a href="https://igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/e/e2/Igemlogo.png"/></a></div><br />
<br />
<br />
<!-----EDIT GOING ON============--------><br />
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="./javascripts/fisheye-iutil.min.js"></script><br />
<br />
<script><br />
$(function () { <br />
// Dock initialize<br />
$('#dock').Fisheye(<br />
{<br />
maxWidth: 30,<br />
items: 'a',<br />
itemsText: 'span',<br />
container: '.dock-container',<br />
itemWidth: 50,<br />
proximity: 60,<br />
alignment : 'left',<br />
valign: 'bottom',<br />
halign : 'center'<br />
}<br />
);<br />
});<br />
</script><br />
<div id="dock"><br />
<div class="dock-container"><br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
</div><!-- end div .dock-container --><br />
</div><!-- end div .dock #dock --><br />
<br />
<br />
<!-----EDITS ABOVE==========================---><br />
<br />
<br />
<br />
<!-- Navigation bar--><br />
<div id="nav"><br />
<div id="nav_wrapper"><br />
<ul><br />
<li class="nav_item_home" class="home"><a href="https://2014.igem.org/Team:IIT_Delhi">Home</a></li><li class="project"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project">Project</a></li><li class="modeling"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">Modeling</a></li><li class="team"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team">Team</a></li><li class="notebook"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">Notebook</a></li><li class="attributions"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">Attributions</a></li><li class="safety"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety">Safety</a></li><li class="parts"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts">Parts</a></li><li class="achievements"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">Achievements</a></li><br />
<br />
</ul><br />
</div><br />
</div><br />
<br />
<br />
<!--Follow us link===============--><br />
<div class="links"><br />
<p class="followus">Follow Us</p><br />
<div class="link_bg"><br />
<table border="0" cellspacing="2"><br />
<tr><br />
<td><br />
<a href="https://www.facebook.com/igemiitdelhi" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/51/Fb.png" alt="facebook" title="Facebook" onmouseover="this.src='https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/5/51/Fb.png';" /> </a> </td><br />
<br />
<td ><br />
<a href="https://twitter.com/iGEM_IIT_Delhi" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/f/f7/Twitter.png" alt="twitter" title="Twitter" onmouseover="this.src='https://static.igem.org/mediawiki/2014/5/56/Twitterhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/f/f7/Twitter.png';"/></a> </td><br />
<br />
<td><br />
<a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Youtube.png" alt="you tube" title="Youtube" onmouseover="this.src='https://static.igem.org/mediawiki/2014/9/91/Youtubehover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/a/af/Youtube.png';"/></a> </td><br />
</tr><br />
<br />
</table><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
<br />
<br />
<!--=========Incredible India=========--><br />
<div class="incredibleIndia"></div><br />
<div class="incredibleIndiaheader"><img class="mainheader" src="https://static.igem.org/mediawiki/2014/a/a7/Headerincredibleindia2.png"/><img class="centerlogo" src="https://static.igem.org/mediawiki/2014/2/22/Igem_iitdelhi_logo128PX.gif"/></div><br />
<div class="fadedbackground"><img src="https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png"/></div><br />
<div class="redpatternedbg"><img src="https://static.igem.org/mediawiki/2014/1/11/Redpattern_iitd.png"/></div><br />
<br />
<div class="textbg_iitd"><img src="https://static.igem.org/mediawiki/2014/c/ce/Textbg_iitd.png"/><br />
<div class="aboutus"><h4>Our Aim:</h4><p>We aim to genetically engineer bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of chimneys of various industries and car exhausts into harmless byproducts. NOx and SOx are well known pollutants responsible for various respiratory disorders in humans such as asthma, bronchitis etc. They help in formation of Ozone in the lower troposphere where it acts as an irritant of the skin, eyes and lungs. On the other hand, oxides of Sulfur are the main culprits behind acid rain which corrodes buildings, destroys crops and acidifies water bodies, killing aquatic life.<br><br><br />
<br />
We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would <br />
be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.<br><br><br />
<br />
Our proposed design promises easy and effective scalability. Depending on the site of installation (i.e.industrial chimney or in the exhaust of a vehicle), the volume of our inputs can be altered to obtain the desired output. Moreover, the fact that all the sub-components of our model work independently of each other means that they can be easily detached and replaced, making the system very handy. Around 56% of the population in India is still involved in agricultural activities. If the production of NOx and SOx continues unabated like today, the damaging effects of acid rain on the crops will jeopardize the livelihoods of a large section of India’s population in the future. This will have serious economic and social repercussions. And if the concentration of NOx and SOx in the atmosphere keeps building up, it will adversely affect the health of the people, particularly those who cannot pay for their treatment. Also, since our model makes use of bacteria instead of metallic catalysts to reduce the gases, the potential toxicity that can arise from metal by-products of catalyst degradation can be successfully eliminated. Hence, looking at all the positive aspects of our proposed model, we believe that it will help to create a greener and a healthier future.</p></div><br />
<br />
</div><br />
<br />
<div class="flagview"><br />
<a href="http://info.flagcounter.com/AJ8u"><img src="http://s11.flagcounter.com/count/AJ8u/bg_373737/txt_FFFFFF/border_373737/columns_3/maxflags_10/viewers_0/labels_1/pageviews_1/flags_1/" alt="Free counters!" border="0"><br />
</a><br />
</div><br />
<br />
<div class="videobackground"><br />
<div class="animatedlogo"><img src="https://static.igem.org/mediawiki/2014/1/18/Igem_iitdelhi_logo_300px.gif"/></div><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Videobg_iitd.png"/><br />
<div class="youtubevideobg"><br />
<div class="igemvideo"><br />
<video poster="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" controls="" style="width:563px; height:302px;"><br />
<source style="width:563px; height:302px;" src="https://static.igem.org/mediawiki/2014/3/30/Take_a_Stand_IGEM_IIT_DELHI_2014.mp4" type="video/mp4"><br />
<a href="https://www.youtube.com/watch?v=RSS953TgzWk"><img border="0" src="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" alt="Click to view on Youtube" width="563" height="302"></a><br />
</video><br />
</div><br />
</div><br />
<div class="fblike_share"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Figemiitdelhi&amp;width=300&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:21px;" allowTransparency="true"></iframe></div><br />
<br />
<div class="twitter_follow"><a href="https://twitter.com/iGEM_IIT_Delhi" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @iGEM_IIT_Delhi</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div><br />
<br />
</div><br />
<br />
<br />
<br />
<br />
<div class="sponsorsbg"><br />
<div class="sponsortext"><p>OUR ESTEEMED SPONSORS</p></div><br />
<div class="sponsors_iitd"><br />
<br />
<div class="sponsors_iitd2"><br />
<div class="pic1"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/63/Mahindra_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Mahindra_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic2"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/67/Idt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/4/49/Idt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic3"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/4/4f/Fitt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/5/54/Fitt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic4"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/71/Dbt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic5"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/77/Posterguy.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Posterguy_text.png" alt="Abhishek"><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
</div><!--sponsor ends--><br />
<br />
<br />
<br />
<!--Flip Menu ends here============== --><br />
<!--Video1================================--><br />
<br />
<!--Crowd funding========================--><br />
<br />
<br />
<!--Facebook plugin========================--><br />
<br />
<br />
<!--tweeter plugin==========================--><br />
<br />
<!--Footer===========================================--><br />
<br />
<br />
<br />
<div class="footer"><br />
<br />
<!-- Navigation bar at footer--><br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="maplink"><br />
<table class="maptable"><br />
<tr><td><a href="http://www.iitd.ac.in/" target="_blank">Indian Institute of Technology (IIT) Delhi, India</a></td><br />
<td>|</td><br />
<td><a href="https://www.google.com/maps/place/Indian+Institute+of+Technology+Delhi" target="_blank">View Map</a></td><td></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Contact: <a href="https://plus.google.com/u/0/+AbhishekBharti26/posts" target="_blank">Developer</a></p></div><br />
<br />
<br />
</div><br />
<br />
<br />
<br />
<br />
</div><br />
<br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi
Team:IIT Delhi
2015-07-22T07:09:35Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/style}}<br />
{{CSS/foundation}}<br />
{{CSS/reveal}}<br />
{{CSS/home}}<br />
{{CSS/Generic}}<br />
{{CSS/js-image-slider}}<br />
{{CSS/style2}}<br />
{{CSS/style3}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><br />
<meta name="description" content="iGEM 2014 IIT Delhi"><br />
<meta name="keywords" content="igem iitdelhi 2014, biotech, biobricks, parts, notebook, bio, chem, iit, delhi, hauz khas , new delhi, molecular biology, genetics, synthetic, biology, competition, iGEM, MIT, USA, abhishek, bharti"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<meta http-equiv="cache-control" content="public" /> <br />
<title>iGEM IIT Delhi 2014</title><br />
<link rel='shortcut icon' id='favicon' href='https://static.igem.org/mediawiki/2014/7/76/Favicon3.png' /><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'><br />
<br />
<br />
<br />
<br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'><br />
<!--map=====================<br />
<!--Script for google map at footer--><br />
<script<br />
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"><br />
</script><br />
<br />
<script><br />
function initialize()<br />
{<br />
var mapProp = {<br />
center:new google.maps.LatLng(28.5450,77.1922),<br />
zoom:5,<br />
mapTypeId:google.maps.MapTypeId.ROADMAP<br />
};<br />
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);<br />
}<br />
<br />
google.maps.event.addDomListener(window, 'load', initialize);<br />
</script><br />
<br />
<br />
<br />
<!-------------EDITS ON------------------------><br />
<br />
<br />
<style><br />
.dock-container {<br />
position: relative;<br />
top: 10px; height: 50px; padding-left: 20px; }<br />
a.dock-item { <br />
display: block; <br />
width: 50px; position: absolute;<br />
bottom: 0; text-align: center;<br />
text-decoration: none; color: #333; }<br />
.dock-item span { display: none; padding-left: 20px; }<br />
.dock-item img { <br />
border: 0; <br />
margin: 5px 10px 0px;<br />
width: 100%;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!--------------EDITS OFF------------------------><br />
<br />
<br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><br />
<br />
<!-- Remove all empty <p> tags --><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$("p").filter( function() {<br />
return $.trim($(this).html()) == '';<br />
}).remove()<br />
});<br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<br />
<br />
<br />
<div class="container_home"><br />
<br />
<br />
<!--Header============================================--><br />
<div class="topblack"></div><br />
<div class="topwhite"><br />
<!--<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/c/c0/Igem_iitdelhi_logo2.gif"/></a></div>--><br />
<br />
<br />
<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/b/b4/Logo_igem_iitdelhi.png"/></a><br />
</div><br />
<br />
<div class="logotext"><img src="https://static.igem.org/mediawiki/2014/7/71/Text_iitd.jpg"/></div><br />
<br />
<br />
<div class="igemlogo"><a href="https://igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/e/e2/Igemlogo.png"/></a></div><br />
<br />
<br />
<!-----EDIT GOING ON============--------><br />
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="./javascripts/fisheye-iutil.min.js"></script><br />
<br />
<script><br />
$(function () { <br />
// Dock initialize<br />
$('#dock').Fisheye(<br />
{<br />
maxWidth: 30,<br />
items: 'a',<br />
itemsText: 'span',<br />
container: '.dock-container',<br />
itemWidth: 50,<br />
proximity: 60,<br />
alignment : 'left',<br />
valign: 'bottom',<br />
halign : 'center'<br />
}<br />
);<br />
});<br />
</script><br />
<div id="dock"><br />
<div class="dock-container"><br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
</div><!-- end div .dock-container --><br />
</div><!-- end div .dock #dock --><br />
<br />
<br />
<!-----EDITS ABOVE==========================---><br />
<br />
<br />
<br />
<!-- Navigation bar--><br />
<div id="nav"><br />
<div id="nav_wrapper"><br />
<ul><br />
<li class="nav_item_home" class="home"><a href="https://2014.igem.org/Team:IIT_Delhi">Home</a></li><li class="project"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project">Project</a></li><li class="modeling"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">Modeling</a></li><li class="team"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team">Team</a></li><li class="notebook"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">Notebook</a></li><li class="attributions"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">Attributions</a></li><li class="safety"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety">Safety</a></li><li class="parts"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts">Parts</a></li><li class="achievements"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">Achievements</a></li><br />
<br />
</ul><br />
</div><br />
</div><br />
<br />
<br />
<!--Follow us link===============--><br />
<div class="links"><br />
<p class="followus">Follow Us</p><br />
<div class="link_bg"><br />
<table border="0" cellspacing="2"><br />
<tr><br />
<td><br />
<a href="https://www.facebook.com/igemiitdelhi" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/51/Fb.png" alt="facebook" title="Facebook" onmouseover="this.src='https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/5/51/Fb.png';" /> </a> </td><br />
<br />
<td ><br />
<a href="https://twitter.com/iGEM_IIT_Delhi" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/f/f7/Twitter.png" alt="twitter" title="Twitter" onmouseover="this.src='https://static.igem.org/mediawiki/2014/5/56/Twitterhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/f/f7/Twitter.png';"/></a> </td><br />
<br />
<td><br />
<a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Youtube.png" alt="you tube" title="Youtube" onmouseover="this.src='https://static.igem.org/mediawiki/2014/9/91/Youtubehover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/a/af/Youtube.png';"/></a> </td><br />
</tr><br />
<br />
</table><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
<br />
<br />
<!--=========Incredible India=========--><br />
<div class="incredibleIndia"></div><br />
<div class="incredibleIndiaheader"><img class="mainheader" src="https://static.igem.org/mediawiki/2014/a/a7/Headerincredibleindia2.png"/><img class="centerlogo" src="https://static.igem.org/mediawiki/2014/2/22/Igem_iitdelhi_logo128PX.gif"/></div><br />
<div class="fadedbackground"><img src="https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png"/></div><br />
<div class="redpatternedbg"><img src="https://static.igem.org/mediawiki/2014/1/11/Redpattern_iitd.png"/></div><br />
<br />
<div class="textbg_iitd"><img src="https://static.igem.org/mediawiki/2014/c/ce/Textbg_iitd.png"/><br />
<div class="aboutus"><h4>Our Aim:</h4><p>We aim to genetically engineer bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of chimneys of various industries and car exhausts into harmless byproducts. NOx and SOx are well known pollutants responsible for various respiratory disorders in humans such as asthma, bronchitis etc. They help in formation of Ozone in the lower troposphere where it acts as an irritant of the skin, eyes and lungs. On the other hand, oxides of Sulfur are the main culprits behind acid rain which corrodes buildings, destroys crops and acidifies water bodies, killing aquatic life.<br><br><br />
<br />
We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would <br />
be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.<br><br><br />
<br />
Our proposed design promises easy and effective scalability. Depending on the site of installation (i.e.industrial chimney or in the exhaust of a vehicle), the volume of our inputs can be altered to obtain the desired output. Moreover, the fact that all the sub-components of our model work independently of each other means that they can be easily detached and replaced, making the system very handy. Around 56% of the population in India is still involved in agricultural activities. If the production of NOx and SOx continues unabated like today, the damaging effects of acid rain on the crops will jeopardize the livelihoods of a large section of India’s population in the future. This will have serious economic and social repercussions. And if the concentration of NOx and SOx in the atmosphere keeps building up, it will adversely affect the health of the people, particularly those who cannot pay for their treatment. Also, since our model makes use of bacteria instead of metallic catalysts to reduce the gases, the potential toxicity that can arise from metal by-products of catalyst degradation can be successfully eliminated. Hence, looking at all the positive aspects of our proposed model, we believe that it will help to create a greener and a healthier future.</p></div><br />
<br />
</div><br />
<br />
<div class="flagview"><br />
<a href="http://info.flagcounter.com/AJ8u"><img src="http://s11.flagcounter.com/count/AJ8u/bg_373737/txt_FFFFFF/border_373737/columns_3/maxflags_10/viewers_0/labels_1/pageviews_1/flags_1/" alt="Free counters!" border="0"><br />
</a><br />
</div><br />
<br />
<div class="videobackground"><br />
<div class="animatedlogo"><img src="https://static.igem.org/mediawiki/2014/1/18/Igem_iitdelhi_logo_300px.gif"/></div><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Videobg_iitd.png"/><br />
<div class="youtubevideobg"><br />
<div class="igemvideo"><br />
<video poster="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" controls="" style="width:563px; height:302px;"><br />
<source style="width:563px; height:302px;" src="https://static.igem.org/mediawiki/2014/3/30/Take_a_Stand_IGEM_IIT_DELHI_2014.mp4" type="video/mp4"><br />
<a href="https://www.youtube.com/watch?v=RSS953TgzWk"><img border="0" src="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" alt="Click to view on Youtube" width="563" height="302"></a><br />
</video><br />
</div><br />
</div><br />
<div class="fblike_share"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Figemiitdelhi&amp;width=300&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:21px;" allowTransparency="true"></iframe></div><br />
<br />
<div class="twitter_follow"><a href="https://twitter.com/iGEM_IIT_Delhi" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @iGEM_IIT_Delhi</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div><br />
<br />
</div><br />
<br />
<br />
<br />
<br />
<div class="sponsorsbg"><br />
<div class="sponsortext"><p>OUR ESTEEMED SPONSORS</p></div><br />
<div class="sponsors_iitd"><br />
<br />
<div class="sponsors_iitd2"><br />
<div class="pic1"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/63/Mahindra_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Mahindra_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic2"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/67/Idt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/4/49/Idt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic3"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/4/4f/Fitt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/5/54/Fitt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic4"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/71/Dbt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic5"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/77/Posterguy.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Posterguy_text.png" alt="Abhishek"><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
</div><!--sponsor ends--><br />
<br />
<br />
<div class="footerbg"><br />
<br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">ACHIEVEMENTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Developer: ABHISHEK BHARTI & SHASHANK YADAV </p><br />
<center>"We won a Bronze Medal at the iGEM Giant Jamboree 2014"</center></div><br />
<br />
</div><br />
<br />
<div class="gifouterdiv"><br />
<div class="gifbg"><img src="https://static.igem.org/mediawiki/2014/6/63/Story_of_ECO_COLI.gif"/></div><br />
<div class="mascotinnerlayer"><img class="mascot_iitd" src="https://static.igem.org/mediawiki/2014/8/8b/Mascot_iitdelhi.gif"/></div><br />
</div><br />
<br />
<br />
<br />
<!--Slider=================================<br />
<br />
<div class="slider2"><br />
<div class="container3"><br />
<div id="content-slider"><br />
<div id="slider"><br />
<div id="mask"><br />
<ul><br />
<li id="first" class="firstanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/2/28/Iitdelhi.jpg" alt="iit delhi" /><br />
</a><br />
</li><br />
<br />
<li id="second" class="secondanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/8/8a/Prof.jpg" alt="Discussion"/><br />
</a><br />
</li><br />
<br />
<li id="third" class="thirdanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/8/83/Presentation.jpg" alt="Presentation"/><br />
</a><br />
<br />
</li><br />
<br />
<li id="fourth" class="fourthanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/c/c7/Sponsor.jpg" alt="Sponsor"/><br />
</a><br />
</li><br />
<br />
<li id="fifth" class="fifthanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/b/b8/Team.jpg" alt="Team"/><br />
</a><br />
</li><br />
</ul><br />
</div><br />
<div class="progress-bar"></div><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
--><br />
<br />
<br />
<!--Flip Menu==============================--><br />
<!--<br />
<div id="container2" ><br />
<br />
<br />
<div class="wrapper" ><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/2/23/Projectiitd.png" width="240px" height="81px" /><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project"><br />
<span class="information"> <b> Description of our project </b></span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/c/cf/Partsiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts"><br />
<span class="information"> parts used, developed and submitted to the registry !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/b/bd/Modeling_copy.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling"><br />
<span class="information"> prediction of our results using simulink !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/1/1f/Teamiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team"><br />
<span class="information">our hardworking team !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/e/e8/Notebookiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook"><br />
<span class="information">our detailed datewise work manual !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/e/e8/Safetyiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety"><br />
<span class="information">safety form about the working conditions in our lab</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/9/9e/Attributes_copy.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions"><br />
<span class="information">attributions</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/0/02/Sponsorsiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/sponsors"><br />
<span class="information">thanks to our sponsors !</span><br />
</a><br />
</div><br />
</div><br />
<br />
</div><br />
--><br />
<!--Flip Menu ends here============== --><br />
<!--Video1================================--><br />
<br />
<!--Crowd funding========================--><br />
<br />
<br />
<!--Facebook plugin========================--><br />
<br />
<br />
<!--tweeter plugin==========================--><br />
<br />
<!--Footer===========================================--><br />
<br />
<br />
<br />
<div class="footer"><br />
<br />
<!-- Navigation bar at footer--><br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="maplink"><br />
<table class="maptable"><br />
<tr><td><a href="http://www.iitd.ac.in/" target="_blank">Indian Institute of Technology (IIT) Delhi, India</a></td><br />
<td>|</td><br />
<td><a href="https://www.google.com/maps/place/Indian+Institute+of+Technology+Delhi" target="_blank">View Map</a></td><td></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Contact: <a href="https://plus.google.com/u/0/+AbhishekBharti26/posts" target="_blank">Developer</a></p></div><br />
<br />
<br />
</div><br />
<br />
<br />
<br />
<br />
</div><br />
<br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi
Team:IIT Delhi
2015-07-22T06:51:25Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/style}}<br />
{{CSS/foundation}}<br />
{{CSS/reveal}}<br />
{{CSS/home}}<br />
{{CSS/Generic}}<br />
{{CSS/js-image-slider}}<br />
{{CSS/style2}}<br />
{{CSS/style3}}<br />
<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><br />
<meta name="description" content="iGEM 2014 IIT Delhi"><br />
<meta name="keywords" content="igem iitdelhi 2014, biotech, biobricks, parts, notebook, bio, chem, iit, delhi, hauz khas , new delhi, molecular biology, genetics, synthetic, biology, competition, iGEM, MIT, USA, abhishek, bharti"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<meta http-equiv="cache-control" content="public" /> <br />
<title>iGEM IIT Delhi 2014</title><br />
<link rel='shortcut icon' id='favicon' href='https://static.igem.org/mediawiki/2014/7/76/Favicon3.png' /><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'><br />
<br />
<br />
<br />
<br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'><br />
<!--map=====================<br />
<!--Script for google map at footer--><br />
<script<br />
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"><br />
</script><br />
<br />
<script><br />
function initialize()<br />
{<br />
var mapProp = {<br />
center:new google.maps.LatLng(28.5450,77.1922),<br />
zoom:5,<br />
mapTypeId:google.maps.MapTypeId.ROADMAP<br />
};<br />
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);<br />
}<br />
<br />
google.maps.event.addDomListener(window, 'load', initialize);<br />
</script><br />
<br />
<br />
<br />
<!-------------EDITS ON------------------------><br />
<br />
<br />
<style><br />
.dock-container {<br />
position: relative;<br />
top: 10px; height: 50px; padding-left: 20px; }<br />
a.dock-item { <br />
display: block; <br />
width: 50px; position: absolute;<br />
bottom: 0; text-align: center;<br />
text-decoration: none; color: #333; }<br />
.dock-item span { display: none; padding-left: 20px; }<br />
.dock-item img { <br />
border: 0; <br />
margin: 5px 10px 0px;<br />
width: 100%;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!--------------EDITS OFF------------------------><br />
<br />
<br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><br />
<br />
<!-- Remove all empty <p> tags --><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$("p").filter( function() {<br />
return $.trim($(this).html()) == '';<br />
}).remove()<br />
});<br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<br />
<br />
<br />
<div class="container_home"><br />
<br />
<br />
<!--Header============================================--><br />
<div class="topblack"></div><br />
<div class="topwhite"><br />
<!--<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/c/c0/Igem_iitdelhi_logo2.gif"/></a></div>--><br />
<br />
<br />
<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/b/b4/Logo_igem_iitdelhi.png"/></a><br />
</div><br />
<br />
<div class="logotext"><img src="https://static.igem.org/mediawiki/2014/7/71/Text_iitd.jpg"/></div><br />
<br />
<br />
<div class="igemlogo"><a href="https://igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/e/e2/Igemlogo.png"/></a></div><br />
<br />
<br />
<!-----EDIT GOING ON============--------><br />
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="./javascripts/fisheye-iutil.min.js"></script><br />
<br />
<script><br />
$(function () { <br />
// Dock initialize<br />
$('#dock').Fisheye(<br />
{<br />
maxWidth: 30,<br />
items: 'a',<br />
itemsText: 'span',<br />
container: '.dock-container',<br />
itemWidth: 50,<br />
proximity: 60,<br />
alignment : 'left',<br />
valign: 'bottom',<br />
halign : 'center'<br />
}<br />
);<br />
});<br />
</script><br />
<div id="dock"><br />
<div class="dock-container"><br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
</div><!-- end div .dock-container --><br />
</div><!-- end div .dock #dock --><br />
<br />
<br />
<!-----EDITS ABOVE==========================---><br />
<br />
<br />
<br />
<!-- Navigation bar--><br />
<div id="nav"><br />
<div id="nav_wrapper"><br />
<ul><br />
<li class="nav_item_home" class="home"><a href="https://2014.igem.org/Team:IIT_Delhi">Home</a></li><li class="project"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project">Project</a></li><li class="modeling"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">Modeling</a></li><li class="team"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team">Team</a></li><li class="notebook"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">Notebook</a></li><li class="attributions"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">Attributions</a></li><li class="safety"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety">Safety</a></li><li class="parts"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts">Parts</a></li><li class="achievements"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">Achievements</a></li><br />
<br />
</ul><br />
</div><br />
</div><br />
<br />
<br />
<!--Follow us link===============--><br />
<div class="links"><br />
<p class="followus">Follow Us</p><br />
<div class="link_bg"><br />
<table border="0" cellspacing="2"><br />
<tr><br />
<td><br />
<a href="https://www.facebook.com/igemiitdelhi" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/51/Fb.png" alt="facebook" title="Facebook" onmouseover="this.src='https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/5/51/Fb.png';" /> </a> </td><br />
<br />
<td ><br />
<a href="https://twitter.com/iGEM_IIT_Delhi" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/f/f7/Twitter.png" alt="twitter" title="Twitter" onmouseover="this.src='https://static.igem.org/mediawiki/2014/5/56/Twitterhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/f/f7/Twitter.png';"/></a> </td><br />
<br />
<td><br />
<a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Youtube.png" alt="you tube" title="Youtube" onmouseover="this.src='https://static.igem.org/mediawiki/2014/9/91/Youtubehover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/a/af/Youtube.png';"/></a> </td><br />
</tr><br />
<br />
</table><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
<br />
<br />
<!--=========Incredible India=========--><br />
<div class="incredibleIndia"></div><br />
<div class="incredibleIndiaheader"><img class="mainheader" src="https://static.igem.org/mediawiki/2014/a/a7/Headerincredibleindia2.png"/><img class="centerlogo" src="https://static.igem.org/mediawiki/2014/2/22/Igem_iitdelhi_logo128PX.gif"/></div><br />
<div class="fadedbackground"><img src="https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png"/></div><br />
<div class="redpatternedbg"><img src="https://static.igem.org/mediawiki/2014/1/11/Redpattern_iitd.png"/></div><br />
<br />
<div class="textbg_iitd"><img src="https://static.igem.org/mediawiki/2014/c/ce/Textbg_iitd.png"/><br />
<div class="aboutus"><h4>Our Aim:</h4><p>We aim to genetically engineer bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of chimneys of various industries and car exhausts into harmless byproducts. NOx and SOx are well known pollutants responsible for various respiratory disorders in humans such as asthma, bronchitis etc. They help in formation of Ozone in the lower troposphere where it acts as an irritant of the skin, eyes and lungs. On the other hand, oxides of Sulfur are the main culprits behind acid rain which corrodes buildings, destroys crops and acidifies water bodies, killing aquatic life.<br><br><br />
<br />
We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would <br />
be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.<br><br><br />
<br />
Our proposed design promises easy and effective scalability. Depending on the site of installation (i.e.industrial chimney or in the exhaust of a vehicle), the volume of our inputs can be altered to obtain the desired output. Moreover, the fact that all the sub-components of our model work independently of each other means that they can be easily detached and replaced, making the system very handy. Around 56% of the population in India is still involved in agricultural activities. If the production of NOx and SOx continues unabated like today, the damaging effects of acid rain on the crops will jeopardize the livelihoods of a large section of India’s population in the future. This will have serious economic and social repercussions. And if the concentration of NOx and SOx in the atmosphere keeps building up, it will adversely affect the health of the people, particularly those who cannot pay for their treatment. Also, since our model makes use of bacteria instead of metallic catalysts to reduce the gases, the potential toxicity that can arise from metal by-products of catalyst degradation can be successfully eliminated. Hence, looking at all the positive aspects of our proposed model, we believe that it will help to create a greener and a healthier future.</p></div><br />
<br />
</div><br />
<br />
<div class="flagview"><br />
<a href="http://info.flagcounter.com/AJ8u"><img src="http://s11.flagcounter.com/count/AJ8u/bg_373737/txt_FFFFFF/border_373737/columns_3/maxflags_10/viewers_0/labels_1/pageviews_1/flags_1/" alt="Free counters!" border="0"><br />
</a><br />
</div><br />
<br />
<div class="videobackground"><br />
<div class="animatedlogo"><img src="https://static.igem.org/mediawiki/2014/1/18/Igem_iitdelhi_logo_300px.gif"/></div><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Videobg_iitd.png"/><br />
<div class="youtubevideobg"><br />
<div class="igemvideo"><br />
<video poster="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" controls="" style="width:563px; height:302px;"><br />
<source style="width:563px; height:302px;" src="https://static.igem.org/mediawiki/2014/3/30/Take_a_Stand_IGEM_IIT_DELHI_2014.mp4" type="video/mp4"><br />
<a href="https://www.youtube.com/watch?v=RSS953TgzWk"><img border="0" src="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" alt="Click to view on Youtube" width="563" height="302"></a><br />
</video><br />
</div><br />
</div><br />
<div class="fblike_share"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Figemiitdelhi&amp;width=300&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:21px;" allowTransparency="true"></iframe></div><br />
<br />
<div class="twitter_follow"><a href="https://twitter.com/iGEM_IIT_Delhi" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @iGEM_IIT_Delhi</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div><br />
<br />
</div><br />
<br />
<br />
<br />
<br />
<div class="sponsorsbg"><br />
<div class="sponsortext"><p>OUR ESTEEMED SPONSORS</p></div><br />
<div class="sponsors_iitd"><br />
<br />
<div class="sponsors_iitd2"><br />
<div class="pic1"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/63/Mahindra_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Mahindra_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic2"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/67/Idt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/4/49/Idt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic3"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/4/4f/Fitt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/5/54/Fitt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic4"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/71/Dbt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic5"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/77/Posterguy.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Posterguy_text.png" alt="Abhishek"><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
</div><!--sponsor ends--><br />
<br />
<br />
<div class="footerbg"><br />
<br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">ACHIEVEMENTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Developer: ABHISHEK BHARTI & SHASHANK YADAV </p><br />
<center>"We won a Bronze Medal at the iGEM Giant Jamboree 2014"</center></div><br />
<br />
</div><br />
<br />
<div class="gifouterdiv"><br />
<div class="gifbg"><img src="https://static.igem.org/mediawiki/2014/6/63/Story_of_ECO_COLI.gif"/></div><br />
<div class="mascotinnerlayer"><img class="mascot_iitd" src="https://static.igem.org/mediawiki/2014/8/8b/Mascot_iitdelhi.gif"/></div><br />
</div><br />
<br />
<br />
<br />
<!--Slider=================================<br />
<br />
<div class="slider2"><br />
<div class="container3"><br />
<div id="content-slider"><br />
<div id="slider"><br />
<div id="mask"><br />
<ul><br />
<li id="first" class="firstanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/2/28/Iitdelhi.jpg" alt="iit delhi" /><br />
</a><br />
</li><br />
<br />
<li id="second" class="secondanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/8/8a/Prof.jpg" alt="Discussion"/><br />
</a><br />
</li><br />
<br />
<li id="third" class="thirdanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/8/83/Presentation.jpg" alt="Presentation"/><br />
</a><br />
<br />
</li><br />
<br />
<li id="fourth" class="fourthanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/c/c7/Sponsor.jpg" alt="Sponsor"/><br />
</a><br />
</li><br />
<br />
<li id="fifth" class="fifthanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/b/b8/Team.jpg" alt="Team"/><br />
</a><br />
</li><br />
</ul><br />
</div><br />
<div class="progress-bar"></div><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
--><br />
<br />
<br />
<!--Flip Menu==============================--><br />
<!--<br />
<div id="container2" ><br />
<br />
<br />
<div class="wrapper" ><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/2/23/Projectiitd.png" width="240px" height="81px" /><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project"><br />
<span class="information"> <b> Description of our project </b></span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/c/cf/Partsiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts"><br />
<span class="information"> parts used, developed and submitted to the registry !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/b/bd/Modeling_copy.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling"><br />
<span class="information"> prediction of our results using simulink !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/1/1f/Teamiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team"><br />
<span class="information">our hardworking team !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/e/e8/Notebookiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook"><br />
<span class="information">our detailed datewise work manual !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/e/e8/Safetyiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety"><br />
<span class="information">safety form about the working conditions in our lab</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/9/9e/Attributes_copy.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions"><br />
<span class="information">attributions</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/0/02/Sponsorsiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/sponsors"><br />
<span class="information">thanks to our sponsors !</span><br />
</a><br />
</div><br />
</div><br />
<br />
</div><br />
--><br />
<!--Flip Menu ends here============== --><br />
<!--Video1================================--><br />
<br />
<!--Crowd funding========================--><br />
<br />
<br />
<!--Facebook plugin========================--><br />
<br />
<br />
<!--tweeter plugin==========================--><br />
<br />
<!--Footer===========================================--><br />
<br />
<br />
<br />
<div class="footer"><br />
<br />
<!-- Navigation bar at footer--><br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="maplink"><br />
<table class="maptable"><br />
<tr><td><a href="http://www.iitd.ac.in/" target="_blank">Indian Institute of Technology (IIT) Delhi, India</a></td><br />
<td>|</td><br />
<td><a href="https://www.google.com/maps/place/Indian+Institute+of+Technology+Delhi" target="_blank">View Map</a></td><td></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Contact: <a href="https://plus.google.com/u/0/+AbhishekBharti26/posts" target="_blank">Developer</a></p></div><br />
<br />
<br />
</div><br />
<br />
<br />
<br />
<br />
</div><br />
<br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi
Team:IIT Delhi
2015-07-22T04:34:15Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/style}}<br />
{{CSS/foundation}}<br />
{{CSS/reveal}}<br />
{{CSS/home}}<br />
{{CSS/Generic}}<br />
{{CSS/js-image-slider}}<br />
{{CSS/style2}}<br />
{{CSS/style3}}<br />
<br />
<br />
{{:Team:IIT_Delhi/index_header}}<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><br />
<meta name="description" content="iGEM 2014 IIT Delhi"><br />
<meta name="keywords" content="igem iitdelhi 2014, biotech, biobricks, parts, notebook, bio, chem, iit, delhi, hauz khas , new delhi, molecular biology, genetics, synthetic, biology, competition, iGEM, MIT, USA, abhishek, bharti"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<meta http-equiv="cache-control" content="public" /> <br />
<title>iGEM IIT Delhi 2014</title><br />
<link rel='shortcut icon' id='favicon' href='https://static.igem.org/mediawiki/2014/7/76/Favicon3.png' /><br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'><br />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'><br />
<br />
<br />
<br />
<br />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'><br />
<!--map=====================<br />
<!--Script for google map at footer--><br />
<script<br />
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"><br />
</script><br />
<br />
<script><br />
function initialize()<br />
{<br />
var mapProp = {<br />
center:new google.maps.LatLng(28.5450,77.1922),<br />
zoom:5,<br />
mapTypeId:google.maps.MapTypeId.ROADMAP<br />
};<br />
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);<br />
}<br />
<br />
google.maps.event.addDomListener(window, 'load', initialize);<br />
</script><br />
<br />
<br />
<br />
<!-------------EDITS ON------------------------><br />
<br />
<br />
<style><br />
.dock-container {<br />
position: relative;<br />
top: 10px; height: 50px; padding-left: 20px; }<br />
a.dock-item { <br />
display: block; <br />
width: 50px; position: absolute;<br />
bottom: 0; text-align: center;<br />
text-decoration: none; color: #333; }<br />
.dock-item span { display: none; padding-left: 20px; }<br />
.dock-item img { <br />
border: 0; <br />
margin: 5px 10px 0px;<br />
width: 100%;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!--------------EDITS OFF------------------------><br />
<br />
<br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><br />
<br />
<!-- Remove all empty <p> tags --><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$("p").filter( function() {<br />
return $.trim($(this).html()) == '';<br />
}).remove()<br />
});<br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<div id="fb-root"></div><br />
<script>(function(d, s, id) {<br />
var js, fjs = d.getElementsByTagName(s)[0];<br />
if (d.getElementById(id)) return;<br />
js = d.createElement(s); js.id = id;<br />
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";<br />
fjs.parentNode.insertBefore(js, fjs);<br />
}(document, 'script', 'facebook-jssdk'));</script><br />
<br />
<br />
<br />
<div class="container_home"><br />
<br />
<br />
<!--Header============================================--><br />
<div class="topblack"></div><br />
<div class="topwhite"><br />
<!--<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/c/c0/Igem_iitdelhi_logo2.gif"/></a></div>--><br />
<br />
<br />
<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/b/b4/Logo_igem_iitdelhi.png"/></a><br />
</div><br />
<br />
<div class="logotext"><img src="https://static.igem.org/mediawiki/2014/7/71/Text_iitd.jpg"/></div><br />
<br />
<br />
<div class="igemlogo"><a href="https://igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/e/e2/Igemlogo.png"/></a></div><br />
<br />
<br />
<!-----EDIT GOING ON============--------><br />
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="./javascripts/fisheye-iutil.min.js"></script><br />
<br />
<script><br />
$(function () { <br />
// Dock initialize<br />
$('#dock').Fisheye(<br />
{<br />
maxWidth: 30,<br />
items: 'a',<br />
itemsText: 'span',<br />
container: '.dock-container',<br />
itemWidth: 50,<br />
proximity: 60,<br />
alignment : 'left',<br />
valign: 'bottom',<br />
halign : 'center'<br />
}<br />
);<br />
});<br />
</script><br />
<div id="dock"><br />
<div class="dock-container"><br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a> <br />
<a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> <br />
</div><!-- end div .dock-container --><br />
</div><!-- end div .dock #dock --><br />
<br />
<br />
<!-----EDITS ABOVE==========================---><br />
<br />
<br />
<br />
<!-- Navigation bar--><br />
<div id="nav"><br />
<div id="nav_wrapper"><br />
<ul><br />
<li class="nav_item_home" class="home"><a href="https://2014.igem.org/Team:IIT_Delhi">Home</a></li><li class="project"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project">Project</a></li><li class="modeling"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">Modeling</a></li><li class="team"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team">Team</a></li><li class="notebook"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">Notebook</a></li><li class="attributions"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">Attributions</a></li><li class="safety"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety">Safety</a></li><li class="parts"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts">Parts</a></li><li class="achievements"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">Achievements</a></li><br />
<br />
</ul><br />
</div><br />
</div><br />
<br />
<br />
<!--Follow us link===============--><br />
<div class="links"><br />
<p class="followus">Follow Us</p><br />
<div class="link_bg"><br />
<table border="0" cellspacing="2"><br />
<tr><br />
<td><br />
<a href="https://www.facebook.com/igemiitdelhi" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/51/Fb.png" alt="facebook" title="Facebook" onmouseover="this.src='https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/5/51/Fb.png';" /> </a> </td><br />
<br />
<td ><br />
<a href="https://twitter.com/iGEM_IIT_Delhi" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/f/f7/Twitter.png" alt="twitter" title="Twitter" onmouseover="this.src='https://static.igem.org/mediawiki/2014/5/56/Twitterhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/f/f7/Twitter.png';"/></a> </td><br />
<br />
<td><br />
<a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Youtube.png" alt="you tube" title="Youtube" onmouseover="this.src='https://static.igem.org/mediawiki/2014/9/91/Youtubehover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/a/af/Youtube.png';"/></a> </td><br />
</tr><br />
<br />
</table><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
<br />
<br />
<!--=========Incredible India=========--><br />
<div class="incredibleIndia"></div><br />
<div class="incredibleIndiaheader"><img class="mainheader" src="https://static.igem.org/mediawiki/2014/a/a7/Headerincredibleindia2.png"/><img class="centerlogo" src="https://static.igem.org/mediawiki/2014/2/22/Igem_iitdelhi_logo128PX.gif"/></div><br />
<div class="fadedbackground"><img src="https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png"/></div><br />
<div class="redpatternedbg"><img src="https://static.igem.org/mediawiki/2014/1/11/Redpattern_iitd.png"/></div><br />
<br />
<div class="textbg_iitd"><img src="https://static.igem.org/mediawiki/2014/c/ce/Textbg_iitd.png"/><br />
<div class="aboutus"><h4>Our Aim:</h4><p>We aim to genetically engineer bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of chimneys of various industries and car exhausts into harmless byproducts. NOx and SOx are well known pollutants responsible for various respiratory disorders in humans such as asthma, bronchitis etc. They help in formation of Ozone in the lower troposphere where it acts as an irritant of the skin, eyes and lungs. On the other hand, oxides of Sulfur are the main culprits behind acid rain which corrodes buildings, destroys crops and acidifies water bodies, killing aquatic life.<br><br><br />
<br />
We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would <br />
be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.<br><br><br />
<br />
Our proposed design promises easy and effective scalability. Depending on the site of installation (i.e.industrial chimney or in the exhaust of a vehicle), the volume of our inputs can be altered to obtain the desired output. Moreover, the fact that all the sub-components of our model work independently of each other means that they can be easily detached and replaced, making the system very handy. Around 56% of the population in India is still involved in agricultural activities. If the production of NOx and SOx continues unabated like today, the damaging effects of acid rain on the crops will jeopardize the livelihoods of a large section of India’s population in the future. This will have serious economic and social repercussions. And if the concentration of NOx and SOx in the atmosphere keeps building up, it will adversely affect the health of the people, particularly those who cannot pay for their treatment. Also, since our model makes use of bacteria instead of metallic catalysts to reduce the gases, the potential toxicity that can arise from metal by-products of catalyst degradation can be successfully eliminated. Hence, looking at all the positive aspects of our proposed model, we believe that it will help to create a greener and a healthier future.</p></div><br />
<br />
</div><br />
<br />
<div class="flagview"><br />
<a href="http://info.flagcounter.com/AJ8u"><img src="http://s11.flagcounter.com/count/AJ8u/bg_373737/txt_FFFFFF/border_373737/columns_3/maxflags_10/viewers_0/labels_1/pageviews_1/flags_1/" alt="Free counters!" border="0"><br />
</a><br />
</div><br />
<br />
<div class="videobackground"><br />
<div class="animatedlogo"><img src="https://static.igem.org/mediawiki/2014/1/18/Igem_iitdelhi_logo_300px.gif"/></div><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Videobg_iitd.png"/><br />
<div class="youtubevideobg"><br />
<div class="igemvideo"><br />
<video poster="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" controls="" style="width:563px; height:302px;"><br />
<source style="width:563px; height:302px;" src="https://static.igem.org/mediawiki/2014/3/30/Take_a_Stand_IGEM_IIT_DELHI_2014.mp4" type="video/mp4"><br />
<a href="https://www.youtube.com/watch?v=RSS953TgzWk"><img border="0" src="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" alt="Click to view on Youtube" width="563" height="302"></a><br />
</video><br />
</div><br />
</div><br />
<div class="fblike_share"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Figemiitdelhi&amp;width=300&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:21px;" allowTransparency="true"></iframe></div><br />
<br />
<div class="twitter_follow"><a href="https://twitter.com/iGEM_IIT_Delhi" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @iGEM_IIT_Delhi</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div><br />
<br />
</div><br />
<br />
<br />
<br />
<br />
<div class="sponsorsbg"><br />
<div class="sponsortext"><p>OUR ESTEEMED SPONSORS</p></div><br />
<div class="sponsors_iitd"><br />
<br />
<div class="sponsors_iitd2"><br />
<div class="pic1"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/63/Mahindra_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Mahindra_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic2"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/67/Idt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/4/49/Idt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic3"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/4/4f/Fitt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/5/54/Fitt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic4"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/71/Dbt_logo.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek"><br />
</div><br />
<br />
<div class="pic5"><br />
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/77/Posterguy.png" alt="Abhishek"><br />
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Posterguy_text.png" alt="Abhishek"><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
</div><!--sponsor ends--><br />
<br />
<br />
<div class="footerbg"><br />
<br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">ACHIEVEMENTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Developer: ABHISHEK BHARTI & SHASHANK YADAV </p><br />
<center>"We won a Bronze Medal at the iGEM Giant Jamboree 2014"</center></div><br />
<br />
</div><br />
<br />
<div class="gifouterdiv"><br />
<div class="gifbg"><img src="https://static.igem.org/mediawiki/2014/6/63/Story_of_ECO_COLI.gif"/></div><br />
<div class="mascotinnerlayer"><img class="mascot_iitd" src="https://static.igem.org/mediawiki/2014/8/8b/Mascot_iitdelhi.gif"/></div><br />
</div><br />
<br />
<br />
<br />
<!--Slider=================================<br />
<br />
<div class="slider2"><br />
<div class="container3"><br />
<div id="content-slider"><br />
<div id="slider"><br />
<div id="mask"><br />
<ul><br />
<li id="first" class="firstanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/2/28/Iitdelhi.jpg" alt="iit delhi" /><br />
</a><br />
</li><br />
<br />
<li id="second" class="secondanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/8/8a/Prof.jpg" alt="Discussion"/><br />
</a><br />
</li><br />
<br />
<li id="third" class="thirdanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/8/83/Presentation.jpg" alt="Presentation"/><br />
</a><br />
<br />
</li><br />
<br />
<li id="fourth" class="fourthanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/c/c7/Sponsor.jpg" alt="Sponsor"/><br />
</a><br />
</li><br />
<br />
<li id="fifth" class="fifthanimation"><br />
<a href="#"><br />
<img src="https://static.igem.org/mediawiki/2014/b/b8/Team.jpg" alt="Team"/><br />
</a><br />
</li><br />
</ul><br />
</div><br />
<div class="progress-bar"></div><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
--><br />
<br />
<br />
<!--Flip Menu==============================--><br />
<!--<br />
<div id="container2" ><br />
<br />
<br />
<div class="wrapper" ><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/2/23/Projectiitd.png" width="240px" height="81px" /><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project"><br />
<span class="information"> <b> Description of our project </b></span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/c/cf/Partsiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts"><br />
<span class="information"> parts used, developed and submitted to the registry !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/b/bd/Modeling_copy.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling"><br />
<span class="information"> prediction of our results using simulink !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/1/1f/Teamiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team"><br />
<span class="information">our hardworking team !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/e/e8/Notebookiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook"><br />
<span class="information">our detailed datewise work manual !</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/e/e8/Safetyiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety"><br />
<span class="information">safety form about the working conditions in our lab</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/9/9e/Attributes_copy.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions"><br />
<span class="information">attributions</span><br />
</a><br />
</div><br />
</div><br />
<div class="wrapper"><br />
<div class="item"><br />
<img src="https://static.igem.org/mediawiki/2014/0/02/Sponsorsiitd.png" width="240px" height="81px"/><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/sponsors"><br />
<span class="information">thanks to our sponsors !</span><br />
</a><br />
</div><br />
</div><br />
<br />
</div><br />
--><br />
<!--Flip Menu ends here============== --><br />
<!--Video1================================--><br />
<br />
<!--Crowd funding========================--><br />
<br />
<br />
<!--Facebook plugin========================--><br />
<br />
<br />
<!--tweeter plugin==========================--><br />
<br />
<!--Footer===========================================--><br />
<br />
<br />
<br />
<div class="footer"><br />
<br />
<!-- Navigation bar at footer--><br />
<div class="nav2"><br />
<table class="nav2table"><br />
<tr><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td><br />
<td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><br />
</tr><br />
</table><br />
</div><br />
<div class="maplink"><br />
<table class="maptable"><br />
<tr><td><a href="http://www.iitd.ac.in/" target="_blank">Indian Institute of Technology (IIT) Delhi, India</a></td><br />
<td>|</td><br />
<td><a href="https://www.google.com/maps/place/Indian+Institute+of+Technology+Delhi" target="_blank">View Map</a></td><td></td><br />
</tr><br />
</table><br />
</div><br />
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Contact: <a href="https://plus.google.com/u/0/+AbhishekBharti26/posts" target="_blank">Developer</a></p></div><br />
<br />
<br />
</div><br />
<br />
<br />
<br />
<br />
</div><br />
<br />
</body><br />
</html><br />
{{:Team:IIT_Delhi/index_footer}}</div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T08:35:37Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<br />
<br />
<div class="main"><br />
<div class="heading"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<br />
<br />
<div class="below"><br />
<footer><br />
<a href="#about" class="btn btn-circle page-scroll"><br />
<i class="fa fa-angle-double-down animated"></i><br />
</a><br />
</footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
<section id="about" ><br />
<br />
<h2>About Grayscale</h2><br />
<p>Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on <a href="http://startbootstrap.com/template-overviews/grayscale/">the preview page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p><br />
<p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p><br />
<p>Grayscale includes full HTML, CSS, and custom JavaScript files along with LESS files for easy customization.</p><br />
</section><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T08:26:09Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
{{JavaScript/bootstrap1}}<br />
{{javascript/bootstrap_min1}}<br />
{{Javascript/jquery}}<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<br />
<br />
<div class="main"><br />
<div class="heading"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<br />
<br />
<div class="below"><br />
<footer><br />
<a href="#about" class="btn btn-circle page-scroll"><br />
<i class="fa fa-angle-double-down animated"></i><br />
</a><br />
</footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
<section id="about" ><br />
<br />
<h2>About Grayscale</h2><br />
<p>Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on <a href="http://startbootstrap.com/template-overviews/grayscale/">the preview page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p><br />
<p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p><br />
<p>Grayscale includes full HTML, CSS, and custom JavaScript files along with LESS files for easy customization.</p><br />
</section><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T08:20:41Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<br />
<br />
<div class="main"><br />
<div class="heading"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<br />
<br />
<div class="below"><br />
<footer><br />
<a href="#about" class="btn btn-circle page-scroll"><br />
<i class="fa fa-angle-double-down animated"></i><br />
</a><br />
</footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
<section id="about" ><br />
<br />
<h2>About Grayscale</h2><br />
<p>Grayscale is a free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, simply download the template on <a href="http://startbootstrap.com/template-overviews/grayscale/">the preview page</a>. The theme is open source, and you can use it for any purpose, personal or commercial.</p><br />
<p>This theme features stock photos by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Maps skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p><br />
<p>Grayscale includes full HTML, CSS, and custom JavaScript files along with LESS files for easy customization.</p><br />
</section><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T07:53:16Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<br />
<br />
<div class="main"><br />
<div class="heading"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<br />
<br />
<div class="below"><br />
<footer></footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:52:23Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
<br />
<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:42:22Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
.heading{<br />
position:absolute;<br />
top:20px;<br />
}<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
<br />
<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T07:38:42Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
{{CSS/style}}<br />
{{CSS/foundation}}<br />
{{CSS/reveal}}<br />
{{CSS/home}}<br />
{{CSS/Generic}}<br />
{{CSS/js-image-slider}}<br />
{{CSS/style2}}<br />
{{CSS/style3}}<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<div id="nav"><br />
<div id="nav_wrapper"><br />
<ul><br />
<li class="nav_item_home" class="home"><a href="https://2014.igem.org/Team:IIT_Delhi">Home</a></li><li class="project"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Project">Project</a></li><li class="modeling"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">Modeling</a></li><li class="team"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Team">Team</a></li><li class="notebook"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">Notebook</a></li><li class="attributions"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">Attributions</a></li><li class="safety"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Safety">Safety</a></li><li class="parts"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Parts">Parts</a></li><li class="achievements"><br />
<a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">Achievements</a></li><br />
<br />
</ul><br />
</div><br />
</div><br />
<br />
<br />
<!--Follow us link===============--><br />
<div class="links"><br />
<p class="followus">Follow Us</p><br />
<div class="link_bg"><br />
<table border="0" cellspacing="2"><br />
<tr><br />
<td><br />
<a href="https://www.facebook.com/igemiitdelhi" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/51/Fb.png" alt="facebook" title="Facebook" onmouseover="this.src='https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/5/51/Fb.png';" /> </a> </td><br />
<br />
<td ><br />
<a href="https://twitter.com/iGEM_IIT_Delhi" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/f/f7/Twitter.png" alt="twitter" title="Twitter" onmouseover="this.src='https://static.igem.org/mediawiki/2014/5/56/Twitterhover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/f/f7/Twitter.png';"/></a> </td><br />
<br />
<td><br />
<a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" target="_blank" ><br />
<img src="https://static.igem.org/mediawiki/2014/a/af/Youtube.png" alt="you tube" title="Youtube" onmouseover="this.src='https://static.igem.org/mediawiki/2014/9/91/Youtubehover.png';"<br />
onmouseout="this.src='https://static.igem.org/mediawiki/2014/a/af/Youtube.png';"/></a> </td><br />
</tr><br />
<br />
</table><br />
</div><br />
<br />
<br />
</div><br />
</div><br />
<br />
<br />
<br />
<div class="main"><br />
<div class="heading"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<br />
<br />
<div class="below"><br />
<footer></footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T07:33:31Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<br />
<div class="main"><br />
<div class="heading"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<br />
<br />
<div class="below"><br />
<footer></footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:32:53Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
<br />
<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:30:52Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
<br />
* {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
<br />
<br />
#robot {<br />
position: absolute;<br />
height: 20vh;<br />
width: 20vh;<br />
left: 0;<br />
margin: 0 auto;<br />
-webkit-animation: robot 1.8 infinite ease-in-out;<br />
animation: robot 1.8 infinite ease-in-out;<br />
z-index: 2;<br />
}<br />
#robot div {<br />
position: absolute;<br />
-webkit-transform-origin: 50% 0;<br />
-ms-transform-origin: 50% 0;<br />
transform-origin: 50% 0;<br />
}<br />
#robot .r div {<br />
background: #29516D;<br />
}<br />
#robot .l div {<br />
background: #326384;<br />
}<br />
#robot .leg.r, #robot .arm.l {<br />
-webkit-animation: trans 1.8s 0.9s infinite ease-in-out;<br />
animation: trans 1.8s 0.9s infinite ease-in-out;<br />
}<br />
#robot .leg.l, #robot .arm.r {<br />
-webkit-animation: trans 1.8s infinite ease-in-out;<br />
animation: trans 1.8s infinite ease-in-out;<br />
}<br />
#robot .head {<br />
top: 10vh;<br />
left: 5vh;<br />
width: 9vh;<br />
height: 10vh;<br />
margin: 0 auto;<br />
-webkit-transform-origin: 20% 150%;<br />
-ms-transform-origin: 20% 150%;<br />
transform-origin: 20% 150%;<br />
-webkit-animation: head 1.8s infinite ease-in-out;<br />
animation: head 1.8s infinite ease-in-out;<br />
background: #326384;<br />
}<br />
#robot .arm {<br />
left: 5vh;<br />
top: 20.5vh;<br />
width: 8vh;<br />
height: 5.5vh;<br />
}<br />
#robot .arm div {<br />
top: 100%;<br />
left: 0;<br />
width: 100%;<br />
height: 10vh;<br />
box-sizing: border-box;<br />
-webkit-transform: rotate(5deg);<br />
-ms-transform: rotate(5deg);<br />
transform: rotate(5deg);<br />
-webkit-animation: arms 1.8s infinite ease-in-out;<br />
animation: arms 1.8s infinite ease-in-out;<br />
}<br />
#robot .arm.l div {<br />
-webkit-animation-delay: -0.9s;<br />
animation-delay: -0.9s;<br />
}<br />
#robot .leg {<br />
top: 45vh;<br />
left: 5vh;<br />
width: 8vh;<br />
height: 4vh;<br />
}<br />
#robot .leg div {<br />
width: 100%;<br />
height: 15vh;<br />
top: 100%;<br />
-webkit-animation: legs1 1.8s infinite ease-in-out;<br />
animation: legs1 1.8s infinite ease-in-out;<br />
}<br />
#robot .leg div div {<br />
-webkit-animation: legs2 1.8s infinite ease-in-out;<br />
animation: legs2 1.8s infinite ease-in-out;<br />
}<br />
#robot .leg.r div {<br />
-webkit-animation-delay: -0.9s;<br />
animation-delay: -0.9s;<br />
}<br />
<br />
.shadow {<br />
position: absolute;<br />
width: 22vh;<br />
height: 3vh;<br />
margin: 0 auto;<br />
bottom: 27px;<br />
border-radius: 50%;<br />
background: #05314f;<br />
-webkit-animation: shadow 1.8s infinite ease-in-out;<br />
animation: shadow 1.8s infinite ease-in-out;<br />
z-index: 1;<br />
}<br />
<br />
/**************************************************************************************/<br />
@-webkit-keyframes robot {<br />
0%, 50%, 100% {<br />
-webkit-transform: translateY(0vh) rotate(0.5deg);<br />
transform: translateY(0vh) rotate(0.5deg);<br />
}<br />
15%, 65% {<br />
-webkit-transform: translateY(-1vh) rotate(-0.2deg);<br />
transform: translateY(-1vh) rotate(-0.2deg);<br />
}<br />
}<br />
@keyframes robot {<br />
0%, 50%, 100% {<br />
-webkit-transform: translateY(0vh) rotate(0.5deg);<br />
transform: translateY(0vh) rotate(0.5deg);<br />
}<br />
15%, 65% {<br />
-webkit-transform: translateY(-1vh) rotate(-0.2deg);<br />
transform: translateY(-1vh) rotate(-0.2deg);<br />
}<br />
}<br />
@-webkit-keyframes trans {<br />
0%, 100% {<br />
-webkit-transform: translateX(0vh);<br />
transform: translateX(0vh);<br />
}<br />
50% {<br />
-webkit-transform: translateX(1.2vh);<br />
transform: translateX(1.2vh);<br />
}<br />
}<br />
@keyframes trans {<br />
0%, 100% {<br />
-webkit-transform: translateX(0vh);<br />
transform: translateX(0vh);<br />
}<br />
50% {<br />
-webkit-transform: translateX(1.2vh);<br />
transform: translateX(1.2vh);<br />
}<br />
}<br />
@-webkit-keyframes head {<br />
0%, 100% {<br />
-webkit-transform: rotate(-1deg);<br />
transform: rotate(-1deg);<br />
}<br />
25%, 75% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@keyframes head {<br />
0%, 100% {<br />
-webkit-transform: rotate(-1deg);<br />
transform: rotate(-1deg);<br />
}<br />
25%, 75% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@-webkit-keyframes arms {<br />
0%, 100% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(-10deg);<br />
transform: rotate(-10deg);<br />
}<br />
}<br />
@keyframes arms {<br />
0%, 100% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(-10deg);<br />
transform: rotate(-10deg);<br />
}<br />
}<br />
@-webkit-keyframes legs1 {<br />
0%, 100% {<br />
-webkit-transform: rotate(10deg);<br />
transform: rotate(10deg);<br />
}<br />
45% {<br />
-webkit-transform: rotate(-15deg);<br />
transform: rotate(-15deg);<br />
}<br />
}<br />
@keyframes legs1 {<br />
0%, 100% {<br />
-webkit-transform: rotate(10deg);<br />
transform: rotate(10deg);<br />
}<br />
45% {<br />
-webkit-transform: rotate(-15deg);<br />
transform: rotate(-15deg);<br />
}<br />
}<br />
@-webkit-keyframes legs2 {<br />
0%, 100% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
33% {<br />
-webkit-transform: rotate(20deg);<br />
transform: rotate(20deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@keyframes legs2 {<br />
0%, 100% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
33% {<br />
-webkit-transform: rotate(20deg);<br />
transform: rotate(20deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@-webkit-keyframes shadow {<br />
0%, 50%, 100% {<br />
-webkit-transform: scale(1.02);<br />
transform: scale(1.02);<br />
}<br />
25%, 75% {<br />
-webkit-transform: scale(0.98);<br />
transform: scale(0.98);<br />
}<br />
}<br />
@keyframes shadow {<br />
0%, 50%, 100% {<br />
-webkit-transform: scale(1.02);<br />
transform: scale(1.02);<br />
}<br />
25%, 75% {<br />
-webkit-transform: scale(0.98);<br />
transform: scale(0.98);<br />
}<br />
}<br />
<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:30:24Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
<br />
* {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
<br />
<br />
#robot {<br />
position: absolute;<br />
height: 78vh;<br />
width: 20vh;<br />
left: 0;<br />
margin: 0 auto;<br />
-webkit-animation: robot 1.8 infinite ease-in-out;<br />
animation: robot 1.8 infinite ease-in-out;<br />
z-index: 2;<br />
}<br />
#robot div {<br />
position: absolute;<br />
-webkit-transform-origin: 50% 0;<br />
-ms-transform-origin: 50% 0;<br />
transform-origin: 50% 0;<br />
}<br />
#robot .r div {<br />
background: #29516D;<br />
}<br />
#robot .l div {<br />
background: #326384;<br />
}<br />
#robot .leg.r, #robot .arm.l {<br />
-webkit-animation: trans 1.8s 0.9s infinite ease-in-out;<br />
animation: trans 1.8s 0.9s infinite ease-in-out;<br />
}<br />
#robot .leg.l, #robot .arm.r {<br />
-webkit-animation: trans 1.8s infinite ease-in-out;<br />
animation: trans 1.8s infinite ease-in-out;<br />
}<br />
#robot .head {<br />
top: 10vh;<br />
left: 5vh;<br />
width: 9vh;<br />
height: 10vh;<br />
margin: 0 auto;<br />
-webkit-transform-origin: 20% 150%;<br />
-ms-transform-origin: 20% 150%;<br />
transform-origin: 20% 150%;<br />
-webkit-animation: head 1.8s infinite ease-in-out;<br />
animation: head 1.8s infinite ease-in-out;<br />
background: #326384;<br />
}<br />
#robot .arm {<br />
left: 5vh;<br />
top: 20.5vh;<br />
width: 8vh;<br />
height: 5.5vh;<br />
}<br />
#robot .arm div {<br />
top: 100%;<br />
left: 0;<br />
width: 100%;<br />
height: 10vh;<br />
box-sizing: border-box;<br />
-webkit-transform: rotate(5deg);<br />
-ms-transform: rotate(5deg);<br />
transform: rotate(5deg);<br />
-webkit-animation: arms 1.8s infinite ease-in-out;<br />
animation: arms 1.8s infinite ease-in-out;<br />
}<br />
#robot .arm.l div {<br />
-webkit-animation-delay: -0.9s;<br />
animation-delay: -0.9s;<br />
}<br />
#robot .leg {<br />
top: 45vh;<br />
left: 5vh;<br />
width: 8vh;<br />
height: 4vh;<br />
}<br />
#robot .leg div {<br />
width: 100%;<br />
height: 15vh;<br />
top: 100%;<br />
-webkit-animation: legs1 1.8s infinite ease-in-out;<br />
animation: legs1 1.8s infinite ease-in-out;<br />
}<br />
#robot .leg div div {<br />
-webkit-animation: legs2 1.8s infinite ease-in-out;<br />
animation: legs2 1.8s infinite ease-in-out;<br />
}<br />
#robot .leg.r div {<br />
-webkit-animation-delay: -0.9s;<br />
animation-delay: -0.9s;<br />
}<br />
<br />
.shadow {<br />
position: absolute;<br />
width: 22vh;<br />
height: 3vh;<br />
margin: 0 auto;<br />
bottom: 27px;<br />
border-radius: 50%;<br />
background: #05314f;<br />
-webkit-animation: shadow 1.8s infinite ease-in-out;<br />
animation: shadow 1.8s infinite ease-in-out;<br />
z-index: 1;<br />
}<br />
<br />
/**************************************************************************************/<br />
@-webkit-keyframes robot {<br />
0%, 50%, 100% {<br />
-webkit-transform: translateY(0vh) rotate(0.5deg);<br />
transform: translateY(0vh) rotate(0.5deg);<br />
}<br />
15%, 65% {<br />
-webkit-transform: translateY(-1vh) rotate(-0.2deg);<br />
transform: translateY(-1vh) rotate(-0.2deg);<br />
}<br />
}<br />
@keyframes robot {<br />
0%, 50%, 100% {<br />
-webkit-transform: translateY(0vh) rotate(0.5deg);<br />
transform: translateY(0vh) rotate(0.5deg);<br />
}<br />
15%, 65% {<br />
-webkit-transform: translateY(-1vh) rotate(-0.2deg);<br />
transform: translateY(-1vh) rotate(-0.2deg);<br />
}<br />
}<br />
@-webkit-keyframes trans {<br />
0%, 100% {<br />
-webkit-transform: translateX(0vh);<br />
transform: translateX(0vh);<br />
}<br />
50% {<br />
-webkit-transform: translateX(1.2vh);<br />
transform: translateX(1.2vh);<br />
}<br />
}<br />
@keyframes trans {<br />
0%, 100% {<br />
-webkit-transform: translateX(0vh);<br />
transform: translateX(0vh);<br />
}<br />
50% {<br />
-webkit-transform: translateX(1.2vh);<br />
transform: translateX(1.2vh);<br />
}<br />
}<br />
@-webkit-keyframes head {<br />
0%, 100% {<br />
-webkit-transform: rotate(-1deg);<br />
transform: rotate(-1deg);<br />
}<br />
25%, 75% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@keyframes head {<br />
0%, 100% {<br />
-webkit-transform: rotate(-1deg);<br />
transform: rotate(-1deg);<br />
}<br />
25%, 75% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@-webkit-keyframes arms {<br />
0%, 100% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(-10deg);<br />
transform: rotate(-10deg);<br />
}<br />
}<br />
@keyframes arms {<br />
0%, 100% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(-10deg);<br />
transform: rotate(-10deg);<br />
}<br />
}<br />
@-webkit-keyframes legs1 {<br />
0%, 100% {<br />
-webkit-transform: rotate(10deg);<br />
transform: rotate(10deg);<br />
}<br />
45% {<br />
-webkit-transform: rotate(-15deg);<br />
transform: rotate(-15deg);<br />
}<br />
}<br />
@keyframes legs1 {<br />
0%, 100% {<br />
-webkit-transform: rotate(10deg);<br />
transform: rotate(10deg);<br />
}<br />
45% {<br />
-webkit-transform: rotate(-15deg);<br />
transform: rotate(-15deg);<br />
}<br />
}<br />
@-webkit-keyframes legs2 {<br />
0%, 100% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
33% {<br />
-webkit-transform: rotate(20deg);<br />
transform: rotate(20deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@keyframes legs2 {<br />
0%, 100% {<br />
-webkit-transform: rotate(2deg);<br />
transform: rotate(2deg);<br />
}<br />
33% {<br />
-webkit-transform: rotate(20deg);<br />
transform: rotate(20deg);<br />
}<br />
50% {<br />
-webkit-transform: rotate(0deg);<br />
transform: rotate(0deg);<br />
}<br />
}<br />
@-webkit-keyframes shadow {<br />
0%, 50%, 100% {<br />
-webkit-transform: scale(1.02);<br />
transform: scale(1.02);<br />
}<br />
25%, 75% {<br />
-webkit-transform: scale(0.98);<br />
transform: scale(0.98);<br />
}<br />
}<br />
@keyframes shadow {<br />
0%, 50%, 100% {<br />
-webkit-transform: scale(1.02);<br />
transform: scale(1.02);<br />
}<br />
25%, 75% {<br />
-webkit-transform: scale(0.98);<br />
transform: scale(0.98);<br />
}<br />
}<br />
<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T07:29:20Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<br />
<div class="main"><br />
<div class="heading"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<div id="robot"><br />
<div class="head"></div><br />
<div class="arm l"><div><div></div></div></div><br />
<div class="leg l"><div><div></div></div></div><br />
<div class="leg r"><div><div></div></div></div><br />
<div class="arm r"><div><div></div></div></div><br />
</div><br />
<div class="shadow"></div><br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<br />
<br />
<div class="below"><br />
<footer></footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:22:40Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:21:56Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:17:44Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
right:0;<br />
margit-top:150%;<br />
margin-left:150%;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:16:48Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
right:0;<br />
<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:15:02Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
.heading{<br />
position:absolute;<br />
top:0;<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 0;<br />
right:0;<br />
<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:14:16Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
.heading{<br />
position:absolute;<br />
top:0;<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
right:0;<br />
<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:13:17Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
.heading{<br />
position:absolute;<br />
top:0;<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
right:0;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:11:00Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
.heading{<br />
position:absolute;<br />
top:0;<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T07:10:36Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<div class="main"><br />
<div class="heading"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<div><br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
</div><br />
<br />
<div class="below"><br />
<footer></footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:09:24Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
.title{<br />
top:0;<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:08:36Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
.main{<br />
top:0;<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T07:08:11Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
<br />
.main{<br />
top:10%;<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T07:07:38Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<div class="main"><br />
<div class="title"><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<div><br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
</div><br />
<br />
<div class="below"><br />
<footer></footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:48:17Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -70px);<br />
transform: translate(0, -70px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:46:15Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 7vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 90vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:43:37Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
.below{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 20vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 75vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T06:43:02Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<div class="below"><br />
<footer></footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</div><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:41:31Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
div{<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 20vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 75vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:40:30Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
<br />
<br />
}<br />
<br />
<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 20vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 75vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:38:56Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 20vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 75vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:31:04Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
body {<br />
background: white;<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 20vh;<br />
background:red;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 75vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: red;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 20px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:23:53Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
body {<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
<br />
width: 100%;<br />
height: 20vh;<br />
background: #fff;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 80vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 20px;<br />
background: #fff;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 40px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:21:35Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
body {<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: relative;<br />
bottom: 0;<br />
top:75%;<br />
width: 100%;<br />
height: 50vh;<br />
background: #fff;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 80vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 50px;<br />
background: #fff;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 40px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:20:48Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
body {<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: relative;<br />
bottom: 0;<br />
top:75%;<br />
width: 100%;<br />
height: 50vh;<br />
background: #fff;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 52vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 50px;<br />
background: #fff;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 40px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:19:46Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
body {<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: relative;<br />
bottom: 0;<br />
<br />
width: 100%;<br />
height: 50vh;<br />
background: #fff;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 52vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 50px;<br />
background: #fff;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 40px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:19:04Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
body {<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
top:90%<br />
width: 100%;<br />
<br />
background: #fff;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 52vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 50px;<br />
background: #fff;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 40px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:18:18Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
body {<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
top:75%<br />
width: 100%;<br />
<br />
background: #fff;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 52vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 50px;<br />
background: #fff;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 40px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:15:32Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
body {<br />
background: #d23333;<br />
overflow: hidden;<br />
-webkit-filter: url("#goo");<br />
filter: url("#goo");<br />
}<br />
<br />
footer {<br />
position: absolute;<br />
bottom: 0;<br />
width: 100%;<br />
height: 50vh;<br />
background: #fff;<br />
}<br />
<br />
<br />
.bubble {<br />
position: absolute;<br />
top: 52vh;<br />
left: 45%;<br />
width: 50px;<br />
height: 50px;<br />
background: #fff;<br />
border-radius: 50%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
.bubble:nth-child(2) {<br />
left: 50%;<br />
width: 40px;<br />
height: 40px;<br />
-webkit-animation: loader 2.6s ease-in-out infinite;<br />
animation: loader 2.6s ease-in-out infinite;<br />
}<br />
<br />
.bubble:nth-child(3) {<br />
left: 55%;<br />
-webkit-animation: loader 1.3s ease-in-out infinite;<br />
animation: loader 1.3s ease-in-out infinite;<br />
}<br />
<br />
@keyframes loader {<br />
0% {<br />
-webkit-transform: translate(0, 0);<br />
transform: translate(0, 0);<br />
}<br />
50% {<br />
-webkit-transform: translate(0, -100px);<br />
transform: translate(0, -100px);<br />
}<br />
<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Team:IIT_Delhi/newpage
Team:IIT Delhi/newpage
2015-06-09T06:14:19Z
<p>Shashank dbeb iitd: </p>
<hr />
<div>{{CSS/Main}}<br />
{{CSS/newpage}}<br />
<br />
<br />
<br />
<html><br />
<head><br />
<title>third</title><br />
</head><br />
<body><br />
<span data-text="i"></span><br />
<span data-text="G"></span><br />
<span data-text="E"></span><br />
<span data-text="M"></span><br />
<span data-text="-"></span><br />
<span data-text="I"></span><br />
<span data-text="I"></span><br />
<span data-text="T"></span><br />
<span data-text="D"></span><br />
<svg class="butterfly" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" xml:space="preserve"><br />
<defs><br />
<filter id="blur" x="0" y="0" width="100%" height="100%"><br />
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" /><br />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><br />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /><br />
</filter><br />
</defs><br />
<g id="Body" filter="url(#blur)"><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.4,358.2c0,0-3,5.399,1.8,7.8c7.2,3.6,13.899-8.5,9.1-12.1<br />
c-4.899-3.601-10.7-1.4-14.1,7.3c-3.9,9.7,11.1,12.1,17.5,4.7c4.6-5.301,5.3-10.601,0.8-17C366,342.6,355,347.3,351.1,357.6"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M465.2,150.8c0,0,42.5,9.6,14.399,54.9<br />
C451.5,251,411,265.5,411,265.5"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M399.3,312.3c-0.2,0.4-0.1,0.8,0.2,1.101c0.4,0.3,1,0.199,1.3-0.301<br />
c0.4-0.6,0.2-1.3-0.3-1.699c-0.7-0.5-1.6-0.301-2.1,0.399c-0.601,0.9-0.301,2,0.5,2.601c1.1,0.699,2.5,0.399,3.3-0.7<br />
c0.899-1.4,0.5-3.2-0.8-4.101c-1.7-1.1-4-0.699-5.101,1c-1.399,2.101-0.8,5,1.3,6.4c2.601,1.7,6.2,1,7.9-1.6<br />
c2.2-3.301,1.3-7.7-2-9.9c-4.1-2.7-9.7-1.6-12.4,2.5c-3.399,5.2-2,12.1,3.2,15.5c6.4,4.3,15.101,2.5,19.4-4c0,0,8.6-8.7,0-20.1<br />
C405.1,288,386.8,300,383.6,313.5c-3.1,13.5-15.399,8.1-29.899,38.7c-14.601,30.7-32.2,45.3-46.9,55.1s-22.1,20.8,1.5,13.9<br />
c23.7-6.9,29.7-22.101,47-39.9c17.3-17.7,28.3-26.5,40.9-34.7c0,0,21.6-16.1,21.3-40.8c-0.1-9.8,1.3-10.3,1.3-10.3<br />
c8.7-3,13.3-12.5,10.3-21.2c-2.399-7-10-10.7-17-8.3c-5.6,1.9-8.5,8-6.6,13.6c1.5,4.5,6.4,6.801,10.9,5.301<br />
c3.6-1.2,5.5-5.101,4.199-8.7c-1-2.9-4.1-4.4-6.899-3.4c-2.3,0.8-3.5,3.3-2.7,5.601c0.6,1.8,2.6,2.8,4.4,2.199<br />
c1.5-0.5,2.199-2.1,1.699-3.6c-0.399-1.2-1.699-1.8-2.8-1.4c-0.899,0.301-1.399,1.301-1.1,2.301c0.3,0.699,1.1,1.1,1.8,0.899<br />
c0.6-0.2,0.9-0.899,0.7-1.5c-0.2-0.5-0.7-0.7-1.2-0.6c-0.4,0.1-0.6,0.5-0.5,0.899"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.8,338.7c0.3,0.2,0.7,0.1,0.9-0.2c0.3-0.4,0.2-0.9-0.2-1.2<br />
c-0.5-0.3-1.1-0.2-1.5,0.3c-0.4,0.601-0.3,1.4,0.4,1.801c0.8,0.5,1.8,0.3,2.3-0.4c0.6-0.9,0.399-2.2-0.5-2.9<br />
c-1.2-0.8-2.8-0.5-3.601,0.7c-1,1.5-0.6,3.5,0.9,4.5c1.8,1.3,4.3,0.8,5.6-1.1c1.601-2.3,1-5.4-1.3-7c-2.899-2-6.8-1.2-8.8,1.7<br />
c-2.4,3.6-1.5,8.5,2.1,10.899c0,0,12,11,24.101-2.7c12.2-13.699-7.9-27-18.7-21"/><br />
<path fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M407.9,141.8c0,0,23.5-28.7,45.699,8.9<br />
c27.7,46.9-44.899,116.1-44.899,116.1"/><br />
</g><br />
<g id="TopRed" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M383.6,313.1c0,0,75.101-109.7-12-224.7<br />
c-87.1-115-184.1-51.6-175.7-12.9c5.4,25,36.1,24,36.1,24"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M382.3,313.1c0,0,90.2-117.6-49.2-224.1c-16.5-12.6-67.5-35.2-83.1,0<br />
c-8,18,13.7,36.8,40,28.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M381,316c0,0,45.4-61.7,15.2-135s-77-69.2-98.5-65.3<br />
c-21.5,3.9-29.046,21.389-21.601,29.1c8.4,8.7,28.439-2.966,18.4-17.471"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379.7,316c0,0,29-37.7,10.3-98.9c-18.7-61.2-89.8-48.6-80.5-8.1<br />
c5.8,25.2,33.9,16.1,35.4,4.4c1.5-11.7-5.601-17.8-15.2-14.1c-9.601,3.7-8.4,18.2,0,17.9c12.2-0.4,8.1-13.3,0-9.3"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M378,316c0,0,32-55.8-20.5-76.2c-47.8-18.5-83.3-9.9-99.1-33.6<br />
c-24.9-37.4,32.1-61.6,37.6-27.6c4,24.7-26,24.1-27.9,11.5c-1-6.8,2.301-13.5,9.5-15"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M379,317.5c0,0,23-46.2-24.8-69.4c-47.8-23.2-104.6-7.5-127-33.2<br />
c-21.5-24.7,7.2-40.6,17.2-28.4c10,12.2-0.1,25.7-9.8,19.8c-7.7-4.7-2.2-12.7-2.2-12.7"/><br />
</g><br />
<g id="Bottom_Blue" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M368.559,327.25c0,0,7.283-37.746-44.263-51.248<br />
s-63.202,11.9-108.749-23.426s-73.699,11.547-54.498,30.735s41.576-0.437,32.776-15.388C186.52,255.514,170.125,263,176,274"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M205.777,246.073c0,0-40.278-24.906-65.611,17.094<br />
s15.417,66.666,30.059,44.199c2.543-3.903,4.775-12.533-5.21-17.894c-11.976-6.429-20.464,7.152-14.161,13.944<br />
c6.188,6.667,13.501,0.858,12.705-4.552c-0.851-5.781-9.339-5.91-9.259,0c0.075,5.553,6.617,5.011,6,0.734<br />
c-0.434-3.009-4.383-1.766-3.503,0.357c0.593,1.431,2.162,0.752,1.454-0.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M367.2,326.5c0,0,1.661-45.241-47.95-42.995<br />
c-27.5,1.245-26.5,17.995-51,23.745c-31.754,7.452-36.218-22.207-24.9-30.562s28.713-3.179,28.849,9.983<br />
s-15.887,17.316-21.073,8.078c-4-7.125,1.886-13.922,8.109-12.456c5.141,1.211,4.349,8.164,1.391,8.956"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M366.223,327.25c0,0,0-53.5-57.648-34.066<br />
C290.216,299.372,283,314.5,241,330.438c-20.995,7.967-50,2.315-52.923-23.196c-4.126-36.012,49.914-38.5,47.098-9.24<br />
C233.25,318,208.75,317.5,208.25,302.75c-0.297-8.777,8.325-15.175,16-7.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M362.7,331.834c0,0-21.495,4.024-82.646,67.209<br />
c-57.221,59.124-120.791,18.125-119.006-16.209s23.333-48.263,47.559-44.465s37.071,39.867,12.986,53.618<br />
c-32.427,18.514-49.447-17.409-27.395-30.773c21.801-13.213,35.027,10.19,17.356,19.714c-11.888,6.406-16.513-4.936-13.255-9.428<br />
c3.867-5.332,7.949-3.578,10.867-0.832"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M140.483,395.306c-0.695,0.695-0.695,1.821,0,2.518<br />
c0.87,0.87,2.279,0.869,3.148,0c1.086-1.086,1.086-2.848,0-3.935c-1.359-1.358-3.561-1.358-4.919,0<br />
c-1.698,1.698-1.698,4.451,0,6.148c2.122,2.123,5.563,2.123,7.685,0c2.653-2.653,2.653-6.954,0-9.606<br />
c-3.316-3.316-8.692-3.316-12.008,0c-4.145,4.145-4.145,10.865,0,15.01c5.182,5.183,13.779,5.373,18.763,0<br />
c4.311-4.647,4.863-11.809,5.754-24.694c0.457-6.604,2.953-14.318,6.078-17.818"/><br />
</g><br />
<g id="Bottom_Green" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M364.167,331.167c0,0-26.122,8.846-68.895,61.423<br />
S161.19,457.214,116.5,403.167s19.323-94.415,41-52.667c9,17.333-9.47,35.587-26.22,33.976<br />
c-18.483-1.778-21.68-23.96-10.256-34.976c14-13.5,36.408-0.846,29.142,17c-5.979,14.686-30.493,10.667-25.333-5<br />
c2.353-7.144,12.18-8.311,12.667,1.428"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M355.5,344.313c0,0-27.797,10.813-68.5,70.687<br />
c-48.833,71.833-147.026,82.017-209.167,52.833C35.507,447.955,9.701,403.584,19.45,358.144C27.5,320.62,69,314.5,80.5,353"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M290.1,410.707c0,0-69.6,89.293-175.1,32.393<br />
c-76.153-41.072-27.25-84.85-16-55.6"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M121.024,446.211c0,0-33.024-14.461-30.524-36.211<br />
c2.447-21.291,23.962-16.03,23.538-3.508c-0.288,8.508-8.784,13.208-13.483,8.98c-5.805-5.223-0.006-14.526,5.14-10.905"/><br />
</g><br />
<g id="TopYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M387.5,307.6c0,0,77.174-114.203-25.5-200.6s-112,17.25-70.75,3.25<br />
c22.475-7.628,3.854-33.041-10.953-21.25C270.25,97,282.75,109.25,292,99.5"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M385,307.6c0,0,45.5-72.1,0-138.1<br />
c-63.222-91.706-118.593-14.629-80.461,5.394c18.295,9.606,31.295-3.108,31.295-14.394c0-14-23.002-22.795-29.496-8.333<br />
c-5.838,13,8.962,22.937,13.559,14"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M384.25,305.75c0,0,23.573-50.292,3.652-84.314<br />
c-21.236-36.269-37.319-15.769-38.069-8.352c-0.445,4.408-0.283,13.833,11.083,14.75c11.818,0.954,13.25-13.583,5.144-16.847<br />
c-6.146-2.474-10.287,1.899-8.644,8.013s11.834,3.833,9.75-2.8c-2-6.367-9.916-2.867-7,2.55c1.57,2.917,6.41-0.457,4.667-2.55<br />
c-1.833-2.2-4.083,0.383-2.833,1.716"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M377.167,316.9c0,0,24.539-46.404-30.23-63.735<br />
c-54.77-17.332-76.923-4.378-119.18-24.521s-46.019-62.439-23.387-84.875c22.463-22.269,66.508,3.05,47.13,29.231<br />
c-13.79,18.632-44,1.894-37-16.75c6.84-18.217,25.667-10.417,30-1.75c2.436,4.872,2.819,11.657-1.667,15.333<br />
c-4.523,3.708-12.575,3.297-15-1.856c-4-8.5,5.667-13.144,9.876-7.144"/><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M376.5,318.5c0,0,16.298-42.66-24.518-55.163<br />
s-78.379,8.112-125.097-10.862s-66.388-71.796-27.22-113.885S275.531,120.451,271.5,136c-1.75,6.75-6.452,9.434-12.648,9.486<br />
c-8.788,0.073-16.546-11.799-6.102-20.486"/><br />
</g><br />
<g id="BottomYellow" filter="url(#blur)"><br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M369,321.5c0,0,18.676-25.121-35.662-49.561S266.839,284,215.169,250<br />
s-107.549,17.262-85.294,67.565c18.257,41.268,65.875,19.814,53.945-4.192c-3.649-7.344-14.532-6.494-17.07-1.873<br />
c-1.976,3.596-1.5,10,4.75,12.5"/> <br />
<path class="st0" fill="none" stroke="#FBB03B" stroke-miterlimit="10" d="M338,316c-2.75,5.25,9,11,12,0c3.406-12.491-21.627-18.282-24.5,0<br />
c-2.75,17.5,18.049,23.31,28.658,12.765C367,316,358.85,302.342,348.425,298.171s-32.401-0.571-34.852,29.33<br />
c-1.694,20.676-8.651,42.729-24.922,46.315s-34.484-3.58-36.516-23.84c-1.974-19.689,10.945-32.477,28.697-32.477<br />
c14.334,0,21.573,12.188,19,25.334C297.476,354.879,282.25,362.25,271.5,355c-7.755-5.23-6.892-18.686,0.25-23.5<br />
c14.685-9.9,21.5,7.5,16.545,13.344c-4.224,4.98-14.545,2.406-12.203-5.227c2.191-7.144,12.458-2.5,7.158,1.883"/><br />
</g><br />
</svg><br />
<footer></footer><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<div class="bubble"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br />
<defs><br />
<filter id="goo"><br />
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><br />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /><br />
<feComposite in="SourceGraphic" in2="goo" operator="atop" /><br />
</filter><br />
</defs><br />
</svg><br />
</body><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:08:02Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 82%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:07:03Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 80%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:06:22Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 75%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd
http://2014.igem.org/Template:CSS/newpage
Template:CSS/newpage
2015-06-09T06:03:35Z
<p>Shashank dbeb iitd: </p>
<hr />
<div><html><br />
<style rel='stylesheet' type='text/css'><br />
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);<br />
@-webkit-keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-top {<br />
from {<br />
-webkit-transform: rotate(50deg) translateY(120vh);<br />
transform: rotate(50deg) translateY(120vh);<br />
}<br />
}<br />
@-webkit-keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
@keyframes flip-bottom {<br />
from {<br />
-webkit-transform: rotate(-50deg) translateY(120vh);<br />
transform: rotate(-50deg) translateY(120vh);<br />
}<br />
}<br />
body {<br />
display: -webkit-box;<br />
display: -webkit-flex;<br />
display: -ms-flexbox;<br />
display: flex;<br />
-webkit-box-pack: center;<br />
-webkit-justify-content: center;<br />
-ms-flex-pack: center;<br />
justify-content: center;<br />
-webkit-box-align: center;<br />
-webkit-align-items: center;<br />
-ms-flex-align: center;<br />
align-items: center;<br />
height: 100vh;<br />
overflow: hidden;<br />
background: #111;<br />
-webkit-animation: glow 8s both;<br />
animation: glow 8s both;<br />
}<br />
<br />
span {<br />
font: 900 15vw Raleway;<br />
position: relative;<br />
display: inline-block;<br />
-webkit-perspective: 500px;<br />
perspective: 500px;<br />
}<br />
span:nth-child(odd):before {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(odd):after {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):before {<br />
-webkit-animation-name: flip-bottom;<br />
animation-name: flip-bottom;<br />
}<br />
span:nth-child(even):after {<br />
-webkit-animation-name: flip-top;<br />
animation-name: flip-top;<br />
}<br />
span:nth-child(1n + 0):before {<br />
color: #4EC0B6;<br />
}<br />
span:nth-child(1n + 0):after {<br />
color: #4ea4c0;<br />
}<br />
span:nth-child(2n + 1):before {<br />
color: #3967CB;<br />
}<br />
span:nth-child(2n + 1):after {<br />
color: #3c39cb;<br />
}<br />
span:nth-child(3n + 2):before {<br />
color: #FDCD2F;<br />
}<br />
span:nth-child(3n + 2):after {<br />
color: #e8fd2f;<br />
}<br />
span:nth-child(4n + 3):before {<br />
color: #E23942;<br />
}<br />
span:nth-child(4n + 3):after {<br />
color: #e26839;<br />
}<br />
span:nth-child(1):before {<br />
-webkit-animation-delay: 0.88706s;<br />
animation-delay: 0.88706s;<br />
}<br />
span:nth-child(1):after {<br />
-webkit-animation-delay: 1.32717s;<br />
animation-delay: 1.32717s;<br />
}<br />
span:nth-child(2):before {<br />
-webkit-animation-delay: 1.76318s;<br />
animation-delay: 1.76318s;<br />
}<br />
span:nth-child(2):after {<br />
-webkit-animation-delay: 2.19375s;<br />
animation-delay: 2.19375s;<br />
}<br />
span:nth-child(3):before {<br />
-webkit-animation-delay: 2.61756s;<br />
animation-delay: 2.61756s;<br />
}<br />
span:nth-child(3):after {<br />
-webkit-animation-delay: 3.03328s;<br />
animation-delay: 3.03328s;<br />
}<br />
span:nth-child(4):before {<br />
-webkit-animation-delay: 3.43965s;<br />
animation-delay: 3.43965s;<br />
}<br />
span:nth-child(4):after {<br />
-webkit-animation-delay: 3.8354s;<br />
animation-delay: 3.8354s;<br />
}<br />
span:nth-child(5):before {<br />
-webkit-animation-delay: 4.21932s;<br />
animation-delay: 4.21932s;<br />
}<br />
span:nth-child(5):after {<br />
-webkit-animation-delay: 4.59022s;<br />
animation-delay: 4.59022s;<br />
}<br />
span:nth-child(6):before {<br />
-webkit-animation-delay: 4.94696s;<br />
animation-delay: 4.94696s;<br />
}<br />
span:nth-child(6):after {<br />
-webkit-animation-delay: 5.28843s;<br />
animation-delay: 5.28843s;<br />
}<br />
span:nth-child(7):before {<br />
-webkit-animation-delay: 5.61358s;<br />
animation-delay: 5.61358s;<br />
}<br />
span:nth-child(7):after {<br />
-webkit-animation-delay: 5.92141s;<br />
animation-delay: 5.92141s;<br />
}<br />
span:nth-child(8):before {<br />
-webkit-animation-delay: 6.21098s;<br />
animation-delay: 6.21098s;<br />
}<br />
span:nth-child(8):after {<br />
-webkit-animation-delay: 6.48137s;<br />
animation-delay: 6.48137s;<br />
}<br />
span:nth-child(9):before {<br />
-webkit-animation-delay: 6.73177s;<br />
animation-delay: 6.73177s;<br />
}<br />
span:nth-child(9):after {<br />
-webkit-animation-delay: 6.96139s;<br />
animation-delay: 6.96139s;<br />
}<br />
span:before, span:after {<br />
display: block;<br />
content: attr(data-text);<br />
-webkit-animation: 0.88889s ease-out both;<br />
animation: 0.88889s ease-out both;<br />
-webkit-animation-name: inherit;<br />
animation-name: inherit;<br />
text-shadow: 0 0 1em;<br />
}<br />
span:before {<br />
-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);<br />
clip-path: polygon(0 0 100% 0, 100% 100%);<br />
position: absolute;<br />
-webkit-transform-origin: left center;<br />
-ms-transform-origin: left center;<br />
transform-origin: left center;<br />
color: #4EC0B6;<br />
}<br />
span:after {<br />
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
clip-path: polygon(0 0, 100% 100%, 0 100%);<br />
color: #3967CB;<br />
}<br />
<br />
body {<br />
background: #fff;<br />
}<br />
#Body path {<br />
stroke: #00ff30;<br />
}<br />
#TopRed path {<br />
stroke: #ff0000;<br />
}<br />
#Bottom_Blue path {<br />
stroke: #00c6ff;<br />
}<br />
#Bottom_Green path {<br />
stroke: #69e692;<br />
}<br />
#TopYellow path {<br />
stroke: #fff000;<br />
}<br />
#BottomYellow path {<br />
stroke: #fff000;<br />
}<br />
.st0{<br />
/*fill:#8CC63F;*/<br />
/*stroke: #8CC63F;*/<br />
fill:none;<br />
stroke:#FBB03B;<br />
stroke-miterlimit:10;<br />
}<br />
.st1{<br />
fill:none;<br />
stroke:#8CC63F;<br />
stroke-miterlimit:10;<br />
}<br />
.st2{<br />
fill:none;<br />
stroke:#FFFF00;<br />
stroke-miterlimit:10;<br />
}<br />
.st3{<br />
fill:#65C8D0;<br />
}<br />
.st4{<br />
fill:#0000FF;<br />
}<br />
<br />
.butterfly {<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
margin-top: -250px;<br />
margin-left: -250px;<br />
x: 0;<br />
y: 0;<br />
width: 500px;<br />
height: 500px;<br />
viewBox: 0 0 500 500;<br />
enable-background:new 0 0 500 500;<br />
animation: wrapper 4s infinite;<br />
}<br />
<br />
.st0 {<br />
stroke-dasharray: 640;<br />
stroke-dashoffset: 0;<br />
-webkit-transform-origin: center;<br />
-ms-transform-origin: center;<br />
transform-origin: center;<br />
-webkit-animation: draw-around 4s infinite;<br />
animation: draw-around 4s infinite;<br />
}<br />
<br />
@-webkit-keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
@keyframes draw-around {<br />
0% {<br />
stroke-dashoffset: 640;<br />
}<br />
10% {<br />
stroke-dashoffset: 640;<br />
}<br />
100% {<br />
stroke-dashoffset: 0;<br />
}<br />
}<br />
<br />
@keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(10px);<br />
-moz-filter: blur(10px);<br />
-o-filter: blur(10px);<br />
-ms-filter: blur(10px);<br />
filter: blur(10px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
<br />
@-webkit-keyframes wrapper {<br />
0% {<br />
opacity: 0;<br />
<br />
-webkit-filter: blur(15px);<br />
-moz-filter: blur(15px);<br />
-o-filter: blur(15px);<br />
-ms-filter: blur(15px);<br />
filter: blur(15px);<br />
}<br />
20% {<br />
opacity: 1;<br />
<br />
-webkit-filter: none;<br />
-moz-filter: none;<br />
-o-filter: none;<br />
-ms-filter: none;<br />
filter: none;<br />
}<br />
}<br />
</style><br />
</html></div>
Shashank dbeb iitd