HumanBooster/tp-web-statique-pavillon-rouge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit with existing project files

Browse Source
This commit is contained in:
Vincent Guillet
2025-03-15 15:27:53 +01:00
parent 2b4e2a86d6
commit 6180fd0ff1
37 changed files with 424 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
index.html Executable file
View File

@@ -0,0 +1,279 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Le Lapin & Le Panda</title>
</head>
<header class="d-flex flex-column justify-content-center align-items-center">
<nav class="d-flex justify-content-center">
<a href="#">Accueil</a>
<a href="#">Nous Contacter</a>
</nav>
<img src="img/logo.png" alt="logo">
<p id="story-label" class="section-label">Si le contenu m'était conté...</p>
<div class="story container d-flex flex-column justify-content-center align-items-center text-center">
<h2>Le lapin & le panda</h2>
<p>Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam vehicula.
</p>
<p>Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam vehicula.
</p>
<p>Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam vehicula.
</p>
<p>Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam vehicula.
</p>
<p>Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam vehicula.
</p>
</div>
</header>
<body>
<section id="#moral-1" class=container">
<div class="section-label">
<p>Moral N°1</p>
</div>
<h2 class="section-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
<div class="row d d-flex justify-content-center">
<div class="col-md-4">
<p><span>Lorem ipsum dolor sit amet</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam <br>
vehicula.
</p>
</div>
<div class="col-md-4">
<p><span>Lorem ipsum dolor sit amet</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam <br>
vehicula.
</p>
</div>
</div>
</section>
<section id="#moral-2" class="container">
<div class="section-label">
<p>Moral N°2</p>
</div>
<h2 class="section-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
<div class="row d d-flex justify-content-center">
<div class="col-md-4">
<p class=""><span>Lorem ipsum dolor sit amet</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam <br>
vehicula.
</p>
</div>
<div class="col-md-4">
<p class=""><span>Lorem ipsum dolor sit amet</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam <br>
vehicula.
</p>
</div>
<div class="col-md-4">
<p class=""><span>Lorem ipsum dolor sit amet</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan <br>
eleifend vel et tellus. <br>
Fusce non arcu id turpis aliquam <br>
vehicula.
</p>
</div>
</div>
<div class ="row d d-flex justify-content-center comp-logos">
<img class=col-md-4" src="/img/logo/comp_film.png" alt="">
<img class=col-md-4" src="/img/logo/comp_youtube.png" alt="">
<img class=col-md-4" src="/img/logo/comp_wordpress.png" alt="">
<img class=col-md-4" src="/img/logo/comp_seo.png" alt="">
<img class=col-md-4" src="/img/logo/comp_phpmysql.png" alt="">
<img class=col-md-4" src="/img/logo/comp_mobile.png" alt="">
<img class=col-md-4" src="/img/logo/comp_instagram.png" alt="">
<img class=col-md-4" src="/img/logo/comp_html5.png" alt="">
<img class=col-md-4" src="/img/logo/comp_facebook.png" alt="">
<img class="col-md-4" src="/img/logo/comp_eshop.png" alt="">
</div>
</section>
<section id="#section-contact" class="d-flex flex-column justify-content-center align-items-center">
<div class="section-label">
<p>Moral N°3</p>
</div>
<h2 class="section-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
<form action="#" class="d-flex flex-column justify-content-center align-items-center">
<input type="email" placeholder="Votre email">
<input type="text" placeholder="Votre nom">
<textarea placeholder="Votre message"></textarea>
<div class="d-flex justify-content-center align-items-center">
<input type="checkbox">
<p>J'accepte de recevoir vos communications</p>
<p>Pour toutes informations, consultez en bas de cette page notre politique de confidentialité</p>
</div>
<button type="submit">Nous contacter</button>
</form>
</section>
<section id="#section-fabulateurs" class="container">
<h2 class="section-title">Les fabulateurs</h2>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-md-4 fabulateur">
<img src="img/portraits/totem_frank.png" alt="chien">
<p><span>Lorem ipsum</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan
</p>
</div>
<div class="col-md-4 fabulateur">
<img src="img/portraits/RomaneFaverjon.png" alt="panthère">
<div>
<p><span>Lorem ipsum</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan
</p>
</div>
</div>
<div class="col-md-4 fabulateur">
<img src="img/portraits/totem_christophe.png" alt="cheval">
<div>
<p><span>Lorem ipsum</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan
</p>
</div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-md-4 fabulateur">
<img src="img/portraits/totem_francois.png" alt="ours">
<div>
<p><span>Lorem ipsum</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan
</p>
</div>
</div>
<div class="col-md-4 fabulateur">
<img src="img/portraits/totem_jean-marc.png" alt="insecte">
<div>
<p><span>Lorem ipsum</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan
</p>
</div>
</div>
<div class="col-md-4 fabulateur">
<img src="img/portraits/totem_sylvestre.png" alt="renard">
<div>
<p><span>Lorem ipsum</span><br>
Aenean ultrices tempus urna, <br>
in dapibus tortor suscipit ut. <br>
Vivamus nec nisi vel leo accumsan <br>
gravida. <br>
Nam nec sapien in neque accumsan
</p>
</div>
</div>
</div>
</section>
<section id="section-clients" class="container">
<h2 class="section-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
<div class="row d-flex justify-content-around align-items-center clients">
<img class="col-md-3" src="img/clients/logo_xylem.png" alt="">
<img class="col-md-3" src="img/clients/logo_uniqpeople.png" alt="">
<img class="col-md-3" src="img/clients/logo_texto.png" alt="">
<img class="col-md-3" src="img/clients/logo_pramex.png" alt="">
<img class="col-md-3" src="img/clients/logo_myleasing.png" alt="">
<img class="col-md-3" src="img/clients/logo_herault.png" alt="">
<img class="col-md-3" src="img/clients/logo_haasavocats.png" alt="">
<img class="col-md-3" src="img/clients/logo_fftb.png" alt="">
<img class="col-md-3" src="img/clients/logo_bouygues.png" alt="">
</div>
</section>
</body>
<footer class="d-flex justify-content-center align-items-center">
<p>Copyright 2020</p>
</footer>
<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.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</html>