Как лучше сверстать предложенный макет?

@MonkeyNerd · Регистрация: 06.04.2017

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

Всем алоха.
Как посоветуете сверстать данный макет?

Состоит из нескольких картинок, причем колесо отличается от остальных по высоте.
Есть ли смысл делать это через bootstrap grid или рациональнее сделать другим способом?

@andyyy · 20.09.2017, 23:21

как нравится так и делайте

@MonkeyNerd · 20.09.2017, 23:24 **[ТС]**

Окей.

Пока что у меня такой алгоритм:
1) разметить две строки с N столбцами
2) задать столбцам высоту
3) сделать картинки фоном столбцов

Но у меня несколько вопросов:
1) Текст лучше делать .svg или простыми тегами?
2) Как лучше вставлять фоновые картинки? Через background-image?

@andyyy · 20.09.2017, 23:36

Сообщение от MonkeyNerd

) разметить две строки с N столбцами

у вас там вроде 3 картинки

Сообщение от MonkeyNerd

2) задать столбцам высоту

ну - можете не задавать - если хотите резиновый макет(то в процентах)

Сообщение от MonkeyNerd

3) сделать картинки фоном столбцов

ага

Сообщение от MonkeyNerd

1) Текст лучше делать .svg или простыми тегами?

Если как на картинке - то лучше обычными, если какой-то супер кривой текст то svg

Сообщение от MonkeyNerd

2) Как лучше вставлять фоновые картинки? Через background-image?

можно просто через Background url();

@MonkeyNerd · 20.09.2017, 23:45 **[ТС]**

ну - можете не задавать - если хотите резиновый макет(то в процентах)

Так а относительно чего будут считаться эти проценты?

У меня там 7 "блоков"

@iwarhill · 21.09.2017, 00:54

Недавно начал изучать Css Grid. На нем самое то будет сделать. Почитайте.

@MonkeyNerd · 21.09.2017, 01:48 **[ТС]**

Уже сделал, спасибо)

@MonkeyNerd 0 / 0 / 0 Регистрация: 06.04.2017 Сообщений: 16
		1
	Как лучше сверстать предложенный макет? 20.09.2017, 22:34. Показов 708. Ответов 6 Метки нет (Все метки) Всем алоха. Как посоветуете сверстать данный макет? Состоит из нескольких картинок, причем колесо отличается от остальных по высоте. Есть ли смысл делать это через bootstrap grid или рациональнее сделать другим способом? Миниатюры 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	20.09.2017, 23:21	2
	как нравится так и делайте 0

@MonkeyNerd 0 / 0 / 0 Регистрация: 06.04.2017 Сообщений: 16
	20.09.2017, 23:24 [ТС]	3
	Окей. Пока что у меня такой алгоритм: 1) разметить две строки с N столбцами 2) задать столбцам высоту 3) сделать картинки фоном столбцов Но у меня несколько вопросов: 1) Текст лучше делать .svg или простыми тегами? 2) Как лучше вставлять фоновые картинки? Через background-image? 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	20.09.2017, 23:36	4
	Сообщение от MonkeyNerd ) разметить две строки с N столбцами у вас там вроде 3 картинки Сообщение от MonkeyNerd 2) задать столбцам высоту ну - можете не задавать - если хотите резиновый макет(то в процентах) Сообщение от MonkeyNerd 3) сделать картинки фоном столбцов ага Сообщение от MonkeyNerd 1) Текст лучше делать .svg или простыми тегами? Если как на картинке - то лучше обычными, если какой-то супер кривой текст то svg Сообщение от MonkeyNerd 2) Как лучше вставлять фоновые картинки? Через background-image? можно просто через Background url(); 0

@MonkeyNerd 0 / 0 / 0 Регистрация: 06.04.2017 Сообщений: 16
	20.09.2017, 23:45 [ТС]	5
	ну - можете не задавать - если хотите резиновый макет(то в процентах) Так а относительно чего будут считаться эти проценты? У меня там 7 "блоков" 0

@iwarhill 2 / 2 / 1 Регистрация: 14.08.2017 Сообщений: 40
	21.09.2017, 00:54	6
	Недавно начал изучать Css Grid. На нем самое то будет сделать. Почитайте. 0

@MonkeyNerd 0 / 0 / 0 Регистрация: 06.04.2017 Сообщений: 16
	21.09.2017, 01:48 [ТС]	7
	Уже сделал, спасибо) 0