<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

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

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

На предыдущем уроке мы верстали карусель (слайдер) с помощью Bootstrap компонента Carousel, а на этом уроке нас ждет верстка секции с иконками.

Секция с иконками

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

Эти иконки представляют из себя PNG картинки на прозрачном фоне, наложенные сверху на фигуры круга. Напомню, что мы верстаем по 12-колоночной сетке Bootstrap. Сначала мы создаем секцию (section), чтобы задать верхний отступ от карусели. Дальше идут стандартные классы Bootstrap: container -> row -> col-sm-4. На макете отчетливо видно, что одна иконка занимает одну колонку, в которой по 4 столбика, что в сумме дает 12 (3x4=12). Помимо бутстраповских, мы задаем и свои классы, отвечающие за внешний вид текста, заголовков, отступов, позиционирования.

HTML разметка

<section class="icons">
 <div class="container-fluid">
  <div class="row">
   <div class="col-sm-4 wrap-icons">
    <div class="icon-circle blue">
    <img class="image-icon" src="images/pen.png">
    </div>
    <h6>Lorem Ipsum is simply</h6>
    <p>Lorem Ipsum is not simply random text.<br>
    It has roots in a piece</p>
    </div>
  <div class="col-sm-4 wrap-icons">
   <div class="icon-circle red">
    <img class="image-icon" src="images/screen.png">
    </div>
    <h6>Lorem Ipsum is simply</h6>
    <p>Lorem Ipsum is not simply random text.<br>
    It has roots in a piece </p>
  </div>
  <div class="col-sm-4 wrap-icons">
   <div class="icon-circle pink">
    <img class="image-icon" src="images/basket.png">
    </div>
    <h6>Lorem Ipsum is simply</h6>
    <p>Lorem Ipsum is not simply random text.<br>
    It has roots in a piece </p>
   </div>
  </div>
 </div>
</section>

CSS код

/* Отступы от края секции с иконками */
.icons{
  margin-top: 70px;
  font-family: "SegoeWPN";
}
/* Выравнивает текст по центру */
.wrap-icons{
  text-align: center;
}
/* Цвет заголовка и отступ */
.wrap-icons h6{
  color: #7eadf5;
  margin-top: 25px;
}
/* Цвет, шрифт текста */
.wrap-icons p{
  color: #999;
  font-size: 80%;
  margin-bottom: 16px;
}
/* Круг под картинку-иконку */
.icon-circle{
  display: block;
  border-radius: 50%;
  text-align: center;
  margin: auto;
  padding: 15px;
  width: 170px;
  height: 170px;
  position: relative;
}
/* Цвет круга */
.blue{
  background: #5094f2;
}
/* Цвет круга */
.red{
  background: #d94748;
}
/* Цвет круга */
.pink{
  background: #ebbb11;
}
/* Картинки-иконки в центре */
.image-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

Профессиональные верстальщики, используют CSS фреймворк не только для адаптивной сетки, но и активно применяют готовые компоненты, что в разы увеличивает скорость верстки. Этот замечательный видеокурс, научит вас как эффективно научиться на все 100% использовать Bootstrap при верстке и создании сайтов.

Продолжение следует..

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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