Как верстаются подобные штуки?

Question

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

А вот , что получается у меня

Не подключаются картинки с интернета и все встает друг под другом

вот код:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
   <link rel="stylesheet" href="css/font-awesome.min.css">
  <style type="text/css">
   .lol { 
    display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%; 
   }
   .fa-check-circle
   {
   color: green;
   }
  </style>
 </head>
 <body>
   <h1>Заголовок Н1</h1>
   <div class ="lol"> 
   <p>
   <i class="fas fa-check-circle"></i>
   Текст
   </p>
   <p>
   <i class="fas fa-check-circle"></i>
Текст
   </p>
  
   <p>
   <i class="fas fa-check-circle"></i>
   Текст
   </p>
  
   <p>
   <i class="fas fa-check-circle"></i>
  Текст
   </p>
   
   
  
    </div>
 </body>
</html>

Answer 1

Есть множество вариантов, почти в любом из них необходимо использовать контейнер и ему задавать необходимые свойства для расставления внутренних блоков, самый простой из них это использовать grid css или flexbox. Например grid
Тег h1 оставляйте как есть, а те пунктики запихните в один общий div этому диву задайте такие свойства

display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;

БЛОГ НА HUSL

Как верстаются подобные штуки?

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