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

April 29, 2022

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

This is part two of the websites As you already know Complete Responsive Website is the most popular in that it 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 for 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>Doctor Website Design 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="100">
    
     
    <header class="header_wrapper">
        <nav class="navbar navbar-expand-lg">
            <div class="container">
              <a class="navbar-brand" href="#">
                  <img decoding="async" src="images/logo.png" class="img-fluid" >
              </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="#team">Team</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#gallery">Gallery</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#testimonial">Testimonial</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#blog">Blog</a>
                  </li>
                  <li class="nav-item mt-3 mt-lg-0">
                    <a class="nav-link" href="#contact">Contact</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
    </header>

<section id="home" class="home">
        <div class="banner_wrapper wrapper">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 order-md-1 order-2">
                        <h3>Better Life Through</h3>
                        <h1>Better Dentistry</h1>
                        <p>Join us to a fun and friendly dental environment. Our professionals are working so hard
                            to see smile on your face that you deserve! We are dedicated about our duties.</p>
                        <a href="#" class="main-btn mt-4 fill-btn">Appointment</a>
                        <a href="#" class="main-btn mt-4 ms-3">Learn More</a>
                    </div>
                    <div class="col-md-6 order-md-2 order-1 mb-md-0 mb-5">
                        <div class="top-right-sec">
                            <div class="animate-img">
                                <img decoding="async" class="aimg1" src="./images/top-banner-img/woman-brush.png">
                                <img decoding="async" class="aimg2" src="./images/top-banner-img/doctor.png">
                            </div>
                            <img decoding="async" class="img-fluid ms-xl-5" src="./images/top-banner-img/top-right-img-1.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper pb-0">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6 mb-4">
                        <div class="card text-center">
                            <div class="icon-box">
                                <img decoding="async" src="./images/top-banner-img/Appointment-icon.png">
                            </div>
                            <div>
                                <h4>Easy Appointment</h4>
                                <p>Lorem Ipsum is simply is very dummy text of the printings and type setting</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 mb-4">
                        <div class="card text-center">
                            <div class="icon-box">
                                <img decoding="async" src="./images/top-banner-img/Emergency-icon.png">
                            </div>
                            <div>
                                <h4>Emergency Service</h4>
                                <p>Lorem Ipsum is simply is very dummy text of the printings and type setting</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 mb-4">
                        <div class="card text-center">
                            <div class="icon-box">
                                <img decoding="async" src="./images/top-banner-img/7-Service-icon.png">
                            </div>
                            <div>
                                <h4>24/7 Service</h4>
                                <p>Lorem Ipsum is simply is very dummy text of the printings and type setting</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="about_wrapper wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-mb-0 mb-5">
                    <div class="position-relative">
                        <img decoding="async" src="./images/about/about-banner1.png" class="img-fluid">
                        <img decoding="async" src="./images/about/about-img2.png" class="about-animate">
                    </div>
                </div>
                <div class="col-md-6 text-center text-md-start">
                    <h2>Welcome to a Family</h2>
                    <p>lorum luptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
                        dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p>
                    <div class="mt-5 card">
                        <div class="about-clinic">
                            <h4>500+</h4>
                            <p>Happy Patients</p>
                        </div>
                        <div class="about-clinic">
                            <h4>88+</h4>
                            <p>Qualified Doctors</p>
                        </div>
                        <div class="about-clinic">
                            <h4>25+</h4>
                            <p>Years Experience</p>
                        </div>
                        <div class="about-clinic">
                            <h4>55+</h4>
                            <p>Dental Awards</p>
                        </div>
                        <span class="line-1"></span>
                        <span class="line-2"></span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="services_wrapper wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-5">
                    <h3>Our Services</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <div class="icon-box">
                            <img decoding="async" src="./images/services/1.svg">
                        </div>
                        <div>
                            <h4>Complete Dentistry</h4>
                            <p>Lorem Ipsum is simply is very dummy text of the printings and type setting Lorem Ipsum is
                                simply is very dummy text</p>
                            <a href="#" class="main-btn mt-4">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <div class="icon-box">
                            <img decoding="async" src="./images/services/2.svg">
                        </div>
                        <div>
                            <h4>Dental Selants</h4>
                            <p>Lorem Ipsum is simply is very dummy text of the printings and type setting Lorem Ipsum is
                                simply is very dummy text</p>
                            <a href="#" class="main-btn mt-4">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <div class="icon-box">
                            <img decoding="async" src="./images/services/3.svg">
                        </div>
                        <div>
                            <h4>Dental Dictionary</h4>
                            <p>Lorem Ipsum is simply is very dummy text of the printings and type setting Lorem Ipsum is
                                simply is very dummy text</p>
                            <a href="#" class="main-btn mt-4">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <div class="icon-box">
                            <img decoding="async" src="./images/services/4.svg">
                        </div>
                        <div>
                            <h4>Dental Implants</h4>
                            <p>Lorem Ipsum is simply is very dummy text of the printings and type setting Lorem Ipsum is
                                simply is very dummy text</p>
                            <a href="#" class="main-btn mt-4">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <div class="icon-box">
                            <img decoding="async" src="./images/services/5.svg">
                        </div>
                        <div>
                            <h4>Oral Surgery</h4>
                            <p>Lorem Ipsum is simply is very dummy text of the printings and type setting Lorem Ipsum is
                                simply is very dummy text</p>
                            <a href="#" class="main-btn mt-4">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card">
                        <div class="icon-box">
                            <img decoding="async" src="./images/services/6.svg">
                        </div>
                        <div>
                            <h4>General Dentistry</h4>
                            <p>Lorem Ipsum is simply is very dummy text of the printings and type setting Lorem Ipsum is
                                simply is very dummy text</p>
                            <a href="#" class="main-btn mt-4">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="team" class="team_wrapper wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-5">
                    <h3 class="text-black">Our Dentists</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card rounded-3">
                        <div class="team-img">
                            <img decoding="async" src="./images/team/team1.png" class="img-fluid">
                        </div>
                        <div class="team-info pt-4 text-center">
                            <h5>Darry Milin</h5>
                            <p>Oral Surgeon</p>
                            <ul class="social-network">
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                                <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
                            </ul>
                        </div>

</div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card rounded-3">
                        <div class="team-img">
                            <img decoding="async" src="./images/team/team2.png" class="img-fluid">
                        </div>
                        <div class="team-info pt-4 text-center">
                            <h5>Salman Ahmed</h5>
                            <p>Oral Surgeon</p>
                            <ul class="social-network">
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                                <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
                            </ul>
                        </div>

</div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card rounded-3">
                        <div class="team-img">
                            <img decoding="async" src="./images/team/team3.png" class="img-fluid">
                        </div>
                        <div class="team-info pt-4 text-center">
                            <h5>Santa Binte</h5>
                            <p>Oral Surgeon</p>
                            <ul class="social-network">
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                                <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
                            </ul>
                        </div>

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

<section id="gallery" class="gallery_wrapper wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-5">
                    <h3>Our Gallery</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 mb-4">
                    <img decoding="async" src="./images/gallery/1.jpg" class="w-100 h-100">
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <img decoding="async" src="./images/gallery/2.jpg" class="w-100 h-100">
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <img decoding="async" src="./images/gallery/3.jpg" class="w-100 h-100">
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <img decoding="async" src="./images/gallery/5.jpg" class="w-100 h-100">
                </div>
                <div class="col-md-8 col-sm-6 mb-4">
                    <img decoding="async" src="./images/gallery/4.jpg" class="w-100 h-100">
                </div>
            </div>
        </div>
    </section>

<section id="testimonial" class="testimonial_wrapper wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-4">
                    <h3 class="text-black">Testimonials</h3>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-xl-3 col-md-4 col-sm-6">
                    <div class="card text-center">
                        <img decoding="async" src="./images/testimonial/client1.png" class="img-fluid">
                        <h4 class="pt-4 mb-0">Aliceano Colby</h4>
                        <p>CEO of Prime IT</p> 
                    </div>
                </div>
                <div class="col-xl-9 col-md-8 col-sm-6 ps-md-4 pt-sm-0 pt-4">
                    <h4>Awesome Work</h4>
                    <p>“They really took my individual case to heart. Their team is very helpful. They all work
                        together in an impressive way to make sure that my needs were met and I walked out pain
                        free.”</p>
                </div>
            </div>
        </div>
    </section>

<section class="appointment_wrapper wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-8 col-10">
                    <h3>Request your appointment and start your smile makeover!</h3>
                    <a href="#" class="mt-5 main-btn fill-btn">Request Appointment</a>
                </div>
            </div>
        </div>
    </section>

<section id="blog" class="blog_wrapper wrapper">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-5">
                    <h3 class="text-black">Latest Blog</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card p-0 border-0 rounded-0">
                        <img decoding="async" src="./images/blog/1.jpg">
                        <div class="blog-content">
                            <h5 class="text-white mb-4">Dental Insurance with Benefits</h5>
                            <h6 class="text-white">By Admin - February 18, 2018</h6>
                            <p class="mt-2 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque,
                                nostrum.
                            </p>
                            <a href="#" class="main-btn mt-2">Read More</a>

</div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card p-0 border-0 rounded-0">
                        <img decoding="async" src="./images/blog/2.jpg">
                        <div class="blog-content">
                            <h5 class="text-white mb-4">Dental Insurance with Benefits</h5>
                            <h6 class="text-white">By Admin - February 18, 2018</h6>
                            <p class="mt-2 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque,
                                nostrum.
                            </p>
                            <a href="#" class="main-btn mt-2">Read More</a>

</div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card p-0 border-0 rounded-0">
                        <img decoding="async" src="./images/blog/3.jpg">
                        <div class="blog-content">
                            <h5 class="text-white mb-4">Dental Insurance with Benefits</h5>
                            <h6 class="text-white">By Admin - February 18, 2018</h6>
                            <p class="mt-2 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque,
                                nostrum.
                            </p>
                            <a href="#" class="main-btn mt-2">Read More</a>

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

<section id="contact" class="footer_wrapper wrapper">
        <div class="container pb-3">
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5>Clinic Location</h5>
                    <p class="ps-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim erat ut
                        laoreet
                        pharetra....</p>
                    <div class="contact-info">
                        <ul class="list-unstyled p-0">
                            <li><a href="#"><i class="fa fa-home me-3"></i> No. 96, South City, London</a></li>
                            <li><a href="#"><i class="fa fa-phone me-3"></i>+1 222 3333</a></li>
                            <li><a href="#"><i class="fa fa-envelope me-3"></i>info@example.com</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5>More Links</h5>
                    <ul class="link-widget p-0">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Our Office</a></li>
                        <li><a href="#">Delivery</a></li>
                        <li><a href="#">Our Store</a></li>
                        <li><a href="#">Guarantee</a></li>
                        <li><a href="#">Buy Gift Card</a></li>
                        <li><a href="#">Return Policy</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <h5>More Links</h5>
                    <ul class="link-widget p-0">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Our Office</a></li>
                        <li><a href="#">Delivery</a></li>
                        <li><a href="#">Our Store</a></li>
                        <li><a href="#">Guarantee</a></li>
                        <li><a href="#">Buy Gift Card</a></li>
                        <li><a href="#">Return Policy</a></li>
                    </ul>
                </div>

<div class="col-lg-3 col-md-6 mb-4">
                    <h5>Newsletter</h5>
                    <div class="form-group mb-4">
                        <input type="email" class="form-control bg-transparent" placeholder="Enter Your Email Here">
                        <button type="submit" class="main-btn rounded-2 mt-3 border-white text-white">Subscribe</button>
                    </div>
                    <h5>Stay Connected</h5>
                    <ul class="social-network d-flex align-items-center p-0 ">
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                        <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
                    </ul>
                </div>

</div>
        </div>
        <div class="container-fluid copyright-section">
            <p class="p-0">Copyright <a href="#">© CODE4EDUCATION.</a> All Rights Reserved</p>
        </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. Team
6. Gallery
7. Testimonial
8. Blog
9. Footer
-------------------- */

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

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

:root {
    /* Background Color */
    --primary-color: #004caa;
    --secondary-color: #fc5185;
    --bg-light-blue: #3672bc;
    --bg-dark: #666;
    --bg-white: #fff;

/* Text Style */
    --primary-font: 'Roboto Slab', serif;
    --secondary-font: 'Josefin Sans', sans-serif;
    --primary-text: #004caa;
    --secondary-text: #fc5185;
    --text-white: #fff;
    --text-black: #222;
    --text-gray: #666;
    --text-light: #ddd;
}

body {
    font-family: var(--primary-font);
    background-color: var(--bg-white);
}

a {
    text-decoration: none;
}

::-webkit-scrollbar {
    width: .375rem;
}

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

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

.wrapper{
    padding:6.25rem 0;
}
.main-btn{
    display: inline-block;
    border:.0625rem solid var(--bg-white);
    color:var(--text-white);
    text-align: center;
    padding:.75rem 1.375rem;
    font-size: 1rem;
    background:transparent;
    text-transform: capitalize;
    border-radius: .1875rem;
    transition:all 0.3s ease-in-out;
}
.main-btn:hover{
    background-color:var(--secondary-color);
    border-color:var(--secondary-color);
    color:var(--text-white);
}
.fill-btn{
    background-color:var(--secondary-color);
    border-color:var(--secondary-color);
    color:var(--text-white);
}
.fill-btn:hover{
    background-color:var(--bg-white);
    border-color:var(--bg-white);
    color:var(--text-black)
}
h1{
    font-size: 3.875rem;
    margin-bottom:1.25rem;
    font-weight: 600;
    color:var(--text-white);
    font-family: var(--secondary-font);
}
h2{
    font-size: 2.875rem; 
    font-weight: 600;
    color:var(--text-white);
    font-family: var(--secondary-font);
}
h3{
    font-size: 2.25rem; 
    font-weight: 600;
    color:var(--text-white);
    font-family: var(--secondary-font);
}
h4{
    font-size: 1.5rem; 
    font-weight: 600;
    line-height: 2.25rem;
    color:var(--text-black);
    font-family: var(--secondary-font);
}
h5{
    font-size: 1.5rem; 
    line-height: 1.2;
    font-weight: 500;
    color:var(--primary-text);
    margin-bottom:.9375rem;
    font-family: var(--secondary-font);
}
h6{
    font-size: .875rem; 
    font-weight: 300;
    color:var(--text-black);
    margin-bottom:.9375rem;
    text-transform: uppercase;
    font-family: var(--secondary-font);
}
p{
    font-size: 1rem;
    color:var(--text-gray);
    line-height: 1.625rem;
} 
.card{
    border-radius: .625rem;
    background-color:var(--bg-white);
    box-shadow: .5084rem 1.1419rem 2.5rem 0 rgb(0 0 0 / 8%);
    padding:3.75rem 3.125rem 4.6875rem;
    -webkit-transition:all .4s;
    transition:all .4s;
    border:0;
}
@keyframes movebounce{
    0%{
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    50%{
        -webkit-transform:translateY(1.25rem);
        transform:translateY(1.25rem);
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
}

/* 2 Navbar */ 
.header_wrapper .navbar{
    padding:.9375rem 0;
    background-color:transparent;
    transition:0.3s ease-in-out;
}
.header_wrapper .navbar-toggler,
.header_wrapper .navbar-toggler:focus{
    border:0;
    box-shadow: none;
    color:var(--text-black);
    line-height: 2;
}

.header_wrapper .nav-item{
    margin:0 .625rem;
}
.header_wrapper .nav-item .nav-link{
    font-size: 1.125rem;
    font-weight: 400;
    color:var(--primary-text);
    display:inline-block;
    font-family: var(--secondary-font);
}
.header_wrapper .nav-item .nav-link:hover,
.header_wrapper .nav-item .nav-link:focus,
.header_wrapper .nav-item .nav-link.active{
    color:var(--secondary-text);
}
.navbar.header-scrolled{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background-color:var(--bg-white);
    box-shadow: .5084rem 1.1419rem 2.5rem 0 rgb(0 0 0 / 8%);
    transition:0.3s ease-in-out;
}

/* 3 Banner */
.banner_wrapper{
    background-image:url('../images/top-banner-img/Top-banner.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.banner_wrapper p{
    max-width: 80%;
    color:var(--text-white);
}

.banner_wrapper .top-right-sec{
    position:relative;
    background-image:url('../images/top-banner-img/top-right-bg.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    display: flex;
    align-items: flex-end;
    justify-content:center;
}
.banner_wrapper .animate-img{
    position:absolute;
    bottom:0;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    z-index:22;
}
.banner_wrapper .animate-img .aimg1{
    left:-5.6875rem;
    position:absolute;
    -webkit-animation-name:movebounce;
    animation-name:movebounce;
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
.banner_wrapper .animate-img .aimg2{
    margin-left:5.5rem; 
    -webkit-animation-name:movebounce;
    animation-name:movebounce;
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.home .card:hover{
    -webkit-transform:translateY(-0.625rem);
    transform:translateY(-0.625rem);
}
.home .icon-box{
    text-align: center;
    margin: 0 auto 2.5rem;
}

/* 4 About */
.about_wrapper h2{
    color:var(--text-black);
}
.about_wrapper .card{
    width:80%;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.about_wrapper .about-clinic{
    flex:0 0 auto;
    width:50%;
}
.about_wrapper .about-clinic:nth-child(1),
.about_wrapper .about-clinic:nth-child(2){
    margin-bottom:2.8125rem;
}
.about_wrapper .about-clinic:nth-child(2),
.about_wrapper .about-clinic:nth-child(4){
    padding-left:3.75rem;
}
.about_wrapper .line-1,
.about_wrapper .line-2{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width:.0313rem;
    height:100%;
    background:var(--bg-dark);
}
.about_wrapper .line-2{
    width:100%; 
    height:.0625rem;
}
.about_wrapper .about-animate{
    position:absolute;
    left:-2.5rem;
    bottom:0;
    -webkit-animation:movebounce 3s linear infinite;
    animation:movebounce 3s linear infinite;
}
 
/* 5 Services */
.services_wrapper {
    background-color:var(--primary-color);
}
.services_wrapper .card{
    background-color:transparent;
    border:.0625rem solid var(--bg-light-blue);
    box-shadow: none;
    padding:2.5rem;
}
.services_wrapper .card:hover{
    background:var(--bg-light-blue);
    cursor:cell;
    border-color:transparent;
}
.services_wrapper .card h4,
.services_wrapper .card p{
    color:var(--text-white);
}
.services_wrapper .icon-box{
    margin-bottom:1.875rem;
}
 
/*7 Team Section */
.team_wrapper .card{
    padding:1.25rem;
}
.team_wrapper .card:hover{
    -webkit-transform:translateY(-0.625rem);
    transform:translateY(-0.625rem);
}
.team_wrapper .team-img{
    margin:0 auto;
}
.team_wrapper .team-info .social-network{
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    padding:.625rem 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.team_wrapper .team-info .social-network li a{
    width:1.5625rem;
    height:1.5625rem;
    line-height: 1.5625rem;
    display: block;
    border-radius: .3125rem;
    margin: 0 .3125rem;
    font-size: .75rem;
    background-color:var(--bg-dark);
    color:var(--text-white);
    -webkit-transition:all 0.3s ease;
    transition:all 0.3s ease;
}
.team_wrapper .team-info .social-network li a:hover{
    background-color:var(--secondary-color);
}

/*8 Gallery Section */
.gallery_wrapper{
    background-image:url('../images/gallery/gallery-background.png');
    background-repeat: no-repeat;
    background-position:center;
    background-size:cover;
}
.gallery_wrapper img{
    border-radius: .9375rem;
}

/*9 Testimonial */
.testimonial_wrapper .card{
    background-color:rgba(252, 81, 133, .05);
}

/* appointment */
.appointment_wrapper {
    background-image: url('../images/appointmnet-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/*10 blog */
.blog_wrapper .blog-content{
    background-color:var(--bg-light-blue);
    padding:2.5rem;
}

/* 11 footer */
.footer_wrapper{
    background-color:var(--primary-color);
    padding-bottom:0;
}
.footer_wrapper h5{
    color:var(--text-white);
}
.footer_wrapper .contact-info ul a {
    padding:0;
}
.footer_wrapper ul li{
    margin-bottom:.5rem;
    list-style: none;
    font-size: .875rem;
}
.footer_wrapper ul li a{
    color:var(--text-white);
}
.footer_wrapper .link-widget li a,
.footer_wrapper p{
    color:var(--text-white);
    font-size: .875rem;
    padding-left:1.5rem;
    position:relative;
    -webkit-transition:all 0.3s ease-out 0s;
    transition:all 0.3s ease-out 0s;
}
.footer_wrapper .link-widget li a::before{
    content:'\f105';
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    position:absolute;
    left:0.3rem;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.footer_wrapper .link-widget li a:hover{
    margin-left:.625rem;
    color:var(--secondary-text);
}
.footer_wrapper .social-network a{
    width:2.1875rem;
    height:2.1875rem;
    margin:.5rem;
    line-height: 2rem;
    font-size: .875rem;
    display:inline-block;
    border:.125rem solid var(--bg-light-blue);
    color:var(--text-light);
    text-align: center;
    border-radius: 100%;
    -webkit-transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.footer_wrapper .social-network a:hover{
    background-color:var(--secondary-color);
    border-color:var(--secondary-color);
    color:var(--text-white);
    transform:translateY(-0.1875rem);
}
.footer_wrapper ::placeholder{
    color:var(--text-light);
}
.footer_wrapper .form-control{
    color:var(--text-light);
}
.footer_wrapper .form-control:focus{
    outline:none;
    box-shadow: none;
    border-color:var(--bg-white);
}
.footer_wrapper .copyright-section{
    background-color:var(--bg-light-blue);
    padding:2rem 0 1rem;
    text-align: center;
}
.footer_wrapper .copyright-section a{
    color:var(--text-white);
    font-weight: 600;
}

@media (max-width: 1199.5px) {

/* custom css */ 
    .card{
        padding:2.5rem 1.875rem;
    }

/* header */ 
    .header_wrapper .navbar-nav .nav-link{
        font-size: 1rem;
    }

/* top banner */ 
    .banner_wrapper .animate-img .aimg1{
        left:-3.125rem;
    }

/* about */ 
    .about_wrapper .card{
        width:100%;
    } 
    .about_wrapper .about-animate{
        left:.9375rem;
    }

/* service */ 
    .services_wrapper .card{
        padding:1.875rem 1.25rem;
    }

}

@media (max-width:991px) {

/* custom css */ 
    .wrapper{
        padding:3.125rem 0;
    }
    .main-btn{
        font-size: .875rem;
    }
    h1{
        font-size: 2.8125rem;
        margin-bottom:.625rem;
    }
    h2{
        font-size: 1.875rem; 
    }
    h3{
        font-size: 1.5625rem; 
    }
    h4{
        font-size: 1.25rem; 
    }
    h5{
        font-size: 1.125rem; 
    }
    p{
        font-size: .875rem;
        line-height: 1.35rem;
    }
    .card{
        padding:1.875rem 1rem;
    }

/* 2 Navbar */ 
    .header-scrolled{
        height:auto;
    }
    .header_wrapper .menu-navbar-nav{
        text-align: center;
    }
    .header_wrapper .nav-item .nav-link{
        margin-top:.9375rem;
    }

/* banner */ 
    .banner_wrapper p{
        max-width: 100%;
    }

/* about */ 
    .about_wrapper .about-clinic:nth-child(1),
    .about_wrapper .about-clinic:nth-child(2){
        margin-bottom:1.5625rem;
    }
    .about_wrapper .about-clinic:nth-child(2),
    .about_wrapper .about-clinic:nth-child(4){
        padding-left:2.375rem;
    }

/* services */ 
    .services_wrapper .card{
        padding:1.875rem .875rem;
    }

/* blog */ 
    .blog_wrapper .card .blog-content{
        padding:1.875rem .625rem;
    }

}

@media (max-width: 767px) {

/* custom css */ 
    .main-btn{
        font-size: .875rem;
    }
    h1{
        font-size: 2.5rem;
        margin-bottom:2.5rem;
    } 
    h5{
        font-size: 1.25rem; 
    }

/* service */ 
    .services_wrapper .card{
        text-align: center;
    }

/* blog */ 
    .blog_wrapper .card .blog-content{
        margin:0;
    }

/* footer */ 
    .footer_wrapper{ 
        padding-bottom:0;
    }
    .footer_wrapper>div{
        padding:0 1.875rem;
    }
}

@media (max-width: 360px) {

/* Services */ 
    .services_wrapper .icon-box{
        margin-bottom:.9375rem;
    }

/* about */   
    .about_wrapper .about-animate{
        width:6.875rem;
    }
    .about_wrapper .card{
        padding:1.25rem .3125rem;
    }
    .about_wrapper .about-clinic:nth-child(2),
    .about_wrapper .about-clinic:nth-child(4){
        padding-left:.625rem;
    }

}

JS

32 thoughts on “Responsive Hospital Website Design Using Bootstrap 5 (Part-2).”

Alyan says:

August 27, 2022 at 8:39 pm

where can i get images

Reply
1. Code4Education says:
  
  September 5, 2022 at 9:27 am
  
  Thanks for visit, Yes, u can get the images by visiting the youtube video, in the description box, you will get the all images link.
  
  Reply
graliontorile says:

January 16, 2023 at 12:33 pm

Some really quality posts on this internet site, saved to bookmarks.

Reply
vorbelutrioperbir says:

February 28, 2023 at 10:12 pm

Wow! This can be one particular of the most beneficial blogs We have ever arrive across on this subject. Actually Excellent. I’m also an expert in this topic therefore I can understand your effort.

Reply
https://ngtechgist.com says:

August 7, 2023 at 3:03 pm

Looking forward to reading more. Great blog article.Much thanks again. Cool.

Reply
Windows Webhosting says:

August 15, 2023 at 9:37 pm

Greetings! Very helpful advice in this particular article!It is the little changes that will make the most important changes.Thanks a lot for sharing!

Reply
rent a car in coimbatore says:

August 18, 2023 at 1:19 am

Wow, great post.Really looking forward to read more. Great.

Reply
rent dslr tripod says:

August 19, 2023 at 3:57 am

I cannot thank you enough for the blog post.Thanks Again. Great.

Reply
Herpesyl For Herpes says:

August 20, 2023 at 5:46 pm

This is my first time go to see at here and i am truly happy to read allat single place.

Reply
stainless steel flanges manufacturer in india says:

August 21, 2023 at 5:11 pm

I loved your blog post.Really thank you! Really Great.

Reply
pure whey protein says:

September 15, 2023 at 3:32 pm

I really liked your post.Really looking forward to read more. Much obliged.

Reply
la plastics says:

September 16, 2023 at 3:18 pm

Im thankful for the article.Really thank you! Keep writing.

Reply
Super p force says:

September 16, 2023 at 6:44 pm

Im thankful for the article.Really looking forward to read more. Will read on…

Reply
Lawrence Kirk says:

September 19, 2023 at 1:29 pm

I really like and appreciate your post. Really Great.

Reply
braiding hair says:

September 19, 2023 at 3:56 pm

I truly appreciate this post. Will read on…

Reply
Minoo says:

September 24, 2023 at 6:42 pm

Looking forward to reading more. Great blog article.Much thanks again. Really Cool.

Reply
ZheJiang ShengBen TRADE CO., LTD. says:

September 29, 2023 at 3:21 pm

Thanks for sharing, this is a fantastic post. Fantastic.

Reply
CRO biotech company says:

September 30, 2023 at 1:38 am

I am so grateful for your article post.Really looking forward to read more. Really Cool.

Reply
modern crystal chandelier says:

September 30, 2023 at 4:43 am

Thanks again for the blog article. Fantastic.

Reply
Rubber Shock Absorber says:

October 1, 2023 at 4:10 pm

Very neat post.Really looking forward to read more. Will read on…

Reply
Bingo Register says:

October 1, 2023 at 11:16 pm

I truly appreciate this article.Really looking forward to read more.

Reply
vapemanufactory says:

October 2, 2023 at 7:08 am

I appreciate you sharing this blog post.Much thanks again. Great.

Reply
Huazhijun chemistrylabfurniture says:

October 2, 2023 at 5:16 pm

Major thanks for the blog. Will read on…

Reply
blind flange Manufacturers in India says:

October 2, 2023 at 10:20 pm

Really informative blog.Really thank you! Want more.

Reply
John Daniel says:

October 3, 2023 at 10:24 am

What’s up, just wanted to say, I enjoyed this blog post.It was practical. Keep on posting!

Reply
Hmall says:

November 30, 2023 at 4:59 am

Very good blog post.Really thank you! Fantastic.

Reply
undress ap ai says:

December 29, 2023 at 5:16 pm

Im obliged for the article.Really thank you!

Reply
undress ia says:

December 30, 2023 at 5:37 am

Say, you got a nice blog article.Really thank you!

Reply
washing machine repair mysore says:

December 30, 2023 at 7:48 pm

Enjoyed every bit of your article.Really looking forward to read more. Will read on…

Reply
undress vip says:

January 18, 2024 at 5:53 am

Thanks again for the blog post.Much thanks again. Cool.

Reply
最強約妹 says:

January 20, 2024 at 7:06 pm

I really like and appreciate your blog.Really thank you! Really Great.

Reply
May hut am khong khi says:

January 22, 2024 at 10:13 pm

how long does ivermectin stay in your system agri mectin ivermectin

Reply