(Fixed formatting in Notepad++, added custom fonts, separated styles into to categories: page-specific and universal, added custom title header with shadow, more aesthetic styling done) |
|||
Line 11: | Line 11: | ||
margin-top: 20px; | margin-top: 20px; | ||
} | } | ||
− | |||
/* Style the topnav links */ | /* Style the topnav links */ | ||
.topnav a { | .topnav a { | ||
float: right; | float: right; | ||
display: block; | display: block; | ||
− | + | color: #f2f2f2; | |
text-align: center; | text-align: center; | ||
padding: 14px 16px; | padding: 14px 16px; | ||
text-decoration: none; | text-decoration: none; | ||
− | /*for transitions when hovering*/ | + | /*for transitions when hovering*/ |
− | + | -o-transition:color .2s ease-out, background 1s ease-in; | |
− | + | -ms-transition:color .2s ease-out, background 1s ease-in; | |
− | + | -moz-transition:color .2s ease-out, background 1s ease-in; | |
− | + | -webkit-transition:color .2s ease-out, background 1s ease-in | |
} | } | ||
.topnav a img { | .topnav a img { | ||
Line 39: | Line 38: | ||
color: black; | color: black; | ||
} | } | ||
− | html{ | + | html { |
width: 100vw; | width: 100vw; | ||
height: 100vh; | height: 100vh; | ||
Line 56: | Line 55: | ||
*/ | */ | ||
background-color: #4286f4; /*blue*/ | background-color: #4286f4; /*blue*/ | ||
− | |||
} | } | ||
#root { | #root { | ||
top: 8px; | top: 8px; | ||
− | position: absolute; | + | position: absolute; |
− | font-size: 16px; | + | font-size: 16px; |
− | width: 100vw; | + | width: 100vw; |
− | height: auto; | + | height: auto; |
− | margin-left: -35px; | + | margin-left: -35px; |
− | margin-top: -30px; | + | margin-top: -30px; |
− | background-color: WhiteSmoke; | + | background-color: WhiteSmoke; |
} | } | ||
− | #wrapper | + | #wrapper { |
− | { | + | height: auto; |
− | height: auto; | + | width: 90%; |
− | width: 90%; | + | background-color: white; |
− | background-color: white; | + | /*border-style: solid; |
− | /*border-style: solid; | + | border-width: 1px; |
− | border-width: 1px; | + | border-color: black; |
− | border-color: black; | + | border-radius: 10px;*/ |
− | border-radius: 10px;*/ | + | margin: auto; |
− | margin: auto; | + | display: table; |
− | display: table; | + | |
} | } | ||
/*Load special fonts*/ | /*Load special fonts*/ | ||
Line 98: | Line 95: | ||
text-rendering: optimizeLegibility; | text-rendering: optimizeLegibility; | ||
} | } | ||
− | /*shadow classes*/ | + | /*shadow classes*/ |
.elegantshadow { | .elegantshadow { | ||
color: #131313; | color: #131313; | ||
Line 176: | Line 173: | ||
− | <style> | + | <style> <!-- Page Specific CSS--> |
/*PAGE SPECIFIC CSS*/ | /*PAGE SPECIFIC CSS*/ | ||
/* Style the header */ | /* Style the header */ | ||
Line 247: | Line 244: | ||
</style> | </style> | ||
<body> | <body> | ||
− | <div id="root"> | + | <div id="root"> |
− | + | <div class="topnav"> | |
− | + | <a class="logo" href="#"><img src="https://static.igem.org/mediawiki/2018/8/87/T--iTesla-SoundBio--teamlogo.png"></a> | |
+ | |||
+ | <!-- Floats right hence in opposite order --> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/Safety">Safety</a> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/Parts">Parts</a> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/results">Results</a> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/Interlab">InterLab</a> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/Experiment">Experiment</a> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/design">Design</a> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/description">Description</a> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/team">Team</a> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio">Home</a> | ||
+ | </div> | ||
+ | |||
+ | <div id="wrapper"> | ||
+ | <h2 id="title" class="retroshadow">iTesla-SoundBio</h2> | ||
+ | <center><img class="homeimg" 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="column" style="background-color:#aaa;"><div class= "container"> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/labnotebook"><img src="https://static.igem.org/mediawiki/2018/c/c1/T--iTesla-Soundbio--writing1.jpg" alt= "labnotebook", width= 100%, height=400px></a> | ||
− | + | <div class="centered">LabNotebook</div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <div class="column" style="background-color:#bbb;"><div class= "container1"> | |
− | + | <a href="https://2018.igem.org/Team:iTesla-SoundBio/a_crab_story"><img src="https://static.igem.org/mediawiki/2018/e/e1/T--iTesla-Soundbio--horseshoecrab1.jpg" alt="WE TAKE BLOOD FROM HORSESHOE CRABS", width= 100%, height=400px></a> | |
+ | <div class="centered">Project Description</div> | ||
+ | </div> | ||
+ | <div class="column" style="background-color:#ccc;"><div class= "container"> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio/gallary"><img src="https://static.igem.org/mediawiki/2018/5/57/T--iTesla-Soundbio--humaninteraction.jpg" alt="our lab pictures", width= 100%, height=400px></a> | ||
− | + | <div class="centered">Human Practices</div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | + | --> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 02:04, 3 August 2018
iTesla-SoundBio
![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](https://static.igem.org/mediawiki/2018/6/60/T--iTesla-Soundbio--main_page.png)