Difference between revisions of "Team:Tec-Chihuahua/Experiments"

(Prototype team page)
 
 
Line 1: Line 1:
 
{{Tec-Chihuahua}}
 
{{Tec-Chihuahua}}
 
<html>
 
<html>
 +
    <head>
 +
        <title>Trial</title>
 +
        <meta charset="utf-8">
 +
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
 +
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 +
        <style>
 +
            * {
 +
                margin: 0;
 +
                padding: 0;
 +
            }
 +
           
 +
            /*-- Fonts --*/
 +
            @font-face{
 +
                font-family: wolf;
 +
                src: url('../fonts/WolfintheCityLight.ttf');
 +
            }
  
<div class="column full_size">
+
            /*-- Menu btn --*/
 +
            #btn-menu {
 +
                display: none;
 +
            }
  
<h1>Experiments</h1>
+
            header label{
<p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.</p>
+
                display: none;
 +
                width: 30px;
 +
                height: 30px;
 +
                border-right: 1px solid #fff;
 +
            }
  
<p>
+
            header label:hover {
Please remember to put all characterization and measurement data for your parts on the corresponding Registry part pages.
+
                cursor: pointer;
</p>
+
            }
  
</div>
+
            .menu li {
 +
                text-align: center;
 +
                flex-grow: 1;
 +
            }
  
<div class="column half_size">
+
            @media(max-width:1360px){
<h5>What should this page contain?</h5>
+
                header label{
<ul>
+
                    display: block;
<li> Protocols </li>
+
                }
<li> Experiments </li>
+
<li> Documentation of the development of your project </li>
+
</ul>
+
  
</div>
+
                .menu{
 +
                    position: absolute;
 +
                    background: #fff;
 +
                    width:40%;
 +
                    margin-left: -40%;
 +
                    transition: all 0.5s;
 +
                }
  
<div class="column half_size">
+
                .menu ul{
<h5>Inspiration</h5>
+
                    flex-direction: column;
<ul>
+
                }
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
+
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
+
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
+
</ul>
+
</div>
+
  
 +
                .menu li{
 +
                    border-top: 1px solid #fff;
 +
                }
  
<div class="clear"></div>
+
                #btn-menu:checked ~ .menu{
 +
                    margin: 0;
 +
                }
  
 +
            }
  
<div class="column half_size">
+
            /*-- Nav Bar Display --*/
 +
            nav {
 +
                position: fixed;
 +
                width: 100%;
 +
                top: 0;
 +
                background-color: #fff;
 +
                text-align: center;
 +
                padding: 3px 0;
 +
                transition: all 0.5s ease;
 +
                align-content: right;
 +
            }
  
 +
            nav.hidden {
 +
                transform: translate3d(0,-100%,0);
 +
            }
 +
 +
            nav ul li {
 +
                margin-right: 0px;
 +
            }
 +
 +
            nav ul{
 +
                margin: 0px;
 +
                padding: 0px;
 +
                list-style: none;
 +
            }
 +
 +
            nav ul li{
 +
                float: left;
 +
                width: 165px;
 +
                height: 40px;
 +
                background-color: #fff;
 +
                color: #000;
 +
                opacity: .9;
 +
                line-height: 40px;
 +
                text-align: center;
 +
                font-size: 15px;
 +
            }
 +
 +
            nav ul li a{
 +
                text-decoration: none;
 +
                color: #000;
 +
                display: block;
 +
                font-family: 'Lato',sans-serif;
 +
                text-align: center;
 +
            }
 +
 +
            nav ul li a:hover{
 +
                background-color: #000;
 +
                color: #fff;
 +
            }
 +
 +
            nav ul li ul li{
 +
                display: none;
 +
            }
 +
 +
            nav ul li:hover ul li{
 +
                display: block;
 +
            }
 +
 +
 +
            /*-- content --*/
 +
            .content {
 +
                padding-top: 30px;
 +
                background-position:left top;
 +
                background-color:#fff;
 +
                background-attachment:fixed;
 +
                background-repeat:repeat;
 +
                background-size: cover;   
 +
            }
 +
 +
            .content h1{
 +
                font-family: 'Century Gothic',sans-serif;
 +
                color: #f9f3f4;
 +
                font-size: 500%;
 +
                text-shadow: 9px 9px 15px #000;
 +
            }
 +
            .content h3{
 +
                font-family: 'Century Gothic',sans-serif;
 +
                color: #f9f3f4;
 +
                font-size: 200%;
 +
                text-shadow: 9px 9px 15px #000;
 +
                text-align: center;
 +
            }
 +
 +
 +
            .parallax-bg {
 +
                padding: 250px 0;
 +
                background-image: url("http://wallpapercave.com/wp/uaHWWWo.jpg");
 +
                background-size: cover;
 +
                background-attachment: fixed;
 +
                -webkit-transition: all 0.2s ease;
 +
                -moz-transition: all 0.2s ease;
 +
                transition: all 0.2s ease;
 +
            }
 +
 +
            .parallax-bg h1 {
 +
                text-align: center;
 +
                color: #fff;
 +
                font-size: 180px;
 +
                font-family: wolf;
 +
            }
 +
 +
 +
            #logoimg{
 +
                width: 90%;
 +
                height: auto;
 +
            }
 +
        </style>
 +
    </head>
 +
   
 +
    <body>
 +
        <header>
 +
            <input type="checkbox" id="btn-menu">
 +
            <label for="btn-menu"><img src=https://d30y9cdsu7xlg0.cloudfront.net/png/356889-200.png alt="" width="50px" height="50px"></label>
 +
       
 +
        <nav class="menu">
 +
            <ul>
 +
                <li><a href="index.html">HOME</a></li>
 +
               
 +
                <li><a href="project.html">PROJECT</a>
 +
                    <ul>
 +
                        <li><a href="#">ATTRIBUTIONS</a> </li>
 +
                        <li><a href="#">CONTRIBUTION</a> </li>
 +
                        <li><a href="#">DEMONSTRATE</a> </li>
 +
                        <li><a href="#">DESCRIPTION</a> </li>
 +
                        <li><a href="#">DESIGN</a> </li>
 +
                        <li><a href="#">EXPERIMENTS</a> </li>
 +
                        <li><a href="#">IMPROVE</a> </li>
 +
                        <li><a href="#">INTERNLAB</a> </li>
 +
                        <li><a href="#">MODEL</a> </li>
 +
                        <li><a href="#">NOTEBOOK</a> </li>
 +
                        <li><a href="#">RESULTS</a> </li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li><a href="team.html">TEAM</a>
 +
                    <ul>
 +
                        <li><a href="#">TEAM</a> </li>
 +
                        <li><a href="#">COLLABORATIONS</a> </li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li><a href="awards.html">AWARDS</a>
 +
                    <ul>
 +
                        <li><a href="#">APPLIED DESIGN</a> </li>
 +
                        <li><a href="#">ENTREPRENEURSHIP</a> </li>
 +
                        <li><a href="#">HARDWARE</a> </li>
 +
                        <li><a href="#">MEASUREMENT</a> </li>
 +
                        <li><a href="#">MODEL</a> </li>
 +
                        <li><a href="#">PLANT</a> </li>
 +
                        <li><a href="#">SOFTWARE</a> </li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li><a href="human_practices.html">HUMAN PRACTICES</a>
 +
                    <ul>
 +
                        <li><a href="#">INTEGRATED PRACTICES</a> </li>
 +
                        <li><a href="#">PUBLIC ENGAGEMENT</a> </li>
 +
                        <li><a href="#">SILVER</a> </li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li><a href="judgingform.html">JUDGING FORM</a></li>
 +
               
 +
                <li><a href="parts.html">PARTS</a>
 +
                    <ul>
 +
                        <li><a href="#">PARTS</a> </li>
 +
                        <li><a href="#">BASIC PARTS</a> </li>
 +
                        <li><a href="#">COMPOSITE PARTS</a> </li>
 +
                        <li><a href="#">PART COLLECTION</a> </li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li><a href="safety.html">SAFETY</a></li>
 +
 +
            </ul>
 +
        </nav>
 +
            </header>
 +
       
 +
        <div class="content">
 +
            <div class="parallax-bg">
 +
                <h1>Project</h1>
 +
                <h3></h3>
 +
            </div>
 +
        </div>
 +
    </body>
  
  
</div>
 
  
 
</html>
 
</html>

Latest revision as of 04:31, 19 August 2017

Tec-Chihuahua

Trial

Project