Difference between revisions of "Team:William and Mary"

Line 1: Line 1:
 
{{Team:William_and_Mary/CSS_RESET}}
 
{{Team:William_and_Mary/CSS_RESET}}
−
<!--website by John Mitchell, iGEM 2016
 
−
Bootstrap template by creative-tim-->
 
  
 
<html lang="en">
 
<html lang="en">
 +
<cfheader name="X-XSS-Protection" value="1">
 
     <head>
 
     <head>
 
         <meta charset="utf-8" />
 
         <meta charset="utf-8" />
Line 22: Line 21:
 
         <link href="https://2016.igem.org/Team:William_and_Mary/Rubik-Fonts?action=raw&amp;ctype=text/css" rel="stylesheet" />
 
         <link href="https://2016.igem.org/Team:William_and_Mary/Rubik-Fonts?action=raw&amp;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 -->
  
−
    </head>
+
<style type="text/css">
−
+
−
<style type="text/css">
+
 
/* WIKI SETTINGS*/
 
/* WIKI SETTINGS*/
 
 
Line 70: Line 68:
 
}
 
}
 
</style>
 
</style>
−
+
 
−
+
    </head>
 
     <body class="landing-page">
 
     <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">
 
         <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="container">
 
                 <div class="navbar-header">
 
                 <div class="navbar-header">
Line 83: Line 90:
 
                     </button>
 
                     </button>
 
                     <a class="navbar-brand">
 
                     <a class="navbar-brand">
−
                     William & Mary 2016
+
                     William & Mary
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
Line 107: Line 114:
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2016.igem.org/Team:William_and_Mary">  
+
                             <a href="https://2016.igem.org/Team:William_and_Mary/description">  
 
                             Description
 
                             Description
 
                             </a>
 
                             </a>
Line 148: Line 155:
 
         <div class="wrapper">
 
         <div class="wrapper">
 
          
 
          
−
<!--BEGIN EXPERIMENTAL HEADER-->
+
<!--PRESENTATION PAGE INFORMATION BEGINS HERE-->
−
<div class="section section-header-newpage" id="header2">
+
 
−
<div class="parallax2 pattern-image filter filter-gradient-purple" data-color="gold">
+
<div class="section section-header" id="overview">
−
<img alt="..." src="assets/img/rubik_background_none.jpg">
+
<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="container">
 
<div class="content">
 
<div class="content">
−
<h2>Project Decription</h2>
+
<p class="section-header h1WM" style="font-family:Slim-Joe; margin: 30px 0 15px;">Circuit Control</p>
−
<!--<h5>creating a toolbox allowing for precision circuit control</h5>-->
+
<div class="separator-container">
 +
<div class="separator line-separator">✻</div>
 +
</div>
 +
<h5>creating a toolbox allowing for precision circuit control</h5>
 
</div>
 
</div>
 
</div>
 
</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>
−
+
 
−
+
      <div class="section section-we-are-2" id="description">
−
<div class="section section-we-are-2">
+
          <div class="text-area">
−
<div class="text-area">
+
              <div class="container">
−
<div class="container">
+
                  <div class="row">
−
<div class="row">
+
                      <div class="col-md-4">
−
<div class="col-md-4">
+
                          <div class="title add-animation-stopped">
−
<div class="title add-animation-stopped">
+
                              <p class="h2WM">Project Description</p>
−
<h2>What is this?</h2>
+
                              <div class="separator-container">
 +
                                  <!--div class="separator line-separator">✻</div-->
 +
                              </div>
 +
                          </div>
 +
                      </div>
 +
                      <div class="col-md-7 col-md-offset-1">
 +
                          <div class="description add-animation-stopped animation-1">
 +
                              <p class="large">
 +
  Here we will put the description of our project.  This is only
 +
  a short summary - the whole overview will go on the description
 +
  page.  We will link to that page here and at the top in the navbar.
 +
  </p>
 +
  <p class="large">
 +
  More paragraphs can be made here, if necessary.
 +
  </p>
 +
                          </div>
 +
                      </div>
 +
                  </div>
 +
              </div>
 +
          </div>
 +
          <div class="container">
 +
              <div class="row">
 +
                  <div class="col-md-10 col-md-offset-1">
 +
                      <div class="row">
 +
                          <div class="col-md-4">
 +
                              <div class="card add-animation-stopped animation-1">
 +
                                  <img alt="..." src="https://static.igem.org/mediawiki/2016/6/67/T--William_and_Mary--Carouseldefault.jpeg" />
 +
                              </div>
 +
                          </div>
 +
                          <div class="col-md-4">
 +
                              <div class="card add-animation-stopped animation-2">
 +
                                  <img alt="..." src="https://static.igem.org/mediawiki/2016/6/67/T--William_and_Mary--Carouseldefault.jpeg"/>
 +
                              </div>
 +
                          </div>
 +
                          <div class="col-md-4">
 +
                              <div class="card add-animation-stopped animation-3">
 +
                                  <img alt="..." src="https://static.igem.org/mediawiki/2016/6/67/T--William_and_Mary--Carouseldefault.jpeg"/>
 +
                              </div>
 +
                          </div>
 +
                      </div>
 +
                  </div>
 +
              </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">
 +
<p class='h2WM'>
 +
section 2 title
 +
</p>
 +
<div class="separator-container">
 +
<div class="separator line-separator">✻</div>
 +
</div>
 +
<p class='large' style='text-align: center !important;'>
 +
Here is where 4 links can go to other pages, or a description of 4 aspects of the project.
 +
</p>
 +
</div>
 +
<div class="col-md-6">
 +
<div class="card">
 +
<div class="icon">
 +
<i class="pe-7s-piggy"></i>
 
</div>
 
</div>
 +
<h3>Thing 1</h3>
 +
<p class='large' style='text-align: center !important;'>
 +
brief description
 +
</p>
 
</div>
 
</div>
−
<div class="col-md-7 col-md-offset-1">
+
</div>
−
<div class="description add-animation-stopped animation-1">
+
<div class="col-md-6">
−
<p style="color:#A9A9A9;">
+
<div class="card">
−
  I wish I knew.  This is a project description page.  It wil serve as the basic section block
+
<div class="icon">
−
  for any of our additional imformation pages - those aside from the project overview flowing
+
<i class="pe-7s-headphones"></i>
−
  presentation page.  The flowing format is automatically created - only the text in the html
+
−
  needs to be edited.  This block of text here can be used as a basic 'abstract' for this page.
+
−
  The text-color used in this block is specified inline for ease of access.
+
−
</p>
+
 
</div>
 
</div>
 +
<h3>Thing 2</h3>
 +
<p class='large' style='text-align: center !important;'>
 +
brief description
 +
</p>
 
</div>
 
</div>
−
<div class="description">
+
</div>
−
<p style="padding-left:70px;">
+
</div>
−
Hello, this is the description.  This is just a test to see what this text would look like center-
+
<div class="row">
−
column.  It looks pretty nice, so I think I'm going to keep it like this for now.  To keep aligned
+
<div class="col-md-6">
−
with the header, I have inserted a left-side padding of 70px.  This was a rough estimate and can be
+
<div class="card">
−
changed.  Here we can describe our project in more detail than on the front page.  Right now, I'm
+
<div class="icon">
−
just populating the page with text.
+
<i class="pe-7s-pen"></i>
−
</P>
+
</div>
 +
<h3>Thing 3</h3>
 +
<p class='large' style='text-align: center !important;'>
 +
brief description
 +
</p>
 +
</div>
 +
</div>
 +
<div class="col-md-6">
 +
<div class="card">
 +
<div class="icon">
 +
<i class="pe-7s-plugin"></i>
 +
</div>
 +
<h3>Thing 4</h3>
 +
<p class='large' style='text-align: center !important;'>
 +
brief description
 +
</p>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<!--
+
</div>
−
<div id="carousel">
+
<!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
−
<div id="section-we-are-1" class="carousel slide add-animation-stopped-1" data-interval="20000">
+
 
−
<div class="carousel-inner pattern-image animate">
+
<!-- Section "Our Projects" example 5: Single Line Photos -->
−
<div class="item  active">
+
<div class="section section-we-made-2 section-with-hover" id="projects2">
−
<img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg">
+
<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 class="item">
+
</div>
−
<img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg">
+
</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>
−
<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>
−
-->
 
 
</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="https://static.igem.org/mediawiki/2016/4/4e/T--William_and_Mary--team3.jpeg">
 +
</div>
 +
</div>
 +
<!-- End Section "Team" example 1: Description & Full Image -->
 +
 
<!-- BEGIN FOOTER-->
 
<!-- BEGIN FOOTER-->
−
<footer class="footer footer-small footer-color-black" data-color="black">
+
<footer class="footer footer-big footer-color-black" data-color="black">
 
<div class="container">
 
<div class="container">
 
<div class="row">
 
<div class="row">
Line 304: Line 451:
 
<!-- END OF WRAPPER DIV-->
 
<!-- END OF WRAPPER DIV-->
  
−
       
 
 
         <div class="body-layer"></div>
 
         <div class="body-layer"></div>
 
     </body>
 
     </body>

Revision as of 02:59, 9 October 2016

...

Circuit Control

✻
creating a toolbox allowing for precision circuit control

Project Description

Here we will put the description of our project. This is only a short summary - the whole overview will go on the description page. We will link to that page here and at the top in the navbar.

More paragraphs can be made here, if necessary.

...
...
...

section 2 title

✻

Here is where 4 links can go to other pages, or a description of 4 aspects of the project.

Thing 1

brief description

Thing 2

brief description

Thing 3

brief description

Thing 4

brief description

Example No.5

Projects section

✻

more project stuff yay

...
...
...
...

this is

a really cool website I think

Meet the Team

✻

insert text here about our team, image will go below like this one I stole :-)

...