TRIBHUVAN UNIVERSITY

FACULTY OF HUMANITIES AND SOCIAL SCIENCE

KATHMANDU

PROJECT REPORT ON
COLLEGE MANAGEMENT SYSTEM

In Partial Fulfillment of the Requirements for the Degree of

Bachelor of Computer Application

SUBMITTED BY
SANTOSH KUMAR PASMAN

T.U REGISTRATION:  6-2-108-19-2018

BINOD KUMAR YADAV

T.U REGISTRATION: 2-1081-4-2018

NAVA KSHITIZ COLLEGE

BARDIBAS-14, MAHOTTARI, NEPAL

July, 2023 A.D

 TRIBHUVAN UNIVERSITY

Faculty of Humanities and Social Science

Nava Kshitiz College

Supervisor's Recommendation Letter

I hereby recommend that this project prepared under my supervision by SANTOSH

KUMAR PASMAN AND BINOD KUMAR YADAV entitled "COLLEGE
MANGEMENT SYSTETEM" in partial fulfillment of the requirements for the degree of
Bachelor of Computer Application is recommended for the final evaluation.

---------------------
Krishna Kumar Singh
Professor of BCA
Faculty of Humanities and Social Science

Bardibas-14

i
 TRIBHUVAN UNIVERSITY

Faculty of Humanities and Social Science

Nava Kshitiz College

LETTER OF APPROVAL
This is to certify that this project prepared by SANTOSH KUMAR PASMAN AND
BINOD KUMAR YADAV entitled" COLLEGE MANGEMENT SYSTEM'' in partial
fulfillment of the requirements for the degree of Bachelor in computer Application has
been evaluated. In our opinion it is satisfactory in the scope and quality as a project for he
required degree.

SIGNATURE OF SUPERVISOR SIGNATURE OF COORDINAOR

………………………………………….. …………………………………………..
Krishna Shundar Mahato Dipendra Yadav
Nava kshitiz college, Bardibas-14 Nava kshitiz college, Bardibas-14
Mahottari Mahottari

SIGNATURE OF INTERNAL SIGNATURE OF EXTERNAL

EXAMINER EXAMINER

………………………………………….. …………………………………………..
Surendra Chaudhari

ii
 ACKNOWLEDGEMENT

We feel immense pleasure to introduce “COLLEGE MAGAGEMENT SYSTEM” as our

major project.

We express our foremost and sincere gratitude to Firstly our teachers, and secondly to our
family and friends.

Primarily, we would like to express our special thanks to our teacher Mr. Krishna
Sundhar Singh who has been a constant source of knowledge and inspiration to us, and
who gave us the opportunity to do this project. Not only from this project but apart from
this subject, we have learnt a lot from them, which we are sure will be useful in different
stages in the future of our life. We would also like to express our gratitude to also our
beloved parent's frothier review and many helpful comments and enlightening us and
guiding us throughout the finalization of this project within the limited time frame. We
would also like to underscore dynamic efforts of our teamwork and our contributions
towards the preparation of this project. Last but not the least, we thank to all our teachers
and as well as friends who have given us that much strength to keep moving on forward
every time. We are greatly thankful to one and all and have no words to express our
gratitude to them

iii
 ABSTRACT

In this COLLEGE MAGAGEMENT SYSTEM project, there is a need for efficient

management of the network based system for handling customer orders.

Today we are living in the midst of the information revolution where everything from
work to leisure, communications and shopping are being revolutionized through the use
of computers and more precisely by the use of the World Wide Web and its emergent
technologies. The potential of the web is just beginning to be realized and the possibilities
are mind numbing for commerce and public, for both buyer and seller, equally startling
are the effects the web has had on all global society and the future effects still to come. In
terms of the consumer perspective traditional methods of working, retail buying,
receiving education and leisure activities may soon become secondary methods as many
innovations are providing a genuine, often more convenient alternative method to carry
out these tasks. In addition to business servicing public consumers, the way in which
businesses deal with other businesses is also changing beyond all recognition with the
web in collusion with modern IT practices facilitating business and providing competitive
advantages in all areas of the modern organization.

iv
 TABLE OF CONTENTS PAGE
Chapter 1 : Introduction 1-6
1.1. Introduction 1
1.2 .Problem Statement 2
1.3. Objectives 3
1.4. Scope and Limitation 4
1.5. Development Methodology 5
1.6. Report Organization 6
Chapter 2 : Background Study and Literature Review 7-8
2.1. Background Study 7
2.2. Literature 8
Chapter 3 : System Analysis And Design 9-17
3.1. System Analysis 10
3.2. System Design 16
Chapter 4 : Implementation And Testing 18-21
4.1. Implementation 18
4.2. Testing 20
4.3. Result Analysis 21
Chapter 5 : Conclusion And Future Recommendation 22
5.1. Conclusion 22
5.2. Future Recommendation 22
Reference 23
Appendices 24-25
Source code 26-28

v
 LIST OF FIGURE
Figure No Title page
Fig-1 Use Case Diagram 11
Fig-2 Object Diagram 13
Fig-3 Sequence Diagram 14
Fig-4 Activity Diagram 15
Fig-5 Activity Model Diagram 16
Fig-6 Component Diagram 17

vi
 CHAPTER-1 INTRODUCTION

1.1 Introduction
The "College Website" has been developed to override the problems prevailing in the
practicing manual system. This software is supported to eliminate and in some cases
reduce the hardships faced by this existing system. Moreover this system is designed for
the particular need of the company to carry out operations in a smooth and effective
manner.

The application is reduced as much as possible to avoid errors while entering the data. It
also provides error message while entering invalid data. No formal knowledge is needed
for the user to use this system. Thus by this all it proves it is user-friendly. College
Website, as described above, can lead to error free, secure, reliable and fast management
system. It can assist the user to concentrate on their other activities rather to concentrate
on the record keeping. Thus it will help organization in better utilization of resources.

Every organization, whether big or small, has challenges to overcome and managing the
information of Student, College, Course, Faculty, Fees. Every College Website has
different College needs; therefore we design exclusive employee management systems
that are adapted to your managerial requirements. This is designed to assist in strategic
planning, and will help you ensure that your organization is equipped with the right level
of information and details for your future goals. Also, for those busy executive who are
always on the go, our systems come with remote access features, which will allow you to
manage your workforce anytime, at all times. These systems will ultimately allow you to
better manage resources.

1
1.2 Problems Statement
1. Incorrect grades or missing coursework may appear on students' transcripts, affecting
their academic records. Inadequate customer experience due to manual processes and
fragmented information.
2. Website might not accurately reflect the payment status, leading to confusion about
outstanding balances. Absence of a centralized platform for effective.
3. The college management website may not be fully optimized for mobile devices,
making it challenging to use on Smartphone or tablets..
4. Limited ability to analyze business performance and make data-driven decisions.
5. Time-consuming and error-prone manual record-keeping and administrative tasks..
6. The website's search feature may not yield accurate results when students search for
courses or information

2
1.3 Objective
The main objective of the Project on College Website is to manage the details of College, Student,
Employee, Course, . It manages all the information about College, Faculty, Fees, and College.
The project is totally built at administrative end and thus only the administrator is guaranteed the
access. The purpose of the project is to build an application program to reduce the manual work
for managing the College, Student, Faculty, and Employee. It tracks all the details about the
Employee, Course.

 Provides the searching facilities based on various factors. Such as College,

Employee, Course.
 College Website also manages the Faculty details online for Course details.
 It tracks all the information of Student, Faculty, Course etc
 Manage the information of Student
 Shows the information and description of the College, Employee
 To increase efficiency of managing the College, Student
 It deals with monitoring the information and transactions of Course.
 Manage the information of College
 Editing, adding and updating of Records is improved which results in proper
resource management of College data.
 Manage the information of Course

3
1.4 Scope &Limitation

Scope

It may help collecting perfect management in details. In a very short time, the collection
will be obvious, simple and sensible. It will help a person to know the management of
passed year perfectly and vividly. It also helps in current all works relative to College
Website. It will be also reduced the cost of collecting the management & collection
procedure will go on smoothly.
Limitation

Time Constraint: The time frame given to accomplish this project was very short due to
school academic calendar and it was carried out under pressure which made the
researcher not to implement some necessary features.

Establishment Policies: Establishment policies posed a serious limitation as most staffs

are not ready to release information needed for this project work. There were lots of
information needed from the staffs of this institution to enhance the study which took
them time to release or they did not release at all for security purposes, hence the scope
was reduced.

Research material: availability of research material is a major setback to the scope of the
study.

Frequent power failure: This made the researcher append more money on fuel to ensure
sustainable power.

Financial Constraint: Insufficient fund tends to impede the efficiency of the researcher
in sourcing for the relevant materials, literature or information and in the process of data
collection (internet).

4
1.5 Development Methodology
The following are the step I used in the formation of project. To make the project easy to
understand and convenient the steps are as follow:-

System Analysis:

System analysis is the process of studying the business processes and procedures,
generally referred to as business systems, to see they can operate and whether
improvement is needed.

Investigation:

We used the following methods to gather the information

 Document sampling
 Low cost

Software Requirement specification:

A major element in building a system is the section of compatible software since the
software in the market is experiencing in geometric progression. Selected software
should be acceptable by the firm and one user as well as it should be feasible for the
system. This document gives a detailed description of the software requirement
specification. The study of requirement specification is focused specially on the
functioning of the system. It allows the developer or analyst to understand the system,
function to be carried out the performance level to be obtained and corresponding
interfaces to be established.
Technology Implemented: Apache
Server Language Used: PHP 5.3 or
newer versions Database: My SQL
5.5 or newer
User Interface: HTML, AJAX
Web Browser: Mozilla, Chrome or Internet Explorer 8(or
newer) Software: XAMPP or WAMP Server
Operating System: Windows XP or higher versions.
1.6 Report Organization

5
The report organization for the college website ensures seamless access to critical data. It
categorizes problems into user registration and login, course enrollment, grading,
communication, resource access, performance, mobile responsiveness, and security
concerns. Each section addresses specific issues such as login errors, course availability
glitches, grading inaccuracies and mobile optimization. With a well-structured layout, the
report aims to improve user experience, enhance security, and resolve technical
challenges for a more efficient college management website.

6
 CHAPTER-2 BACKGROUND & LITERATURE REVIEW

2.1 Background Study

The background study for the college website involves a comprehensive examination of
the existing system to gain insights into its functionality, usability, and effectiveness.
Firstly, user feedback and surveys will be collected from students, faculty, and staff to
identify pain points and areas for improvement. Web traffic data will be analyzed to
understand user behavior, popular pages, and bottlenecks.

A competitive analysis will be conducted to assess other college websites, identifying

design trends, features, and functionalities that can be adapted for the college's site.
Additionally, the study will focus on the latest web design practices, mobile
responsiveness, and accessibility standards to ensure an optimal user experience across
devices.

Understanding the college's specific needs and academic processes is crucial. Interviews
with stakeholders will be conducted to gather requirements and insights into
administrative workflows.

By integrating all these findings, the background study will provide a comprehensive
understanding of the college's website strengths, weaknesses, and opportunities for
enhancement. This knowledge will form the basis for the development of a robust and
user-friendly website that aligns with the college's goals, enhances communication,
facilitates academic activities, and strengthens its online presence.

7
2.2 Literature Review
The literature review for the college website explores relevant academic sources, research
papers, and articles related to web design, user experience, and college website
development. It examines the importance of user-centric design, mobile responsiveness,
and accessibility for higher education institutions. The review delves into best practices
for organizing information, enhancing navigation, and improving search functionality to
meet users' needs efficiently. Additionally, it studies the impact of a well-designed
college website on student recruitment, engagement, and overall satisfaction. The
literature review serves as a valuable foundation for developing a user-friendly and
effective college website that aligns with modern web standards and optimizes the online
experience for students, faculty, and other stakeholders.

8
 CHAPTER-3 SYSTEM ANALYSIS & DESIGN

3.1 System Analysis

System analysis is a process of gathering and interpreting facts, diagnosing problems and
the information about the College Website to recommend improvements on the system. It
is a problem solving activity that requires intensive communication between the system
users and system developers. System analysis or study is an important phase of any
system development process. The system is studied to the minutest detail and analyzed.
The system analyst plays the role of the interrogator and dwells deep into the working of
the present system. The system is viewed as a whole and the input to the system are
identified. The outputs from the organizations are traced to the various processes. System
analysis is concerned with becoming aware of the problem, identifying the relevant and
decisional variables, analyzing and synthesizing the various factors and determining an
optimal or at least a satisfactory solution or program of action. A detailed study of the
process must be made by various techniques like interviews, questionnaires etc.

3.1.1 Requirement Analysis

After gathering requirements from system owner and system users, requirements are well
analyzed for identify the each user’s role in the proposed system and witch are the
functions should have each user role. In this case Use case diagrams were used for
simplify the analysis. Using a use case diagram can clearly identify external internal user
roles and use case for each user roles.

I. Functional Requirement :
 The website should provide a clear and concise overview of the courses offered by
the college.
 Each course description should include essential details such as course name,
code, credits, and a brief outline of topics covered.
 The website should present information about the college's admissions process for
prospective students.
 Clear instructions on how to apply, admission requirements, and important
deadlines should be provided.
Contact Information and Support:
 The website should display contact information for the college, including phone
numbers, email addresses, and a physical address.
9
II. Non-Functional Requirements

Usability

The website should be easy to navigate, user-friendly, and accessible to people with
disabilities. It should have a clear and intuitive layout that allows users to find
information easily.

Performance

The website should load quickly, even with high traffic volumes. Response times for
various actions, such as submitting forms or accessing resources, should be optimized.

Scalability

The website should be able to handle increasing numbers of users, data, and traffic
without significant degradation in performance.

Security

The website should employ security measures to protect user data and prevent
unauthorized access. This includes encryption, secure login processes, and protection
against common web vulnerabilities.

Reliability

The website should be available and operational most of the time. Downtime and system
failures should be minimized, and appropriate backup and recovery mechanisms should
be in place.

Compatibility:

The website should be compatible with different web browsers, devices (e.g., desktops,
laptops, tablets, smart phones), and operating systems.

10
 Use Case Diagram

A use case diagram at its simplest is a representation of a user's interaction with the
system and depicting the specifications of a use case. A use case diagram can portray the
different types of users of a system and the various ways that they interact with the
system. This type of diagram is typically used in conjunction with the textual use case and
will often be accompanied by other types of diagrams as well.

Following figure 1 the identified use cases for salon owner in the new system. It’s simply
describes the functionalities for owner in the system. In addition to the other users of
system owner has additional use cases for system reports. Using system reports owner can
get better decisions on the salon management.

11
III. Feasibility Analysis
 User-Friendly Interface: The software should have an intuitive and easy-to-navigate
interface, ensuring that salon staff can quickly learn and use the system effectively.
 Speed and Responsiveness: The software should respond promptly to user actions and
provide quick access to information, ensuring minimal waiting time.
 Scalability: The system should be able to handle a growing number of users,
appointments, and data without significant performance degradation.
 Reliability: The software should be reliable, ensuring minimal downtime and system
failures to maintain smooth operations.

3.1.2 Feasibility Analysis

I. Technical: JavaScript, php, html, is used for backend as it is suitable for

webpage. HTML and bootstrap are used for fond end.
II. Operational: This project use simple php, javasript , HMTL, xampp sever.
III. Economic: Economic analysis is most frequently used for evaluation of the
effectiveness of the system. More commonly known as cost/benefit analysis
the procedure is to determine the benefit and saving that are expected from a
system and compare them with costs, decisions is made to design and
Implement the system.
IV. Scheduled: Upper part is estimation and lower bar is actual time taken for the
project.

12
3.1.3 Object Modeling using class and object Diagram

1. Home
2. Bloge
3. Department
4. Course
5. Contract
6. About
7. Admin

Fig -2 Use Case Diagram

13
3.1.4 Dynamic Modeling using state and sequence Diagrams

More details about use cases can be described using use case description. From these use
case description can get a clear understand about use case diagrams.

A few use case descriptions were presented here to better explain about the use cases of
owner use case diagram. These descriptions were containing overview, precondition, flow
of events and post conditions.

Figure 3: sequence diagrams

14
3.1.5 Process modeling using Activity diagram

Activity diagrams are graphical representations of workflows of stepwise activities and

actions with support for choice, iteration and concurrency. In the Unified Modeling
Language, activity diagrams are intended to model both computational and organizational
processes (i.e. workflows). Activity diagrams show the overall flow of control

Basically Activity diagram is a flow chart to represent the flow form one activity to
another activity. The activity can be described as an operation of the system. So the
control flow is drawn from one operation to another. This flow can be sequential,
branched or concurrent. Following Figure 3.4 illustrates the activity diagram for “Login”
in the system. It describe the activities of system user and system during the login.

Figure 4: Activity Diagram for System Login

15
3.2 System Design
In software engineering, an entity–relationship model (ER model) is a data model for
describing the data or information aspects of a business domain or its process
requirements, in an abstract way that lends itself to ultimately being implemented in a
database such as a relational database. The main components of ER models are entities
(things) and the relationships that can exist among them. A database is more and more
important part of the information system. Database design is achieved through data
modeling. This is a technique used for defining business requirements for a database

3.2.1 Refinement of class, object,state, sequence and Activity diagram

Following Figure B.1 is activity diagram for add new branch salon to the system. In this
scenario when user login system will check the credential and load the authorized module
for user. Then user select “SMP Settings” module form view system will load the
“Branch Salons” view. Then user able to add details for new branch and click “Save”.
Then the system add new branch salon to data base and refresh the view for show the
newly added branch salon.

Figure: 5 Activity diagram

16
3.2.2 Component diagram
Component diagrams are essentially class diagrams that focus on a system's components
that often used to model the static implementation view of a system.

Figure: 6 Activity diagram

17
 CHAPTER-4 IMPLEMENTATION & TESTING

4.1 Implementation
This chapter is a description of the activities that were carried out during the development
of the system. During this phase the results of the design phase ware taken and the system
was built accordingly. Code modules, interfaces and database tables were created and
successfully integrated.

4.1.1 Tools used

Hardware and software configuration for the implementation environment is as follows:

 Software Requirements
 Microsoft Windows 7 or above operating system
 Xampp v.3.30
 Hardware Requirements
 Intel Core i3 or above Processor
 4Gb above Physical Memory for better perform
 250GB above HDD
 Google chrome
 Visual studio

18
4.1.2 Implementation details of Modules

 College Management Module: Used for managing the College details.

 Faculty Module : Used for managing the details of Faculty
 Student Management Module: Used for managing the information and details of
the Student.
 Course Module : Used for managing the Course information
 Login Module: Used for managing the login details
 Users Module : Used for managing the users of the system

19
4.2 Testing
Testing is asset of activities that can be planned in advanced and conducted
systematically. For this reason a template for software testing a set into which we can
specific test case design techniques and testing methods should be defined for the
software process. A strategy for software testing must accommodate low-level test that
are necessary to verify that a small source code segment can be correctly implemented as
well as high – level tests that validate major system functions against customer
requirements.

4.2.1 Testing cases for Unit Testing

a. Configuration Testing:
Testing to determine how well the product works with a broad of the hardware/peripheral
equipment configurations as on the different operating systems and software.

b. Installation Testing:
Testing with the intent of determining if the product will install on a variety of
platforms and how easily it installs .

20
4.2.2 Test cases for system Testing
a. Compatibility Testing:
Testing used to determine whether other system software components such as browsers,
utilities and competing software would conflict with the software being tested.

b. Functional Testing:
Testing two or more modules together with the intent of finding defects, demonstrating
that defects are not present, verifying that the modules performs its intended functions as
stated in the specification and establishing confidence that a program does what it is
supposed do.

4.2.2 Result Analysis

The Beauty parlor management system software has delivered positive outcomes,
including increased efficiency, enhanced customer experience, improved financial
management, and streamlined inventory control, data-driven decision-making and
increased productivity. These benefits have contributed to the growth and success of
beauty parlors, providing optimized operations, satisfied customers, better financial.

21
 CHAPTER-5 CONCLUSION & FUTURE
RECOMMENDATION

5.1 Conclusion
From start to end of this project, was prototyped to the client to ensure that his
requirement has been fulfilled by the implementation of system in each phase. This
constant checking with the client is assured that the developed system met the
requirements of business that were identified in requirement analysis phase and client
requested.

By user reviewing the functional and non-functional requirements that discovered during
the analysis phase and checking back with the functionalities implemented in the
developed system, it can be said that all the requirements of the user have been satisfied.

The simple user interfaces that was designed and developed are easy to learn and use
proved to be satisfactory for the user.

5.2 Future Recommendation

Enhance the features of the system In a nutshell, it can be summarized that the future
scope of the project circles around maintaining information regarding:
 We can add printer in future.
 We can give more advance software for College Website including more facilities
 We will host the platform on online servers to make it accessible worldwide
 Integrate multiple load balancers to distribute the loads of the system
 Create the master and slave database structure to reduce the overload of the
database queries
 Implement the backup mechanism for taking backup of codebase and database on
regular basis on different servers

22
 Reference
 http://www.javaworld.com/javaworld/jw-01-1998/jw-01-
 http://www.jdbc-tutorial.com/
 https://www.tutorialspoint.com/
 http://www.javatpoint.com/java-tutorial
 https://docs.oracle.com/javase/tutorial/
 http://www.wampserver.com/en/
 http://www.tutorialspoint.com/mysql/
 httpd.apache.org/docs/2.0/misc/tutorials.html

23
 Appendices
Screenshot

24
25
Source code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Shop Homepage - Start Bootstrap Template</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-
icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#!">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-
bs-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 me-auto mb-2 mb-lg-0 ms-lg-4">
<li class="nav-item"><a class="nav-link active" aria-current="page"
href="#!">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#!">About</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#"
role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">All Products</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#!">Popular Items</a></li>
<li><a class="dropdown-item" href="#!">New Arrivals</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<button class="btn btn-outline-dark" type="submit">
<i class="bi-cart-fill me-1"></i>
Cart
<span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
</button>

26
 </form>
</div>
</div>
</nav>
<!-- Header-->
<header class="bg-dark py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="text-center text-white">
<h1 class="display-4 fw-bolder">Shop in style</h1>
<p class="lead fw-normal text-white-50 mb-0">With this shop hompeage
template</p>
</div>
</div>
</header>
<!-- Section-->
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-
content-center">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top"
src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price-->
$40.00 - $80.00
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto"
href="#">View options</a></div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top:
0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top"
src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">

27
 <div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Special Item</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-
2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="text-muted
text-decoration-line-through">$20.00</span>
$18.00
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto"
href="#">Add to cart</a></div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top:
0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top"
src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Sale Item</h5>
<!-- Product price-->
<span class="text-muted
text-decoration-line-through">$50.00</span>
$25.00
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto"
href="#">Add to cart</a></div>
</div>
</div>

28
 </div>
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top"
src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Popular Item</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-
2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
$40.00
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto"
href="#">Add to cart</a></div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top:
0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top"
src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Sale Item</h5>
<!-- Product price-->
<span class="text-muted
text-decoration-line-through">$50.00</span>
$25.00
</div>
</div>

29
 <!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto"
<!-- Bootstrap core JS-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>

30