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

Pawfect🐾










 Serviciu de îngrijire acasă pentru animale de companie din Carolina de Nord




 Rămâneți fără timp? Nu mai spune nimic. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda face?

Ieșire:

Acum este timpul să stilați meniul de navigare și secțiunea eroi.

CSS general

Adăugați stilul CSS general în partea de sus stil.css fişier. Secțiunea eroi are o imagine de fundal. Puteți accesați codul complet, inclusiv imaginile pe GitHub, sau folosiți propria imagine.

* {
 marja: 0;
 umplutură: 0;
 dimensionare cutie: chenar-cutie;
}
html {
/* 10px / 16px = 0,625 =62,5*/
 dimensiunea fontului: 62,5%;
 overflow-x: ascuns;
 parcurgere-comportament: neted;
}
corp {
 familie de fonturi: „Rubik”, sans-serif;
 înălțimea liniei: 1,5;
 dimensiunea fontului: 1.5rem;
 greutate font: 400;
 overflow-x: ascuns;
 culoare: #523414;
 culoare de fundal: #e9be5a;
}
.rubrica-primar,
.rubrica-secundar,
.heading-tertiary {
 greutate font: 700;
 culoare: #523414;
 spațiere între litere: -0,5px;
}
.heading-primary {
 dimensiunea fontului: 5.2rem;
 înălțimea liniei: 1,05;
 margine-jos: 3.2rem;
}
.heading-secundar {
 dimensiunea fontului: 4.4rem;
 înălțimea liniei: 1,2;
 margine-jos: 5.6rem;
 text-align: centru;
}
.heading-tertiary {
 dimensiunea fontului: 3rem;
 înălțimea liniei: 1,2;
 marja: 1.2rem;
}
A {
 text-decor: niciuna;
}
.first-fold {
 imagine de fundal: url(img/Pawfect-bg.png);
 inaltime minima: 80rem;
}

Stilul barei de navigare

Utilizare Flexbox CSS pentru a ajusta logo-ul și meniurile de navigare la rând. A stabilit culoare de fundal a transparenta si da a hotar-raza de 9px la butonul Call-To-Action (CTA).

Bara de navigare CSS

/* ****************** */
/* Siglă */
/* ****************** */
.antet {
 display: flex;
 justificare-conținut: spațiu-între;
 alinierea elementelor: centru;
 culoare de fundal: transparent;
 inaltime: 9.6rem;
 umplutură: 0 4,8rem;
}
.siglă {
 inaltime: 2,2 rem;
 dimensiunea fontului: 3.6rem;
 text-decor: niciuna;
 text-align: centru;
 greutatea fontului: bold;
 culoare: #462d12;
}
/* ****************** */
/* Navigare */
/* ****************** */
.main-nav-list {
 stil-listă: niciunul;
 display: flex;
 alinierea elementelor: centru;
 decalaj: 4,8rem;
}
.main-nav-link {
 display: inline-block;
 text-decor: niciuna;
 culoare: #462d12;
 greutate font: 400;
 dimensiunea fontului: 1.8rem;
}
.main-nav-link.nav-cta {
 captuseala: 1.2rem 2.4rem;
 chenar-rază: 9px;
 culoare: #fff;
 culoare de fundal: #523414;
}

Ieșire:

Legate de: Cum să construiți o bară de navigare receptivă folosind HTML și CSS

Stilizarea secțiunii Eroi

Setați a lățimea maximă pe clasa de eroi care cuibează titlul și descrierea primară. În caz contrar, se va extinde până la capăt în loc să rămână pe partea stângă. Seteaza marimea fontului și căptușeală conform cerinței dumneavoastră.

Secțiunea Hero CSS

/* ****************** */
/* Secțiunea eroi */
/* ****************** */
.section-erou {
 umplutură: 15rem 0 9.6rem;
}
.erou {
 latime maxima: 75rem;
 umplutură: 0 9,6rem;
 alinierea elementelor: stânga;
}
.hero-description {
 dimensiunea fontului: 2rem;
 înălțimea liniei: 1,6;
 marja: 4,8rem 0;
}

Ieșire:

Construirea Secției Servicii

Site-ul oferă patru servicii: îngrijire completă, spălare autoservire a câinilor, spălare și uscare cu aer și masaj pentru corp și labe.

Secțiunea Servicii HTML

Creați un părinte class="servicii de rețea" și adăugați toate cele patru servicii folosind. Adăugați imaginea, numele serviciului și o mică descriere a acestuia.

Serviciile noastre






Îngrijire completă

Lorem ipsum consectetur adipisicing elit.







Spală autoservire pentru câini

Odit aliquam dolor ex doloremque sed itaque.







Se spală și se usucă

Voluptatem suscipit ut omnis quas saepe.







Masaj corporal și labe

Sapiente quos qui hic porro voluptatibus impedit.

Sectiunea Servicii CSS

Creați o grilă cu două coloane egale și setați decalaj la 4rem. Reglați toate elemente-grilă în centru și setați imaginea lăţime la 80% din dimensiunea originală.

/* ****************** */
/* Serviciile noastre */
/* ****************** */
.Serviciile noastre {
 umplutura: 9,6rem 0;
}
.container {
 latime maxima: 120rem;
 marja: 0 auto;
 umplutură: 1,5 rem 3,2 rem;
}
.grilă {
 afisare: grila;
 grid-template-coloane: 1fr 1fr;
 decalaj: 4rem;
 alinierea elementelor: centru;
 justificare-conținut: centru;
 text-align: centru;
}
.servicii img {
 latime: 80%;
 chenar-rază: 9px;
}

Ieșire:

Construirea secțiunii Despre

Secțiunea Despre va avea o imagine și o casetă de text cu câteva informații scurte despre echipă.

Despre secțiunea HTML

Creeaza o 
 și plasați imaginea și textul în interiorul acesteia. 








Despre noi


 Lorem ipsum dolor sit amet consectetur adipisicing elit. cvasi
 officiis, perferendis iure possimus dolor aspernatur incidunt rem
 ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
 dolor perspiciatis aspernatur incidunt rem placeat quis assumenda
 dicta!

Despre secțiunea CSS

Stilați imaginea și caseta de text folosind Grila CSS și adăugați a umbra pentru a-l face mai atractiv. Folosește o marja negativa pentru a seta caseta de text deasupra imaginii.

/* ****************** */
/* Despre noi */
/* ****************** */
.grid-despre {
 grid-template-coloane: 1,2fr 0,8fr;
 decalaj: 0;
}
.despre {
 umplutura: 2rem 0 7rem 0;
}
.despre img {
 latime: 98%;
 justify-self: sfârşit;
 chenar-rază: 9px;
}
.despre p {
 dimensiunea fontului: 2.2rem;
}
.text {
 latime maxima: 45rem;
 culoare de fundal: #e7ac21;
 umplutura: 10rem 5rem;
 margine-stânga: -5rem;
 chenar-rază: 9px;
}
.text h2 {
 margine-jos: 4,5rem;
 text-align: centru;
}

Ieșire:

Subsolul unui site web lasă o impresie de durată în mintea vizitatorilor, așa că asigurați-vă că este curat și bine organizat.

Adăugați un titlu principal care spune mulțumiri vizitatorilor. © este o entitate HTML pentru © simbol.

Stilați subsolul dându-i un stil diferit culoare de fundal și setarea adecvată căptușeală.

/* ****************** */
/* Subsol */
/* ****************** */
subsol {
 text-align: centru;
 culoare de fundal: #e7ac21;
 umplutură: 2,5 rem;
}

Ieșire:

Puteți vizualiza site-ul final Pawfect urmând acest link.

Publicați site-ul dvs. web

Felicitări, ați creat un site complet de la zero folosind HTML și CSS! Este timpul să vă publicați site-ul web și să obțineți feedback din partea comunității. Sperăm că v-a plăcut procesul de realizare a site-ului. Dacă sunteți nou în găzduire, aruncați o privire la cum să găzduiți un site web gratuit folosind Pagini GitHub.

Naincy Mourya (19 articole publicate)

Naincy este specializată în construirea de site-uri web foarte receptive și strategie de conținut eficientă, împreună cu copii web. Ea este o scriitoare de tehnologie independentă care urmărește cu atenție tehnologiile în tendințe.

Mai multe de la Naincy Mourya