Difference between revisions of "Team:UConn"

 
(223 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Template:Team:UConn}}
 
<html>
 
<html>
 
     <head>
 
     <head>
−
         <title>UConn IGEM 2017</title>
+
         <title>Team:UConn</title>
 
         <style>
 
         <style>
 
* {
 
* {
 
     margin: 0px;
 
     margin: 0px;
−
     padding: 0;
+
     padding: 0px;
 
     box-sizing: border-box;
 
     box-sizing: border-box;
 
      
 
      
Line 13: Line 14:
 
     background-color: #fff;
 
     background-color: #fff;
 
     color: #c6c6c6;
 
     color: #c6c6c6;
−
    font-size: 20px;
+
     font-family: ariel, sans-serif;
−
     font-family: 'Lato', sans-serif;
+
 
     font-weight: 300;
 
     font-weight: 300;
 
}
 
}
  
 
.row{
 
.row{
−
     max-width: 1140px;
+
     position: absolute;
−
     margin: 0 auto;
+
     left: 6%;
 +
    top: 30px;
 +
    width: 100%;
 +
 
 
}
 
}
  
Line 26: Line 29:
 
     margin: 0;
 
     margin: 0;
 
     color: rgba(38, 177, 70, 0.67);
 
     color: rgba(38, 177, 70, 0.67);
−
     font-size: 400%;
+
     font-size: 600%;
 
     font-weight: 500;
 
     font-weight: 500;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
 
     word-spacing: 3px;
 
     word-spacing: 3px;
 +
    line-height: 60px;
 +
    z-index: 1;
 +
}
 +
 +
h2{
 +
 +
color: #f0f0f0;
 +
font-size: 300%;
 +
line-height: 50px;
 
}
 
}
 
      
 
      
Line 35: Line 47:
 
.btn:visited {
 
.btn:visited {
 
     display: inline-block;
 
     display: inline-block;
−
     padding: 10px 30px;
+
     padding: 15px 45px;
 
     font-weight: 300;
 
     font-weight: 300;
 
     text-decoration: none;
 
     text-decoration: none;
−
    border-radius:0;
 
 
     margin: 10px 5px;
 
     margin: 10px 5px;
 
     transition: background-color 0.5s, border 0.5s, color 0.5s;
 
     transition: background-color 0.5s, border 0.5s, color 0.5s;
 +
    border-radius: 50px;
 +
    font-size: 20px;
 
}
 
}
  
Line 62: Line 75:
  
 
header{
 
header{
−
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0, 0, 0, 0.7)), url(https://static.igem.org/mediawiki/2017/c/cd/Uconn-algae-background.jpg);
 
−
    background-size: cover;
 
−
    background-position: center;
 
 
     height: 100vh;
 
     height: 100vh;
 +
    width: 100vh;
 
}
 
}
  
 
.hero-text-box {
 
.hero-text-box {
 
     position: absolute;
 
     position: absolute;
−
     width: 80%;
+
     width: 1500px;
−
     top: 50%;
+
     top: 400px;
 
     left: 50%;
 
     left: 50%;
 
     transform:translate(-50%, -50%);
 
     transform:translate(-50%, -50%);
 
     text-align: center;
 
     text-align: center;
 +
    z-index: 0;
 
}
 
}
  
 
.logo {
 
.logo {
−
     height: 150px;
+
     height: 100px;
 
     width:auto;
 
     width:auto;
−
    position: absolute;
 
−
    top: 100px;
 
−
    left: 50px;
 
−
   
 
 
}
 
}
  
Line 89: Line 97:
 
     float:right;
 
     float:right;
 
     list-style: none;
 
     list-style: none;
−
     margin-top: 100px;
+
     padding-top: 30px;
−
     margin-right: 0%;
+
     width: 80%;
−
    margin-left: 10%;
+
    transform: translate(0, 30px);
−
padding-top: 50px;
+
−
padding-right: 25px;
+
−
 
+
 
}
 
}
  
 
.main-nav li {
 
.main-nav li {
 
     display: inline-block;
 
     display: inline-block;
−
     margin-left: 30px;
+
     margin-left: 80px;
 
}
 
}
  
Line 108: Line 113:
 
     text-decoration: none;
 
     text-decoration: none;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
−
     font-size: 90%;
+
     font-size: 20px;
 
     border-bottom: 2px solid transparent;
 
     border-bottom: 2px solid transparent;
 
     transition: border-bottom 0.2s;
 
     transition: border-bottom 0.2s;
Line 123: Line 128:
 
      
 
      
 
.container {
 
.container {
−
     margin-top: 2%;
+
     margin-top: 30px;
−
     background-color: rgba(95, 191, 95, 0.73);
+
     background-color: rgba(215, 217, 215, 0.73);
 
     width: 85%;
 
     width: 85%;
 
     align-content: center;
 
     align-content: center;
−
     transform: translate(7.5%);
+
     transform: translate(8%);
 
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 10px 6px 20px 10px rgba(0, 0, 0, 0.19);
 
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 10px 6px 20px 10px rgba(0, 0, 0, 0.19);
 
     text-align: center;
 
     text-align: center;
Line 134: Line 139:
 
      
 
      
 
.PD {
 
.PD {
−
    color: #2c5a13;
+
    color: #2c5a13;
 
     font-size: 50px;
 
     font-size: 50px;
 +
    line height: 60px;
 +
    text-decoration: none;
 +
    transform: translate(3%);
 
          
 
          
 
}
 
}
  
−
    .description {
+
p{
 +
font-size: 50px;
 +
}
 +
.description {
 
         color: black;
 
         color: black;
 +
        width: 75%;
 +
        transform: translate(20%);
 +
        line-height: 50px;
 +
        font-size: 25px;
 +
        text-align: left;
 +
        text-decoration: none;
 
     }
 
     }
 +
 +
.description:hover,
 +
.description:active {
 +
text-decoration:none;
 +
}
 +
 +
.background {
 +
background-image: linear-gradient(rgba(7, 49, 7, 0.90),rgba(0, 0, 0, 0.7)), url(https://static.igem.org/mediawiki/2017/b/ba/Uconn-green-algae-background.jpg);
 +
    background-size: cover;
 +
    background-position: center;
 +
    width: 100%;
 +
}
 +
 +
.project-drop {
 +
    background-color: rgba(76, 175, 80, 0);
 +
    color: white;
 +
    padding-top: 0px;
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    font-size: 20px;
 +
    text-transform: uppercase;
 +
    border: none;
 +
    cursor: pointer;
 +
    z-index: 2;
 +
}
 +
.dropdown {
 +
    position: relative;
 +
    margin-top: 10px;
 +
    display: inline-block;
 +
    z-index: 2;
 +
}
 +
 +
.project-topics {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: rgba(98, 175, 109, 0.81);
 +
    min-width: 160px;
 +
    padding-left: 20px;
 +
    padding-right: 20px;
 +
    padding-top: 5px;
 +
    padding-bottom: 5px;
 +
    margin-top: 0px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 2;
 +
}
 +
 +
.project-topics a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
 +
.dropdown:hover .project-topics {
 +
    display: block;
 +
}
 +
 +
 
</style>
 
</style>
 
     </head>
 
     </head>
 
      
 
      
 
     <body>
 
     <body>
 +
<div class="background">
 
         <header>
 
         <header>
 
           <nav>
 
           <nav>
 
                 <div class='row'>
 
                 <div class='row'>
−
                     <a href="https://2017.igem.org/Team:UConn"> <img src="https://static.igem.org/mediawiki/2017/a/a8/Uconn-IGEM-Logo.jpg"  alt="UConn IGEM Logo"          class="logo">
+
                     <a href="https://2017.igem.org/Team:UConn"> <img src="https://static.igem.org/mediawiki/2017/a/ae/UConn_igem_logo_fixed.PNG"  alt="UConn IGEM Logo"          class="logo">
 
                     </a>
 
                     </a>
 
                     <ul class="main-nav">
 
                     <ul class="main-nav">
−
                         <li> <a href="#">Background</a></li>
+
                         <li> <a href="https://2017.igem.org/Team:UConn/Team">Team</a></li>
−
                        <li> <a href="#">Project</a></li>
+
                      <li> <div class="dropdown">
−
                        <li> <a href="#">Team</a> </li>
+
                            <button onclick="myFunction()" class="project-drop">Project &#9660;</button>
−
                        <li> <a href="#">Community Outreach</a></li>
+
                            <div id="dropdown" class="project-topics">
−
                         <li> <a href="#">Safety</a></li>
+
                                <a href="https://2017.igem.org/Team:UConn/Description">Background</a>
−
                         <li> <a href="#">Attributions</a></li>
+
                                <a href="https://2017.igem.org/Team:UConn/Notebook">Notebook</a>
−
                         <li> <a href="#">Notebook</a></li>
+
                                <a href="https://2017.igem.org/Team:UConn/Experiments">Protocols</a>
 +
                                <a href="https://2017.igem.org/Team:UConn/Results">Results</a>
 +
                                <a href="https://2017.igem.org/Team:UConn/Parts">Parts</a>
 +
                              </div></div></li>
 +
                         <li> <a href="https://2017.igem.org/Team:UConn/InterLab">Interlab</a></li>
 +
                         <li> <a href="https://2017.igem.org/Team:UConn/Safety">Safety</a></li>
 +
                         <li> <a href="https://2017.igem.org/Team:UConn/Attributions">Attributions</a></li>
 
                     </ul>
 
                     </ul>
 
                  
 
                  
Line 165: Line 247:
 
             <div class="hero-text-box">
 
             <div class="hero-text-box">
 
                 <h1>Algal Biofuels</h1>
 
                 <h1>Algal Biofuels</h1>
−
                <br>
+
                 <h2>In a world where fossil fuels rule, the hero could be microscopic... </h2>
−
                 <h2>In a world where oil rules, the hero could be microscopic... </h2> <br>
+
                 <a class="btn btn-ghost" href='https://2017.igem.org/Team:UConn/Description'>Learn More About This Mini-Savior</a>
−
                 <a class="btn btn-ghost" href='#'>Learn More About This Mini-Crusader</a>
+
 
             </div>
 
             </div>
 
         </header>
 
         </header>
 
          
 
          
−
        <div class="container">
 
 
          
 
          
−
            <div class="project-description">
+
       
−
                <h2 class="PD"> <br> Project Description</h2> <br> <br>
+
         
−
               
+
−
                <p class="description">
+
−
                    This is some dummy text just to test the style and div size
+
−
                </p>
+
 
              
 
              
 
             </div>
 
             </div>
 
          
 
          
 
         </div>
 
         </div>
−
       
+
    </div> 
 
     </body>
 
     </body>
 +
 
          
 
          
 
</html>
 
</html>

Latest revision as of 03:20, 2 November 2017

Team:UConn

Algal Biofuels

In a world where fossil fuels rule, the hero could be microscopic...

Learn More About This Mini-Savior