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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - sivapharmcy</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.navbar {
background-color: #624392; /* Change header color to green */
}
body {
background-color: rgb(108, 31, 55);
}
footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #343a40; /* Change footer color to dark */
color: rgb(10, 119, 122); /* Change text color to white */
padding: 10px 0;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">sivapharmcy</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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="web.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<h1>Welcome to sivapharmacy</h1>
<p>Welcome to sivapharmacy, your trusted source for high-quality pharmaceutical products. We are dedicated to improving the health and well-being of our customers by providing safe and effective medications.</p>
<p>At sivapharmacy, we offer a wide range of prescription and over-the-counter medications to meet your healthcare needs. Whether you're managing a chronic condition or simply looking for relief from minor ailments, we have the products you need.</p>
<p>In addition to medications, we also carry a variety of healthcare products and accessories, including vitamins, supplements, first aid supplies, and more. Our knowledgeable staff is here to assist you with any questions you may have and to ensure you find the right products for your needs.</p>
<p>Thank you for choosing sivapharmacy for your healthcare needs. We look forward to serving you and helping you live a healthier life.</p>
</div>
<div class="col-md-4">
<img src=" istockphoto-1384341230-612x612.jpg" class="img-fluid" alt="Pharmacy Image">
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white text-center">
<div class="container">
<p>© 2024 sivaPharmacy. All rights reserved. BY sivaragul.m(212221040155)</p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
## ABOUT.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About sivaPharmacy</title>
<title>Products - PharmaCompany</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: aquamarine;
}
.content {
flex: 1;
}
footer {
background-color: #343a40; /* Dark background color */
color: white; /* Text color */
text-align: center;
padding: 20px 0;
width: 100%;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">sivaPharmacy</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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="web.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Over-the-counter (OTC) Medications</a>
<a class="dropdown-item" href="#">Prescription Drugs</a>
<a class="dropdown-item" href="#">Vaccines</a>
<a class="dropdown-item" href="#">Supplements</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container mt-5 content">
<div class="row">
<div class="col-md-12">
<h1>About sivaPharmacy</h1>
<div id="vision">
<h2>Vision</h2>
<p>Our vision is to be a leading provider of innovative healthcare solutions that improve the quality of life for people around the world.</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2024 sivaPharmacy. All rights reserved. BY sivaragul.m(212221040155)</p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
## CONTACT.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - sivaPharmacy</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: rgb(160, 152, 69);
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">sivaPharmacy</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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="web.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html">Products</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<h1>Contact Us</h1>
<p>For any inquiries or feedback, please fill out the form below and we will get back to you as soon as possible.</p>
<form>
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Your Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows=3" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-4">
<h2>sivaPharmacy</h2>
<address>
<strong>Address:</strong><br>
Nadu Theru <br>
India, 517325<br><br>
<strong>Email:</strong><br>
[email protected]<br><br>
<strong>Phone:</strong><br>
+91 12xxxxxxxx
</address>
</div>
</div>
</div>
<body background="https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcm0zNzNiYXRjaDE1LTIxNy0wMS5qcGc.jpg" style="background-repeat: no-repeat; background-size: cover;">
<footer class="bg-dark text-white text-center py-4 mt-5">
<p>© 2024 sivaPharmacy. All rights reserved. BY sivaragul.m(212221040155)</p>
</footer>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
product.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products - sivaPharmacy</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
background-color: rgb(239, 21, 191);
background-size: cover;
}
.content {
flex: 1;
}
footer {
background-color: rgba(0, 0, 0, 0.8); /* Dark background color with opacity */
color: white; /* Text color */
text-align: center;
padding: 20px 0;
width: 100%;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">sivaPharmacy</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="navbar-toggler-icon"></span>
</button>
\ <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="web.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="product.html">Products <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container mt-5 content">
<div class="row">
<div class="col-md-12">
<h1>Our Products</h1>
<div class="card-deck">
<div class="card">
<img src="download.jpeg" class="card-img-top" alt="Product 1" width="200" height="200">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">Mallow beauty balm,Marshmallow [100% organic]-Rs.99</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
<div class="card">
<img src="download (2).jpeg" class="card-img-top" alt="Product 2" width="200" height="200">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">Rose Mary hair kit shampoo (250ml) conditioner (250ml) Essential oil- Rs.1,499 </p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
<div class="card">
<img src="download (1).jpeg" class="card-img-top" alt="Product 3" width="200" height="200">
<div class="card-body">
<h5 class="card-title">Product 3</h5>
<p class="card-text">Theriveco 10% Niacinamide + 1% Zinc Pca serum | 30ml Rs.499.00</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2024 sivaPharmacy. All rights reserved. BY sivaragul.m(212221040155)</p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.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