href=" https://fonts.googleapis.com/css2?family=Rubik: wght@400;500;600;700&display=swap"
 rel="stylesheet"
 />

Pawfect🐾








instagram viewer







 Услуга за домашни любимци в Северна Каролина




 Изтичане на времето? Не казвай повече. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo acceptnda facere?

Изход:

Сега е време да стилизирате менюто за навигация и секцията за герои.

Общ CSS

Добавете общия CSS стил в горната част на вашия style.css файл. Секцията герой има фоново изображение. Можеш достъп до пълния код, включително изображения в GitHub, или използвайте свое собствено изображение.

* {
 марж: 0;
 допълване: 0;
 кутия-оразмеряване: борд-кутия;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 размер на шрифта: 62,5%;
 overflow-x: скрит;
 поведение на превъртане: гладко;
}
тяло {
 семейство шрифтове: 'Rubik', без засечки;
 линия-височина: 1,5;
 размер на шрифта: 1.5rem;
 шрифт-тегло: 400;
 overflow-x: скрит;
 цвят: #523414;
 цвят на фона: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
 шрифт-тегло: 700;
 цвят: #523414;
 буквен интервал: -0,5px;
}
.heading-primary {
 размер на шрифта: 5.2rem;
 линия-височина: 1,05;
 поле-долу: 3.2rem;
}
.heading-secondary {
 размер на шрифта: 4.4rem;
 линия-височина: 1,2;
 поле-долу: 5.6rem;
 подравняване на текста: център;
}
.heading-tertiary {
 размер на шрифта: 3rem;
 линия-височина: 1,2;
 марж: 1.2rem;
}
a {
 текст-украса: няма;
}
.first-fold {
 фоново изображение: url(img/Pawfect-bg.png);
 мин. височина: 80rem;
}

Оформяне на лентата за навигация

Използвайте CSS flexbox за да коригирате подред логото и навигационните менюта. Комплект Цвят на фона да прозрачен и да даде a граница-радиус на 9px до бутона Call To Action (CTA).

CSS лента за навигация

/* ****************** */
/* Лого */
/* ****************** */
.header {
 дисплей: гъвкав;
 justify-content: пространство между;
 align-items: център;
 цвят на фона: прозрачен;
 височина: 9.6rem;
 подплата: 0 4.8rem;
}
.лого {
 височина: 2.2rem;
 размер на шрифта: 3.6rem;
 текст-украса: няма;
 подравняване на текста: център;
 шрифт-тегло: получер;
 цвят: #462d12;
}
/* ****************** */
/* Навигация */
/* ****************** */
.main-nav-list {
 списък-стил: няма;
 дисплей: гъвкав;
 align-items: център;
 междина: 4.8rem;
}
.main-nav-link {
 дисплей: inline-block;
 текст-украса: няма;
 цвят: #462d12;
 шрифт-тегло: 400;
 размер на шрифта: 1.8rem;
}
.main-nav-link.nav-cta {
 подплата: 1.2rem 2.4rem;
 радиус на границата: 9px;
 цвят: #fff;
 цвят на фона: #523414;
}

Изход:

Свързани: Как да създадете адаптивна лента за навигация с помощта на HTML и CSS

Оформяне на секцията Hero

Задайте а максимална ширина върху класа герой, в който се влага основното заглавие и описание. В противен случай той ще се простира до края, вместо да остане от лявата страна. Нагласи размер на шрифта и подплата според вашето изискване.

Герой раздел CSS

/* ****************** */
/* Раздел за герои */
/* ****************** */
.section-hero {
 подплата: 15rem 0 9.6rem;
}
.hero {
 максимална ширина: 75rem;
 подплата: 0 9.6rem;
 align-items: вляво;
}
.hero-description {
 размер на шрифта: 2rem;
 линия-височина: 1,6;
 марж: 4.8rem 0;
}

Изход:

Изграждане на секция за услуги

Сайтът предоставя четири услуги: пълен груминг, самообслужване на кучета, измиване и сушене със сешоар и масаж на тялото и лапите.

Раздел за услуги HTML

Създайте родител клас=”мрежови услуги” и добавете всичките четири услуги с помощта на. Добавете изображението, името на услугата и малко описание.

нашите услуги






Пълен груминг

Lorem ipsum consectetur adipisicing elit.







Самообслужващ се измиване на кучета

Odit aliquam dolor ex doloremque sed itaque.







Измийте и изсушете със сешоар

Voluptatem suscipit ut omnis quas saepe.







Масаж на тяло и лапи

Sapiente quos qui hic porro voluptatibus impedit.

Секция за услуги CSS

Създайте мрежа с две равни колони и задайте празнина да се 4rem. Коригирайте всички решетъчни елементи в центъра и задайте изображението ширина до 80% от оригиналния размер.

/* ****************** */
/* Нашите услуги */
/* ****************** */
.нашите услуги {
 подложка: 9.6rem 0;
}
.контейнер {
 максимална ширина: 120rem;
 марж: 0 автоматично;
 подплата: 1.5rem 3.2rem;
}
.grid {
 дисплей: решетка;
 grid-template-columns: 1fr 1fr;
 междина: 4rem;
 align-items: център;
 justify-content: център;
 подравняване на текста: център;
}
.services img {
 ширина: 80%;
 радиус на границата: 9px;
}

Изход:

Изграждане на раздел „За информация“.

Секцията Информация ще има изображение и текстово поле с кратка информация за екипа.

Относно раздел HTML

Създавам 
 и поставете изображението и текста вътре в него. 








За нас


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
 officiis, perferendis iure possimus dolor aspernatur incidunt rem
 ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
 dolor perspiciatis aspernatur incidunt rem placeat quis acceptnda
 дикта!

Относно раздел CSS

Оформете изображението и текстовото поле с помощта на CSS Grid и добавете a падаща сянка за да стане по-привлекателен. Използвай отрицателен марж за да зададете текстовото поле над изображението.

/* ****************** */
/* За нас */
/* ****************** */
.grid-about {
 grid-template-columns: 1.2fr 0.8fr;
 празнина: 0;
}
.относно {
 подпълване: 2rem 0 7rem 0;
}
.about img {
 ширина: 98%;
 justify-self: край;
 радиус на границата: 9px;
}
.about p {
 размер на шрифта: 2.2rem;
}
.текст {
 максимална ширина: 45rem;
 цвят на фона: #e7ac21;
 подплата: 10rem 5rem;
 margin-left: -5rem;
 радиус на границата: 9px;
}
.text h2 {
 поле-долу: 4.5rem;
 подравняване на текста: център;
}

Изход:

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

Добавете основно заглавие, което казва благодарност на посетителите. © е HTML обект за © символ.

Оформете долния колонтитул, като му придадете различен Цвят на фона и подходяща настройка подплата.

/* ****************** */
/* Долен колонтитул */
/* ****************** */
долен колонтитул {
 подравняване на текста: център;
 цвят на фона: #e7ac21;
 подплата: 2.5rem;
}

Изход:

Можете да видите окончателния уебсайт на Pawfect като следвате тази връзка.

Публикувайте своя уебсайт

Поздравления, създадохте пълен уебсайт от нулата с помощта на HTML и CSS! Време е да публикувате уебсайта си и да получите обратна връзка от общността. Надяваме се, че сте харесали процеса на създаване на сайта. Ако сте нов в хостинга, вижте как да хоствате уебсайт безплатно с помощта на GitHub Pages.

Найнси Муря (публикувани 19 статии)

Naincy е специализирана в изграждането на високо отзивчиви уебсайтове и ефективна стратегия за съдържание заедно с уеб копия. Тя е технически писател на свободна практика, който следи остро актуалните технологии.

Още от Naincy Mourya