Maison >interface Web >tutoriel HTML >Comment créer une galerie de portfolio en utilisant HTML et CSS

Comment créer une galerie de portfolio en utilisant HTML et CSS

王林avant: 2023-09-02 19:57:161506parcourir

Vue d'ensemble

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.

Algorithme

É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.

Exemple

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

Une galerie de portfolio est un composant qui peut être utilisé dans de nombreux types de sites Web, comme le site Web d'une organisation qui présente les projets à venir et leur expertise dans le domaine dans une galerie de portfolio, pour les clients qui décident de s'adresser à une entreprise spécifique. La coopération fournit une référence . Les galeries de portfolio sont également utilisées par les développeurs pour présenter leurs meilleurs projets aux entreprises qui recrutent. En d’autres termes, on peut aussi dire que c’est comme notre galerie de téléphone portable qui contient une série de photos et de vidéos.

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!

css html this

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Définir l'heure d'une date spécifiée en fonction de l'heure UTC ?Article suivant：Définir l'heure d'une date spécifiée en fonction de l'heure UTC ?

Articles Liés

Voir plus