Верстка блока с картинками и текстом

@rorav · Регистрация: 19.03.2022

Студворк — интернет-сервис помощи студентам

Нужна помощь в вёрстке данного блока.

KingdaKa · 19.03.2022, 02:03

А в чём именно загвоздка?

@NTHing · 19.03.2022, 11:24

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<body>
    <div class="section-1">
        <div class="section-1__item-1">
 
        </div>
        <div class="section-1__item-2">
 
        </div>
        <div class="section-1__item-3">
            <p>text</p>
            <p>text</p>
        </div>
    </div>
    <div class="section-2">
        <div class="section-2__item-1">
 
        </div>
        <div class="section-2__item-2">
 
        </div>
        <div class="section-2__item-3">
            <p>text</p>
            <p>text</p>
        </div>
    </div>
    <div class="section-3">
        <div class="section-3__item-1">
 
        </div>
        <div class="section-3__item-2">
 
        </div>
        <div class="section-3__item-3">
            <p>text</p>
            <p>text</p>
        </div>
    </div>
    <div class="section-4">
        <div class="section-4__item-1">
 
        </div>
        <div class="section-4__item-2">
 
        </div>
        <div class="section-4__item-3">
            <p>text</p>
            <p>text</p>
        </div>
    </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background: #12141d;
  display: grid;
  place-content: center;
  grid-template-columns: 128px 128px;
  grid-gap: 10px;
}
body > div {
  background: #c4c4c4;
  /* width: fill-available; */
  height: 192px;
  /* padding-top: 30%; */
  display: flex;
  flex-direction: column;
}
body > div > div {
  /* background: red; */
  /* height: 70%; */
  height: 35%;
  /* margin-top: 30%; */
}
body > div > div:nth-child(2) {
  background: #212121;
  height: 30%;
}
p {
  background: #c4c4c4;
}
.section-3__item-3 {
  margin-top: -50px;
}
.section-4__item-3 {
  margin-top: -50px;
}
.section-1__item-3,
.section-3__item-3 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
}
 
.section-2__item-3,
.section-4__item-3 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
 
.section-1__item-3 p:first-child {
  width: 30%;
  text-align: center;
}
.section-1__item-3 p:last-child {
  padding: 5px 0;
  background: #c4c4c4;
  width: 90%;
  text-align: center;
}
.section-1__item-3 p {
  margin-right: 105%;
}
 
.section-3__item-3 p:first-child {
  background: #c4c4c4;
  width: 30%;
  text-align: center;
}
.section-3__item-3 p:last-child {
  padding: 5px 0;
  background: #c4c4c4;
  width: 90%;
  text-align: center;
}
.section-3__item-3 p {
  margin-right: 105%;
}
 
.section-2__item-3 p:first-child {
  background: #c4c4c4;
  width: 30%;
  text-align: center;
}
.section-2__item-3 p:last-child {
  padding: 5px 0;
  background: #c4c4c4;
  width: 90%;
  text-align: center;
}
.section-2__item-3 p {
  margin-left: 105%;
}
 
.section-4__item-3 p:first-child {
  background: #c4c4c4;
  width: 30%;
  text-align: center;
}
.section-4__item-3 p:last-child {
  padding: 5px 0;
  background: #c4c4c4;
  width: 90%;
  text-align: center;
}
.section-4__item-3 p {
  margin-left: 105%;
}
.section-1 {
  border-top-left-radius: 56px;
}
.section-2 {
  border-top-right-radius: 56px;
}
.section-3 {
  border-bottom-left-radius: 56px;
}
.section-4 {
  border-bottom-right-radius: 56px;
}
.section-2 {
  margin-top: 1em;
}
.section-3 {
  margin-top: -1em;
}

Новые блоги и статьи Все статьи Все блоги /
Создаем микросервисы с Go и Kubernetes golander 02.07.2025 Когда я только начинал с микросервисами, все спорили о том, какой язык юзать. Сейчас Go (или Golang) фактически захватил эту нишу. И вот почему этот язык настолько заходит для этих задач: . . .	C++23, квантовые вычисления и взаимодействие с Q# bytestream 02.07.2025 Я всегда с некоторым скептицизмом относился к громким заявлениям о революциях в IT, но квантовые вычисления - это тот случай, когда революция действительно происходит прямо у нас на глазах. Последние. . .	Вот в чем сила LM. Hrethgir 02.07.2025 как на английском будет “обслуживание“ Слово «обслуживание» на английском языке может переводиться несколькими способами в зависимости от контекста: * Service — самый распространённый. . .	Использование Keycloak со Spring Boot и интеграция Identity Provider Javaican 01.07.2025 Два года назад я получил задачу, которая сначала показалась тривиальной: интегрировать корпоративную аутентификацию в микросервисную архитектуру. На тот момент у нас было семь Spring Boot приложений,. . .	Содержание темы с примерами на WebGL 8Observer8 01.07.2025 Все примеры из книги Мацуды и Ли в песочнице JSFiddle Пример выводит точку красного цвета размером 10 пикселей на WebGL 1. 0 и 2. 0 WebGL 1. 0. Передача координаты точки из главной программы в. . .
Основы WebGL. Простой треугольник 8Observer8 01.07.2025 Простой треугольник без трансформаций. Для трансформаций можно использовать glMatrix, как в примере: https:/ / plnkr. co/ edit/ qT6ZTwvncLPRamK5?preview На русском: . . .	Полиглотные микросервисы на C# и .NET ArchitectMsa 30.06.2025 Полиглотная архитектура появилась не из желания усложнить жизнь разработчикам. Она родилась из практической необходимости решать разные задачи наиболее эффективным способом. В одном из проектов. . .	Стратегии кеширования Javaican 29.06.2025 Кеширование — это хранение часто запрашиваемых данных в быстром хранилище (обычно в памяти), чтобы не обращаться к более медленному первоисточнику. Казалось бы, все просто. Но за этой простотой. . .	Наблюдаемость приложений ASP.NET Core с OpenTelemetry, Prometheus и Grafana ArchitectMsa 29.06.2025 Наблюдаемость (observability) – это ключевое свойство современной системы, позволяющее понимать её внутреннее состояние на основе внешних данных. Если мониторинг отвечает на вопрос "что случилось?",. . .	Четыре главных модели отношений классов в с++ russiannick 28.06.2025 Продолжаю крестовый поход против c++. ideone. com/ юзаю для проверки валидности кода. Насчитал 4 модели отношений классов: одиночный класс, равноправные классы, слейв - мастер, терминатор. . . .

@rorav 2 / 1 / 1 Регистрация: 19.03.2022 Сообщений: 4

	Верстка блока с картинками и текстом 19.03.2022, 01:13. Показов 515. Ответов 2 Метки css, css3, html, html5, верстка, верстка html css (Все метки) Нужна помощь в вёрстке данного блока. Миниатюры 0

KingdaKa 1306 / 781 / 190 Регистрация: 19.09.2020 Сообщений: 1,993
	19.03.2022, 02:03
	А в чём именно загвоздка? 0