|
|
| Line 1: |
Line 1: |
| − | <html>
| + | |
| − | <style>
| + | |
| − | /* styles elements placed on page by default */
| + | |
| − | #sideMenu, #top_title {
| + | |
| − | display:none;
| + | |
| − | }
| + | |
| − | #content {
| + | |
| − | margin: 0;
| + | |
| − | margin-top: -7px;
| + | |
| − | padding: 0;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | #top_menu_inside {
| + | |
| − | bottom: 0px;
| + | |
| − | }
| + | |
| − | /* styles elements added by us */
| + | |
| − | @font-face {
| + | |
| − | font-family: 'Open Sans';
| + | |
| − | font-weight: 300;
| + | |
| − | src: url("https://static.igem.org/mediawiki/2016/c/c9/Opensans_light.ttf") format("opentype");
| + | |
| − | }
| + | |
| − | html, body {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | html, body, p, b, h1, h2, h3, h4, h5, h6, table, tr, th, td {
| + | |
| − | font-family: 'Open Sans', sans-serif !important;
| + | |
| − | }
| + | |
| − | p {
| + | |
| − | font-weight: 300;
| + | |
| − | }
| + | |
| − | #nav {
| + | |
| − | /*margin-top: -10px;*/
| + | |
| − | position: fixed;
| + | |
| − | background: transparent;
| + | |
| − | padding: 15px 0;
| + | |
| − | width: 100%;
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| − | #nav a {
| + | |
| − | color: #ffffff;
| + | |
| − | font-size: 11px;
| + | |
| − | letter-spacing: 2.5px;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | #nav a:hover {
| + | |
| − | cursor: hand;
| + | |
| − | }
| + | |
| − | #nav ul {
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | #nav > ul {
| + | |
| − | float: right;
| + | |
| − | margin-right: 100px;
| + | |
| − | }
| + | |
| − | #nav > ul > li {
| + | |
| − | float: left;
| + | |
| − | margin-left: 50px;
| + | |
| − | }
| + | |
| − | #nav > ul > li:first-child {
| + | |
| − | margin-left: 0;
| + | |
| − | }
| + | |
| − | #nav > ul > li > a {
| + | |
| − | font-weight: 300;
| + | |
| − | padding: 15px 0px;
| + | |
| − | text-transform: uppercase;
| + | |
| − | transition: background 0.3s;
| + | |
| − | }
| + | |
| − | #nav > ul > li > ul {
| + | |
| − | background: #000000; /*#313131*/
| + | |
| − | display: none;
| + | |
| − | margin-top: 7.5px;
| + | |
| − | margin-left: -15px;
| + | |
| − | padding: 0;
| + | |
| − | position: absolute;
| + | |
| − | z-index: 1;
| + | |
| − | }
| + | |
| − | #nav > ul > li > ul > li {
| + | |
| − | font-weight: 300;
| + | |
| − | padding: 2.5px 15px;
| + | |
| − | }
| + | |
| − | #nav > ul > li > ul > li:first-child {
| + | |
| − | padding-top: 8px;
| + | |
| − | }
| + | |
| − | #nav > ul > li > ul > li:last-child {
| + | |
| − | padding-bottom: 12px;
| + | |
| − | }
| + | |
| − | div#main {
| + | |
| − | background: url(http://i.imgur.com/8y7EFGc.png) center no-repeat; /*linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), fixed*/
| + | |
| − | -webkit-background-size: cover;
| + | |
| − | -moz-background-size: cover;
| + | |
| − | -o-background-size: cover;
| + | |
| − | background-size: cover;
| + | |
| − | height: 700px;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | #name {
| + | |
| − | font-weight: 300;
| + | |
| − | margin-left: 100px;
| + | |
| − | padding-top: 15%;
| + | |
| − | /*top: 280px;*/
| + | |
| − | width: 35%;
| + | |
| − | }
| + | |
| − | #name h1 {
| + | |
| − | color: #ffffff;
| + | |
| − | font-size: 40px;
| + | |
| − | font-weight: 300;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | }
| + | |
| − | #name h2 {
| + | |
| − | color: #ffffff;
| + | |
| − | font-size: 18px;
| + | |
| − | font-weight: 300;
| + | |
| − | margin-bottom: 50px;
| + | |
| − | }
| + | |
| − | #footer {
| + | |
| − | background: #313131;
| + | |
| − | }
| + | |
| − | a.click {
| + | |
| − | background: #313131;
| + | |
| − | border: 1px solid #313131;
| + | |
| − | color: #ffffff;
| + | |
| − | font-size: 11px;
| + | |
| − | letter-spacing: 2.5px;
| + | |
| − | padding: 15px 35px;
| + | |
| − | text-decoration: none;
| + | |
| − | text-transform: uppercase;
| + | |
| − | transition: background 0.3s, border 0.3s;
| + | |
| − | }
| + | |
| − | a.click:hover {
| + | |
| − | background: transparent;
| + | |
| − | border: 1px solid #ffffff;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | .container {
| + | |
| − | padding: 50px 100px;
| + | |
| − | }
| + | |
| − | div.tile {
| + | |
| − | background: #ffffff;
| + | |
| − | display: inline-block;
| + | |
| − | margin-right: 15px;
| + | |
| − | margin-bottom: 15px;
| + | |
| − | padding: 30px;
| + | |
| − | text-align: center;
| + | |
| − | vertical-align: top;
| + | |
| − | width: 26%;
| + | |
| − | transition: background 0.3s;
| + | |
| − | }
| + | |
| − | .tile h1 {
| + | |
| − | font-size: 26px;
| + | |
| − | font-weight: 400;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | .tile h2{
| + | |
| − | font-size: 15px;
| + | |
| − | font-weight: 300;
| + | |
| − | margin: 15px 0 22px 0;
| + | |
| − | }
| + | |
| − | .tile a.click {
| + | |
| − | background: #313131;
| + | |
| − | border: 1px solid #313131;
| + | |
| − | display: block;
| + | |
| − | color: #ffffff;
| + | |
| − | font-size: 11px;
| + | |
| − | letter-spacing: 2.5px;
| + | |
| − | padding: 15px 35px;
| + | |
| − | text-decoration: none;
| + | |
| − | text-transform: uppercase;
| + | |
| − | transition: background 0.3s, border 0.3s, color 0.3s;
| + | |
| − | }
| + | |
| − | .tile a.click:hover {
| + | |
| − | background: transparent;
| + | |
| − | border: 1px solid #313131;
| + | |
| − | color: #313131;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | @media screen and (max-width: 900px) {
| + | |
| − | #nav > ul > li:not(:first-child) {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | ul.topnav li.icon {
| + | |
| − | float: right;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | #nav > ul {
| + | |
| − | margin-right: 50px;
| + | |
| − | }
| + | |
| − | #name {
| + | |
| − | margin-left: 50px;
| + | |
| − | }
| + | |
| − | .container {
| + | |
| − | padding: 50px 50px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media screen and (min-width: 900px) {
| + | |
| − | #nav > ul > li:hover > ul {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | </html>
| + | |
