Check out this cool demo: View Demo
I am looking to add a shadow effect above the footer section, but not above the navigation bar.
nav{
background-color: blue;
height: 100px;
}
main{
box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.5);
background-color: #555555;
height: 100px;
position: relative;
}
footer{
background-color: yellow;
height: 100px;
}
footer > a,
#parent{
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
height: 100%;
width: 250px;
}<nav></nav>
<main></main>
<footer>
<a href="#">
<div id="parent">
This is link
</div>
</a>
</footer>