Home > Article > Web Front-end > How to create a portfolio gallery using HTML and CSS
How to create a portfolio gallery using HTML and CSS
- 王林forward
- 2023-09-02 19:57:161482browse
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>
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>
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>
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!