Inter-Net.PRO

Кнопки соцсетей для сайта на чистом CSS

  • 225 51
09 окт 2018 15:03 #21 от Inter-Net PRO

Сергей пишет: Сейчас иконки справа, нужно что бы были по середине подвала.

Смотрите, во первых я вам предлагаю действительно перенести кнопки во внутрь футера (сейчас они у вас под футером). Просто перенесите их во внутрь
<footer></footer>
Так с точки зрения сематики будет правильно.

Сами кнопки соцсетей нужно обернуть отдельным дивом, чтобы было как отдельный блок. Вот так:
<div class="social__button">
    <div class="social youtube">
        <a href="https://www.youtube.com/channel/UCBwTf30zkiTV1-Iu8al0Efw" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
    </div>
    <div class="social instagram">
        <a href="https://www.instagram.com/vagnn.ru" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
    </div>
    <div class="social vk">
        <a href="https://vk.com/nemetskydom" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
    </div>
</div>

Потом добавьте в css:
.social__button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

В файле style.css 410 строчка класс .social a замените так:
.social a {
    display: flow-root;
    width: 46px;
    height: 46px;
    margin: 0 10px 10px 0;
    padding: 6px;
    text-align: center;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 46px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
}

09 окт 2018 16:07 #22 от Сергей
Inter-Net PRO , Вы просто гений! Спасибо Вам большое и процветания!!! ))

  • 225 51
09 окт 2018 16:09 - 09 окт 2018 16:11 #23 от Inter-Net PRO

Сергей пишет: Буду очень благодарен за помощь!

Не пойму почему у вас весь контент прописан внутри блока header. Логично в хедере (шапка сайта) оставить логотип и контакты, а остальное вынести в main (семантический тег HTML для основного контента)
<main>
    <!-- Основной контент -->
</main>


И ещё посмотрите сюда на валидатор HTML:  validator.w3.org/nu/?doc=http://vagnn.ru/
Это инструмент для проверки html-кода от самой главной конторы по интернету.
Надеюсь вы сможете понять его подсказки по ошибкам в коде. Например пункт 4 - Ошибка. Подсказывает, что в теге h1 есть открытые теги но нет закрывающих. И действительно, смотрим, а там два открывающих тега span. По задумке второй span должен быть закрывающим. Просто делаем этот тег закрывающим (добавляем в него слеш / ):
</span>
По такой схеме исправляем все ошибки. Они там не сложные.


Так же я в коде вижу, что у вас два раза подключён иконочный шрифт FontAwesome. Один раз в хэде (версия 4.6.3) и второй раз с CDN (версия 4.7.0).

И ещё для слик-слайдера подключены стили и скрипт, но самого слайдера нет. Возможно он появится в будущем, но если нет, тогда эти файлы нужно отключить.

Авторизация

Войти через соцсети: