<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

HTML шаблон для портфолио

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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.