Difference between revisions of "Team:KU Leuven/Notebook"

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
html {
+
html, body {
 
  width: 100%;
 
  width: 100%;
−
  height: 100%;
 
 
}
 
}
  
−
body {
+
h1 {
−
  background: -webkit-linear-gradient(45deg, rgba(66, 183, 245, 0.8) 0%, rgba(66, 245, 189, 0.4) 100%);
+
  font-size: 26px;
−
  background: linear-gradient(45deg, rgba(66, 183, 245, 0.8) 0%, rgba(66, 245, 189, 0.4) 100%);
+
  background: #00bcd4;
−
  color: rgba(0, 0, 0, 0.6);
+
  color: white;
−
  font-family: "Roboto", sans-serif;
+
  padding: 40px 0 100px 20%;
−
  font-size: 14px;
+
  margin-bottom: 50px;
−
  line-height: 1.6em;
+
−
  -webkit-font-smoothing: antialiased;
+
−
  -moz-osx-font-smoothing: grayscale;
+
 
}
 
}
  
−
[ripple] {
+
label, p, a, h1, div {
−
  z-index: 1;
+
  font-family: Roboto, sans-serif;
 +
}
 +
 
 +
.tab-wrap {
 +
  width: 50%;
 +
  margin-left: 20%;
 
  position: relative;
 
  position: relative;
−
  overflow: hidden;
+
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  top: -106px;
 
}
 
}
−
[ripple] .ripple {
+
 
 +
input[type="radio"][name="tabs"] {
 
  position: absolute;
 
  position: absolute;
−
  background: #FFFFFF;
+
  z-index: -1;
−
  width: 12px;
+
−
  height: 12px;
+
−
  border-radius: 100%;
+
−
  -webkit-animation: ripple 1.6s;
+
−
          animation: ripple 1.6s;
+
 
}
 
}
−
 
+
input[type="radio"][name="tabs"]:checked + .tab-label-content label {
−
@-webkit-keyframes ripple {
+
  color: white;
−
  0% {
+
−
    -webkit-transform: scale(1);
+
−
            transform: scale(1);
+
−
    opacity: 0.2;
+
−
  }
+
−
  100% {
+
−
    -webkit-transform: scale(40);
+
−
            transform: scale(40);
+
−
    opacity: 0;
+
−
  }
+
 
}
 
}
−
 
+
input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
−
@keyframes ripple {
+
  display: block;
−
  0% {
+
−
    -webkit-transform: scale(1);
+
−
            transform: scale(1);
+
−
    opacity: 0.2;
+
−
  }
+
−
  100% {
+
−
    -webkit-transform: scale(40);
+
−
            transform: scale(40);
+
−
    opacity: 0;
+
−
  }
+
 
}
 
}
−
.tabs {
+
input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide {
−
  z-index: 15px;
+
  left: calc((100% / 4) * 0);
−
  position: relative;
+
−
  background: #FFFFFF;
+
−
  width: 600px;
+
−
  border-radius: 4px;
+
−
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
+
−
  box-sizing: border-box;
+
−
  margin: 100px auto 10px;
+
−
  overflow: hidden;
+
 
}
 
}
−
.tabs-header {
+
input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide {
−
  position: relative;
+
  left: calc((100% / 4) * 1);
−
  background: #4285F4;
+
−
  overflow: hidden;
+
 
}
 
}
−
.tabs-header .border {
+
input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ .slide {
−
  position: absolute;
+
  left: calc((100% / 4) * 2);
−
  bottom: 0;
+
−
  left: 0;
+
−
  background: #F4B142;
+
−
  width: auto;
+
−
  height: 2px;
+
−
  -webkit-transition: 0.3s ease;
+
−
  transition: 0.3s ease;
+
 
}
 
}
−
.tabs-header ul {
+
input[type="radio"][name="tabs"]:nth-of-type(4):checked ~ .slide {
−
  display: -webkit-box;
+
  left: calc((100% / 4) * 3);
−
  display: -ms-flexbox;
+
−
  display: flex;
+
−
  -webkit-box-orient: horizontal;
+
−
  -webkit-box-direction: normal;
+
−
      -ms-flex-direction: row;
+
−
          flex-direction: row;
+
−
  -ms-flex-wrap: wrap;
+
−
      flex-wrap: wrap;
+
−
  width: calc(100% - 68px);
+
 
}
 
}
−
.tabs-header li {
+
input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide {
−
  -webkit-transition: 0.3s ease;
+
  left: 0;
−
  transition: 0.3s ease;
+
 
}
 
}
−
.tabs-header a {
+
 
−
  z-index: 1;
+
label {
−
  display: block;
+
  cursor: pointer;
 +
  color: rgba(255, 255, 255, 0.8);
 +
  background-color: #00bcd4;
 
  box-sizing: border-box;
 
  box-sizing: border-box;
−
  padding: 15px 20px;
+
  display: -webkit-inline-box;
−
  color: #FFFFFF;
+
  display: -ms-inline-flexbox;
−
  font-weight: 500;
+
  display: inline-flex;
−
  text-decoration: none;
+
−
  text-transform: uppercase;
+
−
}
+
−
.tabs-nav {
+
−
  position: absolute;
+
−
  top: 0;
+
−
  right: 0;
+
−
  background: #4285F4;
+
−
  display: -webkit-box;
+
−
  display: -ms-flexbox;
+
−
  display: flex;
+
 
  -webkit-box-align: center;
 
  -webkit-box-align: center;
 
      -ms-flex-align: center;
 
      -ms-flex-align: center;
 
          align-items: center;
 
          align-items: center;
−
  height: 100%;
+
  -webkit-box-pack: center;
−
  padding: 0 10px;
+
      -ms-flex-pack: center;
−
  color: #FFFFFF;
+
          justify-content: center;
−
  -webkit-user-select: none;
+
  text-align: center;
−
    -moz-user-select: none;
+
  height: 56px;
−
      -ms-user-select: none;
+
  -webkit-transition: color 0.2s ease;
−
          user-select: none;
+
  transition: color 0.2s ease;
 +
  width: 100%;
 
}
 
}
−
.tabs-nav:before {
+
 
−
  content: '';
+
.slide {
−
  z-index: 1;
+
  background: #ffeb3b;
 +
  width: calc(100% / 4);
 +
  height: 4px;
 
  position: absolute;
 
  position: absolute;
−
  top: 0;
 
 
  left: 0;
 
  left: 0;
−
  height: 100%;
+
  top: calc(100% - 4px);
−
  box-shadow: 0 0 20px 10px #4285F4;
+
  -webkit-transition: left 0.3s ease-out;
 +
  transition: left 0.3s ease-out;
 
}
 
}
−
.tabs-nav i {
+
 
−
  border-radius: 100%;
+
.tab-label-content {
−
  cursor: pointer;
+
  width: 100%;
 
}
 
}
−
.tabs-content {
+
.tab-label-content .tab-content {
−
  position: relative;
+
−
  padding: 15px 20px;
+
−
  -webkit-transition: 0.3s ease;
+
−
  transition: 0.3s ease;
+
−
  overflow: hidden;
+
−
}
+
−
.tabs-content:after {
+
−
  content: '';
+
 
  position: absolute;
 
  position: absolute;
−
  bottom: -1px;
+
  top: 100px;
−
  left: 0;
+
  left: 16px;
−
  display: block;
+
  line-height: 130%;
−
  width: 100%;
+
−
  height: 1px;
+
−
  box-shadow: 0 0 20px 10px #FFFFFF;
+
−
}
+
−
.tabs-content .tab {
+
 
  display: none;
 
  display: none;
−
}
 
−
.tabs-content .tab.active {
 
−
  display: block;
 
 
}
 
}
  
−
.pen-footer {
+
@media screen and (max-width: 800px) {
−
  display: -webkit-box;
+
  h1 {
−
  display: -ms-flexbox;
+
    padding: 40px 0 90px 10%;
−
  display: flex;
+
  }
−
  -webkit-box-orient: horizontal;
+
 
−
  -webkit-box-direction: normal;
+
  .tab-wrap {
−
      -ms-flex-direction: row;
+
    width: 80%;
−
          flex-direction: row;
+
    margin-left: 10%;
−
  -webkit-box-pack: justify;
+
    top: -106px;
−
      -ms-flex-pack: justify;
+
  }
−
          justify-content: space-between;
+
−
  width: 600px;
+
−
  margin: 20px auto 100px;
+
 
}
 
}
−
.pen-footer a {
+
.follow {
−
  color: #FFFFFF;
+
  width: 42px;
−
  font-size: 12px;
+
  height: 42px;
 +
  border-radius: 50px;
 +
  background: #03A9F4;
 +
  display: block;
 +
  margin: 300px auto 0;
 +
  white-space: nowrap;
 +
  padding: 13px;
 +
  box-sizing: border-box;
 +
  color: white;
 +
  -webkit-transition: all 0.2s ease;
 +
  transition: all 0.2s ease;
 +
  font-family: Roboto, sans-serif;
 
  text-decoration: none;
 
  text-decoration: none;
−
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
+
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
.follow i {
 +
  margin-right: 20px;
 +
  -webkit-transition: margin-right 0.2s ease;
 +
  transition: margin-right 0.2s ease;
 
}
 
}
−
.pen-footer a .material-icons {
+
.follow:hover {
−
  width: 12px;
+
  width: 134px;
−
  margin: 0 5px;
+
}
−
  vertical-align: middle;
+
.follow:hover i {
−
  font-size: 12px;
+
  margin-right: 10px;
 
}
 
}
  
−
.cp-fab {
+
@media screen and (max-width: 800px) {
−
  background: #FFFFFF !important;
+
  .follow {
−
  color: #4285F4 !important;
+
    margin: 400px auto 0;
 +
  }
 
}
 
}
 
</style>
 
</style>
−
 
+
<h1>Material Design CSS Only Tabs</h1>
−
<div class="tabs">
+
<div class="tab-wrap">
−
   <div class="tabs-header">
+
    
−
    <div class="border"></div>
+
    <input type="radio" name="tabs" id="tab1" checked>
−
     <ul>
+
     <div class="tab-label-content" id="tab1-content">
−
      <li class="active"><a href="#tab-1" tab-id="1" ripple="ripple" ripple-color="#FFF">Tab 1</a></li>
+
      <label for="tab1">Tab 1</label>
−
       <li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#FFF">Tab 2</a></li>
+
       <div class="tab-content">TAB 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet eget lectus eu congue. Nam finibus urna eget nisl aliquam, in dictum ligula feugiat. Donec mollis ligula purus, et interdum velit bibendum eget. Aliquam magna diam, tristique eu libero nec, sagittis finibus sapien. Cras a ex ultricies, faucibus elit sagittis, maximus nisi. Donec quis arcu sapien. Aenean risus nibh, varius sed porttitor a, ornare nec leo. Sed vitae lacus in ipsum varius sagittis. Ut in quam cursus, ullamcorper sapien posuere, laoreet elit. Suspendisse interdum, risus ut ultricies scelerisque, nibh est commodo leo, sed tristique nisl odio et turpis. Fusce pellentesque nunc nec arcu feugiat accumsan. Praesent mauris sem, eleifend sit amet tortor in, cursus vehicula arcu. Curabitur convallis sit amet nunc ac feugiat. Sed at risus id diam porta pretium id vel felis. Donec nec dui id nisl hendrerit laoreet eu id odio.</div>
−
      <li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#FFF">Tab 3</a></li>
+
    </div>
−
      <li><a href="#tab-4" tab-id="4" ripple="ripple" ripple-color="#FFF">Tab 4</a></li>
+
   
−
       <li><a href="#tab-5" tab-id="5" ripple="ripple" ripple-color="#FFF">Tab 5</a></li>
+
    <input type="radio" name="tabs" id="tab2">
−
     </ul>
+
    <div class="tab-label-content" id="tab2-content">
−
     <nav class="tabs-nav"><i class="material-icons" id="prev" ripple="ripple" ripple-color="#FFF">&#xE314;</i><i class="material-icons" id="next" ripple="ripple" ripple-color="#FFF">&#xE315;</i></nav>
+
      <label for="tab2">Tab 2</label>
−
  </div>
+
       <div class="tab-content">TAB 2 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.</div>
−
  <div class="tabs-content">
+
     </div>
−
    <div class="tab active" tab-id="1" >1. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Ellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.</div>
+
   
−
     <div class="tab" tab-id="2" style="display: none">2. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam.</div>
+
     <input type="radio" name="tabs" id="tab3">
−
    <div class="tab" tab-id="3">3. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.</div>
+
    <div class="tab-label-content" id="tab3-content">
−
    <div class="tab" tab-id="4">4. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</div>
+
      <label for="tab3">Tab 3</label>
−
    <div class="tab" tab-id="5">5. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</div>
+
      <div class="tab-content">TAB 3 - Donec vulputate ante ac ligula vestibulum, id mollis diam commodo. Integer at consequat magna. Sed elit sem, dictum nec porttitor ac, ultrices id enim. Morbi semper eros a enim malesuada, eu finibus erat dictum. Ut vitae orci a odio sagittis malesuada. Cras volutpat vel lorem in tempor. Duis ultricies lectus sit amet tellus vehicula faucibus. Etiam sed leo ac erat tempor feugiat at quis ipsum. Mauris pellentesque nisl lorem, ac finibus sapien sagittis vel. Donec et lobortis est. Vestibulum dignissim ligula nec erat interdum, quis sollicitudin metus pretium. Vestibulum quis dui sapien. Proin commodo justo ac orci elementum molestie. Aliquam mattis orci vitae volutpat commodo.</div>
−
  </div>
+
     </div>
 +
 
 +
    <input type="radio" name="tabs" id="tab4">
 +
    <div class="tab-label-content" id="tab4-content">
 +
      <label for="tab4">Tab 4</label>
 +
      <div class="tab-content">TAB 4 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.</div>
 +
    </div>
 +
   
 +
    <div class="slide"></div>
 +
 
 
</div>
 
</div>
−
<div class="pen-footer"><a href="https://www.behance.net/gallery/31103291/Tabs-UI-Library" target="_blank"><i class="material-icons">arrow_backward</i>View on Behance</a><a href="https://github.com/andyhqtran/UI-Library/tree/master/Tabs" target="_blank">View on Github<i class="material-icons">arrow_forward</i></a></div>
 
−
 
−
<script>
 
−
$(document).ready(function () {
 
−
 
−
  // Intial Border Position
 
−
  var activePos = $('.tabs-header .active').position();
 
−
 
−
  // Change Position
 
−
  function changePos() {
 
−
 
−
    // Update Position
 
−
    activePos = $('.tabs-header .active').position();
 
−
 
−
    // Change Position & Width
 
−
    $('.border').stop().css({
 
−
      left: activePos.left,
 
−
      width: $('.tabs-header .active').width()
 
−
    });
 
−
  }
 
−
 
−
  changePos();
 
−
 
−
  // Intial Tab Height
 
−
  var tabHeight = $('.tab.active').height();
 
−
 
−
  // Animate Tab Height
 
−
  function animateTabHeight() {
 
−
 
−
    // Update Tab Height
 
−
    tabHeight = $('.tab.active').height();
 
−
 
−
    // Animate Height
 
−
    $('.tabs-content').stop().css({
 
−
      height: tabHeight + 'px'
 
−
    });
 
−
  }
 
−
 
−
  animateTabHeight();
 
−
 
−
  // Change Tab
 
−
  function changeTab() {
 
−
    var getTabId = $('.tabs-header .active a').attr('tab-id');
 
−
 
−
    // Remove Active State
 
−
    $('.tab').stop().fadeOut(300, function () {
 
−
      // Remove Class
 
−
      $(this).removeClass('active');
 
−
    }).hide();
 
−
 
−
    $('.tab[tab-id=' + getTabId + ']').stop().fadeIn(300, function () {
 
−
      // Add Class
 
−
      $(this).addClass('active');
 
−
 
−
      // Animate Height
 
−
      animateTabHeight();
 
−
    });
 
−
  }
 
−
 
−
  // Tabs
 
−
  $('.tabs-header a').on('click', function (e) {
 
−
    e.preventDefault();
 
−
 
−
    // Tab Id
 
−
    var tabId = $(this).attr('tab-id');
 
−
 
−
    // Remove Active State
 
−
    $('.tabs-header a').stop().parent().removeClass('active');
 
−
 
−
    // Add Active State
 
−
    $(this).stop().parent().addClass('active');
 
−
 
−
    changePos();
 
−
 
−
    // Update Current Itm
 
−
    tabCurrentItem = tabItems.filter('.active');
 
−
 
−
    // Remove Active State
 
−
    $('.tab').stop().fadeOut(300, function () {
 
−
      // Remove Class
 
−
      $(this).removeClass('active');
 
−
    }).hide();
 
−
 
−
    // Add Active State
 
−
    $('.tab[tab-id="' + tabId + '"]').stop().fadeIn(300, function () {
 
−
      // Add Class
 
−
      $(this).addClass('active');
 
−
 
−
      // Animate Height
 
−
      animateTabHeight();
 
−
    });
 
−
  });
 
−
 
−
  // Tab Items
 
−
  var tabItems = $('.tabs-header ul li');
 
−
 
−
  // Tab Current Item
 
−
  var tabCurrentItem = tabItems.filter('.active');
 
−
 
−
  // Next Button
 
−
  $('#next').on('click', function (e) {
 
−
    e.preventDefault();
 
−
 
−
    var nextItem = tabCurrentItem.next();
 
−
 
−
    tabCurrentItem.removeClass('active');
 
−
 
−
    if (nextItem.length) {
 
−
      tabCurrentItem = nextItem.addClass('active');
 
−
    } else {
 
−
      tabCurrentItem = tabItems.first().addClass('active');
 
−
    }
 
−
 
−
    changePos();
 
−
    changeTab();
 
−
  });
 
−
 
−
  // Prev Button
 
−
  $('#prev').on('click', function (e) {
 
−
    e.preventDefault();
 
−
 
−
    var prevItem = tabCurrentItem.prev();
 
−
 
−
    tabCurrentItem.removeClass('active');
 
−
 
−
    if (prevItem.length) {
 
−
      tabCurrentItem = prevItem.addClass('active');
 
−
    } else {
 
−
      tabCurrentItem = tabItems.last().addClass('active');
 
−
    }
 
−
 
−
    changePos();
 
−
    changeTab();
 
−
  });
 
−
 
−
  // Ripple
 
−
  $('[ripple]').on('click', function (e) {
 
−
    var rippleDiv = $('<div class="ripple" />'),
 
−
      rippleOffset = $(this).offset(),
 
−
      rippleY = e.pageY - rippleOffset.top,
 
−
      rippleX = e.pageX - rippleOffset.left,
 
−
      ripple = $('.ripple');
 
−
 
−
    rippleDiv.css({
 
−
      top: rippleY - (ripple.height() / 2),
 
−
      left: rippleX - (ripple.width() / 2),
 
−
      background: $(this).attr("ripple-color")
 
−
    }).appendTo($(this));
 
−
 
−
    window.setTimeout(function () {
 
−
      rippleDiv.remove();
 
−
    }, 1500);
 
−
  });
 
−
});
 
−
</script>
 
 
</html>
 
</html>
 +
{{KU_Leuven_footer}}

Revision as of 21:30, 30 September 2017

Material Design CSS Only Tabs

TAB 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet eget lectus eu congue. Nam finibus urna eget nisl aliquam, in dictum ligula feugiat. Donec mollis ligula purus, et interdum velit bibendum eget. Aliquam magna diam, tristique eu libero nec, sagittis finibus sapien. Cras a ex ultricies, faucibus elit sagittis, maximus nisi. Donec quis arcu sapien. Aenean risus nibh, varius sed porttitor a, ornare nec leo. Sed vitae lacus in ipsum varius sagittis. Ut in quam cursus, ullamcorper sapien posuere, laoreet elit. Suspendisse interdum, risus ut ultricies scelerisque, nibh est commodo leo, sed tristique nisl odio et turpis. Fusce pellentesque nunc nec arcu feugiat accumsan. Praesent mauris sem, eleifend sit amet tortor in, cursus vehicula arcu. Curabitur convallis sit amet nunc ac feugiat. Sed at risus id diam porta pretium id vel felis. Donec nec dui id nisl hendrerit laoreet eu id odio.
TAB 2 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.
TAB 3 - Donec vulputate ante ac ligula vestibulum, id mollis diam commodo. Integer at consequat magna. Sed elit sem, dictum nec porttitor ac, ultrices id enim. Morbi semper eros a enim malesuada, eu finibus erat dictum. Ut vitae orci a odio sagittis malesuada. Cras volutpat vel lorem in tempor. Duis ultricies lectus sit amet tellus vehicula faucibus. Etiam sed leo ac erat tempor feugiat at quis ipsum. Mauris pellentesque nisl lorem, ac finibus sapien sagittis vel. Donec et lobortis est. Vestibulum dignissim ligula nec erat interdum, quis sollicitudin metus pretium. Vestibulum quis dui sapien. Proin commodo justo ac orci elementum molestie. Aliquam mattis orci vitae volutpat commodo.
TAB 4 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.