Responsive Web Footer | India Daily News Network
Tags: css, opensource, html, showdev
Published: 2022-09-21 15:18:50

**HTML CODE**

<footer>
  <div class="footer-gray">
    <div class="footer-custom">
      <div class="footer-lists">
        <div class="footer-list-wrap">
          <h6 class="ftr-hdr"><strong>Trending Search</strong></h6>
          <ul class="ftr-links-sub">
            <li><a href="https://indiadaily-news.blogspot.com/2022/09/iphone-14-can-now-be-delivered-to-you.html" rel="nofollow">IPhone 14 (30 mins) delivery</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/2022/09/flipkart-big-billion-days-sale-starts.html" rel="nofollow">Flipkart Big Billion Day Sale</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Amazon%20Great%20Indian%20Festival" rel="nofollow">Amazon Great Indian Festival</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/West%20Bengal%20News" rel="nofollow">West Bengal News</a></li>
            <li><a href="https://www.arcgis.com/apps/dashboards/bda7594740fd40299423467b48e9ecf6" rel="nofollow">COVID-19 LIVE</a></li>
          </ul>
          <h6 class="ftr-hdr"><strong>Top Trends</strong></h6>
          <ul class="ftr-links-sub">
            <li><a href="https://analytics.icmr.org.in/public/dashboard/149a9c89-de6d-4779-9326-5e8fed3323b6" rel="nofollow">COVID-19 VACCINE TRACKER</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Amazon%20India%20News" rel="nofollow">Amazon India News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Goa%20News" rel="nofollow">Goa News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/iPhone%2014" rel="nofollow">iPhone 14 Launch</a></li>
          </ul>
        </div>
        <!--/.footer-list-wrap-->
        <div class="footer-list-wrap">
          <h6 class="ftr-hdr"><strong>Popular Categories</strong></h6>
          <ul class="ftr-links-sub">
            <li><a href="https://indiadaily-news.blogspot.com/search/label/India%20News" rel="nofollow">India News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Sports%20News" rel="nofollow">Sports News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/World%20News" rel="nofollow">World News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/City%20News" rel="nofollow">City News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Bollywood%20News" rel="nofollow">Bollywood News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Celebrity%20News" rel="nofollow">Celebrity News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/AUTO%20NEWS" rel="nofollow">AUTO News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Education%20News" rel="nofollow">Education News</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Bollywood%20Movies" rel="nofollow">Bollywood Movies</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Technology" rel="nofollow">Technology</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Celebs%20Saree%20Looks" rel="nofollow">Celebs Saree Look</a></li>
          </ul>
        </div>
        <div class="footer-list-wrap">
          <h6 class="ftr-hdr"><strong>Trending Topics</strong></h6>
          <ul class="ftr-links-sub">
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Janhvi%20Kapoor%20News" rel="nofollow">Janhvi Kapoor</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Deepika%20Padukone%20News" rel="nofollow">Deepika Padukone</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Rashmika%20Mandanna%20News" rel="nofollow">Rashmika Mandanna</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Disha%20Patani%20News" rel="nofollow">Disha Patani</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Mouni%20Roy%20News" rel="nofollow">Mouni Roy</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Alia%20Bhatt%20News" rel="nofollow">Alia Bhatt</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Urfi%20Javed%20News" rel="nofollow">Urfi Javed</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Neha%20Sharma%20News" rel="nofollow">Neha Sharma</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Nikki%20Tamboli%20News" rel="nofollow">Nikki Tamboli</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Urvashi%20Rautela%20News" rel="nofollow">Urvashi Rautela</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Karishma%20Sharma%20News" rel="nofollow">Karishma Sharma</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Kiara%20Advani%20News" rel="nofollow">Kiara Advani</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Shah%20Rukh%20Khan%20News" rel="nofollow">Shah Rukh Khan</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Tamannaah%20Bhatia%20News" rel="nofollow">Tamannaah Bhatia</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Gauri%20Khan%20News" rel="nofollow">Gauri Khan</a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Palak%20Tiwari%20News" rel="nofollow">Palak Tiwari</a></li>
          </ul>
        </div>
        <div class="footer-list-wrap">
          <h6 class="ftr-hdr"><strong>Radio</strong></h6>
          <ul class="ftr-links-sub">
            <li><a href="https://www.ishq.com/" rel="nofollow">Ishq FM</a></li>
            </ul>
        </div>
        <!--/.footer-list-wrap-->
        <div class="footer-list-wrap">
          <h6 class="ftr-hdr"><strong>News & Entertainment</strong></h6>
          <ul class="ftr-links-sub">
              <li><a href="http://www.filmfare.com/" rel="nofollow"><strong>Filmfare</strong></a></li>
              <li><a href="https://gaana.com/newrelease" rel="nofollow"><strong>Online Songs</strong></a></li>
            <li><a href="https://www.zoomtventertainment.com/" rel="nofollow"><strong>Zoom</strong></a></li>
              <li><a href="https://www.whatshot.in/" rel="nofollow"><strong>Whats Hot</strong></a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Entertainment" rel="nofollow"><strong>Entertainment</strong></a></li>
            <li><a href="https://indiadaily-news.blogspot.com/search/label/Celeb%20Photoshoots" rel="nofollow"><strong>Celeb Photoshoots</strong></a></li>
          </ul>
        </div>
        <!--/.footer-list-wrap-->
      </div>
      <!--/.footer-lists-->
      <div class="footer-social">
        <h6 class="ftr-hdr"><strong>Follow Us</strong></h6>
        <ul>
          <li>
            <a href="https://twitter.com/IndiaDailyIN" title="Twitter" onclick="_gaq.push(['_trackSocial', 'Twitter', 'Follow', 'Footer', 'undefined', 'True']);">
              <img width="67" alt="Follow us on Twitter" src="https://www.pngitem.com/pimgs/m/39-390507_transparent-follow-us-png-twitter-png-download.png" />
            </a>
          </li>
        </ul>
      </div>
      <!--/.footer-social-->
      <div class="footer-legal">
        <p>&copy; 2022 India Daily News Network and it's affiliates. All Rights Reserved. | <a href="https://indiadaily-news.blogspot.com/p/privacy-policy-india-daily-news-network.html" rel="nofollow">Privacy Policy</a> | <a href="https://indiadaily-news.blogspot.com/p/correction-policy.html" rel="nofollow">Correction Policy</a> | <a href="https://indiadaily-news.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500" rel="nofollow">Sitemap</a> | <a href="https://developer-indiadaily.w3spaces.com/" rel="nofollow">Developer Logs</a> | <a href="https://linktr.ee/indiadaily" rel="nofollow">Source Code</a> | <a href="https://indiadaily-beta.blogspot.com/?utm_source=indiadaily-beta&utm_medium=auth-accounts&utm_campaign=beta-version" rel="nofollow">Beta Version</a></p>
        
        <p><a href="http://classify-technologies.mailchimpsites.com/?utm_source=india-daily-news-network&utm_medium=web-auth-share&utm_campaign=referral">This website is developed and managed by Classify Technologies LLC.</a> | Version: 1.0.6(22)</p>
        <p>This website is optimized for best viewing experience on Chrome, Safari, Microsoft Edge & Firefox.</p>
      </div></div></div></footer>

**CSS CODE**

body,
html {
  margin: 0;
  padding: 0;
}

.hidden {
  display: none;
}

.footer-gray {
  background-color: #FF0000;
  width: 100%;
}

.footer-custom {
  color: #FFFFFF;
  font: normal normal 12px/1.4 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  max-width: 1008px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px;
}

.footer-custom:after {
  display: table;
  clear: both;
  content: "";
}

.footer-lists:after {
  display: table;
  clear: both;
  content: "";
}

.ftr-hdr {
  color: #FFFFFF;
  font: 22px/1.4 'BebasNeueRegular', BebasNeue, 'Bebas Neue', Arial, sans-serif;
  margin: 1em 0 0;
}

@media only screen and (min-width: 768px) {
  .ftr-hdr {
    font-size: 18px;
  }
}

.footer-list-wrap {
  width: 50%;
  float: left;
  box-sizing: border-box;
}

@media only screen and (min-width: 568px) {
  .footer-list-wrap {
    width: 33.3333%;
  }
}

@media only screen and (min-width: 768px) {
  .footer-list-wrap {
    width: 25%;
  }
}

.ftr-links-sub {
  padding: 0;
  margin: 0;
}

.ftr-links-sub:after {
  display: table;
  clear: both;
  content: "";
}

.ftr-links-sub li {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 3px 0;
  color: #FFFFFF;
  font: normal normal 12px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-transform: uppercase;
  /*width: 150px;*/
}

.footer-custom a,
.footer-custom a:link,
.footer-custom a:visited,
.ftr-links-sub li .link {
  text-decoration: none;
  color: #FFFFFF;
  padding: 5px 0;
  display: block;
}

.footer-custom .footer-legal a {
  display: inline;
}

.footer-custom a:hover,
.footer-custom a:active,
.ftr-links-sub li .link:hover {
  text-decoration: underline;
  color: #FFFFFF;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .footer-custom a, .footer-custom a:link, .footer-custom a:visited, .ftr-links-sub li .link {
    padding: 0;
  }
}
/* BEGIN SOCIAL STYLES*/

.footer-social {
  text-align: center;
}

.footer-social ul {
  padding: 0;
  display: inline-block;
  list-style-type: none;
}

.footer-social ul:after {
  display: table;
  clear: both;
  content: "";
}

.footer-social li {
  float: left;
  margin: 0 15px 0 0;
  padding: 0;
}

@media only screen and (min-width: 768px) {
  .footer-lists {
    width: 100%;
  }
  .footer-email {
    width: 50%;
    float: left;
    text-align: left;
  }
  .footer-social {
    width: 45%;
    margin-left: 5%;
    float: left;
    text-align: left;
  }
}

@media only screen and (min-width: 1008px) {
  .footer-lists {
    width: 66.6666%;
    float: left;
  }
  .footer-email {
    width: 33.3333%;
  }
  .footer-social {
    width: 33.3333%;
    float: right;
    margin-left: 0;
  }
}

.footer-legal {
  padding: 15px 0 0;
  clear: left;
}

.footer-payment {
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .footer-legal {
    width: 66.6666%;
    float: left;
  }
  .footer-payment {
    width: 33.3333%;
    float: left;
  }
}

@media only screen and (min-width: 1008px) {
  .footer-payment {
    text-align: left;
  }
}

.footer-payment ul {
  padding: 0;
  display: inline-block;
  list-style-type: none;
}

.footer-payment ul li {
  display: inline-block;
  margin: 0 6px;
}

@media only screen and (min-width: 1008px) {
  .footer-payment ul li.ftr-stella {
    margin-left: 0;
  }
}

.ftr-bbb span,
.ftr-stella span {
  background-image: url("http://cache1.artprintimages.com/images/jump_pages/rebrand2/images/subnav2.png");
  background-repeat: no-repeat;
  background-color: transparent;
  cursor: pointer;
  display: inline-block;
  height: 36px;
  margin: 0;
  padding: 0;
}

.ftr-bbb span {
  background-position: -339px -8px;
  width: 96px;
}

.ftr-stella span {
  background-position: -339px -107px;
  width: 57px;
}