Войти

Метка: Homework

Стилизация статьи про Lego

Posted on by admin

В последний раз мы подключили к нашему проекту со статьей normalize.css и style.css в который внесли некоторые стили.

Давайте немного подготовим нашу статью к вёрстке:

  • Проверим, что все пути к файлам прописаны правильно и удалим размер изображения width="700"
  • Удалим из таблицы прописанные ранее свойства. Потому что все свойства мы будем писать через классы в файле style.css
  • Так же нам нужно добавить новый стиль для всего документа.
    Это свойство позволяет наследовать свойство box-sizing у родительского элемента всем элементам на странице.
CSS
Код скопирован в буфер обмена copy

*,
*::before,
*::after {
      box-sizing: inherit;
}

Опираясь на пример создадим стили:

  • Общий контейнер
    В примере мы видим, что статья располагается не во всю ширину экрана. Ранее мы уже создали класс container для главного контейнера <body>
    - зададим ширину 1170 пикселей и поставим содержимое контейнера по центру всей веб-страницы
    - добавим шрифты для всей статьи: Arial, Helvetica, sans-serif
CSS
Код скопирован в буфер обмена copy

.container {
      width: 1170px;
      margin: 0 auto;
      font-family: Arial, Helvetica, sans-serif;
      padding: 20px;
      background-color: #eee;
}

  • Главный заголовок
    Для главного заголовка создадим класс main_title и присвоим ему стили:
    - переназначим нижний отступ и зададим ему 30 пикселей
    - зададим размер шрифта 50 пикселей
    - сделаем цвет текста blueviolet
CSS
Код скопирован в буфер обмена copy

.main_title {
      margin-bottom: 30px;
      font-size: 50px;
      color: blueviolet;
}

  • Стилизуем параграфы
    Всем параграфам, одинаковым по стилю, необходимо создать класс text . Зададим стили:
    - сбросим отступы
    - переназначим нижний отступ 30 пикселей
    - для удобства чтения сократим ширину до 1100 пикселей
    - зададим размер шрифта 20 пикселей
    - расстояние между строк 1.5
CSS
Код скопирован в буфер обмена copy

.main_title {
      margin: 0;
      margin-bottom: 30px;
      max-width: 1100px;
      font-size: 20px;
      line-height: 1.5;
}

Сверимся с макетом:

  • Стилизация цитаты
    Цитата имеет фоновый цвет и отличается в начертании. Обратите внимание! Цитата должна находиться в контейнере, для того чтобы мы могли стилизовать контейнер.
    - задайте класс для контейнера цитаты quote
    - сбросьте внешние отступы
    - задайте нижний отступ 30 пикселей
    - задайте внутренние отступы, чтобы отделить контент внутри контейнера: 20 пикселей сверху и снизу, 50 пикселей слева и справа
    - задайте цвет фона со значением blueviolet
    - задайте цвет текста цитаты lightgray
    - задайте размер текста цитаты 20 пикселей
    - расстояние между строк 1.5
CSS
Код скопирован в буфер обмена copy

.main_title {
      margin: 0;
      margin-bottom: 30px;
      font-size: 20px;
      line-height: 1.5;
}

Посмотрим на результат:

  • Стилизация изображения
    В примере статьи изображение прижато к левому краю, а в нашем случае у тега <figure> есть встроенные отступы.
    - назначим тегу <figure> класс image_group
    - сбросим все отступы и отцентруем изображение с подписью
    - переназначим нижний отступ 50 пикселей
    - ограничим максимальную ширину блока до 700 пикселей
CSS
Код скопирован в буфер обмена copy

.image_group {
      margin: 0 auto;
      margin-bottom: 50px;
      max-width: 700px;
}

  • Блок после изображения - это его подпись. Назначим собственный класс для тега с подписью и присвоим ему стили:
    - назначим внутренние отступы, чтобы отделить текст от краев 10 пикселей со всех сторон
    - цвет фона blueviolet
    - цвет текста lightgray
    - сделаем размер шрифта 16 пикселей
    - поставим текст по центру
CSS
Код скопирован в буфер обмена copy

.image_group_text {
      padding: 10px;
      background-color: blueviolet;
      color: lightgray;
      font-size: 16px;
      text-align: center;
}

  • Заголовки второго уровня
    Далее у нас идут повторяющиеся элементы - заголовки. Выглядят они одинаково и имеют одинаковый вес в статье, поэтому мы можем использовать для них один общий класс.
    - переназначим нижний отступ 30 пикселей
    - размер шрифта 30 пикселей
CSS
Код скопирован в буфер обмена copy

.heding {
      margin-bottom: 30px;
      font-size: 30px;
}

  • Стилизуем список
    Зададим списку собственный класс и пропишем свойства:
    - назначим отступ снизу 30 пикселей
    - размер шрифта 20 пикселей
    - увеличим расстояние между строк до 1.2
    - чтобы увеличить расстояние между элементами списка "достучимся" до них через класс родительского элемента. При этом не забудем применить псевдокласс, чтобы у последнего элемента в списке отступа не было.
CSS
Код скопирован в буфер обмена copy

.list {
      margin-bottom: 30px;
      font-size: 20px;
      line-height: 1.2;
}
.list li:not(:last-child) {
      margin-bottom: 20px;
}

Нижний отступ задается всему списку , то есть тегу <ol> , при этом у последнего элемента нижний отступ отсутствует:

  • Таблица
    Присвойте таблице класс и стилизуйте его
    - разместим таблицу по центру
    - добавим нижний отступ 30 пикселей
    - из предыдущих уроков мы знаем, что ячейки в таблице имеют расстояние между собой и чтобы их сбросить нам нужно свойство border-collapse со значением collapse .
CSS
Код скопирован в буфер обмена copy

.main_table {
      margin: 0 auto;
      margin-bottom: 30px;
      border-collapse: collapse;
}

  • Заголовок таблицы
    Присвойте заголовку таблицы класс и стилизуйте его
    - отступ снизу 10 пикселей
    - толщина шрифта со значением 700
    - размер шрифта 20 px
CSS
Код скопирован в буфер обмена copy

.main_caption {
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 20px;
}

  • Первая строка таблицы
    Присвойте тегам <th> класс table_bord и стилизуйте его
    - задайте сплошную границу толщиной 1 пиксель серого цвета
    -  чтобы отделить контент от краев ячейки нам потребуется установить внутренний отступ для каждой ячейки. Добавим внутренние отступы 30 пикселей
  • Остальные ячейки таблицы сейчас не имеют границ. Мы могли бы назначить им собственный класс и задать границу, но так как у нас гриницы во всей таблице одинаковые, то мы можем использовать один класс table-bord . Добавьте его во все ячейки. Да, это может показаться довольно трудозатратной работой, но верстальщики должны справляться с такими задачами.
CSS
Код скопирован в буфер обмена copy

.table_bord {
      padding: 30px;
      border: 1px solid gray;
}

  • Вернемся к стилизации первой строки таблицы. Мы видим, что цвет шрифта отличается от цвета шрифта внутри таблицы и заголовки прижаты к левому краю. Поэтому, мы не можем использовать тот же класс, который применяли для стилизации ячеек. Нам нужно создать еще один класс.
    Делается это таким образом:
HTML
Код скопирован в буфер обмена copy

<th class="table_bord table_header">Название набора</th>

  • Дополнительный класс просто пишется через пробел.
    - задайте фиолетовый цвет текста, такой же, как мы использовали ранее в статье.
    - расположите текст по левому краю
CSS
Код скопирован в буфер обмена copy

.table_header {
      color: blueviolet;
      text-align: left;
}

Посмотри, что получилось в браузере:

  • И последний элемент в статье - ссылки
    - присвойте новый класс для ссылок
    - поставьте размер шрифта 20 пикселей
    - цвет текста фиолетовый
    - для того чтобы назначить внешние отступы у ссылки, ее необходимо сделать блочным элементом
    - используя псевдокласс сделайте расстояние между ссылками 20 пикселей (удалите в HTML коде теперь уже не нужный тег <br>
CSS
Код скопирован в буфер обмена copy

.link {
      font-size: 20px;
      color: blueviolet;
      display: block;
}
.link:not(:last-child) {
      margin-bottom: 20px;
}

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

Для продолжения прохождения курса загрузите свой АРХИВ папки с проектом

Визуальное оформление страницы. Часть 3

Posted on by admin

Мы подошли к заключительному уроку по вёрстке сайта. В этом уроке вы закончите код со стилями и увидите полный результат вашей работы.

Пишем стили для сайта

  • откройте VC Code
  • откройте слева на панели "Проводник"
  • откройте файл index.html
  • откройте файл style.css

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

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.block_project {
      margin-bottom: 120px;
      min-height: 470px;
      align-items: center;
      flex-wrap: wrap;
}
.block_project_img {
      margin-right: auto;
}
.block_project_text {
     flex-direction: column;
     max-width: 580px;
     justify-content: flex-end;
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Мы расставили по местам отдельные части второго блока сайта. Теперь наведем красоту в его правой части

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.block_project_heading {
      gap: 40px;
      margin-bottom: 40px;
      align-items: center;
}
.second_heading {
      margin: 0;
      font-weight: 700;
      font-size: 47px;
      text-transform: uppercase;
}
.block_project_ph {
      margin: 0;
      font-weight: 400;
      font-size: 16px;
      line-height: 2;
      margin-bottom: 40px;
}
.block_project_btn {
      width: 240px;
      min-height: 65px;
      color: white;
      font-weight: 400;
      font-size: 16px;
      letter-spacing: 1px;
      background-image: url(../img/btn_black.png);
      background-repeat: no-repeat;
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Первый блок стал соответствовать дизайну в макете

Переходим к оформлению третьего блока.

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.block_archive {
      margin-bottom: 120px;
      min-height: 470px;
      flex-direction: column;
}
.block_archive_list {
      gap: 40px;
      margin-bottom: 50px;
      flex-wrap: wrap;
      justify-content: center;
}
.block_archive_list li {
      max-width: 400px;
}
.archive_item_text {
      background-color: #F8F8F8;
      padding: 28px 32px;
      margin-top: 20px;
}

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

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.archive_list_heading {
      margin: 0;
      margin-bottom: 15px;
      font-weight: 700;
      font-size: 20px;
}
.archive_list_ph {
      margin: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: 2;
}
.block_archive_btn {
      width: 240px;
      min-height: 65px;
      color: white;
      font-weight: 400;
      font-size: 16px;
      letter-spacing: 1px;
      background-image: url(../img/btn_black.png);
      background-repeat: no-repeat;
      align-self: center;
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Третий блок сайта готов.

Переходим к оформлению четвертого блока.

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.block_work {
     margin-bottom: 120px;
     flex-direction: column;
     align-items: center;
}
.block_work_list {
    gap: 20px 40px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    justify-content: center;
}
.block_work_list li {
     max-width: 480px;
     padding: 90px 70px 110px;
     background-repeat: no-repeat;
     text-align: center;
}
.block_work_item_1 {
     background-image: url(../img/track_1.png);
}
.block_work_item_2 {
     background-image: url(../img/track_2.png);
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. В этом блоке нам осталось поработать с заголовками и кнопками

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.work_heading {
     margin: 0;
     margin-bottom: 15px;
     color: white;
     font-weight: 700;
     font-size: 28px;
}
.work_btn {
     color: white;
     background-color: black;
     border-radius: 20px;
     min-width: 37px;
     padding: 10px 100px;
     font-weight: 500;
     font-size: 14px;
     letter-spacing: 1px;
     text-transform: uppercase;
}
.block_work_btn {
     width: 240px;
     min-height: 65px;
     color: white;
     font-weight: 400;
     font-size: 16px;
     letter-spacing: 1px;
     background-image: url(../img/btn_black.png);
     background-repeat: no-repeat;
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Мы закончили стилизацию четвертого блока.

Мы на финишной прямой! У нас остался последний шаг - стилизация футера. Это моя любимая часть урока, потому что в футере довольно сложная структура и чтобы расположить элементы согласно дизайну нужно очень хорошо постараться.

Если вы справитесь с этим сложным футером, дальше работа с кодом вам покажется довольно простым и рутинным занятием 🙂

Сначала наведем общую красоту.

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.footer_design {
     padding: 40px 0 20px;
     background: url(../img/footer_1.png) top 150px left -10px / 119px 137px no-repeat,
          url(../img/footer_2.png) top -28px right 20px / 184px 52px no-repeat,
          url(../img/footer_3.png) top 150px right 130px / 48px 55px no-repeat,
          url(../img/footer_4.png) top 250px right 20px / 78px 64px no-repeat,
          linear-gradient(#000, #000);
}
.footer_group {
     flex-direction: column;
}
.footer_block {
     gap: 20px 37px;
     padding-bottom: 20px;
     border-bottom: 1px solid lightgray;
     flex-wrap: wrap;
}
.footer_block_first {
     max-width: 293px;
}
.footer_logo {
     margin-bottom: 25px;
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Фон расположение блоков готовы

Далее сделаем дизайн левой части футера.

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.footer_ph {
     margin: 0;
     margin-bottom: 16px;
     font-weight: 400;
     font-size: 14px;
     line-height: 2;
     color: white;
}
.footer_btn {
     width: 226px;
     min-height: 65px;
     font-weight: 400;
     font-size: 14px;
     background-image: url(../img/footer_btn.png);
     background-repeat: no-repeat;
     margin-bottom: 25px;
}
.footer_smm {
     height: 45px;
     gap: 10px;
}
.smm_icons {
     width: 45px;
     background-repeat: no-repeat;
}
.smm_icons_1 {
     background-image: url(../img/footer_tg.png);
}
.smm_icons_2 {
     background-image: url(../img/footer_vk.png);
}
.smm_icons_3 {
     background-image: url(../img/footer_mail.png);
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Левая часть футера готова.

Поработаем с правой частью футера - навигацией по сайту

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.footer_list {
     color: white;
     gap: 20px 135px;
     flex-wrap: wrap;
}
.footer_item {
     flex-direction: column;
}
.footer_list_heading {
     margin: 0;
     margin-bottom: 16px;
     font-weight: 700;
     font-size: 14px;
     letter-spacing: 1px;
}
.footer_nav {
     font-weight: 400;
     font-size: 14px;
}
.footer_nav:not(:last-child) {
     margin-bottom: 20px;
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Права часть футера готова. Последний рывок!

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

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

.footer_privacy {
     color: white;
     padding-top: 20px;
     font-weight: 400;
     font-size: 14px;
     flex-wrap: wrap;
}
.privacy_text {
     margin-right: auto;
}
.privacy_link:not(:last-child) {
     margin-right: 20px;
}
@media (max-width: 1200px) {
     body {
          padding: 0 20px;
     }
     .footer_design {
          background-image: none;
          background-color: black;
     }
     .footer_group {
          padding: 0 20px;
     }
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере.

Поздравляю! Вы закончили вёрстку своей первой страницы сайта!

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

 

Если у вас что-то не получается, обязательно пишите свои вопросы в Telegram-чат курса. Так же обязательно пишите ваши ощущения от процесса написания кода.

Telegram чат

Для завершения курса ниже загрузите свой АРХИВ папки sity_says

Визуальное оформление страницы. Часть 2

Posted on by admin

Код CSS - используют для визуального оформления веб-страниц. Он работает по своим правилам и пишется в отдельном файле с разрешением .css

В первом мы присвоили классы стилей для элементов в файле index.html А сейчас нам нужно написать параметры стилей в отдельный файл.

Пишем стили для сайта

  • откройте VC Code
  • откройте слева на панели "Проводник"
  • выберите папку "css"
  • нажмите на значек "Создать файл..."

  • в появившейся строке напишите style.css и нажмите Enter

Справа на рабочей области у вас откроется новая вкладка. Мы будем писать стили в этом файле.

Для начала пропишем несколько общих настроек для всей страницы.

Напоминаю, что в этих уроках вам не нужно задумываться о том, почему мы используем тот или иной код. Сейчас вам не понятно, почему пишутся такие символы и как они работают. Всё это вы будете изучать в полном курсе по Frontend разработке. В этом мини-курсе вы просто смотрите "внутрянку" работы программиста и оцениваете свои ощущения от процесса работы.

  • откройте ваш файл index.html в браузере (будем смотреть там на изменения в дизайне)

Сейчас вы можете обратить внимание, что весь контент на сайте имеет небольшой отступ слева и сверху. Я специально сделала скриншот на фоне VS Code, чтобы было хорошо видно левый и верхний отступы.

  • напишите код в файле style.css
CSS
Код скопирован в буфер обмена copy

html {
      box-sizing: border-box;
}
a {
      color: inherit;
      text-decoration: none;
}
img {
     max-width: 100%;
}
body {
     min-width: 320px;
     margin: 0;
     font-family: "Montserrat", sans-serif;
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Теперь мы видим некоторые изменения в шрифте и на сайте пропал левый и верхний отступы

Дальше подключим шрифт, который дизайнер поставил в макете.

  • скачайте файл со шрифтами и распакуйте архив в папку "fonts" - Скачать

  • продолжайте писать код ниже в файле style.css
CSS
Код скопирован в буфер обмена copy

@font-face {
     font-family: "Montserrat";
     src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
     font-weight: 400;
     font-style: normal;
     font-display: swap;
}
@font-face {
     font-family: "Montserrat";
     src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
}
@font-face {
     font-family: "Montserrat";
     src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;
     font-display: swap;
}

  • сохраните изменения в файле style.css
  • обновите страницу в браузере. Можно заметить, что поменялись шрифты

Обратите внимание. Дальше в коде перед названием класса будет стоять точка.

  • напишите код ниже в файле style.css
CSS
Код скопирован в буфер обмена copy

.flex {
     display: flex;
}
.container {
     max-width: 1282px;
     margin: 0 auto;
}
.btn {
     padding: 0;
     border: none;
     background-color: transparent;
     cursor: pointer;
}
.list_reset {
     list-style: none;
     padding: 0;
     margin: 0;
}