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

Pawfect🐾










 Service de toilettage à domicile pour animaux de compagnie en Caroline du Nord




 Manquer de temps? N'en dis pas plus. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

Sortir:

Il est maintenant temps de styliser le menu de navigation et la section héros.

CSS général

Ajoutez le style CSS général en haut de votre style.css déposer. La section héros a une image de fond. Tu peux accéder au code complet, y compris les images sur GitHub, ou utilisez votre propre image.

* {
 marge: 0 ;
 remplissage: 0 ;
 dimensionnement de la boîte: boîte de bordure ;
}
html {
/* 10px/16px = 0,625 =62,5*/
 taille de la police: 62,5% ;
 débordement-x: caché ;
 comportement de défilement: lisse ;
}
corps {
 font-family: 'Rubik', sans-serif ;
 hauteur de ligne: 1,5 ;
 taille de la police: 1.5rem ;
 poids de police: 400 ;
 débordement-x: caché ;
 couleur: #523414 ;
 couleur d'arrière-plan: #e9be5a ;
}
.heading-primary,
.titre-secondaire,
.heading-tertiary {
 poids de police: 700 ;
 couleur: #523414 ;
 espacement des lettres: -0,5 pixels ;
}
.heading-primary {
 taille de la police: 5.2rem ;
 hauteur de ligne: 1,05 ;
 marge inférieure: 3.2rem ;
}
.titre-secondaire {
 taille de la police: 4.4rem ;
 hauteur de ligne: 1.2 ;
 marge inférieure: 5.6rem ;
 text-align: centre ;
}
.heading-tertiary {
 taille de la police: 3rem ;
 hauteur de ligne: 1.2 ;
 marge: 1,2 rem ;
}
une {
 texte-décoration: aucun ;
}
.premier pli {
 image d'arrière-plan: url(img/Pawfect-bg.png);
 min-hauteur: 80rem ;
}

Styliser la barre de navigation

Utiliser flexbox CSS pour ajuster le logo et les menus de navigation d'affilée. Ensemble Couleur de l'arrière plan transparent et donner un rayon-frontière de 9px au bouton Appel à l'action (CTA).

Barre de navigation CSS

/* ****************** */
/* Logo */
/* ****************** */
.entête {
 affichage: flexible ;
 justifier-contenu: espace-entre ;
 align-items: center;
 couleur d'arrière-plan: transparent ;
 hauteur: 9,6 rem ;
 rembourrage: 0 4.8rem ;
}
.logo {
 hauteur: 2,2 rem ;
 taille de la police: 3,6 rem ;
 texte-décoration: aucun ;
 text-align: centre ;
 font-weight: gras ;
 couleur: 462d12 ;
}
/* ****************** */
/* La navigation */
/* ****************** */
.main-nav-list {
 style de liste: aucun ;
 affichage: flexible ;
 align-items: center;
 écart: 4,8 rem ;
}
.main-nav-link {
 affichage: bloc en ligne ;
 texte-décoration: aucun ;
 couleur: 462d12 ;
 poids de police: 400 ;
 taille de la police: 1.8rem ;
}
.main-nav-link.nav-cta {
 rembourrage: 1,2 rem 2,4 rem ;
 rayon de bordure: 9px ;
 couleur: #fff ;
 couleur de fond: #523414 ;
}

Sortir:

En rapport: Comment créer une barre de navigation réactive en utilisant HTML et CSS

Styliser la section des héros

Définir un largeur maximale sur la classe de héros imbriquant le titre principal et la description. Sinon, il s'étendra jusqu'au bout au lieu de rester sur le côté gauche. Met le taille de police et rembourrage selon votre condition.

Section Héros CSS

/* ****************** */
/* Section héros */
/* ****************** */
.section-hero {
 rembourrage: 15rem 0 9.6rem ;
}
.héros {
 largeur maximale: 75 rem ;
 rembourrage: 0 9.6rem ;
 align-items: gauche ;
}
.hero-description {
 taille de police: 2rem ;
 hauteur de ligne: 1.6 ;
 marge: 4.8rem 0 ;
}

Sortir:

Construire la section des services

Le site propose quatre services: un toilettage complet, un lavage de chien en libre-service, un lavage et un brushing et un massage du corps et des pattes.

Section des services HTML

Créer un parent class="services de réseau" et ajoutez les quatre services en utilisant. Ajoutez l'image, le nom du service et une petite description de celui-ci.

Nos services






Toilettage complet

Lorem ipsum consectetur adipisicing elit.







Lavage de chien libre-service

Odit aliquam dolor ex doloremque sed itaque.







Laver et sécher

Voluptatem suscipit ut omnis quas saepe.







Massage du corps et des pattes

Sapiente quos qui hic porro voluptatibus empêche.

Section Services CSS

Créez une grille avec deux colonnes égales et définissez le écart à 4rem. Ajustez tous les éléments-de-grille au centre et définir l'image largeur à 80 % de la taille d'origine.

/* ****************** */
/* Nos services */
/* ****************** */
.Nos services {
 remplissage: 9.6rem 0 ;
}
.récipient {
 largeur maximale: 120 rem ;
 marge: 0 automatique ;
 rembourrage: 1.5rem 3.2rem ;
}
.la grille {
 affichage: grille ;
 grille-modèle-colonnes: 1fr 1fr ;
 écart: 4rem ;
 align-items: center;
 justifier-contenu: centre ;
 text-align: centre ;
}
.services img {
 largeur: 80 % ;
 rayon de bordure: 9px ;
}

Sortir:

Création de la section À propos

La section À propos comportera une image et une zone de texte contenant de brèves informations sur l'équipe.

À propos de la section HTML

Créer un 
 et placez l'image et le texte à l'intérieur. 








À propos de nous


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

À propos de la section CSS

Stylisez l'image et la zone de texte à l'aide de CSS Grid et ajoutez un ombre portée pour le rendre plus attractif. Utiliser un marge négative pour définir la zone de texte au-dessus de l'image.

/* ****************** */
/* À propos de nous */
/* ****************** */
.grid-about {
 grille-modèle-colonnes: 1.2fr 0.8fr ;
 écart: 0 ;
}
.sur {
 rembourrage: 2rem 0 7rem 0 ;
}
.à propos d'img {
 largeur: 98 % ;
 justifier-soi: fin;
 rayon de bordure: 9px ;
}
.à propos de p {
 taille de la police: 2.2rem ;
}
.texte {
 largeur maximale: 45 rem ;
 couleur d'arrière-plan: #e7ac21 ;
 rembourrage: 10rem 5rem ;
 marge gauche: -5rem ;
 rayon de bordure: 9px ;
}
.texte h2 {
 marge inférieure: 4,5 rem ;
 text-align: centre ;
}

Sortir:

Le pied de page d'un site Web laisse une impression durable dans l'esprit des visiteurs, alors assurez-vous qu'il est propre et bien organisé.

Ajoutez un titre principal pour remercier les visiteurs. © est une entité HTML pour le © symbole.

Stylisez le pied de page en lui donnant un autre Couleur de l'arrière plan et le réglage approprié rembourrage.

/* ****************** */
/* Bas de page */
/* ****************** */
bas de page {
 text-align: centre ;
 couleur d'arrière-plan: #e7ac21 ;
 rembourrage: 2,5 rem ;
}

Sortir:

Vous pouvez consulter le site Web final de Pawfect en suivant ce lien.

Publiez votre site Web

Félicitations, vous avez créé un site Web complet à partir de zéro en utilisant HTML et CSS! Il est temps de publier votre site Web et d'obtenir les commentaires de la communauté. Nous espérons que vous avez apprécié le processus de création du site. Si vous débutez dans l'hébergement, découvrez comment héberger un site Web gratuitement à l'aide des pages GitHub.

Naïf Mourya (19 articles publiés)

Naincy se spécialise dans la création de sites Web hautement réactifs et d'une stratégie de contenu efficace ainsi que dans des copies Web. Elle est une rédactrice technique indépendante qui garde un œil attentif sur les technologies tendances.

Plus de Naincy Mourya