<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');
  });
})