Accordion
Bienvenue dans ce tutoriel passionnant sur la création d'une page d'accueil en HTML et CSS pour votre site web !
La page d'accueil est la première chose que vos visiteurs verront en arrivant sur votre site, c'est donc un élément crucial pour attirer et retenir leur attention. Avec les bonnes compétences en HTML et CSS, vous serez en mesure de créer une page d'accueil attrayante, fonctionnelle et professionnelle qui mettra en valeu r tout ce que votre site a à offrir.
Dans ce tutoriel, nous allons vous guider étape par étape à travers le processus de création de votre page d'accueil, en vous donnant les outils et les connaissances nécessaires pour la personnaliser selon vos besoins spécifiques. Alors, êtes-vous prêt à commencer ? Let's dive in 😎!
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="IMG/Service 1.jpeg" class="">
<title>Mon site</title>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="IMG/Service 1.jpeg" alt="">
</div>
<ul class="nav-links">
<li><a href="#accueil">Accueil</a></li>
<li><a href="#apropos">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<br><br>
<div class="messages">
<h1>Bienvenue sur notre site</h1>
<p>Découvrez notre nouveau produit innovant pour améliorer votre quotidien</p>
</div>
<div class="video">
<video style="width:100%" height="240" controls>
<source src="VIDEO/Souf_-_Désolé_(Clip_Officiel)(720p).mp4" type="video/mp4">
<source src="VIDEO/Souf_-_Désolé_(Clip_Officiel)(720p).mp4" type="video/ogg">
Votre navigateur ne supporte pas cette video
</video>
</div>
<main class="main">
<div class="apropos" id="apropos">
<h2 class="titre">À propos>/h2>
<div class="service">
<h3>Service 1</h3>
<p>Description du service 1</p>
<a href="" class="btn">Voir plus</a>
</div>
<div class="service">
<h3>Service 2</h3>
<p>Description du service 2</p>
<a href="" class="btn">Voir plus</a>
</div>
<div class="service">
<h3>Service 3</h3>
<p>Description du service 3</p>
<a href="" class="btn">Voir plus</a>
</div>
<div class="service">
<h3>Service 4</h3>
<p>Description du service 4</p>
<a href="" class="btn">Voir plus</a>
</div>
<div class="service">
<h3>Service 5</h3>
<p>Description du service 5</p>
<a href="" class="btn">Voir plus</a>
</div>
<div class="service">
<h3>Service 6</h3>
<p>Description du service 6</p>
<a href="" class="btn">Voir plus</a>
</div>
</div>
</main>
<div class="photo">
<h2 class="titre">Photos</h2>
<img src="IMG/Service 1.jpeg" id="img" alt="">
<img src="IMG/Info7.jpeg" id="img" alt="">
<img src="IMG/rud3.jpeg" id="img" alt="">
<img src="IMG/rud8.jpeg" id="img" alt="">
<img src="IMG/rud3.jpeg" id="img" alt="">
<img src="IMG/rud8.jpeg" id="img" alt="">
</div>
<footer>
<h2>Mon site</h2>
<div class="contact" id="contact">
<h3 class="msg">Me contacter</h3>
<a href="mailto:russellmk8299@gmail.com" class="btn" target="_blank">Par mail</a>
<a href="https://wa.me/243979880155" class="btn" target="_blank">WhatsApp</a>
<a href="tel:243979880155" class="btn" target="_blank">Par appel</a>
</div>
<p>© 2023, Tous droits réservés</p>
</footer>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #9400d3;
color: #fff;
padding: 10px 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
margin-bottom:10px;
height:55px;
}
.nav-links {
display: flex;
list-style: none;
gap: 20px;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-weight: 800;
}
.nav-links li a:hover{
transform: scale(1.2);
transition: all 0.3s ease;;
}
.nav-links li a:hover::after{
transform: rotate(150deg);
transition: var(--trans-property);
}
.messages {
text-align: center;
background-color: #9400d3;
padding: 20px;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
margin-top:20px;
}
.messages h1 {
font-size: 2em;
color: #fff;
}
.messages p {
color: #f0f0f0;
font-style: italic;
}
footer {
text-align: center;
background-color: #9400d3;
color: #fff;
padding: 10px;
position:relative;
bottom: 0;
width: 100%;
}
.apropos{
position: relative;
display: inline-block;
text-align: center;
align-items: center;
justify-content: center;
border: 2px solid #9400d3;
margin-bottom: 25px;
padding: 10px 10px;
}
.apropos .titre{
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: 900;
margin-bottom: 5px;
}
.apropos .service {
display: inline-block;
}
.service {
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-bottom: 25px;
cursor: pointer;
font-weight: 700;
}
.service:hover{
background-color: #9400d3;
transition: all 0.3s ease;
color: #fff;
}
.service h3 {
margin-bottom: 10px;
}
.service p {
margin-bottom: 10px;
}
.service .btn {
padding: 10px 20px;
background-color: #9400d3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
font-weight: bolder;
}
.service button:hover {
background-color: #9400d3
}
.contact .btn {
padding: 10px 20px;
background-color: #4169E1;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
font-weight: bolder;
}
.contact {
margin-bottom: 20px;
}
.contact .msg{
margin-bottom: 20px;
}
.logo img {
color:#fff;
text-decoration:none;
width: 30px;
height: 30px;
border-radius: 50px;
}
.main{
padding: 20px 20px;
}
.photo{
padding: 20px 20px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
text-align: center;
}
.photo .titre{
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: 900;
margin-bottom: 5px;
}
:root {
--link-size: 50px;
--trans-property: all 0.3s ease;
}
#img:after {
content: "";
transform: translate(0, var(--link-size));
transition: var(--trans-property);
}
#img:hover {
transform: translateY(-4px);
box-shadow: 0px 4px 12px rgba(0,0,0,0.16);
}
#img{
border-radius: 20px;
width: 200px;
height: 200px;
}
#img:hover{
transform: scale(1.2) ;
cursor: pointer;
transition: all 0.3s ease;
}
.video{
text-align: center;
margin-top: 20px;
padding: 20px 20px;
}
.main{
text-align: center;
}