Как сверстать такой блок на html/css, без bootstrаp?

Question

[petermsc]

В общем верстаю свой первый лендинг и проблема именно с этим блоком, у меня от цифры (большие зеленые) не встают напротив двух строк, обычно цифра встает напротив первой строки над второй, а когда это с помощью позиционированию правлю, не получается под это все вставить «вы будете знать» и ниже идущий список, все встает либо хаотично, либо в одну строку а не «столбцами».
Буду очень признателен если кто поможет, картинку блока, что не могу сверстать прилагаю

Comments

[Spartak (Web-StyleStudio)]

Флексами можно сделать
https://tproger.ru/translations/how-css-flexbox-wo...

[Aspirant555]

Spartak (Web-StyleStudio), https://habr.com/ru/post/467049/

[Антон Литвиненко]

это слайдер. здесь и не нужен бутстрап, все задается настройками слайдера, ваше дело сверстать одну карточку

Answer 1

[Kentavr16]

Вы используете flex?

Comments

[petermsc]

Добрый день!
Да, но видимо коряво, сейчас все заново перечитываю, у меня проблема, что грубо говоря вот заголовки и числа выстроил а все остальная инфа идет не ПОД нужными заголовками а либо гдет рядом, но не по уровню, либо по уровню, но опять же не внизу, все html запихано в контейнер, для каждого блока информации свой див ну и в стилях дисплей флекс и тд

[petermsc]

Я вот думаю может стоит каждый блок информации обернуть в контейнер, задать column, хотя тогда цифры, что идут напротив каждого подзаголовка, тоже будут идти колонкой, сверху подзаголовка а не слева..в общем пока тыкаюсь как слепой котенок, методом проб и ошибок

[Kentavr16]

petermsc,
Я не профессионал в этом вопросе, но насколько это видится мне : здесь есть условный хэдэр (программа курса) и 3 информационных блока с одинаковой разметкой(т.е. в css им можно присвоить один и тот же класс). каждый из этих блоков можно поделить на 2 колонки(1 это цифра и содержание блока, 2 - "вы будете знать") создаете флексовый враппер для всей страницы. и каждый информационный блок - это тоже флекс.

[Kentavr16]

Kentavr16, то есть главное - четко разбить страницу на составляющие. я как вы поняли вынес бы непослушную цифру в отдельный div.

Answer 2

[Roman Serdyuk]

То что вы пытаетесь сделать - достаточно сложно. Это одновременно и псевдоэлемент со счётчиком, и буквица.
Вот, набросал для вас приблезительный пример.

Comments

[petermsc]

Спасибо попробую, мб кстати и вставить цифры как псевдо в виде картинки

[Roman Serdyuk]

Зачем цифры в виде каартинки? Они же автоматически там присваиваются новому заголовку h1.

Answer 3

[Сергей Кутузов]

Как разместить блоки на странице на одной высоте - эт в гугле полно, а дальше в каждом блоке

<div style="width:300px;">
 <p style="font-size:46px; margin-top:-10px; margin-bottom:0px; float:left;">1</p>
  <p style="font-weight:bold;">Вводное занятие.<br>Инвестиции и биржа</p>
 <p>бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла-бла</p>
</div>

У меня вот так получилось:

Comments

[petermsc]

Спасибо за совет! Я немного изменил дизайн, так как пришла новая вводная и подзаголовки стали другие)) в плане кол-ва строк, и цифры в любом случае гуляли бы, так что я их тупо сверху разместил)) и все встало на свои места

[Сергей Кутузов]

ОК