The portfolio gallery is an effective tool for websites that feature various types of content or a large volume of material. By utilizing a portfolio gallery, you can seamlessly present all your content directly on the homepage for users to explore.
To build a portfolio gallery, we will only need HTML and CSS. While JavaScript could be an option, this article will focus exclusively on HTML and CSS due to specific limitations.
We will divide this article into two sections: in the first section, we will establish the structure of the portfolio gallery, and in the second section, we will focus on enhancing its visual appeal.
Preview:
Approach:
- Establish a foundational HTML structure that includes the doctype, head, and body sections.
- Apply CSS to style the elements for a polished and attractive design.
- Implement a responsive grid layout incorporating rows and columns.
- Utilize media queries to modify the layout for various screen sizes.
- Present portfolio items featuring images, titles, and descriptions.
- Make sure the images are responsive and provide alternative text for accessibility purposes.
HTML
<html>
<head>
<title>
Create a Portfolio Gallery
using HTML and CSS
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<style>
* {
box-sizing: border-box;
}
/* padding for whole body */
body {
padding: 15px;
}
/* styling body */
.container {
max-width: 1200px;
margin: auto;
}
h1 {
color: white;
}
/* anchor tag decoration */
a {
text-decoration: none;
color: #5673C8;
}
a:hover {
color: lightblue;
}
/* paragraph tag decoration */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
/* row and column decoration */
.row {
margin: 0px -18px;
padding: 8px;
}
.row>.column {
padding: 6px;
}
.column {
float: left;
width: 20%;
position: relative; /* Add position relative */
transition: all 0.3s ease; /* Smooth transition */
}
.column:hover {
width: 25%;
top: -20px; /* Move up on hover */
box-shadow: 0 14px 8px rgba(0, 128, 0, 0.5); /* Add box shadow on hover */
}
.row:after {
content: "";
display: table;
clear: both;
}
/* content decoration */
.content {
background-color: white;
padding: 10px;
border: 1px solid gray;
}
/* window size 850 width set */
@media screen and (max-width: 850px) {
.column {
width: 50%;
}
}
/* window size 400 width set */
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
.title {
text-align: center;
position: relative;
width: 100%;
height: 15%;
background-color: green;
}
</style>
<div class="title"><h1>GeeksforGeeks</h1></div>
<div class="container">
<h3>A Computer Science Portal for Geeks</h3>
<hr>
<h2>Portfolio</h2>
<div class="row">
<div class="column">
<div class="content">
<img data-src="https://www.geeksforgeeks.org/wp-content/uploads/html.png"
alt="" style="width:100%">
<h3>
<a href="#">HTML Tutorials</a>
</h3>
<p>
HTML stands for Hyper Text Markup
Language. It is used to design web
pages using markup language. HTML
is the combination of Hypertext and
Markup language. Hypertext defines
the link between the web pages.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"
alt="" style="width:100%">
<h3>
<a href="#">CSS Tutorials</a>
</h3>
<p>
Cascading Style Sheets, fondly referred
to as CSS, is a simply designed language
intended to simplify the process of
making web pages presentable. CSS allows
you to apply styles to web pages.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="https://www.geeksforgeeks.org/wp-content/uploads/php-1.png" alt="" style="width:100%">
<h3>
<a href="#">PHP Tutorials</a>
</h3>
<p>
The term PHP is an acronym for PHP:
Hypertext Preprocessor. PHP is a
server-side scripting language
designed specifically for web
development. PHP can be easily
embedded in HTML files.
</p>
</div>
</div>
<div class="column">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/javascript.png"
alt="" style="width:100%">
<h3>
<a href="#">JavaScript Tutorials</a>
</h3>
<p>
Javascript was developed by Brendan
Eich in 1995. At first, it was called
LiveScript but was later name to
JavaScript. JavaScript is the muscle
of the structure
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Similar Reads
-
How to Create a Website Using HTML and CSS?
Building a website with HTML and CSS is an essential skill for anyone learning web development. HTML (HyperText Markup Language) provides the structure for your content, whereas CSS (Cascading Style Sheets) is responsible for the visual presentation, including aspects like colors, fonts, margins, and layout.
4 min read -
Design a Tribute Page using HTML and CSS
A tribute page is an overview of someone whom we admire in our life. In this article, we are creating a tribute webpage of the Late A.P.J. Abdul Kalam Sir using HTML and CSS. The page features a clean and visually appealing design, incorporating a header with a centered title, a main section with co
5 min read -
Build a Survey Form using HTML and CSS
We will create a survey form using HTML and CSS. The form will include various questions for users to answer. We will use HTML to design the basic layout of the form, and CSS to enhance the design with elements such as text decoration, text color, background color, text alignment, margin, padding, a
4 min read -
Design a Parallax Webpage using HTML and CSS
A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. In this article, we are creating a parallax webpage using HTML and CSS. We will use basic tags of HTML like div, paragraph, and heading to writ
4 min read -
Design an Event Webpage using HTML and CSS
Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What We’re Going to CreateWe’ll create a webpage for a fictional event called “GeeksforGeeks TechCon 2025.” This webpage will include A header introducing the e
5 min read -
Design a webpage for online food delivery system using HTML and CSS
To design an attractive webpage for an online food delivery system using HTML and CSS, craft a user-friendly interface with navigation, engaging content sections, and responsive design to enhance the overall dining experience. Also add the basic pages “Home,” “About,” “Menu,” and “Contact Us,” featu
6 min read -
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the s
6 min read -
How to create a Landing page using HTML CSS and JavaScript ?
A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v
7 min read -
Design a Webpage like Technical Documentation using HTML and CSS
In this article, we will design a webpage-like technical documentation using HTML and CSS . Technical documentation is any document that explains the features of the respective product. In this project, we are going to create technical documentation of C++ by using HTML and CSS. The webpage has a me
9 min read -
Create a Music Website Template using HTML, CSS & JavaScript
A Music Website Template is a pre-designed layout for creating a music-themed webpage. By utilizing HTML, CSS, and JavaScript, developers can craft a functional and visually appealing website with features like play/pause controls, sections for home, music, about, and contact. Approach: We will crea
3 min read -
Email Template using HTML and CSS
Ever been intrigued by the vibrant and engaging email templates that land in your inbox? This article will guide you through the process of creating a basic, yet visually appealing, email template using HTML and CSS. Such templates are primarily used in marketing campaigns with the ultimate goal of
5 min read -
How to Create Image Gallery using JavaScript?
An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls. He
3 min read -
Simple Portfolio Website Design using HTML
Creating your own portfolio website is an exciting way to showcase your work, skills, and personal brand to the world. In this project, we’ll design a simple yet effective portfolio website using only HTML. What We’re Going to Create:We’ll develop a simple portfolio website that presents your profes
4 min read -
How to create a Portfolio Gallery using HTML and CSS ?
The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. To create a portfolio gallery we will need only HTML and CSS. We can use JavaScript a
4 min read
