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

Pawfect🐾










 Služba starostlivosti o domáce zvieratá v Severnej Karolíne







instagram viewer



 Dochádza čas? Nehovor viac. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt niemo predpokladá tvár?

Výkon:

Teraz je čas upraviť navigačnú ponuku a sekciu hrdinov.

Všeobecné CSS

Pridajte všeobecný štýl CSS do hornej časti style.css súbor. Sekcia hrdinu má obrázok na pozadí. Môžeš prístup ku kompletnému kódu vrátane obrázkov na GitHubalebo použite svoj vlastný obrázok.

* {
 okraj: 0;
 výplň: 0;
 box-sizing: border-box;
}
html {
/* 10px / 16px = 0,625 = 62,5*/
 veľkosť písma: 62,5 %;
 pretečenie-x: skryté;
 rolovacie správanie: hladké;
}
telo {
 font-family: 'Rubik', bezpätkové;
 výška riadku: 1,5;
 veľkosť písma: 1,5rem;
 váha písma: 400;
 pretečenie-x: skryté;
 farba: #523414;
 farba pozadia: #e9be5a;
}
.hlavička-primárna,
.nadpis-sekundárny,
.heading-terciary {
 váha písma: 700;
 farba: #523414;
 medzi písmenami: -0,5px;
}
.heading-primary {
 veľkosť písma: 5,2rem;
 výška riadku: 1,05;
 okraj-dole: 3,2rem;
}
.heading-secondary {
 veľkosť písma: 4,4rem;
 výška riadku: 1,2;
 okraj-dole: 5,6rem;
 text-align: center;
}
.heading-terciary {
 veľkosť písma: 3rem;
 výška riadku: 1,2;
 okraj: 1,2rem;
}
a {
 text-dekorácia: žiadna;
}
.first-fold {
 obrázok na pozadí: url(img/Pawfect-bg.png);
 min-výška: 80rem;
}

Úprava štýlu navigačného panela

Použite CSS flexbox upravte logo a navigačné ponuky v rade. Set farba pozadia na transparentné a dať a hraničný polomer z 9px na tlačidlo Call-To-Action (CTA).

CSS navigačného panela

/* ****************** */
/* Logo */
/* ****************** */
.header {
 displej: flex;
 justify-content: medzera-medzi;
 align-items: center;
 farba pozadia: transparentná;
 výška: 9,6rem;
 polstrovanie: 0 4,8rem;
}
.logo {
 výška: 2,2rem;
 veľkosť písma: 3,6rem;
 text-dekorácia: žiadna;
 text-align: center;
 váha písma: tučné;
 farba: #462d12;
}
/* ****************** */
/* Navigácia */
/* ****************** */
.main-nav-list {
 štýl zoznamu: žiadny;
 displej: flex;
 align-items: center;
 medzera: 4,8rem;
}
.main-nav-link {
 displej: inline-block;
 text-dekorácia: žiadna;
 farba: #462d12;
 váha písma: 400;
 veľkosť písma: 1,8rem;
}
.main-nav-link.nav-cta {
 polstrovanie: 1,2rem 2,4rem;
 border-radius: 9px;
 farba: #fff;
 farba pozadia: #523414;
}

Výkon:

Súvisiace: Ako vytvoriť responzívny navigačný panel pomocou HTML a CSS

Štylizácia sekcie hrdinov

Nastaviť a max-šírka na triedu hrdinu vnorenú primárny nadpis a popis. V opačnom prípade sa rozšíri až do konca namiesto toho, aby zostal na ľavej strane. Nastaviť veľkosť písma a vypchávka podľa vašej požiadavky.

Hrdinská sekcia CSS

/* ****************** */
/* Sekcia hrdinov */
/* ****************** */
.section-hero {
 polstrovanie: 15rem 0 9,6rem;
}
.hero {
 max-šírka: 75rem;
 polstrovanie: 0 9,6rem;
 align-items: left;
}
.hero-description {
 veľkosť písma: 2rem;
 výška riadku: 1,6;
 okraj: 4,8rem 0;
}

Výkon:

Budovanie sekcie služieb

Stránka poskytuje štyri služby: kompletné ošetrovanie, samoobslužné umývanie psov, umývanie a fénovanie a masáž tela a labiek.

HTML sekcia služieb

Vytvorte rodiča class=”služby siete” a pridajte všetky štyri služby pomocou. Pridajte obrázok, názov služby a jej malý popis.

Naše služby






Kompletná starostlivosť

Lorem ipsum consectetur adipisicing elita.







Samoobslužné umývanie psov

Odit aliquam dolor ex doloremque sed itaque.







Umyte a vyfúkajte

Voluptatem suscipit ut omnis quas saepe.







Masáž tela a labiek

Sapiente quos qui hic porro voluptatibus impedit.

Sekcia služieb CSS

Vytvorte mriežku s dvoma rovnakými stĺpcami a nastavte medzera do 4rem. Upravte všetky mriežkové položky v strede a nastavte obrázok šírka na 80 % pôvodnej veľkosti.

/* ****************** */
/* Naše služby */
/* ****************** */
.Naše služby {
 výplň: 9,6rem 0;
}
.container {
 max-šírka: 120rem;
 okraj: 0 auto;
 polstrovanie: 1,5rem 3,2rem;
}
.grid {
 displej: mriežka;
 mriežka-šablóna-stĺpce: 1fr 1fr;
 medzera: 4rem;
 align-items: center;
 justify-content: center;
 text-align: center;
}
.services img {
 šírka: 80 %;
 border-radius: 9px;
}

Výkon:

Vytvorenie sekcie Informácie

Sekcia About bude mať obrázok a textové pole s niekoľkými stručnými informáciami o tíme.

O sekcii HTML

Vytvor 
 a umiestnite do nej obrázok a text. 








O nás


 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 Preparenda
 diktovať!

O sekcii CSS

Upravte štýl obrázka a textového poľa pomocou mriežky CSS a pridajte a Vrhať tieň aby to bolo atraktívnejšie. Použite a záporná marža na nastavenie textového poľa nad obrázkom.

/* ****************** */
/* O nás */
/* ****************** */
.grid-about {
 mriežka-šablóna-stĺpce: 1,2fr 0,8fr;
 medzera: 0;
}
.asi {
 výplň: 2rem 0 7rem 0;
}
.o img {
 šírka: 98 %;
 ospravedlniť sa: koniec;
 border-radius: 9px;
}
.asi p {
 veľkosť písma: 2,2rem;
}
.text {
 max-šírka: 45rem;
 farba pozadia: #e7ac21;
 polstrovanie: 10rem 5rem;
 ľavý okraj: -5rem;
 border-radius: 9px;
}
.text h2 {
 okraj-dole: 4,5rem;
 text-align: center;
}

Výkon:

Päta webovej stránky zanecháva v mysliach návštevníkov trvalý dojem, preto sa uistite, že je čistá a dobre usporiadaná.

Pridajte hlavný nadpis s poďakovaním návštevníkom. © je HTML entita pre © symbol.

Upravte štýl päty tak, že jej dáte iný štýl farba pozadia a vhodné nastavenie vypchávka.

/* ****************** */
/* Päta */
/* ****************** */
päta {
 text-align: center;
 farba pozadia: #e7ac21;
 polstrovanie: 2,5rem;
}

Výkon:

Môžete si pozrieť konečnú webovú stránku Pawfect sledovaním tohto odkazu.

Zverejnite svoj web

Gratulujeme, vytvorili ste kompletnú webovú stránku od začiatku pomocou HTML a CSS! Je čas zverejniť svoj web a získať spätnú väzbu od komunity. Dúfame, že sa vám proces tvorby stránky páčil. Ak ste novým hosťom, pozrite sa, ako bezplatne hostiť webovú stránku pomocou stránok GitHub.

Naincy Mouryaová (19 publikovaných článkov)

Naincy sa špecializuje na vytváranie vysoko responzívnych webových stránok a efektívnu obsahovú stratégiu spolu s webovými kópiami. Je technologickou spisovateľkou na voľnej nohe, ktorá pozorne sleduje trendy technológií.

Viac od Naincy Mouryaovej