-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (142 loc) · 7.04 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/style.css">
<!-- script d'importation icone -->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-replace-svg></script>
<!-- lien du style courgette -->
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>MyUnicorn</title>
</head>
<body>
<!-- Navigation -->
<nav>
<ul>
<li><a class="active" href="index.html">MyUnicorn</a></li>
<li style="float:right">
<a href=#plac>NOUS TROUVER</a></li>
<li style="float:right">
<a href=#licorn>NOS LICORNES</a></li>
<li style="float:right">
<a href=#princip>LE PRINCIPE</a></li>
</ul>
</nav>
<div>
<!--Grand titre-->
<h1 class="grand">
Un jour, une licorne
</h1>
</div>
<!-- contenue border -->
<div class="border">
<br>
<div class="row">
<section id="princip">
<div class="titre">
<i class="far fa-star etoile"></i>
<h2>Le principe</h2>
</div>
<br>
<div class="paragraph-box">
<p class="simple-paragraph mar-bottom">
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.
</p>
<br>
<p class="simple-paragraph">
Donec nisi eros, luctus id pretium eget, consequat elementum risus. Fusce eleifend lacinia 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>
</div>
</section>
<br>
<!--photo_et emplacement des licorne-->
<section id="licorn">
<div class="titre">
<i class="far fa-star icon etoile"></i>
<h2> Nos Licornes</h2>
<br>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/img/unicorns/photo1.jpg">
<img src="assets/img/unicorns/photo1.jpg" alt="Cinque Terre" width="60" height="40">
</a>
<div class="desc">Lulu Confetty</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/img/unicorns/photo2.jpg">
<img src="assets/img/unicorns/photo2.jpg" alt="Cinque Terre" width="60" height="40">
</a>
<div class="desc">Lapillon magik</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/img/unicorns/photo3.jpg">
<img src="assets/img/unicorns/photo3.jpg" alt="Cinque Terre" width="60" height="40">
</a>
<div class="desc">El Ninjacorn</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/assets/img/unicorns/photo4.jpg">
<img src="assets/img/unicorns/photo4.jpg" alt="Cinque Terre" width="60" height="40">
</a>
<div class="desc">Sweety Candy</div>
</div>
</div>
</section>
</div>
<!--Localisation en utilisant google map-->
<section id="plac">
<div class="titre">
<i class="far fa-star icon etoile"></i>
<h2>Nous trouver</h2>
<br>
</div>
<div class="local">
<div class="place">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3774.535177495199!2d47.524043415323575!3d-18.907691287184722!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x21f07e00bfe681a5%3A0x4c1b3b6f62c45fa2!2sAnalakely%20Market!5e0!3m2!1sen!2smg!4v1643880689449!5m2!1sen!2smg"
width="500" height="400" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
<br>
<div class="contact">
<h3 class="ptitre">Notre élevage de licornes est situé au :
</h3>
<div class="address-box">
<p class="simple-paragraph">
Analakely Market <br> Arabe Rahezavana, Antananarivo, Madagascar <br> 01.22.45.67.90
</p>
</div>
<!-- remplisage du formulaire pour l"abonné-->
<form action="newsletter.php" class="newsletter">
<br>
<h3 class="ptitre">Newsletter</h3>
<label for="newsletter-subscription-input" class="simple-paragraph">
Abonnez-vous simplement à notre newsletter mensuelle !
</label>
<input type="email" id="newsletter-subscription-input" placeholder="votre@email.fr">
<br>
<button type="submit" class="primary-button">Valider</button>
</form>
</div>
</div>
</div>
</section>
</div>
<!-- pied du page -->
<footer>
<p>Copyright © Jj03 RAMANDA </p>
</footer>
</body>
</html>