Как задать фон блоку?

Question

[Manvel]

Как ставить задний бэкграунд?



Вот как настроен мой HTML

Answer 1

[Икотий Айтишевич]

Как вариант: классу .header задать свойство background: url(url-фонового изображения); и внутри header сверстать данный блок по макету.

Comments

[Manvel]

Типа

<header class="header">
       <div class="container">
            <div class="header__menu"></div>
            <div class="header__content"></div>
</div>
</header>

?

[Икотий Айтишевич]

Programmer, Да. Только не забываете про семантику и меню добавьте в тег <nav>

[Manvel]

itishnikitsme,

Все это добавлять в nav?

[Икотий Айтишевич]

Programmer, Нет. В тег <nav> добавляется только навигация по странице.

<nav>
    <ul>
        <li><a href="#">Стратегия</a></li>
        <li><a href="#">Показатели</a></li>
        <li><a href="#">Основатель</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</nav>

[Manvel]

itishnikitsme, Еще один вопрос



Как правильно верстать этот футер ?
Сделал так.
Правильно?

<footer class="footer">
            <div class="container">
                <div class="footer__inner">
                    <div class="footer__data">
                        <img src="images/logo.png" alt="Plutos">
                        <p class="footer__address">Россия, г. Москва</p>
                        <p class="footer__tel">[phone]</p>
                        <p class="footer__email">[e-mail]</p>
                        <div class="footer__contacts">
                            <img src="images/icons/whatsapp.svg" alt="whatsapp">
                            <img src="images/icons/telegram.svg" alt="telegram">
                            <img src="images/icons/email.svg" alt="whatsapp">
                        </div>
                    </div>
                    <div class="footer__block">
                        <h4 class="footer__title">О фонде</h4>
                        <div class="footer__line"></div>
                        <nav class="footer__menu">
                            <a href="#">Основная стратегия</a>
                            <a href="#">Идеи и задачи фонда</a>
                            <a href="#">Мониторинг сделок</a>
                            <a href="#">Условия инвестирования</a>
                        </nav>

                    </div>
                    <div class="footer__block">
                        <h4 class="footer__title">Инвесторам</h4>
                        <div class="footer__line"></div>
                        <nav class="footer__menu">
                            <a href="#">Сотрудничество</a>
                            <a href="#">Курс по основам торговли</a>
                            <a href="#">Публичная оферта</a>
                        </nav>
                    </div>
                </div>
            </div>
        </footer>

[Икотий Айтишевич]

Programmer,

<footer class="footer">
    <div class="container">
        <div class="footer__inner">
            <div class="footer__data">
                <a href="#"><img src="images/logo.png" alt="Plutos"></a>
                <address class="footer__address">Россия, г. Москва</address>
                <a class="footer__tel" href="tel:[phone]">[phone]</a>
                <a class="footer__email" href="mailto:[e-mail]">[e-mail]</a>
                <ul class="footer__contacts">
                    <li>
                        <a href="#" title="whatsapp"></a>
                    </li>
                    <li>
                        <a href="#" title="telegram"></a>
                    </li>
                    <li>
                        <a href="#" title="whatsapp"></a>
                    </li>
                </ul>
            </div>
            <div class="footer__block">
                <h4 class="footer__title">О фонде</h4>
                <ul class="footer__menu">
                    <li>
                        <a href="#">Основная стратегия</a>
                    </li>
                    <li>
                        <a href="#">Идеи и задачи фонда</a>
                    </li>
                    <li>
                        <a href="#">Мониторинг сделок</a>
                    </li>
                    <li>
                        <a href="#">Условия инвестирования</a>
                    </li>
                </ul>
            </div>
            <div class="footer__block">
                <h4 class="footer__title">Инвесторам</h4>
                <ul class="footer__menu">
                    <li>
                        <a href="#">Сотрудничество</a>
                    </li>
                    <li>
                        <a href="#">Курс по основам торговли</a>
                    </li>
                    <li>
                        <a href="#">Публичная оферта</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>

Вот так будет правильней. Полоску надо сделать через border-bottom к тегу <h4 class="footer__title">, или через тег <hr>. А для <div class="footer__contacts"> тегу <li> задаёте белый фон и внутри к тегу <a> задаёте размеры и фон с svg логотипом соц. сети и центруете его через CSS свойства.

[Manvel]

itishnikitsme, Спасибо вам огромное

[Икотий Айтишевич]

Programmer, Пожалуйста. Почитайте на досуге – это поможет улучшить код. https://codeguide.academy/html-css.html