Создаем адаптивный шаблон сайта-портфолио | RUDEBOXАдаптивность в современном веб-дизайне отыгрывает большую роль, пользователю важно, чтобы сайт был удобным для чтения, и подстраивался под их девайсы. Разработчики все чаще стали видоизменять свои ресурсы, чтобы максимально упростить сайт для чтения на персональных устройствах. В данном уроке мы рассмотрим небольшое портфолио, которое полностью адаптивное. Мы воссоздали полностью главную страницу, упростили ее в минимальном стиле, что сейчас весьма популярно, и прикрутили адаптивность, как все это выглядит судите сами.

 

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

Шаг 1. HTML

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

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

Создаем адаптивный шаблон сайта-портфолио | RUDEBOX

Шаг 2. CSS

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

Вот и все. Готово!