Difference between revisions of "Team:Glasgow/Project/Overview"

(Replaced content with "{{GlasgowNavbar}}")
Line 1: Line 1:
 
{{GlasgowNavbar}}
 
{{GlasgowNavbar}}
<html>
 
    <head>
 
        <style>
 
          .firstHeading{
 
      display:none;
 
            }
 
           
 
            <style>
 
.firstHeading{
 
      display:none;
 
}
 
.head h1 {
 
text-align:center;
 
font-family:Helvetica;
 
font-size:120px;
 
border:none;
 
}
 
.attribution{
 
padding-left:200px;
 
padding-right:200px;
 
}
 
.Project{
 
list-style-image:url(https://static.igem.org/mediawiki/2015/9/96/2015-Glasgow-microicon.png);
 
list-style-position:center;
 
}
 
.human{
 
list-style-image:url(https://static.igem.org/mediawiki/2015/a/ae/2015-Glasgow-earthicon.png);
 
list-style-position:center;
 
}
 
.wiki{
 
list-style-image:url(https://static.igem.org/mediawiki/2015/4/45/2015-Glasgow-lightbulbicon.png);
 
list-style-position:center;
 
}
 
.lab{
 
list-style-image:url(https://static.igem.org/mediawiki/2015/e/ed/2015-Glasgow-experimenticon.png);
 
list-style-position:center;
 
}           
 
            * {
 
                padding:0;
 
                margin:0;
 
            }
 
           
 
            .banner {
 
                width:100vw;
 
                height:45vh;
 
                background-color: black;
 
            }
 
       
 
            h1 {
 
                width:20vw;
 
                margin: 5vh auto;
 
                text-align: center;
 
            }
 
           
 
            p {
 
                width:80vw;
 
                margin:0 auto;
 
                text-align: justify;
 
            }
 
           
 
            .monster {
 
                height:50vh;
 
                width:15vw;
 
                position:relative;
 
                display:inline-block;
 
                margin: 0 auto;
 
            }
 
           
 
            .monsterContainer {
 
                width:80vw;
 
                height:50vh;
 
                margin:10vh auto;
 
                text-align: justify;
 
               
 
            }
 
           
 
            .monsterContainer:after {
 
                content: "";
 
            width: 100%;
 
                display: inline-block;
 
            }
 
 
            .monsterImg {
 
                height:100%;
 
                width:100%;
 
                opacity:0.92;
 
                box-shadow: 0 0 5px purple;
 
            }
 
 
            h3 {
 
                color: white;
 
                position:absolute;
 
                bottom:5%;
 
                left: 5%;
 
                width:100%;
 
                opacity:0.85;
 
            }
 
 
            span {
 
                letter-spacing: -1px;
 
                background: rgb(30, 5, 90);
 
                background: rgba(30, 5, 90, 0.7);
 
                padding:5%;
 
            }
 
 
            .dim {
 
                opacity:1;
 
            }
 
 
            .dim2 {
 
                text-decoration: underline;
 
                opacity:1
 
            }
 
       
 
        </style>   
 
    </head>
 
 
    <body>
 
       
 
        <div class="banner"></div>
 
       
 
        <p style="margin-top:3vh;"><a href="#">Home</a> > <a href="#">Project</a></p>
 
       
 
        <h1>Motivation</h1>
 
       
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque</p>
 
       
 
        <h1>Our Product</h1>
 
       
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque</p>
 
       
 
        <div class="monsterContainer">
 
            <div class="monster"><a href="#"><img class="monsterImg" src="../Monsters/monster1-inverted.jpg">
 
                <h3><span>UVA</span></h3></a></div>
 
           
 
          <div class="monster"><img class="monsterImg" src="../Monsters/monster2-inverted.png">
 
            <h3><span>Protocols</span></h3></div>
 
           
 
            <div class="monster"><img class="monsterImg" src="../Monsters/monster3-inverted.jpg">
 
            <h3><span>Bioluminesence</span></h3></div>
 
           
 
            <div class="monster"><img class="monsterImg" src="../Monsters/monster4-inverted.jpg">
 
            <h3><span>Steve</span></h3></div>
 
           
 
            <div class="monster"><img class="monsterImg" src="../Monsters/monster5-inverted.jpg">
 
            <h3><span>Repressors</span></h3></div>
 
       
 
        </div>
 
       
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
    <script type="text/javascript">
 
   
 
        $(document).ready(function() {
 
            $('.monster').mouseenter(function() {
 
                $('img', this).addClass("dim");
 
                $('h3', this).addClass("dim2");
 
            });
 
            $('.monster').mouseleave(function() {
 
                $('img').removeClass("dim");
 
                $('h3').removeClass("dim2");
 
            });
 
        });
 
       
 
        </script>   
 
   
 
    </body>
 
</html>
 
{{Glasgowfooter}}
 

Revision as of 12:27, 1 September 2015