<MyRusakov.ru />

Программирование на C++ в Unreal Engine 5

Программирование на C++ в Unreal Engine 5

Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.

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

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

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

Верстка портфолио на flexbox (часть 1)

Верстка портфолио на flexbox (часть 1)

Можно бесконечно долго изучать HTML теги и CSS свойства, но эти знания сами по себе ничего не дают. Нужно брать PSD макет и начинать верстать, закрепляя знания на практике.

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

Фрагмент макета - секция портфолио:

Верстка портфолио на flexbox.

Анализ макета

Все цвета, размеры, названия шрифтов, отступы, берутся из макета. Мы видим, что макет состоит из двух секций:

  • секция с описанием
  • секция с фотографиями

У макета есть контейнер с шириной 1200 пикселей между крайними направляющими, это значит, что ширина первой секции будет жестко ограничена этим размером, независимо от размера экрана. На больших экранах (например 1900 пикселей), по краям браузера останется пустое пространство, по 350 пикселей, с обеих сторон.

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

Таким образом, анализируя макет, мы намечаем структуру разметки и делаем вывод, что эти секции будут находиться в разных контейнерах.

И все таки у обеих секций есть общие стили – это верхний и нижний отступ. Создадим для них общий контейнер section и пропишем в нем отступы.

<section class="section"></section>

/* секция портфолио */
.section {
  padding: 80px 0;/* отступы сверху и снизу */
}

У всей секции имеются общие стили.

/* общие свойства для всей страницы */
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
/* обнуление полей и отступов для всех */
* {
  margin: 0;
  padding: 0;
}

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

HTML код

<div class="container">
  <div class="section_header">
    <h3>What we do</h3>
    <h2>some of our work</h2>
    <div class="section_text">
      <p>text text<p>
    </div>
  </div>
</div>

CSS код

Обратите внимание, что у класса container, помимо максимальной ширины, задана ещё ширина в процентах. Это нужно для адаптивности под разные разрешения.

/* контейнер для первой секции */
.container {
  width: 100%;/* ширина относительно родителя */
  max-width: 1200px; /* ограничение максимальной ширины */
  margin: 0 auto;/* выравнивание по центру */
}
/* шапка секции */
.section_header {
  width: 100%; /* ширина относительно родителя */
  max-width: 950px;/* ограничение максимальной ширины */
  margin: 0 auto 50px;/* отступы */
  text-align: center; /* выравнивание по центру */
}
/* подзаголовок */
h3 {
  font-family: 'Kaushan Script', cursive;
  font-size: 24px;
  color: #333;
}
/* заголовок */
h2 {
  font-size: 30px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
}
/* черта под заголовком */
h2:after {
  content: "";
  display: block;
  width: 60px;/* длина черты */
  height: 3px;/* толщина черты */
  margin: 30px auto; /* отступы относительно родителя */
  background-color: #f38181;/* цвет черты */
}
/* параграф с текстом */
.section_text {
  font-size: 15px;
  color: #999;
  font-family: 'Roboto', sans-serif;
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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