Charliew728 (Talk | contribs) |
|||
(139 intermediate revisions by 2 users not shown) | |||
Line 14: | Line 14: | ||
background-color: #fff; | background-color: #fff; | ||
color: #c6c6c6; | color: #c6c6c6; | ||
− | |||
font-family: ariel, sans-serif; | font-family: ariel, sans-serif; | ||
font-weight: 300; | font-weight: 300; | ||
Line 20: | Line 19: | ||
.row{ | .row{ | ||
− | |||
position: absolute; | position: absolute; | ||
− | top: 30px; | + | left: 6%; |
− | + | top: 30px; | |
+ | width: 100%; | ||
} | } | ||
Line 30: | Line 29: | ||
margin: 0; | margin: 0; | ||
color: rgba(38, 177, 70, 0.67); | color: rgba(38, 177, 70, 0.67); | ||
− | font-size: | + | 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; | ||
} | } | ||
Line 39: | Line 40: | ||
color: #f0f0f0; | color: #f0f0f0; | ||
+ | font-size: 300%; | ||
+ | line-height: 50px; | ||
} | } | ||
Line 44: | Line 47: | ||
.btn:visited { | .btn:visited { | ||
display: inline-block; | display: inline-block; | ||
− | padding: | + | padding: 15px 45px; |
font-weight: 300; | font-weight: 300; | ||
text-decoration: none; | text-decoration: none; | ||
− | |||
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; | border-radius: 50px; | ||
+ | font-size: 20px; | ||
} | } | ||
Line 73: | Line 76: | ||
header{ | header{ | ||
height: 100vh; | height: 100vh; | ||
− | width: 100vh; | + | width: 100vh; |
} | } | ||
.hero-text-box { | .hero-text-box { | ||
position: absolute; | position: absolute; | ||
− | width: | + | width: 1500px; |
− | top: | + | 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: | + | height: 100px; |
width:auto; | width:auto; | ||
} | } | ||
Line 93: | Line 97: | ||
float:right; | float:right; | ||
list-style: none; | list-style: none; | ||
− | + | padding-top: 30px; | |
− | + | width: 80%; | |
− | + | transform: translate(0, 30px); | |
− | + | ||
− | + | ||
− | transform:translate(0, | + | |
− | + | ||
} | } | ||
.main-nav li { | .main-nav li { | ||
display: inline-block; | display: inline-block; | ||
− | margin-left: | + | margin-left: 80px; |
− | + | ||
} | } | ||
Line 114: | Line 113: | ||
text-decoration: none; | text-decoration: none; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
− | font-size: | + | font-size: 20px; |
border-bottom: 2px solid transparent; | border-bottom: 2px solid transparent; | ||
transition: border-bottom 0.2s; | transition: border-bottom 0.2s; | ||
Line 141: | Line 140: | ||
.PD { | .PD { | ||
color: #2c5a13; | color: #2c5a13; | ||
− | font-size: | + | font-size: 50px; |
− | line height: | + | line height: 60px; |
text-decoration: none; | text-decoration: none; | ||
− | transform: translate(3%); | + | transform: translate(3%); |
} | } | ||
− | + | p{ | |
+ | font-size: 50px; | ||
+ | } | ||
+ | .description { | ||
color: black; | color: black; | ||
width: 75%; | width: 75%; | ||
transform: translate(20%); | transform: translate(20%); | ||
− | line-height: 25px; | + | line-height: 50px; |
+ | font-size: 25px; | ||
text-align: left; | text-align: left; | ||
text-decoration: none; | text-decoration: none; | ||
Line 163: | Line 166: | ||
.background { | .background { | ||
− | background-image: linear-gradient(rgba( | + | 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-size: cover; | ||
background-position: center; | background-position: center; | ||
− | width: 100%; | + | 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> | ||
Line 180: | Line 225: | ||
<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/ | + | <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=" | + | <li> <a href="https://2017.igem.org/Team:UConn/Team">Team</a></li> |
− | + | <li> <div class="dropdown"> | |
− | + | <button onclick="myFunction()" class="project-drop">Project ▼</button> | |
− | + | <div id="dropdown" class="project-topics"> | |
− | <li> <a href=" | + | <a href="https://2017.igem.org/Team:UConn/Description">Background</a> |
− | <li> <a href=" | + | <a href="https://2017.igem.org/Team:UConn/Notebook">Notebook</a> |
− | <li> <a href=" | + | <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 196: | Line 247: | ||
<div class="hero-text-box"> | <div class="hero-text-box"> | ||
<h1>Algal Biofuels</h1> | <h1>Algal Biofuels</h1> | ||
− | + | <h2>In a world where fossil fuels rule, the hero could be microscopic... </h2> | |
− | <h2>In a world where | + | <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=' | + | |
</div> | </div> | ||
</header> | </header> | ||
− | |||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
Line 222: | Line 261: | ||
</div> | </div> | ||
</body> | </body> | ||
+ | |||
</html> | </html> |
Latest revision as of 03:20, 2 November 2017