Aquileo | Portfolio Gallery using HTML and CSS

A portfolio gallery helps organize and showcase large or diverse website content on the front page in a clean, user-friendly way using only HTML and CSS (no JavaScript).

Structure Section: Build the basic layout and content structure of the portfolio gallery using HTML.
Styling Section: Use CSS to enhance the visual appearance and make the gallery attractive and responsive.
Technology Used: Only HTML and CSS are used to keep the implementation simple and lightweight.

Creating a Portfolio Gallery

Here’s a concise step-by-step overview for creating a portfolio gallery:

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.

index.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:

Portfolio Gallery using HTML and CSS

Creating a Portfolio Gallery

Explore