Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create Portfolio Gallery using the HTML and CSS
A portfolio gallery is a collection of images and videos that showcase past work or achievements. Using HTML and CSS, we can create an attractive, responsive portfolio gallery that displays multiple project cards in a grid layout.
Syntax
The basic structure for a portfolio gallery uses flexbox for responsive layout
.gallery {
display: flex;
flex-wrap: wrap;
gap: spacing;
justify-content: center;
}
.card {
width: fixed-width;
height: fixed-height;
box-shadow: shadow-values;
}
Example: Creating a Portfolio Gallery
The following example creates a complete portfolio gallery with header, cards, and hover effects
<!DOCTYPE html>
<html>
<head>
<title>Portfolio Gallery</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Segoe UI', sans-serif;
}
.header {
background-color: white;
padding: 2rem;
text-align: center;
}
.title {
font-size: 2.5rem;
font-weight: 700;
color: #333;
}
.subtitle {
font-size: 1rem;
color: #666;
margin: 0.5rem 0;
}
.divider {
width: 100px;
height: 3px;
background-color: #007bff;
margin: 1rem auto;
}
.gallery {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
padding: 2rem;
background-color: #f8f9fa;
min-height: 100vh;
}
.card {
width: 280px;
height: 320px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 1rem;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.image-container {
width: 100%;
height: 70%;
background-color: #e9ecef;
border-radius: 8px;
overflow: hidden;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-title {
padding: 1rem 0.5rem;
font-weight: 600;
color: #333;
text-align: center;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="header">
<div class="title">My Portfolio</div>
<div class="subtitle">Showcase of my best projects and achievements</div>
<div class="divider"></div>
</div>
<div class="gallery">
<div class="card">
<div class="image-container">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg" alt="HTML CSS Project">
</div>
<div class="card-title">HTML5 & CSS3 Projects</div>
</div>
<div class="card">
<div class="image-container">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png" alt="Python Project">
</div>
<div class="card-title">Python Development</div>
</div>
<div class="card">
<div class="image-container">
<img src="/java8/images/java-8-mini-logo.jpg" alt="Java Project">
</div>
<div class="card-title">Java Applications</div>
</div>
<div class="card">
<div class="image-container">
<img src="/android/images/android-mini-logo.jpg" alt="Android Project">
</div>
<div class="card-title">Android Development</div>
</div>
<div class="card">
<div class="image-container">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4982/course_4982_image.jpg" alt="Fullstack Project">
</div>
<div class="card-title">Full Stack Projects</div>
</div>
<div class="card">
<div class="image-container">
<img src="https://via.placeholder.com/280x200/4CAF50/white?text=Web+Design" alt="Web Design Project">
</div>
<div class="card-title">Web Design Portfolio</div>
</div>
</div>
</body>
</html>
A responsive portfolio gallery with a centered header "My Portfolio", subtitle, and blue divider line. Below are 6 project cards arranged in a grid layout. Each card has an image, title, subtle shadow, and hover effect that lifts the card slightly. The layout automatically adapts to screen size using flexbox.
Key Features
Flexbox Layout: The gallery uses display: flex with flex-wrap: wrap to create a responsive grid that automatically adjusts to screen size.
Hover Effects: Cards have smooth transform animations on hover using transition and transform: translateY() for better user interaction.
Responsive Images: Images use object-fit: cover to maintain aspect ratio while filling the container completely.
Conclusion
A portfolio gallery effectively showcases work samples using CSS flexbox for responsive layout and hover effects for interactivity. This component is essential for professional websites and developer portfolios.
2K+ Views
