|
|
(130 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | /* =Header Banner */
| + | <html lang="en-US"> |
- | .banner-image-background {
| + | <head> |
- | background: url('https://static.igem.org/mediawiki/2014/3/30/Azo4.jpg') no-repeat center; | + | <meta charset="UTF-8"> |
- | background-size: 150%;
| + | <meta http-equiv="refresh" content="1;url=https://2014.igem.org/Team:UCL"> |
- | /*background-color: #e7e7e7;*/
| + | <script type="text/javascript"> |
- | position: relative;
| + | window.location.href = "https://2014.igem.org/Team:UCL" |
- | height: 700px;
| + | </script> |
- | z-index: 10;
| + | <title>Page Redirection</title> |
- | }
| + | </head> |
- |
| + | <body> |
- | .banner-image-overlay {
| + | <!-- Note: don't tell people to `click` the link, just tell them that it is a link. --> |
- | background-color: rgba(0,0,0,0.5);
| + | If you are not redirected automatically, follow the <a href='https://2014.igem.org/Team:UCL'>link to UCL iGEM</a> |
- | width:100%;
| + | </body> |
- | height:100%;
| + | </html> |
- | 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
| + | |
- | {
| + | |
- | width: 50%;
| + | |
- | float: left;
| + | |
- | height: 100%;
| + | |
- | overflow: hidden;
| + | |
- | position: relative;
| + | |
- | }
| + | |
- | | + | |
- | .og-details {
| + | |
- | width: 50%;
| + | |
- | float: left;
| + | |
- | height: 100%;
| + | |
- | overflow: hidden;
| + | |
- | position: relative;
| + | |
- | }
| + | |
- |
| + | |
- | .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;
| + | |
- | text-align:left;
| + | |
- | }
| + | |
- |
| + | |
- | .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;
| + | |
- | }
| + | |
- |
| + | |
- | }
| + | |