(Prototype team template page) |
|||
(76 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | * { | |
− | + | margin: 0; | |
− | + | padding: 0; | |
+ | } | ||
− | + | #toc { | |
+ | display: none !important; /* Seriously, igem? */ | ||
+ | } | ||
− | + | /*-- Fonts --*/ | |
− | + | ||
− | + | @font-face { | |
− | + | font-family: wolf; | |
− | + | src: url('https://static.igem.org/mediawiki/2017/0/02/Tec-Chihuahua-wolf-font.ttf'); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /*-- Nav Bar Display --*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | nav { | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | top: 16px; | ||
+ | background-color: #fff; | ||
+ | text-align: center; | ||
+ | padding: 10px 0; | ||
+ | transition: all 0.5s ease; | ||
+ | align-content: right; | ||
+ | z-index: 500; | ||
+ | box-shadow: 2px -6px 8px 5px #333; | ||
+ | } | ||
− | + | nav.hidden { | |
− | + | transform: translate(0, -100%); | |
+ | } | ||
+ | nav ul li { | ||
+ | margin-right: 0px; | ||
+ | } | ||
− | + | nav ul { | |
− | + | margin: 0px; | |
+ | padding: 0px; | ||
+ | list-style: none; | ||
+ | } | ||
+ | nav ul li { | ||
+ | box-sizing: border-box; | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | min-width: 145px; | ||
+ | min-height: 100%; | ||
+ | color: #000; | ||
+ | line-height: 50px; | ||
+ | text-align: center; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | nav ul li a { | ||
+ | text-decoration: none; | ||
+ | color: #000; | ||
+ | display: block; | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | nav ul li a:hover { | |
− | + | background-color: #000; | |
− | + | color: #fff; | |
+ | } | ||
+ | nav ul li ul { | ||
+ | display: none; | ||
+ | } | ||
− | + | nav ul li:hover ul { | |
− | + | display: block; | |
− | + | position: absolute; | |
− | + | top: 35px; | |
− | + | z-index: 3; | |
+ | margin: 0 !important; | ||
+ | width: 100%; | ||
+ | z-index: 20; | ||
+ | box-shadow: 4px 4px 14px 0px #999; | ||
+ | } | ||
− | + | nav ul li ul li { | |
+ | display: block; | ||
+ | background-color: #fff; | ||
+ | opacity: .9; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
− | /* | + | /*-- content --*/ |
− | + | ||
− | + | ||
− | + | .content { | |
− | + | padding-top: 38px; | |
− | + | background-position: left top; | |
− | + | background-color: #fff; | |
− | + | background-attachment: fixed; | |
− | + | background-repeat: repeat; | |
− | + | background-size: cover; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .content h1 { | ||
+ | font-family: 'Century Gothic', sans-serif; | ||
+ | color: #f9f3f4; | ||
+ | font-size: 500%; | ||
+ | text-shadow: 9px 9px 15px #000; | ||
+ | } | ||
− | + | .content h3 { | |
− | + | font-family: 'Century Gothic', sans-serif; | |
− | + | color: #f9f3f4; | |
+ | font-size: 200%; | ||
+ | text-shadow: 9px 9px 15px #000; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | .team-img{ | |
− | + | max-width: 75%; | |
− | + | } | |
− | + | ||
− | + | .parallax-bg { | |
− | + | padding: 50px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/f/f0/Tec-Chihuahua-index-bg.jpeg); | |
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .parallax-bg.big > center > img { | ||
+ | max-width: 80%; | ||
+ | } | ||
− | + | p.standout { | |
− | + | font-size: 18px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .content .container img { | |
− | + | max-width: 100%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .parallax-bg.big { | ||
+ | padding: 50px 0; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .parallax-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 60px; | |
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | + | .parallax-bg.big h1 { | |
− | + | font-size: 10px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*-- Headeresl --*/ | |
− | + | ||
− | + | ||
+ | .safety-bg { | ||
+ | padding: 50px 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2016/2/20/T--Tec-Chihuahua--hazard.png); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .safety-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 60px; | |
− | + | } | |
+ | .medals-bg { | ||
+ | padding: 50px 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2016/a/aa/T--Tec-Chihuahua--awards.jpg); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .medals-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
− | / | + | .notebook-bg { |
− | / | + | padding: 50px 0; |
+ | background-image: url(https://static.igem.org/mediawiki/2017/1/11/T--Tec-Chihuahua--Notebook.jpg); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .notebook-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
− | + | .Public-bg { | |
− | + | padding: 60px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/5/5b/T--Tec-Chihuahua--BanHum.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
− | + | -moz-transition: all 0.2s ease; | |
− | + | transition: all 0.2s ease; | |
− | + | margin-bottom: 40px; | |
− | + | } | |
− | + | ||
− | + | .Public-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
+ | font-size: 60px; | ||
+ | } | ||
− | + | .overentre-bg { | |
− | + | padding: 100px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/0/03/T--Tec-Chihuahua--Overview.jpg); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .overentre-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
+ | font-size: 60px; | ||
+ | } | ||
− | + | .banlab-bg { | |
− | + | padding: 50px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/a/a3/T--Tec-Chihuahua--BanLab.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
− | + | -moz-transition: all 0.2s ease; | |
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .banlab-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | .fotolab-bg { | ||
+ | padding: 50px 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/f/fe/T--Tec-Chihuahua--FotoLab.png); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .fotolab-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
+ | font-size: 60px; | ||
+ | } | ||
− | + | .protocolos-bg { | |
− | + | padding: 50px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/4/42/T--Tec-Chihuahua--BanProt.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .protocolos-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 60px; | |
− | + | } | |
− | + | ||
+ | .human-bg { | ||
+ | padding: 60px 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/0/0d/T--Tec-Chihuahua--BanHuO.png); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .human-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
− | |||
− | |||
− | + | .team-bg { | |
− | + | padding: 80px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/f/f6/T--Tec-Chihuahua--TeamBan.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .team-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
− | + | .empre-bg { | |
− | + | padding: 60px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/0/03/T--Tec-Chihuahua--ArbBello.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
− | + | -moz-transition: all 0.2s ease; | |
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .empre-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 60px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .banbrain { | |
− | + | padding: 80px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/c/c2/T--Tec-Chihuahua--BanBrain.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
− | + | -moz-transition: all 0.2s ease; | |
− | + | transition: all 0.2s ease; | |
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .banbrain h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 80px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .lean-bg { | |
− | + | padding: 60px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/d/df/T--Tec-Chihuahua--leanN.jpg); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .lean-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
− | + | .integrated-bg { | |
− | + | padding: 70px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/2/25/T--Tec-Chihuahua--Tec-Chih.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
− | + | -moz-transition: all 0.2s ease; | |
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .integrated-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 60px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .design-bg { | |
− | + | padding: 50px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/a/a3/T--Tec-Chihuahua--DesignHeader2.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
− | + | -moz-transition: all 0.2s ease; | |
− | + | transition: all 0.2s ease; | |
− | + | margin-bottom: 40px; | |
+ | } | ||
+ | .design-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | .parts-bg { | ||
+ | padding: 50px 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/5/50/T--Tec-Chihuahua--Parts1.gif); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .parts-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 60px; | |
− | + | } | |
− | + | ||
− | + | .results-bg { | |
− | + | padding: 50px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/4/45/T--Tec-Chihuahua--Results.png); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .results-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | .home-bg { | ||
+ | padding: 50px 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/1/1b/T--Tec-Chihuahua--Man.png); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .home-bg.big > center > img { | |
− | + | max-width: 80%; | |
+ | } | ||
− | + | p.standout { | |
− | + | font-size: 18px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .content .container img { | |
− | + | max-width: 100%; | |
+ | } | ||
− | + | .home-bg.big { | |
− | + | padding: 50px 0; | |
+ | } | ||
− | |||
− | |||
+ | .home-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | .home-bg.big h1 { | ||
+ | font-size: 10px; | ||
+ | } | ||
− | + | .improve-bg { | |
− | + | padding: 50px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/3/38/T-Tec-Chihuahua--microtiter.jpeg); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
− | + | -moz-transition: all 0.2s ease; | |
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .improve-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
− | + | .demo-bg { | |
− | + | padding: 50px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/1/1a/T--Tec-Chihuahua--DemonstrateA1.jpeg); | |
− | + | background-size: cover; | |
− | + | background-attachment: fixed; | |
− | + | -webkit-transition: all 0.2s ease; | |
− | + | -moz-transition: all 0.2s ease; | |
− | + | transition: all 0.2s ease; | |
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .demo-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 60px; | |
− | + | } | |
− | + | ||
+ | .silver-bg { | ||
+ | padding: 50px 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/a/a7/T-Tec-Chihuahua--plata.jpeg); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .silver-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
− | |||
− | |||
− | |||
+ | .bronze-bg { | ||
+ | padding: 50px 0; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/c/c4/T-Tec-Chihuahua--joel.png); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .bronze-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
− | + | font-size: 60px; | |
− | + | } | |
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .colab-bg { | |
− | + | padding: 50px 0; | |
− | + | background-image: url(https://static.igem.org/mediawiki/2017/4/47/T-Tec-Chihuahua--fiierro.jpeg); | |
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | .colab-bg h1 { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | font-size: 60px; | ||
+ | } | ||
− | + | /*-- Header model --*/ | |
− | + | .model-bg { | |
− | + | padding: 50px 0; | |
+ | background-image: url(https://static.igem.org/mediawiki/2017/d/d6/T--Tec-Chihuahua--CosaMod.png); | ||
+ | background-size: cover; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
− | + | .model-bg.big > center > img { | |
− | + | max-width: 80%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | p.standout { | |
− | + | font-size: 18px; | |
− | + | } | |
− | + | .content .container img { | |
− | + | max-width: 100%; | |
− | + | } | |
+ | .model-bg.big { | ||
+ | padding: 50px 0; | ||
+ | } | ||
− | + | .model-bg h1 { | |
− | + | text-align: center; | |
− | + | color: #fff; | |
+ | font-size: 60px; | ||
+ | } | ||
− | + | .model-bg.big h1 { | |
− | + | font-size: 10px; | |
− | + | } | |
+ | /*-- Team Galery --*/ | ||
− | + | .pimg1, | |
− | + | .pimg2, | |
− | + | .pimg3, | |
+ | .pimg4, | ||
+ | .pimg5, | ||
+ | .pimg6, | ||
+ | .pimg7, | ||
+ | .pimg8, | ||
+ | .pimg9, | ||
+ | .pimg10, | ||
+ | .pimg11 { | ||
+ | position: relative; | ||
+ | opacity: 0.90; | ||
+ | background-position: center; | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-color: red; | ||
+ | z-index: -2; | ||
+ | /* | ||
+ | fixed = parallax | ||
+ | scroll = normal | ||
+ | */ | ||
+ | background-attachment: fixed; | ||
+ | } | ||
+ | .section { | ||
+ | text-align: center; | ||
+ | padding: 50px 80px; | ||
+ | } | ||
+ | .section-light { | ||
+ | background-color: #f4f4f4; | ||
+ | color: #282e34; | ||
+ | } | ||
+ | .section-light h1 { | ||
+ | font-family: lato; | ||
+ | font-size: 300% | ||
+ | } | ||
− | + | .section-dark { | |
− | + | background-color: #282e34; | |
+ | color: #ddd; | ||
+ | font-family: lato; | ||
+ | font-size: 125% | ||
+ | } | ||
+ | .ptext { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | color: #000; | ||
+ | font-size: 27px; | ||
+ | letter-spacing: 8px; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
− | + | .ptext .border { | |
− | + | background-color: #111; | |
− | + | color: #fff; | |
− | + | padding: 20px; | |
− | + | font-family: Lato; | |
+ | font-size: 150%; | ||
+ | text-shadow: 9px 9px 15px #000; | ||
} | } | ||
− | + | .ptext .border.trans { | |
− | + | background-color: transparent; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .footer { | |
− | + | background-color: #333333; | |
− | + | padding: 40px 15px; | |
+ | border-top: #333 solid 1px; | ||
+ | } | ||
− | + | .footer img { | |
− | + | display: block; | |
− | + | margin: 0px auto; | |
− | + | max-width: 100%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .center { | |
+ | text-align: center; | ||
+ | } | ||
+ | .footer .center { | ||
+ | color: #fff; | ||
+ | } | ||
− | + | .footer a { | |
− | + | color: #4BBDFF; | |
− | + | } | |
+ | .footer h2 { | ||
+ | color: #fff; | ||
+ | } | ||
− | + | .footer .sponsors { | |
+ | background-color: #fff; | ||
+ | padding: 15px; | ||
+ | } | ||
+ | @media(max-width:568px) { | ||
+ | .pimg1, | ||
+ | .pimg2, | ||
+ | .pimg3 { | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | } | ||
+ | .center-block { | ||
+ | display: block; | ||
+ | margin: 0px auto; | ||
+ | } | ||
+ | .content .container h3 { | ||
+ | color: #333; | ||
+ | text-shadow: none; | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | .content .container h2 { | ||
+ | font-size: 3rem; | ||
+ | } | ||
− | + | p.cool { | |
+ | text-align: center; | ||
+ | color: #999; | ||
+ | font-style: italic; | ||
+ | margin: 20px 10vw; | ||
+ | } | ||
+ | /* JOURNAL */ | ||
+ | .bacteria{ | ||
+ | font-style: italic; | ||
+ | } | ||
− | + | .quote-date{ | |
− | + | color: #679390; | |
− | + | font-size: 18px; | |
+ | } | ||
+ | .quote-date b{ | ||
+ | color: #B1DF1A; | ||
+ | font-size: 22px; | ||
+ | } | ||
+ | .in-quote{ | ||
+ | box-shadow: 0 0 3px 1px rgba(0,0,0,.35); | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | .in-quote img{ | ||
+ | width: 100%; | ||
+ | margin-bottom: 1em; | ||
+ | box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5) | ||
+ | } | ||
− | + | /* NOTEBOOK */ | |
+ | .month{ | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | .journal-left{ | ||
+ | margin-top: 5px; | ||
+ | right: -1px; | ||
+ | border-right: dashed 2px #679390; | ||
+ | text-align: right; | ||
+ | } | ||
+ | .journal-left h3{ | ||
+ | |||
+ | margin: 2px; | ||
+ | |||
+ | } | ||
+ | .journal-right{ | ||
+ | margin-top: 5px; | ||
+ | left: -1px; | ||
+ | border-left: dashed 2px #679390; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .journal-right h3{ | ||
+ | |||
+ | margin: 2px; | ||
+ | } | ||
+ | #notebook-title{ | ||
+ | margin-top: 2em; | ||
+ | font-size: 70px; | ||
+ | } | ||
+ | #notebook-quote{ | ||
+ | font-size: 20px; | ||
+ | text-align: left; | ||
+ | margin-top: 120px; | ||
+ | } | ||
+ | #notebook-menu{ | ||
+ | position: absolute; | ||
+ | text-align: right; | ||
+ | top: -4em; | ||
+ | } | ||
+ | #notebook-menu li{ | ||
+ | font-size: 20px; | ||
+ | list-style-type: none; | ||
+ | font-weight: bold; | ||
+ | line-height: 25px; | ||
+ | } | ||
+ | .notebook-month{ | ||
+ | right: -50px; | ||
+ | font-weight: normal; | ||
+ | font-size: 18px; | ||
+ | height: 20px; | ||
+ | line-height: 15px; | ||
+ | } | ||
− | + | nav a:visited { | |
− | + | color: #000; | |
+ | } | ||
− | + | nav a:hover { | |
+ | text-decoration: none !important; | ||
+ | } | ||
+ | nav ul li:hover ul { | ||
+ | top: 50px; | ||
+ | background-color: #fff; | ||
+ | } | ||
+ | nav { | ||
+ | height: 50px !important; | ||
+ | padding: 0 !important; | ||
+ | } | ||
− | + | nav > ul { | |
− | + | margin: 0 !important; | |
− | + | height: 50px !important; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Latest revision as of 16:01, 11 June 2018
- {
margin: 0; padding: 0;
}
- toc {
display: none !important; /* Seriously, igem? */
}
/*-- Fonts --*/
@font-face {
font-family: wolf; src: url('https://static.igem.org/mediawiki/2017/0/02/Tec-Chihuahua-wolf-font.ttf');
}
/*-- Nav Bar Display --*/
nav {
position: fixed; width: 100%; top: 16px; background-color: #fff; text-align: center; padding: 10px 0; transition: all 0.5s ease; align-content: right; z-index: 500; box-shadow: 2px -6px 8px 5px #333;
}
nav.hidden {
transform: translate(0, -100%);
}
nav ul li {
margin-right: 0px;
}
nav ul {
margin: 0px; padding: 0px; list-style: none;
}
nav ul li {
box-sizing: border-box; position: relative; display: inline-block; min-width: 145px; min-height: 100%; color: #000; line-height: 50px; text-align: center; font-size: 15px;
}
nav ul li a {
text-decoration: none; color: #000; display: block; font-family: 'Lato', sans-serif; text-align: center;
}
nav ul li a:hover {
background-color: #000; color: #fff;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block; position: absolute; top: 35px; z-index: 3; margin: 0 !important; width: 100%; z-index: 20; box-shadow: 4px 4px 14px 0px #999;
}
nav ul li ul li {
display: block; background-color: #fff; opacity: .9; margin-bottom: 0;
}
/*-- content --*/
.content {
padding-top: 38px; background-position: left top; background-color: #fff; background-attachment: fixed; background-repeat: repeat; background-size: cover;
}
.content h1 {
font-family: 'Century Gothic', sans-serif; color: #f9f3f4; font-size: 500%; text-shadow: 9px 9px 15px #000;
}
.content h3 {
font-family: 'Century Gothic', sans-serif; color: #f9f3f4; font-size: 200%; text-shadow: 9px 9px 15px #000; text-align: center;
}
.team-img{
max-width: 75%;
}
.parallax-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.parallax-bg.big > center > img {
max-width: 80%;
}
p.standout {
font-size: 18px;
}
.content .container img {
max-width: 100%;
}
.parallax-bg.big {
padding: 50px 0;
}
.parallax-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.parallax-bg.big h1 {
font-size: 10px;
}
/*-- Headeresl --*/
.safety-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.safety-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.medals-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.medals-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.notebook-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.notebook-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.Public-bg {
padding: 60px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.Public-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.overentre-bg {
padding: 100px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.overentre-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.banlab-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.banlab-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.fotolab-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.fotolab-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.protocolos-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.protocolos-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.human-bg {
padding: 60px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.human-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.team-bg {
padding: 80px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.team-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.empre-bg {
padding: 60px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.empre-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.banbrain {
padding: 80px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.banbrain h1 {
text-align: center; color: #fff; font-size: 80px;
}
.lean-bg {
padding: 60px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.lean-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.integrated-bg {
padding: 70px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.integrated-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.design-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.design-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.parts-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.parts-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.results-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.results-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.home-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.home-bg.big > center > img {
max-width: 80%;
}
p.standout {
font-size: 18px;
}
.content .container img {
max-width: 100%;
}
.home-bg.big {
padding: 50px 0;
}
.home-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.home-bg.big h1 {
font-size: 10px;
}
.improve-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.improve-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.demo-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.demo-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.silver-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.silver-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.bronze-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.bronze-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.colab-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.colab-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
/*-- Header model --*/
.model-bg {
padding: 50px 0; background-image: url(); background-size: cover; background-attachment: fixed; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 40px;
}
.model-bg.big > center > img {
max-width: 80%;
}
p.standout {
font-size: 18px;
}
.content .container img {
max-width: 100%;
}
.model-bg.big {
padding: 50px 0;
}
.model-bg h1 {
text-align: center; color: #fff; font-size: 60px;
}
.model-bg.big h1 {
font-size: 10px;
}
/*-- Team Galery --*/
.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6, .pimg7, .pimg8, .pimg9, .pimg10, .pimg11 {
position: relative; opacity: 0.90; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: red; z-index: -2; /* fixed = parallax scroll = normal */ background-attachment: fixed;
}
.section {
text-align: center; padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4; color: #282e34;
}
.section-light h1 {
font-family: lato; font-size: 300%
}
.section-dark {
background-color: #282e34; color: #ddd; font-family: lato; font-size: 125%
}
.ptext {
position: absolute; top: 50%; width: 100%; text-align: center; color: #000; font-size: 27px; letter-spacing: 8px; text-transform: uppercase;
}
.ptext .border {
background-color: #111; color: #fff; padding: 20px; font-family: Lato; font-size: 150%; text-shadow: 9px 9px 15px #000;
}
.ptext .border.trans {
background-color: transparent;
}
.footer {
background-color: #333333; padding: 40px 15px; border-top: #333 solid 1px;
}
.footer img {
display: block; margin: 0px auto; max-width: 100%;
}
.center {
text-align: center;
}
.footer .center {
color: #fff;
}
.footer a {
color: #4BBDFF;
}
.footer h2 {
color: #fff;
}
.footer .sponsors {
background-color: #fff; padding: 15px;
}
@media(max-width:568px) {
.pimg1, .pimg2, .pimg3 { background-attachment: scroll; }
}
.center-block {
display: block; margin: 0px auto;
}
.content .container h3 {
color: #333; text-shadow: none; margin-top: 20px;
}
.content .container h2 {
font-size: 3rem;
}
p.cool {
text-align: center; color: #999; font-style: italic; margin: 20px 10vw;
}
/* JOURNAL */ .bacteria{
font-style: italic;
}
.quote-date{
color: #679390; font-size: 18px;
} .quote-date b{
color: #B1DF1A; font-size: 22px;
} .in-quote{
box-shadow: 0 0 3px 1px rgba(0,0,0,.35); border-radius: 5px;
} .in-quote img{
width: 100%; margin-bottom: 1em; box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5)
}
/* NOTEBOOK */ .month{
margin-top: 10px;
} .journal-left{
margin-top: 5px; right: -1px; border-right: dashed 2px #679390; text-align: right;
} .journal-left h3{
margin: 2px;
} .journal-right{
margin-top: 5px; left: -1px; border-left: dashed 2px #679390; text-align: left;
} .journal-right h3{
margin: 2px;
}
- notebook-title{
margin-top: 2em; font-size: 70px;
}
- notebook-quote{
font-size: 20px; text-align: left; margin-top: 120px;
}
- notebook-menu{
position: absolute; text-align: right; top: -4em;
}
- notebook-menu li{
font-size: 20px; list-style-type: none; font-weight: bold; line-height: 25px;
} .notebook-month{
right: -50px; font-weight: normal; font-size: 18px; height: 20px; line-height: 15px;
}
nav a:visited {
color: #000;
}
nav a:hover {
text-decoration: none !important;
}
nav ul li:hover ul {
top: 50px; background-color: #fff;
}
nav {
height: 50px !important; padding: 0 !important;
}
nav > ul {
margin: 0 !important; height: 50px !important;
}