|
|
Line 1: |
Line 1: |
− | <html>
| |
− | <style type="text/css">
| |
− | #contentSub, #footer-box, #catlinks, #search-controls, #p-
| |
| | | |
− | logo, #sideMenu, #menubar, .logo_2017, .printfooter, .firstHeading,.visualClear {display:
| |
− |
| |
− | none;} /*-- hides default wiki settings --*/
| |
− |
| |
− | #top-section { /*-- styling for default menu bar (edit, page,
| |
− |
| |
− | history, etc.) --*/
| |
− |
| |
− | border: 0 none;
| |
− | height: 14px;
| |
− | z-index: 100;
| |
− | top: 0;
| |
− | position: fixed;
| |
− | width: 975px;
| |
− | left: 50%;
| |
− | margin-left: -487px;
| |
− | }
| |
− |
| |
− | #globalWrapper, #content { /*-- changes default wiki settings
| |
− |
| |
− | --*/
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | border: 0px;
| |
− | background-color: transparent;
| |
− | margin: 0px;
| |
− | padding: 0px;
| |
− | }
| |
− |
| |
− | html, body, .wrapper { /*-- changes default wiki settings --
| |
− |
| |
− | */
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | background-color: transparent;
| |
− | }
| |
− | </style>
| |
− |
| |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/jasnybootstrapmin?action=raw&ctype=text/css" />
| |
− |
| |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/bootstrapmin?action=raw&ctype=text/css" />
| |
− |
| |
− | <script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&ctype=text/javascript"></script>
| |
− | <!-- Assets -->
| |
− | <link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" />
| |
− |
| |
− | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500">
| |
− | <link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css">
| |
− |
| |
− | <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
| |
− | <link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/font-awesome/css/font-awesome.min.css">
| |
− |
| |
− | <link rel="stylesheet" type="text/css"
| |
− | href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&ctype=text/css" />
| |
− |
| |
− |
| |
− | <!-- Favicon and touch icons -->
| |
− | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
| |
− | <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
| |
− |
| |
− |
| |
− | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Heidelberg/styles2/CSS?action=raw&ctype=text/css">
| |
− |
| |
− |
| |
− | <script type="text/javascript" src="https://2015.igem.org/Template:Heidelberg/js/jasnybootstrapmin?action=raw&ctype=text/javascript"></script>
| |
− |
| |
− | <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
| |
− |
| |
− | <!-- jQuery CDN -->
| |
− | <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
| |
− | <!-- Bootstrap Js CDN -->
| |
− | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
| |
− | <!-- jQuery Nicescroll CDN -->
| |
− | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script>
| |
− |
| |
− | <style>
| |
− | body {
| |
− | font-family: 'Josefin Sans' !important;
| |
− | font-size: 16px;
| |
− | font-weight: 300;
| |
− | color: #888;
| |
− |
| |
− | text-align: center;
| |
− | }
| |
− |
| |
− | .textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
| |
− |
| |
− | #textblock1 {
| |
− | position: absolute;
| |
− | top: 100px;
| |
− | left: 20px;
| |
− | width:500px;
| |
− | }
| |
− | #textblock2 {
| |
− | position: absolute;
| |
− | top: 960px;
| |
− | left: 220px;
| |
− | width: 450px;
| |
− | }
| |
− | #textblock3 {
| |
− | position: absolute;
| |
− | top: 960px;
| |
− | right: 20px;
| |
− | width: 500px;
| |
− | height: 300px;
| |
− |
| |
− | }
| |
− | #textblock4 {
| |
− | position: absolute;
| |
− | top: 1500px;
| |
− | left: 20px;
| |
− | width:450px;
| |
− | }
| |
− | #textblock5 {
| |
− | position: absolute;
| |
− | top: 2100px;
| |
− | right: 20px;
| |
− | width: 550px;
| |
− | }
| |
− | #textblock6 {
| |
− | position: absolute;
| |
− | top: 2700px;
| |
− | left: 20px;
| |
− | width: 500px;
| |
− | }
| |
− | #textblock7 {
| |
− | position: absolute;
| |
− | top: 3250px;
| |
− | right: 20px;
| |
− | width: 600px;
| |
− | }
| |
− | #textblock8 {
| |
− | position: absolute;
| |
− | top: 3750px;
| |
− | left: 50px;
| |
− | width: 400px;
| |
− | }
| |
− | #textblock9 {
| |
− | position: absolute;
| |
− | top: 3750px;
| |
− | right: 50px;
| |
− | width: 400px;
| |
− | }
| |
− |
| |
− | #textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p, #textblock8 > p {
| |
− | color: white !important;
| |
− | text-align: center;
| |
− | font-size: 26px !important;
| |
− | font-weight: 300 !important;
| |
− | }
| |
− |
| |
− | #textblock1 > a {
| |
− | color: #F8991D;
| |
− | font-size: 60px !important;
| |
− | line-height: 60px !important;
| |
− | }
| |
− | #textblock1 > a:hover, #textblock2 > a:hover, #textblock3 > a:hover, #textblock4 > a:hover, #textblock5 > a:hover, #textblock6 > a:hover, #textblock7 > a:hover, #textblock9 > a:hover {
| |
− | text-decoration: underline;
| |
− | }
| |
− | #textblock2 > a {
| |
− | color: #fbb74b;
| |
− | font-size: 60px;
| |
− | line-height: 60px;
| |
− | }
| |
− |
| |
− | #textblock4 > a {
| |
− | color:#9D1C20;
| |
− | font-size: 60px;
| |
− | line-height: 60px;
| |
− | }
| |
− | #textblock5 > a {
| |
− | color:#Fee000;
| |
− | font-size: 50px;
| |
− | line-height: 50px;
| |
− | }
| |
− | #textblock6 > a {
| |
− | color: #6698be;
| |
− | font-size: 50px;
| |
− | line-height: 50px;
| |
− | }
| |
− |
| |
− |
| |
− | #textblock7 > a {
| |
− | color:#F8991D;
| |
− | font-size: 50px;
| |
− | line-height: 50px;
| |
− | }
| |
− | #textblock9 > a {
| |
− | color: white;
| |
− | font-size: 60px !important;
| |
− | line-height: 60px !important;
| |
− | }
| |
− |
| |
− |
| |
− | #toolbox-icon1 {
| |
− | position: absolute;
| |
− | top: 4460px;
| |
− | left: 430px;
| |
− | }
| |
− |
| |
− | #toolbox-row1 {
| |
− | top: 0px;
| |
− | }
| |
− | #toolbox-row2 {
| |
− | top: 180px;
| |
− | }
| |
− | #toolbox-row3 {
| |
− | top: 360px;
| |
− | }
| |
− | wrapper {
| |
− | padding-bottom: 0px;
| |
− | }
| |
− |
| |
− |
| |
− | .landing-video {
| |
− | position: relative;
| |
− |
| |
− | width: 100%;
| |
− | height: auto;
| |
− | background: url('') no-repeat;
| |
− |
| |
− |
| |
− | }
| |
− | #Icon1 {
| |
− | position: absolute;
| |
− |
| |
− | left: 4%;
| |
− | }
| |
− | #Icon2 {
| |
− | position: absolute;
| |
− | width: 400px;
| |
− | left: 1%;
| |
− |
| |
− | }
| |
− | #Icon3 {
| |
− | position: absolute;
| |
− | left: 4%;
| |
− | width: 400px;
| |
− | }
| |
− | #Icon4 {
| |
− | position: absolute;
| |
− | right: 12%;
| |
− | width: 300px;
| |
− | }
| |
− | #Icon5 {
| |
− | position: absolute;
| |
− | right: 8%;
| |
− | width: 300px;
| |
− | }
| |
− | #Icon6 {
| |
− | position: absolute;
| |
− | right: 10%;
| |
− | width: 300px;
| |
− | }
| |
− |
| |
− | .icon-text {
| |
− | position: relative;
| |
− | top: 20px;
| |
− | left: 130px;
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− | .icon-text-right {
| |
− | position: relative;
| |
− | top: 20px;
| |
− | right: 0px;
| |
− |
| |
− | width: 300px;
| |
− | }
| |
− |
| |
− | #Icon1 > .icon-text h5 {
| |
− | text-transform: uppercase;
| |
− | color: #b3dede !important;
| |
− | font-weight: 400 !important;
| |
− | line-height: 40px !important;
| |
− | }
| |
− |
| |
− | #Icon1:hover > .icon-text p,#Icon2:hover > .icon-text p,#Icon3:hover > .icon-text p,#Icon4:hover > .icon-text-right p,#Icon5:hover > .icon-text-right p,#Icon6:hover > .icon-text-right p {
| |
− | opacity: 1 !important;
| |
− | text-align: center;
| |
− | transition: opacity 1s ease;
| |
− | }
| |
− | #Icon1 > .icon-text p,#Icon2 > .icon-text p,#Icon3 > .icon-text p,#Icon4 > .icon-text-right p,#Icon5 > .icon-text-right p,#Icon6 > .icon-text-right p {
| |
− | opacity: 0 !important;
| |
− | color: white !important;
| |
− | font-family: 'Josefin Sans' !important;
| |
− | font-size: 25px !important;
| |
− | }
| |
− | #Icon2 > .icon-text h5 {
| |
− | text-transform: uppercase;
| |
− | color: #b2cbdd !important;
| |
− | font-weight: 400 !important;
| |
− | line-height: 40px !important;
| |
− | }
| |
− |
| |
− |
| |
− | #Icon3 > .icon-text h5 {
| |
− | text-transform: uppercase;
| |
− | color: #fed699!important;
| |
− | font-weight: 400 !important;
| |
− | line-height: 40px !important;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | #Icon4 > .icon-text-right h5 {
| |
− | text-transform: uppercase;
| |
− | color: #d89f9c !important;
| |
− | font-weight: 400 !important;
| |
− | line-height: 40px !important;
| |
− | }
| |
− |
| |
− |
| |
− | #Icon5 > .icon-text-right h5 {
| |
− | text-transform: uppercase;
| |
− | color: #fef39b !important;
| |
− | font-weight: 400 !important;
| |
− | line-height: 40px !important;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | #Icon6 > .icon-text-right h5 {
| |
− | text-transform: uppercase;
| |
− | color: #9ad5c3 !important;
| |
− | font-weight: 400 !important;
| |
− | line-height: 40px !important;
| |
− | }
| |
− |
| |
− | .phage-scroller {
| |
− | width: 150px;
| |
− | height: auto;
| |
− | }
| |
− |
| |
− | #toolbox {
| |
− | position: absolute;
| |
− | top: 3900px;
| |
− | min-height: 600px ;
| |
− | width: 100%;
| |
− | max-width: 1200px;
| |
− | margin: 0 auto;
| |
− |
| |
− | }
| |
− |
| |
− | #toolbox-image {
| |
− | position: absolute;
| |
− | left: 380px;
| |
− | width: 500px;
| |
− | top: 10%
| |
− | }
| |
− |
| |
− | .icon {
| |
− | cursor: pointer;
| |
− | }
| |
− | .toolbox-icon {
| |
− | width: 120px;
| |
− | height: 120px;
| |
− | border-radius: 100%;
| |
− | float: left;
| |
− | background-color: white;
| |
− | position: absolute;
| |
− |
| |
− | }
| |
− |
| |
− | .icon:hover > .toolbox-icon {
| |
− |
| |
− | transform: scale(1.2,1.2);
| |
− | transition: all 1s ease-out;
| |
− | }
| |
− |
| |
− |
| |
− | @media (max-width: 1200px) {
| |
− |
| |
− | #wrapper {
| |
− | padding-bottom: 600px;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | #textblock1 {
| |
− | position: absolute;
| |
− | top: 50px;
| |
− | left: 0px;
| |
− | width: 400px;
| |
− | }
| |
− | #textblock1 > p, #textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p,#textblock7 > p,#textblock8 > p,#textblock9 > p {
| |
− | color: white !important;
| |
− |
| |
− |
| |
− | font-size: 24px !important;
| |
− | font-weight: 300 !important;
| |
− | }
| |
− |
| |
− | #textblock1 > a, #textblock2 > a,#textblock3 > a, #textblock4 > a,#textblock5 > a,#textblock6 > a,#textblock7 > a,#textblock8 > a,#textblock9 > a {
| |
− | line-height: 50px !important;
| |
− | font-size: 50px !Important;
| |
− | }
| |
− |
| |
− | #textblock2 {
| |
− | position: absolute;
| |
− | top: 800px;
| |
− | left: 150px;
| |
− | width: 500px;
| |
− | }
| |
− |
| |
− | #textblock3 {
| |
− | position: absolute;
| |
− | top: 780px;
| |
− | right: 0px;
| |
− | width: 300px;
| |
− | height: 220px;
| |
− | }
| |
− | #textblock4 {
| |
− | position: absolute;
| |
− | top: 1250px;
| |
− | left: 0px;
| |
− | width: 400px;
| |
− | }
| |
− | #textblock5 {
| |
− | position: absolute;
| |
− | top: 1700px;
| |
− | right: 0px;
| |
− | width: 500px;
| |
− | }
| |
− | #textblock6 {
| |
− | position: absolute;
| |
− | top: 2220px;
| |
− | left: 0px;
| |
− | width: 450px;
| |
− | }
| |
− |
| |
− | #textblock7 {
| |
− | position: absolute;
| |
− | top: 2700px;
| |
− | right: 0px;
| |
− | width: 550px;
| |
− | }
| |
− | #textblock8 {
| |
− | position: absolute;
| |
− | top: 3200px;
| |
− | left: 0px;
| |
− | width: 400px;
| |
− | }
| |
− | #textblock9 {
| |
− | position: absolute;
| |
− | top: 3200px;
| |
− | right: 0px;
| |
− | width: 400px;
| |
− | }
| |
− | #toolbox {
| |
− | position: absolute;
| |
− | top: 3700px;
| |
− | }
| |
− | #toolbox-image {
| |
− | position: relative;
| |
− | left: 30px !important;
| |
− | }
| |
− | #Icon1 {
| |
− | left: 100px;
| |
− | }
| |
− | #Icon2 {
| |
− | left: 100px;
| |
− | }
| |
− | #Icon3 {
| |
− | left: 100px;
| |
− | }
| |
− | #Icon4 {
| |
− | right: 200px;
| |
− | }
| |
− | #Icon5 {
| |
− | right: 200px;
| |
− |
| |
− | }
| |
− | #Icon6 {
| |
− | right: 200px;
| |
− | }
| |
− | }
| |
− |
| |
− | .sublink {
| |
− | font-weight: 400 !important;
| |
− | }
| |
− |
| |
− | .sublink:hover {
| |
− |
| |
− | text-decoration: underline !important;
| |
− | }
| |
− |
| |
− | .aligner-left {
| |
− | text-align: center !important;
| |
− | }
| |
− |
| |
− | .aligner-right {
| |
− | text-align: center !important;
| |
− | }
| |
− |
| |
− | #overall-wrapper {
| |
− | min-width: 1000px;
| |
− | }
| |
− |
| |
− | @media (max-width: 960px) {
| |
− | body {
| |
− | width: 1000px;
| |
− | overflow-x: scroll;
| |
− | }
| |
− | }
| |
− | @media screen and (max-width: 960px) {
| |
− | .t-container {
| |
− | width: 1000px ! important;
| |
− | max-width: 1200px !important;
| |
− | min-width: 980px !important;
| |
− | }
| |
− | }
| |
− |
| |
− | </style>
| |
− | </head>
| |
− | <body class="t-body">
| |
− | <!-- Top menu -->
| |
− |
| |
− | </p><p>
| |
− |
| |
− | <!-- Start of CSS-->
| |
− | <style type="text/css">
| |
− |
| |
− | /* WIKI SETTINGS*/
| |
− |
| |
− | /* Hide first heading */
| |
− | .firstHeading {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | /*-- Remove borders, float content left and remove padding/margin */
| |
− | #globalWrapper, #content{
| |
− | background-color: transparent;
| |
− | border: 0px;
| |
− | float: left;
| |
− | margin:0px;
| |
− | padding: 0px;
| |
− | }
| |
− |
| |
− | /*left align Black Menu Bar */
| |
− | #top_menu_inside {
| |
− | margin-left: 20px;
| |
− | }
| |
− | </style>
| |
− |
| |
− | <head>
| |
− | </head>
| |
− | </html>
| |