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**/
* {
 box-sizing: border-box;
}

body {
 margin: 0px;
}

ul, li, a {
 list-style: none;
 margin: 0px;
 padding: 0px;
 text-decoration: none;
}

/**Typeo CSS End**/
.ftr-scn, .ftr-scn * {
 --ftr-bg-clr: #020036;
 --base-size: 18px;
 --base-txt-clr: #ffffff;
 --f-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.ftr-scn {
 padding: 60px 0px 10px 0px;
 width: 100%;
 font-family: var(--f-family);
 background-color: var(--ftr-bg-clr);
 color: var(--base-txt-clr);
 text-align: center;
 font-size: var(--base-size);
}

.container {
 max-width: 1200px;
 width: 100%;
 margin: auto;
 padding: 0 15px;
}

.footer-continfo {
 display: flex;
 flex-flow: row wrap;
 width: 100%;
}

.footer-continfo .continfo-item {
 width: 33.33%;
 padding: 0px 15px;
 font-size: 18px;
 line-height: 1.5;
}

.continfo-icon {
 height: 60px;
 display: block;
 margin-bottom: 10px;
}

.continfo-icon img {
 width: 100%;
 height: 100%;
}

.continfo-item .continfo-name {
 font-size: 22px;
 font-weight: 600;
 padding-bottom: 10px;
 display: inline-block;
 width: 100%;
}

.continfo-cont {
 width: 100%;
}

.continfo-item a {
 color: #fff;
 transition: 0.5s all;
 border-bottom: 1px solid transparent;
 padding-bottom: 1px;
}

.continfo-item a:hover {
 border-color: #fff;
}

.follow-copy {
 padding: 80px 0px 20px 0px;
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
}

.follow-copy h4 {
 width: 100%;
 font-size: 28px;
 font-weight: 500;
 margin: 0px;
}

.ftr-copyright {
 width: 100%;
}

.social-media {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 margin: 30px 0px 40px 0px;
}

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

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

.social-media li a img {
 max-width: 20px;
}

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

@media(max-width:767px) {
 .ftr-scn {
  padding: 20px 0px 0px 0px;
 }

 .footer-continfo .continfo-item {
  width: 100%;
  margin: 20px 0px;
 }

 .follow-copy {
  padding: 40px 0px 10px 0px;
 }

}

Related Snippets

Leave a comment

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