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

Pawfect🐾










 Služba péče o domácí mazlíčky v Severní Karolíně




 Dochází čas? Už nic neříkej. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo předpokládatnda facere?





instagram viewer

Výstup:

Nyní je čas upravit navigační nabídku a sekci hrdinů.

Obecné CSS

Přidejte obecný styl CSS do horní části styl.css soubor. Sekce hrdiny má obrázek na pozadí. Můžeš přístup ke kompletnímu kódu včetně obrázků na GitHubunebo použijte svůj vlastní obrázek.

* {
 okraj: 0;
 výplň: 0;
 box-sizing: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 velikost písma: 62,5 %;
 přetečení-x: skryté;
 rolovací chování: hladké;
}
tělo {
 rodina písem: 'Rubik', bezpatkové;
 výška řádku: 1,5;
 velikost písma: 1,5rem;
 váha písma: 400;
 přetečení-x: skryté;
 barva: #523414;
 barva pozadí: #e9be5a;
}
.hlavička-primární,
.nadpis-sekundární,
.heading-terciary {
 váha písma: 700;
 barva: #523414;
 mezera mezi písmeny: -0,5px;
}
.heading-primary {
 velikost písma: 5,2rem;
 výška řádku: 1,05;
 okraj-dole: 3,2rem;
}
.heading-secondary {
 velikost písma: 4,4rem;
 výška řádku: 1,2;
 okraj-dole: 5,6rem;
 text-align: center;
}
.heading-terciary {
 velikost písma: 3rem;
 výška řádku: 1,2;
 okraj: 1,2rem;
}
a {
 text-dekorace: žádná;
}
.first-fold {
 obrázek na pozadí: url(img/Pawfect-bg.png);
 min-výška: 80rem;
}

Úprava stylu navigačního panelu

Použití CSS flexbox upravit logo a navigační nabídky v řadě. Soubor barva pozadí zprůhlednit a dát a hraniční poloměr z 9px na tlačítko Call-To-Action (CTA).

CSS navigační lišty

/* ****************** */
/* Logo */
/* ****************** */
.header {
 displej: flex;
 justify-content: mezera-mezi;
 align-items: center;
 barva pozadí: průhledná;
 výška: 9,6rem;
 polstrování: 0 4,8rem;
}
.logo {
 výška: 2,2rem;
 velikost písma: 3,6rem;
 text-dekorace: žádná;
 text-align: center;
 váha písma: tučné;
 barva: #462d12;
}
/* ****************** */
/* Navigace */
/* ****************** */
.main-nav-list {
 styl seznamu: žádný;
 displej: flex;
 align-items: center;
 mezera: 4,8rem;
}
.main-nav-link {
 displej: inline-block;
 text-dekorace: žádná;
 barva: #462d12;
 váha písma: 400;
 velikost písma: 1,8rem;
}
.main-nav-link.nav-cta {
 polstrování: 1.2rem 2.4rem;
 border-radius: 9px;
 barva: #fff;
 barva pozadí: #523414;
}

Výstup:

Příbuzný: Jak vytvořit responzivní navigační panel pomocí HTML a CSS

Stylování sekce Hrdina

Nastavit a max. šířka na třídě hrdiny vnořující primární nadpis a popis. V opačném případě se rozšíří až na konec, místo aby zůstal na levé straně. Nastav velikost písma a vycpávka podle vašeho požadavku.

CSS sekce hrdiny

/* ****************** */
/* Sekce hrdinů */
/* ****************** */
.section-hero {
 polstrování: 15rem 0 9,6rem;
}
.hero {
 max-šířka: 75rem;
 polstrování: 0 9,6rem;
 align-items: left;
}
.hero-description {
 velikost písma: 2rem;
 výška řádku: 1,6;
 okraj: 4,8rem 0;
}

Výstup:

Budování sekce služeb

Tato stránka poskytuje čtyři služby: kompletní péči o srst, samoobslužné mytí psů, mytí a fénování a masáž těla a tlapek.

HTML sekce služeb

Vytvořit rodiče class=”síťové služby” a přidejte všechny čtyři služby pomocí. Přidejte obrázek, název služby a její malý popis.

naše služby






Kompletní péče

Lorem ipsum consectetur adipisicing elit.







Samoobslužné mytí psů

Odit aliquam dolor ex doloremque sed itaque.







Umyjte a vyfoukejte

Voluptatem suscipit ut omnis quas saepe.







Masáž těla a tlapek

Sapiente quos qui hic porro voluptatibus impedit.

Sekce služeb CSS

Vytvořte mřížku se dvěma stejnými sloupci a nastavte mezera na 4rem. Upravte všechny mřížkové položky uprostřed a nastavte obrázek šířka na 80 % původní velikosti.

/* ****************** */
/* Naše služby */
/* ****************** */
.naše služby {
 polstrování: 9,6rem 0;
}
.container {
 max-šířka: 120rem;
 okraj: 0 auto;
 polstrování: 1,5rem 3,2rem;
}
.grid {
 displej: mřížka;
 grid-template-columns: 1fr 1fr;
 mezera: 4rem;
 align-items: center;
 justify-content: center;
 text-align: center;
}
.services img {
 šířka: 80 %;
 border-radius: 9px;
}

Výstup:

Vytvoření sekce O aplikaci

Sekce About bude mít obrázek a textové pole s několika stručnými informacemi o týmu.

O sekci HTML

Vytvořit 
 a umístěte do něj obrázek 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 quissumptionnda
 diktovat!

O sekci CSS

Upravte styl obrázku a textového pole pomocí mřížky CSS a přidejte a vrhat stín aby to bylo atraktivnější. Použijte a záporná marže pro nastavení textového pole nad obrázkem.

/* ****************** */
/* O nás */
/* ****************** */
.grid-about {
 mřížka-šablona-sloupce: 1,2fr 0,8fr;
 mezera: 0;
}
.o {
 polstrování: 2rem 0 7rem 0;
}
.o img {
 šířka: 98 %;
 ospravedlnit-se: konec;
 border-radius: 9px;
}
.asi p {
 velikost písma: 2,2rem;
}
.text {
 max-šířka: 45rem;
 barva pozadí: #e7ac21;
 polstrování: 10rem 5rem;
 okraj-levý: -5rem;
 border-radius: 9px;
}
.text h2 {
 okraj-dole: 4,5rem;
 text-align: center;
}

Výstup:

Zápatí webových stránek zanechá v myslích návštěvníků trvalý dojem, takže se ujistěte, že je čisté a dobře uspořádané.

Přidejte hlavní nadpis s poděkováním návštěvníkům. © je HTML entita pro © symbol.

Upravte styl zápatí tak, že mu dáte jiný styl barva pozadí a vhodné nastavení vycpávka.

/* ****************** */
/* Zápatí */
/* ****************** */
zápatí {
 text-align: center;
 barva pozadí: #e7ac21;
 polstrování: 2,5rem;
}

Výstup:

Můžete si prohlédnout finální web Pawfect následováním tohoto odkazu.

Zveřejněte svůj web

Gratulujeme, vytvořili jste kompletní web od začátku pomocí HTML a CSS! Je čas publikovat svůj web a získat zpětnou vazbu od komunity. Doufáme, že se vám proces tvorby stránek líbil. Pokud s hostingem začínáte, podívejte se, jak zdarma hostovat web pomocí stránek GitHub.

Naincy Mouryaová (19 zveřejněných článků)

Naincy se specializuje na vytváření vysoce responzivních webových stránek a efektivní obsahové strategie spolu s webovými kopiemi. Je to nezávislá tech spisovatelka, která ostře sleduje trendy technologií.

Více od Naincy Mouryaové