<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

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

Подпишитесь на мой канал на 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):

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