Change the height of the div

Asked

Viewed 67 times

3

Hello, I would like to decrease the header height when scrolling the page, and return to normal size when scroll reaches the top of the page. I wanted the Ivs inside the header to be pulled up a bit, and the photo to stop appearing on the scroll too.

I used some Jquery codes but none of them worked as expected.

*{
  font: normal 10px 'helvetica';
}

header{
    width: 450px;
    height: 230px;
    background: rgba(255,255,255,.9);
    position: fixed;
    top: 0;
    z-index: 99;
    transform: translatex(-50%);
    left: 50%;
    text-align: center;
}

.icon{
    width: 40px;
    height: 40px;
    border-radius: 4px;
    padding: 7px;
    background: #fef2f2;
    margin: 20px auto;
    position: relative;
}

.icon img{
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

h1.drop, .tiny{margin: 10px auto;}

h1.drop a, h1.drop a:hover{color: #CAEDEB;}

.menu > ul{list-style-type: none;}

.menu > ul li{
    display: inline-block;
    margin: 0 10px;
}
<header>
    <div class="icon">
        <img src="https://66.media.tumblr.com/cad3af9c2861e7e554504078c78ee4b0/tumblr_prcrl6hFwD1vt2z6s_540.gif"/>
    </div>

    <h1 class="drop"><a href="/">teste</a></h1>

    <div class="tiny">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt.
    </div>

    <nav class="menu">
        <ul>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
            <li><a href="/">link</a></li>
        </ul>
    </nav>
</header>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus. Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis. Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit convallis.

Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo. Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi eu nulla odio.

Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus. Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et. Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus. Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis. Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit convallis.

Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo. Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi eu nulla odio.

Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus. Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et. Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus. Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis. Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit convallis.

Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo. Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi eu nulla odio.

Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus. Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et. Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus. Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis. Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit convallis.

Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo. Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi eu nulla odio.

Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus. Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et. Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus. Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis. Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit convallis.

Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo. Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi eu nulla odio.

Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus. Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et. Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

  • Welcome to Sopt Moon, you can show something in javascript you’ve tried?

  • Hi Bruno, at the moment I delete the codes I used, but I tried using this one: https://codepen.io/mrmrp/pen/VYjZwW, and another using . stop(). Animate().

1 answer

4


Here is a simple example, just vc add a class in your <header> when the scroll is greater than 1px for example, and when the scroll for 0px you remove the class.

inserir a descrição da imagem aqui

When you add the class on .menu, guy .menu.classeAdicionada {} you change whatever you want inside the menu, like .menu.classeAdicionada .icon {}. To make the transition smooth you use the transition

So follow the example

$(window).scroll(function () {
  var scroll = $(window).scrollTop();
  if (scroll >= 1) { // 1 é a distancia que vc rola antes da logo sumir, pode ser 100 por exemplo, para 100px
    $("#top-bar").addClass("rola");
  } else {
    $("#top-bar").removeClass("rola");
  }
});
* {
  font: normal 20px 'helvetica';
}

header {
  width: 450px;
  height: 230px;
  background: rgba(255, 255, 255, .9);
  position: fixed;
  top: 0;
  z-index: 99;
  transform: translatex(-50%);
  left: 50%;
  text-align: center;
}


.icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  padding: 7px;
  background: #fef2f2;
  margin: 20px auto;
  position: relative;
  transition: all 500ms;

}

.icon img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

h1.drop,
.tiny {
  margin: 10px auto;
}

h1.drop a,
h1.drop a:hover {
  color: #CAEDEB;
}

.menu>ul {
  list-style-type: none;
}

.menu>ul li {
  display: inline-block;
  margin: 0 10px;
}

#top-bar.rola {
  transition: all 500ms;
  height: 160px;
}

#top-bar.rola .icon {
  height: 0;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


<header id="top-bar">
  <div class="icon">
    <img src="https://66.media.tumblr.com/cad3af9c2861e7e554504078c78ee4b0/tumblr_prcrl6hFwD1vt2z6s_540.gif" />
  </div>

  <h1 class="drop"><a href="/">teste</a></h1>

  <div class="tiny">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt.
  </div>

  <nav class="menu">
    <ul>
      <li><a href="/">link</a></li>
      <li><a href="/">link</a></li>
      <li><a href="/">link</a></li>
      <li><a href="/">link</a></li>
    </ul>
  </nav>
</header>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus.
  Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut
  vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor
  hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis.
  Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam
  ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl
  quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

  Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce
  congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus
  ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor
  porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar
  ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant
  morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit
  convallis.

  Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex
  nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi
  sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a
  odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor
  mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo.
  Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi
  eu nulla odio.

  Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus.
  Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur
  dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

  Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et.
  Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla
  auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a
  egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu.
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus.
  Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut
  vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor
  hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis.
  Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam
  ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl
  quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

  Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce
  congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus
  ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor
  porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar
  ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant
  morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit
  convallis.

  Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex
  nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi
  sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a
  odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor
  mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo.
  Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi
  eu nulla odio.

  Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus.
  Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur
  dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

  Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et.
  Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla
  auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a
  egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu.
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus.
  Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut
  vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor
  hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis.
  Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam
  ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl
  quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

  Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce
  congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus
  ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor
  porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar
  ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant
  morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit
  convallis.

  Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex
  nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi
  sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a
  odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor
  mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo.
  Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi
  eu nulla odio.

  Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus.
  Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur
  dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

  Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et.
  Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla
  auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a
  egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu.
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus.
  Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut
  vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor
  hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis.
  Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam
  ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl
  quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

  Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce
  congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus
  ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor
  porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar
  ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant
  morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit
  convallis.

  Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex
  nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi
  sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a
  odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor
  mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo.
  Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi
  eu nulla odio.

  Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus.
  Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur
  dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

  Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et.
  Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla
  auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a
  egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu.
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget dolor vel ante rhoncus elementum ut in metus.
  Donec volutpat volutpat lectus eu mollis. Suspendisse aliquam gravida ipsum quis efficitur. Cras vehicula sapien ut
  vulputate facilisis. Praesent est lacus, euismod sit amet enim vitae, scelerisque convallis odio. Nullam tempor
  hendrerit est, non lobortis odio euismod a. Quisque fermentum tristique est, et posuere mauris aliquam quis.
  Vestibulum elit enim, volutpat ac accumsan lacinia, pulvinar at mauris. Aenean risus libero, accumsan quis aliquam
  ac, tempor a neque. Nam lorem velit, pretium nec massa et, porta dapibus dui. Mauris dui sem, fringilla nec nisl
  quis, convallis faucibus augue. Nunc interdum et nibh eu aliquet.

  Phasellus cursus sollicitudin ligula, vel accumsan risus auctor et. Quisque posuere posuere risus non ornare. Fusce
  congue nunc nisl, ac dapibus ex eleifend sed. Mauris porttitor nec arcu eget venenatis. Etiam volutpat varius lectus
  ac lobortis. In malesuada nibh eget augue vehicula consequat. Sed blandit magna eu massa molestie, ac dictum dolor
  porta. Nam augue velit, aliquam eu erat vel, accumsan pretium augue. Integer quis commodo nulla. Aliquam pulvinar
  ullamcorper lorem, a ornare lacus venenatis a. Quisque fermentum erat non ultricies eleifend. Pellentesque habitant
  morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vulputate ex vel felis blandit
  convallis.

  Curabitur gravida accumsan placerat. Sed vestibulum ex sit amet augue imperdiet tempor ac vitae neque. Aenean ex
  nibh, sollicitudin eu ornare eu, fringilla sed augue. Donec dignissim convallis magna, eget porttitor mi
  sollicitudin non. Donec ultrices congue risus in iaculis. Phasellus at ipsum eget sapien lacinia elementum et a
  odio. Pellentesque posuere dolor varius enim ullamcorper laoreet. Morbi pulvinar, ipsum ut consequat sodales, tortor
  mauris feugiat nunc, in varius enim lorem vel risus. Mauris dui leo, varius nec tempus vel, porttitor vel leo.
  Mauris mattis ornare nisi ut commodo. Integer porta sagittis nisi, nec rhoncus libero. Proin vitae gravida mi. Morbi
  eu nulla odio.

  Donec bibendum ipsum dolor, vel congue tortor laoreet sed. Phasellus quis varius eros, condimentum mollis metus.
  Maecenas nec tincidunt elit, et molestie odio. Mauris consectetur velit ut nisl lobortis accumsan. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus gravida ante sit amet dui efficitur
  dapibus eget laoreet sem. Nunc vitae dolor ante. Proin a lacus eu massa hendrerit eleifend.

  Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras volutpat diam orci, vel pulvinar erat tempus et.
  Aliquam eget leo congue, venenatis nunc blandit, hendrerit sem. Donec vitae massa lorem. Aliquam bibendum fringilla
  auctor. Phasellus efficitur luctus accumsan. Mauris cursus tortor a leo luctus placerat. Nunc ante lacus, ornare a
  egestas eget, vehicula et sapien. In at iaculis urna. Nulla id diam vitae sapien vestibulum semper quis ut arcu.
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>

  • Good Hugan answer, just got a little strange the name of this classe there.

  • 1

    @Andréfilipe Easter Egg of the buzzing #sqn, your head that is polluted even rss

  • 1

    Thanks Hugo, I think my problem before was just in building css (and I’ll try to ignore the class name kkk)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.