Адаптивная верстка с фоном на всю ширину

Последнее обновление на 19.12.2023

Адаптивная верстка с фоном на всю ширину экрана

*{
    margin: 0;
}
body {
  line-height: 2.5;
  text-align: center;
  font-size: 18px;
}
.wrapper {
  max-width: 600px;
  margin: 0 auto;  
}
.wrapper * {
  padding: 40px 0;
}
.foto,.shapka,.podval,.text{
    border: 1px solid #4b4545;
}
.foto {
  padding: 40px 0;
  background-color:rgb(203, 226, 218);
}
.shapka {
  background: #ffdfb8;
}
.text {
  background: #f6dbc9;
}
.podval {
  background: #797878;
}
  <div class="wrapper">
          <div class="shapka">Шапка</div>
        </div>

      <div class="foto">
        <div class="wrapper">Фото</div>
      </div>
      <div class="wrapper">
      <div class="text">ТЕКСТ</div>
      <div class="text">ТЕКСТ</div>
    </div>
    <div class="foto">
        <div class="wrapper">Фото</div>
      </div>
        <div class="wrapper">
          <div class="podval">Подвал</div>
        </div>

Результат работы стиля для адаптивной верстки с background на всю ширину экрана

Шапка
Фото
ТЕКСТ
ТЕКСТ
Фото
Подвал

Ваш комментарий будет первым

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *