Мы подошли к заключительному уроку по вёрстке сайта. В этом уроке вы закончите код со стилями и увидите полный результат вашей работы.
Пишем стили для сайта
- откройте VC Code
- откройте слева на панели "Проводник"
- откройте файл
index.html - откройте файл
style.css
Дальше мы будем работать со вторым блоком на сайте
- напишите код в файле
style.css
CSS
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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
Код скопирован в буфер обмена
.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 чат
