(229 intermediate revisions by 2 users not shown) | |||
Line 5: | Line 5: | ||
#home_logo, #sideMenu { display:none; } | #home_logo, #sideMenu { display:none; } | ||
#sideMenu, #top_title, .patrollink {display:none;} | #sideMenu, #top_title, .patrollink {display:none;} | ||
− | body{background: | + | body{background: #444444} |
#content { margin-left:0px; margin-top:-7px; padding:0px; margin:0px; width:100%;} | #content { margin-left:0px; margin-top:-7px; padding:0px; margin:0px; width:100%;} | ||
Line 20: | Line 20: | ||
*/ | */ | ||
− | + | *{ | |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
Line 28: | Line 28: | ||
width: 100vw; | width: 100vw; | ||
height: 100vh; | height: 100vh; | ||
+ | background: #444444; | ||
} | } | ||
Line 33: | Line 34: | ||
width: 100vw; | width: 100vw; | ||
height: 30vh; | height: 30vh; | ||
+ | box-shadow: inset 0 0 20px #333333; | ||
} | } | ||
Line 43: | Line 45: | ||
#section1 > .content_wrapper > .title{ | #section1 > .content_wrapper > .title{ | ||
− | |||
text-align: center; | text-align: center; | ||
font-family: Arial; | font-family: Arial; | ||
− | font-size: | + | min-height: 200px; |
+ | font-size: 7em; | ||
font-weight: bold; | font-weight: bold; | ||
color: black; | color: black; | ||
− | + | animation-name: title_in; | |
− | + | animation-duration: 1s; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | @keyframes title_in{ | ||
+ | 0%{ | ||
+ | transform: translateY(-50px) scale(1.1, 1.1); | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | 100%{ | ||
+ | transform: translateY(0px) scale(1, 1); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
#section1 > .content_wrapper > .desc{ | #section1 > .content_wrapper > .desc{ | ||
Line 99: | Line 107: | ||
#section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{ | #section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{ | ||
font-family: Arial; | font-family: Arial; | ||
+ | font-size: 1em; | ||
color: rgb(148, 148, 148); | color: rgb(148, 148, 148); | ||
margin: 5px; | margin: 5px; | ||
Line 104: | Line 113: | ||
#section4{ | #section4{ | ||
− | + | background-color: #EEEEEE; | |
− | + | margin: 0; | |
} | } | ||
Line 124: | Line 133: | ||
left: 15vw; | left: 15vw; | ||
width: 70vw; | width: 70vw; | ||
− | |||
} | } | ||
Line 130: | Line 138: | ||
font-family: Arial; | font-family: Arial; | ||
font-size: 2em; | font-size: 2em; | ||
− | color: | + | color: #EEEEEE; |
− | + | padding: 20px; | |
+ | z-index: 10; | ||
} | } | ||
#section5 > .menu{ | #section5 > .menu{ | ||
− | width: | + | width: 100%; |
} | } | ||
Line 191: | Line 200: | ||
#section5 > .menu > .project{ | #section5 > .menu > .project{ | ||
− | width: | + | width: 100%; |
min-width: 400px; | min-width: 400px; | ||
background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat; | background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat; | ||
Line 199: | Line 208: | ||
#section5 > .menu > .outreach{ | #section5 > .menu > .outreach{ | ||
− | width: | + | width: 40%; |
min-width: 200px; | min-width: 200px; | ||
background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat; | background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat; | ||
Line 207: | Line 216: | ||
#section5 > .menu > .team{ | #section5 > .menu > .team{ | ||
− | width: | + | width: 40%; |
min-width: 200px; | min-width: 200px; | ||
background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat; | background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat; | ||
Line 215: | Line 224: | ||
#section5 > .menu > .attribution{ | #section5 > .menu > .attribution{ | ||
− | width: | + | width: 40%; |
min-width: 200px; | min-width: 200px; | ||
background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat; | background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat; | ||
background-size: cover; | background-size: cover; | ||
display: inline-block; | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .fullscreen { | ||
+ | background-color: #111111; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2018/0/0f/T--TPHS_San_Diego--Fungal_wall.jpg"); | ||
+ | -webkit-background-size: contain; | ||
+ | -moz-background-size: contain; | ||
+ | -o-background-size: contain; | ||
+ | background-size: contain; | ||
+ | background-repeat: no-repeat; | ||
+ | padding-bottom: 200px; | ||
+ | } | ||
+ | |||
+ | slider { | ||
+ | display:block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background-color:#1f1f1f; | ||
+ | overflow:hidden; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | slider > * { | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background:#1f1f1f; | ||
+ | animation: slide 12s infinite; | ||
+ | overflow:hidden; | ||
+ | box-shadow: inset 0 0 20px black; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(1){ | ||
+ | left:0%; | ||
+ | animation-delay: -1s; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/5/52/T--TPHS_San_Diego--back_1.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-attachment: fixed; | ||
+ | visibility: hidden; | ||
+ | image-rendering: -webkit-optimize-contrast; | ||
+ | background-size: cover; | ||
+ | background-position:50% 50%; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(2){ | ||
+ | left:0%; | ||
+ | animation-delay: 2s; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/2/2a/T--TPHS_San_Diego--back_2.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-attachment: fixed; | ||
+ | visibility: hidden; | ||
+ | image-rendering: -webkit-optimize-contrast; | ||
+ | background-size: cover; | ||
+ | background-position:50% 50%; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(3){ | ||
+ | animation-delay: 5s; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/1/11/T--TPHS_San_Diego--back_3.jpg"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-attachment: fixed; | ||
+ | visibility: hidden; | ||
+ | image-rendering: -webkit-optimize-contrast; | ||
+ | background-size: cover; | ||
+ | background-position:50% 50%; | ||
+ | } | ||
+ | |||
+ | slide:nth-child(4){ | ||
+ | left:0%; | ||
+ | animation-delay: 8s; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/b/b3/T--TPHS_San_Diego--Homepage4.png"); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-attachment: fixed; | ||
+ | visibility: hidden; | ||
+ | image-rendering: -webkit-optimize-contrast; | ||
+ | background-size: cover; | ||
+ | background-position:50% 50%; | ||
+ | } | ||
+ | |||
+ | |||
+ | .slide_container { | ||
+ | display:inline-block; | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | font-family:Arial; | ||
+ | font-size:30px; | ||
+ | text-align:center; | ||
+ | margin: 50px; | ||
+ | padding: 20px; | ||
+ | width:40%; | ||
+ | |||
+ | /*height: 40%;*/ | ||
+ | background: #333333; | ||
+ | color:#fff; | ||
+ | box-shadow: 0 0 20px black; | ||
+ | line-height: 30px; | ||
+ | } | ||
+ | |||
+ | @keyframes slide { | ||
+ | 0% {left: 100%; width:100%;visibility: visible;} | ||
+ | 5% {left: 0%; visibility: visible;} | ||
+ | 25% {left: 0%;visibility: visible;} | ||
+ | 30%{left :-100%; width:100%;visibility: visible;} | ||
+ | 30.001%{left:-100%; width:0%;visibility: visible;} | ||
+ | 100% {left:100%; width:0%;visibility: visible;} | ||
+ | } | ||
+ | |||
+ | p{ | ||
+ | margin: 0 !important; | ||
+ | padding: 0 !important; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 00:34, 18 October 2018