PR Intern Report

INTERNSHIP REPORT
A report submitted in partial fulfilment of the requirements for the Award of Degree of
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE ENGINEERING
By
Prashansa Dhole
Roll No.: 21115902
Branch: CSE
Semester: 5th
Company: Tosscall Service India Pvt. Ltd.
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

NATIONAL INSTITUTE OF TECHNOLOGY, RAIPUR
(AN INSTITUTE OF NATIONAL IMPORTANCE)
RAIPUR, CHHATTISGARH 2021-2025

Acknowledgment:
I would like to take this opportunity to express my sincere gratitude

to Tosscall Company private limited for granting me the chance to
undertake my internship with them. It has been an incredibly
enriching experience that has provided me with invaluable insights
into the industry. I am truly thankful for the warm welcome and
continuous support extended by the entire team. Additionally, I
would like to extend my heartfelt thanks to the Training and
Placement Cell of the Computer Science department for their
invaluable guidance and assistance throughout this internship.
Their insights and advice have played a significant role in shaping
my experience, and I am truly appreciative of their support.
Throughout my internship, I had the privilege of working on a

diverse range of projects, allowing me to utilize a variety of tools
and technologies. This hands-on experience has significantly
enhanced my technical skills and provided me with a deeper
understanding of industry best practices. In particular, the
exposure to frontend development has been instrumental in
broadening my skill set. Working with cutting-edge technologies
has given me a practical perspective on web development that I
know will be immensely beneficial in my future endeavors.
Once again, I extend my heartfelt thanks to everyone at Tosscall

for their guidance and mentorship. This internship has
undoubtedly been a pivotal point in my career, and I am eager to
apply the knowledge gained in my future pursuits. Thank you for
this wonderful opportunity.
INDEX
S.no CONTENTS Pg.no
1. Introduction 1
1.1 Modules 2
2. Analysis 3
2.1 Requirement analysis 4
3. System requirements specifications
3.1 System configuration 6
3.2 Software requirements 6
3.3 Hardware requirements 6
4. Technology
4.1 HTML 8
5. Coding 10
6. Screenshots 17
7. Conclusion 20
8. Bibliography 21
Learning Objectives/Internship
Objectives
· Internships are generally thought of to be reserved for college

students looking to gain experience in a particular field.
However, a wide array of people can benefit from Training
Internships in order to receive real world experience and develop
their skills.
· An objective for this position should emphasize the skills you already
possess in the area and your interest in learning
more
· Internships are utilized in a number of different career fields,
including architecture, engineering, healthcare, economics,
advertising and many more.
· Some internship is used to allow individuals to perform scientific

research while others are specifically designed to allow people to
gain first-hand experience working.
· Utilizing internships is a great way to build your resume and develop

skills that can be emphasized in your resume for future jobs. When
you are applying for a Training Internship, make sure to highlight
any special skills or
talents that can make you stand apart from the rest of the
applicants so that you have an improved chance of landing the
position.
Project Title: Gross Hub
Introduction:
The purpose of the internship is to improve skills in HTML,CSS,

and MySQL while obtaining experience in web development by
learning how to create visually beautiful and user-friendly web
interfaces.
Implemented responsive web design, making sure website looks
appealing on all viewport sizes.
About the Internship :
TOSSCALL SERVICES INDIA Pv.t Ltd. offers Gradual

Rotational Internship Program (GRIP). Projects are assigned to
interns in the field they have applied for. It takes a maximum of
eight weeks to finish the assigned job and at the end of
internship a certificate is awarded given that all the mandatory
conditions are met.
About the Company:
Vision of the company:

To inspire, motivate and encourage students to learn, create and
help build a better society.
Innovate: To teach new ways of thinking, to innovate and solve
the problems on their own.
Integrate: To let the students integrate, and help each other,
learn from each other and do well together.
TOSSCALL Company, a leading player in the Technology and
software field, has proven to be an invaluable learning ground during
the course of my internship. The company's commitment to
innovation and excellence is evident in its dynamic work environment
and diverse range of projects. Through hands-on experiences, I had
the privilege of witnessing first-hand how TOSSCALL strategically
aligns cutting-edge technologies with industry demands. The projects
assigned to me were thoughtfully curated to provide practical
exposure to a wide array of tools and technologies. This approach not
only facilitated a deep understanding of industry best practices but
also honed my technical skills significantly. The mentorship and
guidance provided by the seasoned professionals at TOSSCALL were
instrumental in navigating complex challenges, fostering a
stimulating learning atmosphere, and preparing me for the demands
of the professional world.
About the Project:
This project is a Gross Hub. The app can be useful to purchase the
grocery from our online store.
Inspired from the Online Websites.
It is a complete front-end project built using HTML, CSS and

MySQL.
Technologies Used:
The technologies used for building this project are HTML, CSS
and MySQL.
HTML (Hypertext Markup Language) is like the skeleton of a

web page. It's all about structure and content.
With HTML, you define what your page is made of, from
headings and paragraphs to images and links. Think of it as the
blueprint that shapes your web page's layout and the framework
upon which everything else is built.
CSS (Cascading Style Sheets) is the artist's palette. While

HTML defines the structure, CSS is all about presentation.
It lets you choose colors, fonts, margins, and more to make your page
visually appealing.
CSS is what transforms a plain webpage into a beautifully
designed, eye-catching piece of digital art.
JavaScript is the wizard behind the curtain. It brings your web

page to life with interactivity and dynamic behavior.
With JavaScript, you can create things like interactive forms, image
sliders, and real-time updates without needing to reload
the page. It's the magic that lets you click buttons, submit forms, and
have web applications respond to your input in real-time.
Together, these three technologies work in harmony to create the

web experience you know and love. HTML structures the content,
CSS styles it, and JavaScript adds the functionality and interactivity.
They're the cornerstone of web development, and mastering them
is the key to creating engaging and immersive online experiences.
Whether you're building a personal blog or a sophisticated web
application, understanding how HTML, CSS, and MySQL work
together is essential for any modern web developer.
2.REQUIREMENT ANALYSIS
System configurations
The software requirement specification can produce at

the culmination of the analysis task. The function and
performance allocated to software as part of system
engineering are refined by established a complete
information description, a detailed functional
description, a representation of system behavior, and
indication of performance and design constrain,
appropriate validate criteria, and other information
pertinent to requirements.
Software requirements:
Operating System: Windows
Coding Language: HTML, CSS, MySQL and Bootstrap.
Text Editor : VS Code

Hardware Requirements:
Processor : Intel core
i5Memory : 8GB
RAM HardDisk:1TB
TECHNOLOGY
HTML (Hypertext Markup Language):
HTML is the foundation of web development. It stands for
Hypertext Markup Language and is used to create the structure
and content of web pages.
HTML is not a programming language; rather, it's a markup
language that consists of tags defining elements like headings,
paragraphs, links, images, and more.
These tags provide structure and semantics to web content,
enabling browsers to render it properly.
CSS (Cascading Style Sheets): CSS, short for Cascading Style

Sheets, is a stylesheet language used for controlling the
presentation and layout of web pages.
It allows web developers to apply styles, such as fonts, colors,
spacing, and positioning, to HTML elements. CSS plays a crucial
role in separating content from design, making it easier to
maintain and update the visual aspects of a website.
CSS rules can be defined in external files or included within
HTML documents, providing flexibility and reusability.
CSS
MySQL: MySQL is an open-source relational database

management system (RDBMS) that is widely used for
managing and organizing large sets of data. Here are some key
points about MySQL:
1. Open Source: MySQL is free and open-source software,

which means that users can access and modify the source code
as needed. This has contributed to its widespread adoption and
continuous improvement by a global community of
developers.
2. Relational Database Management System (RDBMS):

MySQL follows the principles of a relational database, where
data is organized into tables with rows and columns. This
structure allows for efficient data retrieval and management.
3. Structured Query Language (SQL): MySQL uses SQL as its

query language. Users interact with the database by writing
SQL statements to perform tasks such as querying, updating,
and deleting data.
4. Scalability: MySQL is known for its scalability, meaning it

can handle a growing amount of data and user requests. It is
suitable for both small-scale applications and large, enterprise-
level systems.
5. Multi-Platform Support:MySQL is compatible with various

operating systems, including Windows, Linux, and macOS.
This makes it versatile and accessible to a broad range of
users.
6. Security Features: MySQL includes security features such as

user authentication, encryption, and access control, which help
protect sensitive data from unauthorized access.
7. Community and Support: With a large and active

community of users and developers, MySQL benefits from
ongoing support, updates, and the availability of resources
such as documentation, forums, and tutorials.
8. Replication and High Availability: MySQL supports

replication, allowing data to be duplicated across multiple
servers. This can improve performance and provide high
availability by ensuring that if one server fails, another can
take over seamlessly.
9. Storage Engines: MySQL supports multiple storage engines,

each with its own characteristics. InnoDB is a widely used
storage engine that provides features such as transactions and
foreign key constraints.
10. Popular in Web Development: MySQL is often used in

conjunction with popular web development technologies, such
as PHP and Python, to power dynamic websites and
applications. It is a crucial component of the LAMP (Linux,
Apache, MySQL, PHP/Python/Perl) and MEAN (MongoDB,
Express.js, AngularJS, Node.js) stacks.
MySQL's combination of reliability, performance, and
versatility has made it one of the most widely used database
systems across various industries and application.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="canonical" href="https://www.iifl.com/personal-loans/emi-calculator">
<meta name="description" content="Lendingkart personal loan ">
<meta name="Generator" content="Drupal 9 (https://www.drupal.org)">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>div#sliding-popup, div#sliding-popup .eu-cookie-withdraw-banner, .eu-cookie-withdraw-tab {background: #F56E28} div#sliding-
popup.eu-cookie-withdraw-wrapper { background: transparent; } #sliding-popup h1, #sliding-popup h2, #sliding-popup h3, #sliding-popup p,
#sliding-popup label, #sliding-popup div, .eu-cookie-compliance-more-button, .eu-cookie-compliance-secondary-button, .eu-cookie-withdraw-
tab { color: #ffffff;} .eu-cookie-withdraw-tab { border-color: #ffffff;}</style>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="amphtml" href="https://www.iifl.com/personal-loans/emi-calculator?amp">
<link rel="icon" href="https://www.iifl.com/themes/custom/iifl_finance/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="manifest" href="https://www.iifl.com/manifest.json">

<link rel="alternate" hreflang="en-in" href="https://www.iifl.com/personal-loans/emi-calculator">





<script type="text/javascript" async="" src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _ IIFL
Finance_files/js"></script><script type="text/javascript" async="" src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _
IIFL Finance_files/js(1)"></script><script type="text/javascript" async="" src="./Personal Loan EMI Calculator - Calculate Personal Loan
Online _ IIFL Finance_files/js(2)"></script><script type="text/javascript" async="" src="./Personal Loan EMI Calculator - Calculate Personal
Loan Online _ IIFL Finance_files/analytics.js"></script><script src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _ IIFL
Finance_files/139439933088582" async=""></script><script src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _ IIFL
Finance_files/3053235174934311" async=""></script><script src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _ IIFL
Finance_files/2933234310278949" async=""></script><script async="" defer="" src="./Personal Loan EMI Calculator - Calculate Personal
Loan Online _ IIFL Finance_files/fbevents.js"></script><script async="" defer="" src="./Personal Loan EMI Calculator - Calculate Personal
Loan Online _ IIFL Finance_files/js(3)"></script><script defer="" src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _
IIFL Finance_files/gtm.js"></script><script async="" src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _ IIFL
Finance_files/uwt.js"></script><script async="" src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _ IIFL
Finance_files/dht.min.js" id="dht"></script><script async="" src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _ IIFL
Finance_files/insight.beta.min.js"></script><script type="text/javascript" async="" src="./Personal Loan EMI Calculator - Calculate Personal
Loan Online _ IIFL Finance_files/insight.min.js"></script><script type="text/javascript" async="" src="./Personal Loan EMI Calculator -
Calculate Personal Loan Online _ IIFL Finance_files/clevertap.min.js"></script><script async="" src="./Personal Loan EMI Calculator -
Calculate Personal Loan Online _ IIFL Finance_files/js(4)"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'DC-13281521');
</script>

<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>Agency - Namaste Theme</title>

<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />

<link href="css/styles.css" rel="stylesheet" />
<script src="jquery-3.7.0.js"></script>
</head>
<style data-styled="active" data-styled-version="5.3.3">.blwkrT{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-
flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-
pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-
radius:6px;border:none;outline:none;height:40px;line-height:inherit;font-size:14px;font-weight:500;padding:0 10px;width:auto;cursor:pointer;-
webkit-transition-property:background-color,color,opacity;transition-property:background-color,color,opacity;-webkit-transition-
duration:0.2s;transition-duration:0.2s;white-space:nowrap;background-
color:#000000;color:#FFFFFF;}.blwkrT:hover,.blwkrT:active,.blwkrT:focus{background-color:#DA3832;}.kgtBlH{display:-webkit-inline-
box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-
align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-
radius:6px;border:none;outline:none;height:40px;line-height:inherit;font-size:14px;font-weight:500;padding:0 10px;width:auto;cursor:pointer;-
webkit-transition-property:background-color,color,opacity;transition-property:background-color,color,opacity;-webkit-transition-
duration:0.2s;transition-duration:0.2s;white-space:nowrap;background-
color:rgba(0,0,0,0.1);color:#000000;}.kgtBlH:hover,.kgtBlH:active,.kgtBlH:focus{background-color:rgba(0,0,0,0.2);}.hbgLvd{display:-
webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-
direction:column;-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}.hbgLvd *{box-sizing:border-box;font-family:'Inter',sans-
serif;}.idcWUa{width:24px;height:24px;-webkit-mask-image:url(chrome-extension://hbklahkfbghjgbclbfcnhpfmajkagnci/icons/
close.svg);mask-image:url(chrome-extension://hbklahkfbghjgbclbfcnhpfmajkagnci/icons/close.svg);-webkit-mask-position:center center;mask-
position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;background-
color:#8C8B8A;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;}.jbMIgO{width:16px;height:16px;-webkit-mask-
image:url(chrome-extension://hbklahkfbghjgbclbfcnhpfmajkagnci/icons/arrow_right.svg);mask-image:url(chrome-extension://
hbklahkfbghjgbclbfcnhpfmajkagnci/icons/arrow_right.svg);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-
repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;background-color:#FFFFFF;-webkit-flex-shrink:0;-ms-flex-
negative:0;flex-shrink:0;}.indTSF{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-
webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:default;}.fmghtm{width:20px;height:20px;background-
image:url(chrome-extension://hbklahkfbghjgbclbfcnhpfmajkagnci/icons/vn_logo.svg);background-position:center center;background-
repeat:no-repeat;background-size:cover;}.bydsnp{cursor:pointer;max-width:240px;-webkit-transition:0.5s max-width;transition:0.5s max-
width;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-
align:center;-ms-flex-align:center;align-items:center;background:#C3312B;border-radius:4px;}.bydsnp
img{width:24px;height:24px;}.koHJRq{margin-left:3px;}.fIDsQA{white-space:nowrap;color:#FFFFFF;font-weight:500;font-size:12px;line-
height:14px;padding:0 6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-
align:center;-ms-flex-align:center;align-items:center;}.dIuWHJ{display:none;position:fixed;z-
index:99999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4);}.kZcOAB{background-
color:#fefefe;padding:20px;border:1px solid #888888;width:360px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-
50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation-name:animatetop;animation-name:animatetop;-
webkit-animation-duration:0.4s;animation-duration:0.4s;border-radius:12px;}@media (max-width:812px){.kZcOAB{width:85% !
important;}}.kZcOAB > div:not(:last-child){margin-bottom:30px;}.bJwUBx{padding:0;}.fOGVrh{margin:0;font-weight:600;font-
size:20px;line-height:26px;color:#000000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-
items:center;-webkit-box-align:center;-ms-flex-align:center;align-
items:center;}.jgEzBl{position:absolute;top:10px;right:10px;}.eWgdsE{padding:0;}.cximxh{padding:0;display:-webkit-box;display:-webkit-
flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-
content:center;gap:5px;}.fOCdIe{width:40px;display:inline-block;}.iVmxmm{display:-webkit-box;display:-webkit-flex;display:-ms-
flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-
ms-flex-positive:1;flex-grow:1;min-height:0;border-radius:10px;background:none !important;}.iVmxmm:host{background:none !
important;}</style><script type="text/javascript" src="./Personal Loan EMI Calculator - Calculate Personal Loan Online _ IIFL
Finance_files/a" class="ct-jp-cb" rel="nofollow" async=""></script><meta http-equiv="origin-trial"
content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//
5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbm
Rib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9"><meta http-equiv="origin-trial"
Rib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9"><meta http-equiv="origin-trial"
Rib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9"><script charset="utf-8" src="./Personal
Loan EMI Calculator - Calculate Personal Loan Online _ IIFL Finance_files/41.js"></script></head>
<body class="full-width-layout secondary-menu-page-index hero-banner-tamanna-bhatia-style--one hero-banner--personal-loans faq-show-
more layout-no-sidebars has-featured-top page-node-75 path-node node--type-product-calculator chrome chrome114 mac desktop" data-eu-
cookie-compliance-once="true" data-once="form-single-submit"><div id="rootReactVNB" class="rootReactVNB"><div style="display: none;
position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2000000000; background: red; opacity: 0;"></div><div
class="ModalOverlay-sc-rn9ey7 dIuWHJ"><div width="360px" class="ModalContent-sc-1byo0d8 kZcOAB"><div class="ModalHeader-sc-
1q7dtzz bJwUBx"><h5 class="ModalHeading-sc-rwjzr7 fOGVrh"><div class="LogoWrapper-sc-ssd9p0 indTSF StyledLogo-sc-wamwi6
fOCdIe"><div class="Image-sc-mngam5 fmghtm"></div></div>We need your help:</h5><div class="CloseButton-sc-eod3hf jgEzBl"><div
class="IconImage-sc-1oekuv0 idcWUa" color="grey100" width="24px" height="24px"></div></div></div><div class="ModalBody-sc-
mej6ip eWgdsE">Video Notebook needs access to your Google Drive to link your notes on Google Meet to recordings stored on Google
Drive</div><div class="ModalFooter-sc-1cykhbu cximxh"><button type="primary" width="auto" height="40px" loading="false"
class="ButtonContainer-sc-1eabuu8 blwkrT">Authorize</button><button type="secondary" width="auto" height="40px" loading="false"
class="ButtonContainer-sc-1eabuu8 kgtBlH">Not now...</button><button type="secondary" width="auto" height="40px" loading="false"
class="ButtonContainer-sc-1eabuu8 kgtBlH">Don't ask me anymore</button></div></div></div><link rel="stylesheet" type="text/css"
href="chrome-extension://hbklahkfbghjgbclbfcnhpfmajkagnci/css/fonts.css"><style>
:not(body) #rootReactVNB {
position: static;
}
#dialogContainer {
flex-grow: 1 !important;
position: fixed !important;
background: rgba(255, 255, 255, 1) !important;
border: 1px solid rgba(255, 255, 255, 1) !important;
border-radius: 10px !important;
display: flex;
flex-direction: column !important;
box-shadow: 0 0 5px rgba(35, 35, 35, 0.5) !important;
transition: transform 0.5s;
}
#dialogContainer:not(.dialogMinimized) {
min-width: 295px !important;
}
.VN--hide {
display:none !important;
}
.VN--show {
display: flex !important;
}
#dialogContainer:not(.dialogMinimized) {
background: rgba(255, 255, 255, 0.5);
transition-property: background, border;
transition-duration: 0.2s;
}
#dialogContainer:not(.dialogMinimized):hover,
#dialogContainer:not(.dialogMinimized)[is-active="true"] {
background: rgba(255, 255, 255, 1);
}
#dialogContainer:not(.dialogMinimized) > div > div:not([class^="AddonHeader__HeaderDivStyle"]) {

opacity: 0.5;
transition: opacity 0.2s;
}
#dialogContainer:not(.dialogMinimized):hover > div > div,

#dialogContainer:not(.dialogMinimized)[is-active="true"] > div > div {
opacity: 1;
}
#dialogContainer:not(.dialogMinimized) div[class^="ButtonsWrapper"] {
background-color: transparent;
transition-property: background-color;
}
#dialogContainer:not(.dialogMinimized):hover div[class^="ButtonsWrapper"],
#dialogContainer:not(.dialogMinimized)[is-active="true"] div[class^="ButtonsWrapper"] {
background-color: #dddddd;
}
#dialogContainer:not(.dialogMinimized) div[class^="AddonFooter__DivStyled"] {
opacity: 0.5;
background-color: transparent;
transition-property: background-color, opacity;
}
#dialogContainer:not(.dialogMinimized):hover div[class^="AddonFooter__DivStyled"],
#dialogContainer:not(.dialogMinimized)[is-active="true"] div[class^="AddonFooter__DivStyled"] {
background-color: #dddddd;
opacity: 1;
}
#dialogContainer:not(.dialogMinimized) span[class^="ControlContainer"] {
border-color: transparent;
transition: border-color 0.2s;
}
#dialogContainer:not(.dialogMinimized):hover span[class^="ControlContainer"],
#dialogContainer:not(.dialogMinimized)[is-active="true"] span[class^="ControlContainer"] {
border-color: #dddddd;
}
#dialogContainer:not(.dialogMinimized) div[class*="SeparatorStyledDiv"] {
border-color: transparent;
transition: border-color 0.2s;
}
#dialogContainer:not(.dialogMinimized):hover div[class*="SeparatorStyledDiv"],
#dialogContainer:not(.dialogMinimized)[is-active="true"] div[class*="SeparatorStyledDiv"] {
border-color: #bbbbbb;
}
#dialogContainer .ProseMirror strong {

font-family: 'Roboto-bold', sans-serif;
}
#dialogContainer.positionRightTop{
top: 10px;
right: 10px;
max-height: 600px;
min-height: fit-content;
}
#dialogContainer.positionRightTop.gmeet{
top: 50px !important;
}
#dialogContainer.positionLeftTop{
top: 10px;
left: 10px;
max-height: 600px;
min-height: fit-content;
}
#dialogContainer {
z-index: 1000000000000 !important;
}
#dialogContainer.dialogMinimized{
max-width: 200px;
width: auto !important;
transform: translate(0px, 0px);
position: absolute !important;
top: 6px !important;
right: 6px !important;
left: auto !important;
bottom: auto !important;
box-shadow: none !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
z-index: 2019 !important;
}
#dialogContainer.positionRightBottom{
right: 10px;
bottom: 10px;
max-height: 400px;
min-height: 63px;
}
#dialogContainer.positionLeftBottom{
left: 10px;
bottom: 10px;
max-height: 400px;
min-height: 63px;
}
.overflow{
height: 270px;
overflow-y: auto !important;
}
.VN--hide {
display:none!important;
visibility: hidden;
}
.VN--show {
display: flex;
}
.sty{
color:blue;
}
@media (max-width: 600px) {

.nav-link{
background-color:white;
padding-left:10px;
}
}
</style>
<body id="page-top">

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top"><img src="assets/img/navbar-logo.svg" alt="..." /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-
controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#services" style="color:black">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio" style="color:black">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#about" style="color:black">About</a></li>
<li class="nav-item"><a class="nav-link" href="#team" style="color:black">Team</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" style="color:black">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="register.html" style="color:black">Sign In</a></li>
<li class="nav-item"><a class="nav-link" href="final.html" style="color:black">Login</a></li>
</ul>
</div>
</div>
</nav>

<header class="masthead">
<div class="masthead-subheading" style="color:black">Business Loans Bole Toh Sirf </div>
<div class="masthead-heading text-uppercase sty" style="font-size:40px;">Lendingkart</div>
<a class="btn btn-primary btn-xl text-uppercase" href="#services" style="background-color:black">Abouts</a>
</div>
</header>

<section class="page-section" id="services">
<div class="text-center">
<h2 class="section-heading text-uppercase" style="color:black">Why Lendingkart?</h2>
<h3 class="section-subheading text-muted"></h3>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">E-Commerce</h4>
<p class="text-muted">Capital for Business Expansion: Loans at lower interest provide e-commerce businesses with the capital
needed for expansion. Whether it's investing in new product lines, entering new markets, or expanding the business's infrastructure, loans can
provide the necessary funds to fuel growth opportunities.</p>
</div>
<i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Get instant personal loans easily online</h4>
<p class="text-muted">Getting the best personal loan deals is now just a click away. Follow the steps which include basic details
filling & document uploading. Your loan amount eligibility will be automatically generated. You can then apply for a specific amount & get it
processed within minutes. Apply now!</p>
</div>
<i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Fully Protected Data</h4>
<p class="text-muted">Data is the new oil & so it must be preserved. Get an instant personal loan with PHOCKET without
worrying about your data. We follow stringent data protection laws while providing the best personal loan deals. Start your short-term loan
application process now!</p>
</div>
</div>
</div>
</section>

<section class="page-section bg-light" id="portfolio">
<h2 class="section-heading text-uppercase">Our Customers</h2>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">

<div class="portfolio-item">
<img class="img-fluid" style="height:390px;width:400px;" src="h1.avif" alt="..." />
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Haris Dev</div>
<div class="portfolio-caption-subheading text-muted">Writer</div>
</div>
</div>
</div>
<img class="img-fluid" src="h2.jpeg" alt="..." style="height:390px;width:400px;">

<div class="portfolio-caption-heading">M.S. Dhoni</div>
<div class="portfolio-caption-subheading text-muted">Criketer</div>
</div>
</div>
</div>
<img class="img-fluid" src="h3.jpeg" alt="..." style="height:390px;width:370px;" />

<div class="portfolio-caption-heading">Neeta Ambani</div>
<div class="portfolio-caption-subheading text-muted"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<img class="img-fluid" src="h4.jpeg" alt="..." style="height:390px;width:410px;"/>

<div class="portfolio-caption-heading">Atul Kumar</div>
<div class="portfolio-caption-subheading text-muted">Busineesman</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<img class="img-fluid" src="h5.jpeg" alt="..." style="height:390px;width:400px;" />
<div class="portfolio-caption-heading">Seema Kumari</div>
<div class="portfolio-caption-subheading text-muted">Web-Developer</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<img class="img-fluid" src="h6.jpeg" alt="..." style="height:390px;width:400px;"/>
<div class="portfolio-caption-heading">Uday Kotak</div>
<div class="portfolio-caption-subheading text-muted">Banker</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="block-style block-style-1">

<div class="block-style__top">
<div class="block-style__top-left">
<h1 class="h3 box-title mb-0">Personal Loan <span>EMI Calculator</span></h1>
</div>
<div class="block-style__top-right">
<p><strong>Personal loans</strong> are an effective way of fulfilling your personal needs such as international vacations, weddings,
buying the latest gadget, pursuing higher education, purchasing a vehicle or even home renovation. However, it is further vital to know how
much you will have to pay as EMI at regular intervals.</p>
<p>A <strong>Personal Loan calculator</strong> is an online tool to ascertain the payable interest based on the loan amount and tenure.
You can also use the <strong>EMI calculator for personal loans</strong> to estimate the loan amount you can get given your monthly income.
IIFL personal loan provides a cutting-edge <strong>personal loan eligibility calculator</strong> that not only gives you an estimate of the loan
you can avail of but also lets you apply online to get instant approval and also upload documents.</p>
</div>
</div>
</div>
</div>
<div class="skip-views-content-row view view-calculator view-id-calculator view-

display-id-calc js-view-dom-id-ed3780f80bc6fa5f96f5b7f1ae0e4e2e86c695da99cf1128ce8f8eab5050c877">

<section class="page-section" id="about">
<h2 class="section-heading text-uppercase"> Application process</h2>
<h3 class="section-subheading text-muted">Let's Begin</h3>
</div>
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="1.jpeg" alt="..." style="height:160px;width:160px;" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Check your eligibility </h4>
<h4 class="subheading"></h4>
</div>
<div class="timeline-body"><p class="text-muted">with just a few details, check your eligibility for a business
loan</p></div>
</div>
</li>
<li class="timeline-inverted">
<img class="rounded-circle img-fluid" src="2.1.png" alt="..." style="height:160px;width:160px;"/></div>
<h4>Upload documents</h4>
<h4 class="subheading"></h4>
</div>
<div class="timeline-body"><p class="text-muted">complete your application by uploading few documents</p></div>
</div>
</li>
<li>
<img class="rounded-circle img-fluid" src="3.1.png" alt="..." style="height:160px;width:160px;"/></div>
<h4></h4>
<h4 class="subheading">Get a loan offer</h4>
</div>
<div class="timeline-body"><p class="text-muted">we will evaluate & propose a fair loan offer to you</p></div>
</div>
</li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="4.png" alt="..." style="height:160px;width:160px;"
/></div>
<h4></h4>
<h4 class="subheading">Sign your loan agreement</h4>
</div>
<div class="timeline-body"><p class="text-muted">send us the signed agreement along with your kyc documents</p></div>
</div>
</li>
<li>
<img class="rounded-circle img-fluid" src="5.png" alt="..." style="height:160px;width:160px;"/></div>
<h4></h4>
<h4 class="subheading">Grow your business</h4>
</div>
<div class="timeline-body"><p class="text-muted">You will get the funds in your account after verification</p></div>
</div>
</li>
<h4>
Be Part
<br />
Of Our
<br />
Story!
</h4>
</div>
</li>
</ul>
</div>
</section>

<section class="page-section bg-light" id="team">
<h2 class="section-heading text-uppercase">Our Amazing Team</h2>
</div>
<div class="row">
</div>
<div class="col-lg-12">
<div class="team-member">
<img class="mx-auto rounded-circle" src="myphoto.jpeg" alt="..." />
<h4>Prashansa Dhole</h4>
<p class="text-muted">Lead Marketer</p>
<a href="https://www.instagram.com/bittu__0202/"><img src="insta2.jpeg" class="" style="height: 40px; width: 40px;
border-radius: 360px; border:2px solid black; background-color: black;"></a>
<a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Diana Petersen Facebook Profile"><i class="fab fa-facebook-f"
></i></a>
<a class="btn btn-dark btn-social mx-2" href="https://www.linkedin.com/in/prashansa-dhole-250268216/" aria-label="Diana
Petersen LinkedIn Profile"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mx-auto text-center"><p class="large text-muted"> I help drive customer acquisition and retention through
targeted marketing campaigns, leveraging data analytics for insights, developing compelling brand messaging, and collaborating with cross-
functional teams to ensure consistent customer experiences.</p></div>
</div>
</div>
</section>

<h1 align="center" text-align="center">OUR SPONSERS</h1>
<div class="py-5">
<div class="row align-items-center">
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/microsoft.svg" alt="..." aria-
label="Microsoft Logo" /></a>
</div>
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/google.svg" alt="..." aria-
label="Google Logo" /></a>
</div>
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/facebook.svg" alt="..." aria-
label="Facebook Logo" /></a>
</div>
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/ibm.svg" alt="..." aria-label="IBM
Logo" /></a>
</div>
</div>
</div>
</div>

<section class="page-section" id="contact">
<h2 class="section-heading text-uppercase">Contact Us</h2>
</div>







<form action="contact.php" id="contactForm" data-sb-form-api-token="API_TOKEN">
<div class="row align-items-stretch mb-5">
<div class="form-group">

<input class="form-control" id="name" name="name" type="text" placeholder="Your Name *" data-sb-
validations="required" />
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<div class="form-group">

<input class="form-control" id="email" name="email" type="email" placeholder="Your Email *" data-sb-
validations="required,email" />
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<div class="form-group mb-md-0">

<input class="form-control" id="phone" name="phone" type="tel" placeholder="Your Phone *" data-sb-
validations="required" />
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
</div>
</div>
<div class="form-group form-group-textarea mb-md-0">

<textarea class="form-control" id="message" name="message" placeholder="Your Message *" data-sb-
validations="required"></textarea>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
</div>
</div>




<div class="d-none" id="submitSuccessMessage">
<div class="text-center text-white mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
</div>
</div>




<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>

<input type="submit" style="background-color: #ffc800;color:white;height:70px;width:200px;border-radius: 10px; font-size:
20px;" value="SEND MESSAGE" name="b1" id="b1">
</form>
</div>
</section>

<footer class="footer py-4">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-start">Copyright © Your Website 2023</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="col-lg-4 text-lg-end">
<a class="link-dark text-decoration-none me-3" href="#!">Privacy Policy</a>
<a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
</div>
</div>
</div>
</footer>


<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="row justify-content-center">
<div class="modal-body">

<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/1.jpg" alt="..." />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem
culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum,
reiciendis facere nemo!</p>
<ul class="list-inline">
<li>
<strong>Client:</strong>
Threads
</li>
<li>
<strong>Category:</strong>
Illustration
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-xmark me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<li>
Explore
</li>
<li>
Graphic Design
</li>
</ul>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<li>
Finish
</li>
<li>
Identity
</li>
</ul>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<li>
Lines
</li>
<li>
Branding
</li>
</ul>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<li>
Southwest
</li>
<li>
Website Design
</li>
</ul>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<li>
Window
</li>
<li>
Photography
</li>
</ul>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="js/scripts.js"></script>




<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
Register.css:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: url("bg.png"), -webkit-linear-gradient(bottom, #0250c5, #d43f8d);
}
::selection{
color: #fff;
background: #d43f8d;
}
.container{
width: 400px;
background: #fff;
text-align: center;
border-radius: 5px;
padding: 50px 35px 10px 35px;
}
.container header{
font-size: 35px;
font-weight: 600;
margin: 0 0 30px 0;
}
.container .form-outer{
width: 100%;
overflow: hidden;
}
.container .form-outer form{
display: flex;
width: 400%;
}
.form-outer form .page{
width: 25%;
transition: margin-left 0.3s ease-in-out;
}
.form-outer form .page .title{
text-align: left;
font-size: 25px;
font-weight: 500;
}
.form-outer form .page .field{
width: 330px;
height: 45px;
margin: 45px 0;
display: flex;
position: relative;
}
form .page .field .label{
position: absolute;
top: -30px;
font-weight: 500;
}
form .page .field input{
height: 100%;
width: 100%;
border: 1px solid lightgrey;
border-radius: 5px;
padding-left: 15px;
font-size: 18px;
}
form .page .field select{
width: 100%;
padding-left: 10px;
font-size: 17px;
font-weight: 500;
}
form .page .field button{
width: 100%;
height: calc(100% + 5px);
border: none;
margin-top: -20px;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s ease;
}
form .page .field button:hover{
background: #000;
}
form .page .btns button{
margin-top: -20px!important;
}
form .page .btns button.prev{
margin-right: 3px;
font-size: 17px;
}
form .page .btns button.next{
margin-left: 3px;
}
.container .progress-bar{
display: flex;
margin: 40px 0;
user-select: none;
}
.container .progress-bar .step{
text-align: center;
width: 100%;
position: relative;
}
.container .progress-bar .step p{
font-weight: 500;
font-size: 18px;
color: #000;
margin-bottom: 8px;
}
.progress-bar .step .bullet{
height: 25px;
width: 25px;
border: 2px solid #000;
display: inline-block;
border-radius: 50%;
position: relative;
transition: 0.2s;
font-weight: 500;
font-size: 17px;
line-height: 25px;
}
.progress-bar .step .bullet.active{
border-color: #d43f8d;
}
.progress-bar .step .bullet span{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.progress-bar .step .bullet.active span{
display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after{
position: absolute;
content: '';
bottom: 11px;
right: -51px;
height: 3px;
width: 44px;
background: #262626;
}
.progress-bar .step .bullet.active:after{
transform: scaleX(0);
transform-origin: left;
animation: animate 0.3s linear forwards;
}
@keyframes animate {
100%{
transform: scaleX(1);
}
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after{
display: none;
}
.progress-bar .step p.active{
color: #d43f8d;
transition: 0.2s linear;
}
.progress-bar .step .check{
position: absolute;
left: 50%;
top: 70%;
font-size: 15px;
transform: translate(-50%, -50%);
display: none;
}
.progress-bar .step .check.active{
display: block;
color: #fff;
}
Final.html:
<!DOCTYPE html>

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Multi Step Form | CodingNepal</title>
<link rel="stylesheet" href="register.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body align="center">
<header>Login Page</header>
<div class="form-outer" align="center">

<form action="final.php">
<div class="page slide-page" >
<div class="field">
<div class="label">
Mobile
</div>
<input type="text" name="t1">
</div>
<div class="field">
<div class="label">
Password
</div>
<input type="text" name="t2">
</div>
<div class="field btns">

<button class="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Emi.php:
<?php
include("include.php");
?>
<head>
<style>
body{
margin-top:200px;
background-image: linear-gradient(blue,cyan);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.a2{
height:250px;
max-width:380px;
margin-top: 0px;
background-color: white;
border-radius: 10px;
box-shadow: 1px 1px 12px rgb(157, 156, 156);
margin-bottom: 30px;
}
::placeholder{
color:rgb(168, 164, 164);
}
.a3{
color:rgb(10, 10, 10);
margin-top:15px;
margin-left: 15px;
font-size: 17px;
max-width:330px;
height:40px;
padding: 5px 8px;
border:1px solid rgb(205, 203, 203);
}
a{
color: #1877f2;
font-size: 17px;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.a4{
background-color:#43b72a;
text-align: center;
width:200px;
margin-left: 90px;
margin-top: 15px;
height:50px;
color: white;
font-size: 18px;
font-weight: bold;
border: 0px;
box-shadow: 0px 0px 0px;
}
.k1{
color:yellow;
border-bottom:3px solid yellow;
}
</style>
<script>
$(document).ready(function(){
$("#t3").click(function(){
var a=$("#t1").val();
var b=$("#t2").val();
$.post('emib.php',{k1:a,k2:b},function(data){
$("#x").html(data);
});
});
});
</script>
</head>
<body>
<?php
echo" <p style='font-size:20px;color:white;margin-left:70px;'>Welcome $ee,</p>";
?><div align='center'>
<div class="a2">
<form action="emib.php" method="post">

<input type="text" placeholder="Loan Amount" class="a3" name="t1" >
<input type="text" placeholder="Duration of EMI" class="a3" name="t2">
<input type="submit" value="Check EMI" class="a3" id="t3" style="background-color:#1877f2 ; text-align: center;
width:350px;height:50px; color: white; font-size: 20px; font-weight: bold;">
</form>
</div>
</div>
</div>
<div align='center'>
<div style="height:220px;max-width:550px;background-image:linear-gradient(cyan,white);border-radius:20px;padding-left:50px;">
<?php
$b=1;
$du=$b*12;//total months
$hsalary=($ee2/12)/2;//half salary per month

$ffr=$hsalary*12;
$ans=$ffr/1.11;
$ans2=($ffr*2)/1.22;
$ans3=($ffr*3)/1.33;
$ans4=($ffr*4)/1.44;
$ans5=($ffr*5)/1.55;
$ffr2=$ffr*(0.11);
$ff3=$ffr-$ffr2;
echo"<div align='center'>" ;
echo"<h4>Maximum amount you are eligible for:<br> 1 year is $ans</h4>";
echo"<h4>2 year is $ans2</h4>";
echo"<h4> 4 year is $ans4</h4>";
echo"</div>";
?>
</div>
</div>
</body>
</html>
Viewclient.php:
<?php
include('include.php');
?>
<head>
<style>
td
{border:1px solid black;
padding:5px;
}
.j1{
color:yellow;
}
</style>
</head>
<?php
$sq=mysqli_query($con,"select * from client");

echo"<table style='color:black;border:1px solid black;font-size:12px;
background-image:linear-gradient(cyan,white);'><tr><td>ID</td><td>Name</td><td>Mobile</td><td>Email</td><td>Address</
td><td>Occuation</td><td>DOB</td><td>State</td><td>Bank</td><td>Account No.</td><td>IFSC Code</td><td>PAN No.</td><td>Aadhar
card No.</td><td>City</td><td>Income</td></tr>";
while($sq2=mysqli_fetch_array($sq)){
echo"<tr>
<td> $sq2[ID]</td>
<td> $sq2[Name]</td>
<td> $sq2[Mobile]</td>
<td> $sq2[Email]</td>
<td> $sq2[Address]</td>
<td> $sq2[Occupation]</td>
<td> $sq2[DOB]</td>
<td> $sq2[State]</td>
<td> $sq2[Bank]</td>
<td> $sq2[Accno]</td>
<td> $sq2[Ifsc]</td>
<td> $sq2[pan]</td>
<td> $sq2[aadhar]</td>
<td> $sq2[City]</td>
<td> $sq2[income]</td>
</tr>";
}
echo"</table>";
?>
Viewloan.php:
?>
<head>
<style>
.a2{
margin-right:150px;
height:350px;
width:380px;
margin-top: 0px;
background-image: linear-gradient(cyan,white);
box-shadow: 1px 1px 12px rgb(157, 156, 156);
margin-bottom: 30px;
}
.j2{
color:yellow;
}
</style>
</head>
<body>
<div align='right'>
<div class="a2">
<div align='center'><div style='padding-top:70px;'><a href='ongoingloan.php'><input type='button'
style='height:50px;width:100px;background-color:black;color:white;border-radius:10px;' value='Ongoing'></a></div></div>
<br>
<div align='center'><div style='padding-top:70px;'><a href='completedloan.php'><input type='button'
style='height:50px;width:100px;background-color:black;color:white;border-radius:10px;'value='Completed'></a></div></div>
</div>
</div>
</body>
<?php
?>
<head>
<style>
td
{border:1px solid black;
padding:5px;
}
.j3{
color:yellow;
}
</style>
</head>
<?php
$sq=mysqli_query($con,"select * from loan where status='ongoing'");

echo"<table style='color:black;border:1px solid black;font-size:20px;background-image:linear-gradient(cyan,white)'><tr><td>ID</td><td>Name</
td><td>Mobile No.</td><td>Loan Amount</td><td>Duration of EMI</td><td>Interest Rate</td><td>Monthly EMI</td><td>EMI
left</td><td>Status</td></tr>";
while($sq2=mysqli_fetch_array($sq)){
$drdr= $sq2["user"];
$sqq=mysqli_query($con,"select * from client where Mobile=$drdr");
$sqq2=mysqli_fetch_array($sqq);
$name=$sqq2["Name"];
echo"<tr>
<td> $sq2[id]</td>
<td> $name</td>
<td> $sq2[user]</td>
<td> $sq2[amount]</td>
<td> $sq2[duration]</td>
<td> $sq2[intrest]</td>
<td> $sq2[emi]</td>
<td> $sq2[emileft]</td>
<td> $sq2[status]</td>
</tr>";
}
echo"</table>";
?>
Adminmsg.php:
<?php
?>
<head>
<style>
.j4{
color:yellow;
}
</style>
</head>
<?php
$rf=mysqli_query($con,"select distinct sender from msg where reciever='$user' order by id desc");
echo"<div align='center'><div style='font-size:20px;color:white;'>Clients with message request: </div>";
while($rf2=mysqli_fetch_array($rf)){
$sender=$rf2["sender"];
$ff=mysqli_query($con,"select * from client where Mobile='$sender'");

$ff2=mysqli_fetch_array($ff);
$n=$ff2["Name"];
echo"<div align='center'><div style='background-color:black;height:100px;width:300px;'><a href='adminmsg2.php?t1=$sender'>$n</a>

</div></div>";
?>
Loan.php:
<?php
?>
<head>
<style>
.k2{
color:yellow;
}
</style>
</head>
<body>
<div class='hy' style='color:white;float:right; font-size:30px;margin-right:50px'>
<div class="col-12" >
<?php
/*$a=$_REQUEST['t1'];
$b=$_REQUEST['t2'];
echo"loan demand: $a <br> time:$b years<br>";
$du=$b*12;//total months
$intrest=(11/100)*$a;
$tintrest=$intrest*$b;
$tamount=$a+$tintrest;
$emi=$tamount/$du;
$halfs=$ee2/(12*$b);
*/
$q=mysqli_query($con,"select * from loan where user='$user'");
$count=mysqli_num_rows($q);
if($count=='0'){
echo"<p style='color:white;font-size:30px;'>you have no loan on you<br></p>";
}
else{
$q2=mysqli_fetch_array($q);
$c=$q2['amount'];
echo"<p style='color:white;font-size:30px;'>Loan Amount: $c<br></p>";
$d=$q2['duration'];
echo"<p style='color:white;font-size:30px;'>Loan Duration: $d<br></p>";
$e=$q2['intrest'];
echo"<p style='color:white;font-size:30px;;'>Loan Interest: $e<br></p>";
$f=$q2['emileft'];
echo"<p style='color:white;font-size:30px;'>Emi Left: $f<br></p>";
echo"<p style='color:white;font-size:30px;'>$c</p>";
echo"<p style='color:white;font-size:30px;'><a href='viewemi.php'>view emip</a></p>";
?>
</div>
</div>
</body>
Viewemi.php:
<?php
$s=mysqli_query($con,"select * from loan where user='$user' order by id desc");
$s2=mysqli_fetch_array($s);
$loanid=$s2["id"];
$emileft=$s2["emileft"];
$duration=$s2["duration"];
echo"<p style='color:white;font-size:30px;margin-left:800px;'>Hi $ee, here are the details of your Loan Account Number $loanid.<br></p>";
$z=mysqli_query($con,"select * from emi where loanid='$loanid'");
$count=mysqli_num_rows($z);
while($z1=mysqli_fetch_array($z)){
$i=$z1["installment"];
$d=$z1["date"];
echo"<p style='color:white;font-size:30px;margin-left:800px;'>$i installment on $d<br></p>";

}
if($emileft=="0"){
echo"<p style='color:white;font-size:30px;margin-left:800px;'>loan cleared <a href='emi.php'>apply new loan</a></p>";
}
else{
echo" <p style='color:white;font-size:30px;margin-left:800px;'><a href='payemi.php'>pay your next emi</a></p>";
}
?>
Usermessage.php:
<?php
include('include.php')
?>
<head>
<style>
.k4{
color:yellow;
}
.cv{background:black}
@media (max-width: 600px) {

.cv{
background:none;
}
</style>
</head>
<?php
$rf=mysqli_query($con,"select * from msg where sender='$user' or reciever='$user' order by id asc");
echo"<div align='center'>
<h1 style='color:white;'>Talk to admin:</h1><br>
<div class='cv' style='width:40%;border-radius:20px;' >";
while($rf2=mysqli_fetch_array($rf)){
$sender=$rf2['sender'];
$msg=$rf2['msg'];
if($sender==$user){
echo"<div style='margin:5px;float:right;text-align:right;'><div style='background-image:linear-
gradient(purple,white);height:30px;width:300px;border-radius:20px;padding-right:10px;margin-top:5px;'> $msg </div></div><br><br>";
}
else{
echo"<div style='margin:5px;float:left;background-image:linear-gradient(pink,white);height:30px;width:300px;border-radius:20px;padding-
left:10px;'> $msg </div><br><br>";
echo"</div></div>";
?>
<form action='usermsg.php'style='margin-top:30px;text-align:center '>
<input type='text' name='a' >
<input type='submit'>
</form>
Output:
 Home Page
 Signup Form
 Login
 Emi Predictor
 View Loan
 View Emi
 Talk to Admin
 View Client
 View Account
 View Loan
 Message to Client
CONCLUSION:
In conclusion, my internship experience at TOSSCALL Pvt.Ltd

has been a rewarding and invaluable opportunity to apply
theoretical knowledge to real-world scenarios. Over the course
of 8 weeks, I had the privilege of working on the frontend
design of a music player, a project that challenged and enriched
my skills in web development and user interface design.
Designing the frontend of the music player required a

comprehensive understanding of MySQL, HTML, and CSS,
as well as proficiency in utilizing modern libraries and
frameworks. Through this project, I gained practical
experience in implementing interactive features, managing
state, and ensuring cross-browser compatibility. I also had the
opportunity to employ responsive design principles to create
a seamless user experience across various devices.
Throughout the internship, I collaborated closely with the

development team, actively participating in code reviews, and
incorporating feedback to enhance the functionality and
aesthetics of the music player. This experience provided
valuable insights into agile development methodologies and the
importance of effective teamwork in achieving project
milestones.
Additionally, I had the chance to explore emerging
technologies and best practices in frontend development.
This included leveraging the latest JavaScript features and
libraries to optimize performance and enhance user
interactivity. I also became adept at debugging and
troubleshooting, honing my problem-solving skills in a
professional setting.
Beyond technical skills, this internship allowed me to refine my

communication and time-management abilities. Regular
meetings, progress updates, and documentation ensured that
project objectives were met efficiently and transparently.
This experience also heightened my awareness of the
significance of user-centered design, as I continually sought to
create an intuitive and enjoyable interface for the music player.
In retrospect, this internship has been instrumental in my

growth as a frontend developer. It has provided me with
practical exposure to industry-standard tools and
methodologies, reinforcing my passion for creating user-
friendly and visually appealing web applications, I am grateful
for the guidance and mentorship I received from the team at
TOSSCALL Pvt. Ltd, and I look forward to applying the
knowledge and skills gained in future projects.
I extend my sincere gratitude to TOSSCALL Pvt. Ltd. and the entire team
for their support, encouragement, and the opportunity to contribute to the
success of the music player project. This internship has been a significant
milestone in my professional journey, and I am eager to continue my
pursuit of excellence in frontend development.
References: -
1. https://www.youtube.com/
2. https://www.w3schools.com/
3. Learning Web Design
4. Eloquent MySQL: https://www.w3schools.com/
5. HTML &CSS: Design and Build Web Sites

PR Intern Report

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PR Intern Report

Uploaded by

Copyright:

Available Formats

INTERNSHIP REPORT

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

RAIPUR, CHHATTISGARH 2021-2025

I would like to take this opportunity to express my sincere gratitude

Throughout my internship, I had the privilege of working on a

Once again, I extend my heartfelt thanks to everyone at Tosscall

S.no CONTENTS Pg.no

· Internships are generally thought of to be reserved for college

· Some internship is used to allow individuals to perform scientific

· Utilizing internships is a great way to build your resume and develop

The purpose of the internship is to improve skills in HTML,CSS,

About the Internship :

TOSSCALL SERVICES INDIA Pv.t Ltd. offers Gradual

About the Company:

Vision of the company:

About the Project:

Inspired from the Online Websites.

It is a complete front-end project built using HTML, CSS and

HTML (Hypertext Markup Language) is like the skeleton of a

CSS (Cascading Style Sheets) is the artist's palette. While

JavaScript is the wizard behind the curtain. It brings your web

Together, these three technologies work in harmony to create the

The software requirement specification can produce at

Operating System: Windows

Coding Language: HTML, CSS, MySQL and Bootstrap.

Text Editor : VS Code

Processor : Intel core

CSS (Cascading Style Sheets): CSS, short for Cascading Style

MySQL: MySQL is an open-source relational database

1. Open Source: MySQL is free and open-source software,

2. Relational Database Management System (RDBMS):

3. Structured Query Language (SQL): MySQL uses SQL as its

4. Scalability: MySQL is known for its scalability, meaning it

5. Multi-Platform Support:MySQL is compatible with various

6. Security Features: MySQL includes security features such as

7. Community and Support: With a large and active

8. Replication and High Availability: MySQL supports

9. Storage Engines: MySQL supports multiple storage engines,

10. Popular in Web Development: MySQL is often used in

<link rel="manifest" href="https://www.iifl.com/manifest.json">

#dialogContainer:not(.dialogMinimized) > div > div:not([class^="AddonHeader__HeaderDivStyle"]) {

#dialogContainer:not(.dialogMinimized):hover > div > div,

#dialogContainer .ProseMirror strong {

@media (max-width: 600px) {

<img class="img-fluid" src="h2.jpeg" alt="..." style="height:390px;width:400px;">

<img class="img-fluid" src="h3.jpeg" alt="..." style="height:390px;width:370px;" />

<img class="img-fluid" src="h4.jpeg" alt="..." style="height:390px;width:410px;"/>

<img class="img-fluid" src="h5.jpeg" alt="..." style="height:390px;width:400px;" />

<div class="block-style block-style-1">

<div class="skip-views-content-row view view-calculator view-id-calculator view-

<div class="form-outer" align="center">

<div class="field btns">

echo" <p style='font-size:20px;color:white;margin-left:70px;'>Welcome $ee,</p>";

<form action="emib.php" method="post">

$hsalary=($ee2/12)/2;//half salary per month

$sq=mysqli_query($con,"select * from client");

$sq=mysqli_query($con,"select * from loan where status='ongoing'");

$ff=mysqli_query($con,"select * from client where Mobile='$sender'");

echo"<div align='center'><div style='background-color:black;height:100px;width:300px;'><a href='adminmsg2.php?t1=$sender'>$n</a>

echo"<p style='color:white;font-size:30px;'><a href='viewemi.php'>view emip</a></p>";

$s=mysqli_query($con,"select * from loan where user='$user' order by id desc");