Как бы вы реализовали этот футер? Я так-то сделал, но интересно увидеть, может, какой-то оптимальный подход.
Вот как я на данный момент сделал
<footer class="footer">
<!-- begin footer-main -->
<div class="footer-main">
<!-- begin container -->
<div class="container">
<div class="footer-main__logo">
<img class="logo" src="img/logo-header.png" alt="WELLNESS">
</div>
<div class="footer-main__text">
<p class="footer-main__descr">Ut enim ad minim veniam, quis nostrud du exercitation ullamco laboris nisi ut aliquip ea commodo consequat.</p>
</div>
<div class="footer-main-copy">
<small class="footer-main-copy__text">© Copyright 2017, <span class="semi-bold">WELL+NESS</span></small>
<div class="footer-main-copy__author">Design by <span class="semi-bold">Henry Reyes</span></div>
</div>
</div>
<!-- end container -->
</div>
<!-- end footer-main -->
<!-- begin footer-nav -->
<nav class="footer-nav">
<!-- begin container -->
<div class="container">
<div class="footer-nav__lists-wrapper">
<div class="footer-nav__list-wrapper">
<h4 class="footer-nav__list-title">Menu</h4>
<ul class="footer-nav__list">
<li class="footer-nav__item"><a href="#" class="footer-nav__link">About</a></li>
<li class="footer-nav__item"><a href="#" class="footer-nav__link">Classes</a></li>
<li class="footer-nav__item"><a href="#" class="footer-nav__link">Instructors</a></li>
<li class="footer-nav__item"><a href="#" class="footer-nav__link">Memberships</a></li>
<li class="footer-nav__item"><a href="#" class="footer-nav__link">Book a session</a></li>
</ul>
</div>
<div class="footer-nav__list-wrapper">
<h4 class="footer-nav__list-title">Follow us</h4>
<ul class="footer-nav__list">
<li class="footer-nav__item"><a href="#" class="footer-nav__link">Facebook</a></li>
<li class="footer-nav__item"><a href="#" class="footer-nav__link">Youtube</a></li>
<li class="footer-nav__item"><a href="#" class="footer-nav__link">Twitter</a></li>
<li class="footer-nav__item"><a href="#" class="footer-nav__link">Pinterest</a></li>
</ul>
</div>
</div>
</div>
<!-- end container -->
</nav>
<!-- end footer-nav -->
</footer>
.footer
position: relative
.footer-main
padding: 120px 0 90px
max-width: 910px
background-color: #262626
.footer-main__logo
margin-bottom: 30px
.footer-main__text
max-width: 325px
margin-bottom: 40px
color: #fff
font-size: 14px
font-weight: 400
line-height: 1.29
letter-spacing: 0.28px
.footer-main-copy
color: #fff
font-size: 14px
font-weight: 400
letter-spacing: 0.28px
.footer-main-copy__text
display: block
margin-bottom: 10px
font-size: 14px
.footer-main-copy__author
.footer-nav
position: absolute
bottom: 0
right: 0
display: block
max-width: 585px
width: 100%
padding: 60px 0 100px 100px
background-color: #363636
.footer-nav__lists-wrapper
display: flex
.footer-nav__list-wrapper
&:not(:last-child)
margin-right: 80px
.footer-nav__list-title
margin-bottom: 35px
color: #fde3a7
font-size: 14px
font-weight: 600
letter-spacing: 0.28px
.footer-nav__item
&:not(:last-child)
margin-bottom: 10px
.footer-nav__link
color: #fff
font-size: 14px
font-weight: 500
letter-spacing: 0.28px
