Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Portfolio Gallery using the HTML and CSS
Overview
A portfolio gallery can be a collection of any types of photos and videos that represent the past work of the organization. To build a portfolio gallery we will use HTML and CSS. The HTML will help us in building the skeleton of the portfolio gallery and CSS is used to make the styling of the portfolio. As the portfolio will also be the main component of our website so we will make this page responsive using some CSS properties.
Algorithm
Step 1 − Create a HTML boilerplate on your text editor.
Step 2 − Create a container for the header of the page.
Step 3 − Now create another div container to create a gallery and make the container flex and flex 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 the step 4.
Step 6 − Add the image in the cards.
Step 7 − Portfolio gallery is 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 below images are the responsive images of the output of the above example. The above code of the portfolio gallery is responsive in nature. It can be seen in any view screen. The below screen are of the desktop, tablet and mobile screen.
The desktop view can be seen on the large screen with a good view of the portfolio website.
Conclusion
A portfolio gallery is a component which can be used in many types of website like an organization website which displays the upcoming projects and their expertise in the field in the portfolio gallery which provides their clients to decide whether to deal with a particular company or not. The portfolio gallery is also used by the developers to showcase their best projects for the hiring companies. In other words we can also say that it's like our phone gallery which contains a collection of photos and videos.
930 Views
