Простой footer у веб-сайта

Простой footer у веб-сайта

На этом уроке сделаем простой футер для веб-сайта. Для красоты верх футера украсим волной.

HTML разметка

Обычно в футере сайта ставятся иконки ведущие на социальные сети и основные пункты меню навигации.

<footer>
    <div class="waves">
        <div class="wave" id="wave1"></div>
    </div>
    <ul class="social">
        <li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="logo-linkedin"><ion-icon></a></li>
        <li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
    </ul>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <p>©2021 Online Tutorials | All Rights Reserved</p>
</footer>
//Готовые иконки из библиотеки ionicons
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Простой footer у веб-сайта

Стилизация меню и социальных иконок

Далее зададим стили для тегов в HTML-разметке.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;/*метод расчета размеров бокса*/
    font-family: 'Poppins', sans-serif;/*название шрифта*/
}
body {
    display: flex;/*флексбокс сетка*/
    flex-direction: column;/*направление главной оси*/
    justify-content: flex-end;/*элементы в конце контейнера*/
    min-height: 100vh;
}
footer{
    position: relative;/*относительное позиционирование*/
    width: 100%;/*на всю ширину*/
    padding: 20px 50px;/*поля для контента*/
    background: #3586ff;/*цвет футера*/
    display: flex;
    justify-content: center;/*в центре по горизонтали*/
    align-items: center;/*в центре по вертикали*/
    flex-direction: column;
    margin-top: 100px;/*отступ сверху*/
}
footer .wave{
    position: absolute;/*абсолютное позиционирование*/
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(wave.png);/*картинка волны*/
    background-size: 1000px 100px;/*ширина и высота волны*/
}
.social,
.menu{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;/*разрешен перенос на новую строку*/
}
.social li,
.menu li{
    list-style: none;/*удалить черные маркеры*/
}
.social li a {
    font-size: 2em;/*размер иконок*/
    color: #fff;/*цвет иконок*/
    margin: 0 10px;
    display: inline-block;/*отображать как строчно-блочный элемент*/
    transition: 0.5s;/*плавный переход*/
}
.menu li a {
    font-size: 1.2em;/*размер ссылок меню*/
    color: #fff;/*цвет ссылок меню*/
    opacity: 0.75;/*значение прозрачности*/
    margin: 0 15px;
    text-decoration: none;/*ссылка без подчеркивания*/
    display: inline-block;
}
.menu li a:hover {
    opacity: 1;
}
footer p {
    color: #fff;
    text-align: center;
    margin-top: 15px;
    font-size: 1.1em;
}

Простой footer у веб-сайта

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button