How to create a portfolio gallery using HTML and CSS-HTML Tutorial-php.cn

How to create a portfolio gallery using HTML and CSS

王林

Release： 2023-09-02 19:57:16

forward

1449 people have browsed it

How to create a portfolio gallery using HTML and CSS

Overview

A portfolio gallery can be a collection of any type of photos and videos organized from past work. To build a portfolio gallery, we will use HTML and CSS. HTML will help us build the skeleton of the portfolio gallery, while CSS is used to style the portfolio. Since the portfolio is also a major part of our website, we will use some CSS properties to make this page responsive.

Algorithm

Step 1 - Create an HTML boilerplate in your text editor.

Step 2 - Create a container for the page header.

Step 3 - Now create another div container to create a gallery and make the container elastic and wrap. to make the page responsive.

<div class="gallery"></div>

Copy after login

Step 4 − Add the cards to the gallery and fix the size of the card.

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

Copy after login

Step 5 - If you want to add more cards to the div container, repeat step 4.

Step 6 − Add the image in the cards.

Step 7 - Gallery portfolio created successfully.

Example

In this example we have created two files which helps us to create the portfolio gallery. In the HTML file we have linked the stylesheet to provide the styling to the page. The

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

Copy after login

The image below is the responsive image of the above example. The code above is responsive and can be viewed on any view screen. The screens below are desktop, tablet and mobile screens.

Desktop view portfolio website can be viewed on a large screen with good viewing angles.

Conclusion

A portfolio gallery is a component that can be used in many types of websites, such as an organization website that showcases upcoming projects and their expertise in the field in a portfolio gallery for clients deciding whether to work with References are provided for specific company collaborations. Portfolio galleries are also used by developers to showcase their best projects to recruiting companies. In other words, we can also say that it is like our mobile phone gallery which contains a series of photos and videos.

The above is the detailed content of How to create a portfolio gallery using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!