Team:UCLA

From 2013.igem.org

(Difference between revisions)
 
(123 intermediate revisions not shown)
Line 1: Line 1:
-
<html lang="en" class="no-js">
+
{{:Team:UCLA/Template}}
-
<head>
+
-
<meta charset="UTF-8" />
+
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
-
<title>UCLA iGEM </title>
+
-
<meta name="description" content="Blueprint: Fixed Background Scrolling Layout" />
+
-
<meta name="keywords" content="background scrolling, fixed background, background-attachment, jquery" />
+
-
<meta name="author" content="Codrops" />
+
-
<style type="text/css">
+
-
@import url(http://fonts.googleapis.com/css?family=Raleway);
+
-
/* Set all parents to full height */
+
-
html, body,
+
-
.container,
+
-
.cbp-fbscroller,
+
-
.cbp-fbscroller section {
+
-
height: 100%;
+
-
}
+
-
/* The nav is fixed on the right side  and we center it by translating it 50%
+
<html><br><head>
-
(we don't know it's height so we can't use the negative margin trick) */
+
-
.cbp-fbscroller > nav {
+
-
position: fixed;
+
-
z-index: 9999;
+
-
right: 100px;
+
-
top: 50%;
+
-
width: 26px;
+
-
-webkit-transform: translateY(-50%);
+
-
-moz-transform: translateY(-50%);
+
-
-ms-transform: translateY(-50%);
+
-
transform: translateY(-50%);
+
-
}
+
-
.cbp-fbscroller > nav a {
+
<title>UCLA iGEM </title>
-
display: block;
+
<style>
-
position: relative;
+
#slide {
-
z-index: 9999;
+
  background: url("https://static.igem.org/mediawiki/2013/c/ce/Ucla_bg1.png") 50% 0 no-repeat fixed;  
-
color: transparent;
+
height: 650px;
-
width: 26px;
+
margin: 0 auto;  
-
height: 26px;
+
    width: 100%;  
-
outline: none;
+
    max-width: 1920px;  
-
margin: 25px 0;
+
    position: relative;  
-
border-radius: 50%;
+
-
border: 4px solid #fff;
+
}
}
-
 
+
#slide2 {
-
.no-touch .cbp-fbscroller > nav a:hover {
+
background: url("https://static.igem.org/mediawiki/2013/f/f9/Ucla_bg2.png") 50% 0 no-repeat fixed;
-
background: rgba(255,255,255,0.6);
+
height: 650px; 
 +
margin: 0 auto;
 +
    width: 100%;
 +
    max-width: 1920px;
 +
    position: relative;  
}
}
-
 
+
#slide3 {
-
.cbp-fbscroller > nav a.cbp-fbcurrent {
+
  background: url("https://static.igem.org/mediawiki/2013/c/ce/Ucla_bg1.png") 50% 0 no-repeat fixed;
-
background: #fff;
+
height: 700px; 
 +
margin: 0 auto;
 +
    width: 100%;
 +
    max-width: 1920px;
 +
    position: relative;  
}
}
-
 
+
#slide article {
-
/* background-attachment does the trick */
+
  height: 458px;
-
.cbp-fbscroller section {
+
  position: absolute;  
-
position: relative;
+
  text-align: center;  
-
background-position: top center;
+
  width: 100%;  
-
background-repeat: no-repeat;
+
  font-size: 5em;
-
background-size: cover;
+
  color: #fff;
}
}
-
 
+
#abs {
-
.no-touch .cbp-fbscroller section {
+
font-size: 13px; font-family: "Trebuchet MS", sans-serif; color: #fff;
-
background-attachment: fixed;
+
text-align: left center; line-height: 180%; margin: 10px 0px auto 10px
}
}
-
 
+
#abs-title {
-
#fbsection1 {
+
font-size: 25px; font-family: "Trebuchet MS", sans-serif; color: #fff;
-
background-image: url('https://static.igem.org/mediawiki/2013/c/ce/Ucla_bg1.png');
+
text-align: center; line-height: 180%; margin: 10px 5px auto 40px
}
}
-
 
+
#text {
-
#infb1 {
+
    font-family: "Raleway", serif;
-
font-family: 'Raleway', sans-serif;
+
    z-index:100;
-
position: relative;  
+
    position:absolute;  
-
height: 600px;
+
    color:white;
-
width: 800px;
+
    font-size:20px;
-
margin: 18px auto 0;
+
    left:145px;
 +
    top:350px;
}
}
-
 
+
#text2 {
-
#fbsection2 {
+
    font-family: "Raleway", serif;
-
background-image: url(https://static.igem.org/mediawiki/2013/f/f9/Ucla_bg2.png);
+
    z-index:100;
 +
    position:absolute;   
 +
    color:black;
 +
    font-size:20px;
 +
    left:675px;
 +
    top:400px;
}
}
-
 
+
#text3 {
-
#fbsection3 {
+
    font-family: "Raleway", serif;
-
background-image: url(../images/3.jpg);
+
    z-index:100;
 +
    position:absolute;   
 +
    color:black;
 +
    font-size:20px;
 +
    left:125px;
 +
    top:525px;
}
}
 +
#content {
 +
      background: none;
 +
      box-shadow: 0px 0px 0px 0px;
-
#fbsection4 {
+
</style>
-
background-image: url(../images/4.jpg);
+
</head>
-
}
+
<body>
-
#fbsection5 {
+
<section id="slide" data-type="background" data-speed="5">
-
background-image: url(../images/5.jpg);
+
<img src="https://static.igem.org/mediawiki/2013/e/ea/Grad.png" width="960">
-
}
+
<p id="text"><a href="#slide2"><font color="white">How it Works</font></a><br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#slide2"><img src="https://static.igem.org/mediawiki/2013/6/62/Downarrow.png" href="#slide2" width="50"></a></p>
 +
<a name="slide1"></a></section>
-
/* General Blueprint Style */
+
<section id="slide2" data-type="background" data-speed="5">
-
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+
<img src="https://static.igem.org/mediawiki/2013/e/e6/Grad2.png" width="960">
-
@font-face {
+
<p id="text2"><a href="#slide3"><font color="Black">mRNA Display</font></a><br>
-
font-family: 'fontawesome';
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#slide3"><img src="https://static.igem.org/mediawiki/2013/1/11/Down_arrow_black.png"Width="50">
-
src:url('../fonts/fontawesome.eot');
+
</a></p>
-
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
+
<a name="slide2"></a>
-
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
+
</section>
-
url('../fonts/fontawesome.woff') format('woff'),
+
-
url('../fonts/fontawesome.ttf') format('truetype');
+
-
font-weight: normal;
+
-
font-style: normal;
+
-
}
+
-
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+
<section id="slide3" data-type="background" data-speed="8">
-
body, html { font-size: 100%; padding: 0; margin: 0;}
+
<img src="https://static.igem.org/mediawiki/2013/4/4b/Grad3.png" width="960">
 +
<p id="text3">
 +
<a href="#slide1"><img src="https://static.igem.org/mediawiki/2013/c/c2/Uparrow_white.png" href="#slide2" width="50"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
<a href="https://2013.igem.org/Team:UCLA/Project"><img src="https://static.igem.org/mediawiki/2013/3/34/Sideways_arrow_white.png" width="50"></a>
 +
<br>
 +
&nbsp;<a href="#slide1"><font color="white">Top</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://2013.igem.org/Team:UCLA/Project"><font color="white">More Details!</font></a>
-
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
</p>
-
.clearfix:before, .clearfix:after { content: " "; display: table; }
+
<a name="slide3"></a></section>
-
.clearfix:after { clear: both; }
+
-
body {
 
-
    font-family: 'Lato', Calibri, Arial, sans-serif;
 
-
    color: #fff;
 
-
}
 
-
a {
 
-
color: #f0f0f0;
 
-
text-decoration: none;
 
-
}
 
-
a:hover {
 
-
color: #000;
 
-
}
 
-
 
-
.container > header {
 
-
padding: 2.875em 1.875em 1.875em;
 
-
position: fixed;
 
-
z-index: 1000;
 
-
width: 60%;
 
-
left: 20%;
 
-
}
 
-
 
-
.container > header h1 {
 
-
font-size: 2.125em;
 
-
line-height: 1.3;
 
-
margin: 0;
 
-
float: left;
 
-
font-weight: 400;
 
-
}
 
-
 
-
.container > header span {
 
-
display: block;
 
-
font-weight: 700;
 
-
text-transform: uppercase;
 
-
letter-spacing: 0.5em;
 
-
padding: 0 0 0.6em 0.1em;
 
-
}
 
-
 
-
.container > header nav {
 
-
float: right;
 
-
}
 
-
 
-
.container > header nav a {
 
-
display: block;
 
-
float: left;
 
-
position: relative;
 
-
width: 2.5em;
 
-
height: 2.5em;
 
-
background: #fff;
 
-
border-radius: 50%;
 
-
color: transparent;
 
-
margin: 0 0.1em;
 
-
border: 4px solid #fff;
 
-
text-indent: -8000px;
 
-
}
 
-
 
-
.container > header nav a:after {
 
-
content: attr(data-info);
 
-
color: #fff;
 
-
position: absolute;
 
-
width: 600%;
 
-
top: 120%;
 
-
text-align: right;
 
-
right: 0;
 
-
opacity: 0;
 
-
pointer-events: none;
 
-
}
 
-
 
-
.container > header nav a:hover:after {
 
-
opacity: 1;
 
-
}
 
-
 
-
.container > header nav a:hover {
 
-
background: #47a3da;
 
-
}
 
-
 
-
.icon-drop:before,
 
-
.icon-arrow-left:before {
 
-
font-family: 'fontawesome';
 
-
position: absolute;
 
-
top: 0;
 
-
width: 100%;
 
-
height: 100%;
 
-
speak: none;
 
-
font-style: normal;
 
-
font-weight: normal;
 
-
line-height: 2;
 
-
text-align: center;
 
-
color: #47a3da;
 
-
-webkit-font-smoothing: antialiased;
 
-
text-indent: 8000px;
 
-
padding-left: 8px;
 
-
}
 
-
 
-
.container > header nav a:hover:before {
 
-
color: #fff;
 
-
}
 
-
 
-
.icon-drop:before {
 
-
content: "\e000";
 
-
}
 
-
 
-
.icon-arrow-left:before {
 
-
content: "\f060";
 
-
}
 
-
 
-
 
-
</style>
 
-
</head>
 
-
<body>
 
-
<div class="container">
 
-
 
-
<div id="cbp-fbscroller" class="cbp-fbscroller">
 
-
<nav>
 
-
<a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
 
-
<a href="#fbsection2">Section 2</a>
 
-
<a href="#fbsection3">Section 3</a>
 
-
<a href="#fbsection4">Section 4</a>
 
-
<a href="#fbsection5">Section 5</a>
 
-
</nav>
 
-
<section id="fbsection1"></section>
 
-
<section id="fbsection2"></section>
 
-
<section id="fbsection3"></section>
 
-
<section id="fbsection4"></section>
 
-
<section id="fbsection5"></section>
 
-
</div>
 
-
</div>
 
-
 
</body>
</body>
</html>
</html>

Latest revision as of 21:11, 27 September 2013


UCLA iGEM

How it Works
       

mRNA Display
       

           
 Top       More Details!

Retrieved from "http://2013.igem.org/Team:UCLA"