<MyRusakov.ru />

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

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

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

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

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

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

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

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

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

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

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

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

Пример адаптивной верстки на flexbox (#2)

Пример адаптивной верстки на flexbox (#2)

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

.container {
    ..
    background-color: #f7f7f7;
}

Пример адаптивной верстки на flexbox.

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

<div class="advantages_col">
    <div class="advantages_image"><img src="image_01.svg" alt=""></div>
    <div class="advantages_text">1. Недорогие цены на работы под ключ</div>
</div>
<div class="advantages_col">
    <div class="advantages_image"><img src="image_02.svg" alt=""></div>
    <div class="advantages_text">2. Срок создания хорошего интернет-сайта — 1 день (не включая срок регистрации доменного имени)</div>
</div>
<div class="advantages_col">
    <div class="advantages_image"><img src="image_03.svg" alt=""></div>
    <div class="advantages_text">3. Пакетные предложения по системе «все включено» (хостинг, регистрация домена, техническая поддержка)</div>
</div>

Теперь колонка одновременно является флексовым элементом и контейнером для новых блоков.

.advantages_col {
    ..
    display: flex;
    align-items: center;
}

img {
    width: 49px;
    height: 49px;
}

.advantages_text {
    margin-left: 15px;
}

Осталось только стилизовать контент внутри блоков.

body {
    font-size: 17px;
    color: #333;
    font-family: sans-serif;
    font-weight: 400;
    background: #f7f7f7;
}

И если на десктопе верстка выглядит очень хорошо.


Пример адаптивной верстки на flexbox.

А на планшете, ещё более-менее терпимо.


Пример адаптивной верстки на flexbox.

То на мобильных устройствах, уже совсем плохо. Совсем ничего не разобрать.


Пример адаптивной верстки на flexbox.

Делаем адаптив под мобильные устройства

Добавляем в CSS файл медиа-запрос, который применится на экранах с разрешением меньшим, чем 768 пикселей. Нам нужно сделать глобальную перестановку - поменять направление главной оси, с row на column. Так, чтобы в ряду осталась только одна колонка. Также изменить базовую ширину у колонок, теперь они будут занимать 100% места в контейнере. И последнее, отделим колонки друг от друга нижними отступами.

@media screen and (max-width: 768px) {

    .advantages_row {
        flex-direction: column;
    }

    .advantages_col {
        flex-basis: 100%;
        max-width: 100%;
        margin-bottom: 3%;
        margin-right: 3%;
    }
}

Пример адаптивной верстки на flexbox.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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