@interneterrorhehe

Как сделать псевдоэлемент (галочка) как на макете?

Вот макет:

6122233c76fc3112426777.png
Вот мой сайт:

612223825518a372341335.png

вот мои коды:

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Сайи</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <div class="header">
      <div class="header-left">
        <div class="text-head">
          <h2>Product name</h2>
        </div>
        <div class="description-head">
            <h2>Put on this page information about your product</h2>
            <h2>A detailed description of your product</h2>
            <h2>Tell us about the advantages and merits</h2>
            <h2>Associate the page with the payment system</h2>
        </div>
      </div>
      <div class="header-right">
        <div>
          <img src="image/Shape-9.png">
        </div>
      </div>
    </div>
  </header>

  <section>
    <div class="section">
      <div class="section-left">
        <h1 class="section-text-main">About your product</h1>
        <h2 class="section-description1">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, explicabo veniam incidunt in quam sapiente ut ipsum.
        </h2>
        <h2 class="section-description2">
          Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.
        </h2>
      </div>
      <div class="section-right">
        <div class="section-video">
          <img src="image/video.png">
        </div>
      </div>
    </div>
  </section>
</body>
</html>


css:

*{
  margin: 0;
  padding: 0;
}
header{
  background: #445162;
  height: 378px;
  color: white;
}
.header{
  padding: 50px;
  display: flex;
  width: 100%;
  position: fixed;
}

.text-head{
  font-size: 35px;
}

.header-left{
  width: 60%;
}
.header-right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.description-head{
  margin-top: 50px;
  line-height: 50px;
}

.section{
  width: 100%;
  padding: 50px;
  color: #333333;
  display: flex;
  position: fixed;
}

.section-left{
  width: 62%;
}

.section.right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.section-text-main{
  color: #445161;
  font-size: 40px;
  margin-bottom: 38px;
}

.section-description1{
  width: 1000px;
  margin-bottom: 20px;
}

.section-description2{
  width: 1000px;
}
  • Вопрос задан
  • 721 просмотр
Пригласить эксперта
Ответы на вопрос 2
@IvanGrishov
Начинающий Frontend разработчик
Вот так:

Ответ написан
Комментировать
Есть 2 варианта.
1 вариант - ответом выше.
2 вариант - подключить fontawesome и юзать их иконки, возможно в будущем понадобятся. Авторизовываетесь, в теге head вставляете ссылку, которую Вам даст сайт.

Пример:
<script src="https://kit.fontawesome.com/d4fbb21366.js" crossorigin="anonymous"></script><style media="all" id="fa-v4-font-face">


Затем заходите на сам сайт, выбираете вкладку "Icons" и ищите. Для Вашего примера нашёл
<i class="fas fa-check"></i>

И у Вас должно получиться:

<i class="fas fa-check"></i> <h2>Put on this page information about your product</h2>
           <i class="fas fa-check"></i> <h2>A detailed description of your product</h2>
           <i class="fas fa-check"></i> <h2>Tell us about the advantages and merits</h2>
           <i class="fas fa-check"></i> <h2>Associate the page with the payment system</h2>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы