Dark Simple Responsive Footer

Responsive footer with company logo, navigation links, social links and copyright message

Below you can find the dark version of responsive footer.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="footer">
<div class="row">
<div class="footer-col col-phone-100 col-tablet-50 col-desktop-33">
<div class="logo">Company.</div>
<div class="address">
1987 Street Ave, Area </br>
Company Ltd. tel. 371 555-788-222
</div>
</div>

<div class="footer-col col-phone-100 col-tablet-50 col-desktop-33">
<div class="row">
<div class="col-phone-50">
<h4>Company</h4>
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-phone-50">
<h4>Services</h4>
<ul class="footer-links">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
</div>
</div>

<div class="footer-col col-phone-100 col-tablet-100 col-desktop-33">
<h4>Social</h4>
<div class="social-links">
<a class="social-link" href="#"><i class="icon-facebook"></i></a>
<a class="social-link" href="#"><i class="icon-twitter"></i></a>
<a class="social-link" href="#"><i class="icon-instagram"></i></a>
<a class="social-link" href="#"><i class="icon-google-plus"></i></a>
<a class="social-link" href="#"><i class="icon-youtube-play"></i></a>
</div>
</div>
</div>
<div class="legal">
<div class="legal-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a> / <a href="#">Sitemap</a></div>
<div class="copyright-message">Copyrights © 2017 Company Ltd. All Rights Reserved.</div>
</div>
</div>
</div>
HTML
@charset "UTF-8";

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

/* Font import */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

/* Icon Font */

@font-face {
font-family: "sample-font";
src:url("fonts/sample-font.eot?sdgf");
src:url("fonts/sample-font.eot?#iefix") format("embedded-opentype"),
url("fonts/sample-font.woff?gdf") format("woff"),
url("fonts/sample-font.ttf?dfg") format("truetype"),
url("fonts/sample-font.svg#sample-font") format("svg");
font-weight: normal;
font-style: normal;

}

[data-icon]:before {
font-family: "sample-font" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
vertical-align: middle;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "sample-font" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
content: "\63";
}

.icon-twitter:before {
content: "\64";
}

.icon-instagram:before {
content: "\65";
}

.icon-call-phone:before {
content: "\6a";
}

.icon-google-plus:before {
content: "\6b";
}

.icon-youtube-play:before {
content: "\6c";
}

/* Layout */

body {
font-family: Montserrat, sans-serif;
color: #666;
font-size: 14px;
line-height: 18px;
font-family: 'Montserrat', sans-serif;
background: #222;
}

.container {
padding: 0 30px;
max-width: 1200px;
margin:0 auto;
}

/* Grid Code Start */
.row {
margin-right: -15px;
margin-left: -15px;
}

.row:before,
.row:after {
display: table;
content: " ";
clear:both
}

.col-phone-10 {width: 10%}
.col-phone-20 {width: 20%}
.col-phone-25 {width: 25%}
.col-phone-33 {width: 33.3333%}
.col-phone-50 {width: 50%}
.col-phone-67 {width: 66.6666%}
.col-phone-75 {width: 75%}
.col-phone-80 {width: 80%}
.col-phone-90 {width: 90%}
.col-phone-100 {width: 100%}

.col-phone-10,
.col-phone-20,
.col-phone-25,
.col-phone-33,
.col-phone-50,
.col-phone-67,
.col-phone-75,
.col-phone-80,
.col-phone-90,
.col-phone-100 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}

@media (min-width: 768px) {
.col-tablet-10 {width: 10%}
.col-tablet-20 {width: 20%}
.col-tablet-25 {width: 25%}
.col-tablet-33 {width: 33.3333%}
.col-tablet-50 {width: 50%}
.col-tablet-67 {width: 66.6666%}
.col-tablet-75 {width: 75%}
.col-tablet-80 {width: 80%}
.col-tablet-90 {width: 90%}

.col-tablet-10,
.col-tablet-20,
.col-tablet-25,
.col-tablet-33,
.col-tablet-50,
.col-tablet-67,
.col-tablet-75,
.col-tablet-80,
.col-tablet-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 992px) {
.col-desktop-10 {width: 10%}
.col-desktop-20 {width: 20%}
.col-desktop-25 {width: 25%}
.col-desktop-33 {width: 33.3333%}
.col-desktop-50 {width: 50%}
.col-desktop-67 {width: 66.6666%}
.col-desktop-75 {width: 75%}
.col-desktop-80 {width: 80%}
.col-desktop-90 {width: 90%}

.col-desktop-10,
.col-desktop-20,
.col-desktop-25,
.col-desktop-33,
.col-desktop-50,
.col-desktop-67,
.col-desktop-75,
.col-desktop-80,
.col-desktop-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
.col-big-screen-10 {width: 10%}
.col-big-screen-20 {width: 20%}
.col-big-screen-25 {width: 25%}
.col-big-screen-33 {width: 33.3333%}
.col-big-screen-50 {width: 50%}
.col-big-screen-67 {width: 66.6666%}
.col-big-screen-75 {width: 75%}
.col-big-screen-80 {width: 80%}
.col-big-screen-90 {width: 90%}

.col-big-screen-10,
.col-big-screen-20,
.col-big-screen-25,
.col-big-screen-33,
.col-big-screen-50,
.col-big-screen-67,
.col-big-screen-75,
.col-big-screen-80,
.col-big-screen-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

/* Grid End */

/* Footer */
.footer {
margin: 30px auto 0;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
background: #111;
padding: 20px 30px;
font-size:14px;
color: #666;
}

.footer:before, .footer:after {
content: '';
display: table;
}

.footer:after {
clear: both;
}

.footer a {
text-decoration: none;
color: #ccc;
}

.footer a:hover {
color: #999;
}

.footer h4 {
margin-bottom: 9px;
color: #000;
}

.footer-col {
margin-bottom: 20px;
}

.logo {
display: inline-block;
font-size: 32px;
color: #d35400;;
font-weight: bold;
letter-spacing: -3.5px;
margin: 15px 0 0 0;
}

.address {
margin-top:15px;
color: #aaa;
}

.footer-links {
list-style-type: none;
}

.footer-links li {
margin-bottom:3px;
}

a.social-link {
border-radius: 50%;
padding: 6px 12px 2px;
font-size: 25px;
transition: all 500ms ease;
color: #eee;
background: #232323;
text-decoration: none;
line-height: 30px;
display: inline-block;
margin-bottom: 2px;
height:45px;
width:45px;
text-align: center;
}

.social-link i {
font-size:20px;
line-height: 40px;
}

a.social-link:hover {
background-color: #d35400;
}

.legal {
border-top: 1px solid #292929;
padding-top: 20px;
text-align: center;
}

.copyright-message {
font-weight:bold;
color: #aaa;
display: inline-block;
}

.legal-links {
display: inline-block;
margin-bottom: 10px;
}

@media(min-width:800px) {
.copyright-message {
display: block;
float:left;
}

.legal-links {
display: block;
float:right;
margin-bottom: 0;
}
}
CSS
Browser support:
           
8+