Difference between revisions of "Team:iTesla-SoundBio"
Sophie006liu (Talk | contribs) |
(Fixed CSS organization, names, and settings) |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <style> | + | <style> /*STYLE FOR ALL PAGES*/ |
| − | /*STYLE FOR ALL PAGES*/ | + | |
/* Style the top navigation bar */ | /* Style the top navigation bar */ | ||
.topnav { | .topnav { | ||
| Line 56: | Line 55: | ||
background-color: #4286f4; /*blue*/ | background-color: #4286f4; /*blue*/ | ||
} | } | ||
| + | /* Base DIVs for whole website */ | ||
#root { | #root { | ||
top: 0px; | top: 0px; | ||
| Line 94: | Line 94: | ||
text-rendering: optimizeLegibility; | text-rendering: optimizeLegibility; | ||
} | } | ||
| − | + | /*shadow classes*/ | |
.elegantshadow { | .elegantshadow { | ||
color: #131313; | color: #131313; | ||
| Line 169: | Line 169: | ||
7px 7px 0px rgba(0, 0, 0, 0.2); | 7px 7px 0px rgba(0, 0, 0, 0.2); | ||
} | } | ||
| + | /* Animation Transitions */ | ||
| + | .imgFadeIn { | ||
| + | -webkit-animation: appear 1s; | ||
| + | animation: appear 1s; | ||
| + | -webkit-animation-fill-mode: forwards; | ||
| + | animation-fill-mode: forwards; | ||
| + | } | ||
| + | @-webkit-keyframes appear { | ||
| + | 0% { left: 500px; opacity: 0; } | ||
| + | 100% { left: 16px; opacity: 1; } | ||
| + | } | ||
| + | |||
| + | @keyframes appear { | ||
| + | 0% { left: 500px; opacity: 0; } | ||
| + | 100% { left: 16px; opacity: 1; } | ||
| + | } | ||
| + | /* Style the footer */ | ||
| + | .footer { | ||
| + | background-color: #f1f1f1; | ||
| + | padding: 10px; | ||
| + | text-align: center; | ||
| + | width: 100vw; | ||
| + | } | ||
</style> | </style> | ||
| − | <style> <!-- Page Specific CSS--> | + | <style> <!-- Page Specific CSS --> |
/*PAGE SPECIFIC CSS*/ | /*PAGE SPECIFIC CSS*/ | ||
/* Style the header */ | /* Style the header */ | ||
| Line 191: | Line 214: | ||
/* If padding is wanted, change the value of px*/ | /* If padding is wanted, change the value of px*/ | ||
} | } | ||
| − | |||
/* Clear floats after the columns */ | /* Clear floats after the columns */ | ||
.row:after { | .row:after { | ||
| Line 200: | Line 222: | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
/* Make the text over image*/ | /* Make the text over image*/ | ||
.container { | .container { | ||
| Line 225: | Line 240: | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
font-size:18px | font-size:18px | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
</style> | </style> | ||
| Line 288: | Line 288: | ||
<div id="wrapper"> | <div id="wrapper"> | ||
<h2 id="title" class="retroshadow">iTesla-SoundBio</h2> | <h2 id="title" class="retroshadow">iTesla-SoundBio</h2> | ||
| − | <center><img class=" | + | <center><img class="imgFadeIn" src="https://static.igem.org/mediawiki/2018/6/60/T--iTesla-Soundbio--main_page.png" alt="DO YOU KNOW? Every year, hundreds of thousands of horseshoe crabs are caught each year and drained of up to to 30% of their blood. Why? To collect LAL, a chemical that is crucial in the detection of endotoxins in everything from drugs to medical equipment", width=60%,height:60%></center> |
<!-- | <!-- | ||
<div class="row"> | <div class="row"> | ||
Revision as of 03:56, 10 August 2018
iTesla-SoundBio
