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.
home.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOME</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
background-image: url("back.webp");
background-size: cover;
background-repeat: no-repeat;
font-size: 19px;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: hsl(176, 70%, 44%);
color: white;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">AI PHARMACEUTICALS</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="home.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>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<h1>WELCOME TO AI PHARMACEUTICAL</h1>
<p>Welcome to AI Pharmaceuticals.We provide you the best quality of Medicines.Customers well being is what we wish always.</p>
<p>At Our Pharmaceuticals, we provide you all kind of medicines.</p>
<p>Thank you for choosing and trusting AI Pharmaceuticals.</p>
</div>
<div class="col-md-5">
<img src="pharmacy 1.png" class="img-fluid" alt="Pharmacy Image" width="2000" height="2000">
</div>
<div class="col-md-4">
<img src="medi.png" class="img-fluid" alt="Pharmacy Image" width="2000" height="2000">
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-4 mt-5">
<p>© 2024 PharmaCompany - DHINESH R (212223220019). All rights reserved.</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/popper.js@1.16.1/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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
background-image: url("back.webp");
background-size: cover;
background-repeat: no-repeat;
font-size: 19px;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #343a40;
color: white;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">AI PHARMACEUTICAL</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="home.html">Home</a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="about.html" id="navbarDropdownAbout" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownAbout">
<a class="dropdown-item" href="#vision">Vision</a>
<a class="dropdown-item" href="#mission">Mission</a>
<a class="dropdown-item" href="#values">Values</a>
<!-- Add more subheadings as needed -->
</div>
</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</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h1>About AI PHARMACEUTICALS</h1>
<div id="vision">
<h2>Vision</h2>
<p>Our vision is to become a global leader in providing groundbreaking healthcare solutions that enhance the well-being of individuals worldwide. We aspire to pioneer innovations that redefine healthcare standards, empowering people to lead healthier, more fulfilling lives.</p>
</div>
<div id="mission">
<h2>Mission</h2>
<p>Our mission is to develop and deliver a comprehensive range of safe, effective, and affordable healthcare solutions that cater to the diverse needs of our customers. Through relentless dedication to research, development, and collaboration, we aim to address unmet medical needs and contribute positively to the health and vitality of communities globally.</p>
</div>
<div id="values">
<h2>Values</h2>
<p>Quality lies at the core of everything we do, as we uphold the highest standards of excellence in all aspects of our operations. Integrity forms the foundation of our business practices, guiding us to conduct ourselves with unwavering honesty, transparency, and ethical conduct. Innovation fuels our quest for progress, driving us to continually push boundaries and improve our products and services to better serve our customers. With a relentless focus on customer needs, we strive to understand and anticipate their requirements, ensuring their satisfaction and trust. Through teamwork and collaboration, we harness the collective talents and strengths of our diverse workforce to achieve our shared objectives and deliver exceptional results that make a meaningful difference in the lives of individuals and communities.
</p>
</div>
<!-- Add more subheadings as needed -->
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-4 mt-5">
<p>© 2024 PharmaCompany - DHINESH R(212223220019) All rights reserved.</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/popper.js@1.16.1/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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
background-image: url("back.webp");
background-size: cover;
background-repeat: no-repeat;
font-size: 10px;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #343a40;
color: white;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">AI PHARMACEUTICALS</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="home.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">
<div class="row">
<div class="col-md-12">
<h1>Our Products</h1>
<div class="card-deck">
<div class="card">
<img src="kasthuri.png" class="card-img-top" alt="Product 1">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">Pankajakasthuri Cough Syrup with Tulsi 100ml</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
<div class="card">
<img src="pankaja.png" class="card-img-top" alt="Product 2">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">Health Veda Organics Natural Immunity Booster Capsules for Men & Women I Immunity blend of Amla, Giloy, Tulsi, Neem & Ashwagandha I 60 Veg Capsules</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
<div class="card">
<img src="herbal.png" class="card-img-top" alt="Product 3">
<div class="card-body">
<h5 class="card-title">Product 3</h5>
<p class="card-text">Amway Tulsi Tablet Supports Immunity 60N (Tablets) for Immunity</p>
<a href="#" class="btn btn-primary">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-4 mt-5">
<p>© 2024 PharmaCompany - VARSHA A(212223220121). All rights reserved.</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/popper.js@1.16.1/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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
background-image: url("back.webp");
background-size: cover;
background-repeat: no-repeat;
font-size: 19px;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: hsl(73, 87%, 48%);
color: white;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">AI PHARMACEUTICAL</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="home.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 queries please fill the form given below.</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="5" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-4">
<h2>AI PHARMACEUTICAL</h2>
<address>
<strong>Address:</strong><br>
near college street,chennai<br>
<br>
<strong>Email:</strong><br>
ai.pharma@gmail.com<br><br>
<strong>Phone:</strong><br>
+91-8564564564
</address>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-4 mt-5">
<p>© 2024 PharmaCompany - DHINESH R(212223220019) All rights reserved.</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/popper.js@1.16.1/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.