1

I have to achieve this effect as shown in the image, where the card is in focus and everything in the background has a dark overlay.

As of now I have been able to blur the background and keep the card in focus. Have a look at the sample code. NOTE: The html file is just a bunch of random text, please ignore it. The only element that is important is the div with class box that needs to be in focus.

enter image description here

* {
  margin: 0; padding: 0; box-sizing: border-box;
}

body {
  height: 100vh;
  background: lavender;
}

.box {
  position: absolute;
  height: 50vh;
  width: 50vw;
  top: 25vh;
  left: 25vw;
  border: 4px solid black;
  background: lime;
}

body>*:not(.box) {
  filter: blur(3px);
}
<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sed pulvinar proin gravida. Congue quisque egestas diam in arcu cursus. Quam adipiscing vitae proin sagittis nisl rhoncus
    mattis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Id diam maecenas ultricies mi eget mauris pharetra. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Et odio pellentesque diam volutpat. Tincidunt arcu non
    sodales neque. Nunc consequat interdum varius sit amet mattis vulputate enim. Dictumst quisque sagittis purus sit amet volutpat. Viverra justo nec ultrices dui sapien eget mi proin sed. Id aliquet risus feugiat in ante metus dictum at. Vitae congue
    mauris rhoncus aenean vel. Nunc sed id semper risus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Sapien pellentesque habitant morbi tristique senectus et netus.
    Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tincidunt augue interdum velit euismod in pellentesque. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Velit ut tortor pretium viverra. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames. Vitae suscipit tellus mauris a diam maecenas sed enim ut. At ultrices mi tempus imperdiet nulla malesuada pellentesque. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ipsum dolor
    sit amet consectetur adipiscing elit ut. Convallis a cras semper auctor. Risus feugiat in ante metus dictum at tempor commodo. Nisi quis eleifend quam adipiscing vitae. Velit dignissim sodales ut eu. Morbi blandit cursus risus at. Mauris sit amet
    massa vitae tortor condimentum lacinia quis. Ultrices vitae auctor eu augue. Tortor at auctor urna nunc. Lacus luctus accumsan tortor posuere ac ut consequat. Egestas congue quisque egestas diam in arcu cursus euismod. Suspendisse potenti nullam ac
    tortor vitae purus. Sed adipiscing diam donec adipiscing tristique. Parturient montes nascetur ridiculus mus mauris. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. In hac habitasse platea dictumst vestibulum rhoncus. Ut sem viverra
    aliquet eget sit amet tellus cras. Tincidunt nunc pulvinar sapien et. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Mattis pellentesque id nibh tortor id aliquet lectus proin. Nulla pharetra diam sit amet nisl suscipit
    adipiscing. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Magna sit amet purus gravida quis. Suspendisse sed nisi lacus sed viverra tellus in. Viverra maecenas accumsan lacus vel facilisis volutpat est. Consequat interdum varius sit
    amet. Tempus urna et pharetra pharetra massa massa ultricies. Facilisi cras fermentum odio eu. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nascetur
    ridiculus mus mauris vitae. Sit amet volutpat consequat mauris nunc congue. Facilisi cras fermentum odio eu feugiat. Egestas integer eget aliquet nibh praesent tristique. Purus viverra accumsan in nisl nisi. Ultrices tincidunt arcu non sodales neque
    sodales. In nibh mauris cursus mattis molestie. Facilisi etiam dignissim diam quis enim lobortis. Proin sed libero enim sed. Elit duis tristique sollicitudin nibh sit amet. Eget arcu dictum varius duis at consectetur lorem. Consectetur a erat nam
    at lectus. Diam sit amet nisl suscipit adipiscing bibendum est. Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat
    pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum
    pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio
    eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut
    diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum
    odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel
    quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras
    fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae
    et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi
    cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque
    id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla
    facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in
    nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla
    facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius
    quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam
    nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est
    ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim.
    Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim.
    Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere
    ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse
    in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et.
  </p>
  <div class="box"></div>
</body>

</html>
  • Does this answer your question? [Black transparent overlay on image hover with only CSS?](https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css) – Always Helping Aug 25 '20 at 06:52
  • [How To Create an Overlay](https://www.w3schools.com/howto/howto_css_overlay.asp) – Always Helping Aug 25 '20 at 06:53

3 Answers3

1

Your code is good, just need to take note of 2 things:

  1. You have a syntax error in your CSS reset (this is the main issue)

    * {
    margin: 0, padding: 0, box-sizing: border-box;
  }

You used , instead of ;

  1. Add the background-color of your choice (in your case, something dark grey)

* {
  margin: 0; padding: 0; box-sizing: border-box;
}

body {
  height: 100vh;
  background: lavender;
}

.box {
  position: absolute;
  height: 50vh;
  width: 50vw;
  top: 25vh;
  left: 25vw;
  border: 4px solid black;
  background: lime;
}

body>*:not(.box) {
  filter: blur(3px);
  background-color: grey;
}
<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sed pulvinar proin gravida. Congue quisque egestas diam in arcu cursus. Quam adipiscing vitae proin sagittis nisl rhoncus
    mattis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Id diam maecenas ultricies mi eget mauris pharetra. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Et odio pellentesque diam volutpat. Tincidunt arcu non
    sodales neque. Nunc consequat interdum varius sit amet mattis vulputate enim. Dictumst quisque sagittis purus sit amet volutpat. Viverra justo nec ultrices dui sapien eget mi proin sed. Id aliquet risus feugiat in ante metus dictum at. Vitae congue
    mauris rhoncus aenean vel. Nunc sed id semper risus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Sapien pellentesque habitant morbi tristique senectus et netus.
    Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tincidunt augue interdum velit euismod in pellentesque. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Velit ut tortor pretium viverra. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames. Vitae suscipit tellus mauris a diam maecenas sed enim ut. At ultrices mi tempus imperdiet nulla malesuada pellentesque. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ipsum dolor
    sit amet consectetur adipiscing elit ut. Convallis a cras semper auctor. Risus feugiat in ante metus dictum at tempor commodo. Nisi quis eleifend quam adipiscing vitae. Velit dignissim sodales ut eu. Morbi blandit cursus risus at. Mauris sit amet
    massa vitae tortor condimentum lacinia quis. Ultrices vitae auctor eu augue. Tortor at auctor urna nunc. Lacus luctus accumsan tortor posuere ac ut consequat. Egestas congue quisque egestas diam in arcu cursus euismod. Suspendisse potenti nullam ac
    tortor vitae purus. Sed adipiscing diam donec adipiscing tristique. Parturient montes nascetur ridiculus mus mauris. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. In hac habitasse platea dictumst vestibulum rhoncus. Ut sem viverra
    aliquet eget sit amet tellus cras. Tincidunt nunc pulvinar sapien et. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Mattis pellentesque id nibh tortor id aliquet lectus proin. Nulla pharetra diam sit amet nisl suscipit
    adipiscing. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Magna sit amet purus gravida quis. Suspendisse sed nisi lacus sed viverra tellus in. Viverra maecenas accumsan lacus vel facilisis volutpat est. Consequat interdum varius sit
    amet. Tempus urna et pharetra pharetra massa massa ultricies. Facilisi cras fermentum odio eu. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nascetur
    ridiculus mus mauris vitae. Sit amet volutpat consequat mauris nunc congue. Facilisi cras fermentum odio eu feugiat. Egestas integer eget aliquet nibh praesent tristique. Purus viverra accumsan in nisl nisi. Ultrices tincidunt arcu non sodales neque
    sodales. In nibh mauris cursus mattis molestie. Facilisi etiam dignissim diam quis enim lobortis. Proin sed libero enim sed. Elit duis tristique sollicitudin nibh sit amet. Eget arcu dictum varius duis at consectetur lorem. Consectetur a erat nam
    at lectus. Diam sit amet nisl suscipit adipiscing bibendum est. Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat
    pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum
    pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio
    eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut
    diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum
    odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel
    quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras
    fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae
    et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi
    cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque
    id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla
    facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in
    nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla
    facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius
    quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam
    nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est
    ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim.
    Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim.
    Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere
    ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse
    in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et.
  </p>
  <div class="box">TEST</div>
</body>

</html>
Gosi
  • 2,004
  • 3
  • 24
  • 36
0

I would suggest you use this html structure:

<div class="box-parent">
    <div class="box"></div>
</div>

with this styling:

.box-parent {
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 500;
}

.box-parent will be the dark fullscreen overlay, while .box will contain the content, which is not darkened.

gurumaxi
  • 365
  • 2
  • 11
0

Add a div element with class overlay

<div class="overlay"></div>

Then apply this styling on this element

.overlay{
        position: fixed;    
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: rgb(0,0,0,0.6);
    }

Finally add z-index:1 to the box class

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    background: lavender;
}

.box{
    z-index: 1;
    position: absolute;
    height: 50vh;
    width: 50vw;
    top: 25vh;
    left: 25vw;
    border: 4px solid black;
    background: lime;
}

/*body > *:not(.box){
    filter: blur(3px);
}*/

.overlay{
    position: fixed;    
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgb(0,0,0,0.6);
}
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sed pulvinar proin gravida. Congue quisque egestas diam in arcu cursus. Quam adipiscing vitae proin sagittis nisl rhoncus mattis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Id diam maecenas ultricies mi eget mauris pharetra. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Et odio pellentesque diam volutpat. Tincidunt arcu non sodales neque. Nunc consequat interdum varius sit amet mattis vulputate enim. Dictumst quisque sagittis purus sit amet volutpat. Viverra justo nec ultrices dui sapien eget mi proin sed. Id aliquet risus feugiat in ante metus dictum at.

        Vitae congue mauris rhoncus aenean vel. Nunc sed id semper risus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Sapien pellentesque habitant morbi tristique senectus et netus. Magnis dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tincidunt augue interdum velit euismod in pellentesque. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Velit ut tortor pretium viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Vitae suscipit tellus mauris a diam maecenas sed enim ut. At ultrices mi tempus imperdiet nulla malesuada pellentesque. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ipsum dolor sit amet consectetur adipiscing elit ut. Convallis a cras semper auctor. Risus feugiat in ante metus dictum at tempor commodo. Nisi quis eleifend quam adipiscing vitae.

        Velit dignissim sodales ut eu. Morbi blandit cursus risus at. Mauris sit amet massa vitae tortor condimentum lacinia quis. Ultrices vitae auctor eu augue. Tortor at auctor urna nunc. Lacus luctus accumsan tortor posuere ac ut consequat. Egestas congue quisque egestas diam in arcu cursus euismod. Suspendisse potenti nullam ac tortor vitae purus. Sed adipiscing diam donec adipiscing tristique. Parturient montes nascetur ridiculus mus mauris. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. In hac habitasse platea dictumst vestibulum rhoncus. Ut sem viverra aliquet eget sit amet tellus cras. Tincidunt nunc pulvinar sapien et. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Mattis pellentesque id nibh tortor id aliquet lectus proin. Nulla pharetra diam sit amet nisl suscipit adipiscing. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Magna sit amet purus gravida quis.

        Suspendisse sed nisi lacus sed viverra tellus in. Viverra maecenas accumsan lacus vel facilisis volutpat est. Consequat interdum varius sit amet. Tempus urna et pharetra pharetra massa massa ultricies. Facilisi cras fermentum odio eu. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Nascetur ridiculus mus mauris vitae. Sit amet volutpat consequat mauris nunc congue. Facilisi cras fermentum odio eu feugiat. Egestas integer eget aliquet nibh praesent tristique. Purus viverra accumsan in nisl nisi. Ultrices tincidunt arcu non sodales neque sodales. In nibh mauris cursus mattis molestie. Facilisi etiam dignissim diam quis enim lobortis. Proin sed libero enim sed. Elit duis tristique sollicitudin nibh sit amet. Eget arcu dictum varius duis at consectetur lorem. Consectetur a erat nam at lectus. Diam sit amet nisl suscipit adipiscing bibendum est.

        Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et. Risus ultricies tristique nulla aliquet enim. Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Faucibus nisl tincidunt eget nullam non nisi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Amet cursus sit amet dictum sit amet justo donec enim. Varius quam quisque id diam vel quam elementum pulvinar etiam. At in tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse in est ante in. Vel eros donec ac odio tempor orci dapibus ultrices in. Lacus luctus accumsan tortor posuere ac. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vestibulum morbi blandit cursus risus at. Cursus eget nunc scelerisque viverra mauris in. Ut porttitor leo a diam sollicitudin tempor. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Vitae et leo duis ut diam quam nulla porttitor. Vitae aliquet nec ullamcorper sit amet risus nullam.Pellentesque habitant morbi tristique senectus et netus et. Tristique senectus et netus et.
    </p>
    <div class="box"></div>
    <div class="overlay"></div>
</body>
</html>
Som Shekhar Mukherjee
  • 4,701
  • 1
  • 12
  • 28