HTML шаблон для портфолио
На этом уроке мы научимся делать простое адаптивное портфолио, где количество столбцов, меняется в зависимости от ширины экрана на просматриваемом устройстве.
Демонстрация примера.
Из этого урока, пользу извлекут как начинающие верстальщики, так и представители разных профессий, которым нужен простой HTML шаблон портфолио. В конце урока будет ссылка на CodePen, откуда можно скачать данный шаблон.
HTML код
Сначала создадим секцию section, внутри которой поместим все остальные элементы сайта. Смысл секции в том, чтобы портфолио позиционировать в центре окна браузера, задав соответствующие ей стили.
<section>…</section>
Внутри секции:
<!-- заголовок первого уровня с названием домена сайта -->
<h1>LOGO.RU</h1>
<!-- горизонтальная линия -->
<hr>
<!-- заголовок второго уровня с названием сайта -->
<h2>Портфолио фотографа</h2>
<!-- абзац с каким-нибудь текстом -->
При уменьшении окна браузера, вы увидите, как работает адаптивность. Затем строим сетку для галереи. Первый ряд и единственный, если работ в портфолио больше, то ряды можно добавить.
<div class="row">…</div>
Внутри ряда идут четыре столбцы, где один столбец – одна работа в портфолио. Здесь я приведу код одного столбца, остальные будут идентичные, но с разным содержимым.
<!—блок контейнер для контента, служит для позиционирования -->
<div class="column">
<!—блок с контентом, служит для оформления -->
<div class="content">
<!—ссылка на большую фотографию -->
<a target="_blank" href="mountains.jpg">
<!—превью фотографии -->
<img src="mountains.jpg" alt="Mountains">
</a>
<!—заголовок третьего уровня с названием работы -->
<h3>Крутая гора</h3>
<!—абзац с описанием работы -->
<p>Добавьте привлекательное описание к каждой вашей работе. Найдите нечто особенное и порекомендуйте сферу применения конкретной фотографии.</p>
</div>
</div>
После первого ряда, расположилась одна большая фотография, с одним отличием, в коде, что нет тега div с классом row. В этом нет необходимости, поскольку фотография одна и после отмены обтекания, блок так и так встанет в новом ряду.
<div class="content">
<a target="_blank" href="lion.jpg">
<img src="lion.jpg" alt="Lion">
</a>
<h3>Царь зверей</h3>
<p> Добавьте привлекательное описание к каждой вашей работе. Найдите нечто особенное и порекомендуйте сферу применения конкретной фотографии.</p>
<p> Добавьте привлекательное описание к каждой вашей работе. Найдите нечто особенное и порекомендуйте сферу применения конкретной фотографии.</p>
</div>
CSS код
Ограничим ширину секции с портфолио до 1000 пикселей , чтобы на больших экранах мониторов, превью фотографии не растягивались до бесконечности.
section {
max-width: 1000px;
margin: auto; /* вебсайт в центре окна браузера */
}
Задаем отступы со всех сторон от края браузера у блока с классом row.
.row {
margin: 8px -16px;
}
Поля по 8 пикселей со всех сторон, между колонками у блоков с указанными классами.
.row,
.row > .column {
padding: 8px;
}
Правило, расположения четырех столбцов: каждый занимает 25% от контейнера и обтекает друг друга слева, как способ поставить их в ряд.
.column {
float: left;
width: 25%;
}
Способ отмены обтекания для следующих элементов, идущих после столбцов, в противном случае, большая фотография не появиться на новой строке.
.row:after {
content: "";
display: table;
clear: both;
}
Добавляем адаптивность
На ширине экрана меньше, чем 900 пикселей, расположить по два столбца в ряд, вместо четырех.
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
На ширине экрана меньше, чем 600 пикселей, оставить по одному столбцу в ряде, расположив все работы портфолио друг под другом.
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
На CodePen, можно посмотреть весь код и импортировать шаблон себе на компьютер, в дальнейшем заменив фотографии и текст на свои.
See the Pen HTML шаблон портфолио by porsake (@porsake) on CodePen.
-
Создано 30.11.2018 10:00:37
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.