Page d'acceuil
Bienvenue sur cette partie où nous allons essayer d'apprendre comment réaliser une page d'acceuil responsive avec Bootstrap.
Vous pouvez déjà voir la page à réaliser : Voir la page
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notre site/Rudless</title>
<link href="css/font-face.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link href="vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<link href="vendor/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="vendor/wow/animate.css" rel="stylesheet" media="all">
<link href="vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="vendor/slick/slick.css" rel="stylesheet" media="all">
<link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
<link href="vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<link href="css/theme.css" rel="stylesheet" media="all">
</head>
<body class="my_background" data-spy="scroll" data-target="#exemple-scrollspy" data-offset="0" style="position:relative">
<script src="vendor/jquery-3.2.1.min.js"></script>
<script src="vendor/bootstrap-4.1/popper.min.js"></script>
<script src="vendor/bootstrap-4.1/bootstrap.min.js"></script>
<script src="vendor/slick/slick.min.js">
</script>
<script src="vendor/wow/wow.min.js"></script>
<script src="vendor/animsition/animsition.min.js"></script>
<script src="vendor/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="vendor/counter-up/jquery.waypoints.min.js"></script>
<script src="vendor/counter-up/jquery.counterup.min.js">
</script>
<script src="vendor/circle-progress/circle-progress.min.js"></script>
<script src="vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="vendor/chartjs/Chart.bundle.min.js"></script>
<script src="vendor/select2/select2.min.js">
</script>
</script>
<script src="js/main.js"></script>
</body>
</html>
Vous constatez que notre page est encore vraiment vide au niveau de <body> </body>.
Nous allons la remplir petit à petit.
barre de navigation
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" id="exemple-scrollspy">
<a href="#" class="navbar-brand">Notre site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedcontent"aria-controls="navbarSupportedcontent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedcontent">
<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link">Accueil</a></li>
<li class="nav-item"><a href="#" class="nav-link">Presentation</a></li>
<li class="nav-item"><a href="#" class="nav-link">Etablissement</a></li>
<!--- Sous menu ---->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" role="button">Actualites</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sportive</a>
<a class="dropdown-item" href="#">Technique</a>
<a class="dropdown-item" href="#">Politique</a>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link btn btn-outline-success">Connexion</a></li>
</ul>
</nav>
</div>
<br><br>
carousel
<div class="carousel slide carousel-fade" data-ride="carousel" id="demo">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="photo2.jpeg" alt="Colpro" class="d-block img-fluid w-100" style="height: 400px;">
<div class="carousel-caption d-none d-md-block text-primary">
<article>
<h5><span class="text-white display-4">Notre site</span></h5><br><br>
<i><p class="text-warning lead font-weight-bold text-primary">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In odio esse dicta dolorum
ducimus impedit nisi, veritatis aut qui amet, rem minima omnis minus aperiam, maxime velit sed dolorem voluptatibus.
</p></i>
</article>
<a href="#" class="btn btn-primary marry-weather">Voir plus</a>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="photo2.jpeg" alt="Colpro" class="d-block img-fluid w-100" style="height: 400px;">
<div class="carousel-caption d-none d-md-block text-primary">
<article>
<h5><span class="text-white display-4">Notre site</span></h5><br><br>
<i><p class="text-warning lead font-weight-bold text-primary">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In odio esse dicta dolorum
ducimus impedit nisi, veritatis aut qui amet, rem minima omnis minus aperiam, maxime velit sed dolorem voluptatibus.
</p></i>
</article>
</div>
</div>
<div class="carousel-item">
<img src="photo3.jpeg" alt="Colpro" class="d-block img-fluid w-100" style="height: 400px;">
<div class="carousel-caption d-none d-md-block text-primary">
<article>
<h5><span class="text-white display-4">Notre site</span></h5><br><br>
<i><p class="text-warning lead font-weight-bold text-primary">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In odio esse dicta dolorum
ducimus impedit nisi, veritatis aut qui amet, rem minima omnis minus aperiam, maxime velit sed dolorem voluptatibus.
</p></i>
</article>
</div>
</div>
<div class="carousel-item">
<img src="photo4.jpeg" alt="Colpro" class="d-block img-fluid w-100" style="height: 400px;">
<div class="carousel-caption d-none d-md-block text-primary">
<article>
<h5><span class="text-white display-4">Notre site</span></h5><br><br>
<i><p class="text-warning lead font-weight-bold text-primary">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In odio esse dicta dolorum
ducimus impedit nisi, veritatis aut qui amet, rem minima omnis minus aperiam, maxime velit sed dolorem voluptatibus.
</p></i>
</article>
</div>
</div>
</div>
<!-- Contrôles -->
<a class="carousel-control-prev" href="#demo" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Précédent</span>
</a>
<a class="carousel-control-next" href="#demo" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
</div>
</div>
</div>
</div>
<br><br>
présentation
<div class="container">
<h1 class="text-primary text-center"><b>Notre super site</b></h1>
<br><br>
<h5 classs="lead font-weight-bold text-center"><b>
Bienvenue sur notre site. C'est avec grand plaisir que nous vous
accueillons parmi nous. Nous vous souhaitins une très bonne visite.
Allez! C'est parti. A vous de jouer. Sentez-vous chez vous et détentez-vous beaucoup trop mieux.
</b></h5>
<br><br>
<br><
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<img src="img/php2.jpeg" style="width: 100%; height: 200px;" class="img-thumbnail">
<h5 class="text-danger">Présentation</h5>
<a href="#" class="btn btn-outline-success">Voir motre site</a>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="img/php2.jpeg" style="width: 100%; height: 200px;" class="img-thumbnail">
<h5 class="text-danger">Services</h5>
<a href="#" class="btn btn-outline-success">Voir les services</a>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="img/php2.jpeg" style="width: 100%; height: 200px;" class="img-thumbnail">
<h5 class="text-danger">Contact</h5>
<a href="#" class="btn btn-outline-success">Nous contacter</a>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="img/php2.jpeg" style="width: 100%; height: 200px;" class="img-thumbnail">
<h5 class="text-danger">Projet</h5>
<a href="#" class="btn btn-outline-success">Voir plus</a>
</div>
</div>
<br><br>
<div class="shadow-lg p-3 mb-5 bg-white rounded">
<div class="row">
<div class="col-lg-3 col-sm-6 col-md-6 col-12">
<video style="width:100%" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.mp4" type="video/ogg">
Votre navigateur ne supporte pas cette video
</video>
</div>
<div class="col-lg-3 col-sm-6 col-md-6 col-12">
<video style="width:100%" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.mp4" type="video/ogg">
Votre navigateur ne supporte pas cette video
</video>
</div>
<div class="col-lg-3 col-sm-6 col-md-6 col-12">
<video style="width:100%" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.mp4" type="video/ogg">
Votre navigateur ne supporte pas cette video
</video>
</div>
<div class="col-lg-3 col-sm-6 col-md-6 col-12">
<video style="width:100%" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.mp4" type="video/ogg">
Votre navigateur ne supporte pas cette video
</video>
</div>
</div>
</div>
<br><hr>
formulaire/commentaire
<form>
<div class="container">
<label for="textarea bg-white" style="color: #ff7200;"><b>Laisser un commentaire:</b></label><br>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-12">
<div class="form-group">
<label for="Email" style="color: #ff7200;"> <b> Nom </b></label>
<input type="text" class="form-control" id="nom" style="width: 80%;" placeholder="Nom">
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-12">
<div class="form-group">
<label for="Email" style="color: #ff7200;"> <b> Email </b></label>
<input type="text" class="form-control" id="Email" style="width: 80%;" placeholder="Email">
</div>
</div>
</div>
<div class="form-floating">
<div class="row">
<div class="col-md-offset-2 col-md-6 col-12">
<textarea style="height: 70px; width: 80%;" class="form-control" placeholder="commentaire..."
name="commentaire" id="commentaire" rows="4" cols="50" required></textarea>
</div>
</div>
<br>
<button class="btn btn-outline-primary" type="submit">Publier le commentaire
</button>
</div>
</div>
</div>
</div>
</div>
footer
<footer class="bg-dark">
<div class="panel panel-body">
<div class="row container">
<div class="col-lg-3 col-12 text-white">
<ul style="list-style: none;">
<h3>Adresse</h3>
<li>Kinshasa/DRC</li>
<li>Lemba</li>
<li><i class="fa fa-phone"></i> <a href="tel:243979880155">+243979880155</a> </li>
<li>Contact</li>
</ul>
</div>
<div class="col-lg-3 col-12 text-white">
<ul style="list-style: none;">
<h3>Notre site</h3>
<li>Accueil</li>
<li>A propos</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div class="col-lg-3 col-12">
<div class="text-center"> <a href="mailto:notresite@gamil.com" class="text-center">notresite@gmail.com</a> </div>
<p class="col-lg-12 text-center text-white">Plateforme d'Excellence>/p>
</div>
<div class="col-lg-3 col-12 text-center">
<p class="col-lg-12 text-center text-white">Pour tout recevoir de nous, veuillez vous abonner gratuitement par ici</p>
<a href="abonnement.php" class="btn btn-outline-primary">S'abonner</a>
</div>
</div>
<div class="text-center">
<div class="col-lg-12 text-center text-white"> © <script>document.write( new Date().getFullYear())</script>
Notre site. Tous droits réservés </div>
</div>
</div>
</footer>
formation.css
:root {
--link-size: 50px;
--trans-property: all 0.3s ease;
}
.social-icons {
display: flex;
align-items: center;
justify-content: center;
}
.social-icon {
display: flex;
position: relative;
overflow: hidden;
width: var(--link-size);
height: var(--link-size);
margin: 8px;
border-radius: 50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.12);
text-decoration: none;
transition: var(--trans-property);
}
.social-icon i {
margin: auto;
font-size: 20px;
color: #67798e;
z-index: 1;
transition: var(--trans-property);
}
.social-icon:after {
content: "";
width: var(--link-size);
height: var(--link-size);
position: absolute;
transform: translate(0, var(--link-size));
border-radius: 50%;
transition: var(--trans-property);
}
.social-icon.twitter {
background-color: #1da1f2;
}
.social-icon.whatsapp {
background-color: #25d366;
}
.social-icon.pinterest {
background-color: #bd081c;
}
.social-icon.linkedin {
background-color: #5851db;
}
.social-icon.facebook {
background-color: #1769ff;
}
/*** Animations ***/
.social-icon:hover {
transform: translateY(-4px);
box-shadow: 0px 4px 12px rgba(0,0,0,0.16);
}
.social-icon i {
color: #fff;
}
.social-icon:hover:after {
transform: translate(0) scale(1.2);
}
a{
text-decoration: none;
}
Obtenir le code complet : Télécharger