Sygea
Accro au forum
- Date d'inscription : 04/04/2016
- Messages : 1412
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
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épassementsLa pseudo classe
:nth-child()
pour l'alternance des couleurs de ligneSavoir réaliser une infobulle
A 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 tableau
ou encore :
Le positionnement en CSS
Si 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 !
_______________
Jeu 2 Aoû 2018 - 12:07
Batty
Ancien.ne du staff
- Date d'inscription : 05/06/2014
- Messages : 3514
Merci pour ce partage c'est très jolie ! Je l'ai ajouté à l'index =)
_______________
Mar 14 Aoû 2018 - 14:37
Khendra
Newbie
- Date d'inscription : 02/01/2020
- Messages : 43
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
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
_______________
Ven 3 Jan 2020 - 20:02
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum