Charliew728 (Talk | contribs) |
Charliew728 (Talk | contribs) |
||
(199 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: | + | |
font-weight: 300; | font-weight: 300; | ||
} | } | ||
.row{ | .row{ | ||
− | |||
position: absolute; | position: absolute; | ||
− | top: | + | 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; | ||
+ | } | ||
+ | |||
+ | h2{ | ||
+ | |||
+ | color: #f0f0f0; | ||
+ | font-size: 300%; | ||
+ | line-height: 50px; | ||
} | } | ||
Line 39: | 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; | ||
+ | font-size: 20px; | ||
} | } | ||
Line 66: | Line 75: | ||
header{ | header{ | ||
− | |||
− | |||
− | |||
height: 100vh; | height: 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 90: | Line 97: | ||
float:right; | float:right; | ||
list-style: none; | list-style: none; | ||
− | + | padding-top: 30px; | |
− | + | width: 80%; | |
− | + | transform: translate(0, 30px); | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
.main-nav li { | .main-nav li { | ||
display: inline-block; | display: inline-block; | ||
− | margin-left: | + | margin-left: 80px; |
} | } | ||
Line 109: | 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 124: | Line 128: | ||
.container { | .container { | ||
− | margin-top: | + | margin-top: 30px; |
− | background-color: rgba( | + | background-color: rgba(215, 217, 215, 0.73); |
width: 85%; | width: 85%; | ||
align-content: center; | align-content: center; | ||
− | transform: translate( | + | 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 135: | Line 139: | ||
.PD { | .PD { | ||
− | + | color: #2c5a13; | |
font-size: 50px; | font-size: 50px; | ||
+ | line height: 60px; | ||
+ | text-decoration: none; | ||
+ | transform: translate(3%); | ||
} | } | ||
− | + | 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/ | + | <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 166: | 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> | ||
</div> | </div> | ||
− | + | </div> | |
</body> | </body> | ||
+ | |||
</html> | </html> |
Latest revision as of 03:20, 2 November 2017