Jhmitchell (Talk | contribs) |
Jhmitchell (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | {{William_and_Mary}} | + | {{Team:William_and_Mary/CSS_RESET}} |
− | + | ||
− | <head> | + | <html lang="en"> |
− | + | <cfheader name="X-XSS-Protection" value="1"> | |
− | </ | + | <head> |
+ | <meta charset="utf-8" /> | ||
+ | <link rel="icon" type="image/png" href="assets/img/favicon.ico"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
+ | <title>William & Mary</title> | ||
+ | <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> | ||
+ | <link href="https://2016.igem.org/Team:William_and_Mary/bootstrap?action=raw&ctype=text/css" rel="stylesheet" /> | ||
+ | <link href="https://2016.igem.org/Team:William_and_Mary/fixbootstrap?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> | ||
+ | <link href="https://2016.igem.org/Team:William_and_Mary/rubik?action=raw&ctype=text/css" rel="stylesheet"/> | ||
+ | <link href="https://2016.igem.org/Team:William_and_Mary/demo?action=raw&ctype=text/css" rel="stylesheet"/> | ||
+ | <link href="https://2016.igem.org/Team:William_and_Mary/jsquerybxslidercss?action=raw&ctype=text/css" rel="stylesheet"/> | ||
+ | |||
+ | <!-- Fonts and icons --> | ||
+ | <link href="https://2016.igem.org/Team:William_and_Mary/font-awesome?action=raw&ctype=text/css" rel="stylesheet"/> | ||
+ | <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://2016.igem.org/Team:William_and_Mary/pe-icon-7stroke?action=raw&ctype=text/css" rel="stylesheet"/> | ||
+ | <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 --> | ||
+ | <!-- fixed by J-Mitch of W&M --> | ||
− | < | + | <style type="text/css"> |
− | + | /* WIKI SETTINGS*/ | |
− | + | ||
− | + | /* Hide first heading */ | |
− | + | .firstHeading { | |
− | + | display: none; | |
+ | } | ||
+ | /* Visited hyperlinks */ | ||
+ | a:visited{ | ||
+ | color: #393d31; | ||
+ | } | ||
+ | /*-- Remove borders, float content left and remove padding/margin */ | ||
+ | #globalWrapper, #content{ | ||
+ | background-color: transparent; | ||
+ | border: none; | ||
+ | float: center; | ||
+ | width: 100.15%; /* found to be the magic number (: */ | ||
+ | margin-left: -3px; | ||
+ | margin-top: -8px; | ||
+ | padding: auto; | ||
+ | } | ||
− | + | /*left align Black Menu Bar */ | |
− | + | #top_menu_inside { | |
− | </ | + | margin-left: 0px; |
+ | } | ||
+ | .centerImage | ||
+ | { | ||
+ | text-align:center; | ||
+ | display:block; | ||
+ | } | ||
+ | .wraptocenter { | ||
+ | display: table-cell; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | background-color: #999; | ||
+ | } | ||
+ | .wraptocenter * { | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | </style> | ||
− | <div class=" | + | </head> |
− | < | + | <body class="landing-page"> |
− | < | + | <!-- |
+ | <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"--> | ||
+ | <div class="container"> | ||
+ | <div class="navbar-header"> | ||
+ | <button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example"> | ||
+ | <span class="sr-only">Toggle navigation</span> | ||
+ | <span class="icon-bar bar1"></span> | ||
+ | <span class="icon-bar bar2"></span> | ||
+ | <span class="icon-bar bar3"></span> | ||
+ | </button> | ||
+ | <a class="navbar-brand"> | ||
+ | William & Mary | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="collapse navbar-collapse"> | ||
+ | <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> | ||
+ | <a href="template.html"> | ||
+ | Overview | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="description.html"> | ||
+ | Description | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="" data-scroll="true" data-id="#projects"> | ||
+ | Parts | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="" data-scroll="true" data-id="#clients"> | ||
+ | Results | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="" data-scroll="true" data-id="#team"> | ||
+ | Modeling | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="" data-scroll="true" data-id="#numbers"> | ||
+ | Collaboration | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="" data-scroll="true" data-id="#contact"> | ||
+ | Team | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="wrapper"> | ||
+ | |||
+ | <!--PRESENTATION PAGE INFORMATION BEGINS HERE--> | ||
− | </div> | + | <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="section-header h1WM" style="font-family:Slim-Joe; margin: 30px 0 15px;">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=" | + | <div class="section section-we-are-1" id="description"> |
− | < | + | <div class="text-area"> |
− | <p> | + | <div class="container"> |
− | < | + | <div class="row"> |
− | < | + | <div class="title"> |
− | < | + | <p class="h2WM">Project "abstract" here</p> |
− | < | + | <div class="separator-container"> |
− | </ | + | <div class="separator line-separator">✻</div> |
− | </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> | ||
− | <div class=" | + | <!-- Section "What We do" example 4: Big Title & 4 columns icons --> |
− | <div class=" | + | <div class="section section-we-do-2" id="workflow2"> |
− | <h5> | + | <div class="container"> |
− | <p> | + | <div class="row"> |
− | <p> | + | <div class="title"> |
− | </div> | + | <h5 class="text-gray">Big Title & 4 Columns Icons</h5> |
− | </div> | + | <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 --> | ||
− | <div class=" | + | <!-- 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 class=" | + | </div> |
− | <h5> | + | </div> |
− | < | + | </div> |
− | < | + | <div class="info"> |
− | + | <p class="text-center text-gray">more project stuff yay</p> | |
− | </div> | + | </div> |
− | + | <div class="row scroller" style="transform: translateX(-597px);"> | |
− | + | <div class="col-lg-3 col-md-6 col-sm-6"> | |
− | <div class=" | + | <div class="project"> |
− | + | <img alt="..." src="assets/img/builder/projects/project.jpg"> | |
− | <p> | + | </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> | |
− | + | <div class="col-lg-3 col-md-6 col-sm-6"> | |
− | <div class=" | + | <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> | |
− | <div class=" | + | <!-- End Section "Our Projects" example 5: Single Line Photos --> |
− | < | + | |
− | <p> | + | |
− | + | ||
− | + | ||
− | + | ||
− | <div | + | |
− | + | ||
− | </div> | + | |
− | + | ||
− | </div> | + | |
+ | <!-- 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> | ||
+ | </body> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- core js files --> | ||
+ | <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://2016.igem.org/Team:William_and_Mary/bootstrapswitch?action=raw&"></script> | ||
+ | <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/jquerybxsliderjs?action=raw&"></script> | ||
+ | <!-- file for adding vertical points where we activate the elements animation --> | ||
+ | <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/waypoints?action=raw&"></script> | ||
+ | <!-- js library for devices recognition --> | ||
+ | <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/modernizr?action=raw&"></script> | ||
+ | <!-- script for google maps --> | ||
+ | <!--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&ctype=text/javascript"></script> | ||
+ | |||
</html> | </html> |
Revision as of 01:24, 5 October 2016
Circuit Control Project "abstract" here
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
Big Title & 4 Columns Icons
filler title
section
ugh
kvndkvkldsv
:(
Meet the Team