TUTO Intégration HTML5 / CSS3 d'un portfolio minimaliste

Voici la suite de la formation Photoshop consacrée à la création des maquettes des pages du site Internet Portfolio minimaliste.

Cette 2ème partie sera consacrée à l'intégration HTML5 et CSS3 des maquettes Photoshop. Voici le programme de ce tuto :

Page d'accueil :

• Mise en place d'un moteur de recherche animé
• Effet d'opacité sur les icônes des réseaux sociaux
• Création du menu
• Mise en place d'un slider aux couleurs du site
• Mise en place des derniers articles à afficher sur la page d'accueil
• Installation d'un carrousel pour lister vos clients
• Création du footer

Page A propos :

• Mise en place d'un slider
• Installation de barres de compétences animées
• Mise en place d'un carrousel pour afficher les membres de l'équipe
• Création d'un sidebar et mise en place des éléments qui la constitue (dernier article, dernier projet, newsletter...)

Page portfolio :

• Installation d'un portfolio filtrable fluide
• Effet au rollover sur les images avec icône superposée

Page Singleportfolio :

• Récupération du slider afin de mettre plusieurs images par projet
• Informations complémentaires client (date, nom du client, description, site web)
• Récupération du carrousel pour afficher les projets similaires

Page blog :

• Listing des dernières actualités du blog avec effet animé sur les images au survol
• Affichage des catégories du blog dans la sidebar

Page SingleBlog :

• Récupération du slider afin de mettre plusieurs images par article
• Récupération du carrousel pour afficher les articles similaires

Au vu du graphisme minimaliste du site, ce dernier sera seulement optimisé pour de l'affichage tablette / mobile. Pour plus d'informations concernant le tuto, merci de visionner l'extrait. Bon tuto !