Epicode

Détails

• Les images : album goopics


• La police des titres un peu manuscrite c'est Buntaro, mais visiblement ce n'est pas disponible sur google font. Du coup j'ai cherché et la police Kalam est plutôt ressemblante, si vous la mettez en uppercase ! La police pour le contexte et les news c'est du Georgia.


• Couleurs : #941465, #473860, #49408a (ça c'est la couleur des blocs texte)


• La partie "je me suis fait des amis" ce sont les partenaires en 50*50, j'ai bien évidemment la flemme de vous en mettre, je compte sur vous !


• L'effet de survol pour le staff est noté. Vous pouvez mettre, si vous voulez (et si vous savez le faire), un effet de survol sur les icônes des liens pour qu'elles s'agitent un peu de gauche à droite (ou tout autre effet que vous voulez).

• Du positionnement d'éléments sur une image de fond


• Pivoter des images


• Un peu de javascript si ça vous intéresse

• Bases du HTML : (Tutoriel Epicode sur les balises HTML / Documentation HTML francophone)
  • Balises de titres (<h1>, <h2>, etc.) ;
  • Blocs paragraphes <p> ou génériques <div> ;
  • images <img> ;
  • liens <a>...
• Bases de CSS : (Tutoriel Epicode sur les propriétés CSS / Référence CSS francophone)
  • Image de fond avec les propriétés background-image et background-repeat , voire la propriété raccourcie background ;
  • Couleurs de texte avec color ;
  • Marges externes margin et internes padding ;
  • Propriétés de mise en page du texte font-family, font-size, font-weight, text-align, etc. ;
  • Dimensions des blocs avec height et width...
• Flexbox ou/et grid pour l'agencement des éléments
• La propriété CSS overflow pour gérer les dépassements ;
• La propriété CSS transform associée à la fonction rotate() pour la rotation des éléments ;
• La pseudo-classe :nth-child() pour l'alternance de couleurs
• Le positionnement en CSS pour positionner correctement les éléments
• La pseudo-classe :hover pour l'effet d'affichage de la description des admins au survol

• Intéressez-vous aux pseudo-éléments ::before et ::after pour positionner certains éléments qui peuvent se passer d'une image directement dans le code.
• S'affranchir des dimensions fixes : Limitez autant que possible le recours aux dimensions fixes, pour qu'on puisse rajouter ou supprimer autant d'éléments qu'on veut sans tout casser ;
• Intéressez-vous potentiellement à la propriété CSS object-fit et sa valeur cover pour gérer la taille des images ;
• L'effet de hover des polaroïds est faisable en CSS, mais vous pouvez tenter de le faire en javascript

• Avec des tableaux
  
  
  
  • Les tableaux HTML
  
  
  • Fusionner des cellules de tableau
  
  
  
  


• Avec du positionnement absolu et relatif
  
  
  
  • Le positionnement en CSS