@SerezhaWEB

Есть ли оптимальный метод для реализации футера?

Как бы вы реализовали этот футер? Я так-то сделал, но интересно увидеть, может, какой-то оптимальный подход.

5d99e0ea6d97c969222227.png

Вот как я на данный момент сделал
<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
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
С таким подходом не надо сложных манипуляций и ерунды с position: absolute или отрицательных margin для контента, здесь весьма очевидные отступы между блоками и пр.

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы