Jhmitchell (Talk | contribs) |
Jhmitchell (Talk | contribs) |
||
Line 1: | Line 1: | ||
+ | {{Team:William_and_Mary/CSS_RESET}} | ||
+ | |||
<html lang="en"> | <html lang="en"> | ||
<cfheader name="X-XSS-Protection" value="1"> | <cfheader name="X-XSS-Protection" value="1"> | ||
<head> | <head> | ||
<meta charset="utf-8" /> | <meta charset="utf-8" /> | ||
− | <link rel="icon" type="image/png" href=" | + | <link rel="icon" type="image/png" href="assets/img/favicon.ico"> |
− | + | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
− | <title> | + | <title>William & Mary</title> |
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> | <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> | ||
− | <link href="https:// | + | <link href="https://2016.igem.org/Team:William_and_Mary/bootstrap?action=raw&ctype=text/css" rel="stylesheet" /> |
− | <link href="https:// | + | <link href="https://2016.igem.org/Team:William_and_Mary/fixbootstrap?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
− | <link href="https:// | + | <link href="https://2016.igem.org/Team:William_and_Mary/rubik?action=raw&ctype=text/css" rel="stylesheet"/> |
− | <link href="https:// | + | <link href="https://2016.igem.org/Team:William_and_Mary/demo?action=raw&ctype=text/css" rel="stylesheet"/> |
− | <link | + | <link href="https://2016.igem.org/Team:William_and_Mary/jsquerybxslidercss?action=raw&ctype=text/css" rel="stylesheet"/> |
− | + | ||
<!-- Fonts and icons --> | <!-- Fonts and icons --> | ||
− | <link href=" | + | <link href="https://2016.igem.org/Team:William_and_Mary/font-awesome?action=raw&ctype=text/css" rel="stylesheet"/> |
− | <link href=' | + | <link href='https://2016.igem.org/Team:William_and_Mary/droid-serif?action=raw&ctype=text/css' rel='stylesheet' type='text/css'/> |
− | <link href="https:// | + | <link href="https://2016.igem.org/Team:William_and_Mary/pe-icon-7stroke?action=raw&ctype=text/css" rel="stylesheet"/> |
− | <link href="https:// | + | <link href="https://2016.igem.org/Team:William_and_Mary/Rubik-Fonts?action=raw&ctype=text/css" rel="stylesheet" /> |
<!-- the wiki settings in the section immediately below are from UC San Diego 2015 --> | <!-- the wiki settings in the section immediately below are from UC San Diego 2015 --> | ||
− | + | ||
+ | <style type="text/css"> | ||
/* WIKI SETTINGS*/ | /* WIKI SETTINGS*/ | ||
Line 48: | Line 50: | ||
margin-left: 0px; | margin-left: 0px; | ||
} | } | ||
− | .centerImage | + | .centerImage |
− | { | + | { |
− | text-align:center; | + | text-align:center; |
− | display:block; | + | display:block; |
− | } | + | } |
− | .wraptocenter { | + | .wraptocenter { |
− | + | display: table-cell; | |
− | + | text-align: center; | |
− | + | vertical-align: middle; | |
− | + | width: 200px; | |
− | + | height: 200px; | |
− | + | background-color: #999; | |
− | } | + | } |
− | .wraptocenter * { | + | .wraptocenter * { |
− | + | vertical-align: middle; | |
− | } | + | } |
− | </style> | + | </style> |
</head> | </head> | ||
<body class="landing-page"> | <body class="landing-page"> | ||
− | <nav class="navbar navbar-default navbar-transparent navbar-fixed-top | + | <!-- |
+ | <div class="loading "> | ||
+ | <div class="loading-container"> | ||
+ | <p>loading...</p> | ||
+ | <img class="loader" src="assets/img/rubik.svg"/> | ||
+ | </div> | ||
+ | </div> | ||
+ | --> | ||
+ | <nav class="navbar navbar-default navbar-transparent navbar-fixed-top" role="navigation"> | ||
<!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"--> | <!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"--> | ||
<div class="container"> | <div class="container"> | ||
Line 78: | Line 88: | ||
<span class="icon-bar bar3"></span> | <span class="icon-bar bar3"></span> | ||
</button> | </button> | ||
− | <a | + | <a class="navbar-brand"> |
+ | William & Mary 2016 | ||
+ | </a> | ||
</div> | </div> | ||
<div class="collapse navbar-collapse"> | <div class="collapse navbar-collapse"> | ||
<ul class="nav navbar-nav navbar-right navbar-uppercase"> | <ul class="nav navbar-nav navbar-right navbar-uppercase"> | ||
− | < | + | <li class="social-links"> |
− | + | <a href="https://www.facebook.com/WMiGEM16/?fref=ts"> | |
+ | <i class="fa fa-facebook"></i> | ||
+ | </a> | ||
+ | <a href="https://twitter.com/wmigem"> | ||
+ | <i class="fa fa-twitter"></i> | ||
+ | </a> | ||
+ | <!-- | ||
+ | <a href="#"> | ||
+ | <i class="fa fa-instagram"></i> | ||
+ | </a> | ||
+ | --> | ||
+ | </li> | ||
<li> | <li> | ||
− | <a href=" | + | <a href="template.html"> |
− | + | Overview | |
</a> | </a> | ||
</li> | </li> | ||
<li> | <li> | ||
− | <a href=" | + | <a href="description.html"> |
− | + | Description | |
</a> | </a> | ||
</li> | </li> | ||
<li> | <li> | ||
− | <a href=" | + | <a href="" data-scroll="true" data-id="#projects"> |
Parts | Parts | ||
</a> | </a> | ||
</li> | </li> | ||
<li> | <li> | ||
− | <a href=" | + | <a href="" data-scroll="true" data-id="#clients"> |
Results | Results | ||
</a> | </a> | ||
</li> | </li> | ||
<li> | <li> | ||
− | <a href=" | + | <a href="" data-scroll="true" data-id="#team"> |
Modeling | Modeling | ||
</a> | </a> | ||
</li> | </li> | ||
<li> | <li> | ||
− | <a href=" | + | <a href="" data-scroll="true" data-id="#numbers"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Collaboration | Collaboration | ||
</a> | </a> | ||
</li> | </li> | ||
<li> | <li> | ||
− | <a href=" | + | <a href="" data-scroll="true" data-id="#contact"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Team | Team | ||
</a> | </a> | ||
Line 156: | Line 154: | ||
<div class="wrapper"> | <div class="wrapper"> | ||
− | + | <!--PRESENTATION PAGE INFORMATION BEGINS HERE--> | |
− | + | ||
− | + | ||
− | + | <div class="section section-header" id="overview"> | |
− | + | <div class="parallax pattern-image filter filter-gradient-purple" data-color="gold"> | |
− | + | <img alt="..." src="https://static.igem.org/mediawiki/2016/c/ce/T--William_and_Mary--rubik-background.jpg"> | |
− | + | <div class="container"> | |
− | + | <div class="content"> | |
− | + | <p class="h1WM" style="WMSlim-Joe">Circuit Control</p> | |
− | + | <div class="separator-container"> | |
+ | <div class="separator line-separator">✻</div> | ||
+ | </div> | ||
+ | <h5>creating a toolbox allowing for precision circuit control</h5> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <a href="" data-scroll="true" data-id="#description" class="scroll-arrow hidden-xs hidden-sm"> | ||
+ | <i class="fa fa-angle-down"></i> | ||
+ | </a> | ||
+ | </div> | ||
− | + | <div class="section section-we-are-1" id="description"> | |
− | + | <div class="text-area"> | |
− | + | <div class="container"> | |
− | + | <div class="row"> | |
− | + | <div class="title"> | |
− | + | <h2>Project "abstract" here</h2> | |
− | + | <div class="separator-container"> | |
− | + | <div class="separator line-separator">✻</div> | |
− | + | </div> | |
− | + | <p class="large"> | |
− | + | What have we done this year, + pictures that can be scrolled through | |
− | + | in the 'carousel' below. | |
− | + | </p> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
+ | <div id="carousel"> | ||
+ | <div id="section-we-are-1" class="carousel slide add-animation-stopped-1" data-interval="20000"> | ||
+ | <!-- Wrapper for slides --> | ||
+ | <div class="carousel-inner pattern-image animate"> | ||
+ | <div class="item active"> | ||
+ | <img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg"> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Controls --> | ||
+ | <a class="left carousel-control" href="#section-we-are-1" data-slide="prev"><span class="fa fa-angle-left hidden-md hidden-lg"></span></a> | ||
+ | <a class="right carousel-control" href="#section-we-are-1" data-slide="next"><span class="fa fa-angle-right hidden-ms hidden-lg"></span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <!-- Section "What We do" example 4: Big Title & 4 columns icons --> | |
− | < | + | <div class="section section-we-do-2" id="workflow2"> |
− | + | <div class="container"> | |
− | + | <div class="row"> | |
− | + | <div class="title"> | |
− | + | <h5 class="text-gray">Big Title & 4 Columns Icons</h5> | |
− | + | <h2>filler title</h2> | |
− | + | <div class="separator-container"> | |
− | + | <div class="separator line-separator">✻</div> | |
− | + | </div> | |
− | + | <p> | |
− | + | I don't know what can go here, something cool I guess | |
− | + | </p> | |
− | + | </div> | |
− | + | <div class="col-md-3"> | |
− | + | <div class="card"> | |
− | + | <div class="icon"> | |
− | + | <i class="pe-7s-piggy"></i> | |
− | + | </div> | |
− | + | <h3>section</h3> | |
− | + | <p>text below that section</p> | |
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-md-3"> | ||
+ | <div class="card"> | ||
+ | <div class="icon"> | ||
+ | <i class="pe-7s-headphones"></i> | ||
+ | </div> | ||
+ | <h3>ugh</h3> | ||
+ | <p>so much filler text wow</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-md-3"> | ||
+ | <div class="card"> | ||
+ | <div class="icon"> | ||
+ | <i class="pe-7s-pen"></i> | ||
+ | </div> | ||
+ | <h3>kvndkvkldsv</h3> | ||
+ | <p>ipsum lorem dolor</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-md-3"> | ||
+ | <div class="card"> | ||
+ | <div class="icon"> | ||
+ | <i class="pe-7s-plugin"></i> | ||
+ | </div> | ||
+ | <h3>:(</h3> | ||
+ | <p>:-) :-) :-)</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- End Section "What We do" example 3: Small Title & 3 columns icons --> | ||
− | + | <!-- Section "Our Projects" example 5: Single Line Photos --> | |
− | + | <div class="section section-we-made-2 section-with-hover" id="projects2"> | |
− | + | <div class="projects" style="overflow: hidden;"> | |
− | + | <div class="text-area"> | |
− | + | <div class="title"> | |
− | + | <h5 class="text-gray">Example No.5</h5> | |
− | < | + | <h2>Projects section</h2> |
− | < | + | <div class="separator-container"> |
− | </ | + | <div class="separator line-separator">✻</div> |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="info"> | |
− | + | <p class="text-center text-gray">more project stuff yay</p> | |
− | + | </div> | |
− | + | <div class="row scroller" style="transform: translateX(-597px);"> | |
− | + | <div class="col-lg-3 col-md-6 col-sm-6"> | |
− | + | <div class="project"> | |
− | + | <img alt="..." src="assets/img/builder/projects/project.jpg"> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="col-lg-3 col-md-6 col-sm-6"> | |
− | + | <div class="project"> | |
− | + | <img alt="..." src="assets/img/builder/projects/project.jpg"> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="col-lg-3 col-md-6 col-sm-6"> | |
− | + | <div class="project"> | |
− | + | <img alt="..." src="assets/img/builder/projects/project.jpg"> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="col-lg-3 col-md-6 col-sm-6"> | |
− | + | <div class="project"> | |
− | + | <img alt="..." src="assets/img/builder/projects/project.jpg"> | |
− | + | <a class="over-area color-black" href="#" target="_blank"> | |
− | + | <div class="content"> | |
− | + | <h4>this is</h4> | |
− | + | <p>a really cool website I think</p> | |
− | + | </div> | |
− | + | </a> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!-- End Section "Our Projects" example 5: Single Line Photos --> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <!-- Section "Team" example 1: Title & Full Image --> | |
− | + | <div class="section section-team-1" id="team1"> | |
− | + | <div class="container"> | |
− | + | <div class="text-area"> | |
− | < | + | <div class="title"> |
− | + | <h2>Meet the Team</h2> | |
− | + | <div class="separator-container"> | |
− | + | <div class="separator line-separator">✻</div> | |
− | + | </div> | |
− | + | <p>insert text here about our team, image will go below like this one I stole :-)</p> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="full-image gradient-image"> | |
− | + | <img alt="..." src="assets/img/team/team1.jpg"> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!-- End Section "Team" example 1: Description & Full Image --> | |
− | + | ||
− | + | <!-- BEGIN FOOTER--> | |
− | + | <footer class="footer footer-big footer-color-black" data-color="black"> | |
− | + | <div class="container"> | |
− | + | <div class="row"> | |
− | + | <div class="col-md-2 col-sm-3"> | |
− | + | <div class="info animation-1 add-animation animate"> | |
− | + | <h5 class="title">Company</h5> | |
− | + | <nav> | |
− | + | <ul> | |
− | + | <li> | |
− | + | <a href="#" data-scroll="true" data-id="#overview"> | |
− | + | Top | |
− | + | </a> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a href="#"> | |
− | + | something | |
− | + | </a> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </nav> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="col-md-3 col-md-offset-1 col-sm-3"> | |
− | + | <div class="info animation-2 add-animation animate"> | |
− | + | <h5 class="title"> category</h5> | |
− | + | <nav> | |
− | + | <ul> | |
− | + | <li> | |
− | + | <a href="#"> | |
− | + | Contact Us | |
− | + | </a> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </nav> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="col-md-3 col-sm-3"> | |
− | + | <div class="info animation-3 add-animation animate"> | |
− | + | <h5 class="title add-animation animate">Latest News</h5> | |
− | + | <nav> | |
− | + | <ul> | |
− | + | <li> | |
− | + | <a href="#"> | |
− | + | <i class="fa fa-twitter"></i> <b>Experiment</b> | |
− | + | Curious what our project is about? Check out this short video... | |
− | + | <hr class="hr-small"> | |
− | + | </a> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a href="#"> | |
− | + | <i class="fa fa-twitter"></i> | |
− | + | Looking to collaborate this year? Sign up for our <b>pen pal</b> program... | |
− | + | </a> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </nav> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="col-md-2 col-md-offset-1 col-sm-3"> | |
− | + | <div class="info animation-4 add-animation animate"> | |
− | + | <h5 class="title add-animation animate">Follow us on</h5> | |
− | + | <nav> | |
− | + | <ul> | |
− | + | <li> | |
− | + | <a href="#" class="btn btn-social btn-facebook btn-simple"> | |
− | + | <i class="fa fa-facebook-square"></i> Facebook | |
− | + | </a> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a href="#" class="btn btn-social btn-twitter btn-simple"> | |
− | + | <i class="fa fa-twitter"></i> Twitter | |
− | + | </a> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </nav> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <hr> | |
− | + | <div class="copyright"> | |
− | + | 2016 William and Mary iGEM | |
− | + | </div> | |
− | + | </div> | |
− | + | </footer> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | </div> | ||
− | + | <!-- END OF WRAPPER DIV--> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
<div class="body-layer"></div> | <div class="body-layer"></div> | ||
</body> | </body> | ||
Line 595: | Line 427: | ||
− | <script type="text/javascript" src="https:// | + | <!-- core js files --> |
− | action=raw& | + | <script src="https://2016.igem.org/Team:William_and_Mary/jquery1-12?action=raw&" type="text/javascript"></script> |
− | + | <script src="https://2016.igem.org/Team:William_and_Mary/bootstrapjs?action=raw&" type="text/javascript"></script> | |
− | <script type="text/javascript" src="https:// | + | <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/bootstrapswitch?action=raw&"></script> |
− | action=raw& | + | <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/jquerybxsliderjs?action=raw&"></script> |
− | + | ||
− | <script type="text/javascript" src=" | + | <!-- file for adding vertical points where we activate the elements animation --> |
− | + | <script type="text/javascript" src="assets/js/jquery.waypoints.min.js"></script> | |
− | <script type="text/javascript" src=" | + | <!-- js library for devices recognition --> |
+ | <script type="text/javascript" src="assets/js/modernizr.js"></script> | ||
− | <script type="text/javascript" src="https:// | + | <!-- script for google maps --> |
− | action=raw& | + | <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> |
+ | |||
+ | <!-- file where we handle all the script from the Rubik page --> | ||
+ | <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/rubikjs?action=raw&"></script> | ||
+ | |||
</html> | </html> |
Revision as of 20:29, 4 October 2016
Circuit Control
What have we done this year, + pictures that can be scrolled through
in the 'carousel' below.
I don't know what can go here, something cool I guess
text below that section so much filler text wow ipsum lorem dolor :-) :-) :-) insert text here about our team, image will go below like this one I stole :-)creating a toolbox allowing for precision circuit control
Project "abstract" here
Big Title & 4 Columns Icons
filler title
section
ugh
kvndkvkldsv
:(
Meet the Team