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

Pawfect🐾










 Služba za njegu kućnih ljubimaca u Sjevernoj Karolini







instagram viewer



 Ponestaje vremena? Ne govori više. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo acceptnda facere?

Izlaz:

Sada je vrijeme za stiliziranje navigacijskog izbornika i odjeljka heroja.

Općenito CSS

Dodajte opći CSS stil na vrh vašeg style.css datoteka. Odjeljak heroja ima pozadinsku sliku. Možeš pristupite cijelom kodu uključujući slike na GitHubu, ili upotrijebite vlastitu sliku.

* {
 margina: 0;
 dopuna: 0;
 box-dimenzion: obrub-kutija;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 veličina fonta: 62,5%;
 overflow-x: skriveno;
 pomicanje-ponašanje: glatko;
}
tijelo {
 obitelj fontova: 'Rubik', sans-serif;
 visina linije: 1,5;
 veličina fonta: 1.5rem;
 font-weight: 400;
 overflow-x: skriveno;
 boja: #523414;
 boja pozadine: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-terciary {
 font-weight: 700;
 boja: #523414;
 razmak između slova: -0,5px;
}
.heading-primary {
 veličina fonta: 5,2rem;
 visina linije: 1,05;
 margina-dno: 3,2rem;
}
.heading-secondary {
 veličina fonta: 4,4rem;
 visina linije: 1,2;
 margina-dno: 5,6rem;
 poravnavanje teksta: središte;
}
.heading-terciary {
 veličina fonta: 3rem;
 visina linije: 1,2;
 margina: 1,2rem;
}
a {
 tekst-dekoracija: nema;
}
.first-fold {
 pozadinska slika: url(img/Pawfect-bg.png);
 min-visina: 80rem;
}

Oblikovanje navigacijske trake

Koristiti CSS flexbox za podešavanje logotipa i navigacijskih izbornika u nizu. Set boja pozadine na transparentan i dati a granica-radijus od 9px na gumb Poziv na radnju (CTA).

CSS navigacijska traka

/* ****************** */
/* Logo */
/* ****************** */
.Zaglavlje {
 zaslon: flex;
 opravdati-sadržaj: prostor-između;
 align-items: centar;
 boja pozadine: prozirna;
 visina: 9,6rem;
 padding: 0 4,8rem;
}
.logo {
 visina: 2,2rem;
 veličina fonta: 3,6rem;
 tekst-dekoracija: nema;
 poravnavanje teksta: središte;
 font-weight: bold;
 boja: #462d12;
}
/* ****************** */
/* Navigacija */
/* ****************** */
.main-nav-list {
 stil liste: nema;
 zaslon: flex;
 align-items: centar;
 zazor: 4,8rem;
}
.main-nav-link {
 zaslon: inline-block;
 tekst-dekoracija: nema;
 boja: #462d12;
 font-weight: 400;
 veličina fonta: 1.8rem;
}
.main-nav-link.nav-cta {
 padding: 1.2rem 2.4rem;
 radijus granice: 9px;
 boja: #fff;
 boja pozadine: #523414;
}

Izlaz:

Povezano: Kako izgraditi responzivnu navigacijsku traku koristeći HTML i CSS

Stiliziranje odjeljka heroja

Postavite a maksimalna širina na klasi heroja ugniježđujući primarni naslov i opis. Inače će se proširiti do kraja umjesto da ostane na lijevoj strani. Postavi veličina fonta i padding prema vašim zahtjevima.

CSS odjeljka heroja

/* ****************** */
/* Odjeljak heroj */
/* ****************** */
.section-hero {
 padding: 15rem 0 9.6rem;
}
.heroj {
 max-širina: 75rem;
 padding: 0 9,6rem;
 align-items: lijevo;
}
.hero-description {
 veličina fonta: 2rem;
 visina linije: 1,6;
 margina: 4,8rem 0;
}

Izlaz:

Izgradnja odjela za usluge

Stranica nudi četiri usluge: kompletno dotjerivanje, samouslužno pranje pasa, pranje i feniranje te masaža tijela i šapa.

HTML odjeljka usluga

Stvorite roditelja class=”mrežne usluge” i dodajte sve četiri usluge koristeći. Dodajte sliku, naziv usluge i njen mali opis.

Naše usluge






Potpuno dotjerivanje

Lorem ipsum consectetur adipisicing elit.







Samoposlužna praonica za pse

Odit aliquam dolor ex doloremque sed itaque.







Operite i osušite fenom

Voluptatem suscipit ut omnis quas saepe.







Masaža tijela i šapa

Sapiente quos qui hic porro voluptatibus impedit.

Odjel usluga CSS

Napravite mrežu s dva jednaka stupca i postavite jaz do 4rem. Podesite sve grid-items u sredini i postavite sliku širina do 80% izvorne veličine.

/* ****************** */
/* Naše usluge */
/* ****************** */
.Naše usluge {
 padding: 9,6rem 0;
}
.container {
 max-širina: 120rem;
 margina: 0 auto;
 padding: 1.5rem 3.2rem;
}
.grid {
 prikaz: mreža;
 grid-template-kolumns: 1fr 1fr;
 razmak: 4rem;
 align-items: centar;
 justify-content: centar;
 poravnavanje teksta: središte;
}
.services img {
 širina: 80%;
 radijus granice: 9px;
}

Izlaz:

Izgradnja odjeljka O

Odjeljak O sadržavat će sliku i tekstni okvir s nekim kratkim informacijama o timu.

O HTML-u odjeljka

Stvoriti 
 i smjestite sliku i tekst unutar nje. 








O nama


 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 odjeljku CSS

Stilizirajte sliku i tekstni okvir koristeći CSS Grid i dodajte a pad-sjena kako bi bio privlačniji. Koristi negativna marža za postavljanje tekstualnog okvira iznad slike.

/* ****************** */
/* O nama */
/* ****************** */
.grid-about {
 grid-template-kolumns: 1.2fr 0.8fr;
 jaz: 0;
}
.o {
 padding: 2rem 0 7rem 0;
}
.o img {
 širina: 98%;
 opravdati se: kraj;
 radijus granice: 9px;
}
.o p {
 veličina fonta: 2,2rem;
}
.text {
 max-širina: 45rem;
 boja pozadine: #e7ac21;
 podstava: 10rem 5rem;
 margin-lijevo: -5rem;
 radijus granice: 9px;
}
.text h2 {
 margina-dno: 4,5rem;
 poravnavanje teksta: središte;
}

Izlaz:

Podnožje web stranice ostavlja trajan dojam u glavama posjetitelja, stoga se pobrinite da bude čisto i dobro organizirano.

Dodajte primarni naslov koji kaže hvala posjetiteljima. © je HTML entitet za © simbol.

Stilizirajte podnožje dajući mu drugačiji stil boja pozadine i prikladno postavljanje padding.

/* ****************** */
/* Podnožje */
/* ****************** */
podnožje {
 poravnavanje teksta: središte;
 boja pozadine: #e7ac21;
 podstava: 2,5 rem;
}

Izlaz:

Možete pogledati konačnu web stranicu Pawfecta slijedeći ovu poveznicu.

Objavite svoju web stranicu

Čestitamo, stvorili ste kompletnu web stranicu od nule koristeći HTML i CSS! Vrijeme je da objavite svoju web stranicu i dobijete povratne informacije od zajednice. Nadamo se da ste uživali u procesu izrade stranice. Ako ste novi u hostingu, pogledajte kako besplatno ugostiti web stranicu pomoću GitHub stranica.

Naincy Mourya (Objavljeno 19 članaka)

Naincy je specijalizirana za izgradnju web-mjesta s visokom brzinom odziva i učinkovite strategije sadržaja zajedno s web-kopijama. Ona je slobodna tehnička spisateljica koja pažljivo prati trendove tehnologije.

Više od Naincy Mourya