Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to Footer Options
Preview Source Code
Download
HTML
CSS
/**Typeo CSS Start**/
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
  * {
  box-sizing: border-box;
  }
  body {
  font-family: "Poppins", sans-serif;
  color: #444;
  box-sizing: border-box;
  margin: 0px;
  }
  ul, li, a {
  list-style: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  }
  img {
   max-width: 100%;
  }
  .container {
  max-width: 1280px;
  width: 100%;
  padding: 0px 15px;
  margin: auto;
  }
  .container-fluid {
  width: 100%;
  padding: 0px 30px;
  }
  /**Typeo CSS End**/
/***Footer section start***/
footer.footer-area {
 background-color: #072c5d;
 padding: 45px 0px 0px 0px;
 width: 100%;
}

.footer-inner {
 display: flex;
 flex-flow: row wrap;
 width: 100%;
 justify-content: space-between;
 align-items: flex-start;
 padding-bottom: 20px;
}

.footer-inner .ftr-title {
 font-size: 22px;
 color: #fff;
 font-weight: 600;
 margin-bottom: 15px;
 display: inline-block;
}

.footer-inner .app-icons {
 margin-left: -11px;
}
.footer-inner .app-icons img {
    max-width: 210px;
}
.footer-inner .menu {
 display: flex;
 flex-flow: row wrap;
 width: 100%;
}

.footer-inner .menu li {
 width: 50%;
 font-size: 16px;
 color: #fff;
 margin-bottom: 12px;
}

.footer-inner .menu li a {
 color: #fff;
 padding-right: 10px;
}

.footer-inner .menu li a:hover {
 color: #40c2e5;
}

.ftr-link {
 max-width: 400px;
 width: 100%;
}
.ftr-get-app {
 width: 26%;
}
.ftr-stay-connect {
 width: 480px;
}


.footer-bottom {
 text-align: center;
 color: #4AB3E0;
 font-size: 14px;
 margin-top: 15px;
 display: inline-block;
 width: 100%;
 border-top: #aac0dd 1px solid;
 padding: 12px 0;
}

.footer-bottom a {
 color: #fff;
}

.footer-bottom a:hover {
 color: #4AB3E0;
}

.social-media {
 display: flex;
 flex-flow: row wrap;
 margin-bottom: 20px;
 margin-top: 10px;
}

.social-media li {
 margin: 0px 5px;
}

.social-media li:first-child {
 margin-left: 0px;
}

.social-media li a {
 width: 40px;
 height: 40px;
 border-radius: 100%;
 background-color: #4AB3E0;
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: center;
}

.social-media li a img {
 max-width: 22px;     /*Black filter: brightness(0); */
 filter: brightness(0) invert(1);
}

.social-media li a:hover img {
 opacity: 0.8;
}

.single-subscribe-inner form {
 display: flex;
 flex-flow: row wrap;
}

.single-subscribe-inner input[type="email"] {
 outline: none;
 font-family: "Poppins", sans-serif;
 width: calc(100% - 150px);
 background: #FFFFFF;
 border-radius: 8px 0px 0px 8px;
 border: none;
 color: #B1B1B1;
 font-size: 16px;
 padding: 15px 20px;
}

.single-subscribe-inner input[type="submit"] {
 font-family: "Poppins", sans-serif;
 border: none;
 background: #40C2E5 !important;
 border-radius: 0px 8px 8px 0px;
 padding: 0px;
 font-size: 18px;
 color: #fff !important;
 font-weight: 600;
 padding: 15px 28px;
 cursor: pointer;
 outline: none !important;
}

.createby {
 color: #fff;
}

@media (max-width:1260px) {
.ftr-link {
    max-width: 35%;
}
 .ftr-get-app {
  width: 20%;
 }
.ftr-stay-connect {
    width: 40%;
}
.single-subscribe-inner input[type="submit"] {    padding: 15px 12px;}
.footer-inner .ftr-title {font-size: 18px;}
.ftr-get-app {
    width: 25%;
}
.single-subscribe-inner input[type="email"] {
     width: calc(100% - 120px);
}

}
@media (max-width:767px) {
 .footer-inner .app-icons a {
  display: inline-block;
  max-width: 49%;
 }
.ftr-link {
  max-width: 100%;
 }
 .ftr-get-app {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
 }
 .ftr-stay-connect {
  width: 45%;
 }
 .footer-bottom p {
  margin-bottom: 0px;
  font-size: 14px;
 }
 .ftr-stay-connect {
  width: 100%;
 }
 .services-cont input[type="submit"] {
  font-size: 16px;
  padding: 15px 16px;
 }
}
/***Footer section end***/
JS
var dynamicyear = new Date().getFullYear();
document.getElementById('year').innerHTML = dynamicyear;

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *