Clyde
Ancien.ne du staff
- Date d'inscription : 28/03/2013
- Messages : 1580
Maquette d'Exercice pour Page d'Accueil
Créée par : Clyde (Aed)
Informations
Niveau estimé : Intermédiaire
Sujet mis à jour en août 2022
Présentation
yo !
Un petit schéma pour vos petites têtes.
J'ai utilisé le logo de l'orphelinat fontenay que j'avais en commande sorry j'espère que ça dérange pas
La maquette
• Effet de survol (hover) sur le staff
• Quand vous passez la souris sur l'image du prédef l'info s'affiche sur le rectangle.
• polices : Oswald & arial
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 (titres
<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 propriété CSS
border-radius
pour les coins arrondisLes effets de survol avec la pseudo-classe
:hover
et (par exemple) les propriétés CSS transition
et opacity
Savoir 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 1 Déc 2016 - 19:34
Azalée
Accro au forum
- Date d'inscription : 26/12/2013
- Messages : 4200
Jeu 1 Déc 2016 - 21:05
Clyde
Ancien.ne du staff
- Date d'inscription : 28/03/2013
- Messages : 1580
Bah y a pas spécialement d'images, j'en ai pris des randoms pour les top-sites, prends celles que tu veux pour remplacer xDD
Après les partos sont en 88*31
Après les partos sont en 88*31
_______________
Ven 2 Déc 2016 - 19:32
Sygea
Accro au forum
- Date d'inscription : 04/04/2016
- Messages : 1412
Coucou !
Avec Yuuki on s'est servie de ton schéma pour m'exercer au display, et puis en passant aussi sur les hovers et un petit peu les onglets /o
https://codepen.io/Sygea/pen/rZLdpW
(Je sais pas si je dois vous donner les codes hors de codepen dans des balises code mais c'est peut-être plus simple là-bas)
Avec Yuuki on s'est servie de ton schéma pour m'exercer au display, et puis en passant aussi sur les hovers et un petit peu les onglets /o
https://codepen.io/Sygea/pen/rZLdpW
(Je sais pas si je dois vous donner les codes hors de codepen dans des balises code mais c'est peut-être plus simple là-bas)
_______________
Mar 6 Nov 2018 - 15:26
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum