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
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a href="#" class="navbar-brand font-weight-bold text-info" ><img src="IMG/logorudless.jpeg" class="logo" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto justify-content-center">
<li class="nav-item active"><a href="" class="nav-link">Accueil</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" role="button">Location</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Location1</a>
<a class="dropdown-item" href="#">Location2</a>
<a class="dropdown-item" href="#">Location3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" role="button">Achat</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Achat1</a>
<a class="dropdown-item" href="#">Achat2</a>
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" role="button">Achat3</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Achat1</a>
<a class="dropdown-item" href="#">Achat2</a>
<a class="dropdown-item" href="#">Achat3</a>
</div>
</div>
</li>
<li class="nav-item"><a href="" class="nav-link">A propos</a></li>
</ul>
<span class="navbar-text">
<a href="" style="border-radius: 50px;" class="btn btn-primary text-white">Connexion</a>
</span>
</div>
</nav>
<br><br>
Autres éléments de la page
<div class="container">
<div class="text-center text-primary" style="margin-top: 10px;">
<h2>Bienvenue sur mon site</h2>
</div>
<video src="video/video.mp4" class="w-100" style="height: 200px; margin-top: 10px;" controls></video>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<div class="shadow-lg p-2 mb-4 bg-white rounded">
<img src="IMG/rud3.jpeg" style="width: 100%; height: 200px;" class="img-thumbnail">
<h5 class="text-danger">A propos</h5>
<a href="" class="btn btn-primary">Voir notre site</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="shadow-lg p-2 mb-4 bg-white rounded">
<img src="IMG/Service 1.jpeg" style="width: 100%; height: 200px;" class="img-thumbnail">
<h5 class="text-danger">Service</h5>
<a href="#" class="btn btn-primary">Voir les Services</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="shadow-lg p-2 mb-4 bg-white rounded">
<img src="IMG/rud5.jpeg" style="width: 100%; height: 200px;" class="img-thumbnail">
<h5 class="text-danger">Nous contacter</h5>
<a href="" class="btn btn-primary">Nous contacter</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="shadow-lg p-2 mb-4 bg-white rounded">
<img src="IMG/rud8.jpeg" style="width: 100%; height: 200px;" class="img-thumbnail">
<h5 class="text-danger">Solveur</h5>
<a href="" class="btn btn-primary">Solveur</a>
</div>
</div>
</div>
<br><br>
</div>
footer
<footer class="bg-primary">
<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><i class="fa fa-chevron-right"></i> <a href="" class="text-white">Accueil</a></li>
<li><i class="fa fa-chevron-right"></i> <a href="" class="text-white">A propos</a></li>
<li><i class="fa fa-chevron-right"></i> <a href="" class="text-white">Services</a></li>
<li><i class="fa fa-chevron-right"></i> <a href="" class="text-white">Contact</a></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
.logo {
width: 50px;
height: 50px;
border-radius: 50%;
}
.navbar-nav {
margin: auto;
}
.nav-link{
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.shadow-lg{
text-align: center;
}
.shadow-lg .btn{
border-radius: 10px;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
border-bottom: 4px solid royalblue;
}
Obtenir le code complet : Télécharger