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

 
(163 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 {
 
#navbar {
−
position:fixed;
+
  position:fixed;
−
left:0;
+
  overflow:visible;
−
top:16;
+
  left:0;
−
right:0;
+
  top:16px;
−
height:44px;
+
  right:0;
−
overflow:hidden;
+
  height:72px;
−
background: rgba(248,248,248,.99);
+
  background: #f8f8f8;
−
z-index:2;
+
  z-index:102;
−
box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
+
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
 
}
 
}
  
−
#homeCover {
+
.nav-tabs > li, .nav-pills > li {
−
  height: 650px;
+
    float:none;
−
  background: linear-gradient(rgba(10, 10, 10, 0.3), rgba(10, 10, 10, 0.3)), url(https://static.igem.org/mediawiki/2017/0/06/T--SDU-Denmark--Group_picture_SDU_first_trip.JPG) no-repeat center;
+
    display:inline-block;
−
  background-size: cover;
+
    *display:inline; /* ie7 fix */
 +
    zoom:1; /* hasLayout ie7 trigger */
 +
    margin-bottom: -10px;
 
}
 
}
  
−
#HQ_page h5 {
+
.nav-tabs, .nav-pills {
−
position: relative;
+
    text-align:center;
−
font-family:"Helvetica Neue","Helvetica",sans-serif;
+
−
font-weight:normal;
+
−
font-size:1.5rem;
+
−
margin:0;
+
−
padding:0;
+
−
line-height:44px;
+
−
text-align:center;
+
−
  z-index: 2;
+
−
  font-weight:300;
+
−
box-shadow:inset 0 -1px 0 rgba(255,255,255,.25);
+
 
}
 
}
 +
 +
 +
.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 42: Line 464:
 
<body>
 
<body>
  
 +
 +
 +
<header>
 +
<div id="navbar"> 
 +
 +
<div id="navbarPosition">
 +
 +
  <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="navbarIntroduction"><a data-toggle="tab" href="#menu2">Introduction</a>
 +
        <div class="progressContainer">
 +
<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>
 +
    </li>
 +
 +
  </ul>
 +
 +
 +
  <div class="tab-content">
 +
 +
 +
    <div id="menu1" class="tab-pane fade in active">
 +
    <nav class="navbar-nav">
 +
      <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="#attributions"><h5>Attributions</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>
 +
    </nav>
 +
    </div>
 +
 +
    <div id="menu2" class="tab-pane fade">
 +
    <nav class="navbar-nav">
 +
      <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="#outreach"><h5>Outreach</h5></a>
 +
    </nav>
 +
    </div>
 +
 +
    <div id="menu3" class="tab-pane fade">
 +
    <nav class="navbar-nav">
 +
      <a class="nav-item nav-link" href="#project"><h5>Opening</h5></a>
 +
      <a class="nav-item nav-link" href="#design"><h5>Project Design</h5></a>
 +
      <a class="nav-item nav-link" href="#modelling"><h5>Modelling</h5></a>
 +
      <a class="nav-item nav-link" href="#experiments"><h5>Experiments</h5></a>
 +
      <a class="nav-item nav-link" href="#demonstration"><h5>Demonstration & Results</h5></a>
 +
    </nav>
 +
    </div>
 +
 +
    <div id="menu4" class="tab-pane fade">
 +
    <nav class="navbar-nav">
 +
      <a class="nav-item nav-link" href="#procedures"><h5>Opening</h5></a>
 +
      <a class="nav-item nav-link" href="#parts"><h5>Parts</h5></a>
 +
      <a class="nav-item nav-link" href="#notebook"><h5>Notebook</h5></a>
 +
      <a class="nav-item nav-link" href="#protocols"><h5>SOPs and Protocols</h5></a>
 +
      <a class="nav-item nav-link" href="#labsafety"><h5>Lab Safety</h5></a>
 +
    </nav>
 +
    </div>
 +
 +
    <div id="menu5" class="tab-pane fade">
 +
    <nav class="navbar-nav">
 +
      <a class="nav-item nav-link" href="#practices"><h5>Opening</h5></a>
 +
      <a class="nav-item nav-link" href="#bioethics"><h5>Bioethics</h5></a>
 +
      <a class="nav-item nav-link" href="#integrated"><h5>Integrated Practices</h5></a>
 +
      <a class="nav-item nav-link" href="#events"><h5>Events</h5></a>
 +
    </nav>
 +
    </div>
 +
 +
    <div id="menu6" class="tab-pane fade">
 +
    <nav class="navbar-nav">
 +
      <a class="nav-item nav-link" href="#prospects"><h5>Opening</h5></a>
 +
      <a class="nav-item nav-link" href="#perspectives"><h5>Perspectives</h5></a>
 +
      <a class="nav-item nav-link" href="#future"><h5>To future iGEM teams</h5></a>
 +
      <a class="nav-item nav-link" href="#final"><h5>Final words</h5></a>
 +
    </nav>
 +
    </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 id="navbar">
 
−
<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"> 
 
−
          <div class="col-sm-2"><a href="#anchorHome"><h5>Home</h5></a></div>
 
−
          <div class="col-sm-2"><a href="#anchorPresentation"><h5>Presentation</h5></a></div>
 
−
          <div class="col-sm-2"><a href="#anchorIntroduction"><h5>Introduction</h5></a></div>
 
−
          <div class="col-sm-2"><a href="#anchorProject"><h5>Project & Results</h5></a></div>
 
−
          <div class="col-sm-2"><a href="#anchorPractices"><h5>Practices</h5></a></div>
 
−
          <div class="col-sm-2"><a href="#anchorProspects"><h5>Prospects</h5></a></div>
 
 
       </div>
 
       </div>
 +
 
<div class="row">   
 
<div class="row">   
 
<div class="col-sm-12">
 
<div class="col-sm-12">
−
<div class="progress-bar"></div>
+
<div>
 +
 
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 +
 
     <div class="col-sm-2"></div>
 
     <div class="col-sm-2"></div>
  
Line 71: Line 609:
 
</div>
 
</div>
  
−
<div class="contentPage">
 
  
−
<div class="row contentPresentation">          <!-- Start of attributions content -->
+
    <div id="menu1">
 +
 
 +
<article id="presentationContent">
 +
 
 +
<div id="contentPage">
 +
 
 +
<div id="homeCover"></div>
 +
 
 +
 
 +
<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" id="anchorHome"></a>
+
<h2>Presentation</h2><hr>
−
<h2>Frederik hygger</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>
−
<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>Nullam id pulvinar erat. Curabitur condimentum vulputate nisl quis mollis. Phasellus at molestie purus. Donec ut nulla nec justo pellentesque molestie. Praesent sollicitudin rhoncus massa eu ultrices. Aenean facilisis erat commodo ipsum laoreet, nec tincidunt lorem bibendum. Donec egestas, nibh eu condimentum consectetur, nibh eros tristique mauris, vitae lobortis enim massa at elit. Mauris id nibh ut arcu commodo interdum. Vivamus sed efficitur magna.</p>
 
<p>Nullam id pulvinar erat. Curabitur condimentum vulputate nisl quis mollis. Phasellus at molestie purus. Donec ut nulla nec justo pellentesque molestie. Praesent sollicitudin rhoncus massa eu ultrices. Aenean facilisis erat commodo ipsum laoreet, nec tincidunt lorem bibendum. Donec egestas, nibh eu condimentum consectetur, nibh eros tristique mauris, vitae lobortis enim massa at elit. Mauris id nibh ut arcu commodo interdum. Vivamus sed efficitur magna.</p>
  
−
<p>Etiam varius massa volutpat, fermentum tortor ut, tempor nisi. Quisque lectus nisi, sodales vel eros eu, venenatis pellentesque eros. Ut justo velit, dictum vel cursus sed, tincidunt euismod massa. Nullam luctus orci quis pellentesque egestas. Aliquam eget turpis ac purus tincidunt semper. Donec semper leo neque, eget sagittis massa consectetur ut. Duis rutrum accumsan tortor eu commodo. Cras sed tortor arcu. Donec consectetur a dolor a pharetra. Donec eget velit eu dolor egestas aliquet at a eros. In tincidunt scelerisque erat, ut ultricies justo tincidunt eget. Vivamus non dignissim arcu, ac commodo tellus. Ut et tortor tempor, facilisis purus eget, mattis massa. Curabitur sapien velit, finibus a sapien non, aliquet dictum metus. Fusce eget euismod elit.</p>
+
<p>Etiam varius massa volutpat, fermentum tortor ut, tempor nisi. Quisque lectus nisi, sodales vel eros eu, venenatis pellentesque eros. Ut justo velit, dictum vel cursus sed, tincidunt euismod massa. Nullam luctus orci quis pellentesque egestas. Aliquam eget turpis ac purus tincidunt semper. Donec semper leo neque, eget sagittis massa consectetur ut. Duis rutrum accumsan tortor eu commodo. Cras sed tortor arcu. Donec consectetur a dolor a pharetra. Donec eget velit eu dolor egestas aliquet at a eros. In tincidunt scelerisque erat, ut ultricies justo tincidunt eget. Vivamus non dignissim arcu, ac commodo tellus. Ut et tortor tempor, facilisis purus eget, mattis massa. Curabitur sapien velit, finibus a sapien non, aliquet dictum metus. Fusce eget euismod elit.</p></div>
  
 
<p>Nam orci ipsum, pulvinar a sollicitudin nec, porttitor sed tellus. Duis at felis eu neque facilisis sodales eu non risus. Cras feugiat tristique lacus, ac congue lectus vulputate a. Maecenas blandit vehicula rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida eleifend metus vitae accumsan. Etiam volutpat diam ac lorem congue, ac maximus lacus congue. Sed in velit turpis. Sed ac ultrices velit. Curabitur viverra vitae metus ut pretium. Maecenas placerat tempus hendrerit. Suspendisse commodo tincidunt odio id sagittis. Phasellus eget hendrerit velit. Nulla bibendum id ligula sit amet mattis.</p>
 
<p>Nam orci ipsum, pulvinar a sollicitudin nec, porttitor sed tellus. Duis at felis eu neque facilisis sodales eu non risus. Cras feugiat tristique lacus, ac congue lectus vulputate a. Maecenas blandit vehicula rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida eleifend metus vitae accumsan. Etiam volutpat diam ac lorem congue, ac maximus lacus congue. Sed in velit turpis. Sed ac ultrices velit. Curabitur viverra vitae metus ut pretium. Maecenas placerat tempus hendrerit. Suspendisse commodo tincidunt odio id sagittis. Phasellus eget hendrerit velit. Nulla bibendum id ligula sit amet mattis.</p>
Line 95: 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" id="anchorPresentation"></a>
+
<h2>Team</h2><hr>
−
<h2>Meget</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 120: Line 665:
  
  
−
<div class="row" id="contentPresentationGradient"></div>        
+
<div class="row contentPresentationGradient"></div>
 +
 
  
  
−
<div id="homeCover"></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" id="anchorIntroduction"></a>
+
<h2>Attributions</h2><hr>
−
<h2>RIGTIGT MEGET!</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 149: 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" id="anchorProject"></a>
+
<h2>Collaborations</h2><hr>
−
<h2>lol hvor fedt</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 178: 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" id="anchorPractices"></a>
+
<h2>Achievements</h2><hr>
−
<h2>haps haps</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 205: Line 747:
  
  
−
<div class="row" id="contentPresentationGradient"></div>
+
</article>
−
<div class="row contentPresentation">         
+
</div>
 +
 
 +
<article id="introductionContent">
 +
 
 +
 
 +
<div class="row contentPresentationGradient"></div>
 +
 
 +
 
 +
<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" id="anchorProspects"></a>
+
<h2>Introduction</h2><hr>
−
<h2 id="anchorProspects">nu skal vi ha snaps</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 228: Line 777:
 
</div>
 
</div>
  
 +
 +
<div class="row contentPresentationGradient"></div> 
 +
 +
 +
 +
<div id="Description" class="row anchorMargin">       
 +
  <div class="col-sm-3"></div>
 +
  <div class="col-sm-6">
 +
<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>Nullam id pulvinar erat. Curabitur condimentum vulputate nisl quis mollis. Phasellus at molestie purus. Donec ut nulla nec justo pellentesque molestie. Praesent sollicitudin rhoncus massa eu ultrices. Aenean facilisis erat commodo ipsum laoreet, nec tincidunt lorem bibendum. Donec egestas, nibh eu condimentum consectetur, nibh eros tristique mauris, vitae lobortis enim massa at elit. Mauris id nibh ut arcu commodo interdum. Vivamus sed efficitur magna.</p>
 +
 +
<p>Etiam varius massa volutpat, fermentum tortor ut, tempor nisi. Quisque lectus nisi, sodales vel eros eu, venenatis pellentesque eros. Ut justo velit, dictum vel cursus sed, tincidunt euismod massa. Nullam luctus orci quis pellentesque egestas. Aliquam eget turpis ac purus tincidunt semper. Donec semper leo neque, eget sagittis massa consectetur ut. Duis rutrum accumsan tortor eu commodo. Cras sed tortor arcu. Donec consectetur a dolor a pharetra. Donec eget velit eu dolor egestas aliquet at a eros. In tincidunt scelerisque erat, ut ultricies justo tincidunt eget. Vivamus non dignissim arcu, ac commodo tellus. Ut et tortor tempor, facilisis purus eget, mattis massa. Curabitur sapien velit, finibus a sapien non, aliquet dictum metus. Fusce eget euismod elit.</p>
 +
 +
<p>Nam orci ipsum, pulvinar a sollicitudin nec, porttitor sed tellus. Duis at felis eu neque facilisis sodales eu non risus. Cras feugiat tristique lacus, ac congue lectus vulputate a. Maecenas blandit vehicula rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida eleifend metus vitae accumsan. Etiam volutpat diam ac lorem congue, ac maximus lacus congue. Sed in velit turpis. Sed ac ultrices velit. Curabitur viverra vitae metus ut pretium. Maecenas placerat tempus hendrerit. Suspendisse commodo tincidunt odio id sagittis. Phasellus eget hendrerit velit. Nulla bibendum id ligula sit amet mattis.</p>
 +
 +
<p>Vivamus id imperdiet felis, non vulputate diam. Pellentesque ut luctus mauris. Phasellus iaculis in mauris sed aliquet. Donec et consectetur risus. Mauris sit amet vestibulum metus. Nullam et dolor vel mi dignissim laoreet. Nam vitae magna venenatis, finibus turpis non, mollis turpis. Vestibulum fermentum tristique tellus vitae euismod. Suspendisse convallis eu purus nec interdum. Donec non mollis lacus. Duis nibh quam, semper id accumsan id, ullamcorper eu tellus. Aenean at purus nec urna accumsan bibendum.</p>
 +
 +
<p>Vestibulum congue, metus a cursus mattis, ipsum eros bibendum dolor, id euismod libero diam porttitor ipsum. Nam eget ligula nec leo mattis ornare. Cras sit amet imperdiet est. Suspendisse semper neque vitae efficitur suscipit. Proin eleifend augue et odio pulvinar, et venenatis ex efficitur. Donec at erat lobortis, dapibus nunc eget, mattis velit. Etiam quis diam placerat, porta mi ut, fermentum velit. Sed placerat sed dui ac dictum. Nulla vestibulum ipsum sit amet libero lobortis, nec facilisis dui rhoncus. Nunc tempor lectus vel pretium dictum. Nunc facilisis dignissim metus, in maximus est. Donec ultrices eros ac augue sagittis consectetur. Quisque et tellus sit amet felis tincidunt viverra sed id est.</p>
 +
 +
<p>Pellentesque id ligula enim. Cras arcu ipsum, aliquam non libero at, molestie interdum nulla. Nam condimentum, arcu ac efficitur molestie, nulla purus blandit lorem, sit amet mollis lorem tortor quis nisi. Proin efficitur lorem velit, ut dapibus nibh scelerisque ac. Vivamus tincidunt neque in turpis lobortis, quis dignissim mauris sodales. Donec pretium luctus venenatis. Mauris cursus turpis sapien, id rhoncus velit condimentum et. Aenean dapibus, justo id tristique lobortis, nisi tortor bibendum odio, vitae posuere massa urna eu arcu. Vivamus ullamcorper fringilla erat at malesuada. Proin condimentum eget ex non mattis.</p>
 +
</div>
 +
  <div class="col-sm-3"></div>
 
</div>
 
</div>
  
  
−
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
  
 +
<div id="Outreach" class="row anchorMargin">       
 +
  <div class="col-sm-3"></div>
 +
  <div class="col-sm-6">
 +
<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>
  
−
</body>
+
<p>Nullam id pulvinar erat. Curabitur condimentum vulputate nisl quis mollis. Phasellus at molestie purus. Donec ut nulla nec justo pellentesque molestie. Praesent sollicitudin rhoncus massa eu ultrices. Aenean facilisis erat commodo ipsum laoreet, nec tincidunt lorem bibendum. Donec egestas, nibh eu condimentum consectetur, nibh eros tristique mauris, vitae lobortis enim massa at elit. Mauris id nibh ut arcu commodo interdum. Vivamus sed efficitur magna.</p>
  
 +
<p>Etiam varius massa volutpat, fermentum tortor ut, tempor nisi. Quisque lectus nisi, sodales vel eros eu, venenatis pellentesque eros. Ut justo velit, dictum vel cursus sed, tincidunt euismod massa. Nullam luctus orci quis pellentesque egestas. Aliquam eget turpis ac purus tincidunt semper. Donec semper leo neque, eget sagittis massa consectetur ut. Duis rutrum accumsan tortor eu commodo. Cras sed tortor arcu. Donec consectetur a dolor a pharetra. Donec eget velit eu dolor egestas aliquet at a eros. In tincidunt scelerisque erat, ut ultricies justo tincidunt eget. Vivamus non dignissim arcu, ac commodo tellus. Ut et tortor tempor, facilisis purus eget, mattis massa. Curabitur sapien velit, finibus a sapien non, aliquet dictum metus. Fusce eget euismod elit.</p>
  
−
<script>
+
<p>Nam orci ipsum, pulvinar a sollicitudin nec, porttitor sed tellus. Duis at felis eu neque facilisis sodales eu non risus. Cras feugiat tristique lacus, ac congue lectus vulputate a. Maecenas blandit vehicula rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida eleifend metus vitae accumsan. Etiam volutpat diam ac lorem congue, ac maximus lacus congue. Sed in velit turpis. Sed ac ultrices velit. Curabitur viverra vitae metus ut pretium. Maecenas placerat tempus hendrerit. Suspendisse commodo tincidunt odio id sagittis. Phasellus eget hendrerit velit. Nulla bibendum id ligula sit amet mattis.</p>
−
$(".contentPresentation2").prognroll({
+
−
    //Progress bar height
+
−
    height: 5,      
+
−
   
+
−
    //Progress bar background color
+
−
    color: "#03a9f4",
+
  
−
    // Using custom element instead of the body
+
<p>Vivamus id imperdiet felis, non vulputate diam. Pellentesque ut luctus mauris. Phasellus iaculis in mauris sed aliquet. Donec et consectetur risus. Mauris sit amet vestibulum metus. Nullam et dolor vel mi dignissim laoreet. Nam vitae magna venenatis, finibus turpis non, mollis turpis. Vestibulum fermentum tristique tellus vitae euismod. Suspendisse convallis eu purus nec interdum. Donec non mollis lacus. Duis nibh quam, semper id accumsan id, ullamcorper eu tellus. Aenean at purus nec urna accumsan bibendum.</p>
−
    custom: true   
+
 
 +
<p>Vestibulum congue, metus a cursus mattis, ipsum eros bibendum dolor, id euismod libero diam porttitor ipsum. Nam eget ligula nec leo mattis ornare. Cras sit amet imperdiet est. Suspendisse semper neque vitae efficitur suscipit. Proin eleifend augue et odio pulvinar, et venenatis ex efficitur. Donec at erat lobortis, dapibus nunc eget, mattis velit. Etiam quis diam placerat, porta mi ut, fermentum velit. Sed placerat sed dui ac dictum. Nulla vestibulum ipsum sit amet libero lobortis, nec facilisis dui rhoncus. Nunc tempor lectus vel pretium dictum. Nunc facilisis dignissim metus, in maximus est. Donec ultrices eros ac augue sagittis consectetur. Quisque et tellus sit amet felis tincidunt viverra sed id est.</p>
 +
 
 +
<p>Pellentesque id ligula enim. Cras arcu ipsum, aliquam non libero at, molestie interdum nulla. Nam condimentum, arcu ac efficitur molestie, nulla purus blandit lorem, sit amet mollis lorem tortor quis nisi. Proin efficitur lorem velit, ut dapibus nibh scelerisque ac. Vivamus tincidunt neque in turpis lobortis, quis dignissim mauris sodales. Donec pretium luctus venenatis. Mauris cursus turpis sapien, id rhoncus velit condimentum et. Aenean dapibus, justo id tristique lobortis, nisi tortor bibendum odio, vitae posuere massa urna eu arcu. Vivamus ullamcorper fringilla erat at malesuada. Proin condimentum eget ex non mattis.</p>
 +
</div>
 +
  <div class="col-sm-3"></div>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
<div class="row contentPresentationGradient"></div> 
 +
 
 +
</article>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
</body>
  
−
  position:"bottom"
 
  
−
});
 
  
−
</script>
 
  
 
</html>
 
</html>

Latest revision as of 15:45, 16 September 2017