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

Pawfect🐾




instagram viewer







 Pet Home Grooming Service i North Carolina




 Går tom for tid? Ikke si noe mer. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

Produksjon:

Nå er det på tide å style navigasjonsmenyen og helteseksjonen.

Generell CSS

Legg til den generelle CSS-stilen øverst på din style.css fil. Heltedelen har et bakgrunnsbilde. Du kan få tilgang til hele koden inkludert bilder på GitHub, eller bruk ditt eget bilde.

* {
 margin: 0;
 polstring: 0;
 boksstørrelse: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 skriftstørrelse: 62,5 %;
 overløp-x: skjult;
 rulle-atferd: glatt;
}
kropp {
 font-family: 'Rubik', sans-serif;
 linjehøyde: 1,5;
 skriftstørrelse: 1,5rem;
 font-vekt: 400;
 overløp-x: skjult;
 farge: #523414;
 bakgrunnsfarge: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiær {
 font-vekt: 700;
 farge: #523414;
 bokstavavstand: -0,5px;
}
.heading-primary {
 skriftstørrelse: 5,2rem;
 linjehøyde: 1,05;
 marg-bunn: 3,2rem;
}
.heading-secondary {
 skriftstørrelse: 4,4rem;
 linjehøyde: 1,2;
 marg-bunn: 5,6rem;
 tekst-align: center;
}
.heading-tertiær {
 skriftstørrelse: 3rem;
 linjehøyde: 1,2;
 margin: 1,2rem;
}
en {
 tekst-dekor: ingen;
}
.first-fold {
 bakgrunnsbilde: url(img/Pawfect-bg.png);
 min-høyde: 80rem;
}

Style navigasjonslinjen

Bruk CSS flexbox for å justere logoen og navigasjonsmenyene på rad. Sett bakgrunnsfarge til gjennomsiktig og gi en grense-radius av 9px til Call-To-Action-knappen (CTA).

Navigasjonslinje CSS

/* ****************** */
/* Logo */
/* ****************** */
.Overskrift {
 display: flex;
 rettferdiggjøre-innhold: space-between;
 align-items: center;
 bakgrunnsfarge: gjennomsiktig;
 høyde: 9,6rem;
 polstring: 0 4,8rem;
}
.logo {
 høyde: 2,2rem;
 skriftstørrelse: 3.6rem;
 tekst-dekor: ingen;
 tekst-align: center;
 font-weight: fet;
 farge: #462d12;
}
/* ****************** */
/* Navigasjon */
/* ****************** */
.main-nav-list {
 liste-stil: ingen;
 display: flex;
 align-items: center;
 gap: 4,8 rem;
}
.main-nav-link {
 display: inline-blokk;
 tekst-dekor: ingen;
 farge: #462d12;
 font-vekt: 400;
 skriftstørrelse: 1,8rem;
}
.main-nav-link.nav-cta {
 polstring: 1,2rem 2,4rem;
 border-radius: 9px;
 farge: #fff;
 bakgrunnsfarge: #523414;
}

Produksjon:

I slekt: Hvordan bygge en responsiv navigasjonslinje ved hjelp av HTML og CSS

Styling av helteseksjonen

Sett a maks bredde på helteklassen som hekker den primære overskriften og beskrivelsen. Ellers vil den strekke seg ut til enden i stedet for å forbli på venstre side. Sett skriftstørrelse og polstring i henhold til ditt krav.

Hero Section CSS

/* ****************** */
/* Helteseksjonen */
/* ****************** */
.section-hero {
 polstring: 15rem 0 9,6rem;
}
.hero {
 maks-bredde: 75rem;
 polstring: 0 9,6rem;
 juster-elementer: venstre;
}
.hero-description {
 skriftstørrelse: 2rem;
 linjehøyde: 1,6;
 margin: 4,8rem 0;
}

Produksjon:

Bygge tjenesteseksjonen

Nettstedet tilbyr fire tjenester: full stell, selvbetjent hundevask, vask og føning og massasje av kropp og poter.

Tjenester Seksjon HTML

Opprett en forelder class="netttjenester" og legg til alle fire tjenestene ved hjelp av. Legg til bildet, tjenestenavnet og en liten beskrivelse av det.

Våre tjenester






Full Grooming

Lorem ipsum consectetur adipisicing elit.







Selvbetjent hundevask

Odit aliquam dolor ex doloremque sed itaque.







Vask og føner

Voluptatem suscipit ut omnis quas saepe.







Kropps- og potemassasje

Sapiente quos qui hic porro voluptatibus hindrer.

Tjenester Seksjon CSS

Lag et rutenett med to like kolonner og still inn mellomrom til 4 rem. Juster alle rutenett-elementer i midten og sett bildet bredde til 80 % av den opprinnelige størrelsen.

/* ****************** */
/* Våre tjenester */
/* ****************** */
.Våre tjenester {
 polstring: 9,6rem 0;
}
.container {
 maks-bredde: 120rem;
 margin: 0 auto;
 polstring: 1,5rem 3,2rem;
}
.Nett {
 display: rutenett;
 rutenett-mal-kolonner: 1fr 1fr;
 gap: 4rem;
 align-items: center;
 rettferdiggjøre-innhold: senter;
 tekst-align: center;
}
.services img {
 bredde: 80 %;
 border-radius: 9px;
}

Produksjon:

Bygge Om-seksjonen

Om-delen vil ha et bilde og en tekstboks med litt kort informasjon om laget.

Om seksjon HTML

Lage en 
 og plasser bildet og teksten inni det. 








Om oss


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

Om Seksjon CSS

Stil bildet og tekstboksen ved å bruke CSS Grid og legg til en drop-shadow for å gjøre det mer attraktivt. Bruk en negativ margin for å sette tekstboksen over bildet.

/* ****************** */
/* Om oss */
/* ****************** */
.grid-about {
 rutenett-mal-kolonner: 1.2fr 0.8fr;
 gap: 0;
}
.Om {
 polstring: 2rem 0 7rem 0;
}
.about img {
 bredde: 98 %;
 rettferdiggjøre-selv: slutt;
 border-radius: 9px;
}
.about p {
 skriftstørrelse: 2,2rem;
}
.text {
 maks-bredde: 45rem;
 bakgrunnsfarge: #e7ac21;
 polstring: 10rem 5rem;
 marg-venstre: -5rem;
 border-radius: 9px;
}
.text h2 {
 marg-bunn: 4,5rem;
 tekst-align: center;
}

Produksjon:

En nettsides bunntekst etterlater et varig inntrykk i de besøkendes sinn, så sørg for at det er rent og godt organisert.

Legg til en primær overskrift som sier takk til de besøkende. © er en HTML-enhet for © symbol.

Stil bunnteksten ved å gi den en annen bakgrunnsfarge og passende innstilling polstring.

/* ****************** */
/* Bunntekst */
/* ****************** */
bunntekst {
 tekst-align: center;
 bakgrunnsfarge: #e7ac21;
 polstring: 2,5rem;
}

Produksjon:

Du kan se det endelige Pawfect-nettstedet ved å følge denne linken.

Publiser nettstedet ditt

Gratulerer, du har laget et komplett nettsted fra bunnen av ved hjelp av HTML og CSS! Det er på tide å publisere nettstedet ditt og få tilbakemeldinger fra fellesskapet. Vi håper du likte prosessen med å lage siden. Hvis du er ny på hosting, ta en titt på hvordan du kan være vert for et nettsted gratis ved å bruke GitHub Pages.

Naincy Mourya (19 artikler publisert)

Naincy spesialiserer seg på å bygge svært responsive nettsteder og effektiv innholdsstrategi sammen med nettkopier. Hun er en freelance tech-skribent som holder et skarpt øye med trendende teknologier.

Mer fra Naincy Mourya