HumanBooster/tp-web-statique-chien
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:26:57 +01:00
parent de01fa41b0
commit 3b19457e0b
11 changed files with 269 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
index.html Executable file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/b62beca04b.js" crossorigin="anonymous"></script>
<title>Exercice</title>
</head>
<body>
<nav class="navbar">
<img src="img/logo.avif" alt="" class="logo" />
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<header>
<h1 class="header-title">Lorem ipsum dolor sit amet.</h1>
<div class="header-content">
<img src="img/1.jpg" alt="" class="img-round" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque,
architecto? Voluptatem perspiciatis suscipit eum ratione modi fugiat
tempora nemo cum, nam dolores obcaecati minima qui sequi! Quas magnam
nihil architecto?
</p>
</div>
</header>
<section class="header-section">
<h2>Lorem ipsum dolor sit amet.</h2>
<div class="header-section-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque,
architecto? Voluptatem perspiciatis suscipit eum ratione modi fugiat
tempora nemo cum, nam dolores obcaecati minima qui sequi! Quas magnam
nihil architecto?
</p>
</div>
<button class="btn-shop"><i class="fa-solid fa-basket-shopping"></i>Buy</button>
</section>
<main>
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<img src="img/5.jpg" alt="" />
</main>
<div class="section-infos">
<section class="map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5567.293437856464!2d3.1269419000000056!3d45.758227999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f71c431e0961f3%3A0x8e504f84a825921f!2s222%20Bd%20Gustave%20Flaubert%2C%2063000%20Clermont-Ferrand!5e0!3m2!1sfr!2sfr!4v1740664634976!5m2!1sfr!2sfr"
style="border: 0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
title="map"></iframe>
</section>
<section class="section-form">
<form action="" class="contact-form">
<h2>Contactez-nous</h2>
<label for="">Nom :</label>
<input type="text" placeholder="Votre nom" />
<label for="">Email :</label>
<input type="email" placeholder="Votre adresse mail" />
<label for="">Message :</label>
<textarea placeholder="Votre Message"></textarea>
<button type="submit" class="btn-submit">Valider</button>
<div class="contact-infos">
<div>
<i class="fa-solid fa-location-dot"></i>
<p>222 Boulevard Gustave Flaubert</p>
</div>
<div>
<i class="fa-solid fa-phone"></i>
<p>+33 0123456789</p>
</div>
<div>
<i class="fa-solid fa-at"></i>
<p>test@test.fr</p>
</div>
</div>
</form>
</section>
</div>
<footer>
<p>Lorem ipsum dolor, sit amet.</p>
</footer>
</body>
</html>