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

Pawfect🐾










 Lemmikloomade koduhooldusteenus Põhja-Carolinas







instagram viewer



 Aeg saab otsa? Ära ütle rohkem. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo guessnda facere?

Väljund:

Nüüd on aeg navigeerimismenüü ja kangelaste sektsiooni stiili kujundada.

Üldine CSS

Lisage oma ülaossa CSS-i üldine stiil stiil.css faili. Kangelase sektsioonil on taustpilt. Sa saad pääsete juurde kogu koodile, sealhulgas GitHubi piltidelevõi kasutage oma pilti.

* {
 marginaal: 0;
 polsterdus: 0;
 box-sizing: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 kirjasuurus: 62,5%;
 overflow-x: peidetud;
 kerimiskäitumine: sujuv;
}
keha {
 fondiperekond: 'Rubik', sans-serif;
 joone kõrgus: 1,5;
 fondi suurus: 1,5 rem;
 fondi kaal: 400;
 overflow-x: peidetud;
 värv: #523414;
 taustavärv: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
 fondi kaal: 700;
 värv: #523414;
 tähevahe: -0,5 pikslit;
}
.heading-primary {
 fondi suurus: 5,2rem;
 joone kõrgus: 1,05;
 veeris-alumine: 3,2rem;
}
.heading-secondary {
 fondi suurus: 4,4rem;
 joone kõrgus: 1,2;
 veeris-alumine: 5,6rem;
 teksti joondamine: keskel;
}
.heading-tertiary {
 fondi suurus: 3rem;
 joone kõrgus: 1,2;
 veeris: 1,2rem;
}
a {
 tekst-kaunistus: puudub;
}
.first-fold {
 taustapilt: url(img/Pawfect-bg.png);
 min-kõrgus: 80rem;
}

Navigeerimisriba stiili kujundamine

Kasuta CSS flexbox logo ja navigeerimismenüüd järjest kohandamiseks. Määra taustavärv läbipaistvaks ja andma a piiriraadius kohta 9 pikslit tegevusele kutsumise (CTA) nupule.

Navigeerimisriba CSS

/* ****************** */
/* Logo */
/* ****************** */
.header {
 ekraan: flex;
 õigusta-sisu: tühik-vahel;
 joonda-elemendid: keskel;
 taustavärv: läbipaistev;
 kõrgus: 9,6rem;
 polsterdus: 0 4,8rem;
}
.logo {
 kõrgus: 2,2rem;
 fondi suurus: 3,6 rem;
 tekst-kaunistus: puudub;
 teksti joondamine: keskel;
 fondi kaal: paks;
 värv: #462d12;
}
/* ****************** */
/* Navigeerimine */
/* ****************** */
.main-nav-list {
 loendi stiil: puudub;
 ekraan: flex;
 joonda-elemendid: keskel;
 vahe: 4,8rem;
}
.main-nav-link {
 ekraan: inline-block;
 tekst-kaunistus: puudub;
 värv: #462d12;
 fondi kaal: 400;
 fondi suurus: 1,8rem;
}
.main-nav-link.nav-cta {
 polster: 1,2rem 2,4rem;
 piiri raadius: 9 pikslit;
 värv: #fff;
 taustavärv: #523414;
}

Väljund:

Seotud: HTML-i ja CSS-i abil tundliku navigeerimisriba loomine

Kangelase sektsiooni stiili kujundamine

Määra a maksimaalne laius kangelaseklassil, mis pesitseb esmast pealkirja ja kirjeldust. Vastasel juhul ulatub see vasakule poole jäämise asemel lõpuni välja. Määrake fondi suurus ja polsterdus vastavalt teie nõudele.

Kangelase sektsioon CSS

/* ****************** */
/* Kangelaste jaotis */
/* ****************** */
.section-hero {
 polster: 15rem 0 9,6rem;
}
.hero {
 maksimaalne laius: 75rem;
 polsterdus: 0 9,6rem;
 joonda-elemendid: vasakule;
}
.hero-description {
 fondi suurus: 2rem;
 joone kõrgus: 1,6;
 veeris: 4,8rem 0;
}

Väljund:

Teenuste sektsiooni loomine

Sait pakub nelja teenust: täielik hooldus, iseteeninduslik koerapesu, pesemine ja föönitamine ning keha ja käppade massaaž.

Teenuste jaotis HTML

Looge vanem class=”võrguteenused” ja lisage kõik neli teenust kasutades. Lisage pilt, teenuse nimi ja selle väike kirjeldus.

Meie teenused






Täielik hooldus

Lorem ipsum consectetur adipisicing elit.







Self Serve Dog Wash

Odit aliquam dolor ex doloremque sed itaque.







Pese & Föönitamine

Voluptatem suscipit ut omnis quas saepe.







Keha ja käpa massaaž

Sapiente quos qui hic porro voluptatibus impedit.

Teenuste sektsioon CSS

Looge kahe võrdse veeruga ruudustik ja määrake lõhe juurde 4rem. Reguleerige kõiki ruudustik-elemendid keskele ja määrake pilt laius kuni 80% algsest suurusest.

/* ****************** */
/* Meie teenused */
/* ****************** */
.our-services {
 polster: 9,6rem 0;
}
.container {
 maksimaalne laius: 120 rem;
 marginaal: 0 auto;
 polster: 1,5rem 3,2rem;
}
.grid {
 ekraan: ruudustik;
 ruudustik-mall-veerud: 1fr 1fr;
 vahe: 4rem;
 joonda-elemendid: keskel;
 õigustama-sisu: keskpunkt;
 teksti joondamine: keskel;
}
.services img {
 laius: 80%;
 piiri raadius: 9 pikslit;
}

Väljund:

Teave jaotise loomine

Jaotises Teave on pilt ja tekstikast, mis sisaldab lühikest teavet meeskonna kohta.

Teave jaotise HTML kohta

Loo 
 ja asetage pilt ja tekst selle sisse. 








Meist


 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 eeldanda
 dikti!

Teave CSS-i jaotise kohta

Stiilige pilt ja tekstikast CSS-ruudustiku abil ja lisage a vari-vari et muuta see atraktiivsemaks. Kasuta negatiivne marginaal pildi kohal oleva tekstikasti määramiseks.

/* ****************** */
/* Meist */
/* ****************** */
.grid-about {
 ruudustik-mall-veerud: 1,2 fr 0,8 fr;
 vahe: 0;
}
.about {
 polster: 2rem 0 7rem 0;
}
.about img {
 laius: 98%;
 end õigustama: end;
 piiri raadius: 9 pikslit;
}
.about p {
 fondi suurus: 2,2rem;
}
.text {
 maksimaalne laius: 45 rem;
 taustavärv: #e7ac21;
 polsterdus: 10rem 5rem;
 veeris-vasak: -5rem;
 piiri raadius: 9 pikslit;
}
.text h2 {
 veeris-põhi: 4,5rem;
 teksti joondamine: keskel;
}

Väljund:

Veebisaidi jalus jätab külastajatele püsiva mulje, seega veenduge, et see oleks puhas ja hästi korraldatud.

Lisage esmane pealkiri, mis ütleb külastajatele tänu. © on HTML-üksus © sümbol.

Stiilige jalus, andes sellele teistsuguse stiili taustavärv ja sobivaks seadmine polsterdus.

/* ****************** */
/* Jalus */
/* ****************** */
jalus {
 teksti joondamine: keskel;
 taustavärv: #e7ac21;
 polster: 2,5rem;
}

Väljund:

Saate vaadata lõplikku Pawfecti veebisaiti järgides seda linki.

Avaldage oma veebisait

Õnnitleme, lõite HTML-i ja CSS-i abil nullist tervikliku veebisaidi! On aeg avaldada oma veebisait ja saada kogukonnalt tagasisidet. Loodame, et saidi loomise protsess teile meeldis. Kui olete hostimises uus, vaadake, kuidas GitHubi lehtede abil veebisaiti tasuta hostida.

Naincy Mourya (19 avaldatud artiklit)

Naincy on spetsialiseerunud väga tundlike veebisaitide ja tõhusa sisustrateegia koostamisele koos veebikoopiatega. Ta on vabakutseline tehnikakirjanik, kes hoiab trendikatel tehnoloogiatel teravat silma peal.

Veel Naincy Mouryalt