Team:UCL/Template:HomeMain.css
From 2014.igem.org
/* =Header Banner */ .banner-image-background {
background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center; background-size: 150%; /*background-color: #e7e7e7;*/ position: relative; height: 700px;
z-index: 10; }
.banner-image-overlay {
background-color: rgba(0,0,0,0.5); width:100%; height:100%;
z-index: 11; }
.banner-image-logo {
top:150px; display: inline-block; vertical-align: middle; opacity:1;
}
/* =Profiles */ main {
z-index: 1; position: relative;
}
.slide {
color: #a7a0a2; font-weight: 200; font-size: 1em; font-family: 'Lato', Arial, sans-serif;
}
.slide .tellmemore {
color: #a7a0a2; font-family: 'Lato', Arial, sans-serif; font-size:0.75em;
}
.slide .tellmemore p {
text-align:left;
}
.slide h1 {
background-color:black; font-weight:bold; border-bottom:none; color: white;
}
.slide h2 {
font-weight:bold; border-bottom:none; color: #a7a0a2;
}
.slide .tellmemore img {
height:50%; width:50%;
}
.slide h1 {
padding-top:-10px; padding-left:30px; text-align:left;
}
.slide h1 span {
top:-10px;
}
.slide p, .slide h2 {
text-align:right;
}
.slidemore {
float:left;
}
- slideabout {
padding-left:200px; padding-right:200px; height:600px;
}
- slidescience {
background: url('https://static.igem.org/mediawiki/2014/a/a3/Azo3.jpg') no-repeat; background-position-y:-400px; background-size:100%; height:500px;
z-index: 10; }
- slidesciencecontent .experiments {
position:relative; top:50px; left:250px;
}
- slidesciencecontent .results {
position:relative; top:50px; left:-250px;
}
- slidesciencecontent .experiments p {
color:white; position:relative; left:-38px;
}
- slidesciencecontent .results p {
color:white; position:relative; left:-60px;
}
- slidehumans {
padding-left:200px; padding-right:200px; padding-bottom:200px;
}
.og-grid {
list-style: none; padding: 20px 0; margin: 0 auto; text-align: center; width: 100%;
}
.og-grid li {
display: inline-block; margin: 10px 5px 0 5px; vertical-align: top; height: 250px;
}
.og-grid li > a, .og-grid li > a img {
border: none; outline: none; display: block; position: relative;
}
.og-grid li.og-expanded > a::after {
top: auto; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #ddd; border-width: 15px; left: 50%; margin: -20px 0 0 -15px;
}
.og-expander {
position: absolute; background: #ddd; top: auto; left: 0; width: 100%; margin-top: 10px; text-align: left; height: 0; overflow: hidden;
}
.og-expander-inner {
padding: 50px 30px; height: 100%;
}
.og-close {
position: absolute; width: 40px; height: 40px; top: 20px; right: 20px; cursor: pointer;
}
.og-close::before, .og-close::after {
content: ; position: absolute; width: 100%; top: 50%; height: 1px; background: #888; transform: rotate(45deg);
}
.og-close::after {
transform: rotate(-45deg);
}
.og-close:hover::before, .og-close:hover::after {
background: #333;
}
.og-fullimg, .og-details {
width: 50%; float: left; height: 100%; overflow: hidden; position: relative;
}
.og-details {
padding: 0 40px 0 20px;
}
.og-fullimg {
text-align: center;
}
.og-fullimg img {
display: inline-block; max-height: 100%; max-width: 100%;
}
.og-details h3 {
font-weight: 300; font-size: 52px; padding: 40px 0 10px; margin-bottom: 10px;
}
.og-details p {
font-weight: 400; font-size: 16px; line-height: 22px; color: #999;
}
.og-details a {
font-weight: 700; font-size: 16px; color: #333; text-transform: uppercase; letter-spacing: 2px; padding: 10px 20px; border: 3px solid #333; display: inline-block; margin: 30px 0 0; outline: none;
}
.og-details a::before {
content: '\2192'; display: inline-block; margin-right: 10px;
}
.og-details a:hover {
border-color: #999; color: #999;
}
.og-loading {
width: 20px; height: 20px; border-radius: 50%; background: #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; animation: loader 0.5s infinite ease-in-out both;
}
@keyframes loader {
0% { background: #ddd; } 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@media only screen and (min-width: 10000px) {
/* =Header Banner */
.banner-image-background { background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center; background-size:100%; position: relative; z-index:10; /* height: 1000px; */
}
.banner-image-overlay { background-color:rgba(0,0,0,0.5); width:100%; height:100%; z-index:11; }
.banner-image-logo { width: 727px; height: 503px; background: url('https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg') no-repeat center; background-size: 727px 503px; position: absolute; /* top: 25%; */ left: 50%; margin-left: -359px;
z-index:12;
}
}