3

As you can see from the following code snippet, when you scroll the page the text passes under a fixed div. How can I make text behind this fixed div invisible? It still needs to be visible when not under the fixed div.

The background colour of the page content changes so I can't just set the colour of the fixed div to the colour of the background.

EDIT: Sorry I should have explained it a bit better. The overlay div won't be green, I want it to match the background colour of the content underneath so it gives the effect of the text disappearing as it passes through the overlay div. I can't just set it to the background colour of the content underneath because the background colour of the content underneath changes throughout the page.

div.pagecontent1 {
  height:300px ;
  background-color: white;
  color: black;
}

div.pagecontent2 {
  height:300px ;
  background-color: black;
  color: white;

}

div.overlay {
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 500;
  height: 100px;
  background-color: green;
  opacity: 0.5;
}
<div class="pagecontent1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>

<div class="overlay"></div>
Chris
  • 431
  • 5
  • 11
  • 18
  • 1
    You could try `background-color:inherit;` if the immediate parent div is the background you speak of – pokeybit Apr 21 '18 at 15:36
  • 2
    Changing the opacity of `.overlay` to 1 is not an option, right? – Parama Kar Apr 21 '18 at 15:38
  • 1
    Maybe this link can help you..... https://stackoverflow.com/questions/6529421/hide-scrollable-content-behind-transparent-fixed-position-divs-when-scrolling-th – Paul Cruz Apr 21 '18 at 15:40
  • @pokeybit - The background colour changes throughout the page so that's not an option – Chris Apr 21 '18 at 15:53
  • @Parama Kar - The background colour changes throughout the page so that's not an option – Chris Apr 21 '18 at 15:53
  • @Paul Martin - The background colour changes throughout the page so that's not an option unfortunately – Chris Apr 21 '18 at 15:56
  • if I may, if what Parama Kar proposed is not an option because of a client/system/project requirement, fair enough, but because *The background colour changes throughout the page*?, I don't get it, if you set the opacity of `.overlay` to 1, it does not matter if what's behind it changes its background color, right? – Scaramouche Apr 21 '18 at 15:56
  • @Scaramouche - If I set opacity to 1 and set the background colour of the overlay div to black, this would have the desired effect on the page content with a black background, but not the desired effect on page content with a white background. If I set opacity to 1 and set the background colour of the overlay div to white, this would have the desired effect on the page content with a white background, but not the desired effect on page content with a black background. EDIT Ok just realised why there is confusion. I will edit the the OP – Chris Apr 21 '18 at 16:01
  • so basically, it means I don't know what *the desired effect on the page content* is :). from your question I understood what you want is to *make text behind this fixed div invisible*, which IS achievable by making such fixed div's opacity to 1, it does not matter what color it is, or what color the background is, if you set the fixed div's opacity to 1, NOTHING behind it will be visible, have you tried it and seen the result? – Scaramouche Apr 21 '18 at 16:08
  • @Scaramouche - I agree the original question was unclear. I have updated it. – Chris Apr 21 '18 at 16:17
  • there you go, that is a whole new question :) now, a suggestion based on that edit, have you consider putting one div (the one containing the text) above the other (the fixed one) instead of on top of each other; this way you are all set, not worrying about opacities or backgrounds, understand? unless, again, there is some requirement that binds you to stick to your current scenario – Scaramouche Apr 21 '18 at 16:22
  • @Scaramouche - I don't think you understand the question. Take a look at Temani Afif's solution – Chris Apr 21 '18 at 16:31

1 Answers1

1

Here is an idea using linear-gradient and some JS to adjust the position:

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--y', (-scroll)+"px");
}
body {
 margin:0;
}
.pagecontent {
  background:linear-gradient(to bottom,black 50%,white 0)0 0/100% 640px;
  color: black;
}

.pagecontent p {
  height:300px ;
  padding:10px;
  margin:0;
}
.pagecontent p:nth-child(2n+1) {
  color:white;
}

.overlay {
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 500;
  height: 100px;
   /*Use the same gradient*/
   background:linear-gradient(to bottom,black 50%,white 0)0 0/100% 640px;
   /*Use fixed to have the same reference*/
   background-attachment:fixed;
   /*translate the Y position to create the scroll effect and follow the other gradient*/
   background-position:0 calc(var(--y));
}
<div class="pagecontent">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>

<div class="overlay"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415