<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

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

Также к курсу идёт Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

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

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

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

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

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

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

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

Пример верстки простой секции на CSS Grid #3

Пример верстки простой секции на CSS Grid #3

На первом и втором уроках мы делали адаптивную верстку фотогалереи, где контент заполнял всю ширину экрана. Сегодня сверстаем простую секцию «О Бренде», с ограниченной шириной.


Пример верстки простой секции на CSS Grid.

HTML разметка

Наша секция section-brand состоит из контейнера container, который ограничивает ширину контента и двух колонок. В левой колонке brand-left находится текст, а в правой колонке brand-right - фотография.

<section class="section-brand">
  <div class="container">
    <div class="brand-left">
      <h2>О Бренде</h2>
      <p>..text..</p>
    </div>
     <div class="brand-right">
      <img src="img/photo.jpg" alt="Example" class="img-responsive">
    </div>
  </div>
</section>

CSS код

Зададим общие стили для серой секции.

.section-brand {
    background-color: #ededed; / * серый цвет фона * /
    padding: 80px 0; / * отступы по бокам, сверху и снизу * /
}

.section-brand h2 {
    font-size: 34px;
    font-weight: 800;
    color: #293a43;
    line-height: 1.2;
}

Контейнер может максимально растягиваться до 1200 пикселей. Хорошая новость в том, что мы можем указать любую ширину сетки, в отличии от Bootstrap. Элементы внутри контейнера будут адаптивными при любой ширине сетки.

.container {
    display: grid; / * отобразить как CSS Grid * /
    max-width: 1200px; / * максимальная ширина * /
    margin: auto; / * выравнивание контейнера по центру * /
    padding: 0 20px; / * отступы сверху, снизу и по бокам * /
}

Внутри контейнера стилизуем левую колонку и заголовок.

.brand-left {
    border-right: 1px solid #dadada; / * разделитель между колонками * /
    font-size: 18px;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-right: 60px;
}
.brand-left h2 {
    margin-top: 0;
    margin-bottom: 40px;
}

Добавим CSS стили к правой колонке. Чтобы изображение было адаптивным, добавим ему класс img-responsive. Теперь картинка будет растягиваться по ширине того элемента, в котором она находится.

.brand-right {
    padding-left: 40px;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

На текущий момент наша секция выглядит вот так: правая и левая части находятся друг под другом, а должны находится в одном ряду.


Пример верстки простой секции на CSS Grid.

Разобьем секцию section-brand на две колонки (фракции).

.section-brand .container {
    grid-template-column: 1fr 1fr;
}

Теперь все встало на свои места.


Пример верстки простой секции на CSS Grid.

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

На отметке 768 пикселей нужно перестроить двухколоночный макет на одноколоночный, а также уменьшить размер шрифта с отступами.

@media only screen and (max-width:768px) {
.section-brand {
    padding: 50px 0;
}
.section-brand h2 {
    text-align: center;
    font-size: 26px;
    margin-bottom: 26px;
}
.section-brand .container {
    grid-template-columns: 1fr; / * переход на одну колонку * /
}
.section-brand .container>div {
    padding: 0 8% / * обнуление и уменьшение отступов * /
}
.section-brand .container>div.brand-left {
    border: none; / * убираем серый разделитель * /
}


Пример верстки простой секции на CSS Grid.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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