Hello Dear Readers, Today In this Post, You will learn How to Create a Complete Responsive Portfolio Website Design Using Bootstrap 5 (Part-2). Earlier I have shared the Complete Responsive Portfolio Website Design Using Bootstrap 5 (Part-1). and now it’s time to Responsive Personal Portfolio Website (Part-2).

This is part two of the websites As you already know Complete Responsive Website is the most popular that is displayed our information properly to locate the page or file that the user requests. For those who aren’t familiar with how it looks, have you seen a page like this before? Looking at the default page, you can imagine how cringe-worthy it would feel like as a user to suddenly drop on an empty page like this.

So I decided to create this amazing Complete Responsive Website I hope you will like it, Include a set of links to popular sections on your site and try to tempt a lost visitor to continue browsing. Otherwise, they’ll have to go all the way back from the homepage and rummage through the site’s contents to find what they are looking for.

If you create a truly unique, engaging, page, visitors will want to tell the world. This can be a great source of new links. There you are, surfing in your favorite search engine when you happen upon just the thing you’re looking for.

People who land on your website are looking for its content, usually via a link. They would have clicked that link expecting one thing, so why show them a hand-drawn panda? Instead, your Complete Responsive Website should get them to where they need to be. Keeping these things in mind, I created this page.

Play Video

If you like this program, and you want to use this on your websites, projects, and wherever you want then you have to do some basic changes on codes according to your website layout or this is enough good for you and you don’t need to change then you don’t need to change anything.

Catch your user’s attention with a beautiful Complete Responsive Website created with only CSS and Bootstrap 5. Today’s tutorial will show you how to create a Complete Responsive landing page Website using only HTML and CSS.

If you’re a beginner you can use this Awesome design in your project and websites. I believe this UI design code will help you a lot. Or if you have some knowledge of Bootstrap 5 you can add some great design in this format and use it according to your requirements.

If you like this article and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to go to the second part of this page. You can use this program on your projects, websites, and HTML pages.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Landing Page by Code4education</title>

<link rel="icon" type="image/png" href="images/favicon.png">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive-style.css">

</head>

<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="75">
    
    <header class="header_wrapper">
        <nav class="navbar navbar-expand-lg fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img decoding="async" src="images/logo.png" class="img-fluid" alt="logo">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-stream navbar-toggler-icon"></i>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                    <ul class="navbar-nav menu-navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#services">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#blog">Blog</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

<section id="home" class="banner_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 order-lg-1 order-2 banner-content">
                    <h2 class="text-uppercase position-relative">Hell0</h2>
                    <h1 class="text-uppercase">I am John Smith</h1>
                    <h5 class="text-uppercase">senior Frontend Designer</h5>
                    <div class="mt-5">
                        <a class="main-btn primary-btn" href="#">Hire Me</a>
                        <a class="main-btn secondary-btn ms-4" href="#">Get CV</a>
                    </div>
                </div>
                <div class="col-lg-5 order-lg-2 order-1">
                    <div class="top-right-img">
                        <img decoding="async" src="images/home-right.webp" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="about_wrapper">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7 mb-4 mb-lg-0">
                    <img decoding="async" src="images/about-us.webp" class="img-fluid" alt="About Us">
                </div>
                <div class="col-lg-5 mb-4 mb-lg-0">
                    <h3>let’s <br>Introduce about <br>myself</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae veniam dignissimos error quia
                        ipsam quos rem magni dolores doloribus.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae veniam dignissimos error quia
                        ipsam quos rem magni dolores doloribus. Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit. Beatae veniam dignissimos error quia ipsam quos rem magni dolores doloribus.</p>
                    <a href="#" class="main-btn primary-btn mt-4">Download CV</a>

</div>
            </div>
            <div class="row justify-content-center pt-5">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="row">
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo1.webp" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo2.webp" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo3.webp" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo4.webp" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo5.webp" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo6.webp" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo7.webp" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo8.webp" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 mb-4">
                            <div class="single-logo-item">
                                <img decoding="async" src="images/client-img/logo9.webp" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="offset-lg-2 col-lg-4 col-md-10">
                    <div class="client-info">
                        <div class="d-flex">
                            <span class="large">10</span>
                            <span class="smll">Years <br>Experience <br>Working</span>
                        </div>
                        <div class="call-now d-flex py-4">
                            <div>
                                <span class="fa fa-phone-alt"></span>
                            </div>
                            <div class="ms-4">
                                <p>call us now</p>
                                <h5>(+1)-800-555-6789</h5>
                            </div>
                        </div>
                    </div>
                </div>

</div>
        </div>
    </section>

<section id="services" class="services_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-5">
                    <h2>SERVICE OFFERS</h2>
                    <p>Is give may shall likeness made yielding spirit a itself togeth created after sea <br
                            class="d-none d-lg-block">
                        is in beast beginning signs open god you're gathering ithe</p>
                </div>
                <div class="col-lg-3 col-sm-6 mb-4">
                    <div class="card rounded-0 border-0 text-center py-5 px-3">
                        <div>
                            <img decoding="async" src="./images/services-img/mouse.webp">
                        </div>
                        <h5 class="text-uppercase mt-4 mb-3">Web DEVELOPment</h5>
                        <p>Creeping for female light years that lesser can't evening heaven isn't bearing tree</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-4">
                    <div class="card rounded-0 border-0 text-center py-5 px-3">
                        <div>
                            <img decoding="async" src="./images/services-img/ui-ux.webp">
                        </div>
                        <h5 class="text-uppercase mt-4 mb-3">UI/UX DESIGN</h5>
                        <p>Creeping for female light years that lesser can't evening heaven isn't bearing tree</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-4">
                    <div class="card rounded-0 border-0 text-center py-5 px-3">
                        <div>
                            <img decoding="async" src="./images/services-img/website.webp">
                        </div>
                        <h5 class="text-uppercase mt-4 mb-3">WEB DESIGN</h5>
                        <p>Creeping for female light years that lesser can't evening heaven isn't bearing tree</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-4">
                    <div class="card rounded-0 border-0 text-center py-5 px-3">
                        <div>
                            <img decoding="async" src="./images/services-img/seo.webp">
                        </div>
                        <h5 class="text-uppercase mt-4 mb-3">SEO OPTIMIZE</h5>
                        <p>Creeping for female light years that lesser can't evening heaven isn't bearing tree</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="portfolio" class="portfolio_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-left mb-md-5 mb-2">
                    <h2>QUALITY WORK <br>RECENTLY DONE PROJECT</h2>
                </div>
            </div>
            <div class="row">
                <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-one-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-one" type="button" role="tab" aria-controls="pills-one"
                            aria-selected="true">Popular</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-two-tab" data-bs-toggle="pill" data-bs-target="#pills-two"
                            type="button" role="tab" aria-controls="pills-two" aria-selected="true">Latest</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-three-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-three" type="button" role="tab" aria-controls="pills-three"
                            aria-selected="true">Upcoming</button>
                    </li>
                </ul>
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-one" role="tabpanel"
                        aria-labelledby="pills-one-tab">
                        <div class="row">
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio1.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio2.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio3.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
                        <div class="row">
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio4.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio5.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio6.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
                        <div class="row">
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio7.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio8.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                            <div class="col-lg-4 col-sm-6">
                                <div class="portfolio-img">
                                    <img decoding="async" src="./images/portfolio/portfolio9.webp" class="img-fluid w-100">
                                    <div class="overlay"> <i class="fas fa-plus"></i></div>
                                </div>
                                <h5 class="mb-0 mt-4">MINIMAL DESIGN</h5>
                                <p>Animated, portfolio</p>
                            </div>
                        </div>
                    </div>

</div>
            </div>
        </div>
    </section>

<section id="blog" class="blog_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-5">
                    <h2>BLOG</h2>
                    <p>Is give may shall likeness made yielding spirit a itself togeth created after sea <br
                            class="d-none d-lg-block">
                        is in beast beginning signs open god you're gathering ithe</p>
                </div>
                <div class="col-lg-3 col-sm-6 mb-4">
                    <div class="card rounded-0 border-0 p-0">
                        <img decoding="async" src="./images/blog/blog.webp">
                        <div class="blog_details">
                            <div class="blog_text text-center">
                                <h5 class="text-white mb-0">Social Life</h5>
                                <div class="border_line"></div>
                                <p class="text-white">Enjoy your social life together</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-4">
                    <div class="card rounded-0 border-0 p-0">
                        <img decoding="async" src="./images/blog/blog1.webp">
                        <div class="blog_details">
                            <div class="blog_text text-center">
                                <h5 class="text-white mb-0">POLITICS</h5>
                                <div class="border_line"></div>
                                <p class="text-white">Enjoy your social life together</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-4">
                    <div class="card rounded-0 border-0 p-0">
                        <img decoding="async" src="./images/blog/blog2.webp">
                        <div class="blog_details">
                            <div class="blog_text text-center">
                                <h5 class="text-white mb-0">FOOD</h5>
                                <div class="border_line"></div>
                                <p class="text-white">Enjoy your social life together</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 mb-4">
                    <div class="card rounded-0 border-0 p-0">
                        <img decoding="async" src="./images/blog/blog.webp">
                        <div class="blog_details">
                            <div class="blog_text text-center">
                                <h5 class="text-white mb-0">Social Life</h5>
                                <div class="border_line"></div>
                                <p class="text-white">Enjoy your social life together</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="footer_wrapper mt-3 mt-md-0">
        <div class="container">
            <div class="row">
                <div class="col-12 newsletter text-center px-4">
                    <div>
                        <h3 class="text-white">get update from anywhere</h3>
                        <p class="text-white">Bearing Void gathering light light his eavening unto dont afraid.</p>

<form class="row g-3 justify-content-center mt-4">
                            <div class="col col-sm-6 col-lg-4">
                                <input type="email" class="form-control" placeholder="Email address">
                            </div>
                            <div class="col col-auto">
                                <button type="submit" class="main-btn secondary-btn border-white mb-3">Get
                                    Started</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mt-5">
            <div class="row align-items-center justify-content-center">
                <div class="col-12 text-center">
                    <div class="footer-logo mb-3 mb-md-0">
                        <img decoding="async" src="images/logo.png">
                    </div>
                    <div class="my-4 social-icons">
                        <h5>Follow Me</h5>
                        <ul class="list-unstyled d-flex justify-content-center align-items-center">
                            <li><a href="#"><i class="fab fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-8 col-sm-12">
                    <p class="footer-text text-center my-2">Copyright © 2022 All rights reserved | This template
                        is made with <i class="far fa-heart"></i> by <a href="#">Code4Education</a>
                    </p>

</div>
            </div>
        </div>
    </section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>

<script src="js/main.js"></script>
</body>

</html>

CSS

/* TABLE OF CONTENTS */
/* ------------------
1. General
2. Navbar
3. Banner
4. About
5. Services
6. Portfolio
7. Blog
8. Contact
9. Footer
-------------------- */

/* 1 General */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Background Color */
    --primary-color: #4458dc;
    --secondary-color: #854fee;
    --bg-white: #fff;
    --bg-light: #faf8ff;
    --bg-black: #000;
    --bg-gray: #eee;
    --gradient: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);

/* Text Color */
    --primary-text: #4458dc;
    --secondary-text: #854fee;
    --text-white: #fff;
    --text-black: #000;
    --text-gray: #777;

/* Font Family */
    --primary-font: 'Rubik', sans-serif;
    --secondary-font: 'Roboto', sans-serif;
}

body {
    font-family: var(--secondary-font);
    width: 100%;
    background-image: url('../images/body-bg.png.webp');
    background-repeat: no-repeat;
}

a {
    text-decoration: none;
}

/* 1 Custom CSS */

::-webkit-scrollbar {
    width: 0.25rem;
}

::-webkit-scrollbar-track {
    background: var(--bg-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

section {
    padding: 5rem 0;
}

.main-btn {
    display: inline-block;
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 2.875rem;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 0.3125rem;
    box-shadow: 0 0.625rem 1.875rem rgb(118 85 225 / 30%);
    border: double 0.125rem transparent;
    padding: 0 2.0625rem;
    transition: all .3s ease-in-out;
    --webkit-transition: all .3s ease-in-out;
}

.primary-btn {
    background-image: var(--gradient);
    color: var(--text-white);
}

.primary-btn:hover {
    border-color: var(--secondary-color);
    background: var(--bg-white);
    color: var(--secondary-text);
    box-shadow: none;
}

.secondary-btn {
    background-image: var(--bg-white);
    color: var(--secondary-text);
    border-color: var(--secondary-color);
}

.secondary-btn:hover {
    background: var(--gradient);
    color: var(--text-white);
    box-shadow: none;

}

h1 {
    font-size: 4.375rem;
    line-height: 3.75rem;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom: 1.25rem;
    font-family: var(--primary-font);
}

h2 {
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 3.4375rem;
    margin-bottom: 1.5625rem;
    color: var(--text-black);
    font-family: var(--primary-font);
}

h3 {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 3.125rem;
    margin-bottom: 0.9375rem;
    color: var(--text-black);
    font-family: var(--primary-font);
    text-transform: uppercase;
}

h5 {
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 2.1875rem;
    color: var(--text-black);
}

p {
    color: var(--text-gray);
    font-size: 0.9375rem;
    line-height: 1.625rem;
    font-weight: 400;
}

/* 2 Navbar */
.header_wrapper .navbar {
    padding: 0.9375rem 0;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.header_wrapper .navbar-brand img {
    max-width: 10rem;
    height: auto;
}

.header_wrapper .navbar-toggler:focus {
    box-shadow: none;
}

.header_wrapper .nav-item {
    margin: 0 0.625rem;
}

.header_wrapper .nav-item .nav-link {
    font-family: var(--primary-font);
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-black);
    display: inline-block;
}

.header_wrapper .nav-item .nav-link.active,
.header_wrapper .nav-item .nav-link:hover {
    color: var(--primary-text);
}

.header-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-white);
    -webkit-box-shadow: 0 0.25rem 0.375rem 0 rgba(12, 0, 46, .05);
    box-shadow: 0 0.25rem 0.375rem 0 rgba(12, 0, 46, .05);
}

/* 3 Banner */
.banner_wrapper {
    padding-top: 6.875rem;
    z-index: 1;
    background-image: url('../images/home-banner.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.banner_wrapper .col-lg-7 {
    vertical-align: middle;
    align-self: center;
}

.banner_wrapper .banner-content h2::after {
    content: '';
    width: 60%;
    height: 0.125rem;
    position: absolute;
    top: 50%;
    left: 25%;
    background: var(--bg-black);
    overflow-x: hidden;
}

/* 4 About */
.about_wrapper .single-logo-item {
    width: 100%;
    height: 6.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0.0625rem solid var(--bg-gray);
    box-shadow: none;
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}

.about_wrapper .single-logo-item:hover {
    border: 0.0625rem solid transparent;
    box-shadow: 0 0.5rem 1.875rem rgb(118 85 225 / 15%);
}

.about_wrapper .client-info {
    padding: 1.5625rem 1.875rem;
    background: var(--bg-light);
    position: relative;
    margin-top: 1.5625rem;
}

.about_wrapper .client-info:before {
    content: '';
    position: absolute;
    top: -1.5625rem;
    left: -3.4375rem;
    background: url('../images/client-info.webp');
    background-repeat: no-repeat;
    height: 10.9375rem;
    width: 10.9375rem;
}

.client-info .large {
    color: var(--secondary-text);
    font-family: var(--primary-font);
    font-size: 6.25rem;
    font-weight: 700;
    position: relative;
    z-index: 9;
}

.client-info .smll {
    text-align: left;
    color: var(--text-black);
    font-family: var(--primary-font);
    font-size: 1.25rem;
    margin-left: 1.25rem;
    font-weight: 500;
}

.call-now span {
    font-size: 3.75rem;
    font-weight: 700;
    color: #000;
}

.call-now p {
    color: var(--secondary-color);
    text-transform: uppercase;
    margin-bottom: 0.3125rem;
}

/* 5 Services */
.services_wrapper .card {
    background-color: var(--bg-light);
    cursor: pointer;
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}

.services_wrapper .card:hover {
    box-shadow: 0 0.9375rem 1.875rem rgb(77 87 222 / 30%);
    background: var(--bg-white);
}

/* 6 portfolio */
.portfolio_wrapper .nav-link {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-right: 0.25rem;
    color: var(--text-black);
    text-transform: uppercase;
}

.portfolio_wrapper .nav-link.active {
    color: var(--secondary-text);
    background-color: transparent;
}

.portfolio_wrapper .portfolio-img {
    position: relative;
    cursor: pointer;
}

.portfolio_wrapper .portfolio-img .overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}

.portfolio_wrapper .portfolio-img:hover .overlay {
    background: rgba(77, 87, 222, .5);
}

.portfolio-img .overlay i {
    font-size: 6.25rem;
    color: var(--text-white);
    position: absolute;
    top: 25%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}

.portfolio_wrapper .portfolio-img:hover i {
    opacity: 1;
    visibility: visible;
    top: 50%;
    left: 50%;
}

/* 7 blog */

.blog_wrapper .card {
    position: relative;
    cursor: pointer;
}

.blog_wrapper .blog_details {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    background: rgba(34, 34, 34, .8);
    color: var(--text-white);
    transition: all .3s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog_wrapper .card:hover .blog_details {
    background: rgba(68, 88, 220, .85);
}

.blog_wrapper .blog_details .border_line {
    margin: 0.625rem 0;
    background: var(--bg-white);
    width: 100%;
    height: 0.125rem;
}

/* 8 contact */
.newsletter {
    width: 100%;
    height: 100%;
    background-image: url('../images/subscribe-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 9.375rem 0;
}

.newsletter input {
    line-height: 3rem;
    padding: 0 1.5625rem;
    border: 0.125rem solid var(--bg-white);
    background: transparent;
    font-weight: 400;
    border-radius: 0.3125rem;
    color: var(--text-white);
}

.form-control:focus {
    color: var(--text-white);
    background-color: transparent;
    border-color: var(--bg-white);
    outline: 0;
    box-shadow: none;
}

.form-control::placeholder {
    color: var(--text-white);
}

/* footer */
.footer_wrapper .footer-logo img {
    max-width: 12.5rem;
    height: auto;
}

.footer_wrapper .social-icon li {
    margin: 0.375rem;
}

.footer_wrapper .social-icons a {
    line-height: 1.875rem;
    font-size: 1.5625rem;
    display: inline-block;
    color: var(--text-black);
    text-align: center;
    margin: 0 0.625rem;
}

.footer_wrapper .social-icons a:hover {
    color: var(--primary-color);
}

.footer_wrapper .copyright-text p {
    font-size: 0.6875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.footer_wrapper .footer-text a {
    color: var(--primary-color);
}

/*Responsive Design*/

@media (max-width: 1199.5px) {
    h1 {
        font-size: 3.75rem;
    }

h2 {
        font-size: 2.1875rem;
    }

h3 {
        font-size: 1.875rem;
        line-height: 2.6875rem;
    }

h5 {
        font-size: 1.0625rem;
    }

/* blog */
    .blog_wrapper .blog_details {
        position: absolute;
        top: 0.3125rem;
        left: 0.3125rem;
        right: 0.3125rem;
        bottom: 0.3125rem;
    }
}

@media (max-width:991px) {

/* 2 Navbar */

.header-scrolled {
        height: auto;
    }

.header_wrapper .navbar-collapse {
        margin-top: -0.125rem;
    }

.header_wrapper .menu-navbar-nav {
        text-align: center;
        background-color: var(--bg-white);
        padding-bottom: 0.9375rem;
    }

.header_wrapper .nav-item .nav-link {
        margin-top: 0.9375rem;
    }
}

@media (max-width: 767px) {

/* custom css */
    section {
        padding: 5rem 0;
    }

h1 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

h2 {
        font-size: 1.875rem;
        line-height: 2.375rem;
    }

h3 {
        font-size: 1.5625rem;
        line-height: 2.1875rem;
    }

/* about */
    .client-info>div {
        justify-content: center;
    }

.about_wrapper .client-info:before {
        top: 0.25rem;
        left: 2.8125rem;
    }
}

@media (max-width: 575.5px) {

.blog_wrapper .blog_details {
        position: absolute;
        top: 2.1875rem;
        left: 2.1875rem;
        right: 2.1875rem;
        bottom: 2.1875rem;
    }
}

@media (max-width: 390px) {

/* top banner */
    .banner_wrapper .banner-content h2::after {
        left: 34%;
    }
}

Complete Responsive Portfolio Website Design Using Bootstrap 5 (Part-2).

HTML

CSS

JS

Leave a Reply Cancel reply

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)