Верстка сайта с нуля на Bootstrap 4 – Закончили footer



https://i.ytimg.com/vi/PfyYMKGUULQ/hqdefault.jpg



Проект верстка сайта с нуля на bootstrap 4 практически закончен, нам осталось сверстать footer нашего сайта, а так же добавить последние шаги в верстке. Вы видите насколько проста верстка сайта на фреймворке css bootstrap 4. Мы сделали сайт на bootstrap буквально за час.Верстка сайта с нуля отличный урок для начинающего программиста.

https://www.templatemonster.com/social/ru/

Original source


39 responses to “Верстка сайта с нуля на Bootstrap 4 – Закончили footer”

  1. А ещё есть практика по бутстрап 4 на канале или пока нет? Я эту практику уже прошёл, уроки по бутстрап4 тоже прошёл.

  2. Огромное спасибо, Алексей!! Все получилось на высшем уровне, если учесть, что это мой 3тий сайт в жизни)) У тебя очень крутые уроки, смотрю по очереди все, еще раз огромное спасибо за такой труд!

  3. ЗДРАВСТВУЙ АВТОР! СПАСИБО ЗА УРОКИ. ПРОДОЛЖАЙ В ТОМ ЖЕ ДУХЕ. ПРОСЬБА СДЕЛАТЬ СЛЕДУЮЩИЕ УРОКИ НА BOOTSTRAP 4 НА ТЕМУ ВЕРСТКИ ИНТЕРНЕТ МАГАЗИНА.
    КТО ЗА СТАВИМ ЛАЙКИ.

  4. Один из самых лучших курсов что я видел по верстке! Спасибо автору, но не хватает комментариев кода, желательно после написания строчки кратко но пояснить за что отвечает написанное и каждый класс например, понимаю что больше времени уйдет но будет понятнее учащимся. Удачи!

  5. Внимательно просмотрел все пять видео плейлиста, и опробовал на практике. Из всего, что мне приходилось видеть по вёрстке сайтов на Bootstrap 4 – этот курс самый лучший. Респект автору!

  6. Почему-то не добавляется цвет на футер как исправить? Вот код

    <footer class="page-footer font-small unique-color-dark pt-0">
    <div class="primary-color">
    <div class="container">
    <div class="row py-4 d-flex align-items-center">
    <div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
    <h6 class="mb-0 white-text">Get connected with us on social networks!</h6>
    </div>
    <div class="col-md-6 col-lg-7 text-center text-md-right">
    <a href="#" class="fb-ic ml-0">
    <i class="fa fa-facebook white-text mr-4"></i>
    </a>
    <a href="#" class="fb-ic ml-0">
    <i class="fa fa-facebook white-text mr-4"></i>
    </a>
    <a href="#" class="fb-ic ml-0">
    <i class="fa fa-facebook white-text mr-4"></i>
    </a>
    <a href="#" class="fb-ic ml-0">
    <i class="fa fa-twitter white-text mr-4"></i>
    </a>
    <a href="#" class="fb-ic ml-0">
    <i class="fa fa-instagram white-text mr-4"></i>
    </a>
    </div>
    </div>
    </div>
    </div>
    <div class="container mt-5 mb-4 text-center text-mb-left">
    <div class="row mt-3">
    <div class="col-mb-3 col-lg-4 col-lx-3 mb-4">
    <h6 class="text-uppercase font-weight-bold"> Our company</h6>
    <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam modi a cumque, consequatur.
    </p>
    </div>

    <div class="col-mb-3 col-lg-4 col-lx-3 mb-4">
    <h6 class="text-uppercase font-weight-bold"> <strong>Our company</strong></h6>
    <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">

    </div>
    </div>
    </div>
    </footer>

  7. ПЛАВНАЯ ПРОКРУТКА НА Javascript

    <li class="nav-item">
    <a class="nav-link waves-effect waves-light" onclick="slowScroll('#contact')" >Support</a>
    </li>

    меняешь <li> в такой вид, удаляешь ссылки и прописываешь onclick идентификатором который был в href

    потом идешь в самый низ index.html и перед закрывающего тега </body> прописываешь вот ето:

    <script>
    function slowScroll(id){
    var offset = 0;
    $('html, body').animate({
    scrollTop: $(id).offset ().top – offset
    }, 1000 );
    return false;
    }
    </script>

    параметр 1000 отвечает за длительность анимации 1000 = 1 секунда

  8. Да ты прав, только в курсах есть смысл, спасибо огромное!
    Но ещё бы по лучше объяснять что как работает и зачем это

  9. за курсами будущее….
    а если серьёзно, спасибо автору канала….
    еще было бы интересно посмотреть не только вёрстку, а и функционал на ПХП и Javascript

Leave a Reply