Difference between revisions of "Team:SDU-Denmark/testnavfp"

 
(120 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
 
<style>
 
<style>
 +
 +
#navbarPosition {
 +
  position:absolute;
 +
  width: 65vw;
 +
  left:15vw;
 +
}
 +
 +
 +
/**************HIGHLIGHT SWITCH************/
 +
.switch {
 +
    background-color: #ccc;
 +
    border-radius: 15px;
 +
    cursor: pointer;
 +
    display: inline-block;
 +
    height: 16px;
 +
    right: -25%;
 +
    position: relative;
 +
    top: 23px;
 +
    -webkit-transition: .2s;
 +
    transition: .2s;
 +
    width: 31px;
 +
}
 +
 +
.slider {
 +
    background-color: white;
 +
    border-radius: 50%;
 +
    bottom: 2px;
 +
    position:absolute;
 +
    content: "";
 +
    height: 12px;
 +
    left: 2px;
 +
    -webkit-transition: .2s;
 +
    transition: .2s;
 +
    width: 12px;
 +
}
 +
 +
.slider.active {
 +
  -webkit-transform: translateX(15px);
 +
  -ms-transform: translateX(15px);
 +
  transform: translateX(15px);
 +
}
 +
 +
.switch.active {
 +
  background-color: #689C43;
 +
  box-shadow: 0 0 1px #689C43;
 +
}
 +
 +
 +
 +
 +
/****************HIGHLIGHT BUTTON*****************/
 +
#highlightToggle {
 +
    position: fixed;
 +
    top:30px;
 +
    right:5vw;
 +
    overflow:visible;
 +
}
 +
 +
#editorsHighlights {
 +
    position:relative;
 +
    left: 0px;
 +
    top: -30px;
 +
    width: 100px;
 +
}
 +
 +
#editorsHighlights > p {
 +
    font-size:11px !important;
 +
}
 +
 +
.highlightOverlay {
 +
    background-color: rgba(0,0,0,0.0);
 +
    position: fixed;
 +
    height: 100%;
 +
    width: 100%;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    top: 0;
 +
    z-index: 50;
 +
  -webkit-transition: .7s;
 +
  transition: .7s;
 +
  pointer-events:none!important;
 +
}
 +
 +
 +
.highlightOverlay.active {
 +
    background-color: rgba(0,0,0,0.55) !important;
 +
}
 +
 +
#HQ_page p.active {
 +
  color:rgba(0,0,0,0.3) !important;
 +
  pointer-events:none!important;
 +
}
 +
 +
span.highlighted {
 +
  -webkit-transition: .2s;
 +
  transition: .2s;
 +
}
 +
 +
span.highlighted.active {
 +
  background-color:#E2DCA8;
 +
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
 +
  padding: 2.5px 0px 0.8px 0px;
 +
  position:relative;
 +
  z-index:101;
 +
  color:rgba(0,0,0,0.8) !important;
 +
  border-radius: 1px;
 +
  pointer-events:auto!important;
 +
}
 +
 +
#editorsHighlights.active > p.active {
 +
  color:rgba(0,0,0,0.8) !important;
 +
}
 +
 +
/**************************START OF NAVBAR***********************/
 +
a {
 +
  text-decoration: none !important;
 +
}
 +
 +
#navbar {
 +
  position:fixed;
 +
  overflow:visible;
 +
  left:0;
 +
  top:16px;
 +
  right:0;
 +
  height:72px;
 +
  background: #f8f8f8;
 +
  z-index:102;
 +
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
 +
}
 +
 +
.nav-tabs > li, .nav-pills > li {
 +
    float:none;
 +
    display:inline-block;
 +
    *display:inline; /* ie7 fix */
 +
    zoom:1; /* hasLayout ie7 trigger */
 +
    margin-bottom: -10px;
 +
}
 +
 +
.nav-tabs, .nav-pills {
 +
    text-align:center;
 +
}
 +
 +
 +
.nav-tabs > li > a {
 +
  font-size:16px;
 +
  font-weight: 300;
 +
  line-height: 22px;
 +
}
 +
 +
.nav-tabs > #navbarPresentation> a {
 +
  color:#37606E;
 +
}
 +
 +
.nav-tabs > #navbarIntroduction> a {
 +
  color:#547983;
 +
}
 +
 +
.nav-tabs > #navbarProject> a {
 +
  color:#376A2F;
 +
}
 +
 +
.nav-tabs > #navbarProcedures> a {
 +
  color:#689C43;
 +
}
 +
 +
.nav-tabs > #navbarPractices> a {
 +
  color:#A8883D;
 +
}
 +
 +
.nav-tabs > #navbarProspects> a {
 +
  color:#CFB26E;
 +
}
 +
 +
 +
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
 +
  color: #556E3F;
 +
  cursor: default;
 +
  background-color: rgb(248, 248, 248);
 +
  border: 1px solid #ddd;
 +
  border-bottom-color: transparent;
 +
  height: 38px;
 +
}
 +
 +
.nav > li > a:hover, .nav > li > a:focus {
 +
    text-decoration: none;
 +
    background-color: #eee;
 +
    height: 38px;
 +
}
 +
 +
 +
.nav > li > a {
 +
    padding: 8px 15px 15px 15px;
 +
}
 +
 +
 +
a.anchor {
 +
  display:block;
 +
  position:relative;
 +
  top:-60px;
 +
  visibility:hidden;
 +
}
 +
 +
 +
 +
 +
 +
/***********SUBNAVBAR*********/
 +
 +
 +
 +
#menu1 h5 {
 +
color: #37606E;
 +
}
 +
 +
#menu2 h5 {
 +
color: #547983;
 +
}
 +
 +
#menu3 h5 {
 +
color: #376A2F;
 +
}
 +
 +
#menu4 h5 {
 +
color: #689C43;
 +
}
 +
 +
#menu5 h5 {
 +
color: #A8883D;
 +
}
 +
 +
#menu6 h5 {
 +
color: #CFB26E;
 +
}
 +
 +
a:hover h5 {
 +
color: #73918A;
 +
}
 +
 +
 +
.navbar-nav {
 +
    width: 100%;
 +
    text-align: center;
 +
}
 +
 +
 +
.nav-item.nav-link {
 +
    display: inline-block;
 +
    padding-right: 20px;
 +
    padding-left: 20px;
 +
}
 +
 +
.navbar-nav a:hover {
 +
    background-color: #eee;
 +
    padding-top: 1px;
 +
    margin-top: -2px;
 +
    border-radius: 0px 0px 5px 5px;
 +
}
 +
 +
 +
.anchorMargin {
 +
  padding-top:80px;
 +
  margin-top:-80px;
 +
}
 +
 +
.nav-item.nav-link.active {
 +
    text-decoration: underline !important;
 +
}
 +
 +
 +
/**************************END OF NAVBAR***********************/
 +
 +
 +
/**********************PROGRESS BAR************************/
 +
 +
.progressContainer {
 +
  width:75%;
 +
  height: 1px;
 +
  position: absolute;
 +
  margin-bottom: 0px;
 +
  overflow: hidden;
 +
  background-color: rgba(200,200,200,.5);
 +
  content: "";
 +
  display: table;
 +
  table-layout: fixed;
 +
  z-index:1000;
 +
  left:12%;
 +
  bottom:30%;
 +
}
 +
 +
 +
.active .progressContainer {
 +
  position: absolute;
 +
  left:12%;
 +
  bottom:14%;
 +
}
 +
 +
.nav > li > a:hover + .progressContainer {
 +
  position: absolute;
 +
  left:12%;
 +
  bottom: 14%;
 +
}
 +
 +
 +
.progressBar1 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar2 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar3 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar4 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar5 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar6 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
 +
 +
 +
 +
@media only screen and (max-width: 1600px) {
 +
  #navbarPosition {
 +
    width: 80vw;
 +
    left:7vw !important;
 +
  }
 +
 +
  #highlightToggle {
 +
  right:0vw !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -2px;
 +
    margin-right: -2px;
 +
  }
 +
 +
}
 +
 +
 +
 +
@media only screen and (max-width: 1024px) {
 +
  #navbarPosition {
 +
    width: 95vw;
 +
    left:1% !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -2px;
 +
    margin-right: -2px;
 +
    padding-left:-15px;
 +
    padding-right:-15px;
 +
  }
 +
 +
  .nav-tabs > li > a {
 +
    font-size:14px;
 +
  }
 +
 +
HQ_page h5 {
 +
    font-size:1.1rem;
 +
  }
 +
 +
  #highlightToggle {
 +
    top:90px;
 +
  }
 +
}
 +
 +
 +
 +
@media only screen and (max-width: 768px) {
 +
  #navbarPosition {
 +
    width: 100vw;
 +
    left:-1% !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -3px;
 +
    margin-right: -3px;
 +
  }
 +
 +
  #highlightToggle {
 +
    top:90px;
 +
  }
 +
}
 +
 +
 +
@media only screen and (max-width: 480px) {
 +
  #navbarPosition {
 +
    width: 100vw;
 +
    left:0vw !important;
 +
  }
 +
}
 +
 +
  
  
Line 14: Line 466:
  
  
 +
<header>
 +
<div id="navbar"> 
  
−
<div id="navbar">
+
<div id="navbarPosition">
−
<div class="container-fluid">
+
−
  <div class="row"> 
+
−
    <div class="col-sm-2"><div id="skimPlacement"><button id="skimButton"><div class="skimTextPlacement"><h5>toggle skim</h5></div></button></div></div>
+
−
    <div class="col-sm-8">
+
−
      <div class="row">
+
  
 
   <ul class="nav nav-tabs">
 
   <ul class="nav nav-tabs">
 +
    <li id="navbarPresentation" class="active"><a data-toggle="tab" href="#menu1">Presentation</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar1">
 +
</div>
 +
</div>
 +
    </li>
  
−
     <li id="navbarPresentation"><a data-toggle="tab" href="#menu1">Presentation</a>
+
     <li id="navbarIntroduction"><a data-toggle="tab" href="#menu2">Introduction</a>
−
         <div class="KW_progressContainer">
+
         <div class="progressContainer">
−
<div class="KW_progressBar">
+
<div class="progressBar2">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarProject"><a data-toggle="tab" href="#menu3">Project & Results</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar3">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarProcedures"><a data-toggle="tab" href="#menu4">Parts & Procedures</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar4">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarPractices"><a data-toggle="tab" href="#menu5">Practices</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar5">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarProspects"><a data-toggle="tab" href="#menu6">Prospects</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar6">
 
</div>
 
</div>
 
</div>
 
</div>
 
     </li>
 
     </li>
  
−
    <li id="navbarIntroduction"><a data-toggle="tab" href="#menu2">Introduction</a></li>
 
−
    <li id="navbarProject"><a data-toggle="tab" href="#menu3">Project & Results</a></li>
 
−
    <li id="navbarParts"><a data-toggle="tab" href="#menu4">Parts & Results</a></li>
 
−
    <li id="navbarPractices"><a data-toggle="tab" href="#menu5">Practices</a></li>
 
−
    <li id="navbarProspects"><a data-toggle="tab" href="#menu6">Prospects</a></li>
 
 
   </ul>
 
   </ul>
 +
  
 
   <div class="tab-content">
 
   <div class="tab-content">
  
  
−
     <div id="menu1" class="tab-pane fade">
+
     <div id="menu1" class="tab-pane fade in active">
−
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
−
       <a class="nav-item nav-link" href="#Presentation"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#presentation"><h5>Opening</h5></a>
−
       <a class="nav-item nav-link" href="#Team"><h5>Team</h5></a>
+
       <a class="nav-item nav-link" href="#team"><h5>Team</h5></a>
−
       <a class="nav-item nav-link" href="#Attributions"><h5>Attributions</h5></a>
+
       <a class="nav-item nav-link" href="#attributions"><h5>Attributions</h5></a>
−
       <a class="nav-item nav-link" href="#Collaborations"><h5>Collaborations</h5></a>
+
       <a class="nav-item nav-link" href="#collaborations"><h5>Collaborations</h5></a>
−
       <a class="nav-item nav-link" href="#Achievements"><h5>Achievements</h5></a>
+
       <a class="nav-item nav-link" href="#achievements"><h5>Achievements</h5></a>
 +
    </nav>
 
     </div>
 
     </div>
−
    </div>
 
−
 
  
 
     <div id="menu2" class="tab-pane fade">
 
     <div id="menu2" class="tab-pane fade">
−
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
−
       <a class="nav-item nav-link" href="#Introduction"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#introduction"><h5>Opening</h5></a>
−
       <a class="nav-item nav-link" href="#Description"><h5>Description</h5></a>
+
       <a class="nav-item nav-link" href="#description"><h5>Description</h5></a>
−
       <a class="nav-item nav-link" href="#Outreach"><h5>Outreach</h5></a>
+
       <a class="nav-item nav-link" href="#outreach"><h5>Outreach</h5></a>
−
     </div>
+
     </nav>
 
     </div>
 
     </div>
−
 
  
 
     <div id="menu3" class="tab-pane fade">
 
     <div id="menu3" class="tab-pane fade">
−
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
−
       <a class="nav-item nav-link" href="#"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#project"><h5>Opening</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Project Design</h5></a>
+
       <a class="nav-item nav-link" href="#design"><h5>Project Design</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Modelling</h5></a>
+
       <a class="nav-item nav-link" href="#modelling"><h5>Modelling</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Experiments</h5></a>
+
       <a class="nav-item nav-link" href="#experiments"><h5>Experiments</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Demonstration & Results</h5></a>
+
       <a class="nav-item nav-link" href="#demonstration"><h5>Demonstration & Results</h5></a>
−
     </div>
+
     </nav>
 
     </div>
 
     </div>
  
 
     <div id="menu4" class="tab-pane fade">
 
     <div id="menu4" class="tab-pane fade">
−
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
−
       <a class="nav-item nav-link" href="#"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#procedures"><h5>Opening</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Parts</h5></a>
+
       <a class="nav-item nav-link" href="#parts"><h5>Parts</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Notebook</h5></a>
+
       <a class="nav-item nav-link" href="#notebook"><h5>Notebook</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>SOPs and Protocols</h5></a>
+
       <a class="nav-item nav-link" href="#protocols"><h5>SOPs and Protocols</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Labsafety</h5></a>
+
       <a class="nav-item nav-link" href="#labsafety"><h5>Lab Safety</h5></a>
−
     </div>
+
     </nav>
 
     </div>
 
     </div>
  
 
     <div id="menu5" class="tab-pane fade">
 
     <div id="menu5" class="tab-pane fade">
−
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
−
       <a class="nav-item nav-link" href="#"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#practices"><h5>Opening</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Bioethics</h5></a>
+
       <a class="nav-item nav-link" href="#bioethics"><h5>Bioethics</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Integrated Practices</h5></a>
+
       <a class="nav-item nav-link" href="#integrated"><h5>Integrated Practices</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Outreach</h5></a>
+
       <a class="nav-item nav-link" href="#events"><h5>Events</h5></a>
−
      <a class="nav-item nav-link" href="#"><h5>Events</h5></a>
+
     </nav>
−
     </div>
+
 
     </div>
 
     </div>
  
 
     <div id="menu6" class="tab-pane fade">
 
     <div id="menu6" class="tab-pane fade">
−
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
−
       <a class="nav-item nav-link" href="#"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#prospects"><h5>Opening</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Perspectives</h5></a>
+
       <a class="nav-item nav-link" href="#perspectives"><h5>Perspectives</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>To future iGEM teams</h5></a>
+
       <a class="nav-item nav-link" href="#future"><h5>To future iGEM teams</h5></a>
−
       <a class="nav-item nav-link" href="#"><h5>Final words</h5></a>
+
       <a class="nav-item nav-link" href="#final"><h5>Final words</h5></a>
−
     </div>
+
     </nav>
 
     </div>
 
     </div>
  
 
   </div>
 
   </div>
 +
</div>
 +
 +
<div id="highlightToggle">
 +
<div class="switch">
 +
  <div class="slider"></div>
 +
</div>
 +
 +
<div id="editorsHighlights"><p><i>editors <span class="highlighted">highlights</span>.</i></p></div>
 +
</div>
 +
 +
</header>
 +
 +
  
 
       </div>
 
       </div>
 +
 
<div class="row">   
 
<div class="row">   
 
<div class="col-sm-12">
 
<div class="col-sm-12">
Line 120: Line 610:
  
  
 +
    <div id="menu1">
 +
 +
<article id="presentationContent">
  
−
<div class="contentPage">
+
<div id="contentPage">
−
<a class="anchor" id="anchorHome"></a>
+
  
 
<div id="homeCover"></div>
 
<div id="homeCover"></div>
  
  
−
 
+
<div id="Presentation" class="row anchorMargin">          <!-- Start of attributions content -->
−
 
+
−
 
+
−
<div class="row contentPresentation">          <!-- Start of attributions content -->
+
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
−
<a class="anchor" name="Presentation"></a>
 
 
<h2>Presentation</h2><hr>
 
<h2>Presentation</h2><hr>
 
<div id="opsatre"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
 
<div id="opsatre"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
Line 152: Line 640:
 
</div>
 
</div>
  
−
<div class="row" id="contentPresentationGradient"></div>        
+
<div class="row contentPresentationGradient"><div class="contentPresentationGradient2"></div></div> 
 +
 
  
−
<div class="row contentPresentation">         
+
<div id="Team" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
−
<a class="anchor" name="Team"></a>
 
 
<h2>Team</h2><hr>
 
<h2>Team</h2><hr>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
Line 177: Line 665:
  
  
−
<div class="row" id="contentPresentationGradient"></div>        
+
<div class="row contentPresentationGradient"></div>
  
  
−
<div class="row contentPresentation">         
+
 
 +
 
 +
<div id="Attributions" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
−
<a class="anchor" name="Attributions"></a>
 
 
<h2>Attributions</h2><hr>
 
<h2>Attributions</h2><hr>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
Line 203: Line 692:
  
 
</div>
 
</div>
−
<article>
 
  
−
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
  
−
<div class="row contentPresentation">         
+
 
 +
<div id="Collaborations" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
−
<a class="anchor" name="Collaborations"></a>
 
 
<h2>Collaborations</h2><hr>
 
<h2>Collaborations</h2><hr>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
Line 233: Line 721:
  
  
−
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
−
<div class="row contentPresentation">         
+
<div id="Achievements" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
−
<a class="anchor" name="Achievements"></a>
 
 
<h2>Achievements</h2><hr>
 
<h2>Achievements</h2><hr>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
Line 260: Line 747:
  
  
 +
</article>
 +
</div>
 +
 +
<article id="introductionContent">
  
  
 +
<div class="row contentPresentationGradient"></div> 
  
−
<div class="row" id="contentPresentationGradient"></div>
 
  
−
<div class="row contentPresentation">         
+
<div id="Introduction" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
−
<a class="anchor" name="Introduction"></a>
 
 
<h2>Introduction</h2><hr>
 
<h2>Introduction</h2><hr>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
Line 288: Line 778:
  
  
−
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
  
  
−
<div class="row contentPresentation">         
+
<div id="Description" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
−
<a class="anchor" name="Description"></a>
 
 
<h2>Description</h2><hr>
 
<h2>Description</h2><hr>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
Line 315: Line 804:
  
  
−
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
  
−
<div class="row contentPresentation">         
+
<div id="Outreach" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
−
<a class="anchor" name="Outreach"></a>
 
 
<h2>Outreach</h2><hr>
 
<h2>Outreach</h2><hr>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat eros purus, sed maximus dui commodo eget. Cras id ipsum velit. Nullam pulvinar, dui bibendum venenatis tempor, velit arcu gravida dui, et vehicula sapien ex in dui. Donec luctus dui ac urna scelerisque sollicitudin. Mauris luctus lectus nec massa fermentum fringilla. Integer ac ornare augue, quis tempor neque. Suspendisse nec porta turpis. Vivamus scelerisque finibus lacus vitae lacinia. Curabitur sodales tincidunt condimentum. Curabitur justo est, varius ac libero sed, dapibus eleifend neque. Phasellus id feugiat magna.</p>
Line 341: Line 829:
  
  
−
<div class="row" id="contentPresentationGradient"></div>
+
 
 +
 
 +
<div class="row contentPresentationGradient"></div>
  
 
</article>
 
</article>
Line 347: Line 837:
 
</div>
 
</div>
  
−
 
+
 
  
  

Latest revision as of 15:45, 16 September 2017