mission Hearthstone 1

Hearthstone  est un jeu de carte en ligne de Blizzard apparu en 2014.

Découverte d’HTML

  • Réaliser un tableau affichant les différentes raretés disponibles sur index.html.
  • Ajouter une vidéo grâce à la balise video avec comme attribut autoplay à cette page.
  • Supprimer autoplay, mettre controls et ajouter l’attribut poster=’tata.jpg’ choisir son image.
  • Lancer la page. Pour ajuster la taille de la video, ajouter width=’320’ height=’180’ dans la balise video.
  • Utiliser loop pour une lecture en boucle.

 

  • Réaliser un formulaire qui permet d’enregistrer un nouveau type de rareté formRarity.html. Les champs sont requis.
  • Ajouter un champ couleur et un champ date de création à la carte sur votre diagramme.
  • Réaliser un formulaire qui permet d’enregistrer une nouvelle carte formCarte.html en fonction des champs de votre diagramme . Le choix de la race se fera grâce à une liste déroulante. Tester l’affichage, notamment de l’input couleur avec différents navigateurs.
  • Réaliser une page viewCarte.html qui présente les différents champs d’une carte de votre choix. Ajouter une image grâce à la balise img. Encapsuler cette image grâce à la balise <figure>

  • Enregistrer les fichiers dont les diagrammes de classes dans un répertoire hearthstone1 sur Gitlab et partager le dépôt avec cherryclass.

Découverte de CSS

  • Ajouter un titre h1 au fichier index.html.
  • Réaliser un fichier hearthstone.css qui ajoute une couleur à votre balise h1 et inclure celui-ci dans la section head de votre fichier index.html.
  • Encadrer le nom de la carte par les balises span définissant une classe « bleu » puis créer la classe correspondante dans hearthstone.css
  • Changer la couleur directement grâce à la console du navigateur
  • Grâce au selecteur de balise body, charger des polices de caractères comme gigi puis century si la première n’est pas trouvée grâce à font-family.
  • Modifier la taille de la police d’un mot du texte en 18pt et modifier la taille de la police de tout le texte (sauf le mot) grâce à font-size par 10px.
  • Changer par 1em et tester.
  • Définir une marge en haut de 10% et sur les cotés de 30% grâce à margin en une seule ligne.
  • Entourer la description de la carte viewCarte par une balise div. Ajouter une couleur de fond en transparence à cette div grâce à un identifiant (id=).

 

  • Réaliser la liste des factions grâce aux balises ul et li
  • Faire en sorte que la liste n’apparaisse qu’au passage de la souris.
  • Permettre à l’image de la carte sur viewCarte d’être zoomée au passage de la souris.
  • Changer d’image pour les définitions supérieurs à 1024px. Tester en changeant la taille de la fenêtre.
  • Ajouter le cdn de Bootstrap à votre page.
  • Réaliser un formulaire de connexion avec login, mot de passe, email et validation formLogin.html en ajoutant les classes de Bootstrap . On respectera l’input type correspondant. Autofocus dans le champ email.

  • Enregistrer les fichiers sur Gitlab dans un répertoire hearthstone1 et partager avec cherryclass.
2018-07-14T23:56:09+00:00By |Tags: , |