Difference between revisions of "Team:Groningen/test"

 
(37 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Groningen}}
+
{{groningen}}
 
<html>
 
<html>
 
+
<body>
 
+
 
<style>
 
<style>
.mySlides {display:none}
+
div.bar {
.slideshow-container {
+
    background-color: #027ad0;
  position: relative;
+
    background-image: linear-gradient(#027ad0, #027ad0);
  margin: auto;
+
 
}
 
}
.header_title {
+
ul.menu, ul.menu ul {
  color: #00a94d;
+
    margin: 0;
 +
    padding: 0;
 +
    list-style: none;
 
}
 
}
.slideshow-container img {
+
ul.menu {
  filter: blur(3px);
+
width: 960px;  
  width:100%;
+
    width: -moz-fit-content;
  height:350px;
+
    width: -webkit-fit-content;
  object-fit: cover;
+
    width: fit-content;
 +
    text-align: center;
 +
    /*white-space: nowrap;*/
 +
    margin: 0px auto;
 +
    border: 0px solid #222;
 +
    background-color: #027ad0;
 +
    background-image: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 
}
 
}
/* Caption text */
+
ul.menu:before,ul.menu:after {
.slidetext {
+
    content: "";
  /*color: #111;*/
+
    display: block;
  /*font-size: 15px;*/
+
  padding: 8px 12px;
+
  position: absolute;
+
  bottom: 8px;
+
  width: 100%;
+
  text-align: center;
+
 
}
 
}
/* The dots/bullets/indicators */
+
ul.menu:after {
.dot {
+
    clear: both;
  height: 15px;
+
  width: 15px;
+
  margin: 0 2px;
+
  background-color: #bbb;
+
  border-radius: 50%;
+
  display: inline-block;
+
  transition: background-color 0.6s ease;
+
 
}
 
}
.activeslide {
+
ul.menu li {
  background-color: #717171;
+
    float: left;
 +
    box-shadow: none;
 +
    position: relative;
 
}
 
}
/* Fading animation */
+
ul.menu li.lilast {
.fade {
+
    border-right: none;
  -webkit-animation-name: fade;
+
  -webkit-animation-duration: 1.5s;
+
  animation-name: fade;
+
  animation-duration: 1.5s;
+
 
}
 
}
@-webkit-keyframes fade {
+
ul.menu a {
  from {opacity: .4}
+
    float: left;
  to {opacity: 1}
+
    padding: 12px 16px;
 +
    color: #FFFFFF;
 +
    font: 17px Arial, Helvetica;
 +
    text-decoration: none;
 +
    text-shadow: 0 1px 0 #000;
 
}
 
}
@keyframes fade {
+
ul.menu ul {
  from {opacity: .4}
+
    margin: 20px 0 0 0;
  to {opacity: 1}
+
    _margin: 0; /*IE6 only*/
 +
    opacity: 0;
 +
    visibility: hidden;
 +
    position: absolute; 
 +
    /* spacing between the menu and the dropdown menu, ideally 28px, or 23px for bordered menu */
 +
    top: 45px;
 +
    left: 0;
 +
    z-index: 1;   
 +
    background: #027ad0; 
 +
    background: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 +
    transition: all .2s ease-out;
 
}
 
}
/* On smaller screens, decrease text size */
+
ul.menu li:hover > ul {
@media only screen and (max-width: 300px) {
+
    opacity: 1;
  .slidetext {font-size: 11px}
+
    visibility: visible;
 +
    margin: 0;
 +
}
 +
ul.menu ul ul {
 +
    top: 0;
 +
    left: 150px;
 +
    margin: 0 0 0 20px;
 +
    _margin: 0; /*IE6 only*/
 +
    box-shadow: -0px 0 0 rgba(255,255,255,.3);   
 
}
 
}
 +
ul.menu ul li {
 +
    float: none;
 +
    display: block;
 +
    border: 0;
 +
    _line-height: 0; /*IE6 only*/
 +
    box-shadow: 0 0px 0 #111, 0 0px 0 #666;
 +
    text-align: left;
 +
}
 +
ul.menu ul li:last-child { 
 +
    box-shadow: none;   
 +
    border: 0;
 +
}
 +
ul.menu ul a {   
 +
    padding: 10px;
 +
    width: 150px;
 +
    _height: 10px; /*IE6 only*/
 +
    display: block;
 +
    white-space: nowrap;
 +
    float: none;
 +
    text-transform: none;
 +
}
 +
ul.menu ul a:hover {
 +
    background-color: #032c62;
 +
    background-image: linear-gradient(#032c62, #032c62);
 +
}
 +
ul.menu li a:hover {
 +
    background-color: #032c62;
 +
    background-image: linear-gradient(#032c62, #032c62);
 +
}
 +
 +
/*div.bar li a {display: block;}*/
 +
div.bar li.icon {display: none;}
 +
 +
@media screen and (max-width:800px) {
 +
ul.menu li a {
 +
position: relative;
 +
left: 0;
 +
top: 0;
 +
display: block;
 +
}
 +
div.bar li {display: none;}
 +
div.bar li.icon {
 +
    position: relative;
 +
    left: 0;
 +
    top: 0;
 +
    display: block;
 +
}
 +
ul.menu {
 +
  list-style-type: block;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
ul.menu li a {
 +
  padding: 12px 14px;
 +
  text-decoration: none;
 +
  font-size: 15px;
 +
}
 +
ul.menu ul a {   
 +
    padding: 10px;
 +
    width: 120px;
 +
}
 +
}
 +
 +
  div.bar.res {position: relative;}
 +
  div.menu.res li.icon {
 +
    position: absolute;
 +
    left: 0;
 +
    top: 0;
 +
float: left;
 +
  }
 +
  div.bar.res li {
 +
    float: none;
 +
    display: block;
 +
  }
 +
  div.bar.res li a {
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
ul.menu.res ul {
 +
    margin: 0px 0 0 0;
 +
    _margin: 0;
 +
    opacity: 1;
 +
    visibility: visible;
 +
    position: absolute; 
 +
    top: 42px;
 +
    left: 0;
 +
    z-index: 1;   
 +
    background: #027ad0; 
 +
    background: linear-gradient(#027ad0, #027ad0);
 +
    border-radius: 0px;
 +
    transition: all .2s ease-in-out;
 +
}
 +
 +
ul.menu.res li {float: left;}
 +
 +
 
</style>
 
</style>
  
<div class="slideshow-container">
 
<div class="mySlides fade">
 
  <img src="https://static.igem.org/mediawiki/2017/0/03/2017-10-14_19.37.13.jpg" style="width:100%">
 
  <div class="slidetext"><h2 class="header_title">angelooo</h2></div>
 
</div>
 
<div class="mySlides fade">
 
  <img src="https://static.igem.org/mediawiki/2017/a/ae/2017-10-17_14.37.13.jpg" style="width:100%">
 
  <div class="slidetext"><h2 class="header_title">angelooo</h2></div>
 
</div>
 
<div class="mySlides fade">
 
  <img src="https://static.igem.org/mediawiki/2017/4/43/2017-10-17_14.37.07.jpg" style="width:100%">
 
  <div class="slidetext"><h2 class="header_title">angelooo</h2></div>
 
</div>
 
<div class="mySlides fade">
 
  <img src="https://static.igem.org/mediawiki/2017/b/bd/2017-10-14_19.38.08.jpg" style="width:100%">
 
  <div class="slidetext"><h2 class="header_title">angelooo</h2></div>
 
</div>
 
<div class="mySlides fade">
 
  <img src="https://static.igem.org/mediawiki/2017/f/ff/2017-10-14_19.37.42.jpg" style="width:100%">
 
  <div class="slidetext"><h2 class="header_title">angelooo</h2></div>
 
</div>
 
<div class="mySlides fade">
 
  <img src="https://static.igem.org/mediawiki/2017/7/73/20171027_123215.jpg" style="width:100%">
 
  <div class="slidetext"><h2 class="header_title">angelooo</h2></div>
 
</div>
 
<div class="mySlides fade">
 
  <img src="https://static.igem.org/mediawiki/2017/f/fb/20171027_123230.jpg" style="width:100%">
 
  <div class="slidetext"><h2 class="header_title">angelooo</h2></div>
 
</div>
 
<div class="mySlides fade">
 
  <img src="https://static.igem.org/mediawiki/2017/0/06/20171027_123249.jpg" style="width:100%">
 
  <div class="slidetext"><h2 class="header_title">Sudazima</h2></div>
 
</div>
 
</div>
 
  
<br>
+
  <section>
 +
  <div class="bar">
 +
<!-- Begin content block -->
 +
  <!--<ul id="menu"> -->
 +
  <ul class="menu">
 +
    <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">≡ Menu</a></li>
 +
  <li><a href="?page=home">Home</a></li>
 +
  <li><a href="#">Symposium</a>
 +
    <ul>
 +
    <li><a href="?page=program" onclick="">Program</a></li>
 +
    <li><a href="?page=daychair" onclick="">Day chair</a></li>
 +
    <li><a href="?page=speakers" onclick="">Speakers</a></li>
 +
    <li><a href="?page=guestspeaker" onclick="">Guest speaker</a></li>
 +
    <li><a href="?page=location" onclick="">Location</a></li>
 +
    </ul>
 +
  </li>
 +
<!--  <li><a href="?page=gallery">Gallery</a></li>-->
 +
  <li><a href="?page=sponsors">Sponsors</a></li>
 +
  <li><a href="#">About us</a>
 +
    <ul>
 +
    <li><a href="?page=nanoscience" onclick="">Nanoscience</a></li>
 +
    <li><a href="?page=topmaster" onclick="">Top Master</a></li>
 +
    <li><a href="?page=recom" onclick="">Recommendations</a></li>
 +
    </ul>
 +
  </li>
 +
  <li><a href="?page=contact">Contact</a></li>
 +
  <li class="lilast"><a href="?page=registration">Registration</a></li>
 +
  </ul>
 +
</div>
 +
</section>
  
<div style="text-align:center">
+
<script>
  <span class="dot"></span>
+
function myFunction() {
  <span class="dot"></span>
+
    document.getElementsByClassName("bar")[0].classList.toggle("res");
  <span class="dot"></span>
+
    document.getElementsByClassName("menu")[0].classList.toggle("res");
  <span class="dot"></span>
+
}
  <span class="dot"></span>
+
</script>
  <span class="dot"></span>
+
 
  <span class="dot"></span>
+
<div class="main-col">
  <span class="dot"></span>
+
 
 +
<h2><a href="https://2017.igem.org/Team:Groningen/test1">back to test 1</a></h2>
 +
 
 +
<div>hicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
 +
 
 +
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
 +
 
 +
Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet.
 +
Sub heading style
 +
 
 +
Nunc ut ornare odio. Proin massa turpis, porta at dolor non, tempus sagittis risus. Maecenas ornare, eros eget commodo sagittis, neque orci consectetur risus, sed convallis purus
 +
# First Name Last Name Username
 +
1 Mark Otto @mdo
 +
2 Jacob Thornton @fat
 +
3 Larry the Bird @twitter
 +
The Route
 +
 
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
 +
Hotel.
 +
795 Folsom Ave, Suite 600
 +
San Francisco, CA 94107
 +
P: (123) 456-7890
 +
Full Name
 +
first.last@example.com
 +
 
 +
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
 +
 
 +
Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Cras nec libero leo. Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio. Etiam suscipit sapien purus, suscipit pharetra tellus lobortis ut. Maecenas commodo feugiat justo ac ullamcorper. In volutpat nec velit posuere placerat. Suspendisse rutrum dolor sed semper pharetra.
 +
The Bike
 +
 
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
 +
 
 +
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
 +
 
 +
Description lists
 +
    A description list is perfect for defining terms.
 +
Euismod
 +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
 +
    Donec id elit non mi porta gravida at eg</div>
 +
 
 +
<div id="snavtest">
 +
<h3>THIS IS MY ID TARGET</h3>
 +
<a href="#snavtest">test this page</a><br>
 
</div>
 
</div>
  
<div id="demo">demo deafult</div>
+
<div>faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
<div class="democ">  classdeafult</div>
+
  
<script>
+
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
  
 +
Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet.
 +
Sub heading style
  
document.getElementById("demo").innerHTML = "wokring";
+
Nunc ut ornare odio. Proin massa turpis, porta at dolor non, tempus sagittis risus. Maecenas ornare, eros eget commodo sagittis, neque orci consectetur risus, sed convallis purus
 +
# First Name Last Name Username
 +
1 Mark Otto @mdo
 +
2 Jacob Thornton @fat
 +
3 Larry the Bird @twitter
 +
The Route
  
var elements = document.getElementsByClassName("democ");
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
elements.innerHTML[0] = "GGGGGGGGGGGGGGGG";
+
Hotel.
 +
795 Folsom Ave, Suite 600
 +
San Francisco, CA 94107
 +
P: (123) 456-7890
 +
Full Name
 +
first.last@example.com
  
 +
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
  
function showSlides() {
+
Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Cras nec libero leo. Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio. Etiam suscipit sapien purus, suscipit pharetra tellus lobortis ut. Maecenas commodo feugiat justo ac ullamcorper. In volutpat nec velit posuere placerat. Suspendisse rutrum dolor sed semper pharetra.
    var i;
+
The Bike
    var slides = document.getElementsByClassName("mySlides");
+
    var dots = document.getElementsByClassName("dot");
+
    for (i = 0; i < slides.length; i++) {
+
      slides[i].style.display = "none"; 
+
    }
+
    slideIndex++;
+
    if (slideIndex > slides.length) {slideIndex = 1}   
+
    for (i = 0; i < dots.length; i++) {
+
        dots[i].className = dots[i].className.replace(" activeslide", "");
+
    }
+
    slides[slideIndex-1].style.display = "block"; 
+
    dots[slideIndex-1].className += " activeslide";
+
    setTimeout(showSlides, 6000); // Change image every 6 seconds
+
}
+
var slideIndex = Math.floor((Math.random() * 8) + 1);
+
showSlides();
+
  
</script>
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas.
  
 +
Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi.
  
 +
Description lists
 +
    A description list is perfect for defining terms.
 +
Euismod
 +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
 +
    Donec id elit non mi porta gravida at eg</div>
  
  
 +
</div> <!-- main-col -->
  
 
<div class="footer">
 
<div class="footer">
 
<img id="bannerimg" usemap="#imagemap_sponsors" style="width: 100%;" src="https://static.igem.org/mediawiki/2017/b/b5/Banner.jpg" alt="Sponsors">
 
<img id="bannerimg" usemap="#imagemap_sponsors" style="width: 100%;" src="https://static.igem.org/mediawiki/2017/b/b5/Banner.jpg" alt="Sponsors">
 
</div>
 
</div>
 
 
</body>
 
</body>
</html>
+
<html>

Latest revision as of 19:33, 31 October 2017


back to test 1

hicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Sub heading style Nunc ut ornare odio. Proin massa turpis, porta at dolor non, tempus sagittis risus. Maecenas ornare, eros eget commodo sagittis, neque orci consectetur risus, sed convallis purus # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter The Route Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Hotel. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890 Full Name first.last@example.com Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Cras nec libero leo. Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio. Etiam suscipit sapien purus, suscipit pharetra tellus lobortis ut. Maecenas commodo feugiat justo ac ullamcorper. In volutpat nec velit posuere placerat. Suspendisse rutrum dolor sed semper pharetra. The Bike Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Description lists A description list is perfect for defining terms. Euismod Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eg

THIS IS MY ID TARGET

test this page
faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Sub heading style Nunc ut ornare odio. Proin massa turpis, porta at dolor non, tempus sagittis risus. Maecenas ornare, eros eget commodo sagittis, neque orci consectetur risus, sed convallis purus # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter The Route Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Hotel. 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890 Full Name first.last@example.com Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Maecenas tincidunt, ante in ultricies porta, magna ipsum convallis augue, non ornare turpis orci ac risus. Duis non enim sit amet libero ultricies egestas. Duis bibendum felis est, nec feugiat erat imperdiet sed. Donec aliquet, velit ac semper fermentum, quam leo eleifend nisl, non rhoncus sapien nibh ac massa. Integer mattis arcu nec suscipit laoreet. Cras nec libero leo. Nulla bibendum ligula ut nisi dictum, et interdum ipsum scelerisque. Nullam a volutpat tellus. Maecenas nisi est, ultricies in neque in, aliquet dictum odio. Etiam suscipit sapien purus, suscipit pharetra tellus lobortis ut. Maecenas commodo feugiat justo ac ullamcorper. In volutpat nec velit posuere placerat. Suspendisse rutrum dolor sed semper pharetra. The Bike Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consectetur ante a rhoncus. Praesent a sapien vulputate, vehicula risus et, congue mi. Praesent quis auctor enim. Aenean gravida, libero ut dignissim porta, elit nisi faucibus nisi, vitae faucibus lorem eros in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac varius diam. Mauris consectetur sed erat at dapibus. Fusce pulvinar est eu orci lacinia egestas. Phasellus facilisis nulla quis tortor adipiscing, eu blandit tortor pulvinar. In lacus purus, aliquet eu ante ut, tempor ultricies diam. Donec cursus neque neque, eget vehicula nisl commodo at. Fusce eu urna tempus, egestas ante id, facilisis dolor. Pellentesque venenatis ante convallis, ullamcorper erat at, malesuada elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo lectus ut luctus malesuada. Donec leo nisl, dignissim et ullamcorper ut, porta id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eros felis, consequat sed augue non, semper eleifend nisi. Description lists A description list is perfect for defining terms. Euismod Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eg