To design a responsive website for a Pharmaceutical Company using Bootstrap.
Clone the repository from GitHub.
Create Django Admin project.
Create a New App under the Django Admin project.
Insert the necessary CSS and JavaScript files as external in order to use Bootstrap.
Create a HTML file and include the needed Bootstrap components.
Publish the website in the LocalHost.
<!doctype html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/favicon.png" type="image/png">
<title>Medcare Medical</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendors/animate-css/animate.css">
<!-- main css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header class="header_area">
<div class="top_menu row m0">
<div class="container">
<div class="float-left">
<a class="dn_btn" href="mailto:[email protected]"><i class="ti-email"></i>[email protected]</a>
<span class="dn_btn"> <i class="ti-location-pin"></i>Find our Location</span>
</div>
<div class="float-right">
<ul class="list header_social">
<li><a href="#"><i class="ti-facebook"></i></a></li>
<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
<li><a href="#"><i class="ti-linkedin"></i></a></li>
<li><a href="#"><i class="ti-skype"></i></a></li>
<li><a href="#"><i class="ti-vimeo-alt"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="index-2.html"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto">
<li class="nav-item"><a class="nav-link" href="index-2.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="department.html">Department</a></li>
<li class="nav-item"><a class="nav-link" href="doctors.html">Doctors</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="single-blog.html">Blog Details</a></li>
<li class="nav-item"><a class="nav-link" href="element.html">element</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<section class="banner-area d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 col-xl-5">
<h1>Making Health<br>
Care Better Together</h1>
<p>Also you dry creeping beast multiply fourth abundantly our itsel signs bring our. Won form living. Whose dry you seasons divide given gathering great in whose you'll greater let livein form beast sinthete
better together these place absolute right.</p>
<a href="#" class="main_btn">Make an Appointment</a>
<a href="#" class="main_btn_light">View Department</a>
</div>
</div>
</div>
</section>
<section class="feature-section">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card card-feature text-center text-lg-left">
<h3 class="card-feature__title"><span class="card-feature__icon">
<i class="ti-layers"></i>
</span>Primary Care</h3>
<p class="card-feature__subtitle">An so vulgar to on points wanted rapture ous resolving continued household </p>
</div>
</div>
<div class="col-md-4">
<div class="card card-feature text-center text-lg-left">
<h3 class="card-feature__title"><span class="card-feature__icon">
<i class="ti-heart-broken"></i>
</span>Emergency Cases</h3>
<p class="card-feature__subtitle">An so vulgar to on points wanted rapture ous resolving continued household </p>
</div>
</div>
<div class="col-md-4">
<div class="card card-feature text-center text-lg-left">
<h3 class="card-feature__title"><span class="card-feature__icon">
<i class="ti-headphone-alt"></i>
</span>Online Appointment</h3>
<p class="card-feature__subtitle">An so vulgar to on points wanted rapture ous resolving continued household </p>
</div>
</div>
</div>
</div>
</section>
<div class="service-area area-padding-top">
<div class="container">
<div class="area-heading row">
<div class="col-md-5 col-xl-4">
<h3>Awesome<br>
Health Service</h3>
</div>
<div class="col-md-7 col-xl-8">
<p>Land meat winged called subdue without very light in all years sea appear midst forth image him third there set. Land meat winged called subdue without very light in all years sea appear</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card-service text-center text-lg-left mb-4 mb-lg-0">
<span class="card-service__icon">
<i class="flaticon-brain"></i>
</span>
<h3 class="card-service__title">Neurology Service</h3>
<p class="card-service__subtitle">Land meat winged called subdue without a very light in all years sea appear Lesser bring fly first land set female best perform.</p>
<a class="card-service__link" href="#">Learn More</a>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card-service text-center text-lg-left mb-4 mb-lg-0">
<span class="card-service__icon">
<i class="flaticon-tooth"></i>
</span>
<h3 class="card-service__title">Dental Clinic</h3>
<p class="card-service__subtitle">Land meat winged called subdue without a very light in all years sea appear Lesser bring fly first land set female best perform</p>
<a class="card-service__link" href="#">Learn More</a>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card-service text-center text-lg-left mb-4 mb-lg-0">
<span class="card-service__icon">
<i class="flaticon-face"></i>
</span>
<h3 class="card-service__title">Plastic Surgery</h3>
<p class="card-service__subtitle">Land meat winged called subdue without a very light in all years sea appear Lesser bring fly first land set female best perform</p>
<a class="card-service__link" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<section class="about-area">
<div class="container">
<div class="row align-items-center">
<div class="col-md-10 offset-md-1 col-lg-6 offset-lg-6 offset-xl-7 col-xl-5">
<div class="about-content">
<h4>Second Abundantly<br>
Move That Cattle Perform<br>
Appen Land</h4>
<h6>Give their their without moving were stars called so divide in female be moving night may fish him</h6>
<p>Give their their without moving were stars called so divide female be moving night may fish him own male vreated great Give their their without moving were. Stars called so divide female moving night may fish him own male created great opportunity deal.</p>
<a class="link_one" href="#">learn more</a>
</div>
</div>
</div>
</div>
</section>
<section class="team-area area-padding">
<div class="container">
<div class="area-heading row">
<div class="col-md-5 col-xl-4">
<h3>Medcare<br>
Experience Doctors</h3>
</div>
<div class="col-md-7 col-xl-8">
<p>Land meat winged called subdue without very light in all years sea appear midst forth image him third there set. Land meat winged called subdue without very light in all years sea appear</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card card-team">
<img class="card-img rounded-0" src="img/team/1.jpg" alt="">
<div class="card-team__body text-center">
<h3><a href="#">Dr Adam Brain</a></h3>
<p>Cardiologist</p>
<div class="team-footer d-flex justify-content-between">
<a class="dn_btn" href="#"><i class="ti-mobile"></i>+7 235 365 2365</a>
<ul class="card-team__social">
<li><a href="#"><i class="ti-facebook"></i></a></li>
<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
<li><a href="#"><i class="ti-instagram"></i></a></li>
<li><a href="#"><i class="ti-skype"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card card-team">
<img class="card-img rounded-0" src="img/team/2.jpg" alt="">
<div class="card-team__body text-center">
<h3><a href="#">Dr Blian Judge</a></h3>
<p>Cardiologist</p>
<div class="team-footer d-flex justify-content-between">
<a class="dn_btn" href="#"><i class="ti-mobile"></i>+7 235 365 2365</a>
<ul class="card-team__social">
<li><a href="#"><i class="ti-facebook"></i></a></li>
<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
<li><a href="#"><i class="ti-instagram"></i></a></li>
<li><a href="#"><i class="ti-skype"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card card-team">
<img class="card-img rounded-0" src="img/team/3.jpg" alt="">
<div class="card-team__body text-center">
<h3><a href="#">Dr Blian Judge</a></h3>
<p>Cardiologist</p>
<div class="team-footer d-flex justify-content-between">
<a class="dn_btn" href="#"><i class="ti-mobile"></i>+7 235 365 2365</a>
<ul class="card-team__social">
<li><a href="#"><i class="ti-facebook"></i></a></li>
<li><a href="#"><i class="ti-twitter-alt"></i></a></li>
<li><a href="#"><i class="ti-instagram"></i></a></li>
<li><a href="#"><i class="ti-skype"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="appointment-area">
<div class="container">
<div class="appointment-inner">
<div class="row">
<div class="col-sm-12 col-lg-5 offset-lg-1">
<h3>Have Some Questions?</h3>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
God male gathering them it female which green cattle?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Great day without sixth a lesser beginning. Their thing abundantly air moving saw fruitful lesser god. Sea abundantly blessed life set. Land. Lights divided man in deep in open upon.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Moving creepeth moved upon man grass two days?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Great day without sixth a lesser beginning. Their thing abundantly air moving saw fruitful lesser god. Sea abundantly blessed life set. Land. Lights divided man in deep in open upon.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
God male gathering them it female which green cattle?
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Great day without sixth a lesser beginning. Their thing abundantly air moving saw fruitful lesser god. Sea abundantly blessed life set. Land. Lights divided man in deep in open upon.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Saw isn't likeness beginning yielding land days she?
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">
Great day without sixth a lesser beginning. Their thing abundantly air moving saw fruitful lesser god. Sea abundantly blessed life set. Land. Lights divided man in deep in open upon.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Saw isn't likeness beginning yielding land days she?
</button>
</h5>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
Great day without sixth a lesser beginning. Their thing abundantly air moving saw fruitful lesser god. Sea abundantly blessed life set. Land. Lights divided man in deep in open upon.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="appointment-form">
<h3>Make an Appointment</h3>
<form action="#">
<div class="form-group">
<label>Full Name</label>
<input type="text" placeholder="Your Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Name'" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" placeholder="Your Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email'" required>
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="20" rows="7" placeholder="Message" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Message'" required></textarea>
</div>
<a href="#" class="main_btn">Make an Appointment</a>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="testimonial">
<div class="container">
<div class="testi_slider owl-carousel owl-theme">
<div class="item">
<div class="testi_item">
<div class="testimonial_image">
<img src="img/elements/tes1.jpg" alt="">
</div>
<div class="testi_item_content">
<p>
“ Saw kind fruitful itself in man. All in life good wherein beginning their he air That, the saw very years created for seed have without. Can't him fowl his can not ready for game”
</p>
<h4>- Dr. Suzanne Holroyd -</h4>
</div>
</div>
</div>
<div class="item">
<div class="testi_item">
<div class="testimonial_image">
<img src="img/elements/tes1.jpg" alt="">
</div>
<div class="testi_item_content">
<p>
“ Saw kind fruitful itself in man. All in life good wherein beginning their he air That, the saw very years created for seed have without. Can't him fowl his can not ready for game”
</p>
<h4>- Dr. Suzanne Holroyd -</h4>
</div>
</div>
</div>
<div class="item">
<div class="testi_item">
<div class="testimonial_image">
<img src="img/elements/tes1.jpg" alt="">
</div>
<div class="testi_item_content">
<p>
“ Saw kind fruitful itself in man. All in life good wherein beginning their he air That, the saw very years created for seed have without. Can't him fowl his can not ready for game”
</p>
<h4>- Dr. Suzanne Holroyd -</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hotline-area text-center area-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Emergency hotline</h2>
<span>(+01) – 256 567 550</span>
<p class="pt-3">We provide 24/7 customer support. Please feel free to contact us <br>for emergency case.</p>
</div>
</div>
</div>
</section>
<section class="blog-area area-padding">
<div class="container">
<div class="area-heading row">
<div class="col-md-5 col-xl-4">
<h3>Get Every<br>
Single Update Here</h3>
</div>
<div class="col-md-7 col-xl-8">
<p>Land meat winged called subdue without very light in all years sea appear midst forth image him third there set. Land meat winged called subdue without very light in all years sea appear</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-md-4">
<div class="single-blog">
<div class="thumb">
<img class="img-fluid" src="img/blog/1.jpg" alt="">
</div>
<div class="short_details">
<div class="meta-top d-flex">
<a href="#">medical, </a>
<a href="#">dental, </a>
<a href="#">health</a>
</div>
<a class="d-block" href="single-blog.html">
<h4>Hath is gathering from hath greate gan
man lights evening man.</h4>
</a>
<div class="meta-bottom d-flex">
<a href="#"><i class="ti-comments"></i>08 comment</a>
<a href="#"><i class="ti-heart"></i> 0 like</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-md-4">
<div class="single-blog">
<div class="thumb">
<img class="img-fluid" src="img/blog/2.jpg" alt="">
</div>
<div class="short_details">
<div class="meta-top d-flex">
<a href="#">medical, </a>
<a href="#">dental, </a>
<a href="#">health</a>
</div>
<a class="d-block" href="single-blog.html">
<h4>Also good after there saying don third
you be careful every man</h4>
</a>
<div class="meta-bottom d-flex">
<a href="#"><i class="ti-comments"></i>05 comment</a>
<a href="#"><i class="ti-heart"></i> 0 like</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-md-4">
<div class="single-blog">
<div class="thumb">
<img class="img-fluid" src="img/blog/3.jpg" alt="">
</div>
<div class="short_details">
<div class="meta-top d-flex">
<a href="#">medical, </a>
<a href="#">dental, </a>
<a href="#">health</a>
</div>
<a class="d-block" href="single-blog.html">
<h4>Also good after there saying don third
you be careful every man</h4>
</a>
<div class="meta-bottom d-flex">
<a href="#"><i class="ti-comments"></i>05 comment</a>
<a href="#"><i class="ti-heart"></i> 0 like</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================ End Blog Area =================-->
<!--================ Start Brands Area =================-->
<section class="brands-area background_one">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="owl-carousel brand-carousel">
<!-- single-brand -->
<div class="single-brand-item d-table">
<div class="d-table-cell">
<img src="img/brand/1.png" alt="">
</div>
</div>
<!-- single-brand -->
<div class="single-brand-item d-table">
<div class="d-table-cell">
<img src="img/brand/2.png" alt="">
</div>
</div>
<!-- single-brand -->
<div class="single-brand-item d-table">
<div class="d-table-cell">
<img src="img/brand/3.png" alt="">
</div>
</div>
<!-- single-brand -->
<div class="single-brand-item d-table">
<div class="d-table-cell">
<img src="img/brand/4.png" alt="">
</div>
</div>
<!-- single-brand -->
<div class="single-brand-item d-table">
<div class="d-table-cell">
<img src="img/brand/5.png" alt="">
</div>
</div>
<!-- single-brand -->
<div class="single-brand-item d-table">
<div class="d-table-cell">
<img src="img/brand/3.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-area area-padding-top">
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-6 single-footer-widget">
<h4>Top Products</h4>
<ul>
<li><a href="#">Managed Website</a></li>
<li><a href="#">Manage Reputation</a></li>
<li><a href="#">Power Tools</a></li>
<li><a href="#">Marketing Service</a></li>
</ul>
</div>
<div class="col-lg-2 col-sm-6 single-footer-widget">
<h4>Quick Links</h4>
<ul>
<li><a href="#">Jobs</a></li>
<li><a href="#">Brand Assets</a></li>
<li><a href="#">Investor Relations</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</div>
<div class="col-lg-2 col-sm-6 single-footer-widget">
<h4>Features</h4>
<ul>
<li><a href="#">Jobs</a></li>
<li><a href="#">Brand Assets</a></li>
<li><a href="#">Investor Relations</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</div>
<div class="col-lg-2 col-sm-6 single-footer-widget">
<h4>Resources</h4>
<ul>
<li><a href="#">Guides</a></li>
<li><a href="#">Research</a></li>
<li><a href="#">Experts</a></li>
<li><a href="#">Agencies</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-6 single-footer-widget">
<h4>Newsletter</h4>
<p>You can trust us. we only send promo offers,</p>
<div class="form-wrap" id="mc_embed_signup">
<form target="_blank" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&id=92a4423d01"
method="get" class="form-inline">
<input class="form-control" name="EMAIL" placeholder="Your Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email Address'"
required="" type="email" />
<button class="click-btn btn btn-default">
<i class="ti-arrow-right"></i>
</button>
<div style="position: absolute; left: -5000px;">
<input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text" />
</div>
<div class="info"></div>
</form>
</div>
</div>
</div>
<div class="row footer-bottom d-flex justify-content-between">
<p class="col-lg-8 col-sm-12 footer-text m-0">
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com/" target="_blank">Colorlib</a>
</p>
<div class="col-lg-4 col-sm-12 footer-social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
</footer>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="js/contact.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
The Project for responsive web design using Bootstrap is completed successfully.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent