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

Pawfect










 Dierenverzorgingsservice in Noord-Carolina




 In tijdnood komen? Zeg niets meer. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo acceptnda facere?

Uitgang::

Nu is het tijd om het navigatiemenu en de heldensectie te stylen.

Algemene CSS

Voeg de algemene CSS-stijl toe bovenaan je style.css het dossier. Het heldengedeelte heeft een achtergrondafbeelding. Jij kan toegang tot de volledige code inclusief afbeeldingen op GitHub, of gebruik uw eigen afbeelding.

* {
 marge: 0;
 opvulling: 0;
 box-sizing: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 lettergrootte: 62,5%;
 overloop-x: verborgen;
 scroll-gedrag: glad;
}
lichaam {
 font-familie: 'Rubik', schreefloos;
 lijnhoogte: 1,5;
 lettergrootte: 1.5rem;
 lettergewicht: 400;
 overloop-x: verborgen;
 kleur: #523414;
 achtergrondkleur: #e9be5a;
}
.heading-primair,
.kop-secundair,
.heading-tertiair {
 lettergewicht: 700;
 kleur: #523414;
 letter-spatiëring: -0.5px;
}
.heading-primair {
 lettergrootte: 5.2rem;
 lijnhoogte: 1,05;
 marge-onder: 3.2rem;
}
.kop-secundair {
 lettergrootte: 4.4rem;
 lijnhoogte: 1,2;
 marge-onder: 5.6rem;
 tekst uitlijnen: midden;
}
.heading-tertiair {
 lettergrootte: 3rem;
 lijnhoogte: 1,2;
 marge: 1.2rem;
}
een {
 tekstdecoratie: geen;
}
.eerste vouw {
 achtergrondafbeelding: url(img/Pawfect-bg.png);
 min-hoogte: 80rem;
}

De navigatiebalk stylen

Gebruiken CSS-flexbox om het logo en de navigatiemenu's achter elkaar aan te passen. Set Achtergrond kleur transparant maken en een geven grens-radius van 9px naar de Call-To-Action (CTA)-knop.

Navigatiebalk CSS

/* ****************** */
/* Logo */
/* ****************** */
.kop {
 weergave: flexibel;
 rechtvaardigen-inhoud: spatie-tussen;
 align-items: midden;
 achtergrondkleur: transparant;
 hoogte: 9.6rem;
 opvulling: 0 4.8rem;
}
.logo {
 hoogte: 2.2rem;
 lettergrootte: 3.6rem;
 tekstdecoratie: geen;
 tekst uitlijnen: midden;
 lettergewicht: vet;
 kleur: #462d12;
}
/* ****************** */
/* Navigatie */
/* ****************** */
.main-nav-lijst {
 lijststijl: geen;
 weergave: flexibel;
 align-items: midden;
 tussenruimte: 4.8rem;
}
.main-nav-link {
 weergave: inline-blok;
 tekstdecoratie: geen;
 kleur: #462d12;
 lettergewicht: 400;
 lettergrootte: 1.8rem;
}
.main-nav-link.nav-cta {
 opvulling: 1.2rem 2.4rem;
 grens-radius: 9px;
 kleur: #fff;
 achtergrondkleur: #523414;
}

Uitgang::

Verwant: Een responsieve navigatiebalk bouwen met HTML en CSS

De heldensectie stylen

Zet een Maximale wijdte op de hero-klasse die de primaire kop en beschrijving nest. Anders strekt het zich uit tot het einde in plaats van aan de linkerkant te blijven. Stel de lettertypegrootte en opvulling volgens uw vereiste.

Hero Sectie CSS

/* ****************** */
/* Heldensectie */
/* ****************** */
.sectie-held {
 vulling: 15rem 0 9.6rem;
}
.held {
 maximale breedte: 75rem;
 vulling: 0 9.6rem;
 align-items: links;
}
.held-beschrijving {
 lettergrootte: 2rem;
 lijnhoogte: 1,6;
 marge: 4.8rem 0;
}

Uitgang::

De sectie Services bouwen

De site biedt vier diensten: volledige verzorging, zelfbediening van de hond, wassen en föhnen en lichaams- en pootmassage.

Services Sectie HTML

Maak een ouder class = "netwerkdiensten" en voeg alle vier de services toe met behulp van. Voeg de afbeelding, de servicenaam en een kleine beschrijving ervan toe.

Onze diensten






Volledige verzorging

Lorem ipsum consectetur adipisicing elit.







Zelfbediening hondenwas

Odit aliquam dolor ex doloremque sed itaque.







Wassen en föhnen

Voluptatem suscipit ut omnis quas saepe.







Lichaams- en pootmassage

Sapiente quos qui hic porro voluptatibus impedit.

Services Sectie CSS

Maak een raster met twee gelijke kolommen en stel de gat naar 4rem. Pas alle raster-items in het midden en stel de afbeelding in breedte tot 80% van de oorspronkelijke grootte.

/* ****************** */
/* Onze diensten */
/* ****************** */
.Onze diensten {
 opvulling: 9.6rem 0;
}
.container {
 maximale breedte: 120rem;
 marge: 0 automatisch;
 opvulling: 1.5rem 3.2rem;
}
.rooster {
 weergave: raster;
 raster-sjabloon-kolommen: 1fr 1fr;
 tussenruimte: 4rem;
 align-items: midden;
 rechtvaardigen-inhoud: centrum;
 tekst uitlijnen: midden;
}
.diensten img {
 breedte: 80%;
 grens-radius: 9px;
}

Uitgang::

De sectie Over bouwen

Het gedeelte Over heeft een afbeelding en een tekstvak met wat korte informatie over het team.

Over Sectie HTML

Maak een 
 en plaats de afbeelding en de tekst erin. 








Over ons


 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 veronderstelnda
 dictee!

Over Sectie CSS

Stijl de afbeelding en het tekstvak met behulp van CSS Grid en voeg a. toe slagschaduw aantrekkelijker te maken. Gebruik een negatieve marge om het tekstvak boven de afbeelding in te stellen.

/* ****************** */
/* Over ons */
/* ****************** */
.grid-over {
 raster-sjabloon-kolommen: 1.2fr 0.8fr;
 tussenruimte: 0;
}
.over {
 vulling: 2rem 0 7rem 0;
}
.over img {
 breedte: 98%;
 rechtvaardig-zelf: einde;
 grens-radius: 9px;
}
.over p {
 lettergrootte: 2.2rem;
}
.tekst {
 maximale breedte: 45rem;
 achtergrondkleur: #e7ac21;
 vulling: 10rem 5rem;
 marge-links: -5rem;
 grens-radius: 9px;
}
.tekst h2 {
 marge-onder: 4.5rem;
 tekst uitlijnen: midden;
}

Uitgang::

De voettekst van een website laat een blijvende indruk achter bij de bezoekers, dus zorg ervoor dat deze schoon en overzichtelijk is.

Voeg een hoofdkop toe om de bezoekers te bedanken. © is een HTML-entiteit voor de © symbool.

Geef de voettekst een andere stijl Achtergrond kleur en instelling geschikt opvulling.

/* ****************** */
/* Voettekst */
/* ****************** */
voettekst {
 tekst uitlijnen: midden;
 achtergrondkleur: #e7ac21;
 vulling: 2.5rem;
}

Uitgang::

U kunt de definitieve Pawfect-website bekijken door deze link te volgen.

Publiceer uw website

Gefeliciteerd, je hebt vanaf het begin een complete website gemaakt met HTML en CSS! Het is tijd om uw website te publiceren en feedback te krijgen van de community. We hopen dat je genoten hebt van het proces van het maken van de site. Als hosting nieuw voor u is, bekijk dan hoe u gratis een website kunt hosten met GitHub Pages.

Naincy Mourya (19 artikelen gepubliceerd)

Naincy is gespecialiseerd in het bouwen van zeer responsieve websites en een efficiënte inhoudsstrategie, samen met webkopieën. Ze is een freelance tech-schrijver die trending technologieën scherp in de gaten houdt.

Meer van Naincy Mourya