How to create a Portfolio Gallery using HTML and CSS ?
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 many contents. With the help of a portfolio gallery, you can easily display all the contents in 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 gird of the portfolio.
- HTML code: In this section, we will design the basic structure of Portfolio Gallery.
<!DOCTYPE html><html><head><title>Create a Portfolio Galleryusing HTML and CSS</title><metaname="viewport"content="width=device-width, initial-scale=1"></head><body><!-- title and tag --><divclass="container"><h1>GeeksforGeeks</h1><h3>A Computer Science Portal for Geeks</h3><hr><!-- Content of the body--><h2>Portfolio</h2><divclass="row"><divclass="column"><divclass="content"><imgsrc=alt=""style="width:100%"><h3><ahref="#">HTML Tutorials</a></h3><p>HTML stands for Hyper Text MarkupLanguage. It is used to design webpages using markup language. HTMLis the combination of Hypertext andMarkup language. Hypertext definesthe link between the web pages.</p></div></div><divclass="column"><divclass="content"><imgsrc=alt=""style="width:100%"><h3><ahref="#">CSS Tutorials</a></h3><p>Cascading Style Sheets, fondly referredto as CSS, is a simply designed languageintended to simplify the process ofmaking web pages presentable. CSS allowsyou to apply styles to web pages.</p></div></div><divclass="column"><divclass="content"><imgsrc=alt=""style="width:100%"><h3><ahref="#">PHP Tutorials</a></h3><p>The term PHP is an acronym for PHP:Hypertext Preprocessor. PHP is aserver-side scripting languagedesigned specifically for webdevelopment. PHP can be easilyembedded in HTML files.</p></div></div><divclass="column"><divclass="content"><imgsrc=alt=""style="width:100%"><h3><ahref="#">JavaScript Tutorials</a></h3><p>Javascript was developed by BrendanEich in 1995. At first, it was calledLiveScript but was later name toJavaScript. JavaScript is the muscleof the structure</p></div></div></div></div></body></html>
Designing Structure: In the previous section, we have created the structure of the basic website and now we are going to use CSS to design the structure of web-page.
- CSS code:
<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 tga 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:1pxsolidgray;}/* window size 850 width set */@mediascreenand (max-width:850px) {.column {width:50%;}}/* window size 400 width set */@mediascreenand (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.
<!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 tga 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= 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= 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= 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= 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:
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.
