Difference between revisions of "Team:iTesla-SoundBio"

(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;
+
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;
+
-o-transition:color .2s ease-out, background 1s ease-in;
  -ms-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;
+
-moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-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">
+
<div class="topnav">
  <a class="logo" href="#"><img src="https://static.igem.org/mediawiki/2018/8/87/T--iTesla-SoundBio--teamlogo.png"></a>
+
<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>
  
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/Safety">Safety</a>
+
<div class="centered">LabNotebook</div>
<a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/Parts">Parts</a>
+
</div>
  <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 class="column" style="background-color:#bbb;"><div class= "container1">
</div>
+
<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="column" style="background-color:#bbb;"><div class= "container1">
+
<div class="centered">Human Practices</div>
<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>
<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>
 
</div>
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 02:04, 3 August 2018