Difference between revisions of "Team:Hawaii"
| (14 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
<div id="container"> | <div id="container"> | ||
<div id="big-title"> | <div id="big-title"> | ||
| − | <h1>TO THE CENTROMERE</h1> | + | <h1 id="big-title-main">TO THE CENTROMERE</h1> |
| + | <h1 id="big-title-alt">TO THE CENTROMERE</h1> | ||
<h2 id="sub-title">WITH VIRUS-LIKE PARTICLES</h2> | <h2 id="sub-title">WITH VIRUS-LIKE PARTICLES</h2> | ||
</div> | </div> | ||
<div id="button-container"> | <div id="button-container"> | ||
| − | <button id="b1"><a href=" | + | <button id="b1"><a href="https://2018.igem.org/Team:Hawaii/Description">EXPLORE</a></button> |
</div> | </div> | ||
| Line 19: | Line 20: | ||
@keyframes fall { | @keyframes fall { | ||
from { | from { | ||
| − | |||
| − | |||
transform: rotate(0deg); | transform: rotate(0deg); | ||
transform-origin: 50% 40%; | transform-origin: 50% 40%; | ||
| Line 49: | Line 48: | ||
justify-content: center; | justify-content: center; | ||
letter-spacing: 10px; | letter-spacing: 10px; | ||
| − | z-index: | + | z-index: 2; |
} | } | ||
#sub-title { | #sub-title { | ||
| Line 57: | Line 56: | ||
font-size: 40px; | font-size: 40px; | ||
} | } | ||
| − | + | #big-title-alt { | |
| + | display: none; | ||
| + | justify-content: center; | ||
| + | width: 100%; | ||
| + | font-size: 60px; | ||
| + | position: absolute; | ||
| + | top: 100px; | ||
| + | } | ||
| + | @media only screen and (max-width: 800px) { | ||
| + | #big-title-main { | ||
| + | display: none; | ||
| + | } | ||
| + | #big-title-alt { | ||
| + | display: flex; | ||
| + | } | ||
| + | #sub-title { | ||
| + | display: none; | ||
| + | } | ||
| + | } | ||
| + | @media only screen and (max-width: 1200px) { | ||
| + | #big-title { | ||
| + | font-size: 50px; | ||
| + | top: 200px; | ||
| + | } | ||
| + | } | ||
.c1 { | .c1 { | ||
width: 0; | width: 0; | ||
| Line 95: | Line 118: | ||
width: 240px; | width: 240px; | ||
position: absolute; | position: absolute; | ||
| − | top: - | + | top: -50px; |
animation-name: fall; | animation-name: fall; | ||
animation-duration: 6s; | animation-duration: 6s; | ||
animation-iteration-count: 1; | animation-iteration-count: 1; | ||
| − | z-index: | + | z-index: 1; |
| + | } | ||
| + | #button-container { | ||
| + | width: 100%; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | position: absolute; | ||
| + | top: 600px; | ||
| + | z-index: 100; | ||
| + | } | ||
| + | #b1, #b1 a{ | ||
| + | font-family: 'Oswald', sans-serif; | ||
| + | font-style: italic; | ||
| + | letter-spacing: 3px; | ||
| + | font-size: 30px; | ||
| + | background-color: rgb(30,30,30); | ||
| + | color: white; | ||
| + | padding: 10px; | ||
| + | text-align: center; | ||
| + | border:none; | ||
| + | } | ||
| + | #b1:hover { | ||
| + | box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); | ||
| + | } | ||
| + | #b1:focus { | ||
| + | outline:0; | ||
| + | } | ||
| + | #b1 a:hover { | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | #spacer { | ||
| + | width: 100%; | ||
| + | height: 700px; | ||
} | } | ||
Latest revision as of 22:00, 2 October 2018