(Blanked the page) |
|||
Line 1: | Line 1: | ||
+ | <!DOCTYPE> | ||
+ | <html> | ||
+ | <head> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet"> | ||
+ | |||
+ | <title>MIT iGEM 2017</title> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <header> | ||
+ | <nav> | ||
+ | <div class="row nav-bar"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/9/9c/MIT-Logo.jpg" alt="iGEM logo" class="logo"> | ||
+ | <ul class="main-nav"> | ||
+ | <li><a href="#">Home</a></li> | ||
+ | <li><a href="#">About Us</a></li> | ||
+ | <li><a href="#">Project</a></li> | ||
+ | <li><a href="#">Lab Work</a></li> | ||
+ | <li><a href="#">Modelling</a></li> | ||
+ | <li><a href="#">Human Practices</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </nav> | ||
+ | |||
+ | </header> | ||
+ | |||
+ | |||
+ | |||
+ | </body> | ||
+ | |||
+ | |||
+ | |||
+ | <style> | ||
+ | *{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | box-sizing: border-box; | ||
+ | |||
+ | } | ||
+ | |||
+ | html { | ||
+ | background-color: #fff; | ||
+ | color: #555; | ||
+ | font-family: 'Lato', 'Arial', sans-serif; | ||
+ | font-weight: 300; | ||
+ | font-size: 20px; | ||
+ | text-rendering: optimizeLegibility; | ||
+ | } | ||
+ | |||
+ | |||
+ | .row{ | ||
+ | max-width: 1140px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | h1, | ||
+ | h2, | ||
+ | h3{ | ||
+ | |||
+ | font-weight: 300; | ||
+ | text-transform:uppercase; | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | h1{ | ||
+ | margin-top: 0; | ||
+ | margin-bottom: 20px; | ||
+ | margin: 0; | ||
+ | color: #fff; | ||
+ | font-size: 240%; | ||
+ | word-spacing: 4px; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | |||
+ | h2{ | ||
+ | font-size: 180%; | ||
+ | word-spacing: 2px; | ||
+ | text-align: center; | ||
+ | margin-bottom: 30px; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | |||
+ | h3{ | ||
+ | font-size: 110%; | ||
+ | margin-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | h2:after{ | ||
+ | display: block; | ||
+ | height: 2px; | ||
+ | background-color: #2980b9; | ||
+ | content: " "; | ||
+ | width: 100px; | ||
+ | margin: 0 auto; | ||
+ | margin-top: 30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .logo{ | ||
+ | height: 100px; | ||
+ | width:auto; | ||
+ | float: left; | ||
+ | margin-top: 20px; | ||
+ | background-color: #000; | ||
+ | border-radius: 30px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .main-nav{ | ||
+ | float:right; | ||
+ | list-style: none; | ||
+ | margin-top: 55px; | ||
+ | background-color: #000; | ||
+ | } | ||
+ | |||
+ | .main-nav li{ | ||
+ | display: inline-block; | ||
+ | margin-left: 40px; | ||
+ | } | ||
+ | |||
+ | .main-nav li a:link, | ||
+ | .main-nav li a:visited{ | ||
+ | padding: 8px 0; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 90%; | ||
+ | border-bottom: 2px solid transparent; | ||
+ | transition: border-bottom 0.2s; | ||
+ | } | ||
+ | |||
+ | |||
+ | .main-nav li a:hover, | ||
+ | .main-nav li a:active{ | ||
+ | border-bottom: 2px solid #2980b9; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | </html> |
Revision as of 18:01, 31 July 2017
<!DOCTYPE>