Ребята подскажите пожалуйста как сверстать такие вот два очень простых макета

@Nik1886 · Регистрация: 25.02.2016

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

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

Хочется увидеть как бы их сверстал человек с опытом.

Всем хорошего дня!

Заранее огромное спасибо!

@Resume · 25.02.2016, 16:19

Пробовал сверстать первый макет ваш.
Вот результат: http://файлообменник.рф/xwmqnx2tqix3.html .
Опыт у меня небольшой

Жду мнения от Вас!

@evikza · 25.02.2016, 17:37

Nik1886. Опыта в верстке практически нет, но ловите второй макет

http://codepen.io/evikza/pen/MygojV

@ArtSmm · 25.02.2016, 17:53

Привет. Сегодня посмотрю, что можно придумать

@Nik1886 · 25.02.2016, 20:01 **[ТС]**

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

.row:before,
.row:after {
content: " ";
display: table;
}

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

.informer {
background: #fff;
}

я просто недавно начал изучать html/css, поэтому понимаю как могут "очень глупо"
смотреться мои вопросы, поэтому извиняюсь если что не так

Заранее огромное спасибо!

@Nik1886 · 25.02.2016, 20:10 **[ТС]**

Resume, Спасибо за ответ! Я врятли могу адекватно оценить код но визуально смотрится так как надо. Единственное картинка image1 не отображается в браузере, как я понимаю потому что не прописано в html, а просто указано как BG в css. А вообще что меня смущает в макете так это наличие двух фоток, я просто не могу понять они должны меняться типо слайдом или это просто так на выбор)) хотя второй вариант очень сомнительный))

Добавлено через 1 минуту
ArtSmm, Спасибо! буду ждать!

@evikza · 25.02.2016, 20:11

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

Скажи пожалуйста зачем в стилях два раза прописывать

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

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

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

и тут опять же, лишний класс добавил, хотел обернуть .col-md-1

@Nik1886 · 25.02.2016, 20:13 **[ТС]**

evikza, Спасибо большое!

@ArtSmm · 25.02.2016, 21:40

первый - у меня так получился https://jsfiddle.net/622v2hbw/... vUi0pu6bjA Сейчас второй напилю)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	25.02.2016, 16:19
	Пробовал сверстать первый макет ваш. Вот результат: http://файлообменник.рф/xwmqnx2tqix3.html . Опыт у меня небольшой Жду мнения от Вас! 1

@evikza 968 / 530 / 244 Регистрация: 20.05.2015 Сообщений: 776
	25.02.2016, 17:37
	Сообщение было отмечено Nik1886 как решение Решение Nik1886. Опыта в верстке практически нет, но ловите второй макет http://codepen.io/evikza/pen/MygojV 1

@ArtSmm 32 / 32 / 2 Регистрация: 07.01.2016 Сообщений: 487
	25.02.2016, 17:53
	Привет. Сегодня посмотрю, что можно придумать 1

@Nik1886 0 / 0 / 0 Регистрация: 25.02.2016 Сообщений: 4
	25.02.2016, 20:01 [ТС]
	evikza, Спасибо огромное за ответ. Скажи пожалуйста зачем в стилях два раза прописывать .row:before, .row:after { content: " "; display: table; } и можешь пожалуйста объяснить что означает этот селектор .informer { background: #fff; } я просто недавно начал изучать html/css, поэтому понимаю как могут "очень глупо" смотреться мои вопросы, поэтому извиняюсь если что не так Заранее огромное спасибо! Миниатюры 0

@Nik1886 0 / 0 / 0 Регистрация: 25.02.2016 Сообщений: 4
	25.02.2016, 20:10 [ТС]
	Resume, Спасибо за ответ! Я врятли могу адекватно оценить код но визуально смотрится так как надо. Единственное картинка image1 не отображается в браузере, как я понимаю потому что не прописано в html, а просто указано как BG в css. А вообще что меня смущает в макете так это наличие двух фоток, я просто не могу понять они должны меняться типо слайдом или это просто так на выбор)) хотя второй вариант очень сомнительный)) Добавлено через 1 минуту ArtSmm, Спасибо! буду ждать! 0

@Nik1886 0 / 0 / 0 Регистрация: 25.02.2016 Сообщений: 4
	25.02.2016, 20:13 [ТС]
	evikza, Спасибо большое! 0

@ArtSmm 32 / 32 / 2 Регистрация: 07.01.2016 Сообщений: 487
	25.02.2016, 21:40
	первый - у меня так получился https://jsfiddle.net/622v2hbw/... vUi0pu6bjA Сейчас второй напилю) 1

Ребята подскажите пожалуйста как сверстать такие вот два очень простых макета

Решение