Dans ce guide complet, vous apprendrez à créer un site Web simple mais attrayant à partir de zéro en utilisant uniquement HTML et CSS. Et quoi de mieux que de créer un site Web pour votre animal de compagnie bien-aimé ? Il sera divisé en trois sections : Accueil, Services et À propos. Nous allons ajouter un menu de navigation en haut et un pied de page à la fin.
Alors, sans plus tarder, voici comment créer un site Web à partir de zéro en HTML et CSS.
Construire la section Navigation et Héros
Ajouter un > section pour donner un titre à votre projet. Lier un style.css fichier et ajoutez le Rubik police des polices Google à l’aide d’un étiqueter.
Section HTML :
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<title>Pawfect</title>
</head>
Ajouter un section et structurez le premier volet de votre site Web. Ajoutez une classe d’en-tête pour le logo et le menu de navigation. Ensuite, ajoutez un section-héros classe pour la rubrique principale avec une petite description des services du site.
Section HTML :
<div class="first-fold">
<header class="header">
<a href="#">
<p class="logo">Pawfect🐾</p>
</a><nav class="main-nav">
<ul class="main-nav-list" role="navigation">
<li><a class="main-nav-link" href="#services">Our services</a></li>
<li><a class="main-nav-link" href="#about">About Us</a></li>
<li>
<a class="main-nav-link nav-cta">Get a Quote</a>
</li>
</ul>
</nav>
</header>
<section class="section-hero">
<div class="hero">
<div class="hero-text-box">
<h1 class="heading-primary">
Pet Home Grooming Service in North Carolina
</h1>
<p class="hero-description">
Running out of time? Say no more. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?
</p>
</div>
</div>
</section>
</div>
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.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}html {
/* 10px / 16px = 0.625 =62.5*/
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
font-family: 'Rubik', sans-serif;
line-height: 1.5;
font-size: 1.5rem;
font-weight: 400;
overflow-x: hidden;
color: #523414;
background-color: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
font-weight: 700;
color: #523414;
letter-spacing: -0.5px;
}
.heading-primary {
font-size: 5.2rem;
line-height: 1.05;
margin-bottom: 3.2rem;
}
.heading-secondary {
font-size: 4.4rem;
line-height: 1.2;
margin-bottom: 5.6rem;
text-align: center;
}
.heading-tertiary {
font-size: 3rem;
line-height: 1.2;
margin: 1.2rem;
}
a {
text-decoration: none;
}
.first-fold {
background-image: url(img/Pawfect-bg.png);
min-height: 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 */
/* ****************** */ .header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent;
height: 9.6rem;
padding: 0 4.8rem;
}
.logo {
height: 2.2rem;
font-size: 3.6rem;
text-decoration: none;
text-align: center;
font-weight: bold;
color: #462d12;
}
/* ****************** */
/* Navigation */
/* ****************** */
.main-nav-list {
list-style: none;
display: flex;
align-items: center;
gap: 4.8rem;
}
.main-nav-link {
display: inline-block;
text-decoration: none;
color: #462d12;
font-weight: 400;
font-size: 1.8rem;
}
.main-nav-link.nav-cta {
padding: 1.2rem 2.4rem;
border-radius: 9px;
color: #fff;
background-color: #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
/* ****************** */
/* Hero section */
/* ****************** */
.section-hero {
padding: 15rem 0 9.6rem;
}.hero {
max-width: 75rem;
padding: 0 9.6rem;
align-items: left;
}
.hero-description {
font-size: 2rem;
line-height: 1.6;
margin: 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. <section class="our-services" id="services">
<div class="container">
<h2 class="heading-secondary">Our Services</h2>
<div class="grid services">
<div class="first-service">
<img src="img/Full Grooming.jpg" />
<h3 class="heading-tertiary">Full Grooming</h3>
<p>Lorem ipsum consectetur adipisicing elit.</p>
</div>
<div class="second-service">
<img src="img/Self Serve Dog Wash.jpg" />
<h3 class="heading-tertiary">Self Serve Dog Wash</h3>
<p>Odit aliquam dolor ex doloremque sed itaque.</p>
</div>
<div class="thrid-service">
<img src="img/Wash & Blow Dry.jpg" />
<h3 class="heading-tertiary">Wash & Blow Dry</h3>
<p>Voluptatem suscipit ut omnis quas saepe.</p>
</div>
<div class="fourth-service">
<img src="img/Body and Paw Massage.jpg" />
<h3 class="heading-tertiary">Body and Paw Massage</h3>
<p>Sapiente quos qui hic porro voluptatibus impedit.</p>
</div>
</div>
</div>
</section>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.
/* ****************** */
/* Our Services */
/* ****************** */
.our-services {
padding: 9.6rem 0;
}.container {
max-width: 120rem;
margin: 0 auto;
padding: 1.5rem 3.2rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
justify-content: center;
text-align: center;
}
.services img {
width: 80%;
border-radius: 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
Create a <div> and place the image and the text inside it.
<section class="about" id="about">
<div class="container">
<div class="grid grid-about about">
<img src="img/About.jpg" />
<div class="text">
<h2 class="heading-secondary">About Us</h2>
<p>
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
dicta!
</p>
</div>
</div>
</div>
</section>À 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.
/* ****************** */
/* About Us */
/* ****************** */ .grid-about {
grid-template-columns: 1.2fr 0.8fr;
gap: 0;
}
.about {
padding: 2rem 0 7rem 0;
}
.about img {
width: 98%;
justify-self: end;
border-radius: 9px;
}
.about p {
font-size: 2.2rem;
}
.text {
max-width: 45rem;
background-color: #e7ac21;
padding: 10rem 5rem;
margin-left: -5rem;
border-radius: 9px;
}
.text h2 {
margin-bottom: 4.5rem;
text-align: center;
}
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. &copie; est une entité HTML pour le © symbole.
<footer>
<h1 class="heading-primary">Thank You For Visiting Pawfect🐾!</h1>
<p>© Copyright 2022 Pawfect🐾</p>
</footer>Stylisez le pied de page en lui donnant un autre Couleur de l’arrière plan et le réglage approprié rembourrage.
/* ****************** */
/* Footer */
/* ****************** */ footer {
text-align: center;
background-color: #e7ac21;
padding: 2.5rem;
}
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.
Si vous avez un site Web simple, vous n’avez pas besoin de payer pour l’hébergement Web. Vous pouvez utiliser les pages GitHub gratuitement !
Lire la suite
A propos de l’auteur
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
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner
— to www.makeuseof.com
Jeu de briques
Snake
Pacman
Bubble