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




 Løber tør for tid? Sig ikke mere. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

Produktion:

Nu er det tid til at style navigationsmenuen og heltesektionen.

Generel CSS

Tilføj den generelle CSS-styling øverst på din style.css fil. Helteafsnittet har et baggrundsbillede. Du kan få adgang til den komplette kode inklusive billeder på GitHub, eller brug dit eget billede.

* {
 margin: 0;
 polstring: 0;
 box-sizing: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 skriftstørrelse: 62,5%;
 overløb-x: skjult;
 rulle-adfærd: glat;
}
krop {
 font-family: 'Rubik', sans-serif;
 line-højde: 1,5;
 skriftstørrelse: 1,5rem;
 skrifttype-vægt: 400;
 overløb-x: skjult;
 farve: #523414;
 baggrundsfarve: #e9be5a;
}
.overskrift-primær,
.overskrift-sekundær,
.heading-tertiær {
 skrifttype-vægt: 700;
 farve: #523414;
 bogstavmellemrum: -0,5px;
}
.heading-primary {
 skriftstørrelse: 5,2rem;
 linjehøjde: 1,05;
 margin-bund: 3,2rem;
}
.heading-secondary {
 skriftstørrelse: 4,4rem;
 linjehøjde: 1,2;
 margin-bund: 5,6rem;
 tekst-align: center;
}
.heading-tertiær {
 skriftstørrelse: 3rem;
 linjehøjde: 1,2;
 margin: 1,2rem;
}
en {
 tekst-dekoration: ingen;
}
.first-fold {
 baggrundsbillede: url(img/Pawfect-bg.png);
 min-højde: 80rem;
}

Styler navigationslinjen

Brug CSS flexbox for at justere logoet og navigationsmenuerne i en række. Sæt baggrundsfarve til gennemsigtig og give en grænse-radius af 9px til knappen Call-To-Action (CTA).

Navigationslinje CSS

/* ****************** */
/* Logo */
/* ****************** */
.header {
 display: flex;
 retfærdiggøre-indhold: mellemrum-mellem;
 align-items: center;
 baggrundsfarve: gennemsigtig;
 højde: 9,6rem;
 polstring: 0 4,8rem;
}
.logo {
 højde: 2,2rem;
 skriftstørrelse: 3,6rem;
 tekst-dekoration: ingen;
 tekst-align: center;
 font-weight: fed;
 farve: #462d12;
}
/* ****************** */
/* Navigation */
/* ****************** */
.main-nav-list {
 liste-stil: ingen;
 display: flex;
 align-items: center;
 mellemrum: 4,8 rem;
}
.main-nav-link {
 display: inline-blok;
 tekst-dekoration: ingen;
 farve: #462d12;
 skrifttype-vægt: 400;
 skriftstørrelse: 1,8rem;
}
.main-nav-link.nav-cta {
 polstring: 1,2rem 2,4rem;
 kant-radius: 9px;
 farve: #fff;
 baggrundsfarve: #523414;
}

Produktion:

Relaterede: Sådan opbygger du en responsiv navigationslinje ved hjælp af HTML og CSS

Styling af heltesektionen

Indstil a max-bredde på helteklassen, der indlejrer den primære overskrift og beskrivelse. Ellers vil den strække sig ud til enden i stedet for at blive på venstre side. Indstil skriftstørrelse og polstring i henhold til dit krav.

Hero Sektion CSS

/* ****************** */
/* Helte sektion */
/* ****************** */
.section-hero {
 polstring: 15rem 0 9,6rem;
}
.hero {
 max-bredde: 75rem;
 polstring: 0 9,6rem;
 align-items: venstre;
}
.hero-description {
 skriftstørrelse: 2rem;
 line-højde: 1,6;
 margin: 4,8rem 0;
}

Produktion:

Opbygning af servicesektionen

Siden tilbyder fire tjenester: fuld pleje, selvbetjent hundevask, vask og føntørring og krops- og potemassage.

Tjenester Sektion HTML

Opret en forælder class="nettjenester" og tilføje alle fire tjenester ved hjælp af. Tilføj billedet, tjenestenavnet og en lille beskrivelse af det.

Vores tjenester






Fuld pleje

Lorem ipsum consectetur adipisicing elit.







Selvbetjent hundevask

Odit aliquam dolor ex doloremque sed itaque.







Vask & føntør

Voluptatem suscipit ud omnis quas saepe.







Krops- og potemassage

Sapiente quos qui hic porro voluptatibus hindrer.

Tjenester Sektion CSS

Opret et gitter med to lige store kolonner og indstil hul til 4 rem. Juster alle grid-elementer i midten og indstil billedet bredde til 80 % af den originale størrelse.

/* ****************** */
/* Vores tjenester */
/* ****************** */
.vores-tjenester {
 polstring: 9,6rem 0;
}
.container {
 max-bredde: 120rem;
 margin: 0 auto;
 polstring: 1,5rem 3,2rem;
}
.grid {
 display: gitter;
 gitter-skabelon-kolonner: 1fr 1fr;
 mellemrum: 4rem;
 align-items: center;
 retfærdiggøre-indhold: center;
 tekst-align: center;
}
.services img {
 bredde: 80%;
 kant-radius: 9px;
}

Produktion:

Opbygning af Om-sektionen

Afsnittet Om vil have et billede og en tekstboks med nogle korte oplysninger om holdet.

Om Sektion HTML

Lave en 
 og placer billedet og teksten inde i det. 








Om os


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

Style billedet og tekstboksen ved hjælp af CSS Grid og tilføj en skygge for at gøre det mere attraktivt. Brug en negativ margin for at indstille tekstboksen over billedet.

/* ****************** */
/* Om os */
/* ****************** */
.grid-about {
 gitter-skabelon-kolonner: 1,2fr 0,8fr;
 mellemrum: 0;
}
.om {
 polstring: 2rem 0 7rem 0;
}
.about img {
 bredde: 98%;
 retfærdiggøre-selv: ende;
 kant-radius: 9px;
}
.om p {
 skriftstørrelse: 2,2rem;
}
.text {
 max-bredde: 45rem;
 baggrundsfarve: #e7ac21;
 polstring: 10rem 5rem;
 margin-venstre: -5rem;
 kant-radius: 9px;
}
.text h2 {
 margin-bund: 4,5rem;
 tekst-align: center;
}

Produktion:

Et websteds sidefod efterlader et varigt indtryk i de besøgendes sind, så sørg for, at det er rent og velorganiseret.

Tilføj en primær overskrift, der siger tak til de besøgende. © er en HTML-entitet for © symbol.

Style sidefoden ved at give den en anden baggrundsfarve og passende indstilling polstring.

/* ****************** */
/* Sidefod */
/* ****************** */
sidefod {
 tekst-align: center;
 baggrundsfarve: #e7ac21;
 polstring: 2,5rem;
}

Produktion:

Du kan se det endelige Pawfect-websted ved at følge dette link.

Udgiv din hjemmeside

Tillykke, du har oprettet en komplet hjemmeside fra bunden ved hjælp af HTML og CSS! Det er tid til at offentliggøre dit websted og få feedback fra fællesskabet. Vi håber, du nød processen med at lave siden. Hvis du er ny til hosting, så tag et kig på, hvordan du hoster et websted gratis ved hjælp af GitHub Pages.

Naincy Mourya (19 artikler udgivet)

Naincy har specialiseret sig i at bygge meget responsive hjemmesider og effektiv indholdsstrategi sammen med webkopier. Hun er en freelance tech-skribent, der holder skarpt øje med trendende teknologier.

Mere fra Naincy Mourya