-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
4 lines (4 loc) · 8.95 KB
/
index.html
1
2
3
4
<!DOCTYPE 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="shortcut icon" href="img/favicon.ico" type="image/x-icon"><title>Le Jour J...</title><!-- bootstrapStyle--><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><!-- CSS icons--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"><!-- myStyle--><link rel="stylesheet" href="css/style.css"></head><header><nav class="navbar navbar-expand-lg navbar-light bg-dark-50 fs-5"><div class="container-fluid"><a class="navbar-brand text-light fw-bolder fs-1" href="#">PIE</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#col">Collaboration</a></li><li class="nav-item"><a class="nav-link" href="#init">Initiative</a></li><li class="nav-item"><a class="nav-link" href="#avis">Avis</a></li><li class="nav-item"><a class="nav-link disabled">le Jour J | 02 avril 2022</a></li></ul></div></div></nav></header><main class="container"><div class="carousel slide carousel-fade" id="carouselExampleControls" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active" data-bs-interval="2000"><img class="d-block mw-100" src="img/00.png" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/05.jpg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/06.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/07.jpg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/08.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/09.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/10.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/11.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/12.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/13.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/14.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/15.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/16.jpeg" height="590" alt="..."></div><div class="carousel-item" data-bs-interval="2000"><img class="d-block" src="img/17.jpeg" height="590" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div></main><!-- Collaboration section--><section class="vh-50 my-5" id="col"><h2 class="h1 display-xxl-6 my-2 text-uppercase fw-bold text-dark text-center w-75 w-xxl-auto mx-auto">Initiative intermédiaire <span class="text-light">stagiaires pie</span> & <span class="text-light">Marafik berkane</span></h2><div class="containe"><img class="mw-100" src="img/principale.png" alt=""></div></section><!-- initiative section--><section class="container my-5 pt-1 vh-75" id="init"><h2 class="display-4 display-xxl-3 mx-auto my-5 text-uppercase fw-bold text-dark text-center">initiative <span class="text-light">stagiaires </span> ofppt <span class="text-light">dev101</span></h2><div class="row py-5"><div class="col-xxl-7"><h2 class="text-uppercase text-dark mb-5"><span class="bg-light d-inline block p-1 rounded-3">Avant notre</span><span class="text-light"> initiative </span></h2><p class="display-5 text-center text-xxl-end text-white pt-5">Le bonheur n'est pas un état à atteindre, mais un comportement à suivre. Si vous voulez être heureux et vous faciliter la vie, essayez de profiter de toutes les choses, même les plus difficiles.</p></div><div class="col-xxl-5 order-xxl-1 mx-auto d-flex justify-content-center"><video width="500" height="500" onmouseenter="play()" onmouseleave="pause()"><source src="video/v1.mp4" type="video/mp4"></video></div></div><div class="row py-4 mt-5 py-5"><div class="col-xxl-7 order-xxl-2 d-flex flex-column justify-content-between"><h2 class="text-uppercase text-dark mb-5"><span class="bg-light d-inline block p-1 rounded-3">apres notre</span><span class="text-light">initiative</span></h2><p class="display-5 text-center text-xxl-start text-white pt-5">Le secret du succès dans la vie est d'affronter ses difficultés avec constance comme un oiseau dans la révolution de la tempête.</p></div><div class="col-xxl-5 order-xxl-1 mx-auto d-flex justify-content-center"><video width="500" height="400" onmouseenter="play()" onmouseleave="pause()"><source src="video/v2.mp4" type="video/mp4"></video></div></div></section><!-- avis section--><section class="bg-dark py-5" id="avis"><div class="container"><h2 class="display-3 mx-auto my-5 text-uppercase fw-bold text-muted text-center">Votre <span class="text-light">avis </span> et <span class="text-light">ressenti</span></h2><div class="row justify-content-center"><div class="col-12 col-xxl-6 d-flex justify-content-center"><div class="position-relative"><video width="500" height="500" onmouseenter="play()" onmouseleave="pause()"><source src="video/avis1.mp4" type="video/mp4"></video><span class="badge py-2 px-4 fs-6 bg-white text-dark position-absolute top-0 start-0">GE102</span></div></div><div class="col-12 col-xxl-6 d-flex justify-content-center"><div class="position-relative"><video width="500" height="500" onmouseenter="play()" onmouseleave="pause()"><source src="video/avis2.mp4" type="video/mp4"></video><span class="badge py-2 px-4 fs-6 bg-white text-dark position-absolute top-0 end-0">GE102</span></div></div></div></div></section><footer><div class="container py-3 mb-lg-4 mb-0 border-top"><div class="row felx-coulmn flex-lg-row justify-content-center align-items-center justify-content-lg-between align-items-lg-center"><div class="col-12 col-lg-5 d-flex align-items-center justify-content-center justify-content-lg-start"><a class="mb-3 me-2 mb-lg-0 text-decoration-none fs-5 fw-bolder" href="https://www.instagram.com/pie_ista_berkane/" style="color:#cdbeff">PIE</a><span class="mb-3 me-2 mb-lg-0 text-white fw-bold">© 2022 OFPPT <span class="badge rounded-pill fs-sm-6" style="color:#24212d;background:#a095c7;">STAGIAIRES
DEV101</span></span></div><a class="col btn btn-sm fw-bold d-none d-lg-block shadow shadow-lg" href="https://www.linkedin.com/in/ermich-reda/" style="background:#454152;color:#cdbeff;" target="_blanck">Designed |
Developed by ER.Reda</a><ul class="nav col-12 col-lg-4 mb-lg-3 mb-lg-0 list-unstyled d-flex justify-content-center justify-content-lg-end fs-5"><li class="ms-3"><a class="text-white" href="https://www.instagram.com/reermix/" target="_blank" title="ERMIX"><i class="bi bi-instagram"></i></a></li><li class="ms-3"><a class="text-white" href="https://www.facebook.com/er.reda.7/" target="_blank" title="ERREDA"><i class="bi bi-facebook"></i></a></li><li class="ms-3"><a class="text-white" href="mailto:redaermich@gmail.com"><i class="bi bi-envelope"></i></a></li><li class="ms-3"><a class="text-white" href="https://api.whatsapp.com/send?phone=2126042939100" method="get" target="_blank" title="ERREDA"><i class="bi bi-whatsapp"></i></a></li><li class="ms-3"><a class="text-white" href="#"><i class="bi bi-arrow-up"></i></a></li></ul></div><div class="row justify-content-center d-lg-none align-items-center py-3"><a class="col-9 col-sm-6 btn btn-sm shadow shadow-lg fw-bold" href="https://www.linkedin.com/in/ermich-reda/" style="background:#454152;color:#cdbeff;" target="_blanck">Designed
| Developed by ER.Reda</a></div></div></footer><!-- script--><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>