<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн и верстка страницы Contact Us. Часть #3

Дизайн и верстка страницы Contact Us. Часть #3

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

Контактная информация + соц. иконки


.info {
    background:#0e3959;/*цвет фона*/
}
.info h3 {
    color: #fff;/*цвет подзаголовка*/
}
.infoBox div{
    display: flex;/*flexbox сетка*/
    align-items: center;/*вертикальное центрирование*/
    margin-bottom: 10px;/*отступ после заголовка*/
}
.infoBox div span {
    min-width: 40px;/*минимальная ширина блока*/
    height: 40px;/*высота блока*/
    margin-right: 15px;/*отступ справа*/
    display: flex;
    justify-content: center;/*горизонтальное центрирование*/
    align-items: center;
    background: #18b7ff;
    color: #fff;/*цвет текста*/
    font-size: 1.5em;/*размер текста*/
    border-radius: 50%;/*закругленные углы*/
}
.infoBox div p,
.infoBox div a{
    text-decoration: none;/*без подчеркивания*/
    color: #fff;
    font-size: 1.1em;
}
.sci {
    margin-top: 40px;
    display: flex;
}
.sci li {
    list-style: none;/*убираем черные маркеры*/
    margin-right: 15px;
}
.sci li a {
    font-size: 2em;
    display: flex;
    color: #ccc;
}
.sci li a:hover {
    color: #fff;
}


Дизайн и верстка страницы Contact Us.

Google карта

Карта должна занять весь блок на 100%.

.map{
    padding: 0;
}
.map iframe {
    width: 100%;
    height: 100%;
    border: none;
}


Дизайн и верстка страницы Contact Us.

Адаптивность

На данном этапе, сделанная страница не адаптивна. В этом легко убедиться, если перейти в режим разработчика и выбрать разрешение для iPhone 6/7/8.



Дизайн и верстка страницы Contact Us.

Но все можно изменить, если добавить специальные медиа-запросы. Начиная с ширины экрана 991 пикселей любого устройства, начинают действовать новый правила. Теперь количеств колонок в шаблоне grid-template-columns, уменьшилось до одной.

@media (max-width:991px){
body{
    background: #03a9f5;
}
.contactus{
    padding: 20px;
}
.box{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "form"
        "info"
        "map";
}
.formBx .row50{
    flex-direction: column;
    gap: 0;
}
.inputBox {
    width: 100%;
}
.map{
    height: 300px;
}
}


Дизайн и верстка страницы Contact Us.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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