(46 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
{{TecCEM/Header}} | {{TecCEM/Header}} | ||
− | <html> | + | <html> |
<style> | <style> | ||
− | span.bottom{ | + | #main-container span.bottom { |
− | + | background-color: white; | |
− | + | vertical-align: middle; | |
− | } | + | margin: 0 !important; |
+ | } | ||
+ | |||
+ | #main-container { | ||
+ | height: 100vh !important; | ||
+ | width: 100vw; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | flex-direction: column; | ||
+ | align-items: center; | ||
+ | background-color: white; | ||
+ | mix-blend-mode: difference; | ||
+ | } | ||
+ | |||
+ | #main-container #backgr, | ||
+ | #main-container #firstCover { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #main-container #backgr { | ||
+ | background-color: black; | ||
+ | } | ||
+ | |||
+ | #main-container a img { | ||
+ | width: 200%; | ||
+ | } | ||
+ | |||
+ | #main-container #firstCover { | ||
+ | background-color: white; | ||
+ | mix-blend-mode: difference; | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | |||
+ | #main-container #Small1Cell { | ||
+ | top: 10%; | ||
+ | left: 45%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 5%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #main-container #Small1Cell *, | ||
+ | #main-container #Small2Cell *, | ||
+ | #main-container #Small3Cell *, | ||
+ | #main-container #Small4Cell *, | ||
+ | #main-container #Big1Cell *, | ||
+ | #main-container #Big2Cell * { | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | #main-container #Small2Cell { | ||
+ | left: 25%; | ||
+ | top: 25%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 5%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | |||
+ | #main-container #Small3Cell { | ||
+ | left: 30%; | ||
+ | top: 80%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 5%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #main-container #Small4Cell { | ||
+ | left: 60%; | ||
+ | top: 80%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 5%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #main-container #Big1Cell { | ||
+ | left: 75%; | ||
+ | top: 10%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 5%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #main-container #Big2Cell { | ||
+ | left: 85%; | ||
+ | top: 80%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 5%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #main-container #CenterCell { | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 75%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | #main-container #button { | ||
+ | position: absolute; | ||
+ | top: 60%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 3vw; | ||
+ | height: 3vw; | ||
+ | background-color: white; | ||
+ | mix-blend-mode: difference; | ||
+ | border-radius: 100%; | ||
+ | z-index: 666; | ||
+ | } | ||
+ | #main-container #centerCircle{ | ||
+ | position: absolute; | ||
+ | top: 60%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 4vh; | ||
+ | border-radius: 100%; | ||
+ | z-index: 665; | ||
+ | } | ||
+ | |||
+ | #main-container p, | ||
+ | #main-container h1 { | ||
+ | mix-blend-mode: difference; | ||
+ | max-width: 65%; | ||
+ | } | ||
+ | |||
+ | #main-container p { | ||
+ | color: white !important; | ||
+ | } | ||
+ | |||
+ | #main-container .bottom { | ||
+ | mix-blend-mode: difference; | ||
+ | } | ||
+ | |||
+ | #main-container h1 { | ||
+ | -webkit-text-stroke-color: white !important; | ||
+ | } | ||
+ | |||
+ | #main-container span.bottom.project { | ||
+ | background-color: #ff1558; | ||
+ | } | ||
+ | |||
+ | #main-container span.bottom.team { | ||
+ | background-color: #17cc46; | ||
+ | } | ||
+ | |||
+ | #main-container span.bottom.safety { | ||
+ | background-color: #ef6fca; | ||
+ | } | ||
+ | |||
+ | #main-container span.bottom.notebook { | ||
+ | background-color: #0000ff; | ||
+ | } | ||
+ | |||
+ | #main-container span.bottom.awards { | ||
+ | background-color: #ffdb27; | ||
+ | } | ||
+ | |||
+ | #main-container span.bottom.parts { | ||
+ | background-color: #ff9d33; | ||
+ | } | ||
+ | |||
+ | #main-container span.bottom.human-practices { | ||
+ | background-color: #0aa38c; | ||
+ | } | ||
+ | #audioLanding{ | ||
+ | display: none; | ||
+ | } | ||
</style> | </style> | ||
− | <div id=" | + | <div class="container-fluid" id="main-container"> |
− | </div> | + | <div id="backgr"></div> |
− | < | + | <img src="https://static.igem.org/mediawiki/2018/3/3a/T--TecCEM--CenterCell.png" alt="Center Cell" id="CenterCell"> |
− | < | + | <a href="https://2018.igem.org/Team:TecCEM/Description" id="Small1Cell" data-toggle="popover" data-trigger="hover" |
− | + | data-content="Project" tabindex="0" data-placement="left"> | |
− | + | <img src="https://static.igem.org/mediawiki/2018/2/2a/T--TecCEM--CellSmall1.png" alt="Small1 Cell"> | |
− | + | <span class="bottom project"> | |
− | + | </span> | |
− | + | </a> | |
− | + | <a href="https://2018.igem.org/Team:TecCEM/Safety" id="Small2Cell" data-toggle="popover" data-trigger="hover" | |
− | + | data-content="Safety" tabindex="0"> | |
− | + | <img src="https://static.igem.org/mediawiki/2018/c/c7/T--TecCEM--CellSmall2.png" alt="Small2 Cell"> | |
− | + | <span class="bottom safety"> | |
− | </ | + | </span> |
− | </ | + | </a> |
− | < | + | <a href="https://2018.igem.org/Team:TecCEM/Notebook" id="Small3Cell" data-toggle="popover" data-trigger="hover" |
− | < | + | data-content="Notebook" tabindex="0" data-placement="top"> |
− | + | <img src="https://static.igem.org/mediawiki/2018/b/b5/T--TecCEM--CellSmall3.png" alt="Small3 Cell"> | |
− | + | <span class="bottom notebook"> | |
− | + | </span> | |
− | + | </a> | |
− | </ | + | <a href="https://2018.igem.org/Team:TecCEM/Measurement" id="Small4Cell" data-toggle="popover" data-trigger="hover" |
− | </ | + | data-content="Awards" tabindex="0" data-placement="top"> |
− | + | <img src="https://static.igem.org/mediawiki/2018/1/1b/T--TecCEM--CellSmall4.png" alt="Small4 Cell"> | |
− | + | <span class="bottom awards"> | |
− | + | </span> | |
− | + | </a> | |
− | + | <a href="https://2018.igem.org/Team:TecCEM/Parts" id="Big1Cell" data-toggle="popover" data-trigger="hover" | |
− | + | data-content="Parts" tabindex="0" data-placement="left"> | |
− | + | <img src="https://static.igem.org/mediawiki/2018/6/62/T--TecCEM--CellBig1.png" alt="Big1 Cell"> | |
− | </ | + | <span class="bottom parts"> |
− | < | + | </span> |
− | + | </a> | |
+ | <a href="https://2018.igem.org/Team:TecCEM/Human_Practices" id="Big2Cell" data-toggle="popover" data-trigger="hover" | ||
+ | data-content="Human Practices" tabindex="0" data-placement="left"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/7/7b/T--TecCEM--CellBig2.png" alt="Big2 Cell"> | ||
+ | <span class="bottom human-practices"> | ||
+ | </span> | ||
+ | </a> | ||
+ | <div id="firstCover"></div> | ||
+ | <div id="button"></div> | ||
+ | <h1 class="text-center">Heal a wound. Heal the world.</h1> | ||
+ | <p class="text-center">Enhance tissue regeneration to heal burned patients.</p> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/e/ee/T--TecCEM--CenterCircle.png" id="centerCircle"> | ||
+ | <!-- <span class="bottom"></span> --> | ||
+ | <audio id="audioLanding" controls> | ||
+ | <source src="https://static.igem.org/mediawiki/2018/3/3c/T--TecCEM--SoundLanding.mp3" type="audio/mpeg"> | ||
+ | Your browser does not support the audio element. | ||
+ | </audio> | ||
+ | <!-- <p class="text-center">Scroll down</p> --> | ||
+ | </div> | ||
+ | |||
</html> | </html> | ||
+ | {{TecCEM/JsHome}} | ||
{{TecCEM/Footer}} | {{TecCEM/Footer}} |
Latest revision as of 03:52, 18 October 2018