<!-- Important Resources -->

    <!-- Material Icons -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />

    <!-- google fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap"
      rel="stylesheet"
    />

    <link
      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap"
      rel="stylesheet"
    /> 

 <!-- Important Resources -->

 <nav class="navbar">
      <a href="#" class="navbar-logo"
        ><i class="material-icons">fastfood</i> foodRoad</a
      >
      <ul class="navbar-links">
        <li class="navbar-dropdown">
          <a href="#">Soups</a>
          <div class="dropdown">
            <a href="#">Tomato Soup</a>
            <a href="#">Veg Manchow Soup</a>
            <a href="#">Veg Hot Soup</a>
          </div>
        </li>
        <li class="navbar-dropdown">
          <a href="#">Sweets</a>
          <div class="dropdown">
            <a href="#">Ladoo</a>
            <a href="#">Besan Ladoo</a>
            <a href="#">Ghee Besan Ladoo</a>
            <a href="#">Nariyal Ladoo</a>
            <a href="#">Kaju Katli</a>
            <a href="#">Rasgulla</a>
          </div>
        </li>
        <li class="navbar-dropdown">
          <a href="#">Breads</a>
          <div class="dropdown">
            <a href="#">Lachha Paratha</a>
            <a href="#">Rumali Roti</a>
            <a href="#">Tandoori Roti</a>
            <a href="#">Butter Roti</a>
            <a href="#">Plain Naan</a>
            <a href="#">Butter Naan</a>
          </div>
        </li>
        <li class="navbar-dropdown">
          <a href="#">Rice</a>
          <div class="dropdown">
            <a href="#">Plain Rice</a>
            <a href="#">Veg Pulao</a>
            <a href="#">Veg Biryani</a>
            <a href="#">Paneer Biryani</a>
            <a href="#">Lemon Rice</a>
            <a href="#">Veg Kashmiri Pulao</a>
          </div>
        </li>
        <li class="navbar-dropdown">
          <a href="#">Chinese</a>
          <div class="dropdown">
            <a href="#">Paneer Chill Dry</a>
            <a href="#">Paneer Garlic</a>
            <a href="#">Veg Garlic</a>
            <a href="#">Veg Chilli</a>
          </div>
        </li>
      </ul>
    </nav>
    <header class="header">
      <div class="header-inner">
        <h1>Food House</h1>
        <form>
          <input type="search" placeholder="Enter Your Location" />
          <div class="overlay"></div>
        </form>
      </div>
    </header>

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

body {
  font-family: "Lato", sans-serif;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: -1;
  opacity: 0;
  transition: 1s all;
}

.navbar {
  display: flex;
  align-items: center;
  width: 100vw;
  background-color: #fff;
  box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  padding: 0px 70px;
  background-color: #fff;
}
.navbar-logo {
  color: #ff3f34;
  text-decoration: none;
  font-size: 25px;
  padding: 0px 20px;
}

.navbar-links {
  list-style-type: none;
  display: flex;
}
.navbar-links li a {
  display: block;
  text-decoration: none;
  color: #444;
  padding: 20px 20px;
  font-weight: 700;
  transition: 0.4s all;
}

.navbar-links li.navbar-dropdown {
  position: relative;
}

.navbar-links li.navbar-dropdown:hover .dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

.navbar-links li.navbar-dropdown .dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: 20px 0;
  top: 100%;
  transform: translateY(50px);
  left: 0;
  width: 250px;
  background-color: #fff;
  box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  z-index: 111;
  transition: 0.4s all;
}
.navbar-links li.navbar-dropdown .dropdown a {
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 400;
}
.navbar-dropdown .dropdown a:hover {
  padding-left: 30px;
}
.navbar-links li a:hover {
  color: #ff3f34;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 90vh;
  /* background-color: #f00; */
  background-image: url("http://lorempixel.com/1366/698/food/");
  background-size: cover;
}

.header-inner {
  text-align: center;
  color: #ff3f34;
  text-shadow: 0px 10px 10px rgba(0, 0, 0, .8);
}

.header-inner h1 {
  font-family: "Great Vibes", cursive;
  font-size: 130px;
}

.header-inner form input[type="search"] {
  position: relative;
  width: 500px;
  border: none;
  padding: 15px;
  border-radius: 27px;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.3);
  z-index: 11;
}
.header-inner form input[type="search"]:focus {
  outline: none;
}

.header-inner form input[type="search"]:focus + div {
  z-index: 1;
  opacity: 1;
}

::placeholder {
  color: #666;
  font-weight: 400;
}

// No JavaScript Required 
// Created By Pawan Mall / www.pawanmall.net

 <div class="banner">
  <div class="inner">
    <h1>Pawan Mall</h1>
  </div>
</div>

:root {
  --img: linear-gradient(120deg, rgba(43, 62, 1, 0.82) 0%, rgba(12, 93, 23, 0.69) 100%), url(https://lh3.ggpht.com/p/AF1QipPMMGScLxelev5oVEp34fh8AJerF40vWMaMFuk=s512);
  --br: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);
  --bb: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
  --bl: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
  --bt: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
  --p: 20px;
  --bw: 2px;
  --t: 1s;
  --td: 200ms;
  --te: ease-out;
}

body {
  height: 100vh;
  display: flex;
  background-color: darkslategray;
}

.banner {
  --w: 720px;
  --h: 200px;
  max-width: var(--w);
  width: 100%;
  margin: auto;
  height: var(--h);
  background-image: var(--img);
  background-size: var(--w);
  background-repeat: no-repeat;
  background-position: center;
  transition: background-size var(--t);
  position: relative;
  box-shadow: 0px 30px 30px -20px rgba(0, 0, 0, 0.45);
}
.banner .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.banner .inner > h1 {
  position: relative;
  font-family: serif;
  color: white;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-size: 1em;
  transition: var(--td);
}
@media (min-width: 480px) {
  .banner .inner > h1 {
    font-size: 2em;
  }
}
@media (min-width: 768px) {
  .banner .inner > h1 {
    font-size: 3em;
  }
}
.banner .inner::before,
.banner .inner::after, .banner::after, .banner::before {
  content: '';
  position: absolute;
}
.banner::before {
  top: var(--p);
  right: var(--p);
  height: 0;
  width: var(--bw);
  background-image: var(--br);
  transition: height var(--td) var(--te) 0.75s;
}
.banner::after {
  bottom: var(--p);
  right: var(--p);
  width: 0;
  height: var(--bw);
  background-image: var(--bb);
  transition: width var(--td) var(--te) 0.5s;
}
.banner .inner::before {
  bottom: var(--p);
  left: var(--p);
  height: 0;
  width: var(--bw);
  background-image: var(--bl);
  transition: height var(--td) var(--te) 0.25s;
}
.banner .inner::after {
  top: var(--p);
  left: var(--p);
  height: var(--bw);
  width: 0;
  background-image: var(--bt);
  transition: width var(--td) var(--te) 0s;
}
.banner:hover::before {
  height: calc(var(--h) - var(--p) * 2);
  transition: height var(--td) var(--te) 0s;
}
.banner:hover::after {
  width: calc(100% - var(--p) * 2);
  transition: width var(--td) var(--te) 0.25s;
}
.banner:hover .inner::before {
  height: calc(var(--h) - var(--p) * 2);
  transition: height var(--td) var(--te) 0.5s;
}
.banner:hover .inner::after {
  width: calc(100% - var(--p) * 2);
  transition: width var(--td) var(--te) 0.75s;
}
@media (min-width: 768px) {
  .banner:hover {
    background-size: 760px;
  }
}

// NO JavaScript Required.... www.pawanmall.net

 <section> 

   <h1> Day / Night Mode Switch Toggle Using Html CSS and Javascript </h1> 

   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui accusamus quibusdam a, nesciunt inventore, suscipit praesentium rem ut, dolores impedit dolorum ipsum. Quo odio delectus, cumque pariatur aliquid quis aliquam officia, quos optio eaque amet tenetur possimus minima ratione vel!</p> 

   <p>Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident? Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident?</p> 

   <p>Porro ea voluptatibus commodi hic voluptas quae nesciunt ullam! Officia in, facilis tenetur incidunt omnis obcaecati. Sequi, fugiat? Est, architecto nesciunt obcaecati fugiat impedit odit non nobis. Perferendis sed, veritatis labore voluptatibus, possimus, assumenda obcaecati eaque distinctio a libero maxime.</p> 

   <p>Ipsum recusandae tempore adipisci cum, illum placeat eligendi eveniet accusamus in delectus nam, consequatur rem, sapiente dolor incidunt velit voluptas quibusdam laudantium nostrum nemo nobis libero deleniti. Quos ipsa tempore saepe. Praesentium aliquid perferendis maxime deserunt aspernatur fugiat nihil alias. Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident?</p> 

 </section> 

 <ul> 
   <li> 
     <span>Dark</span> 
     <span>Light</span> 
   </li> 
 </ul>

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Raleway&display=swap');
body{
  font-family: 'Raleway', sans-serif;
  margin:0;
  padding:0;
}

section
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 100px;
  transition: all 0.8s;
}
section.dark
{
  background-color: #444857;
  color: #fff;
  background: -webkit-linear-gradient(to bottom, #434343, #444857);
  background: linear-gradient(to bottom, #434343, #444857);
  transition: all 0.8s;
}
section p{
  font-family: 'Open Sans Condensed', sans-serif;
  line-height: 32px;
  text-align: justify;
}
ul{
  position: absolute;
  top: 20px;
  right: 20px;
  margin: 0;
  padding: 0;
  width: 100px;
  height: 30px;
  z-index: 1;
  border: 1px solid #000;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.8s;
}
ul.active{
  border-color: #fff;
  transition: all 0.8s;
}
ul li{
  list-style: none;
  width: 100%;
  height: 60px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
}
ul.active li{
  transform: translateY(-30px);
}
ul li span
{
  color: #fff;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
ul li span:nth-child(1)
{
  background-color: #2d303a;
  color: #fff;
}

$(document).ready(function(){
  $('ul').click(function(){
    $('ul').toggleClass('active');
    $('section').toggleClass('dark');
  });
})