Voici votre URL de partage https://sharemycode.io/c/ff18c91 (Cliquer pour copier) (Copié)
Nom du fichier : index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Moustache</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Moustache">
<meta name="author" content="Sarajlic Semir">
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/common_style.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<nav class="flex-column justify-content-center navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex col-sm-12 justify-content-center mb-5">
<a href="" class="d-flex justify-content-center">
<img src="assets/img/logo.jpg" class="col-sm-8" alt="logo">
</a>
</div>
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-md-12 d-flex justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav col-md-12">
<li class="nav-item d-flex justify-content-center m-1">
<a class="nav-link bg-dark text-light px-2 col-md-6" href="#">HOME</a>
</li>
<li class="nav-item d-flex justify-content-center m-1">
<a class="nav-link bg-dark text-light px-2 col-md-6" href="about.html">ABOUT</a>
</li>
<li class="nav-item d-flex justify-content-center m-1">
<a class="nav-link bg-dark text-light px-2 col-md-6" href="#">GALLERY</a>
</li>
<li class="nav-item d-flex justify-content-center m-1">
<a class="nav-link bg-dark text-light px-2 col-md-6" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="m-auto">
<section class="imgPageAccueil d-flex align-items-center justify-content-center col-12">
<!-- First section under the header -->
<div class="row col-md-8">
<h1 class="bg-white fs-5 p-1 text-uppercase mb-3 col-md-8">The beacon to all mankind</h1>
<p class="bg-dark mb-4 py-2 fs-5 px-2 text-light">Dignissim pretium luctus nascetur phasellus purus conubia velit
mollis</p>
<p class="bg-dark mt-4 py-2 fs-5 px-2 text-light">Montes tempus feugiat mattis egestas in vehicula felis aptent
posuere</p>
<div class="btnHeader">
<button type="button" class="btn btn-info text-light mt-4">READ MORE</button>
</div>
</div>
</section>
<section class="sectionHome row">
<!-- Section containing the 3 images -->
<div class="col-10 col-md d-flex flex-column align-items-center m-auto">
<div>
<img class="mb-5" src="assets/img/the-father.jpg" alt="image of a thoughtful man">
</div>
<div>
<h3 class="text-uppercase fs-5">The Father</h3>
</div>
</div>
<div class="col-10 col-md-4 d-flex flex-column align-items-center m-auto">
<div>
<img class="mb-5" src="assets/img/the-actor.jpg" alt="image of a man with a fedora">
</div>
<div>
<h3 class="text-uppercase fs-5">The Actor</h3>
</div>
</div>
<div class="col-10 col-md d-flex flex-column align-items-center m-auto">
<div>
<img class="mb-5" src="assets/img/the-nerd.jpg" alt="image of a nerdy man">
</div>
<div>
<h3 class="text-uppercase fs-5">The Nerd</h3>
</div>
</div>
</section>
</main>
<footer class="text-center bg-dark flex-column mt-5">
<!-- Copyright -->
<div class="text-center text-white p-3">
<p class="mt-5">© 2024 by Mustacchio. All rights reserved.</p>
</div>
<!-- Social media icons -->
<div class="d-flex justify-content-center col-md-12">
<div class="d-flex justify-content-center justify-content-around col-md-4">
<div class="border">
<a href="https://x.com/?lang=fr" target="_blank"><i class="bi bi-twitter d-flex align-items-center justify-content-center"></i></a>
</div>
<div class="border">
<i class="bi bi-facebook d-flex align-items-center justify-content-center"></i>
</div>
<div class="border">
<i class="bi bi-google d-flex align-items-center justify-content-center"></i>
</div>
<div class="border">
<i class="bi bi-pinterest d-flex align-items-center justify-content-center"></i>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>
</html>
Informations
Cet extrait a été créé le 3 sept. 2024 à 14:32:11
Cet extrait expire le 3 oct. 2024 à 14:32:11
Langage : html
Link
Voici votre URL de partage : https://sharemycode.io/c/ff18c91 Copié
Ce code a été partagé avec Share on ShareMyCode.io pour VSCode