Ecole des Hautes Etudes d’Ingénierie Oujda

DS 1 : Technologies WEB

Durée : 3 Heures.
Formateur : MANI Mohammed Adil

Création d’une site web pour O-GIFT

Le dossier de votre projet doit avoir votre nom, puis compressé et envoyé à l’email suivant :
manimohammedadil@gmail.com, vous devez indiquer votre nom, filière dans l’objet de votre
email.

O-GIFT est une société dont l’activité principale est l’organisation des événements
ainsi que la préparation et la vente des cadeaux et surprises, créée à Oujda depuis quelques
temps. Afin d’augmenter son chiffre d’affaire, la directrice à décider de réaliser un site web
pour profiter des avantages de l’e-marketing. Elle nous a expliqué son besoin qui est décrit dans
le reste de ce document.
Le site web, doit être développé en utilisant HTML5, CSS3, Bootstrap4 pour
l’ergonomie, et JS pour quelques traitements. Il doit être composé de :
1- Une page Home : Affichant un texte de présentation.
2- Une page Services : Affichant 3 Box responsives avec une image, titre et du
texte.
3- Une page Devis : Pour Demander un devis en ligne.
4- Une page Contact : Pour envoyer un message à la direction de la société.
NB : Toutes les pages, doivent contenir deux parties partagées, le Menu et le Footer.
Détails :
1- Généralités :
a. Vous devez utiliser bootstrap4, afin de garantir le font nécessaire pour une
bonne vue.
b. Utilisez simplement les liens CDN, pour l’intégration des bibliothèques
nécessaires.
c. Vous devez vous baser dans votre design sur les couleurs présentes sur le
Logo partagé avec vous sous le nom : logo.png, les codes sont les suivants :
#ECD970 (Gold), #D14282 (Rose) et #FFFFFF (Blanc).
2- Menu :
a. Menu linéaire, avec largeur 100% et hauteur 150px.
b. Menu Bootstrap de type mobile.
c. Le contenu doit être centré.
d. Le font utilisé dans cette partie est partagé avec vous : font.ttf
e. Menu composé du logo de l’entreprise et 4 liens : Home, Services, Devis et
Contact.
f. Le menu doit être fixé (soit en utilisant le css, ou bien en se basant sur une
classe bootstrap).
g. Au moment du passage de la souris sur un lien, appliquez l’inversion de
couleur en se basant sur le pseudo :hover.

1
Ecole des Hautes Etudes d’Ingénierie Oujda
DS 1 : Technologies WEB
Durée : 3 Heures.
Formateur : MANI Mohammed Adil
3- Footer :
a. Linéaire, avec largeur 100% et hauteur 100px, et un texte : Copyrights 2019
centré.
4- Page Home : Elle doit être composée de :
a. Menu et footer.
b. Slider ou bien carousel sous bootstrap.
c. Largeur à 100%, Hauteur 500px.
d. Contenant 3 images partagées avec vous dans le dossier : slider1.jpg,
slider2.jpg, slider3.jpg.
e. Chaque image doit afficher un texte :
i. Image 1 : Votre événement … Notre responsabilité.
ii. Image 2 : Faîtes confiance en nous pour créer un moment inoubliable.
iii. Image 3 : Générez votre devis en ligne et réservez dès maintenant.
f. Le texte doit être centré dans l’image, avec un arrière-plan noir transparent
(rgba(0,0,0,0.5)), et avec un espacement intérieur de 30px de chaque côté.
g. Au-dessous de votre Slider, vous devez afficher un texte, pour la présentation
de la société.
h. Utilisez le Texte : Lorem Ipsum.
i. Le texte doit avoir un arrière-plan sous forme d’image parallax (paralax.jpg)
ainsi qu’un arrière-plan noir transparent pour des raisons de lisibilité.
j. Au-dessous, ajoutez une map pour O-gift de largeur 100% et hauteur de
500px.

5- Page Service : Elle doit être composée de :

a. Menu et footer.
b. Utilisez font.ttf pour les titres.
c. 3 Div responsives pour afficher les services de l’entreprise, vous pouvez
travailler avec la classe CARD déjà présente sous bootstrap4.
i. Sur un écran large : 3 div sur ligne.
ii. Sur un écran medium : 3 div sur ligne.
iii. Sur un écran small : 2 div sur ligne.
iv. Sur un écran extra-small : 1 div sur ligne.
ere
d. 1 Div :
i. Titre : Evènements
ii. Image : Partagée avec vous – service1.jpg
iii. Texte : Lorem Ipsum.
e. 2éme Div :
i. Titre : Cadeaux
ii. Image : Partagée avec vous – service2.jpg
iii. Texte : Lorem Ipsum.
f. 3éme Div :
i. Titre : Surprises
ii. Image : Partagée avec vous – service3.jpg

2
Ecole des Hautes Etudes d’Ingénierie Oujda
DS 1 : Technologies WEB
Durée : 3 Heures.
Formateur : MANI Mohammed Adil
iii. Texte : Lorem Ipsum.

6- Page Devis : Elle est composée de :

a. Menu et footer.
b. Un formulaire purement bootstrap contenant :
i. Zone de texte pour le nom de la personne : Obligatoire, [A-Za-z ]{3,30}
ii. Zone de texte pour saisir l’objet de la demande : Obligatoire
iii. Calendrier pour choisir le jour.
iv. Liste déroulante pour choisir le service, avec les valeurs suivantes :
1. Cadeaux
2. Organisation
v. Zone de texte pour saisir la Quantité : Obligatoire, Numérique
vi. Radio bouton pour choisir avec entre : Avec transport – Sans
transport.
vii. Bouton générer.
c. Au moment de clique sur le bouton, Vérifiez les contraintes et affichez le
message suivant : (Ecrivez votre code JS dans un fichier externe)
Devis Numéro : HK28
Pour : HAFIDI Khalid
Objet : Anniversaire
Service : Cadeaux
Le prix estimatif est : 2000DH
Le prix de transport inclus : 100DH
Le prix TTC : 2100DH.

Récapitulatif : A la fin de votre DS, vous devez avoir les fichiers suivants :
- Home.html
- Services.html
- Devis.html
- Style.css
- Devis.js
- Tous les fichiers partagés avec vous.