БЛОГ НА HUSL


Сделать три блока с картинками в строку и добавить текст под каждую картинку и на нее. У меня получается сделать что-то из одного с примером

Автор вопроса: Анна

пример

Нужен пример.

Ниже код:

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

 

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,700;0,900;1,300;1,400&display=swap" rel="stylesheet">


  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
  <script src="https://kit.fontawesome.com/2327957336.js" crossorigin="anonymous"></script>
  <title>Моя страница</title>
  <style>

    *,
    html,
     body {
font-family:"Roboto"sans-serif;
     }
    /* Стили кнопки */
    .iksweb {
      display: inline-block;
      cursor: pointer;
      font-size: 14px;
      text-decoration: none;
      padding: 10px 20px;
      color: #007BFF;
      background: #ffff0;
      border-radius: 0px;
      border: 2px solid #4cb3fc;
    }

    .iksweb:hover {
      background: #354251;
      color: #ffffff;
      border: 2px solid #007BFF;
      transition: all 0.2s ease;
    }

    #lab_social_icon_footer {
      padding: 40px 0;
      background-color: #343A40;
    }

    #lab_social_icon_footer a {
      color: #C4DC66;
    }

    /* Browser Variations: */

    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    }

    /*
    Multicoloured Hover Variations
*/

    #lab_social_icon_footer #social-fb:hover {
      color: #3B5998;
    }

    /*-------------- LEFT COLUMN -----------------------*/

    body {
      margin: 0;
    }

    .flex-container {
      display: flex;
    }

    .flex-element {
      width: 50%;
      height: 100px;
    }

    .red {
      background-color: red;
      background-image: url(img/cod.jpg);
      height: 646px;
      width: 720px;


    }

    .green {
      background-color: #A4DDFD;
      height: 646px;
      width: 1200px;

    }

    .text-block {
      margin-left: 20px;
    }


    body {
      font-family: robot;
      font-size: 20px;
    }

    .social {
      display: inline-block;
    }

    .social a {
      display: block;
      width: 20px;
      height: 11px;
      margin: 0 10px 10px 0;
      text-align: centr;
      color: #C4DC66;


    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0rem;
      padding: 0;
    }

    img {
      display: block;
      max-width: 100%;
      width: 900px;
      height: 173px;
      padding: rem;
      margin-bottom: rem;
    }

    .image {
      display: flex;
      justify-content: center;
    }

    .image>span {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .image>span>*:not(:last-child) {
      margin-bottom: ;
    }

      {
      margin: 0;
      padding: 0;
    }

    .clear,
    .clear:after,
    .clear:before {
      content: '';
      display: block;
      clear: both;
    }

    .wrapper {
      width: 100%;
      box-sizing: border-box;
    }

    .wrapper .a,
    .b,
    .c {
      width: 30%;
      text-align: justify;
      float: left;
      margin: 10px .8% 14px 2%;
    }

    .link {
      clear: both;
      width: 100%;
      text-align: center;
    }

    p {
  position: relative;
  top: 100%;
}

  </style>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #343A40">
    <a class="navbar-brand" href="index.html"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="456.html">Главная <span class="sr-only">(текущая)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Наши преимущества</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Порядок работы и цены</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="">Контакты</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">

        <a class="iksweb" href="https://iksweb.ru/tools/cnopka/" title="Задать вопрос дежурному эксперту">Задать вопрос
          дежурному эксперту</a>
      </form>
    </div>
  </nav>

  </ul>

  </div>
  </nav>
  </div>

  <div class="flex-container">
    <div class="flex-element red"></div>
    <div class="flex-element green">
      <div class="text-block">
        <p> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
            class="bi bi-telephone-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd"
              d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" />
          </svg>+7(926)-522-9192
        </p>

        <h1 align="center">ООО«Интегратор»</h1>
        <p> </p>
        <p align="center"> Основные виды услуг: </p>
        <p align="justify"> -проверки достоверности финансовой (бухгалтерской) отчетности по международным аудиторским
          стандартам</p>

        <p align="justify">- финансовый анализ деятельности организации
          с подготовкой письменной информации
          и рекомендаций</p>

        <p align="justify">- выполнение целевых проверок по программе заказчика
        <p>

        <p align="justify"> - участие в восстановлении бухгалтерского учета</p>

        <p align="justify">- консультационная помощь по вопросам аудита,
          бухгалтерского учета</p>

        <p align="justify">- подготовка экспертных заключений по
          финансово-хозяйственным вопросам по запросу судебных органов</p>
      </div>

    </div>

  </div>

  </div>

  </div>



  </div>
  <!--Fim Colunas-->
  <div id="all_new_footer">
    <div id="fb-root"></div>

    <!--New Footer-->
    <div id="new_footer">
      <center>
        <div id="footer_content">

        </div>
      </center>
    </div>
  </div>


  <div class="features-block">
    <div class="image">
      <span>
        <img src="img/code2" alt="">
        <p></p>
      </span>
      <span>
        <img src="img/code3.png" alt="">
        <p></p>
      </span>
      <span>
        <img src="img/code4" alt="">
        <p class="centr"></p>
      </span>
    </div>

    <div class="wrapper clear">
      <div class="a">
        <p>
          Собственники помещений в многоквартирном доме вправе выбрать один из следующих способов формирования 
        </p>
        <div class="link">
          <a href="#"></a>
        </div>
      </div>
      <div class="b">
        <p>
          
          жизнедеятельность населения и функционирование социально-производственной инфраструктуры. Сами организации
           Эта
          сфера затрагивает интересы большей части населения городов и поселков страны.
        </p>
        <div class="link">
          <a href="#"></a>
        </div>
      </div>
      <div class="c">
        <p>
           Ежегодно в начале года обслуживающие подразделения банков в обязательном
          порядке выполняли подписанные обеими сторонами письменные подтверждения остатков по счетам своих клиентов.
        </p>
        <div class="link">
          <a href="#"></a>
        </div>
      </div>
    </div>
  </div>
  <!--Footer Bottom-->
  <div style="position:relative; bottom:-14px; width:100%; background:#343A40;">
    <left>
      <div class="social vk">
        <a href="#C4DC66" target="_blank">
          <svg role="img" viewBox="0 0 576 512">
</div>
      <p style="text-align: center;"><span style="color: #ffffff;">@ Все права защищены OOO"Интегратор-2021</span></p>
            </footer>
            <div class="social vk">
              <a href="#C4DC66" target="_blank">
                <svg role="img" viewBox="0 0 576 512">
                  <path fill="currentColor"
                    d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z" />
                  </span></p>
                </svg>
              </a>
            </div>
  </div>
  </left>
  </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>

</html>

Источник

Ответы (1 шт):

Автор решения: Евгений Кулик

У вас в коде миллион ошибкок:

:27 - пропущена запятая: font-family:"Roboto"sans-serif;

:37 - некоректный цвет: background: #ffff0;

:59 - удалена часть кода, нет обращения к элементу

картинка

:125 - опечатка text-align: centr;

:144, :145, :160 - неверно указан padding и margin

:216 - href не должен быть пустым, укажите href='#' если надо оставить атрибут не заполненым

:226 - неправильное применение тега form

:234 - :238 - лишние закрывающие теги </ul>, </div>, </nav>

:251 - используйте стили вместо абсолютных атрибутов <h1 align="center">ООО«Интегратор»</h1>

:277, :279, :283 - лишние закрывающие теги </div>

:290 - тег <center>, такого тега в HTML не существует

:302 - внутри тега span нельзя использовать тег img

:348 - тег <left>, такого тега в HTML не существует

:351 - отсутствует закрывающий тег </a>

:354 - лишний закрывающий тег </footer>

:360 - лишний закрывающий теги </span></p>

:373 - лишний закрывающий тег </body>

Вот мой вариант, как сделать такие блоки, которые Вам требуются

*,
html,
body {
    font-family:"Roboto", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.blocks {
    display: flex;
}

.block-item {
    flex: 1 1 auto;
    max-width: 500px;
    margin: 0 auto 40px;
    border: 1px solid #ccc;
}

.block-image img {
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
}

.block-content {
    padding: 10px;
    font-size: 12px;
}

.block-content p {
    margin: 0;
}
<div class="blocks">
        <div class="block-item">
            <div class="block-image"><img src="https://fakeimg.pl/640x360/c98" alt=""></div>
            <div class="block-content">
                <p>TEXT TEXT TEXT</p>
            </div>
        </div>
        <div class="block-item">
            <div class="block-image"><img src="https://fakeimg.pl/640x360/c98" alt=""></div>
            <div class="block-content">
                <p>TEXT TEXT TEXT</p>
            </div>
        </div>
        <div class="block-item">
            <div class="block-image"><img src="https://fakeimg.pl/640x360/c98" alt=""></div>
            <div class="block-content">
                <p>TEXT TEXT TEXT</p>
            </div>
        </div>
    </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.