Расскажите или покажите примером, как это сверстать?

Question

[Nikita]

Всем привет? сейчас пробую разобраться в данной странице, и не могу сообразить как это верстаетеся?

Как должно быть

Использую Bootstrap и если на нем это возможно, подскажите.
Пока получается вот такое, и это я потом не смогу адаптивно подогнать, там всюду position:absolute; left:*%;

То что получилось и это не будет нормально на мобильном работать

меня именно интересует, как правильно делается вот такая двухсторонняя верстка

Answer 1

[KononovD]

А что там делать-то?

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

а вообще..
берем, открываем container, row, col-lg-3 и col-lg-9 (или какие там размеры колонок, наугад писал)
в col-lg-3 запихиваем блоки, что слева, очевидно, а в col-lg-9 запихиваем заголовок, картинку и текст.. все до безумия просто)

а куда деть левую колонку на телефонах - уже сами думайте)

p.s. всем картинкам у себя в проекте поставьте max-width: 100%; max-height:auto display:block;

Comments

[Nikita]

вот в основном проблема была в том что, я не знаю как выдвинуть именно правую часть при мобильной версии вверх.

[KononovD]

Никита, вы хотите, что бы сначала был блок с текстом, а потом блок с кредитом? вот тогда ссылка, читайте
https://getbootstrap.com/docs/4.0/utilities/flex/#order

[Nikita]

KononovD, Спасибо!) я вот в основном это и не мог понять, юзают еще 3 бутстрап.
Возник еще одни вопрос xD
не знаете как сделать такой текст внутри дива? чтобы он центрирования, и не вылазил под левый или это все нужно задавать стилями?

[KononovD]

Никита, так это же простой список

<ul>
<li>
какой-то текст
</li>
<li>
какой-то текст
</li>
<li>
какой-то текст
</li>
</ul>

li задаем падинги, маргины, дисплей блок и псевдоэлементами делаем зеленые точечки

[KononovD]

Никита, как-то так
https://codepen.io/Kononov_D/pen/zbdJzJ

[Nikita]

KononovD, Стиля воспользуюсь, спасибо) просто это мобильная версия и тут идет списком, а на деск версии у меня 2 таблицы

[KononovD]

Никита, сложно это в голове представлять.. не понимаю, конечно, зачем таблицу на телефоне превращать в список.. ну ладно..
при определенном media screen and (max-width: XXXpx)
скрываете таблицу и показываете список..

[Nikita]

KononovD,
Это жесть)))
Я просто в коем-то веки решил что-то сверстать, друг предложил сделать ему сайт.
Теперь мучаюсь, я обычно использую JS+JQ по работе ну и .NET
а тут просто с ума схожу
Я дико извиняюсь, но не могли бы вы мне помочь еще кое в чем?
Мне нужно сделать чтобы вот этот калькулятор был адаптивным.

Оригинал

https://drive.google.com/open?id=1vb-8KZZ-rMVrb1aR...

и вот как выходит у меня

Жалкая копия

Давайте я залью на гитхаб проект и скину вам ссылку? можете меня добавить в скайпе пожалуйста razor_1000, я хочу научится это делать, но так как начал помогать другу, нет времени для обычной практики

[Nikita]

KononovD, мдамс, я накрутилд в том проекте когда тестировал возможность залит на гит, теперь это не очень работает у меня)))

вот ссылка на Гугл драйв папки, простите что только так получается.
https://drive.google.com/open?id=1nYEBWJP3O1UK3_Rn...

[KononovD]

Никита, если есть - дайте телеграмм

[KononovD]

Никита, или вот вам мой
https://t.me/Daniyl_Kononov