parent
0225860e60
commit
d7d189b359
@ -0,0 +1,55 @@
|
||||
# sujet du 20/10/2021
|
||||
|
||||
**En partant du template ci-dessus.**
|
||||
|
||||
Affichez le formulaire au centre de la page dans une modale en lui donnant une présentation plus esthétique.
|
||||
Les couleurs / infos de la charte sont les suivantes :
|
||||
- fond standard : #fcfafc
|
||||
- couleur d'écriture standard : #330033
|
||||
- lien : #660066
|
||||
- lien au hover : #eeaaee (+ soulignement)
|
||||
- fond des champs de formulaires : blanc
|
||||
- titres : fond = #663366 et texte = #fcfafc
|
||||
- on souhaite pouvoir changer ces couleurs avec un minimum d'effort.
|
||||
- le site doit utiliser une police sans serif
|
||||
- L'icone pour fermer le formulaire doit être l'icone icomoon suivant :
|
||||
|
||||
et s'afficher dans le bandeau titre du formulaire avec les même couleur qu'un élément textuel d'un titre.
|
||||
|
||||
Le formulaire est affiché par défaut mais doit pouvoir être fermé.
|
||||
Vous veillerez à le rendre le plus accessible possible et à ajouter des éléments dans la page favorisant le référencement naturel de celle-ci.
|
||||
|
||||
Le contenu est absent mais il faut y ajouter :
|
||||
- Une navigation : retour à l'accueil / à propos / nos newsletters (la page actuelle)
|
||||
- titre principal : Site d'information culturelles et sportives.
|
||||
- Contenu : Bonjour et bienvenu sur notre site,
|
||||
Depuis cette page nous vous invitons à choisir les abonnements aux newsletter qui vous conviennent.
|
||||
© S&C diffusion 2021
|
||||
rejoigner notre communauté (lien vers https://www.instagram.com/s-et-c)
|
||||
nous écrire (lien vers contact@s-et-c.fr)
|
||||
|
||||
En essayant de respecter au mieux le côté sémantique de votre html5
|
||||
|
||||
Le boutons radios de fréquence ne doivent s'afficher que si on a coché la case à coher de la newsletter avant eux.
|
||||
|
||||
|
||||
|
||||
Le formulaire est valide si on choisi : au moins une newsletter et une fréquence ainsi qu'un email valide (controle html uniquement).
|
||||
|
||||
Une fois terminé merci de compresser l'ensemble des éléments et de les envoyer à :
|
||||
juan+b2mds@agence-polux.fr
|
||||
|
||||
Le style est à faire en CSS ou en SCSS mais la version SCSS sera mieux apréciée.
|
||||
|
||||
Le html fourni peut être modifié, voir corrigé, autant que souhaité dans le respect de la sémantique et de l'accessibilité
|
||||
|
||||
Elements évalués et pondération (sur 20) :
|
||||
- css / html fonctionnel et responsive 5
|
||||
- respect de la charte graphique fournie /3
|
||||
- modularité du CSS produit /1
|
||||
- accessibilité du html /2
|
||||
- sémantique du html /1
|
||||
- lisibilité du code (commentaire, structure, indentation, scss vs css) / 3
|
||||
- fonctionnalité des switchs /2
|
||||
- centrage correct des éléments /2
|
||||
- contrôle html /1
|
||||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<form method="get">
|
||||
<h4>S'abonner à </h4>
|
||||
<span>fermer le formulaire</span>
|
||||
<hr/>
|
||||
<input type="checkbox" name="sport" id="sport" /><label for="sport">sports et activités sportives</label>
|
||||
<input type="radio" id="s_hebdo" name="sport_freq" value="hebdo" /><label for="s_hebdo">Hebdomadaire</label>
|
||||
<input type="radio" id="s_daily" name="sport_freq" value="daily" /><label for="s_daily">Journalier</label>
|
||||
<br/>
|
||||
<input type="checkbox" name="culture" id="culture" /><label for="culture">arts et cultures</label>
|
||||
<input type="radio" id="c_hebdo" name="culture_freq" value="hebdo" /><label for="c_hebdo">Hebdomadaire</label>
|
||||
<input type="radio" id="c_daily" name="culture_freq" value="daily" /><label for="c_daily">Journalier</label>
|
||||
<hr/>
|
||||
<input type="text" name="mail" placeholder="votre email" /><button type="submit">Enregistrer mon abonnement</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue