How to create a Portfolio Gallery using HTML and CSS ?

How to create a Portfolio Gallery using HTML and CSS ?

Last Updated : 29 Jul, 2024

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 also but in this article, limits are set so we will use HTML and CSS only. Divide the whole article into two different sections in the 1st section, we will create the structure for the portfolio gallery, and in the second section, we will make sure the gallery looks attractive.

Preview:

Screenshot-at-2024-07-27-13-30-27

Approach:

Set up basic HTML structure with doctype, head, and body.
Style elements using CSS for a clean and visually appealing design.
Create a responsive grid layout with rows and columns.
Use media queries to adjust layout for different screen sizes.
Display portfolio items with images, titles, and descriptions.
Ensure images are responsive, and use alternative text for accessibility.

HTML

<!DOCTYPE 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>
    <!-- title and tag -->
<div class="title"><h1>GeeksforGeeks</h1></div>
    <div class="container">
        
        <h3>A Computer Science Portal for Geeks</h3>
        <hr>

        <!-- Content of the body-->
        <h2>Portfolio</h2>
        <div class="row">
            <div class="column">
                <div class="content">
                    <img 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:

How to create a Portfolio Gallery using HTML and CSS ?

S

Sabya_Samadder

Improve

Article Tags :

Similar Reads

How to Create a Website Using HTML and CSS?

Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, weâ€™ll go throu

Design a Tribute Page using HTML and CSS

Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or cred

Build a Survey Form using HTML and CSS

Creating a survey form is a great way to understand the basics of web development. In this tutorial, we will build a Survey Form that allows users to easily submit their responses. The form will include different input types such as text fields, checkboxes, and radio buttons, all designed using HTML

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

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 includeA header introducing the ev

Design a Webpage for online food delivery system using HTML and CSS

Creating your own online food delivery website is a great way to present a user-friendly platform for customers to browse and order food online. In this project, weâ€™ll design a simple yet effective food delivery website using HTML and CSS.What Weâ€™re Going to Create...Weâ€™ll develop a straightforward

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

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

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

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.Step-by-Step Guide to c