Difference between revisions of "Template:Home"
| (71 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
| + | <!-- This tells the browser that your page is responsive --> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| + | |||
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" | <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" | ||
id="bootstrap-css"> | id="bootstrap-css"> | ||
<style> | <style> | ||
| − | + | /* Clear the default wiki settings */ | |
#home_logo, #sideMenu { | #home_logo, #sideMenu { | ||
display: none; | display: none; | ||
| Line 37: | Line 40: | ||
overflow-x: hidden; | overflow-x: hidden; | ||
margin-top: 80px; | margin-top: 80px; | ||
| − | letter-spacing: 0. | + | letter-spacing: 0.022em; |
} | } | ||
| Line 46: | Line 49: | ||
h4, | h4, | ||
h5 { | h5 { | ||
| − | + | border: 0; | |
| − | + | color: #ebc163; | |
| + | font-weight: 200; | ||
} | } | ||
| + | h1, | ||
| + | h2, | ||
| + | h3 { | ||
| + | margin-top: 24px; | ||
| + | margin-bottom: 14px; | ||
| + | } | ||
| + | |||
| + | h1 { | ||
| + | font-size: 50px; | ||
| + | } | ||
| + | h2 { | ||
| + | font-size: 40px; | ||
| + | } | ||
| + | h3 { | ||
| + | color: #111; | ||
| + | font-size: 30px; | ||
| + | } | ||
| + | h4 { | ||
| + | font-size: 24px; | ||
| + | } | ||
| + | h5 { | ||
| + | font-size: 20px; | ||
| + | } | ||
| + | |||
| + | .container { | ||
| + | display: none; | ||
| + | } | ||
.container p { | .container p { | ||
line-height: 24px; | line-height: 24px; | ||
font-size: 16px; | font-size: 16px; | ||
color: #333; | color: #333; | ||
| + | text-align: justify; | ||
| + | } | ||
| + | .img-responsive { | ||
| + | padding-bottom: 25px; | ||
| + | } | ||
| + | |||
| + | /* LIST STYLES */ | ||
| + | .container ul { | ||
| + | list-style: square outside none !important; | ||
| + | font-size: 16px; | ||
| + | margin: 20px 0 25px 36px; | ||
| + | } | ||
| + | |||
| + | .container ul li { | ||
| + | margin-bottom: 8px; | ||
| + | } | ||
| + | |||
| + | /* TABLE STYLES */ | ||
| + | .container table { | ||
| + | margin: 0; | ||
| + | width: calc(100% - 100px); | ||
| + | } | ||
| + | .container table th{ | ||
| + | padding: 4px; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | .container table td{ | ||
| + | padding: 4px; | ||
} | } | ||
| Line 60: | Line 119: | ||
border: 0; | border: 0; | ||
} | } | ||
| − | |||
.navbar-default { | .navbar-default { | ||
margin-top: 15px; | margin-top: 15px; | ||
| Line 78: | Line 136: | ||
.navbar-default .navbar-nav > li > a { | .navbar-default .navbar-nav > li > a { | ||
color: white; | color: white; | ||
| + | text-transform: uppercase; | ||
} | } | ||
| Line 83: | Line 142: | ||
.navbar-default .navbar-nav > li > a:hover, | .navbar-default .navbar-nav > li > a:hover, | ||
.navbar-default .navbar-nav > .dropdown > a .caret:hover { | .navbar-default .navbar-nav > .dropdown > a .caret:hover { | ||
| − | color: # | + | color: #ebc163; |
} | } | ||
| Line 89: | Line 148: | ||
.navbar-default .navbar-nav > .open > a:hover, | .navbar-default .navbar-nav > .open > a:hover, | ||
.navbar-default .navbar-nav > .open > a:focus { | .navbar-default .navbar-nav > .open > a:focus { | ||
| − | color: # | + | color: #ebc163; |
background-color: #444; | background-color: #444; | ||
} | } | ||
| Line 101: | Line 160: | ||
border: 0; | border: 0; | ||
} | } | ||
| + | |||
.dropdown-menu > li > a { | .dropdown-menu > li > a { | ||
color: white; | color: white; | ||
| Line 109: | Line 169: | ||
color: #111; | color: #111; | ||
text-decoration: none; | text-decoration: none; | ||
| − | background-color: # | + | background-color: #ebc163; |
} | } | ||
| Line 118: | Line 178: | ||
} | } | ||
| − | .navbar-nav>li>.dropdown-menu { | + | .navbar-nav > li > .dropdown-menu { |
background-color: #444; | background-color: #444; | ||
} | } | ||
| Line 127: | Line 187: | ||
/* HOME banner */ | /* HOME banner */ | ||
| − | .home-banner-image:hover{ | + | .home-banner-image:hover { |
-webkit-animation: swing 2s ease; | -webkit-animation: swing 2s ease; | ||
animation: swing 2s ease; | animation: swing 2s ease; | ||
| Line 136: | Line 196: | ||
/*transform: rotateZ(32deg);*/ | /*transform: rotateZ(32deg);*/ | ||
} | } | ||
| + | |||
.home-banner-image { | .home-banner-image { | ||
| − | width:100%; | + | width: 100%; |
height: 440px; | height: 440px; | ||
background-position: center; | background-position: center; | ||
| Line 144: | Line 205: | ||
background-size: contain; | background-size: contain; | ||
} | } | ||
| − | @-webkit-keyframes swing | + | |
| − | + | @-webkit-keyframes swing { | |
| − | 15% | + | 15% { |
| − | + | ||
-webkit-transform: translateX(5px); | -webkit-transform: translateX(5px); | ||
transform: translateX(5px); | transform: translateX(5px); | ||
} | } | ||
| − | 30% | + | 30% { |
| − | + | ||
-webkit-transform: translateX(-5px); | -webkit-transform: translateX(-5px); | ||
transform: translateX(-5px); | transform: translateX(-5px); | ||
} | } | ||
| − | 50% | + | 50% { |
| − | + | ||
-webkit-transform: translateX(3px); | -webkit-transform: translateX(3px); | ||
transform: translateX(3px); | transform: translateX(3px); | ||
} | } | ||
| − | 65% | + | 65% { |
| − | + | ||
-webkit-transform: translateX(-3px); | -webkit-transform: translateX(-3px); | ||
transform: translateX(-3px); | transform: translateX(-3px); | ||
} | } | ||
| − | 80% | + | 80% { |
| − | + | ||
-webkit-transform: translateX(2px); | -webkit-transform: translateX(2px); | ||
transform: translateX(2px); | transform: translateX(2px); | ||
} | } | ||
| − | 100% | + | 100% { |
| − | + | ||
-webkit-transform: translateX(0); | -webkit-transform: translateX(0); | ||
transform: translateX(0); | transform: translateX(0); | ||
} | } | ||
} | } | ||
| − | @keyframes swing | + | |
| − | + | @keyframes swing { | |
| − | 15% | + | 15% { |
| − | + | ||
-webkit-transform: translateX(5px); | -webkit-transform: translateX(5px); | ||
transform: translateX(5px); | transform: translateX(5px); | ||
} | } | ||
| − | 30% | + | 30% { |
| − | + | ||
-webkit-transform: translateX(-5px); | -webkit-transform: translateX(-5px); | ||
transform: translateX(-5px); | transform: translateX(-5px); | ||
} | } | ||
| − | 50% | + | 50% { |
| − | + | ||
-webkit-transform: translateX(3px); | -webkit-transform: translateX(3px); | ||
transform: translateX(3px); | transform: translateX(3px); | ||
} | } | ||
| − | 65% | + | 65% { |
| − | + | ||
-webkit-transform: translateX(-3px); | -webkit-transform: translateX(-3px); | ||
transform: translateX(-3px); | transform: translateX(-3px); | ||
} | } | ||
| − | 80% | + | 80% { |
| − | + | ||
-webkit-transform: translateX(2px); | -webkit-transform: translateX(2px); | ||
transform: translateX(2px); | transform: translateX(2px); | ||
} | } | ||
| − | 100% | + | 100% { |
| − | + | ||
-webkit-transform: translateX(0); | -webkit-transform: translateX(0); | ||
transform: translateX(0); | transform: translateX(0); | ||
| Line 213: | Line 262: | ||
/* IF THE SCREEN IS LESS THAN 1200PX */ | /* IF THE SCREEN IS LESS THAN 1200PX */ | ||
@media only screen and (max-width: 1024px) { | @media only screen and (max-width: 1024px) { | ||
| − | |||
} | } | ||
| Line 219: | Line 267: | ||
/* IF THE SCREEN IS LESS THAN 768PX */ | /* IF THE SCREEN IS LESS THAN 768PX */ | ||
@media only screen and (max-width: 768px) { | @media only screen and (max-width: 768px) { | ||
| − | .navbar-default .navbar-nav .open .dropdown-menu>li>a { | + | .navbar-default .navbar-nav .open .dropdown-menu > li > a { |
color: #ddd; | color: #ddd; | ||
} | } | ||
| − | .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, | + | |
| − | .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { | + | .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, |
| − | color: # | + | .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { |
| + | color: #ebc163; | ||
| + | } | ||
| + | |||
| + | .container table { | ||
| + | width: calc(100% - 50px); | ||
} | } | ||
} | } | ||
| Line 230: | Line 283: | ||
/* IF THE SCREEN IS LESS THAN 320PX */ | /* IF THE SCREEN IS LESS THAN 320PX */ | ||
@media only screen and (max-width: 320px) { | @media only screen and (max-width: 320px) { | ||
| − | + | h1 { | |
| − | + | font-size: 44px; | |
| + | } | ||
| + | h2 { | ||
| + | font-size: 34px; | ||
| + | } | ||
| + | h3 { | ||
| + | font-size: 28px; | ||
| + | } | ||
| + | h4 { | ||
| + | font-size: 20px; | ||
| + | } | ||
| + | h5 { | ||
| + | font-size: 16px; | ||
| + | } | ||
| + | .container table { | ||
| + | width: calc(100% - 10px); | ||
| + | } | ||
} | } | ||
</style> | </style> | ||
| − | <script type="application/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> | + | <script type="application/javascript" |
| + | src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> | ||
| − | <script> | + | <script type="application/javascript"> |
| − | $(document).ready(function(){ | + | $(document).ready(function () { |
/* remove igem mess */ | /* remove igem mess */ | ||
| − | $("#content").removeClass("mw-body | + | $("#content").removeClass("mw-body").attr("id", ""); |
| − | + | $("#mw-content-text").removeClass("mw-content-ltr").attr("id", ""); | |
| − | $("#mw-content-text").removeClass("mw-content-ltr | + | |
| − | + | ||
$("#HQ_page").attr("id", ""); | $("#HQ_page").attr("id", ""); | ||
$("#bodyContent").attr("id", ""); | $("#bodyContent").attr("id", ""); | ||
$("#globalWrapper").attr("id", ""); | $("#globalWrapper").attr("id", ""); | ||
| + | }); | ||
| + | $(window).load(function () { | ||
| + | setTimeout(function () { | ||
| + | $(".container").fadeIn(); | ||
| + | }, 150); | ||
| + | $("#home_logo").remove(); | ||
| + | $("#sideMenu").remove(); | ||
| + | $("#top_title").remove(); | ||
| + | $("#patrollink").remove(); | ||
}); | }); | ||
</script> | </script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</head> | </head> | ||
<body> | <body> | ||
| Line 287: | Line 359: | ||
<li><a href="https://2017.igem.org/Team:Stuttgart/Team">Team</a></li> | <li><a href="https://2017.igem.org/Team:Stuttgart/Team">Team</a></li> | ||
<li><a href="https://2017.igem.org/Team:Stuttgart/Attributions">Attributions</a></li> | <li><a href="https://2017.igem.org/Team:Stuttgart/Attributions">Attributions</a></li> | ||
| − | <li><a href="https://2017.igem.org/Team:Stuttgart/Sponsoring"> | + | <li><a href="https://2017.igem.org/Team:Stuttgart/Sponsoring">Sponsoring</a></li> |
<!--<li role="separator" class="divider"></li>--> | <!--<li role="separator" class="divider"></li>--> | ||
</ul> | </ul> | ||
| Line 303: | Line 375: | ||
<li><a href="https://2017.igem.org/Team:Stuttgart/InterLab">Interlab Study</a></li> | <li><a href="https://2017.igem.org/Team:Stuttgart/InterLab">Interlab Study</a></li> | ||
<li><a href="https://2017.igem.org/Team:Stuttgart/Model">Modelling</a></li> | <li><a href="https://2017.igem.org/Team:Stuttgart/Model">Modelling</a></li> | ||
| − | <li><a href="https://2017.igem.org/Team:Stuttgart/ | + | <li><a href="https://2017.igem.org/Team:Stuttgart/Composite Part">Composite Part</a></li> |
| − | <li><a href="https://2017.igem.org/Team:Stuttgart/ | + | <li><a href="https://2017.igem.org/Team:Stuttgart/Safety">Safety</a></li> |
<!--<li role="separator" class="divider"></li>--> | <!--<li role="separator" class="divider"></li>--> | ||
</ul> | </ul> | ||
</li> | </li> | ||
| − | <li> | + | <li class="dropdown"> |
| − | <a href="https://2017.igem.org/Team:Stuttgart/ | + | <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" |
| + | aria-expanded="false">Results <span class="caret"></span></a> | ||
| + | <ul class="dropdown-menu"> | ||
| + | <!--<li class="navbar-text navbar-left">Dry Lab</li>--> | ||
| + | <li><a href="https://2017.igem.org/Team:Stuttgart/Esterases and Lipases">Esterases and Lipases</a></li> | ||
| + | <li><a href="https://2017.igem.org/Team:Stuttgart/Keratinases">Keratinases</a></li> | ||
| + | <li><a href="https://2017.igem.org/Team:Stuttgart/Rose and Limonene Fragrance">Rose and Limonene Fragrance</a></li> | ||
| + | <li><a href="https://2017.igem.org/Team:Stuttgart/Demonstrate">Achievements</a></li> | ||
| + | <!--<li role="separator" class="divider"></li>--> | ||
| + | </ul> | ||
</li> | </li> | ||
<li class="dropdown"> | <li class="dropdown"> | ||
| Line 337: | Line 418: | ||
</div><!-- /.container-fluid --> | </div><!-- /.container-fluid --> | ||
</nav> | </nav> | ||
| − | |||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 07:52, 15 December 2017
