Accueil
Maquette d'Exercice pour Page d'Accueil
Créée par : Sygea
Informations
Niveau estimé : Intermédiaire
Sujet mis à jour en août 2022
Présentation
Voilà de quoi vous entraîner pour le responsive si vous le souhaitez ! Vous pouvez aussi la faire sans bien entendu :)
Cette PA (et les autres éléments associés) a été codée et proposée en LS : Index Complet #10 - Scarlet Koi
Elle fait partie d'un set d'index complet, si vous avez envie de faire l'exercice pour tout l'index.
- Barre de navigation
- Catégories
- QEEL
La maquette
![[Intermédiaire]Page d'accueil #8 - Sygea OaVEY](https://i.goopics.net/oaVEY.png)
/!\ Le schéma est pas à l'échelle
Police: https://fonts.google.com/specimen/Roboto
Codes couleurs:
#d20f0e
#f98813
#fdfaf4
#ffeedd
#ffeedd
(groupes)
#7cb326
#eeb53a
#31b2b4
#b43192
#eea2a4
#3e2e2f
Images:
Topsite 1 https://i.goopics.net/02472.png
Topsite 2 https://i.goopics.net/xNdbj.png
Topsite 3 https://i.goopics.net/Z2AGG.png
Image staff 100*100 https://i.goopics.net/mkjQP.png
Logo MP hover staff https://i.goopics.net/N90K7.png
Image prédéfini 50*50 https://i.goopics.net/lRAdA.png
Image top partenaire 150*100 https://i.goopics.net/KaoO3.png
Logo discord https://i.goopics.net/W2A3l.png
Effets:
- Hover sur l'image du staff
- Des infobulles éventuellement où vous voulez
Sentez-vous libre de la modifier comme bon vous semble. Une fois bien réalisée, elle peut être mise en LS. :)
Compétences suggérées
(Rien ne vous oblige à utiliser toutes les suggestions si vous préférez vous concentrer sur un concept précis que vous ne maîtrisez pas encore)
Bases du HTML : Éléments de titre (<h1>, <h2>, etc.), blocs paragraphes <p> ou génériques <div>, listes HTML <ul> et <li>, liens <a> et images <img>... Bases du CSS : couleurs de fond et de texte, marges, espacements internes, taille de texte... Flexbox et/ou grid pour positionner des blocs (et groupes de blocs) côte à côte La propriété CSS overflow pour gérer les dépassements La pseudo classe :nth-child() pour l'alternance des couleurs de ligne Savoir réaliser une infobulleA titre d’entraînement, vous pouvez également tenter d'obtenir un rendu avec les anciennes méthodes :
les tableaux HTML La fusion des cellules d'un tableauou encore :
Le positionnement en CSSSi vous avez des questions n'hésitez pas à les poser à la suite ainsi qu'à poster votre rendu et votre code entre balises
[hide] et [/hide].Merci d'informer le staff d'Epicode en cas de lien mort !
_______________
I dit it !
Je n'ai pas pu la faire en responsive en revanche,n'ayant pas encore appris comment faire, mais l'essentiel est là. La PA est juste un peu plus grande et j'ai ajouté un petit effet sur les top-sites![[Intermédiaire]Page d'accueil #8 - Sygea 3614989888](/users/1416/13/16/78/smiles/3614989888.gif)
https://codepen.io/Cendre/pen/QWwOapJ
Je l'ai aussi mise en place sur mon forum-test (phpbb2) et ça a l'air d'aller
Je n'ai pas pu la faire en responsive en revanche,n'ayant pas encore appris comment faire, mais l'essentiel est là. La PA est juste un peu plus grande et j'ai ajouté un petit effet sur les top-sites
https://codepen.io/Cendre/pen/QWwOapJ
Je l'ai aussi mise en place sur mon forum-test (phpbb2) et ça a l'air d'aller
_______________
