Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Ecole des Hautes Etudes d’Ingénierie Oujda DS 1 : Technologies WEB Durée : 3 He

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. d. 1ere 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. 3 uploads/s1/ ds-2.pdf