@Rubix
Учусь на React-разработчика.

Как сверстать этот блок?

Всем привет! Учусь верстать по psd-шаблону, на видео ведущий показывал, как верстать первые 3 секции, а последнюю сверстать самому. Только я не совсем понял, как это делать. Собственно, вот секция: 5f70be94c1bad656987581.jpeg
Вот css свойства контейнера, заголовков h2 и параграфов:
.container {
	width: 930px;
	margin: 0 auto;
}
.title p {
	color: #8E8E8E;
	text-align: center;
	margin: 10px;
}
.title h2 {
	font-size: 40px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	color: #222222;
	margin: 0;
}

Как сверстать картинки/описание?
  • Вопрос задан
  • 522 просмотра
Решения вопроса 1
profesor08
@profesor08 Куратор тега CSS
<div class="roadmap">
  <div class="map-item">
    <div class="item-text">
      <h3>What is Lorem Ipsum?</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <img class="item-image" src="https://picsum.photos/100">
  </div>
  <div class="map-item">
    <img class="item-image" src="https://picsum.photos/100">
    <div class="item-text">
      <h3>What is Lorem Ipsum?</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
  </div>
  <div class="map-item">
    <div class="item-text">
      <h3>What is Lorem Ipsum?</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <img class="item-image" src="https://picsum.photos/100">
  </div>
  <div class="map-item">
    <img class="item-image" src="https://picsum.photos/100">
    <div class="item-text">
      <h3>What is Lorem Ipsum?</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
  </div>
</div>


.roadmap {
  width: 70%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  
  .map-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "text-left image text-right";
    gap: 30px;
    align-items: center;
    
    &:nth-child(odd) {
      .item-text {
        grid-area: text-left;
        text-align: right;
      }
    }
    
    &:nth-child(even) {
      .item-text {
        grid-area: text-right;
      }
    }
    
    .item-image {
      grid-area: image;
    }
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@fgehte
Учусь на React-разработчика. Знаю HTML, CSS, JS.

Это как так получилось?))
Ну а если по вопросу, то это до ужаса простой пример, и на таких простых примерах желательно самому, методом проб и ошибок, попытаться его решить.
Вот хороший сайт(ИМХО), для начинающих и не только. Там вся база.
Ответ написан
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Смотри на этот блок просто как на комбинацию «картинка — текст» и наоборот. Используй флекс для размещения элементов. Для округления картинок (если они изначально не такие) используй border-radius.
Ответ написан
Ваш ответ на вопрос

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

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