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

Pawfect🐾








instagram viewer







 Storitev za nego hišnih ljubljenčkov v Severni Karolini




 Zmanjkuje časa? Ne reči ničesar več. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo acceptnda facere?

Izhod:

Zdaj je čas, da oblikujete navigacijski meni in razdelek junakov.

Splošni CSS

Dodajte splošni slog CSS na vrh svojega style.css mapa. Razdelek junaka ima sliko ozadja. Ti lahko dostopajte do celotne kode, vključno s slikami na GitHubu, ali uporabite svojo sliko.

* {
 marža: 0;
 oblazinjenje: 0;
 velikost škatle: obrobna škatla;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 velikost pisave: 62,5 %;
 overflow-x: skrito;
 vedenje pomikanja: gladko;
}
telo {
 družina pisav: 'Rubik', sans-serif;
 višina vrstice: 1,5;
 velikost pisave: 1,5 rem;
 teža pisave: 400;
 overflow-x: skrito;
 barva: #523414;
 barva ozadja: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-terciary {
 teža pisave: 700;
 barva: #523414;
 razmik med črkami: -0,5px;
}
.heading-primary {
 velikost pisave: 5,2 rem;
 višina vrstice: 1,05;
 rob-dno: 3,2rem;
}
.heading-secondary {
 velikost pisave: 4,4 rem;
 višina vrstice: 1,2;
 rob-dno: 5,6rem;
 poravnava besedila: središče;
}
.heading-terciary {
 velikost pisave: 3rem;
 višina vrstice: 1,2;
 marža: 1,2rem;
}
a {
 besedilna dekoracija: brez;
}
.first-fold {
 slika ozadja: url(img/Pawfect-bg.png);
 najmanjša višina: 80rem;
}

Oblikovanje navigacijske vrstice

Uporaba CSS flexbox če želite zaporedoma prilagoditi logotip in navigacijske menije. Set Barva ozadja pregledno in dati a obrobni polmer od 9 slikovnih pik na gumb Poziv k dejanju (CTA).

CSS navigacijske vrstice

/* ****************** */
/* Logo */
/* ****************** */
.header {
 zaslon: flex;
 justify-content: prostor-med;
 align-items: center;
 barva ozadja: prozorna;
 višina: 9,6rem;
 oblazinjenje: 0 4,8rem;
}
.logo {
 višina: 2,2rem;
 velikost pisave: 3,6 rem;
 besedilna dekoracija: brez;
 poravnava besedila: središče;
 teža pisave: krepko;
 barva: #462d12;
}
/* ****************** */
/* Navigacija */
/* ****************** */
.main-nav-list {
 slog seznama: brez;
 zaslon: flex;
 align-items: center;
 reža: 4,8rem;
}
.main-nav-link {
 zaslon: inline-block;
 besedilna dekoracija: brez;
 barva: #462d12;
 teža pisave: 400;
 velikost pisave: 1,8 rem;
}
.main-nav-link.nav-cta {
 oblazinjenje: 1,2rem 2,4rem;
 radij obrobe: 9px;
 barva: #fff;
 barva ozadja: #523414;
}

Izhod:

Povezano: Kako zgraditi odzivno navigacijsko vrstico z uporabo HTML in CSS

Oblikovanje oddelka Hero

Nastavite a največja širina na razred junakov, ki ugnezdi primarni naslov in opis. V nasprotnem primeru se bo razširil do konca, namesto da bi ostal na levi strani. Nastavite velikost pisave in oblazinjenje glede na vaše zahteve.

Oddelek Hero CSS

/* ****************** */
/* Odsek junakov */
/* ****************** */
.section-hero {
 oblazinjenje: 15rem 0 9,6rem;
}
.hero {
 največja širina: 75rem;
 oblazinjenje: 0 9,6rem;
 align-items: levo;
}
.hero-description {
 velikost pisave: 2rem;
 višina vrstice: 1,6;
 marža: 4,8rem 0;
}

Izhod:

Izgradnja oddelka za storitve

Spletno mesto ponuja štiri storitve: popolno nego, samopostrežno pranje psov, pranje in sušenje ter masažo telesa in šape.

Oddelek za storitve HTML

Ustvarite starša razred = "mrežne storitve" in dodajte vse štiri storitve z uporabo. Dodajte sliko, ime storitve in kratek opis.

naše storitve






Popolna nega

Lorem ipsum consectetur adipisicing elit.







Samopostrežno pranje psov

Odit aliquam dolor ex doloremque sed itaque.







Operite in posušite

Voluptatem suscipit ut omnis quas saepe.







Masaža telesa in šape

Sapiente quos qui hic porro voluptatibus impedit.

Oddelek za storitve CSS

Ustvarite mrežo z dvema enakima stolpcema in nastavite vrzel do 4rem. Prilagodite vse mrežni elementi na sredini in nastavite sliko premer do 80 % prvotne velikosti.

/* ****************** */
/* Naše storitve */
/* ****************** */
.naše storitve {
 oblazinjenje: 9,6rem 0;
}
.container {
 največja širina: 120rem;
 marža: 0 samodejno;
 oblazinjenje: 1,5rem 3,2rem;
}
.mreža {
 zaslon: mreža;
 grid-template-columns: 1fr 1fr;
 reža: 4 rem;
 align-items: center;
 justify-content: center;
 poravnava besedila: središče;
}
.services img {
 širina: 80 %;
 radij obrobe: 9px;
}

Izhod:

Ustvarjanje razdelka O

V razdelku About bo slika in besedilno polje z nekaj kratkimi informacijami o ekipi.

O razdelku HTML

Ustvariti 
 in vanj postavite sliko in besedilo. 








O nas


 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
 dicta!

O razdelku CSS

Oblikujte sliko in polje z besedilom z uporabo mreže CSS in dodajte a padajoča senca da postane bolj privlačna. Uporabi negativna marža da nastavite besedilno polje nad sliko.

/* ****************** */
/* O nas */
/* ****************** */
.grid-about {
 grid-template-columns: 1.2fr 0.8fr;
 vrzel: 0;
}
.o {
 oblazinjenje: 2rem 0 7rem 0;
}
.o img {
 širina: 98 %;
 opravičiti se: konec;
 radij obrobe: 9px;
}
.o p {
 velikost pisave: 2,2 rem;
}
.text {
 največja širina: 45rem;
 barva ozadja: #e7ac21;
 oblazinjenje: 10rem 5rem;
 rob-levo: -5rem;
 radij obrobe: 9px;
}
.text h2 {
 rob-dno: 4,5rem;
 poravnava besedila: središče;
}

Izhod:

Noga spletnega mesta pusti trajen vtis v glavah obiskovalcev, zato poskrbite, da bo čista in dobro organizirana.

Dodajte primarni naslov z napisom hvala obiskovalcem. © je entiteta HTML za © simbol.

Oblikujte nogo tako, da ji daste drugačno obliko Barva ozadja in ustrezno nastavitev oblazinjenje.

/* ****************** */
/* Noga */
/* ****************** */
noga {
 poravnava besedila: središče;
 barva ozadja: #e7ac21;
 oblazinjenje: 2,5 rem;
}

Izhod:

Ogledate si lahko končno spletno stran Pawfect tako, da sledite tej povezavi.

Objavite svojo spletno stran

Čestitamo, ustvarili ste celotno spletno mesto iz nič z uporabo HTML in CSS! Čas je, da objavite svoje spletno mesto in pridobite povratne informacije od skupnosti. Upamo, da ste uživali v postopku izdelave strani. Če ste novi pri gostovanju, si oglejte, kako brezplačno gostite spletno mesto s strani GitHub.

Naincy Mourya (Objavljenih 19 člankov)

Naincy je specializirana za izgradnjo zelo odzivnih spletnih mest in učinkovite vsebinske strategije skupaj s spletnimi kopijami. Je svobodna pisateljica o tehnologiji, ki budno spremlja trendne tehnologije.

Več od Naincy Mourya