body{font-family:"Lato", sans-serif;}.side{height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background-image:url("https://media.gettyimages.com/photos/investment-theme-stockmarket-and-finance-business-analysis-with-picture-id1064143292?k=6&m=1064143292&s=612x612&w=0&h=r-LUfqYUbc4yU6hg0kZJbf2r4RkXKVGwAT3HsZPdxzo=");background-repeat:no-repeat;background-attachment:fixed;background-size:cover;background-position:center;overflow-x:hidden;transition:0.5s;padding-top:60px;text-align:center;}.side:before{background-color:rgba(0, 0, 0, 0.37);content:'';display:block;height:100%;position:absolute;width:100%;top:0;z-index:-9;}.rightside{height:100%;width:0;position:fixed;z-index:1;top:0;right:0;background-image:url("https://media.gettyimages.com/photos/he-knows-his-way-around-any-network-picture-id1138004657?k=6&m=1138004657&s=612x612&w=0&h=FAdl2CaEYV0LqU-0Ozl-ffmshvGKcT82i2jJsCEBFZg=");background-repeat:no-repeat;background-attachment:fixed;background-size:cover;background-position:center;overflow-x:hidden;transition:0.5s;padding-top:60px;text-align:center;}.rightside:before{background-color:rgba(0, 0, 0, 0.37);content:'';display:block;height:100%;position:absolute;width:100%;top:0;z-index:-9;}.rightside input[type=search]{border:none;outline:none;height:70px;width:100%;color:white;text-align:center;background:transparent;}.rightside input[type=search]:focus{border-bottom:3px solid white;}.rightside input[type=submit]{background:red;display:inline-block;padding:5px;color:white;font-size:18px;border:none;border-radius:3px;}.side a{padding:8px 8px 8px 8px;text-decoration:none;font-size:25px;color:yellow;display:block;transition:0.3s;}.side a:hover{color:white;}.closeb{position:absolute;top:0;right:25px;font-size:36px !important;margin-left:50px;}.closeb{color:green;}.nav-con{background:red;color:white;display:block;}.nav-con a{color:white;}.heads{padding-top:10px;}.heads a{background:-webkit-linear-gradient(left, darkblue, red);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:35px;font-family:serif;font-weight:bold;font-variant:small-caps;letter-spacing:-1px;}.tagline{font-size:12px;color:green;position:relative;top:-10px;font-weight:bold;}@media screen and (max-height:450px){.side{padding-top:15px;}.side a{font-size:18px;}}@media only screen and (min-width:500px){.heads a{font-size:60px;}.tagline{font-size:20px;}}Both HTML & JAVASCRIPT<!DOCTYPE html><head><script>function openNav(){document.getElementById("mySidenav").style.width = "100%";}function closeNav(){document.getElementById("mySidenav").style.width = "0";}