Difference between revisions of "Team:iTesla-SoundBio/design"

Line 1: Line 1:
 
<html>
 
<html>
−
<style>  
+
<style>
−
/*STYLE FOR ALL PAGES*/
+
body { background: #9cb8b3; }
−
/* Style the top navigation bar */
+
−
.topnav {
+
−
    overflow: hidden;
+
−
    background-color: #333;
+
−
    font-family: Bahnschrift;
+
−
    font-size: 14px;
+
−
    width: 100vw;
+
−
    margin-top: 20px;
+
−
}
+
  
−
/* Style the topnav links */
+
h1 {
−
.topnav a {
+
     font: 600 1.5em/1 'Raleway', sans-serif;
−
     float: right;
+
     color: rgba(0,0,0,.5);
−
    display: block;
+
−
     color: #f2f2f2;
+
 
     text-align: center;
 
     text-align: center;
−
     padding: 14px 16px;
+
     text-transform: uppercase;
−
     text-decoration: none;
+
     letter-spacing: .5em;
−
/*for transitions when hovering*/
+
    position: absolute;
−
  -o-transition:color .2s ease-out, background 1s ease-in;
+
    top: 25%;
−
  -ms-transition:color .2s ease-out, background 1s ease-in;
+
    width: 100%;
−
  -moz-transition:color .2s ease-out, background 1s ease-in;
+
padding-top: 50px;
−
  -webkit-transition:color .2s ease-out, background 1s ease-in
+
 
}
 
}
−
.topnav a img {
+
 
−
     height: 10%;
+
span, span:after {
−
     width: 10%;
+
     font-weight: 900;
−
}
+
     color: #efedce;
−
.topnav a.logo {
+
    white-space: nowrap;
−
     float: left;
+
    display: inline-block;
 +
    position: relative;
 +
    letter-spacing: .1em;
 +
     padding: .2em 0 .25em 0;
 
}
 
}
  
−
/* Change color on hover */
+
span {
−
.topnav a:hover {
+
    font-size: 4em;
−
     background-color: #ddd;
+
     z-index: 100;
−
     color: black;
+
     text-shadow: .04em .04em 0 #9cb8b3;
 
}
 
}
−
HTML {
 
−
    width: 100vw;
 
−
    height: 100vh;
 
−
    background-size:cover;
 
−
    background-repeat:no-repeat;
 
  
−
    background-color: black; #blue
+
span:after {
−
   
+
     content: attr(data-shadow-text);
−
}
+
     color: rgba(0,0,0,.35);
−
body {
+
     text-shadow: none;
−
     width: 100vw;
+
     position: absolute;
−
    height: 100vh;
+
    left: .0875em;
−
    background-size:cover;
+
    top: .0875em;
−
    background-repeat:no-repeat;
+
    z-index: -1;
−
     /*background-image:url("https://raddinteractive.com/wp-content/uploads/Chalkboard-background-e1463542024446.jpg");
+
    -webkit-mask-image: url(https://f.cl.ly/items/1t1C0W3y040g1J172r3h/mask.png);
−
     */
+
−
    background-color: #4286f4; /*blue*/
+
−
      
+
−
}
+
−
#root {
+
−
    top: 8px;
+
−
position: absolute;
+
−
font-size: 16px;
+
−
width: 100vw;
+
−
height: 100vh;
+
−
margin-left: -35px;
+
−
margin-top: -30px;
+
−
background-color: WhiteSmoke;
+
−
}
+
−
#wrapper
+
−
{
+
−
height: 90%;
+
−
width: 90%;
+
−
background-color: white;
+
−
/*border-style: solid;
+
−
border-width: 1px;
+
−
border-color: black;
+
−
border-radius: 10px;*/
+
−
margin: auto;
+
−
display: table;
+
 
}
 
}
 
</style>
 
</style>
−
 
 
<body>
 
<body>
−
<div id="root">
+
<!-- The following reset code was given by William Kwok from the UW iGEM team -->
−
<div class="topnav">
+
<!-- Add on-page javascript for destroying default iGEM CSS and adding a loading animation -->
−
  <a class="logo" href="#"><img src="https://static.igem.org/mediawiki/2018/8/87/T--iTesla-SoundBio--teamlogo.png"></a>
+
<!-- I do it twice to run once so the page loading animation gets correct styling the first run -->
−
 
+
<!-- Second run is just to make sure everything gets ran -->
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/Safety">Safety</a>
+
<script type="text/javascript">
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/Parts">Parts</a>
+
    $('div#content').removeAttr('id').attr('id', 'contentBox');
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/results">Results</a>
+
    $('a#top').remove();
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/Project/Interlab">InterLab</a>
+
    $('div#top_title').remove();
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/Experiment">Experiment</a>
+
    $('div#HQ_page').removeAttr('id');
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/design">Design</a>
+
    $('div.mw-body').removeAttr('class');
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/description">Description</a>
+
    $('div#mw-content-text').removeAttr('id');
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio/team">Team</a>
+
    $('div#bodyContent').removeAttr('id');
−
  <a href="https://2018.igem.org/Team:iTesla-SoundBio">Home</a>
+
    $('div.mw-content-ltr>p').addClass('meta');
−
</div>
+
    $('div.mw-content-ltr').removeAttr('class');
−
<div id="wrapper">
+
    document.getElementById("root").innerText = "Page loading...";
−
</div>
+
    $(document).ready(function () {
−
</div>
+
        $('div#content').removeAttr('id').attr('id', 'contentBox');
 +
        $('a#top').remove();
 +
        $('div#top_title').remove();
 +
        $('div#HQ_page').removeAttr('id');
 +
        $('div.mw-body').removeAttr('class');
 +
        $('div#mw-content-text').removeAttr('id');
 +
        $('div#bodyContent').removeAttr('id');
 +
        $('div.mw-content-ltr>p').addClass('meta');
 +
        $('div.mw-content-ltr').removeAttr('class');
 +
    })
 +
</script>
 +
<body>
 +
<h1>We are sorry but our page is<br><span data-shadow-text="Under Construction">Under Construction</span><br> Please check back later</h1>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 06:46, 3 August 2018

We are sorry but our page is
Under Construction
Please check back later