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

 
(124 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">
  
−
<div class="contentPage">
+
<article id="presentationContent">
−
<a class="anchor" id="anchorHome"></a>
+
 
 +
<div id="contentPage">
  
 
<div id="homeCover"></div>
 
<div id="homeCover"></div>
  
  
−
<div class="row contentPresentation">          <!-- Start of attributions content -->
+
<div id="Presentation" class="row anchorMargin">          <!-- 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 149: 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 174: 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 201: Line 693:
 
</div>
 
</div>
  
 +
<div class="row contentPresentationGradient"></div> 
  
−
<div class="row" id="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 230: 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 257: Line 747:
  
  
−
<div class="row" id="contentPresentationGradient"></div>
+
</article>
 +
</div>
 +
 
 +
<article id="introductionContent">
 +
 
 +
 
 +
<div class="row 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 282: 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="Introduction"></a>
+
<h2>Description</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 309: 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="Introduction"></a>
+
<h2>Outreach</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 335: Line 829:
  
  
−
<div class="row" id="contentPresentationGradient"></div>
 
  
  
 +
<div class="row contentPresentationGradient"></div> 
 +
 +
</article>
  
 
</div>
 
</div>
  
−
 
+
 
  
  

Latest revision as of 15:45, 16 September 2017