<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Верстка по сетке Bootstrap (часть 4)

Верстка по сетке Bootstrap (часть 4)

Итак, на этом уроке делаем верстку последней секции макета по сетке Bootstrap.


Секция с корзиной

Верстка по сетке Bootstrap (часть 4).

Верстаем уже по накатанной схеме: секция -> контейнер -> ряд -> две колонки. В блоке row, сделаем выравнивание контента по центру, прописав класс justify-content-center.

HTML код

<section class="cart">
 <div class="container-fluid">
  <div class="row justify-content-center">
   <div class="col-sm-6">
    <div class="cart-wrap">
    <h2>The Shopping cart</h2>
    <img class="cart-image" src="images/cart.png">
    </div>
    </div>
   <div class="col-sm-6">
    <div class="cart-text">
    <h4>Some Bullet text here</h4>
    <p>some text
    </p>
    </div>
   </div>
  </div>
 </div>
</section>

CSS код

/* обертка для секции с корзиной */
.cart {
  padding: 80px 50px 120px 50px;
  font-family: "SegoeWPN";
}
/* Выравнивает по центру */
.cart-wrap{
  text-align: center;
  color: #6f7173;
}
/* Размер корзины */
.cart-image{
  max-width: 80%;
  margin-top: 15px;
}
/* Отступ от верхней секции */
.cart-text h4{
  margin-top: 50px;
}
/* Стили параграфа */
.cart-text p{
  margin-top: 30px;
  font-size: 80%;
  line-height: 30px;
  color: #999;
}

Демонстрация примера в браузере

Итоги

Сетка фреймворка Bootstrap на ширине меньше 576 пикселей, автоматически заточена на складывание колонок друг под друга. Вам останется в медиа-запросах, уменьшать отступы, размер текста, только там где это нужно.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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