Maison > Article > interface Web > Comment créer une galerie de portfolio en utilisant HTML et CSS
Une galerie de portfolio peut être une collection de tout type de photos et de vidéos organisées à partir de travaux antérieurs. Pour créer une galerie de portfolio, nous utiliserons HTML et CSS. HTML nous aidera à construire le squelette de la galerie du portfolio, tandis que CSS sera utilisé pour styliser le portfolio. Le portfolio étant également un composant majeur de notre site Web, nous utiliserons certaines propriétés CSS pour rendre cette page responsive.
Étape 1 - Créez un passe-partout HTML sur votre éditeur de texte.
Étape 2 - Créez un conteneur pour l'en-tête de la page.
Étape 3 - Créez maintenant un autre conteneur div pour créer une galerie et rendre le conteneur élastique et enveloppant. pour rendre la page réactive.
<div class="gallery"></div>
Étape 4 - Ajoutez les cartes à la galerie et corrigez la taille de la carte.
<div class="card"> <div class="imgs"> <img src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt=""> </div> <p>Java projects 2023 Edition</p> </div>
Étape 5 - Répétez l'étape 4 si vous souhaitez ajouter plus de cartes au conteneur div.
Étape 6 − Ajoutez l'image dans les cartes.
Étape 7 - Portfolio de galerie créé avec succès.
Dans cet exemple, nous avons créé deux fichiers qui nous aident à créer la galerie de portfolio. Dans le fichier HTML, nous avons lié la feuille de style pour fournir le style à la page.
<html> <head> <title>Portfolio Gallery</title> <link rel="stylesheet" href="style.css"> <style> *{ margin-top: 0; font-family: 'Segoe UI'; } .title{ font-size: 2rem; font-weight: 700; background-color: white; width: 100%; } .subtitle{ font-size: 0.8rem; } .dash{ width: 100%; height: 2px; background-color: rgb(143, 143, 143); margin-bottom: 0.5rem; } .gallery{ width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; padding: 1rem 0; } .card{ width: 15rem; height: 15rem; box-shadow: 0 0 5px rgb(165, 165, 165); border-radius: 5px; padding: 0.5rem; } .card:hover{ transform: scale(1.009); cursor: pointer; } .imgs{ background: rgb(219, 218, 218); height: 60%; border-radius: 5px; } img{ width: 100%; height: 100%; border-radius: 5px; } p{ padding: 1rem 0.5rem; font-weight: 600; } </style> </head> <body> <div class="title"> Portfolio <div class="subtitle"> Developers best projects of all the domain </div> <div class="dash"></div> </div> <div class="gallery"> <div class="card"> <div class="imgs"> <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg" alt=""> </div> <p>HTML5 and CSS3 projects 2023 Edition</p> </div> <div class="card"> <div class="imgs"> <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png" alt=""> </div> <p>Python projects 2023 Ediiton</p> </div> <div class="card"> <div class="imgs"> <img src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt=""> </div> <p>Java projects 2023 Edition</p> </div> <div class="card"> <div class="imgs"> <img src="https://www.tutorialspoint.com/android/images/android-mini-logo.jpg" alt=""> </div> <p>Android Development projects 2023 Edition</p> </div> <div class="card"> <div class="imgs"> <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4982/course_4982_image.jpg" alt=""> </div> <p>Fullstack Projects 2023 Edition</p> </div> </div> </body> </html>L'image ci-dessous est une image réactive de l'exemple ci-dessus. Le code ci-dessus est réactif et peut être consulté sur n'importe quel écran d'affichage. Les écrans ci-dessous sont des écrans de bureau, de tablette et de mobile.
Le site Web du portfolio avec vue sur ordinateur peut être consulté sur un grand écran avec de bons angles de vision.
Conclusion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!