How to create a Portfolio Gallery using HTML and CSS ?

02 Jun, 2022
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. 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 contents on your front page to the user. 
Creating Structure: In this section, we will create the basic website structure of the portfolio. Here, we will attach the title attribute so the user can know what will be the content type on each grid of the portfolio. 
HTML code: In this section, we will design the basic structure of the Portfolio Gallery.
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>          <!-- title and tag -->    <div class="container">        <h1>GeeksforGeeks</h1>        <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>
Designing Structure: In the previous section, we created the structure of the basic website and now we are going to use CSS to design the structure of the web page.  
CSS code:
CSS
<style>         /* wildcard styling */    * {        box-sizing: border-box;    }         /* padding for whole body */    body {        padding: 15px;    }         /* styling body */    .container {        max-width: 1200px;        margin: auto;    }         h1 {        color: green;    }         /* 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: 25%;    }         .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%;        }    }</style>
Combining the HTML and CSS Code: Combining both HTML and CSS section code to make a complete Portfolio Gallery. 
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">             <style>              /* wildcard styling */        * {            box-sizing: border-box;        }                  /* padding for whole body */        body {            padding: 15px;        }                  /* styling body */        .container {            max-width: 1200px;            margin: auto;        }                  h1 {            color: green;        }                  /* 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: 25%;        }                  .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%;            }        }    </style></head> <body>          <!-- title and tag -->    <div class="container">        <h1>GeeksforGeeks</h1>        <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: 
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari 
ysachin2314
akshaysingh98088
simranarora5sos
Kanchan_Ray
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)