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

Pawfect🐾








instagram viewer







 Naminių gyvūnėlių priežiūros paslauga Šiaurės Karolinoje




 Baiginejasi laikas? Net nesakyk. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo guessnda facere?

Išvestis:

Dabar laikas nustatyti naršymo meniu ir herojaus skyriaus stilių.

Bendra CSS

Pridėkite bendrą CSS stilių savo viršuje stilius.css failą. Herojaus skiltyje yra fono paveikslėlis. Tu gali pasiekti visą kodą, įskaitant vaizdus „GitHub“., arba naudokite savo atvaizdą.

* {
 paraštė: 0;
 paminkštinimas: 0;
 dėžutės dydis: bortelis-dėžė;
}
html {
/* 10 piks. / 16 piks. = 0,625 = 62,5*/
 šrifto dydis: 62,5 %;
 perpildymas-x: paslėptas;
 slinkties elgsena: sklandžiai;
}
kūnas {
 šriftų šeima: 'Rubik', sans-serif;
 linijos aukštis: 1,5;
 šrifto dydis: 1,5 rem;
 šrifto svoris: 400;
 perpildymas-x: paslėptas;
 spalva: #523414;
 fono spalva: #e9be5a;
}
.heading-primary,
.antraštė-antrinė,
.heading-tertiary {
 šrifto svoris: 700;
 spalva: #523414;
 tarpai tarp raidžių: -0,5 taško;
}
.heading-primary {
 šrifto dydis: 5.2rem;
 linijos aukštis: 1,05;
 paraštė-apačia: 3,2rem;
}
.heading-secondary {
 šrifto dydis: 4.4rem;
 linijos aukštis: 1,2;
 paraštė-apačia: 5,6rem;
 teksto lygiavimas: centre;
}
.heading-tertiary {
 šrifto dydis: 3rem;
 linijos aukštis: 1,2;
 paraštė: 1.2rem;
}
a {
 tekstas-dekoravimas: nėra;
}
.first-fold {
 fono vaizdas: url(img/Pawfect-bg.png);
 minimalus aukštis: 80rem;
}

Naršymo juostos stiliaus kūrimas

Naudokite CSS flexbox norėdami koreguoti logotipą ir naršymo meniu iš eilės. Nustatyti fono spalva skaidriai ir duoti a pasienio spindulys apie 9 pikseliai į raginimo veikti (CTA) mygtuką.

Naršymo juosta CSS

/* ****************** */
/* Logotipas */
/* ****************** */
.header {
 ekranas: lankstus;
 pateisinti-turinys: tarpas-tarp;
 sulyginti elementus: centre;
 fono spalva: skaidri;
 aukštis: 9,6rem;
 paminkštinimas: 0 4,8rem;
}
.logo {
 aukštis: 2,2rem;
 šrifto dydis: 3,6 rem;
 tekstas-dekoravimas: nėra;
 teksto lygiavimas: centre;
 šrifto svoris: paryškintas;
 spalva: #462d12;
}
/* ****************** */
/* Navigacija */
/* ****************** */
.main-nav-list {
 sąrašo stilius: nėra;
 ekranas: lankstus;
 sulyginti elementus: centre;
 tarpas: 4,8rem;
}
.main-nav-link {
 ekranas: eilutinis blokas;
 tekstas-dekoravimas: nėra;
 spalva: #462d12;
 šrifto svoris: 400;
 šrifto dydis: 1.8rem;
}
.main-nav-link.nav-cta {
 paminkštinimas: 1,2rem 2,4rem;
 kraštinės spindulys: 9 pikseliai;
 spalva: #fff;
 fono spalva: #523414;
}

Išvestis:

Susijęs: Kaip sukurti reaguojančią naršymo juostą naudojant HTML ir CSS

„Hero“ skyriaus stilius

Nustatykite a maksimalus plotis herojų klasėje, kurioje yra pagrindinė antraštė ir aprašas. Priešingu atveju jis išsiplės iki galo, o ne liks kairėje pusėje. Nustatyti šrifto dydis ir kamšalas pagal jūsų reikalavimą.

Hero skyrius CSS

/* ****************** */
/* Hero skyrius */
/* ****************** */
.section-hero {
 paminkštinimas: 15rem 0 9,6rem;
}
.herojus {
 maksimalus plotis: 75rem;
 paminkštinimas: 0 9,6rem;
 lygiuoti elementus: kairėje;
}
.hero-description {
 šrifto dydis: 2rem;
 linijos aukštis: 1,6;
 paraštė: 4,8rem 0;
}

Išvestis:

Paslaugų skyriaus kūrimas

Svetainėje teikiamos keturios paslaugos: pilnas kirpimas, savitarnos šunų plovimas, plovimas ir džiovinimas plaukų džiovintuvu bei kūno ir letenų masažas.

Paslaugų skyrius HTML

Sukurti tėvą class = "tinklo paslaugos" ir pridėkite visas keturias paslaugas naudodami. Pridėkite vaizdą, paslaugos pavadinimą ir nedidelį jo aprašymą.

Mūsų Paslaugos






Pilnas kirpimas

Lorem ipsum consectetur adipisicing elit.







Savarankiškas šunų ploviklis

Odit aliquam dolor ex doloremque sed itaque.







Nuplaukite ir išdžiovinkite

Voluptatem suscipit ut omnis quas saepe.







Kūno ir letenų masažas

Sapiente quos qui hic porro voluptatibus impedit.

Paslaugų skyrius CSS

Sukurkite tinklelį su dviem vienodais stulpeliais ir nustatykite tarpas į 4rem. Sureguliuokite visus tinklelis-elementai centre ir nustatykite vaizdą plotis iki 80% pradinio dydžio.

/* ****************** */
/* Mūsų Paslaugos */
/* ****************** */
.Mūsų Paslaugos {
 paminkštinimas: 9,6rem 0;
}
.container {
 maksimalus plotis: 120rem;
 paraštė: 0 automatinis;
 paminkštinimas: 1.5rem 3.2rem;
}
.grid {
 ekranas: tinklelis;
 tinklelis-šablonas-stulpeliai: 1fr 1fr;
 tarpas: 4rem;
 sulyginti elementus: centre;
 pateisinti-turinys: centras;
 teksto lygiavimas: centre;
}
.services img {
 plotis: 80%;
 kraštinės spindulys: 9 pikseliai;
}

Išvestis:

Skyriaus „Apie“ kūrimas

Skiltyje „Apie“ bus paveikslėlis ir teksto laukelis su trumpa informacija apie komandą.

Apie HTML skyrių

Sukurti 
 ir įdėkite vaizdą bei tekstą į jį. 








Apie mus


 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 guessnda
 dikta!

Apie CSS skyrių

Sukurkite vaizdo ir teksto laukelio stilių naudodami CSS tinklelį ir pridėkite a mesti šešėlį kad jis būtų patrauklesnis. Naudoti neigiama marža norėdami nustatyti teksto laukelį virš vaizdo.

/* ****************** */
/* Apie mus */
/* ****************** */
.grid-about {
 tinklelis-šablonas-stulpeliai: 1,2fr 0,8fr;
 tarpas: 0;
}
.about {
 paminkštinimas: 2rem 0 7rem 0;
}
.about img {
 plotis: 98%;
 pateisinti save: pabaiga;
 kraštinės spindulys: 9 pikseliai;
}
.apie p {
 šrifto dydis: 2.2rem;
}
.text {
 maksimalus plotis: 45rem;
 fono spalva: #e7ac21;
 paminkštinimas: 10rem 5rem;
 paraštė-kairė: -5rem;
 kraštinės spindulys: 9 pikseliai;
}
.text h2 {
 paraštė-apačia: 4,5rem;
 teksto lygiavimas: centre;
}

Išvestis:

Svetainės poraštė palieka ilgalaikį įspūdį lankytojų mintyse, todėl įsitikinkite, kad ji yra švari ir gerai sutvarkyta.

Pridėkite pagrindinę antraštę, kurioje sakoma ačiū lankytojams. © yra HTML objektas, skirtas © simbolis.

Suteikite jai kitokį poraštės stilių fono spalva ir nustatant tinkamą kamšalas.

/* ****************** */
/* Poraštė */
/* ****************** */
poraštė {
 teksto lygiavimas: centre;
 fono spalva: #e7ac21;
 paminkštinimas: 2,5rem;
}

Išvestis:

Galite peržiūrėti galutinę Pawfect svetainę sekdami šią nuorodą.

Paskelbkite savo svetainę

Sveikiname, nuo nulio sukūrėte visą svetainę naudodami HTML ir CSS! Atėjo laikas paskelbti savo svetainę ir gauti bendruomenės atsiliepimų. Tikimės, kad svetainės kūrimo procesas jums patiko. Jei dar nesate priegloba, pažiūrėkite, kaip nemokamai priglobti svetainę naudojant GitHub puslapius.

Naincy Mourya (19 straipsnių paskelbta)

Naincy specializuojasi kuriant labai reaguojančias svetaines ir efektyvią turinio strategiją bei žiniatinklio kopijas. Ji yra laisvai samdoma technologijų rašytoja, kuri atidžiai stebi naujausias technologijas.

Daugiau iš Naincy Mourya