olivier evrard

*********************
*********************

Fan web site mai 2022 (2e CVG)

Il n’y aura pas d’examen de fin d’année. À la place, un mini site web sera à rendre par Teams pour la matinée du 20 mai 2022, dernier délai. Ce projet sera à réaliser avec mon aide.

Contenu

Vous allez devoir créer de toute pièce un mini site web dédié à un groupe de musique ou artiste de votre choix. Ce site web, constitué de 2 pages, devra contenir…

pour le site entier :

  • un dossier bien rangé contenant index.html, shop.html, styles.css, un dossier images (contenant les images)
  • un menu avec >>>> home | shop | about (ou en français)
  • « home » sera index.html
  • « shop » sera shop.html
  • « about » sera un faux lien avec un #
  • des photos optimisées poids/qualité via export web dans Photoshop
  • une photo au minimum sera placée en « float » avec du texte autour d’elle
  • un agenda de la prochaine tournée (à inventer forcément) dans le aside qui doit figurer sur les 2 pages au même endroit
  • un bouton fictif mais cliquable pour acheter un ticket dans cette partie aside agenda nommé « Tickets »
  • les 2 pages seront en 2 colonnes avec « flexbox »
  • utilisation obligatoire des balises structurantes (header, nav, …)
  • utilisation au moins d’une classe (ex: .love)
  • utilisation d’une typographie qui fonctionnera bien avec votre choix de groupe / artiste et qui sera obligatoirement importée dans votre site à partir de Google Fonts ( 1 au minimum)

home (index.html) :

  • une biographie (wikipédia ou autres)
  • une citation du groupe/artiste à mettre en valeur (blockquote)
  • 4 photos optimisées au minimum

shop (shop.html) :

  • 4 articles minimum à vendre (CD, Vinyl, T-shirt, …)
  • chaque article aura une vignette + un descriptif + un prix + un faux lien (Acheter)
  • l’utilisation des bloc html <article> est conseillée

Design

Le contenu c’est un chose importante, mais vous allez devoir travailler le CSS de votre page afin de créer un univers en cohérence avec le groupe/artiste et le style de musique. Vous êtes GRAPHISTES, donc un soin tout particulier aux éléments de couleurs, de typographie, de marges, d’images, photos … doit être apporté.

Format

Ce mini site sera créé dans un format pour écran large (desktop) avec deux colonnes, une pour le contenu principal et l’autre pour l’agenda des futurs dates de la tournée + bouton « Tickets ».

Code

Pour réaliser ces 2 colonnes, vous utiliserez uniquement les code CSS « flexbox ».

/* Exemple */

.conteneur
{
    display: flex;
    justify-content: space-between;
}

Schéma

Dossier de départ

Téléchargez ci-dessous le dossier de départ :

Evaluation

Ce travail à rendre comptera pour 60/100.

Timing

  • remise le vendredi 20 mai 2022 (8h15 – 10h30)
  • via Teams uniquement dans DEVOIRS
  • dossier zippé : Nom_prenom_2eCVG-C_fanpage.zip

Bon boulot,
Bon courage 😉

Liens

*********************