Difference between revisions of "Team:Georgia State/Notebook"

Line 1: Line 1:
−
{{Georgia_State}}
 
 
<html>
 
<html>
  
−
<h2>Notebook</h2>
+
<head>
 +
    <meta charset="utf-8" />
 +
    <title>IGEM Team:GSU</title>
 +
    <meta name="description" content="" />
 +
    <meta name="keywords" content="IGEM GSU 2015" />
 +
    <meta name="author" content="TeamGSU and Maruf">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
 +
    <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
  
−
<p> Document the dates you worked on your project.</p>
+
    <!-- Favicone Icon -->
 +
    <link rel="shortcut icon" type="image/x-icon" href="https://static.igem.org/mediawiki/2015/c/cd/GSUFavicon.png">
 +
    <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2015/c/cd/GSUFavicon.png">
 +
    <link rel="apple-touch-icon" href="https://static.igem.org/mediawiki/2015/c/cd/GSUFavicon.png">
  
−
<h5>What should this page have?</h5>
+
    <!-- CSS -->
−
<ul>
+
  <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Georgia_State/CSS?action=raw&ctype=text/css" />
−
<li>Chronological notes of what your team is doing.</li>
+
  <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Georgia_State/CSS1?action=raw&ctype=text/css" />
−
<li> Brief descriptions of daily important events.</li>
+
<!--Special Stylesheet for NOTEBOOKONLY-->
−
<li>Pictures of your progress. </li>
+
/* Source code provided from Codepen.io
−
<li>Mention who participated in what task.</li>
+
http://codepen.io/fivera/pen/rHigj
−
</ul>
+
*/
 +
<style>
 +
  
 +
ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
  
−
<h4>Inspiration</h4>
+
a {
−
<p>You can see what others teams have done to organize their notes:</p>
+
color: #2c3e50;
 +
text-decoration: none;
 +
}
  
−
<ul>  
+
.btn {
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
display: inline-block;
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
text-transform: uppercase;
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
border: 2px solid #2c3e50;
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
margin-top: 100px;
−
<li><a href="http://codepen.io/fivera/pen/rHigj">Lets look @ CODEPEN</a></li>
+
font-size: 0.7em;
 +
font-weight: 700;
 +
padding: 0.1em 0.4em;
 +
text-align: center;
 +
-webkit-transition: color 0.3s, border-color 0.3s;
 +
-moz-transition: color 0.3s, border-color 0.3s;
 +
transition: color 0.3s, border-color 0.3s;
 +
}
 +
 
 +
.btn:hover {
 +
border-color: #16a085;
 +
color: #16a085;
 +
}
 +
 
 +
/* basic grid, only for this demo */
 +
 
 +
.align {
 +
clear: both;
 +
margin: 90px auto 20px;
 +
width: 100%;
 +
max-width: 1170px;
 +
text-align: center;
 +
}
 +
 
 +
.align > li {
 +
width: 500px;
 +
min-height: 300px;
 +
display: inline-block;
 +
margin: 30px 20px 30px 30px;
 +
padding: 0 0 0 60px;
 +
vertical-align: top;
 +
}
 +
 
 +
/* ///////////////////////////////////////////////////
 +
 
 +
HARDCOVER
 +
Table of Contents
 +
 
 +
1. container
 +
2. background & color
 +
3. opening cover, back cover and pages
 +
4. position, transform y transition
 +
5. events
 +
6. Bonus
 +
- Cover design
 +
- Ribbon
 +
- Figcaption
 +
7. mini-reset
 +
 
 +
/////////////////////////////////////////////////////*/
 +
 
 +
/*
 +
1. container
 +
*/
 +
 
 +
.book {
 +
position: relative;
 +
width: 160px;
 +
height: 220px;
 +
-webkit-perspective: 1000px;
 +
-moz-perspective: 1000px;
 +
perspective: 1000px;
 +
-webkit-transform-style: preserve-3d;
 +
-moz-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
}
 +
 
 +
/*
 +
2. background & color
 +
*/
 +
 
 +
/* HARDCOVER FRONT */
 +
.hardcover_front li:first-child {
 +
background-color: #eee;
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
 
 +
/* reverse */
 +
.hardcover_front li:last-child {
 +
background: #fffbec;
 +
}
 +
 
 +
/* HARDCOVER BACK */
 +
.hardcover_back li:first-child {
 +
background: #fffbec;
 +
}
 +
 
 +
/* reverse */
 +
.hardcover_back li:last-child {
 +
background: #fffbec;
 +
}
 +
 
 +
.book_spine li:first-child {
 +
background: #eee;
 +
}
 +
.book_spine li:last-child {
 +
background: #333;
 +
}
 +
 
 +
/* thickness of cover */
 +
 
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before,
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before,
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before,
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before,
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before,
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
background: #999;
 +
}
 +
 
 +
/* page */
 +
 
 +
.page > li {
 +
background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
 +
border-radius: 0px 5px 5px 0px;
 +
}
 +
 
 +
/*
 +
3. opening cover, back cover and pages
 +
*/
 +
 
 +
.hardcover_front {
 +
-webkit-transform: rotateY(-34deg) translateZ(8px);
 +
-moz-transform: rotateY(-34deg) translateZ(8px);
 +
transform: rotateY(-34deg) translateZ(8px);
 +
z-index: 100;
 +
}
 +
 
 +
.hardcover_back {
 +
-webkit-transform: rotateY(-15deg) translateZ(-8px);
 +
-moz-transform: rotateY(-15deg) translateZ(-8px);
 +
transform: rotateY(-15deg) translateZ(-8px);
 +
}
 +
 
 +
.page li:nth-child(1) {
 +
-webkit-transform: rotateY(-28deg);
 +
-moz-transform: rotateY(-28deg);
 +
transform: rotateY(-28deg);
 +
}
 +
 
 +
.page li:nth-child(2) {
 +
-webkit-transform: rotateY(-30deg);
 +
-moz-transform: rotateY(-30deg);
 +
transform: rotateY(-30deg);
 +
}
 +
 
 +
.page li:nth-child(3) {
 +
-webkit-transform: rotateY(-32deg);
 +
-moz-transform: rotateY(-32deg);
 +
transform: rotateY(-32deg);
 +
}
 +
 
 +
.page li:nth-child(4) {
 +
-webkit-transform: rotateY(-34deg);
 +
-moz-transform: rotateY(-34deg);
 +
transform: rotateY(-34deg);
 +
}
 +
 
 +
.page li:nth-child(5) {
 +
-webkit-transform: rotateY(-36deg);
 +
-moz-transform: rotateY(-36deg);
 +
transform: rotateY(-36deg);
 +
}
 +
 
 +
/*
 +
4. position, transform & transition
 +
*/
 +
 
 +
.hardcover_front,
 +
.hardcover_back,
 +
.book_spine,
 +
.hardcover_front li,
 +
.hardcover_back li,
 +
.book_spine li {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
-webkit-transform-style: preserve-3d;
 +
-moz-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
}
 +
 
 +
.hardcover_front,
 +
.hardcover_back {
 +
-webkit-transform-origin: 0% 100%;
 +
-moz-transform-origin: 0% 100%;
 +
transform-origin: 0% 100%;
 +
}
 +
 
 +
.hardcover_front {
 +
-webkit-transition: all 0.8s ease, z-index 0.6s;
 +
-moz-transition: all 0.8s ease, z-index 0.6s;
 +
transition: all 0.8s ease, z-index 0.6s;
 +
}
 +
 
 +
/* HARDCOVER front */
 +
.hardcover_front li:first-child {
 +
cursor: default;
 +
-webkit-user-select: none;
 +
-moz-user-select: none;
 +
user-select: none;
 +
-webkit-transform: translateZ(2px);
 +
-moz-transform: translateZ(2px);
 +
transform: translateZ(2px);
 +
}
 +
 
 +
.hardcover_front li:last-child {
 +
-webkit-transform: rotateY(180deg) translateZ(2px);
 +
-moz-transform: rotateY(180deg) translateZ(2px);
 +
transform: rotateY(180deg) translateZ(2px);
 +
}
 +
 
 +
/* HARDCOVER back */
 +
.hardcover_back li:first-child {
 +
-webkit-transform: translateZ(2px);
 +
-moz-transform: translateZ(2px);
 +
transform: translateZ(2px);
 +
}
 +
 
 +
.hardcover_back li:last-child {
 +
-webkit-transform: translateZ(-2px);
 +
-moz-transform: translateZ(-2px);
 +
transform: translateZ(-2px);
 +
}
 +
 
 +
/* thickness of cover */
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before,
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before,
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before,
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before,
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before,
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
}
 +
 
 +
/* HARDCOVER front */
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before {
 +
width: 4px;
 +
height: 100%;
 +
}
 +
 
 +
.hardcover_front li:first-child:after {
 +
-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
 
 +
.hardcover_front li:first-child:before {
 +
-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
}
 +
 
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before {
 +
width: 4px;
 +
height: 160px;
 +
}
 +
 
 +
.hardcover_front li:last-child:after {
 +
-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
}
 +
.hardcover_front li:last-child:before {
 +
box-shadow: 0px 0px 30px 5px #333;
 +
-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
}
 +
 
 +
/* thickness of cover */
 +
 
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before {
 +
width: 4px;
 +
height: 100%;
 +
}
 +
 
 +
.hardcover_back li:first-child:after {
 +
-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
.hardcover_back li:first-child:before {
 +
-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
}
 +
 
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before {
 +
width: 4px;
 +
height: 160px;
 +
}
 +
 
 +
.hardcover_back li:last-child:after {
 +
-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
}
 +
 
 +
.hardcover_back li:last-child:before {
 +
box-shadow: 10px -1px 80px 20px #666;
 +
-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
}
 +
 
 +
/* BOOK SPINE */
 +
.book_spine {
 +
-webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
-moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
width: 16px;
 +
z-index: 0;
 +
}
 +
 
 +
.book_spine li:first-child {
 +
-webkit-transform: translateZ(2px);
 +
-moz-transform: translateZ(2px);
 +
transform: translateZ(2px);
 +
}
 +
 
 +
.book_spine li:last-child {
 +
-webkit-transform: translateZ(-2px);
 +
-moz-transform: translateZ(-2px);
 +
transform: translateZ(-2px);
 +
}
 +
 
 +
/* thickness of book spine */
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before {
 +
width: 4px;
 +
height: 100%;
 +
}
 +
 
 +
.book_spine li:first-child:after {
 +
-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
 
 +
.book_spine li:first-child:before {
 +
-webkit-transform: rotateY(-90deg) translateZ(-12px);
 +
-moz-transform: rotateY(-90deg) translateZ(-12px);
 +
transform: rotateY(-90deg) translateZ(-12px);
 +
}
 +
 
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
width: 4px;
 +
height: 16px;
 +
}
 +
 
 +
.book_spine li:last-child:after {
 +
-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
}
 +
 
 +
.book_spine li:last-child:before {
 +
box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
 +
-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
}
 +
 
 +
.page,
 +
.page > li {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
-webkit-transform-style: preserve-3d;
 +
-moz-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
}
 +
 
 +
.page {
 +
width: 100%;
 +
height: 98%;
 +
top: 1%;
 +
left: 3%;
 +
z-index: 10;
 +
}
 +
 
 +
.page > li {
 +
width: 100%;
 +
height: 100%;
 +
-webkit-transform-origin: left center;
 +
-moz-transform-origin: left center;
 +
transform-origin: left center;
 +
-webkit-transition-property: transform;
 +
-moz-transition-property: transform;
 +
transition-property: transform;
 +
-webkit-transition-timing-function: ease;
 +
-moz-transition-timing-function: ease;
 +
transition-timing-function: ease;
 +
}
 +
 
 +
.page > li:nth-child(1) {
 +
-webkit-transition-duration: 0.6s;
 +
-moz-transition-duration: 0.6s;
 +
transition-duration: 0.6s;
 +
}
 +
 
 +
.page > li:nth-child(2) {
 +
-webkit-transition-duration: 0.6s;
 +
-moz-transition-duration: 0.6s;
 +
transition-duration: 0.6s;
 +
}
 +
 
 +
.page > li:nth-child(3) {
 +
-webkit-transition-duration: 0.4s;
 +
-moz-transition-duration: 0.4s;
 +
transition-duration: 0.4s;
 +
}
 +
 
 +
.page > li:nth-child(4) {
 +
-webkit-transition-duration: 0.5s;
 +
-moz-transition-duration: 0.5s;
 +
transition-duration: 0.5s;
 +
}
 +
 
 +
.page > li:nth-child(5) {
 +
-webkit-transition-duration: 0.6s;
 +
-moz-transition-duration: 0.6s;
 +
transition-duration: 0.6s;
 +
}
 +
 
 +
/*
 +
5. events
 +
*/
 +
 
 +
.book:hover > .hardcover_front {
 +
-webkit-transform: rotateY(-145deg) translateZ(0);
 +
-moz-transform: rotateY(-145deg) translateZ(0);
 +
transform: rotateY(-145deg) translateZ(0);
 +
z-index: 0;
 +
}
 +
 
 +
.book:hover > .page li:nth-child(1) {
 +
-webkit-transform: rotateY(-30deg);
 +
-moz-transform: rotateY(-30deg);
 +
transform: rotateY(-30deg);
 +
-webkit-transition-duration: 1.5s;
 +
-moz-transition-duration: 1.5s;
 +
transition-duration: 1.5s;
 +
}
 +
 
 +
.book:hover > .page li:nth-child(2) {
 +
-webkit-transform: rotateY(-35deg);
 +
-moz-transform: rotateY(-35deg);
 +
transform: rotateY(-35deg);
 +
-webkit-transition-duration: 1.8s;
 +
-moz-transition-duration: 1.8s;
 +
transition-duration: 1.8s;
 +
}
 +
 
 +
.book:hover > .page li:nth-child(3) {
 +
-webkit-transform: rotateY(-118deg);
 +
-moz-transform: rotateY(-118deg);
 +
transform: rotateY(-118deg);
 +
-webkit-transition-duration: 1.6s;
 +
-moz-transition-duration: 1.6s;
 +
transition-duration: 1.6s;
 +
}
 +
 
 +
.book:hover > .page li:nth-child(4) {
 +
-webkit-transform: rotateY(-130deg);
 +
-moz-transform: rotateY(-130deg);
 +
transform: rotateY(-130deg);
 +
-webkit-transition-duration: 1.4s;
 +
-moz-transition-duration: 1.4s;
 +
transition-duration: 1.4s;
 +
}
 +
 
 +
.book:hover > .page li:nth-child(5) {
 +
-webkit-transform: rotateY(-140deg);
 +
-moz-transform: rotateY(-140deg);
 +
transform: rotateY(-140deg);
 +
-webkit-transition-duration: 1.2s;
 +
-moz-transition-duration: 1.2s;
 +
transition-duration: 1.2s;
 +
}
 +
 
 +
/*
 +
6. Bonus
 +
*/
 +
 
 +
/* cover CSS */
 +
 
 +
.coverDesign {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
right: 0;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
 
 +
.coverDesign::after {
 +
background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
right: 0;
 +
}
 +
 
 +
.coverDesign h1 {
 +
color: #fff;
 +
font-size: 2.2em;
 +
letter-spacing: 0.05em;
 +
text-align: center;
 +
margin: 54% 0 0 0;
 +
text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
 +
}
 +
 
 +
.coverDesign p {
 +
color: #f8f8f8;
 +
font-size: 1em;
 +
text-align: center;
 +
text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
 +
}
 +
 
 +
.yellow {
 +
background-color: #f1c40f;
 +
background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
}
 +
 
 +
.blue {
 +
background-color: #3498db;
 +
background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
}
 +
 
 +
.grey {
 +
background-color: #f8e9d1;
 +
background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
}
 +
 
 +
/* Basic ribbon */
 +
 
 +
.ribbon {
 +
background: #c0392b;
 +
color: #fff;
 +
display: block;
 +
font-size: 0.7em;
 +
position: absolute;
 +
top: 11px;
 +
right: 1px;
 +
width: 40px;
 +
height: 20px;
 +
line-height: 20px;
 +
letter-spacing: 0.15em;
 +
text-align: center;
 +
-webkit-transform: rotateZ(45deg) translateZ(1px);
 +
-moz-transform: rotateZ(45deg) translateZ(1px);
 +
transform: rotateZ(45deg) translateZ(1px);
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
z-index: 10;
 +
}
 +
 
 +
.ribbon::before,
 +
.ribbon::after{
 +
position: absolute;
 +
top: -20px;
 +
width: 0;
 +
height: 0;
 +
border-bottom: 20px solid #c0392b;
 +
border-top: 20px solid transparent;
 +
}
 +
 
 +
.ribbon::before{
 +
left: -20px;
 +
border-left: 20px solid transparent;
 +
}
 +
 
 +
.ribbon::after{
 +
right: -20px;
 +
border-right: 20px solid transparent;
 +
}
 +
 
 +
/* figcaption */
 +
 
 +
figcaption {
 +
padding-left: 40px;
 +
text-align: left;
 +
position: absolute;
 +
top: 0%;
 +
left: 160px;
 +
width: 310px;
 +
}
 +
 
 +
figcaption h1 {
 +
margin: 0;
 +
}
 +
 
 +
figcaption span {
 +
color: #16a085;
 +
padding: 0.6em 0 1em 0;
 +
display: block;
 +
}
 +
 
 +
figcaption p {
 +
color: #63707d;
 +
line-height: 1.3;
 +
}
 +
 
 +
/* Media Queries */
 +
@media screen and (max-width: 37.8125em) {
 +
.align > li {
 +
width: 100%;
 +
min-height: 440px;
 +
height: auto;
 +
padding: 0;
 +
margin: 0 0 30px 0;
 +
}
 +
 
 +
.book {
 +
margin: 0 auto;
 +
}
 +
 
 +
figcaption {
 +
text-align: center;
 +
width: 320px;
 +
top: 250px;
 +
padding-left: 0;
 +
left: -80px;
 +
font-size: 90%;
 +
}
 +
}
 +
 
 +
</style>
 +
</head>
 +
 
 +
<body class="full-intro background--dark">
 +
 
 +
    <!-- Preloader -->
 +
    <section id="preloader">
 +
        <div class="loader" id="loader">
 +
            <div class="loader-img"></div>
 +
        </div>
 +
    </section>
 +
    <!-- End Preloader -->
 +
 
 +
    <!-- Site Wraper -->
 +
    <div class="wrapper">
 +
        <!-- HEADER -->
 +
        <header class="header">
 +
            <div class="container">
 +
 
 +
                <!-- logo -->
 +
                <div class="logo">
 +
                    <a href="#">
 +
                        <img class="l-black" src="https://static.igem.org/mediawiki/2015/a/a8/LogoBlack_GSUiGem.png" />
 +
                        <img class="l-white" src="https://static.igem.org/mediawiki/2015/e/e1/WhiteLogo_GSUiGem.png" />
 +
                    </a>
 +
                </div>
 +
                <!--End logo-->
 +
 
 +
<!-- Navigation Menu -->
 +
                <nav class="navigation singlepage-nav">
 +
                    <ul>
 +
                        <li>
 +
                            <a class="current-ele" href="https://2015.igem.org/Team:Georgia_State">Home</a>
 +
                        </li>
 +
<li>
 +
                            <a href="https://2015.igem.org/Team:Georgia_State/Team">Team</a>
 +
                        </li>
 +
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:Georgia_State/Project">Project</a>
 +
<ul>
 +
<li>
 +
  <a href="https://2015.igem.org/Team:Georgia_State/Project#Thing1">Mambalgin</a>
 +
</li>
 +
<li>
 +
  <a href="https://2015.igem.org/Team:Georgia_State/Project#Thing2">CBDA Synthase</a>
 +
 
 +
</li>
 +
<li>
 +
  <a href="https://2015.igem.org/Team:Georgia_State/Parts">Parts Submitted</a>
 +
 
 +
</li>
 +
</ul>
 +
 
 +
<li> <a href="https://2015.igem.org/Team:Georgia_State/Practices">Practices</a>
 +
<ul>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Georgia_State/Practices#Thing1">Atlanta Science Festival</a>
 +
</li>
 +
 +
<li>
 +
<a href="https://2015.igem.org/Team:Georgia_State/Practices#Thing2">Six Flags Education Day</a>
 +
</li>
 +
 +
<li>
 +
<a href="https://2015.igem.org/Team:Georgia_State/Practices#Thing3">Legislative Outreach</a>
 +
</li>
 +
 +
<li>
 +
<a href="https://2015.igem.org/Team:Georgia_State/Practices#Thing4">Atlanta Botanical Gardens</a>
 +
</li>
 +
</ul>
 +
<li> <a href="https://2015.igem.org/Team:Georgia_State/Collaborations">Collaborations</a>
 +
<ul>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Georgia_State/Collaborations#ASF">Atlanta Science Festival</a>
 +
</li>
 +
<li>
 +
<a href="https://2015.igem.org/Team:Georgia_State/Collaborations#Thing2">Project JBroth</a>
 +
</li>
 
</ul>
 
</ul>
  
 +
<li> <a href="https://2015.igem.org/Team:Georgia_State/Notebook">Notebook</a>
 +
</li>
 +
<li> <a href="https://2015.igem.org/Team:Georgia_State/Project">Safety</a>
 +
                        </li>
 +
                       
 +
<li>
 +
<a href="https://2015.igem.org/Team:Georgia_State/ImageGallery">Image Gallery</a>
 +
                        </li>
 +
                     
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:Georgia_State#contact-info">Contact</a>
 +
                        </li>
 +
                    </ul>
 +
                </nav>
 +
                <!--End Navigation Menu -->
 +
 +
 +
            </div>
 +
        </header>
 +
        <!-- END HEADER -->
 +
<!-- Intro Section -->
 +
        <section id="intro" class="full-screen-intro bg-img29">
 +
            <div class="media-wapper bg-img parallax parallax-section1 overlay-dark" style="top: 250px; background-image: url(https://static.igem.org/mediawiki/2015/9/9a/GSUiGEM_AtlantaSkyline.jpg);">
 +
                <canvas id="pollyfill-canvas"></canvas>
 +
            </div>
 +
            <div class="full-cap-wraper">
 +
                <div class="content-caption light-color">
 +
                    <div class="container">
 +
                        <br>
 +
                      <h2> Notebook</h2>
 +
                        <br>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </section>
 +
        <div class="clearfix"></div>
 +
        <!-- End Intro Section -->
 +
 +
<!--About Section-->
 +
        <section id="about" class="wow fadeIn ptb ptb-sm-80" style="background-color: #0387A6;">
 +
            <div class="container">
 +
                <div class="row text-center">
 +
                    <div class="col-md-12">
 +
                        <h3 class="h4" style="text-align: center;color: white;">Our Project</h3>
 +
                        <div class="spacer-15"></div>
 +
                        <p class="lead"  style="color: white;" >We are just awesome! </p>
 +
                    </div>
 +
                </div>
 +
                   
 +
            </div>
 +
        </section>
 +
        <!-- End About Section-->
 +
 +
 +
        <hr />
 +
<section id="about" class="wow fadeIn ptb ptb-sm-80" style="background-color: #0387A6;">
 +
            <div class="container">
 +
                <div class="row text-center">
 +
                    <div class="col-md-12">
 +
 +
 +
<div class="component">
 +
<ul class="align">
 +
<li>
 +
<figure class='book'>
 +
 +
<!-- Front -->
 +
 +
<ul class='hardcover_front'>
 +
<li>
 +
<div class="coverDesign blue">
 +
<h1>CSS</h1>
 +
<p>BOOK</p>
 +
</div>
 +
</li>
 +
<li></li>
 +
</ul>
 +
 +
<!-- Pages -->
 +
 +
<ul class='page'>
 +
<li></li>
 +
<li>
 +
<a class="btn" href="#">Download</a>
 +
</li>
 +
<li></li>
 +
<li></li>
 +
<li></li>
 +
</ul>
 +
 +
<!-- Back -->
 +
 +
<ul class='hardcover_back'>
 +
<li></li>
 +
<li></li>
 +
</ul>
 +
<ul class='book_spine'>
 +
<li></li>
 +
<li></li>
 +
</ul>
 +
<figcaption>
 +
<h1>Fivera.net</h1>
 +
<span>By Nikola Petrovic</span>
 +
<p>Website dedicated to sharing resources</p>
 +
</figcaption>
 +
</figure>
 +
</li>
 +
</ul>
 +
</div>
 +
 +
              </div>
 +
                </div>
 +
                   
 +
            </div>
 +
        </section>
 +
   
 +
 +
<!-- Social Section -->
 +
        <section id="social" class="gray-bg ptb ptb-sm-80">
 +
            <div class="container text-center">
 +
                <div class="row">
 +
                    <div class="col-md-8 col-md-offset-2">
 +
                        <h3>Connect With Us</h3>
 +
                    </div>
 +
                </div>
 +
                <div class="spacer-60"></div>
 +
                <div class="row">
 +
                    <div class="col-md-8 col-md-offset-2">
 +
                        <div class="row">
 +
                            <div class="col-md-6 col-sm-4 col-xs-6">
 +
                                <div class="page-icon-top">
 +
                           
 +
<img src="https://static.igem.org/mediawiki/2015/5/5f/GSUiGEM-2015Twitter.png">
 +
                        </div>
 +
                              <h6><a class="Link" target="_blank" href="https://twitter.com/GSUiGEM">Twitter</a></h6>
 +
                                </div>
 +
                               
 +
                         
 +
                            <div class="col-md-6 col-sm-4 col-xs-6">
 +
                                <div class="page-icon-top">
 +
<img src="https://static.igem.org/mediawiki/2015/9/95/GSUiGEM-fb.png">
 +
                                </div>
 +
                                <h6><a class="Link" target="_blank" href="https://www.facebook.com/GSUiGEM">Facebook</a></h6>
 +
                            </div>
 +
                           
 +
                        </div>
 +
    </div>
 +
                </div>
 +
            </div>
 +
        </section>
 +
        <!-- End Social Section -->
 +
 +
       
 +
 +
        <hr />
 +
 +
        <section id="contact-info" class="ptb ptb-sm-80">
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-md-4">
 +
                        <div class="contact-box-left">
 +
                            <div class="contact-icon-left">
 +
<img src="https://static.igem.org/mediawiki/2015/0/04/GSUiGEM-Location.png">
 
</div>
 
</div>
 +
                            <h6>Address</h6>
 +
                            <p>
 +
                                iGEM Lab
 +
                               
 +
                                24 Peachtree Center Ave SE, Kell Hall 439
 +
                                Atlanta, Georgia 30303
 +
                            </p>
 +
 +
                        </div>
 +
                    </div>
 +
 +
                    <div class="col-md-4">
 +
                        <div class="contact-box-left">
 +
                            <div class="contact-icon-left">
 +
<img src="https://static.igem.org/mediawiki/2015/9/93/GSUiGEM-phone.png">
 +
</div>
 +
                            <h6>Call Us</h6>
 +
                            <p>
 +
                                <span>We're all millennials. We don't like talking on the phone. Send us a Tweet!</span><br />
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
 +
                    <div class="col-md-4">
 +
                        <div class="contact-box-left">
 +
                            <div class="contact-icon-left">
 +
<img src="https://static.igem.org/mediawiki/2015/d/d2/GSUiGEM-email.png">
 +
</div>
 +
                            <h6>Email</h6>
 +
                            <p>
 +
                                <a href="mailto:mbrewer@gsu.edu">mbrewer@gsu.edu</a>
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
 +
                </div>
 +
            </div>
 +
        </section>
 +
 +
        <!-- END CONTENT ---------------------------------------------------------------------------->
 +
 +
        <!-- FOOTER -->
 +
        <footer class="footer pt-80">
 +
 +
            <!-- Copyright Bar -->
 +
            <section class="copyright pb-60">
 +
                <div class="container">
 +
                    <p class="">
 +
                        &copy; 2015 <a><b>GSU IGEM</b></a>. All Rights Reserved.
 +
                        <br />
 +
                     
 +
                    </p>
 +
                </div>
 +
            </section>
 +
            <!-- End Copyright Bar -->
 +
 +
        </footer>
 +
        <!-- END FOOTER -->
 +
 +
        <!-- Scroll Top -->
 +
        <a class="scroll-top">
 +
<img src="https://static.igem.org/mediawiki/2015/8/84/GSUiGEM-uparrow.png" alt="" />
 +
        </a>
 +
        <!-- End Scroll Top -->
 +
 +
    </div>
 +
    <!-- Site Wraper End -->
 +
 +
</body>
 +
 +
 +
    <!-- JS -->
 +
 +
<script type="text/javascript" src="https://2015.igem.org/Template:Georgia_State/Javascript?
 +
action=raw&ctype=text/javascript"></script>
 +
 +
 
 +
 
</html>
 
</html>

Revision as of 11:04, 18 September 2015

IGEM Team:GSU /* Source code provided from Codepen.io http://codepen.io/fivera/pen/rHigj */


Notebook


Our Project

We are just awesome!

    • CSS

      BOOK

    Fivera.net

    By Nikola Petrovic

    Website dedicated to sharing resources

Connect With Us

Twitter
Facebook
Address

iGEM Lab 24 Peachtree Center Ave SE, Kell Hall 439 Atlanta, Georgia 30303

Call Us

We're all millennials. We don't like talking on the phone. Send us a Tweet!

Email

mbrewer@gsu.edu

© 2015 GSU IGEM. All Rights Reserved.