-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
168 lines (156 loc) · 7.28 KB
/
index.php
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
165
166
167
168
<?php require_once('partials/_header.php'); ?>
<!-- Banner -->
<section class="banner">
<h1 class="banner__title">Buvez <span>enfin</span> de la qualité</h1>
<img class="banner_the_img" src="assets/img/header-tea.svg" alt="Thé au citron">
<a href="#engagements" class="banner__mouse">
<img class="" src="assets/img/mouse.svg" alt="Pictogramme mouse">
</a>
</section>
<section class="engagements" id="engagements">
<div class="container">
<h2 class="title-2"><strong>Nos engagements</strong> Produits authentiques</h2>
<div class="engagements__list">
<div class="engagements__list__item">
<img alt="icon-main-flower" src="assets/img/main-flower.svg" loading="lazy">
<p>Tous nos goûts proviennent exclusivement de producteurs locaux.</p>
</div>
<div class="engagements__list__item">
<img alt="icon-flower" src="assets/img/flower.svg" loading="lazy">
<p>Produit sans arômes ni conservateurs avec la certification agriculteur biologique.</p>
</div>
<div class="engagements__list__item">
<img alt="icon-tea" src="assets/img/tea.svg" loading="lazy">
<p>Garantie d'un produit de qualité produit et stockés en France métropolitaine</p>
</div>
</div>
</div>
</section>
<!-- cards (products) -->
<section class="cards">
<div class="container">
<h2 class="title-2"><strong>Nos produits</strong> Produits populaires</h2>
<ul class="cards__list">
<li class="cards__item">
<img src="assets/img/cards/the.png" alt="Package thé fruit rouge" loading="lazy">
<div class="cards__item__desc">
<div class="cards__item__desc__title">
<div class="cards__item__desc__title__top"><strong>Kenja</strong> 9,99 €</div>
Fruits rouges
</div>
</div>
<a href="#">En savoir plus</a>
</li>
<li class="cards__item">
<img src="assets/img/cards/the-rouge.png" alt="Package thé fruit rouge" loading="lazy">
<div class="cards__item__desc">
<div class="cards__item__desc__title">
<div class="cards__item__desc__title__top"><strong>Xaréa</strong> 9,99 €</div>
Thé blanc
</div>
</div>
<a href="#">En savoir plus</a>
</li>
<li class="cards__item">
<img src="assets/img/cards/the-citron.png" alt="Package thé citron" loading="lazy">
<div class="cards__item__desc">
<div class="cards__item__desc__title">
<div class="cards__item__desc__title__top"><strong>Shang-chi</strong> 9,99 €</div>
Citron Miel
</div>
</div>
<a href="#">En savoir plus</a>
</li>
<li class="cards__item">
<img src="assets/img/cards/the.png" alt="Package thé fruit rouge" loading="lazy">
<div class="cards__item__desc">
<div class="cards__item__desc__title">
<div class="cards__item__desc__title__top"><strong>Lung Jing</strong> 7,99 €</div>
Thé vert
</div>
</div>
<a href="#">En savoir plus</a>
</li>
</ul>
</div>
</section>
<!-- Tuto thé -->
<section class="tuto">
<div class="tuto__content">
<div class="left-side">
<h1 class="left-side__title">La meilleure façon de préparer son thé</h1>
<img class="left-side__quote" src="assets/img/quote.svg" alt="Symbole de citation" loading="lazy">
<p class="left-side__paragraphe">
Pour bien prépare le thé, il faut suivre quelques règles simples !
<ul class="left-side__list">
<li>
Faire chauffer l'eau pratiquement jusqu'à ébullition, mais
sans l'atteindre , puis verser sur le thé.
</li>
<li>
Si vous utilisez du thé en vrac, il faut mettre dans la
théière une petite cuillère par tasse (2 à 2,5 g).
</li>
<li>
Laisser infuser entre 3 à 5 minutes en remuant l'eau avec
une cuillère
</li>
</ul>
</p>
</div>
<div class="right-side">
<div class="vapour">
<span style="--i:1;"></span>
<span style="--i:3;"></span>
<span style="--i:16;"></span>
<span style="--i:5;"></span>
<span style="--i:13;"></span>
<span style="--i:20;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:10;"></span>
<span style="--i:8;"></span>
<span style="--i:17;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:14;"></span>
<span style="--i:2;"></span>
<span style="--i:9;"></span>
<span style="--i:15;"></span>
<span style="--i:4;"></span>
<span style="--i:19;"></span>
</div>
<img src="assets/img/cup_of_tea.png" alt="Tasse de thé" loading="lazy">
</div>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="testimonials__content">
<div class="left-side">
<div class="box"></div>
<div class="img">
<img src="assets/img/hervelyne.jpg" alt="Photo de Hervelyne VASSE">
</div>
</div>
<div class="right-side">
<h2 class="title-2"><strong>Avis</strong> Témoignages de nos clients</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="testimonials__author">
Hervelyne VASSE / Experte en la matière
</div>
<div class="testimonials__arrows">
<img src="assets/img/left_arrow.svg" alt="Flèche gauche pour caroussel des témoignages">
<img src="assets/img/right_arrow.svg" alt="Flèche droite pour caroussel des témoignages">
</div>
</div>
</div>
</section>
<?php require_once('partials/_footer.php'); ?>