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

Pawfect🐾








instagram viewer







 Husdjursskötselservice i North Carolina




 Ont om tid? Säg inget mer. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

Produktion:

Nu är det dags att styla navigeringsmenyn och hjältesektionen.

Allmän CSS

Lägg till den allmänna CSS-stilen överst på din style.css fil. Hjältesektionen har en bakgrundsbild. Du kan få tillgång till hela koden inklusive bilder på GitHub, eller använd din egen bild.

* {
 marginal: 0;
 stoppning: 0;
 box-storlek: border-box;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 teckenstorlek: 62,5%;
 overflow-x: dold;
 rullningsbeteende: slät;
}
kropp {
 font-family: 'Rubik', sans-serif;
 linjehöjd: 1,5;
 teckenstorlek: 1,5 rem;
 teckensnittsvikt: 400;
 overflow-x: dold;
 färg: #523414;
 bakgrundsfärg: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
 teckensnittsvikt: 700;
 färg: #523414;
 bokstavsmellanrum: -0,5px;
}
.heading-primary {
 teckenstorlek: 5,2rem;
 linjehöjd: 1,05;
 marginal-botten: 3,2rem;
}
.heading-secondary {
 teckenstorlek: 4,4rem;
 linjehöjd: 1,2;
 marginal-botten: 5,6 rem;
 text-align: center;
}
.heading-tertiary {
 teckenstorlek: 3rem;
 linjehöjd: 1,2;
 marginal: 1,2rem;
}
en {
 text-dekoration: ingen;
}
.first-fold {
 bakgrundsbild: url(img/Pawfect-bg.png);
 min-höjd: 80rem;
}

Styla navigeringsfältet

Använda sig av CSS flexbox för att justera logotypen och navigeringsmenyerna i rad. Uppsättning bakgrundsfärg till transparent och ge en gränsradie av 9px till Call-To-Action-knappen (CTA).

Navigationsfält CSS

/* ****************** */
/* Logotyp */
/* ****************** */
.header {
 display: flex;
 motivera-innehåll: mellanslag-mellan;
 align-items: center;
 bakgrundsfärg: transparent;
 höjd: 9,6rem;
 stoppning: 0 4,8rem;
}
.logotyp {
 höjd: 2,2rem;
 teckenstorlek: 3,6 rem;
 text-dekoration: ingen;
 text-align: center;
 font-weight: fet;
 färg: #462d12;
}
/* ****************** */
/* Navigation */
/* ****************** */
.main-nav-list {
 list-stil: ingen;
 display: flex;
 align-items: center;
 mellanrum: 4,8 rem;
}
.main-nav-link {
 display: inline-block;
 text-dekoration: ingen;
 färg: #462d12;
 teckensnittsvikt: 400;
 teckenstorlek: 1,8 rem;
}
.main-nav-link.nav-cta {
 stoppning: 1,2rem 2,4rem;
 border-radie: 9px;
 färg: #fff;
 bakgrundsfärg: #523414;
}

Produktion:

Relaterad: Hur man bygger ett responsivt navigeringsfält med HTML och CSS

Styling av hjältesektionen

Ställ in a maximal bredd på hjälteklassen som kapar den primära rubriken och beskrivningen. Annars kommer den att sträcka sig ut till slutet istället för att stanna på vänster sida. Ställ in textstorlek och stoppning enligt ditt krav.

Hero Section CSS

/* ****************** */
/* Hjältesektionen */
/* ****************** */
.section-hero {
 stoppning: 15rem 0 9,6rem;
}
.hero {
 max-bredd: 75rem;
 stoppning: 0 9,6rem;
 align-items: left;
}
.hero-description {
 teckenstorlek: 2rem;
 linjehöjd: 1,6;
 marginal: 4,8rem 0;
}

Produktion:

Bygga tjänstesektionen

Webbplatsen tillhandahåller fyra tjänster: fullständig grooming, självbetjäning av hundtvätt, tvätt och föning samt kropps- och tassmassage.

Tjänster Sektion HTML

Skapa en förälder class="nättjänster" och lägg till alla fyra tjänsterna med. Lägg till bilden, tjänstens namn och en liten beskrivning av den.

Våra tjänster






Full Grooming

Lorem ipsum consectetur adipisicing elit.







Självbetjäning för hundtvätt

Odit aliquam dolor ex doloremque sed itaque.







Tvätta & föna

Voluptatem suscipit ut omnis quas saepe.







Kropps- och tassmassage

Sapiente quos qui hic porro voluptatibus impedit.

Tjänster Sektion CSS

Skapa ett rutnät med två lika stora kolumner och ställ in glipa till 4 rem. Justera alla rutnätsobjekt i mitten och ställ in bilden bredd till 80 % av originalstorleken.

/* ****************** */
/* Våra tjänster */
/* ****************** */
.Våra tjänster {
 stoppning: 9,6rem 0;
}
.behållare {
 max-bredd: 120rem;
 marginal: 0 auto;
 stoppning: 1,5rem 3,2rem;
}
.grid {
 display: rutnät;
 rutnät-mall-kolumner: 1fr 1fr;
 gap: 4rem;
 align-items: center;
 motivera-innehåll: center;
 text-align: center;
}
.services img {
 bredd: 80%;
 border-radie: 9px;
}

Produktion:

Bygga Om-sektionen

Avsnittet Om kommer att ha en bild och en textruta med lite kort information om laget.

Om avsnittet HTML

Skapa en 
 och placera bilden och texten inuti den. 








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

Style bilden och textrutan med CSS Grid och lägg till en skugga för att göra det mer attraktivt. Använda en negativ marginal för att ställa in textrutan ovanför bilden.

/* ****************** */
/* Om oss */
/* ****************** */
.grid-about {
 rutnät-mall-kolumner: 1,2fr 0,8fr;
 gap: 0;
}
.handla om {
 stoppning: 2rem 0 7rem 0;
}
.about img {
 bredd: 98%;
 rättfärdiga-jag: sluta;
 border-radie: 9px;
}
.about p {
 teckenstorlek: 2,2rem;
}
.text {
 max-bredd: 45rem;
 bakgrundsfärg: #e7ac21;
 stoppning: 10rem 5rem;
 marginal-vänster: -5rem;
 border-radie: 9px;
}
.text h2 {
 marginal-botten: 4,5 rem;
 text-align: center;
}

Produktion:

En webbplatss sidfot lämnar ett bestående intryck i besökarnas sinnen, så se till att den är ren och välorganiserad.

Lägg till en primär rubrik som säger tack till besökarna. © är en HTML-enhet för © symbol.

Stila sidfoten genom att ge den en annan bakgrundsfärg och lämplig inställning stoppning.

/* ****************** */
/* Sidfot */
/* ****************** */
sidfot {
 text-align: center;
 bakgrundsfärg: #e7ac21;
 stoppning: 2,5rem;
}

Produktion:

Du kan se den slutliga Pawfect-webbplatsen genom att följa denna länk.

Publicera din webbplats

Grattis, du skapade en komplett webbplats från grunden med HTML och CSS! Det är dags att publicera din webbplats och få feedback från communityn. Vi hoppas att du gillade processen med att skapa webbplatsen. Om du är ny på värd, ta en titt på hur du är värd för en webbplats gratis med GitHub-sidor.

Naincy Mourya (19 publicerade artiklar)

Naincy specialiserar sig på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologier.

Mer från Naincy Mourya