-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (222 loc) · 10.9 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>IpetEAT</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="contenu/css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<div class="nav-toggle">
<div class="nav-toggle-bar">
<div class="menu">
<ul>
<li><a href="#">Mon profil</a></li>
<li><a href="#">Rechercher un produit</a></li>
<li><a href="#">Passer à la version Premium</a></li>
<li><a href="#">Nous contacter</a></li>
<li><a href="#apropos">À propos</a></li>
<li><a href="#">Connexion</a></li>
<li>
<button><a href="#">Inscription</a></button>
</li>
</ul>
</div>
</div>
</div>
<div class="container header">
<div class="row">
<div class="col-md-3 col-lg-4">
<h1>Ipet<span>EAT</span></h1>
<img alt='logo' class="logo" src="contenu/images_contenu/logo.png" height="946"
width="700"/>
</div>
<nav class="col-md-9 col-lg-8">
<h2><a class='navigation' href="#apropos">À Propos</a></h2>
<h2><a class='navigation' href="#fonctionalites">Fonctionalités</a></h2>
<button class="connexion">Connexion</button>
<button class="essaie_gratuit">Essai Gratuit</button>
</nav>
</div>
</div>
</header>
<main>
<div class="image_bg">
<div class="container desc">
<h3 class="Titre_description">Trouvez la meilleur alimentation<span>pour votre animal</span></h3>
<p class="description">Pensez vous apporter une alimentation saine à votre chat ou à votre chien ? Nous vous
accompagnons dans le choix de sa nutrition afin de lui garantir une santé de fer.</p>
<button class="CTA">Bonjour
<img alt='fleche' src="contenu/images_contenu/icones/fleche2.png" height="999"
width="1097"/></button>
</div>
</div>
<div class="container">
<h3 class="intertitre">Contrôlez la qualité de sa nourriture</h3>
<div class="row">
<div class="col-md-6 col-12">
<div class="fiche_container">
<img class='fiche' alt='fiche' src="contenu/images_contenu/fiche_produit.jpg" height="951"
width="1313"/>
</div>
</div>
<div class="col-md-6 col-12">
<p class="recherche_desc">Pensez-vous que la nourriture que vous achetez à votre chien ou votre chat est
bonne
pour
sa santé ou non ?
Grâce
IpetEAT, vous aurez la réponse ! IpetEAT à pour but de vous sensibiliser aux danger d’une mauvaise
nutrition
sur
votre animal de compagnie. Recherchez un aliment de votre chien ou de votre chat pour en connaître
la
qualité en
fonction de ses apports nutritionnels
</p>
</div>
</div>
</div>
<div class="bg">
<div id='fonctionalites' class="container">
<h3 class="intertitre">Fonctionnalités gratuites</h3>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<img alt="loupe" class="icones" src="contenu/images_contenu/icones/loupe.png" height="1600"
width="1600"/>
<h4>Recherche de produits</h4>
<p>IpetEAT vous propose un système de recherche vous permettant de trouver la un aliment aperçu en
magasin
afin d'en connaître la composition. Vous pourrez rechercher n'importe quel produit en entrant
son
code-barre ou le nom du produit. La fiche du produit sera accompagnée d'une note pour sa qualité
nutritive, des avis des utilisateurs ainsi que de sa composition détaillée.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<img alt="chien" class="icones" src="contenu/images_contenu/icones/Cat.png" height="410"
width="410"/>
<h4>Profil animal</h4>
<p>Vous pouvez enregistrer votre animal et lui créer un profil. Vous pourrez y renseigner toutes les
informations nécessaire tel que le type d’animal (chien, chat), sa taille, son poids, s'il est
stérilisé
ou
non, ainsi que son prochain rendez-vous chez le vétérinaire.
Pour la version gratuite, vous ne pouvez enregistrer qu'un seul animal.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<img alt="newsletter" class="icones" src="contenu/images_contenu/icones/newsletter_couleur.png"
height="1600"
width="1600"/>
<h4>Newsletter</h4>
<p>Il vous sera également possible de vous inscrire à la newsletter du site. Cela vous permettra de
recevoir
directement dans votre boite mail toutes les nouveautés en rapport avec la nutrition
animale.</p>
</div>
</div>
<h3 class="intertitre">Fonctionnalités supplémentaires du pack premium</h3>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<img alt='chat' class="icones" src="contenu/images_contenu/icones/speech-bubble_couleur.png"
height="1600"
width="1600"/>
<h4>Suivis personnalisé avec un nutritioniste</h4>
<p>En souscrivant à notre pack premium, vous pourrez solliciter l'avis d'un professionnel de la
nutrition
pour demander conseil pour votre animal.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<img alt='edit' class='icones' src="contenu/images_contenu/icones/edit.png" height="1600"
width="1600"/>
<h4>Mettre des avis sur les produits</h4>
<p>Il vous sera possible d'émettre des avis sur les produits que vous jugez bon ou mauvais pour
votre
animal.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<img alt="sans_pub" class="icones" src="contenu/images_contenu/icones/sans_pub_inverse.png"
height="1704"
width="1704"/>
<h4>Pas de publicité sur le site</h4>
<p>Enfin, si vous souscrivez à notre pack premium, les pubs vous seront retirées.</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3 class="intertitre" id="apropos">À propos</h3>
<h4 class="a_propos">Qui sommes-nous ?</h4>
<p>Nous sommes trois étudiants du département MMI Montbéliard. Nous aimons tous les trois les animaux et
c’est
pour
cela que, dans le cadre d’un projet au seins de notre université, nous avons pensé ce projet. Nous avons
créé ce
site afin d’aider les propriétaires d’animaux (principalement chien et chat) à améliorer l'alimentation
de
leurs
petits compagnons.
</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<img alt="portrait" class="portrait" src="contenu/images_contenu/lucas.png" height="999"
width="1211"/>
<p class="gal_desc">Lucas Michalet <br><span> Chef de projet et responsable du développement</span><br>
<span>[email protected]</span>
</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<img alt="portrait" class="portrait" src="contenu/images_contenu/Gauthier.png" height="941"
width="1117"/>
<p class="gal_desc">Gauthier Sevilla <span> Responsable de communication</span>
<span>[email protected]</span></p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<img alt="portrait" class="portrait" src="contenu/images_contenu/martin.png" height="957"
width="1127"/>
<p class="gal_desc">Martin Crevoisier<span> Responsable designer</span><br><span>[email protected]
</span></p>
</div>
</div>
<h4 class="a_propos" id="aproposite">Qu'est-ce qu'IpetEAT ?</h4>
<p>IpetEat est un site indépendant qui permet aux propriétaires de chiens et de chats d’obtenir les
informations
nutritionnel des aliments pour animaux afin de trouver la meilleure qualité possible.
Ce site est disponible gratuitement et vous offrira une aide considérable pour faire attention à la
santé de vos
petits compagnons !</p>
</div>
</main>
<footer class="container">
<p class="mentions">Projet réalisé dans le cadre d'un éxercice pédagogique au département MMi de montbéliard
</p>
<div class="row">
<div class="col-md-7 col-lg-9">
<h5>Suivez-nous :</h5>
<img alt='facebook' class="social" src="contenu/images_contenu/facebook-logo.png" height="512"
width="512"/>
<img alt='twitter' class="social" src="contenu/images_contenu/twitter-logo.png" height="512"
width="512"/>
<img alt='instagram' class="social" src="contenu/images_contenu/icon.png" height="512" width="512"/>
<h5>S'inscrire à notre newsletter :</h5>
<label for="email"></label>
<input type="email" name="email" id="email" required>
</div>
<div class="col-md-3 col-lg-3">
<h5>À Propos</h5>
<ul>
<li><a href="#apropos">Qui sommes-nous ?</a></li>
<li><a href="#">Nous contacter</a></li>
<li><a href="#aproposite">À propos du site</a></li>
</ul>
</div>
</div>
<div class="mentions_legales">
<a href="#">Mentions légales</a>
</div>
</footer>
</body>
<script src="contenu/js/interaction.js"></script>
</html>