-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (106 loc) · 5.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Licorne</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Barre de menu -->
<header>
<p class="logo">MyUnicorn</p>
<div class="menu">
<ul>
<li> <a href=""> Le Principe</a></li>
<li><a href=""> Nos Licornes</a></li>
<li><a href="">Nous Trouver</a></li>
</ul>
</div>
</header>
<!-- Contenu du site avec les section -->
<main>
<div class="titre">
<h1>Un jour, une licorne</h1>
</div>
<div class="container">
<!-- Section de l'intro -->
<section class="infos">
<h2><i class="bi bi-star"></i>Le Principe</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum dapibus ante, eu aliquam ante euismod eleifend. Ut malesuada augue ut luctus pellentesque. Aenean id varius ipsum. Nunc malesuada ex ut ipsum interdum vestibulum. Integer facilisis finibus orci, sit amet pretium diam placerat vitae. Nunc auctor tincidunt mollis. Nullam quis turpis sed lorem elementum semper eget semper risus. In nec mauris aliquam, congue metus euismod, cursus leo. Vivamus laoreet commodo leo, ut cursus justo blandit in. Aenean pretium mi a auctor pulvinar. Mauris sodales sollicitudin sodales. Sed mollis sed lectus id facilisis. Quisque pharetra a purus eget porttitor. Proin rhoncus risus non mauris iaculis sodales. Pellentesque euismod dui erat, non sodales ipsum sollicitudin sed.
Donec nisi eros, luctus id pretium eget, consequat elementum risus. Fusce eleifend lacinia
</p>
<p>
orci eu iaculis. Vestibulum vestibulum justo quis commodo congue. Aliquam purus leo, dictum in nisl at, pellentesque bibendum mi. Nulla convallis mi eget nisl convallis dictum. Vestibulum a massa lacus. Aenean quis enim diam.
</p>
</section>
<!-- Images de licornes -->
<section class="licorns">
<h2><i class="bi bi-star"></i>Nos Licornes</h2>
<div class="card-group">
<div class="card">
<img src="img/unicorns/photo1.jpg" class="card-img-top" alt="Lulu">
<div class="card-body">
<h5 class="card-title"> Lulu Confetty </h5>
</div>
</div>
<div class="card">
<img src="img/unicorns/photo2.jpg" class="card-img-top" alt="Lapillon">
<div class="card-body">
<h5 class="card-title">Lapillon Magik</h5>
</div>
</div>
<div class="card">
<img src="img/unicorns/photo3.jpg" class="card-img-top" alt="Ninjacorn">
<div class="card-body">
<h5 class="card-title">El Ninjacorn</h5>
</div>
</div>
<div class="card">
<img src="img/unicorns/photo4.jpg" class="card-img-top" alt="Sweety">
<div class="card-body">
<h5 class="card-title">Sweety Candy</h5>
</div>
</div>
</div>
</section>
<!-- Section nous trouver -->
<section class="contact">
<h2><i class="bi bi-star"></i>Nous trouver</h2>
<div class="found">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13326.783990511964!2d2.3454874204030567!3d48.85163700786157!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e671fd10fa77a9%3A0xbefa2358f9e7a776!2s18%20Rue%20Geoffroy%20l'Asnier%2C%2075004%20Paris!5e0!3m2!1sfr!2sfr!4v1689596434512!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="form">
<div class="address">
<h3>Notre élevage de licornes est situé au:</h3>
<ul>
<li>18 Rue Geoffroy l'Asnier</li>
<li>75004 Paris</li>
<li>01.23.45.67.89</li>
</ul>
</div>
<div class="newsletter">
<h3>Newsletter</h3>
<p>Abonnez-vous simplement a notre newsletter mensuelle </p>
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<button type="submit" class="btn">Valider</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
</main>
<footer>
<p>2023 © M2IFormation</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>