(Prototype team page) |
|||
(18 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Montserrat:300|Vollkorn:700|Wallpoet|Heebo:800|Alegreya+Sans+SC:900" rel="stylesheet"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||
+ | </head> | ||
+ | <style> | ||
− | + | * { | |
− | + | -webkit-box-sizing: border-box; | |
− | + | box-sizing: border-box; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
+ | } | ||
+ | html { | ||
+ | font-size:16px; | ||
+ | } | ||
+ | body { | ||
+ | width: 100%; | ||
+ | margin: 48px 0 0 0; | ||
+ | padding: 0; | ||
+ | color: black; | ||
+ | background-color: white; | ||
+ | font: inherit; | ||
+ | font-size:16px; | ||
+ | word-wrap: break-word; | ||
+ | } | ||
+ | @media (min-width: 1024px) { | ||
+ | body { | ||
+ | margin: 16px 0 0 0; | ||
+ | } | ||
+ | } | ||
− | |||
+ | #globalWrapper { | ||
+ | width: 100%; | ||
+ | padding: 0; | ||
+ | background-color: #149375; | ||
+ | position: relative; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | #content { | ||
+ | width: 100%; | ||
+ | min-height: 80vh; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: none; | ||
+ | color: inherit; | ||
+ | background-color: #ffffff; | ||
+ | position: relative; | ||
+ | } | ||
+ | #HQ_page { | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: none; | ||
+ | } | ||
+ | #top_title{display:none;} | ||
− | + | #bodyContent { | |
+ | } | ||
− | + | html *{ | |
− | + | cursor:url("https://static.igem.org/mediawiki/2018/4/48/T--Bulgaria--idea.png"),auto; | |
− | + | } | |
− | + | ||
+ | h1{ | ||
+ | padding-top: 30px; | ||
+ | font-size: 40px; | ||
+ | font-family: 'Alegreya Sans SC', sans-serif !important; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | #bottomLayer{ | ||
+ | position: fixed; | ||
+ | top:15px; | ||
+ | left:0px; | ||
+ | height: 110%; | ||
+ | width: 100%; | ||
+ | background-color: #0A1215; | ||
− | + | } | |
+ | |||
+ | .backgroundPicture{ | ||
+ | position: fixed; | ||
+ | top: 15; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/6/67/T--Bulgaria--hpppp.jpg"); | ||
+ | background-color: #0A1215; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | |||
+ | .navigation { | ||
+ | position:fixed; | ||
+ | top:15px; | ||
+ | width: 100%; | ||
+ | left:0px; | ||
+ | #overflow: hidden; | ||
+ | background-color: #62071B; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | } | ||
+ | |||
+ | .navigation a { | ||
+ | float: left; | ||
+ | font-size: 16px; | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | padding: 14px 16px; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .dropdown { | ||
+ | float: left; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .dropdown .dropNAVbtn { | ||
+ | font-size: 16px; | ||
+ | color: white; | ||
+ | padding: 14px 16px; | ||
+ | background-color: #62071B; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | } | ||
+ | |||
+ | .navigation a:hover, .dropdown:hover .dropNAVbtn { | ||
+ | background-color: #9F182F; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #f9f9f9; | ||
+ | min-width: 160px; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 100000 !important; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a { | ||
+ | float: none; | ||
+ | color: black; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a:hover { | ||
+ | background-color: #ddd; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #specialMenu { | ||
+ | background-color: #D5898A; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #activeMenu{ | ||
+ | background-color: #9F182F; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .navigation .icon { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1000px) { | ||
+ | .navigation a:not(:first-child) {display: none;} | ||
+ | .navigation .dropdown:not(:first-child) {display: none;} | ||
+ | .navigation a.icon { | ||
+ | float: right; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1000px) { | ||
+ | .navigation.responsive { position:fixed; | ||
+ | top:15px; | ||
+ | width: 100%; | ||
+ | left:0px;} | ||
+ | .navigation.responsive .icon { | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | } | ||
+ | .navigation.responsive a { | ||
+ | float: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .navigation.responsive .dropdown { | ||
+ | float: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | .contentHolder{ | ||
+ | -webkit-touch-callout: none; | ||
+ | -webkit-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | opacity: 0.8; | ||
+ | position: relative; | ||
+ | top:70vh; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | width: 850px; | ||
+ | padding-bottom: 70px; | ||
+ | padding-top: 20px; | ||
+ | background-color: #b5b7b8; | ||
+ | height: auto; | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | |||
+ | a{ | ||
+ | color: black; | ||
+ | |||
+ | } | ||
+ | a:hover{ | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | .contentHolder:hover{ | ||
+ | background-color: C5C7C8; | ||
− | + | } | |
− | + | ||
− | + | #topTitle{ | |
− | + | padding-top: 50px; | |
− | + | border-radius: 50px 50px 0px 0px; | |
− | + | opacity: 1; | |
− | + | text-align: center; | |
+ | font-family: 'Heebo', sans-serif; | ||
+ | font-size: 40px; | ||
+ | height: 30px; | ||
+ | } | ||
+ | #topTitle:hover{ | ||
+ | background-color: B5B7B8; | ||
+ | } | ||
+ | |||
+ | |||
+ | p{ | ||
+ | text-align: center !important; | ||
+ | margin-left: 128px; | ||
+ | margin-right: 128px; | ||
+ | font-family: 'Montserrat', sans-serif !important; | ||
+ | font-size: 20px !important; | ||
+ | } | ||
+ | strong{ | ||
+ | font-family: 'Heebo', sans-serif; | ||
+ | } | ||
+ | .dropbtn { | ||
+ | display: none; | ||
+ | background-color: #4CAF50; | ||
+ | color: white; | ||
+ | padding: 16px; | ||
+ | font-size: 16px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | width: 20vw; | ||
+ | } | ||
− | + | ||
+ | .quickfind-content { | ||
+ | font-family: 'Heebo', sans-serif; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | background-color: #f9f9f9; | ||
+ | width: 20vw; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
− | + | } | |
− | + | ||
+ | .quickfind-content a { | ||
+ | color: black; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | border-style: solid none none none; | ||
+ | } | ||
+ | |||
+ | .quickfind-content a:hover {background-color: #B1B1B1} | ||
+ | |||
+ | .quickfind:hover .quickfind-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .quickfind:hover .dropbtn { | ||
+ | background-color: #3e8e41; | ||
+ | } | ||
+ | .quickfind { | ||
+ | position: absolute; | ||
+ | width: 20vw; | ||
+ | left: 40vw; | ||
+ | top: 15vh; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1000px) { | ||
+ | |||
+ | p{ | ||
+ | margin-left: 32px; | ||
+ | margin-right: 32px; | ||
+ | } | ||
+ | |||
+ | .contentHolder:hover{ | ||
+ | background-color: B5B7B8; | ||
− | + | } | |
+ | .contentHolder{ | ||
+ | height: auto; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | #topTitle{ | ||
+ | border-radius: 50px 50px 0px 0px; | ||
+ | opacity: 1; | ||
+ | text-align: center; | ||
+ | font-family: 'Heebo', sans-serif; | ||
+ | font-size: 32px; | ||
+ | height: 0vw; | ||
+ | } | ||
+ | #topTitle:hover{ | ||
+ | background-color: B5B7B8; | ||
+ | } | ||
+ | |||
+ | .dropbtn { | ||
+ | background-color: #4CAF50; | ||
+ | color: white; | ||
+ | padding: 16px; | ||
+ | font-size: 16px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | width: 50vw; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .quickfind-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #f9f9f9; | ||
+ | width: 50vw; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .quickfind-content a { | ||
+ | color: black; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | .quickfind-content a:hover { | |
+ | background-color: #f1f1f1; | ||
− | + | } | |
− | + | ||
+ | .quickfind:hover .quickfind-content { | ||
+ | display: block; | ||
+ | } | ||
− | + | .quickfind:hover .dropbtn { | |
− | + | background-color: #3e8e41; | |
− | + | } | |
− | < | + | .quickfind { |
+ | position: absolute; | ||
+ | width: 50vw; | ||
+ | left: 25vw; | ||
+ | top: 100px; | ||
+ | } | ||
+ | } | ||
+ | <--!end mobile-> | ||
− | + | #scroldown { | |
+ | width: 100%; | ||
+ | height: 20; | ||
+ | |||
+ | } | ||
+ | #scroldown::before{ | ||
+ | content: '╲╱'; | ||
+ | color: #fff; | ||
+ | position: fixed; | ||
+ | opacity: 0.7; | ||
+ | text-shadow: 0 0 6px rgba(0,0,0,0.5); | ||
+ | font-size: 20px; | ||
+ | width: 60px; | ||
+ | height: 40px; | ||
+ | line-height: 40px; | ||
+ | text-align: center; | ||
+ | border-radius: 10px; | ||
+ | bottom: 20px; | ||
+ | left: 50%; | ||
+ | margin-left: -30px; | ||
+ | animation: bounce 1s ease infinite; | ||
+ | } | ||
+ | @keyframes bounce { | ||
+ | 50% { | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | 100% { | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | } | ||
+ | #myBtn { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 30px; | ||
+ | z-index: 99; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | background-color: green; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | padding: 15px; | ||
+ | border-radius: 10px; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | #myBtn:hover { | ||
+ | background-color: #555; /* Add a dark-grey background on hover */ | ||
+ | } | ||
+ | |||
+ | .pictures{ | ||
+ | transition: transform .2s; | ||
+ | height: auto; | ||
+ | width: 200px; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | .pictures:hover{ | ||
+ | transform: scale(2.5); | ||
+ | } | ||
+ | </style> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $("a").on('click', function(event) { | ||
+ | if (this.hash !== "") { | ||
+ | event.preventDefault(); | ||
+ | var hash = this.hash; | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $(hash).offset().top | ||
+ | }, 800, function(){ | ||
+ | window.location.hash = hash; | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <script> | ||
+ | window.onscroll = function() {scrollFunction()}; | ||
+ | |||
+ | function scrollFunction() { | ||
+ | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | ||
+ | document.getElementById("myBtn").style.display = "block"; | ||
+ | } else { | ||
+ | document.getElementById("myBtn").style.display = "none"; | ||
+ | } | ||
+ | } | ||
+ | function topFunction() { | ||
+ | document.body.scrollTop = 0; | ||
+ | document.documentElement.scrollTop = 0; | ||
+ | } | ||
+ | |||
+ | function burgermenu() { | ||
+ | var x = document.getElementById("nav"); | ||
+ | if (x.className === "navigation") { | ||
+ | x.className += " responsive"; | ||
+ | } else { | ||
+ | x.className = "navigation"; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | <body> | ||
+ | |||
+ | <!-- CUSTOM OVERLAY --> | ||
+ | <div class="overlays" id="bottomLayer"></div> | ||
+ | <div class="backgroundPicture"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="quickfind"> | ||
+ | <button class="dropbtn">LEARN MORE</button> | ||
+ | <div class="quickfind-content"> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/publicEng">PUBLIC ENGAGEMENTS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/IntHP">INTEGRATED HUMAN PRACTICES</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/survey">SURVEY</a> | ||
+ | </div> | ||
+ | </div> | ||
− | < | + | <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> |
− | + | ||
− | < | + | <!-- CUSTOM MENU --> |
+ | <div class="navigation" id="nav"> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria">HOME</a> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropNAVbtn">TEAM | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/theteam">MEMBERS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/attrib">ATTRIBUTIONS</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropNAVbtn">PROJECT | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/theproject" >DESCRIPTION</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/DESIGN">DESIGN</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/PROTOCOLS">PROTOCOLS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/LABBOOK">LAB BOOK</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/RESULTS">RESULTS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/CONTRIBUTION">CONTRIBUTION</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/IMPROVE">IMPROVE</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropNAVbtn">HUMAN PRACTICES | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/publicEng">PUBLIC ENGAGEMENTS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/IntHP">INTEGRATED HUMAN PRACTICES</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/survey">SURVEY</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="dropdown"> | ||
+ | <button class="dropNAVbtn">COLLABORATIONS | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/COLLABMEETINGS">MEETINGS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/COLLABSURVEYS">SURVEYS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/COLLABOTHERS">OTHERS</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/COLLABfollow">#FollowMeToiGEM</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
− | < | + | <a href="https://2018.igem.org/Team:Bulgaria/parts" >PARTS</a> |
− | < | + | <a href="https://2018.igem.org/Team:Bulgaria/safety">SAFETY</a> |
+ | |||
+ | <div class="dropdown"> | ||
+ | <button class="dropNAVbtn">MEDAL CRITERIA | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/MEDALBRONZE">BRONZE</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/MEDALSILVER">SILVER</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/MEDALGOLD">GOLD</a> | ||
+ | <a href="https://2018.igem.org/Team:Bulgaria/MEDALAWARD">SPECIAL AWARD</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <a href="https://igem.org/2018_Judging_Form?id=2847" id="specialMenu">JUDGING FORM</a> | ||
+ | <a href="javascript:void(0);" class="icon" onclick="burgermenu()"> | ||
+ | MENU | ||
+ | </a> | ||
</div> | </div> | ||
+ | </body> | ||
+ | </html> |
Latest revision as of 01:11, 18 October 2018