Team:CU-Boulder/Test

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team:CU-Boulder/Wiki}}
{{:Team:CU-Boulder/Wiki}}
-
<html lang="en">
+
<html>
-
<head>
+
<head>
-
<title>Magnetic - Stunning Responsive HTML5/CSS3 Photography Wensite Template</title>
+
<title>Big Picture by HTML5 UP</title>
-
<meta charset="utf-8">
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-
<meta name="author" content="pixelhint.com">
+
<meta name="description" content="" />
-
<meta name="description" content="Magnetic is a stunning responsive HTML5/CSS3 photography/portfolio website template"/>
+
<meta name="keywords" content="" />
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
-
<!--<link rel="stylesheet" type="text/css" href="css/reset.css">-->
+
                <script src="http://code.jquery.com/jquery-latest.js"></script>
-
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
+
                <script src="http://html5up.net/uploads/demos/big-picture/js/skel.min.js"></script>
-
    <script type="text/javascript" src="js/jquery.js"></script>
+
<noscript>
-
    <script type="text/javascript" src="js/main.js"></script>
+
<link rel="stylesheet" href="css/skel-noscript.css" />
-
    <style>
+
<link rel="stylesheet" href="css/style.css" />
-
    html, body, div, span, object, iframe,
+
</noscript>
-
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
-
    abbr, address, cite, code,
+
</head>
-
    del, dfn, em, img, ins, kbd, q, samp,
+
<body>
-
    small, strong, sub, sup, var,
+
-
    b, i,
+
-
    dl, dt, dd, ol, ul, li,
+
-
    fieldset, form, label, legend,
+
-
    table, caption, tbody, tfoot, thead, tr, th, td,
+
-
    article, aside, canvas, details, figcaption, figure,
+
-
    footer, header, hgroup, menu, nav, section, summary,
+
-
    time, mark, audio, video {
+
-
        margin:0;
+
-
        padding:0;
+
-
        border:0;
+
-
        outline:0;
+
-
        font-size:100%;
+
-
        vertical-align:baseline;
+
-
        background:transparent;
+
-
    }
+
-
    body {
+
<!-- Header -->
-
        line-height:1;
+
<header id="header">
-
    }
+
-
    img{
+
<!-- Logo -->
-
        max-width: 100%;
+
<h1 id="logo"><a href="#">Big Picture</a></h1>
-
    }
+
 +
<!-- Nav -->
 +
<nav id="nav">
 +
<ul>
 +
<li><a href="#intro">Intro</a></li>
 +
<li><a href="#one">What I Do</a></li>
 +
<li><a href="#two">Who I Am</a></li>
 +
<li><a href="#work">My Work</a></li>
 +
<li><a href="#contact">Contact</a></li>
 +
</ul>
 +
</nav>
-
    article,aside,details,figcaption,figure,
+
</header>
-
    footer,header,hgroup,menu,nav,section {
+
-
        display:block;
+
<!-- Intro -->
-
    }
+
<section id="intro" class="main style1 dark fullscreen">
-
 
+
<div class="content container small">
-
    nav ul {
+
<header>
-
        list-style:none;
+
<h2>Hey.</h2>
-
    }
+
</header>
-
 
+
<p>Welcome to <strong>Big Picture</strong> a responsive site template designed
-
    blockquote, q {
+
by <a href="http://html5up.net">HTML5 UP</a>, built on <a href="http://skeljs.org">skelJS</a>,
-
        quotes:none;
+
and released for free under the <a href="http://html5up.net/license/">Creative Commons Attribution 3.0 license</a>.</p>
-
    }
+
<footer>
-
 
+
<a href="#one" class="button style2 down">More</a>
-
    blockquote:before, blockquote:after,
+
</footer>
-
    q:before, q:after {
+
-
        content:'';
+
-
        content:none;
+
-
    }
+
-
 
+
-
    a {
+
-
        margin:0;
+
-
        padding:0;
+
-
        font-size:100%;
+
-
        vertical-align:baseline;
+
-
        background:transparent;
+
-
        color: #454545;
+
-
    }
+
-
 
+
-
    /* change colours to suit your needs */
+
-
    ins {
+
-
        background-color:#ff9;
+
-
        color:#000;
+
-
        text-decoration:none;
+
-
    }
+
-
 
+
-
    /* change colours to suit your needs */
+
-
    mark {
+
-
        background-color:#ff9;
+
-
        color:#000;
+
-
        font-style:italic;
+
-
        font-weight:bold;
+
-
    }
+
-
 
+
-
    del {
+
-
        text-decoration: line-through;
+
-
    }
+
-
 
+
-
    abbr[title], dfn[title] {
+
-
        border-bottom:1px dotted;
+
-
        cursor:help;
+
-
    }
+
-
 
+
-
    table {
+
-
        border-collapse:collapse;
+
-
        border-spacing:0;
+
-
    }
+
-
 
+
-
    /* change border colour to suit your needs */
+
-
    hr {
+
-
        display:block;
+
-
        height:1px;
+
-
        border:0; 
+
-
        border-top:1px solid #cccccc;
+
-
        margin:1em 0;
+
-
        padding:0;
+
-
    }
+
-
 
+
-
    input, select {
+
-
        vertical-align:middle;
+
-
    }
+
-
/*
+
-
 
+
-
    Template Author : pixelhint.com
+
-
    Author Email    : contact@pixelhint.com
+
-
    Template Name  : Magnetic
+
-
   
+
-
   
+
-
    *****************************************
+
-
   
+
-
   
+
-
    - Fonts
+
-
    - General CSS
+
-
    - Header
+
-
    - Home/portfolio
+
-
    - Inner page
+
-
    - Map/Contact page 
+
-
    - Tooltip
+
-
    - Responsive code
+
-
 
+
-
   
+
-
*/
+
-
 
+
-
 
+
-
 
+
-
/*  Fonts  */
+
-
@font-face {
+
-
    font-family: 'raleway-regular';
+
-
    src: url('../fonts/raleway-regular.eot');
+
-
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
+
-
        url('../fonts/raleway-regular.woff') format('woff'),
+
-
        url('../fonts/raleway-regular.ttf') format('truetype'),
+
-
        url('../fonts/raleway-regular.svg#ralewayregular') format('svg');
+
-
    font-weight: normal;
+
-
    font-style: normal;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
@font-face {
+
-
    font-family: 'raleway-bold';
+
-
    src: url('../fonts/raleway-bold.eot');
+
-
    src: url('../fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),
+
-
        url('../fonts/raleway-bold.woff') format('woff'),
+
-
        url('../fonts/raleway-bold.ttf') format('truetype'),
+
-
        url('../fonts/raleway-bold.svg#ralewaybold') format('svg');
+
-
    font-weight: normal;
+
-
    font-style: normal;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
@font-face {
+
-
    font-family: 'raleway-semibold';
+
-
    src: url('../fonts/raleway-semibold.eot');
+
-
    src: url('../fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),
+
-
        url('../fonts/raleway-semibold.woff') format('woff'),
+
-
        url('../fonts/raleway-semibold.ttf') format('truetype'),
+
-
        url('../fonts/raleway-semibold.svg#ralewaysemibold') format('svg');
+
-
    font-weight: normal;
+
-
    font-style: normal;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/*  General CSS*/
+
-
body{
+
-
    background: #fff;
+
-
}
+
-
 
+
-
.wrapper{
+
-
    width: 92.72727272727273%;
+
-
    margin: 0 auto;
+
-
}
+
-
 
+
-
header ul.social li a,
+
-
.main .work a .caption,
+
-
header nav ul li a{
+
-
    transition:all .1s linear;
+
-
    -webkit-transition:all .1s linear;
+
-
    -moz-transition:all .1s linear;
+
-
    -o-transition:all .1s linear;
+
-
}
+
-
 
+
-
h1, h2, h3, h4, h5 ,h6{
+
-
    color: #4b4848;
+
-
    font-family: "raleway-regular", arial;
+
-
    letter-spacing: 1px;
+
-
}
+
-
 
+
-
h1              { font-size: 2em; margin: .67em 0 }
+
-
h2              { font-size: 1.5em; margin: .75em 0 }
+
-
h3              { font-size: 1.17em; margin: .83em 0 }
+
-
h5              { font-size: .83em; margin: 1.5em 0 }
+
-
h6              { font-size: .75em; margin: 1.67em 0 }
+
-
h1, h2, h3, h4,
+
-
h5, h6          { font-weight: bolder }
+
-
 
+
-
.clearfix:before, 
+
-
.clearfix:after { 
+
-
    content: " "; 
+
-
    display: table; 
+
-
} 
+
-
.clearfix:after { 
+
-
    clear: both; 
+
-
} 
+
-
+
-
.clearfix { 
+
-
    *zoom: 1; 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Header  */
+
-
@media (min-width:1000px){
+
-
    header{
+
-
        display: block;
+
-
        position: fixed;
+
-
        top: 0;
+
-
        left: 0;
+
-
        width: 250px;
+
-
        min-height: 100%;
+
-
        padding: 0 0 0 50px;
+
-
        background: #ffffff;
+
-
        float: left;
+
-
        overflow: hidden;
+
-
        z-index: 9999;
+
-
    }
+
-
 
+
-
    header .logo{
+
-
        margin-top: 100px;
+
-
    }
+
-
 
+
-
    header nav ul{
+
-
        display: block;
+
-
        overflow: hidden;
+
-
        margin-top: 100px;
+
-
        list-style: none;
+
-
    }
+
-
 
+
-
    header nav ul li{
+
-
        display: block;
+
-
        margin-bottom: 30px;
+
-
    }
+
-
 
+
-
    header nav ul li a{
+
-
        color: #454545;
+
-
        font-family: "raleway-regular", arial;
+
-
        font-size: 14px;
+
-
        text-decoration: none;
+
-
        letter-spacing: 1px;
+
-
    }
+
-
 
+
-
    header nav ul li a:hover,
+
-
    header nav ul li a.selected{
+
-
        color: #969595;
+
-
    }
+
-
 
+
-
    header .footer{
+
-
        position: absolute;
+
-
        bottom: 50px;
+
-
    }
+
-
 
+
-
    header ul.social{
+
-
        list-style: none;
+
-
        margin-bottom: 5px;
+
-
    }
+
-
 
+
-
    header ul.social li{
+
-
        display: block;
+
-
        float: left;
+
-
        position: relative;
+
-
        margin: 0 15px 15px 0;
+
-
    }
+
-
 
+
-
 
+
-
    header ul.social li a{
+
-
        display: block;
+
-
        width: 30px;
+
-
        height: 30px;
+
-
        background: url('../img/sm.png') no-repeat;
+
-
        background-position: 0 0;
+
-
    }
+
-
 
+
-
 
+
-
    header ul.social li a:hover{
+
-
        background: url('../img/sm_hover.png') no-repeat;
+
-
    }
+
-
 
+
-
 
+
-
 
+
-
    header ul.social li a.fb,
+
-
    header ul.social li a.fb:hover{
+
-
        background-position: 0 0;
+
-
    }
+
-
 
+
-
 
+
-
    header ul.social li a.google,
+
-
    header ul.social li a.google:hover{
+
-
        background-position: -31px 0;
+
-
    }
+
-
 
+
-
    header ul.social li a.behance,
+
-
    header ul.social li a.behance:hover{
+
-
        background-position: -62px 0;
+
-
    }
+
-
 
+
-
    header ul.social li a.twitter,
+
-
    header ul.social li a.twitter:hover{
+
-
        background-position: -93px 0;
+
-
    }
+
-
 
+
-
    header ul.social li a.dribble,
+
-
    header ul.social li a.dribble:hover{
+
-
        background-position: -124px 0;
+
-
    }
+
-
 
+
-
    header ul.social li a.rss,
+
-
    header ul.social li a.rss:hover{
+
-
        background-position: -155px 0;
+
-
    }
+
-
 
+
-
    header .rights p{
+
-
        color: #454545;
+
-
        font-family: "raleway-regular", arial;
+
-
        font-size: 11px;
+
-
        letter-spacing: 1px;
+
-
        line-height: 18px;
+
-
    }
+
-
 
+
-
    header .rights a{
+
-
        font-family: "raleway-bold", arial;
+
-
        font-weight: bold;
+
-
        text-decoration: none;
+
-
    }
+
-
    #menu_icon,
+
-
    .close_menu{
+
-
        display: none;
+
-
    }
+
-
 
+
-
}
+
-
 
+
-
#menu_icon,
+
-
.close_menu{
+
-
    float: right;
+
-
    margin-right: 40px;
+
-
    width: 40px;
+
-
    height: 40px;
+
-
    cursor: pointer;
+
-
    background: url('../img/men_icons.png') no-repeat;
+
-
}
+
-
 
+
-
#menu_icon{   
+
-
    background-position: 0 0;
+
-
}
+
-
.close_menu{
+
-
    background-position: -41px 0!important;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Main  */
+
-
.main{
+
-
    width: 100%;
+
-
    height: 100%;
+
-
    padding-left: 300px;
+
-
    -moz-box-sizing: border-box;
+
-
    -webkit-box-sizing: border-box;
+
-
    box-sizing: border-box;
+
-
    overflow: hidden;
+
-
    position: relative;
+
-
    z-index: 55;
+
-
    background: #f6f6f6;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Home/portfolio  */
+
-
.main .work{
+
-
    display: block;
+
-
    width: 33.33333333333333%;
+
-
    height: auto;
+
-
    float: left;
+
-
    position: relative;
+
-
    overflow: hidden;
+
-
}
+
-
 
+
-
.main .work .media{
+
-
    width: 100%;
+
-
    vertical-align: middle;
+
-
}
+
-
 
+
-
.main .work .caption{
+
-
    position: absolute;
+
-
    display: block;
+
-
    width: 100%;
+
-
    height: 100%;
+
-
    top: 0;
+
-
    left: 0;
+
-
    background: #ffffff;
+
-
    opacity: 0;
+
-
}
+
-
 
+
-
 
+
-
.main .work a:hover .caption{
+
-
    opacity: 1;
+
-
}
+
-
 
+
-
 
+
-
.work .caption .work_title{
+
-
    display: block;
+
-
    width: 100%;
+
-
    position: absolute;
+
-
    text-align: center;
+
-
    top: 50%;
+
-
    margin-top: -40px;
+
-
}
+
-
 
+
-
.main .work .caption h1{
+
-
    position: relative;
+
-
    display: inline-block;
+
-
    max-width: 90%;
+
-
    padding: 20px 0;
+
-
    z-index: 77;
+
-
    color: #454545;
+
-
    font-family: "raleway-regular", arial;
+
-
    font-size: 16px;
+
-
    letter-spacing: .5px;
+
-
    border-bottom: 1px solid #bfbbbb;
+
-
    border-top: 1px solid #bfbbbb;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Inner Page  */
+
-
.top{
+
-
    width: 100%;
+
-
    height: 350px;
+
-
    overflow: hidden;
+
-
    display: block;
+
-
    position: relative;
+
-
    background: url('../img/hero_image.jpg') no-repeat;
+
-
    background-size: cover;
+
-
    -webkit-background-size: cover;
+
-
    -moz-background-size: cover;
+
-
    -o-background-size: cover;
+
-
    background-position: 50% 50%;
+
-
}
+
-
 
+
-
.work_nav{
+
-
    display: block;
+
-
    width: 100%;
+
-
}
+
-
 
+
-
.work_nav .btn{
+
-
    float: right;
+
-
}
+
-
 
+
-
.work_nav ul{
+
-
    list-style: none;
+
-
}
+
-
 
+
-
.work_nav ul li{
+
-
    display: block;
+
-
    float: left;
+
-
    margin: 0 0 1px 1px;
+
-
    position: relative;
+
-
}
+
-
 
+
-
.work_nav a{
+
-
    display: block;
+
-
    width: 40px;
+
-
    height: 40px;
+
-
    background: url('../img/p_navigation.png') no-repeat;
+
-
    background-position: 0 0;
+
-
}
+
-
 
+
-
.work_nav a.previous{
+
-
    background-position: 0 0;
+
-
}
+
-
 
+
-
.work_nav a.grid{
+
-
    background-position: -41px 0;
+
-
}
+
-
 
+
-
.work_nav a.next{
+
-
    background-position: -82px 0;
+
-
}
+
-
 
+
-
.top .title{
+
-
    display: block;
+
-
    width: 100%;color: #4b4848;
+
-
    font-family: "raleway-bold", arial;
+
-
    font-size: 26px;
+
-
    font-weight: bold;
+
-
    background: rgba(255, 255, 255, .7);
+
-
    padding: 20px;
+
-
    text-transform: uppercase;
+
-
    line-height: 30px;
+
-
    margin: 0!important;
+
-
    overflow: hidden;
+
-
 
+
-
    -webkit-box-sizing: border-box;
+
-
    -moz-box-sizing: border-box;
+
-
    -ms-box-sizing: border-box;
+
-
    box-sizing: border-box;
+
-
 
+
-
}
+
-
 
+
-
.content_header{
+
-
    position: absolute;
+
-
    bottom: 0;
+
-
    margin: 0 auto;
+
-
    left: 50%;
+
-
    margin-left: -46.36363636363637%;
+
-
}
+
-
 
+
-
.content{
+
-
    color: #4b4848;
+
-
    font-family: "raleway-regular", arial;
+
-
    font-size: 15px;
+
-
    line-height: 22px;
+
-
    padding: 60px 30px;
+
-
    background: #fff;
+
-
 
+
-
    -webkit-box-sizing: border-box;
+
-
    -moz-box-sizing: border-box;
+
-
    -ms-box-sizing: border-box;
+
-
    box-sizing: border-box;
+
-
}
+
-
 
+
-
.content p{
+
-
    color: #4b4848;
+
-
    font-family: "raleway-regular", arial;
+
-
    font-size: 15px;
+
-
    line-height: 24px;
+
-
    margin-bottom: 60px;
+
-
}
+
-
 
+
-
.content h1,
+
-
.content h2,
+
-
.content h3,
+
-
.content h4,
+
-
.content h5,
+
-
.content h6{
+
-
    color: #4b4848;
+
-
    font-family: "raleway-semibold", arial;
+
-
    font-weight: bold;
+
-
    line-height: 28px;
+
-
    margin-bottom: 30px;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Contact page map  */
+
-
#map .map_adresse{
+
-
    font-family: 'raleway-regular', arial;
+
-
    font-size: 14px;
+
-
    line-height: 22px;
+
-
    letter-spacing: 1px;
+
-
}
+
-
 
+
-
#map .map_address,
+
-
#map .map_tel{
+
-
    padding: 5px;
+
-
}
+
-
 
+
-
#map .map_address .address,
+
-
#map .map_tel .tel{
+
-
    font-family: 'raleway-bold', arial;
+
-
    font-weight: bolder;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
/*  Tooltip  */
+
-
.tooltip{
+
-
    display: block;
+
-
    padding: 7px 10px;
+
-
    background: #454545;
+
-
    color: #fff;
+
-
    font-family: "raleway-regular", arial;
+
-
    font-size: 12px;
+
-
    position: absolute;
+
-
    white-space: nowrap;
+
-
    z-index: 999;
+
-
    opacity: 0;
+
-
    text-align: center;
+
-
    letter-spacing: .5px;
+
-
 
+
-
}
+
-
 
+
-
.tooltip:after{
+
-
    content: '';
+
-
    width: 0px;
+
-
    height: 0px;
+
-
    border-style: solid;
+
-
    border-width: 3px 3px 0 3px;
+
-
    border-color: #454545 transparent transparent transparent;
+
-
    display: block;
+
-
    text-align: center;
+
-
    position: absolute;
+
-
    bottom: -3px;
+
-
    left: 50%;
+
-
    margin-left: -3px;
+
-
}
+
-
 
+
-
 
+
-
/*  Responsive code  */
+
-
@media (max-width:1100px){
+
-
 
+
-
    header{
+
-
        display: block;
+
-
        width: 100%;
+
-
        min-height: 100px;
+
-
        padding: 0;
+
-
        position: relative;
+
-
    }
+
-
    header .logo{
+
-
        margin: 40px 0 0 30px;
+
-
        display: inline-block;
+
-
    }
+
-
    header .footer{
+
-
        display: none;
+
-
    }
+
-
    header #menu_icon,
+
-
    header .close_menu{
+
-
        float: right;
+
-
        margin: 30px 30px 0 0;
+
-
    }
+
-
    header nav ul{
+
-
        list-style: none;
+
-
        display: none;
+
-
        margin-top: 35px;
+
-
        position: relative;
+
-
    }
+
-
    header nav ul li a{
+
-
        display: block;
+
-
        width: 100%;
+
-
        padding: 30px 0;
+
-
        text-align: center;
+
-
        color: #454545;
+
-
        font-family: "raleway-regular", arial;
+
-
        font-size: 14px;
+
-
        text-decoration: none;
+
-
        border-top: 1px solid #f7f5f5;
+
-
        background: #fff;
+
-
    }
+
-
    header nav ul li a:active{
+
-
        background: #f7f5f5;
+
-
    }
+
-
    #menu_icon,
+
-
    .close_menu,
+
-
    .show_menu{
+
-
        display: block;
+
-
    }
+
-
    .show_menu{
+
-
        display: block;
+
-
    }
+
-
 
+
-
    .main .work{
+
-
        width: 50%;
+
-
    }
+
-
    .main{
+
-
        width: 100%;
+
-
        position: relative;
+
-
        padding-left: 0;
+
-
    }
+
-
    #map{
+
-
        margin: 0!important;
+
-
    }
+
-
}
+
-
 
+
-
@media (max-width:550px){
+
-
    .main .work{
+
-
        width: 100%;
+
-
    }
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
    </style>
+
-
</head>
+
-
<body>
+
-
 
+
-
<header>
+
-
<div class="logo">
+
-
<a href="index.html"><img src="img/logo.png" title="Magnetic" alt="Magnetic"/></a>
+
-
</div><!-- end logo -->
+
-
 
+
-
<div id="menu_icon"></div>
+
-
<nav>
+
-
<ul>
+
-
<li><a href="index.html" class="selected">Home</a></li>
+
-
<li><a href="#">About</a></li>
+
-
<li><a href="#">The Team</a></li>
+
-
<li><a href="#">Journal</a></li>
+
-
<li><a href="contact.html">Contact Us</a></li>
+
-
</ul>
+
-
</nav><!-- end navigation menu -->
+
-
 
+
-
<div class="footer clearfix">
+
-
<ul class="social clearfix">
+
-
<li><a href="#" class="fb" data-title="Facebook"></a></li>
+
-
<li><a href="#" class="google" data-title="Google +"></a></li>
+
-
<li><a href="#" class="behance" data-title="Behance"></a></li>
+
-
<!--<li><a href="#" class="twitter" data-title="Twitter"></a></li>
+
-
<li><a href="#" class="dribble" data-title="Dribble"></a></li>-->
+
-
<li><a href="#" class="rss" data-title="RSS"></a></li>
+
-
</ul><!-- end social -->
+
-
 
+
-
<div class="rights">
+
-
<p>Copyright © 2014 magnetic.</p>
+
-
<p>Template by <a href="">Pixelhint.com</a></p>
+
-
</div><!-- end rights -->
+
-
</div ><!-- end footer -->
+
-
</header><!-- end header -->
+
-
 
+
-
<section class="main">
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
                                <img src="https://static.igem.org/mediawiki/2014/3/37/Microbiology.001.jpg" class="media" alt=""/>
+
-
<!--<img src="https://static.igem.org/mediawiki/2014/2/2b/Work1.jpg" class="media" alt=""/>-->
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
</div>
</div>
-
</a>
+
</section>
-
</div>
+
-
 
+
<!-- One -->
-
<div class="work">
+
<section id="one" class="main style2 right dark fullscreen">
-
<a href="inner.html">
+
<div class="content box style2">
-
<img src="https://static.igem.org/mediawiki/2014/8/86/Microbiology.002.jpg" class="media" alt=""/>
+
<header>
-
<div class="caption">
+
<h2>What I Do</h2>
-
<div class="work_title">
+
</header>
-
<h1>culpa qui officia deserunt mollit</h1>
+
<p>Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.
-
</div>
+
Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu,
 +
id varius justo euismod in. Curabitur egestas consectetur magna urna.</p>
</div>
</div>
-
</a>
+
<a href="#two" class="button style2 down anchored">Next</a>
-
</div>
+
</section>
-
 
+
-
<div class="work">
+
<!-- Two -->
-
<a href="inner.html">
+
<section id="two" class="main style2 left dark fullscreen">
-
<img src="https://static.igem.org/mediawiki/2014/2/29/Microbiology.003.jpg" class="media" alt=""/>
+
<div class="content box style2">
-
<div class="caption">
+
<header>
-
<div class="work_title">
+
<h2>Who I Am</h2>
-
<h1>culpa qui officia deserunt mollit</h1>
+
</header>
-
</div>
+
<p>Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.
 +
Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu,
 +
id varius justo euismod in. Curabitur egestas consectetur magna urna.</p>
</div>
</div>
-
</a>
+
<a href="#work" class="button style2 down anchored">Next</a>
-
</div>
+
</section>
 +
 +
<!-- Work -->
 +
<section id="work" class="main style3 primary">
 +
<div class="content container">
 +
<header>
 +
<h2>My Work</h2>
 +
<p>Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.
 +
Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis
 +
arcu, id varius justo euismod in. Curabitur egestas consectetur magna vitae urna.</p>
 +
</header>
 +
 +
<!--
 +
Lightbox Gallery
 +
 +
Powered by poptrox. Full docs here: https://github.com/n33/jquery.poptrox
 +
-->
 +
<div class="container small gallery">
 +
<div class="row flush images">
 +
<div class="6u"><a href="images/fulls/01.jpg" class="image full l"><img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" /></a></div>
 +
<div class="6u"><a href="images/fulls/02.jpg" class="image full r"><img src="images/thumbs/02.jpg" title="Airchitecture II" alt="" /></a></div>
 +
</div>
 +
<div class="row flush images">
 +
<div class="6u"><a href="images/fulls/03.jpg" class="image full l"><img src="images/thumbs/03.jpg" title="Air Lounge" alt="" /></a></div>
 +
<div class="6u"><a href="images/fulls/04.jpg" class="image full r"><img src="images/thumbs/04.jpg" title="Carry on" alt="" /></a></div>
 +
</div>
 +
<div class="row flush images">
 +
<div class="6u"><a href="images/fulls/05.jpg" class="image full l"><img src="images/thumbs/05.jpg" title="The sparkling shell" alt="" /></a></div>
 +
<div class="6u"><a href="images/fulls/06.jpg" class="image full r"><img src="images/thumbs/06.jpg" title="Bent IX" alt="" /></a></div>
 +
</div>
 +
</div>
-
<div class="work">
 
-
<a href="inner.html">
 
-
<img src="https://static.igem.org/mediawiki/2014/8/86/Microbiology.002.jpg" class="media" alt=""/>
 
-
<div class="caption">
 
-
<div class="work_title">
 
-
<h1>culpa qui officia deserunt mollit</h1>
 
-
</div>
 
</div>
</div>
-
</a>
+
</section>
-
</div>
+
 +
<!-- Contact -->
 +
<section id="contact" class="main style3 secondary">
 +
<div class="content container">
 +
<header>
 +
<h2>Say Hello.</h2>
 +
<p>Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.</p>
 +
</header>
 +
<div class="box container small">
 +
 +
<!--
 +
Contact Form
 +
 +
To get this working, place a script on your server to receive the form data, then
 +
point the "action" attribute to it (eg. action="http://mydomain.tld/mail.php").
 +
More on how it all works here: http://www.1stwebdesigner.com/tutorials/custom-php-contact-forms/
 +
-->
 +
<form method="post" action="#">
 +
<div class="row half">
 +
<div class="6u"><input type="text" name="name" placeholder="Name" /></div>
 +
<div class="6u"><input type="text" name="email" placeholder="Email" /></div>
 +
</div>
 +
<div class="row half">
 +
<div class="12u"><textarea name="message" placeholder="Message" rows="6"></textarea></div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
<ul class="actions">
 +
<li><input type="submit" class="button" value="Send Message" /></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</form>
-
<div class="work">
 
-
<a href="inner.html">
 
-
<img src="https://static.igem.org/mediawiki/2014/3/37/Microbiology.001.jpg" class="media" alt=""/>
 
-
<div class="caption">
 
-
<div class="work_title">
 
-
<h1>culpa qui officia deserunt mollit</h1>
 
</div>
</div>
</div>
</div>
-
</a>
+
</section>
-
</div>
+
 +
<!-- Footer -->
 +
<footer id="footer">
 +
 +
<!--
 +
    Social Icons
 +
   
 +
    Use anything from here: http://fortawesome.github.io/Font-Awesome/cheatsheet/)
 +
-->
 +
<ul class="actions">
 +
<li><a href="#" class="fa solo fa-twitter"><span>Twitter</span></a></li>
 +
<li><a href="#" class="fa solo fa-facebook"><span>Facebook</span></a></li>
 +
<li><a href="#" class="fa solo fa-google-plus"><span>Google+</span></a></li>
 +
<li><a href="#" class="fa solo fa-dribbble"><span>Dribbble</span></a></li>
 +
<li><a href="#" class="fa solo fa-pinterest"><span>Pinterest</span></a></li>
 +
<li><a href="#" class="fa solo fa-instagram"><span>Instagram</span></a></li>
 +
</ul>
-
<div class="work">
+
<!-- Menu -->
-
<a href="inner.html">
+
<ul class="menu">
-
<img src="https://static.igem.org/mediawiki/2014/2/29/Microbiology.003.jpg" class="media" alt=""/>
+
<li>&copy; Untitled</li>
-
<div class="caption">
+
<li>Design: <a href="http://html5up.net/">HTML5 UP</a></li>
-
<div class="work_title">
+
</ul>
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
</footer>
-
</div>
+
-
</a>
+
-
</div>
+
-
<div class="work">
+
</body>
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/8/86/Microbiology.002.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/2/29/Microbiology.003.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
 
+
-
<div class="work">
+
-
<a href="inner.html">
+
-
<img src="https://static.igem.org/mediawiki/2014/3/37/Microbiology.001.jpg" class="media" alt=""/>
+
-
<div class="caption">
+
-
<div class="work_title">
+
-
<h1>culpa qui officia deserunt mollit</h1>
+
-
</div>
+
-
</div>
+
-
</a>
+
-
</div>
+
-
</section><!-- end main -->
+
-
+
-
</body>
+
</html>
</html>

Revision as of 21:11, 26 June 2014

Big Picture by HTML5 UP

Hey.

Welcome to Big Picture a responsive site template designed by HTML5 UP, built on skelJS, and released for free under the Creative Commons Attribution 3.0 license.

What I Do

Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, id varius justo euismod in. Curabitur egestas consectetur magna urna.

Next

Who I Am

Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, id varius justo euismod in. Curabitur egestas consectetur magna urna.

Next

My Work

Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum. Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu, id varius justo euismod in. Curabitur egestas consectetur magna vitae urna.

Say Hello.

Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.

Retrieved from "http://2014.igem.org/Team:CU-Boulder/Test"