Помощь с версткой блоков

135
12 декабря 2021, 07:10

Как сверстать эти блоки на чистом html и css?

Answer 1
  1. Развернуть на всю страницу
  2. Инспекция кода приветствуется ...

*{ 
  padding: 0; 
  margin: 0; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
.wrapper{ 
  max-width: 900px; 
  margin: auto; 
  background-color: tomato; 
  padding-left: 20px; 
  padding-right: 20px; 
}   
 
.block{ 
  background-color: tomato; 
  text-align: center; 
} 
 
.span{ 
 display: block; 
 color: #fff; 
 padding-top: 20px; 
} 
 
.text{ 
  font-size: 20px; 
  text-transform: uppercase; 
  position: relative; 
  display: inline-block; 
  color: #fff; 
  padding-top: 20px; 
} 
 
.text:before{ 
  content: ''; 
  display: block; 
  width: 30px; 
  height: 2px; 
  background-color: blue; 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
  bottom: -10px; 
} 
 
.block2{ 
 display: -webkit-flex; 
 display: -moz-flex; 
 display: -ms-flex; 
 display: -o-flex; 
 display: flex; 
 
} 
 
.block2-gl{ 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
 justify-content: center; 
 flex-wrap: wrap; 
} 
 
.block2-circle{ 
  width: 50px; 
  height: 50px; 
  border-radius: 50%; 
  background-color: gray; 
  margin-right: 20px; 
} 
 
.block2-text{ 
  width: 300px; 
} 
 
.block2-span{ 
  font-size: 20px; 
  color: #fff; 
} 
 
.block2-span2{ 
  color: yellow; 
  display: block; 
}
<div class="wrapper"> 
  <div class="block"> 
      <p class="text">Lorem ipsum dolor sit amet.</p> 
      <span class='span'>Lorem ipsum dolor</span> 
  </div> 
  <div class="block2-gl"> 
       <div class="block2"> 
        <div class="block2-circle"></div> 
        <div class="sd"> 
           <p class="block2-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, facere libero vitae, dolorum magnam itaque accusantium. Perspiciatis officiis quasi optio. 
           </p> 
           <span class="block2-span">Lorem ipsum.</span> 
           <span class="block2-span2">Lorem ipsum.</span> 
        </div> 
  </div> 
   <div class="block2"> 
        <div class="block2-circle"></div> 
        <div class="sd"> 
           <p class="block2-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, facere libero vitae, dolorum magnam itaque accusantium. Perspiciatis officiis quasi optio. 
           </p> 
           <span class="block2-span">Lorem ipsum.</span> 
           <span class="block2-span2">Lorem ipsum.</span> 
        </div> 
  </div> 
   <div class="block2"> 
        <div class="block2-circle"></div> 
        <div class="sd"> 
           <p class="block2-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, facere libero vitae, dolorum magnam itaque accusantium. Perspiciatis officiis quasi optio. 
           </p> 
           <span class="block2-span">Lorem ipsum.</span> 
           <span class="block2-span2">Lorem ipsum.</span> 
        </div> 
  </div> 
   <div class="block2"> 
        <div class="block2-circle"></div> 
        <div class="sd"> 
           <p class="block2-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, facere libero vitae, dolorum magnam itaque accusantium. Perspiciatis officiis quasi optio. 
           </p> 
           <span class="block2-span">Lorem ipsum.</span> 
           <span class="block2-span2">Lorem ipsum.</span> 
        </div> 
  </div> 
  </div> 
</div>

READ ALSO
Фон картинкой в CSS

Фон картинкой в CSS

Всем привет:) Не могу фон сделать под размер страницы, постоянно фон как бы не помещается на страницуВсе говорят про background-size: cover; Но он у меня...

189
Реализация нестандартной тени в css!

Реализация нестандартной тени в css!

Обнаружил на макете вот такую тень

210
Проблема со скриптом для анимации jQuery

Проблема со скриптом для анимации jQuery

У меня есть скрипт для анимации текста при наведении на елемент:

121