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. We are going to build a Portfolio Gallery using Bootstrap.
Prerequisites
Approach
- Set up basic HTML structure with doctype, head, and body.
- Use Bootstrap for a clean and visually appealing design.
- Create a responsive grid layout with rows and columns.
- Use media queries to adjust the layout for different screen sizes.
- Display portfolio items with images, titles, and descriptions.
- Ensure images are responsive, and use alternative text for accessibility.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Create a Portfolio Gallery using HTML and CSS</title>
<!-- Bootstrap CSS -->
<link href=
rel="stylesheet">
</head>
<body style="background-color: #f8f9fa;">
<div class="container mt-5">
<!-- Title and tag -->
<h1 class="text-center text-success">
My Portfolio
</h1>
<h3 class="text-center text-secondary">
A Collection of My Work
</h3>
<hr>
<!-- Content of the body -->
<h2 class="mt-4 text-center text-primary">
Portfolio Gallery
</h2>
<div class="card-deck mt-4">
<div class="card border-dark">
<img src=
alt="" class="card-img-top">
<div class="card-body">
<h5 class="card-title text-primary">
<a href="#" class="text-dark">
HTML Tutorials</a></h5>
<p class="card-text text-secondary">
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="card border-dark">
<img src=
alt="" class="card-img-top">
<div class="card-body">
<h5 class="card-title text-primary">
<a href="#" class="text-dark">
CSS Tutorials</a></h5>
<p class="card-text text-secondary">
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="card border-dark">
<img src=
alt="" class="card-img-top">
<div class="card-body">
<h5 class="card-title text-primary">
<a href="#" class="text-dark">
PHP Tutorials</a></h5>
<p class="card-text text-secondary">
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="card border-dark">
<img src=
alt="" class="card-img-top">
<div class="card-body">
<h5 class="card-title text-primary">
<a href="#" class="text-dark">
JavaScript Tutorials</a></h5>
<p class="card-text text-secondary">
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>
<!-- Bootstrap JS and jQuery -->
<script src=
</script>
<script src=
</script>
<script src=
</script>
</body>
</html>
|
Output: