olivier evrard

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

Fan web site – covid 2e cvg-c

Mesure COVID-19: exceptionnellement, il n’y aura pas d’examen de fin d’année pour les étudiants de 2e CVG. À la place, un mini site web sera à rendre par mail ou Teams pour la matinée du 22 mai, dernier délai. Ce projet sera à réaliser avec mon aide via mail/Teams.

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 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 les inline-block
  • utilisation obligatoire des balises structurantes (header, nav, …)
  • utilisation au moins de une classe
  • 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 inline-block.

/* Exemple */
aside{
width: 150px;
display: inline-block;
vertical-align: top;
}

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

  • vous aurez jusqu’au 22 mai 2020 pour le réaliser avec mon aide
  • reprise lors de la session de mai 2020, le vendredi 22 mai (8h15 – 10h30)
  • via mail ou Teams uniquement
  • dossier zippé : Nom_prenom_2eCVG-C_fanpage.zip

Bon boulot,
Bon courage 😉

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