Line 2: | Line 2: | ||
<html> | <html> | ||
− | < | + | <style type="text/css"> |
+ | /*nav*/ | ||
+ | nav { | ||
+ | margin: auto; | ||
+ | margin-top: 40px; | ||
+ | position: relative; | ||
+ | width: 320px; | ||
+ | min-width: 320px; | ||
+ | height: 200px; | ||
+ | } | ||
+ | nav h2 { | ||
+ | border-radius: 2px; | ||
+ | position: relative; | ||
+ | background: tomato; | ||
+ | height: 40px; | ||
+ | text-transform: uppercase; | ||
+ | color: ivory; | ||
+ | font-weight: 200; | ||
+ | display: flex; | ||
+ | flex: 1; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | box-shadow: 4px 4px 20px -2px rgba(0,0,0,.35); | ||
+ | transition: all .4s; | ||
+ | } | ||
+ | |||
+ | nav:hover h2{ | ||
+ | transform: translateY(-2px); | ||
+ | box-shadow: 2px 2px 5px -1px rgba(0,0,0,.35); | ||
+ | } | ||
+ | nav:hover:active h2{ | ||
+ | transform: translateY(10px); | ||
+ | box-shadow: 0px -1px 2px 0px rgba(0,0,0,.35); | ||
+ | } | ||
+ | |||
+ | input { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | z-index: 1; | ||
+ | opacity: 0; | ||
+ | cursor: pointer; | ||
+ | height: 40px; | ||
+ | } | ||
+ | |||
+ | #toggle:checked ~ul { | ||
+ | height: 0%; | ||
+ | } | ||
+ | |||
+ | nav ul { | ||
+ | padding-left: 0; | ||
+ | padding-top: 0; | ||
+ | margin-top: 0; | ||
+ | list-style: none; | ||
+ | overflow: hidden; | ||
+ | text-align: right; | ||
+ | margin-bottom: 22px; | ||
+ | text-align: center; | ||
+ | transition: all .4s ease-out; | ||
+ | height: 100%; | ||
+ | |||
+ | } | ||
+ | nav ul li { | ||
+ | border-radius: 2px; | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | margin-left: 35px; | ||
+ | line-height: 1.5; | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | margin-bottom: 5px; | ||
+ | background: tomato; | ||
+ | transition: background 3s; | ||
+ | box-shadow: 2px 2px 10px -2px rgba(0,0,0,.35); | ||
+ | } | ||
+ | |||
+ | nav ul li:hover { | ||
+ | background: mediumorchid; | ||
+ | transition: background .45s; | ||
+ | } | ||
+ | |||
+ | /* nav ul li:hover a:active, li { | ||
+ | color: tomato; | ||
+ | } */ | ||
+ | |||
+ | nav ul a { | ||
+ | display: block; | ||
+ | color: ivory; | ||
+ | text-transform: lowercase; | ||
+ | font-size: 18px; | ||
+ | font-weight: 200; | ||
+ | text-decoration: none; | ||
+ | transition: color .3s; | ||
+ | } | ||
+ | |||
+ | |||
+ | .big_framework { | ||
+ | background-color:white; | ||
+ | display:block; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .big_framework .medium_framework { | ||
+ | margin:auto; | ||
+ | max-width: 1400px; | ||
+ | width:90%; | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
<div class="big_framework"> | <div class="big_framework"> |
Revision as of 15:02, 8 July 2019
Welcome to iGEM 2019!
Your team has been approved and you are ready to start the iGEM season!