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 21: Line 22:
 
         <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 -->
+
  
−
<style type="text/css">
+
    </head>
 +
 +
<style type="text/css">
 
/* WIKI SETTINGS*/
 
/* WIKI SETTINGS*/
 
 
Line 68: Line 70:
 
}
 
}
 
</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 90: Line 83:
 
                     </button>
 
                     </button>
 
                     <a class="navbar-brand">
 
                     <a class="navbar-brand">
−
                     William & Mary
+
                     William & Mary 2016
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
Line 114: Line 107:
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2016.igem.org/Team:William_and_Mary/description">  
+
                             <a href="https://2016.igem.org/Team:William_and_Mary">  
 
                             Description
 
                             Description
 
                             </a>
 
                             </a>
Line 155: Line 148:
 
         <div class="wrapper">
 
         <div class="wrapper">
 
          
 
          
−
<!--PRESENTATION PAGE INFORMATION BEGINS HERE-->
+
<!--BEGIN EXPERIMENTAL HEADER-->
−
 
+
<div class="section section-header-newpage" id="header2">
−
<div class="section section-header" id="overview">
+
<div class="parallax2 pattern-image filter filter-gradient-purple" data-color="gold">
−
<div class="parallax pattern-image filter filter-gradient-purple" data-color="gold">
+
<img alt="..." src="assets/img/rubik_background_none.jpg">
−
<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">
−
<p class="section-header h1WM" style="font-family:Slim-Joe; margin: 30px 0 15px;">Circuit Control</p>
+
<h2>Project Decription</h2>
−
<div class="separator-container">
+
<!--<h5>creating a toolbox allowing for precision circuit control</h5>-->
−
<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="text-area">
+
<div class="section section-we-are-2">
−
              <div class="container">
+
<div class="text-area">
−
                  <div class="row">
+
<div class="container">
−
                      <div class="col-md-4">
+
<div class="row">
−
                          <div class="title add-animation-stopped">
+
<div class="col-md-4">
−
                              <p class="h2WM">Project Description</p>
+
<div class="title add-animation-stopped">
−
                              <div class="separator-container">
+
<h2>What is this?</h2>
−
                                  <!--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>
+
<div class="col-md-7 col-md-offset-1">
−
<div class="col-md-6">
+
<div class="description add-animation-stopped animation-1">
−
<div class="card">
+
<p style="color:#A9A9A9;">
−
<div class="icon">
+
  I wish I knew.  This is a project description page.  It wil serve as the basic section block
−
<i class="pe-7s-headphones"></i>
+
  for any of our additional imformation pages - those aside from the project overview flowing
 +
  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>
+
<div class="description">
−
</div>
+
<p style="padding-left:70px;">
−
<div class="row">
+
Hello, this is the description.  This is just a test to see what this text would look like center-
−
<div class="col-md-6">
+
column.  It looks pretty nice, so I think I'm going to keep it like this for now.  To keep aligned
−
<div class="card">
+
with the header, I have inserted a left-side padding of 70px.  This was a rough estimate and can be
−
<div class="icon">
+
changed.  Here we can describe our project in more detail than on the front page.  Right now, I'm
−
<i class="pe-7s-pen"></i>
+
just populating the page with text.
−
</div>
+
</P>
−
<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>
+
<!--
−
<!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
+
<div id="carousel">
−
 
+
<div id="section-we-are-1" class="carousel slide add-animation-stopped-1" data-interval="20000">
−
<!-- Section "Our Projects" example 5: Single Line Photos -->
+
<div class="carousel-inner pattern-image animate">
−
<div class="section section-we-made-2 section-with-hover" id="projects2">
+
<div class="item  active">
−
<div class="projects" style="overflow: hidden;">
+
<img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg">
−
<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="item">
−
</div>
+
<img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg">
−
<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-big footer-color-black" data-color="black">
 
<footer class="footer footer-big footer-color-black" data-color="black">
Line 450: Line 303:
 
          
 
          
 
<!-- END OF WRAPPER DIV-->
 
<!-- END OF WRAPPER DIV-->
 +
        <!--  Here are the examples of the content for each project that is viewed inside of the page. You can create how many projects you want if you set the specific #id     
 +
        -->
 +
       
 +
        <div class="project-content" id="project_1">
 +
          <div>
 +
            <div class="project-details">
 +
              <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 +
              <div class="container">
 +
                <div class="project-title">
 +
                    <h5>Project Content<span>.</span></h5>
 +
                    <h2>Example No.1</h2>
 +
                    <div class="separator-container">
 +
                      <div class="separator line-separator">✻</div>
 +
                    </div>
 +
                </div>
 +
                <div class="row">
 +
                  <div class="col-md-4">
 +
                    <div class="project-text">
 +
                      <p><span>Detail</span>1</p>
 +
                      <p><span>Detail</span>2</p>
 +
                      <p><span>Detail</span>3</p>
 +
                      <p><span>Detail</span>4</p>
 +
                      <br>
 +
                      <p>Not him old music think his found enjoy merry. Listening acuteness dependent at or an. Apartments thoroughly unsatiable terminated sex how themselves. She are ten hours wrong walls stand early. Domestic perceive on an ladyship extended received do. Why jennings our whatever his learning gay perceive. Is against no he without subject. Bed connection unreserved preference partiality not unaffected. Years merit trees so think in hoped we as.</p>
 +
                      <p>Improved own provided blessing may peculiar domestic. Sight house has sex never. No visited raising gravity outward subject my cottage mr be. Hold do at tore in park feet near my case. Invitation at understood occasional sentiments insipidity inhabiting in. Off melancholy alteration principles old. Is do speedily kindness properly oh. Respect article painted cottage he is offices parlors. </p>
 +
                    </div>
 +
                  </div>
 +
                  <div class="col-md-8">
 +
                    <div class="row">
 +
                        <div class="col-md-6">
 +
                            <div class="project-image">
 +
                              <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-md-6">
 +
                            <div class="project-image">
 +
                              <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                            </div>
 +
                        </div>
 +
                          <div class="col-md-6">
 +
                            <div class="project-image">
 +
                              <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-md-6">
 +
                            <div class="project-image">
 +
                              <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
  
 +
        <div class="project-content" id="project_2">
 +
          <div>
 +
            <div class="project-details">
 +
              <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 +
              <div class="container">
 +
                <div class="project-title">
 +
                  <h2>Example No.2</h2>
 +
                  <div class="separator-container">
 +
                      <div class="separator line-separator">✻</div>
 +
                    </div>
 +
                    <p>We've been working with Kingsman Studios and we are proud that they enjoy our results.</p>
 +
                </div>
 +
                <div class="row">
 +
                  <div class="col-md-10 col-md-offset-1">
 +
                    <div class="article">
 +
                      <div class="project-image">
 +
                        <img alt="..." src="assets/img/rubik_background2.jpg"/>
 +
                      </div>
 +
                      <div class="project-text">
 +
                          <h3>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce<span>.</span></h3>
 +
                          <p>Not him old music think his found enjoy merry. Listening acuteness dependent at or an. Apartments thoroughly unsatiable terminated sex how themselves. She are ten hours wrong walls stand early. Domestic perceive on an ladyship extended received do. Why jennings our whatever his learning gay perceive. Is against no he without subject. Bed connection unreserved preference partiality not unaffected. Years merit trees so think in hoped we as.</p>
 +
                      <p>Improved own provided blessing may peculiar domestic. Sight house has sex never. No visited raising gravity outward subject my cottage mr be. Hold do at tore in park feet near my case. Invitation at understood occasional sentiments insipidity inhabiting in. Off melancholy alteration principles old. Is do speedily kindness properly oh. Respect article painted cottage he is offices parlors<span>.</span></p>
 +
                      </div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
 +
        <div class="project-content" id="project_3">
 +
          <div>
 +
            <div class="project-details">
 +
              <span class="icon-close"><i class="pe-7s-close-circle"></i></span>
 +
              <div class="container">
 +
                <div class="project-title">
 +
                  <h5 >Project Content</h5>
 +
                    <h2>Example No.3</h2>
 +
                    <div class="separator-container">
 +
                      <div class="separator line-separator">✻</div>
 +
                    </div>
 +
                </div>
 +
                <div class="product">
 +
                  <div class="row">
 +
                    <div class="col-md-4">
 +
                      <div class="project-text text-right">
 +
                          <p>Pencil’s certified Bluetooth Smart wireless delivers a fast, stable connection with industry-leading power conservation</p>
 +
                          <p>Each Pencil is milled from a single, solid piece of material. Graphite brushed aluminum model shown.</p>
 +
                      </div>
 +
                    </div>
 +
                    <div class="col-md-4">
 +
                        <div class="project-image">
 +
                          <img alt="..." src="assets/img/rubik_background3.png"/>
 +
                        </div>
 +
                    </div>
 +
                    <div class="col-md-4">
 +
                      <div class="project-text">
 +
                          <p>Pencil’s certified Bluetooth Smart wireless delivers a fast, stable connection with industry-leading power conservation</p>
 +
                          <p>Each Pencil is milled from a single, solid piece of material. Graphite brushed aluminum model shown.</p>
 +
                        </div>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
        </div>
 +
       
 
         <div class="body-layer"></div>
 
         <div class="body-layer"></div>
 
     </body>
 
     </body>

Revision as of 02:54, 9 October 2016

...

Project Decription

What is this?

I wish I knew. This is a project description page. It wil serve as the basic section block for any of our additional imformation pages - those aside from the project overview flowing 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.

Hello, this is the description. This is just a test to see what this text would look like center- column. It looks pretty nice, so I think I'm going to keep it like this for now. To keep aligned with the header, I have inserted a left-side padding of 70px. This was a rough estimate and can be changed. Here we can describe our project in more detail than on the front page. Right now, I'm just populating the page with text.

Project Content.

Example No.1

✻

Detail1

Detail2

Detail3

Detail4


Not him old music think his found enjoy merry. Listening acuteness dependent at or an. Apartments thoroughly unsatiable terminated sex how themselves. She are ten hours wrong walls stand early. Domestic perceive on an ladyship extended received do. Why jennings our whatever his learning gay perceive. Is against no he without subject. Bed connection unreserved preference partiality not unaffected. Years merit trees so think in hoped we as.

Improved own provided blessing may peculiar domestic. Sight house has sex never. No visited raising gravity outward subject my cottage mr be. Hold do at tore in park feet near my case. Invitation at understood occasional sentiments insipidity inhabiting in. Off melancholy alteration principles old. Is do speedily kindness properly oh. Respect article painted cottage he is offices parlors.

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

Example No.2

✻

We've been working with Kingsman Studios and we are proud that they enjoy our results.

...

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

Not him old music think his found enjoy merry. Listening acuteness dependent at or an. Apartments thoroughly unsatiable terminated sex how themselves. She are ten hours wrong walls stand early. Domestic perceive on an ladyship extended received do. Why jennings our whatever his learning gay perceive. Is against no he without subject. Bed connection unreserved preference partiality not unaffected. Years merit trees so think in hoped we as.

Improved own provided blessing may peculiar domestic. Sight house has sex never. No visited raising gravity outward subject my cottage mr be. Hold do at tore in park feet near my case. Invitation at understood occasional sentiments insipidity inhabiting in. Off melancholy alteration principles old. Is do speedily kindness properly oh. Respect article painted cottage he is offices parlors.

Project Content

Example No.3

✻

Pencil’s certified Bluetooth Smart wireless delivers a fast, stable connection with industry-leading power conservation

Each Pencil is milled from a single, solid piece of material. Graphite brushed aluminum model shown.

...

Pencil’s certified Bluetooth Smart wireless delivers a fast, stable connection with industry-leading power conservation

Each Pencil is milled from a single, solid piece of material. Graphite brushed aluminum model shown.