8-1

A
PROJECT
ON
“ Portfolio ”
Submitted to
Shiksha Mandal’s
G. S. COLLEGE OF COMMERCE & ECONOMICS, NAGPUR
(AUTONOMOUS)
In the Partial Fulfillment of
B.Com. (Computer Application) Final Year
Submitted by
Aditya Zodape
Krutika Meshram
Under the Guidance of

Pravin J. Yadao
Shiksha Mandal’s
G. S. COLLEGE OF COMMERCE &
ECONOMICS, NAGPUR
(AUTONOMOUS)
2022-2023
1
Shiksha Mandal’s
G. S. COLLEGE OF COMMERCE & ECONOMICS,

NAGPUR
(AUTONOMOUS)
(2022 - 2023)
This is to certify that Mr. Aditya Zodape & Miss. Kruitka Meshram has
completed their project on the topic of “ Portfolio ” prescribed by G. S.
College of Commerce & Economics, Nagpur (Autonomous) for B.Com.
(Computer Application) – Semester-VI.
Date:
Place: Nagpur
Pravin J. Yadao
Project Guide
External Examiner Internal Examiner
2
ACKNOWLEDGEMENT
We take this opportunity to express our deep gratitude and whole hearted
thanks to project guide Prof. Pravin Yadao, Coordinator for his guidance
throughout this work. We are very much thankful to him for his constant
encouragement, support and kindness.
We are also grateful to our teachers Prof. Rahul Tiwari, Prof. Sushma
Gawande, Prof. Preeti Rangari, Prof. Prajakta Deshpande and Prof.
Haresh Naringe for their encouragement, help and support from time to time.
We also wish to express our sincere thanks to Principal Dr. Swati S. Kathaley
for providing us wide range of opportunities, facilities and inspiration to gather
professional knowledge and material without which this project could not
have been complete
Aditya Zodape
Krutika Meshram
3
DECLARATION
We Mr. Aditya Zodape & Miss Krutika Meshram hereby honestly declare
that the work entitled “ Portfolio ” submitted by us at G. S. College of
Commerce & Economics, Nagpur (Autonomous) in partial fulfillment of
requirement for the award of B.Com. (Computer Application) degree by
Rashtrasant Tukadoji Maharaj, Nagpur University, Nagpur has not been
submitted elsewhere for the award of any degree, during the academic session
2022-2023.
The project has been developed and completed by us independently under the
supervision of the subject teacher and project guide.
Aditya Zodape
Krutika Meshram
Date:
Place: Nagpur
4
INDEX
Sr. Content Page No. Signature Remarks
No.
1 Introduction 7-9
2 Objective 10 - 11
3 Preliminary System Analysis

3.1) Preliminary Investigation
3.2) Present System in use 12 - 22
3.3) Need of the new system
3.4) Feasibility Study
3.5) Project Category
4 Software and Hardware 23 - 24
Requirement Specification
5 Detailed System Analysis

5.1) Data Flow Diagram
5.2) Data Structure and
Tables
25 - 29
5.3) Entity Relationship
Diagram
6 System Design
6.1) Form Design
6.2) Source Code 30 - 117
6.3) Input Screen and Output
Screen
7 Testing and Validation Check 118 - 123
5
8 System Security Measures 124 - 125
9 Implementation, Evaluation & 126 – 129

Maintenance
10 Future Scope of Project 130 - 131
11 Conclusion 132 - 133
12 Bibliography and Reference 134 – 135
13 Synopsis 136
6
INTRODUCTION
7
1) INTRODUCTION :
Our project title is “ Portfolio ” This application provides an online platform for software
engineer’s, developer, project manager, back-end developer, front-end developer, UI
designer, mobile developer or possible clients to submit their service requests. This project
can help to lessen the time consumed by both ends (Management and Clients) in terms of
managing their service requests. It has a simple user interface and user-friendly
functionalities. This is a platform where it will be easy for software beginners or new
software employees. we provide this facilities: to buy projects, web Applications, Cyber
Security Service, data backup and restoration, anti-virus protection, data analytics, or web
designed etc.
This Application Welcome to newly designed project software company portfolio is a

faster service and more personal website specially designed to developers and beginners
experience better.
Computer Hardware and computer software are like Siamese twins. They are so
interconnected that if either were to disappear, the other could not survive. while hardware
provide the physical capability, software provide the brains that carry out useful work.
Hardware is what we see, but it is intangible Os and 1st that represent the billons of lines
of software instructions that make the hardware valuable. Software comes in two principal
flavors:
Custom program for a specific customer’s use; and Software product for use by multiple
customers;
8
What is software and software company ?
• The program and other operating information used by a computer.
• The software company includes business for maintain and publication of

software that are using different business module.
• The company includes software services, such as web sites, web application
documentation, data recovery, etc.
9
OBJECTIVE
10
2 ) OBJECTIVE:
• Automation : automatic work to reduce cost and improve efficiency &
productivity.
• Integration : getting things working together to reduce risk and improve

things such as customer experience.
• Application : giving employees tools that improve their work quality and
productivity.
• Mobility : allowing peoples to work anywhere with mobile devices and tools
such as apps.
• Business process : improving business process in areas such as efficiency and

risk reduction, business process are often semi-automated with techniques
such as workflow.
• Self Services : providing Self Services tools for customers and employees.
• Algorithms : developing an optimized set of steps for solving business

problems.
• Information : providing customers, employees and partners with timely and

reliable access to information.
• Communications: tools and services that support the communications of an

organization including business process such as public relations.
• Infrastructure : foundation element such as network that support a wide

range of processes and tools.
• Facilities : providing all the software related facilities such as web designing,
web application, cyber Security, data analysis, data back-end restoration etc.
• Security : Provide fast operations, data storage and high security for all its
tasks.
11
PRELIMINARY
SYSTEM ANALYSIS
12
3) PRELIMINARY SYSTEM ANALYSIS:
Preliminary System analysis refers to the finding or arranging the various resources
which will be needed at the time of developing a system, Information, and basic
analysis of system. It is first and basic step for developing every system. It is the phase
where system is investigated. The objective of this phase is to conduct an initial
analysis and findings of the system.
The preliminary investigation is a process which lasts for only 3-4 days. It is essential
to do initial investigation. It gives you the brief of the resources you have, current
flaws in the system and what we are supposed to add in the system while developing.
3.1) Preliminary Investigation:
Preliminary Investigation is the first and the most important step of developing any
project. It defines the scope of project i.e., the scope of project should be specific,
realistic, measurable and time-bound. Further it also defines the limitations of the
project that is time, performance and resources. It analyzes the data to finding out
estimated cost and time for development of project.
Preliminary Investigation basically refers to the collection of information that guides
the management of an organization to evaluate the merits and demerits of the project
request and make an informed judgment about the feasibility of the proposed
system.The purpose of the preliminary investigation is to determine whether the
problem or deficiency in the current system really exists. This sort of investigation
provides us with a thorough picture of the kind of software and hardware requirements
which are most feasible for the system, plus the environment in which the entire
project has to be installed and made operational. The preliminary-investigation phase
sets the stage for gathering information about the current problem and the existing
13
information system. This information is then used in studying the feasibility of
possible information systems solutions.
As our website is designed by keeping in mind that user should take its full advantage
and in less time achieve his goal .If we know that people exactly wants, then we make
project as per the requirement of the user.
3.2 ) Present System In Use :
The present system is providing lots of services and facilities. The system can be
maintained as per user requirements and charges or updates can be made from time
to time our systems provides lots of repair and maintenance services to the customer.
In current systems written content is provided with images user only view and read
the contents as there will be no comment section to share their views.
As present systems is outdated so user wants only updated the version, it provides low
quantity images visitors cannot accept such quantity the efforts will be made to
overcome such flaws in ensured versions.
3.3 ) Need Of The New System :
New system is been prepared keeping in mind that it deals effectively & more flexible
than the existing system. New system & technologies may allow faster processing, more
storage, and lower costs than ever before. Today, when everything is becoming more
and more computerized, one may feel that the task of keeping the records should also
be done automatically using the computer programs.
14
The need of new system arises due to the following reasons :
• For maintaining the accurate report need transmitted between departments so
that proper co - ordination can be maintained between them.
• For creating a friendlier environment, than the previous existing system for
the users.
3.4 ) Feasibility Study :
This is the stage where the feasibility is being studied by the developer for the project.
The feasibility study is useful to evaluate the cost and benefit of the new system
requested. The feasibility study tries to anticipate future scenarios of the software
development. It evaluates the benefits of the new system. The aim of the feasibility
study is to see whether it is possible to develop a system at a reasonable cost. At the end
of the feasibility study a decision is taken whether to proceed or not. Feasibility study
is to determine various solutions of the problem and then picking up one of the best
solution. It is measure of how beneficial the development of information system will be
to an organization.
The feasibility study has the following objectives:-
• Effective use of resources.

• Analyze the cost and benefit.
A feasibility study looks at the viability of an idea with an emphasis on identifying

potential problems. The feasibility study tries to anticipate future scenarios of the
software development.
15
a ) Technical feasibility:
The technical feasibility always focuses on the existing computer hardware and
software. This is also includes the need for more hardware and software and the
possibility of installing such facility. Technical feasibility concentrates on aspect of
project to find out the various hardware and software requirements for the project. In
technical feasibility the following issues are taken into consideration:-
• Whether the required technology is available or not.
• Whether the required resources are available like management programmers,

tester & debuggers software and hardware.
Once the technical feasibility is established, it is important to consider the monetary

factors also, since it might happen that developing a particular system may be
technically possible but it may require huge investments and benefits may be less. For
evaluating this economic feasibility of the proposed system it carried out.
b ) Economical Feasibility:
Economical analysis is the most frequently used method for evaluating the effectiveness
of candidates system. It is also called as cost benefit analysis, the procedure is to
determine the benefit and saving that are expected from candidate system and compare
them with cost. It benefits outweigh cost then decision is made to design and implement
system. It becomes easy to manage such records. Economical Feasibility is helpful for
finding the system development cost and benefit, it checks weather it is justifiable or
not, for that is checks he software and hardware costs etc.
16
c ) Operational Feasibility:
Operational feasibility considers the acceptability of the system. It checks weather

system will be used if it is developed and implemented and the user of the new system
will able to handle the system or not. The operational feasibility mostly look to the part
that how easily the project can put into the action it looks over that, is there any difficulty
on loading of this project or is the project operating smoothly afterwards. This project
is operationally feasibility on the screen itself. While making any project it is necessary
to study the operational features.
d ) Legal Feasibility:
In legal feasibility, ensured that the website we are developing is legal in the laws and
permitted by the law. Any information which will be provided will not hurt the cultural
and religious sentiments of the people and the information we are providing on the site
from the sources are valid or not is ensured.
e ) Time Feasibility:
In time feasibility study, taken into account the period in which the project is going to
take up to its completion. We made sure that the project will not take too long for
completion.
17
3.5 ) Project Category :
Website
• Website is simply known as collection of various web pages, which are

interconnected to each other or have same flow of information.
• A website mostly consists of static content. It is publicly accessible to all the

visitors.
• The website displays the collected data and information on a specific page.
• The website is a complete product, which you access with the help of your
browser.
• The site doesn’t need to be pre-compiled.
• Small changes never require a full re-compilation and deployment. You just
need to update the PHP code.
• Website is an effective method to showcase your products and services.
• Through interactive database facility you can take data from users from
various modes this helps to reach out to the users and getting their review.
18
Language Used :
PHP :
• PHP stands for Hypertext Preprocessor.
• PHP is an interpreted language, i.e., there is no need for compilation.
• PHP is faster than other scripting languages, for example, ASP and JSP.
• PHP is a server-side scripting language, which is used to manage the dynamic
content of the website.
• PHP can be embedded into HTML.
• PHP is an object-oriented language and it is an open-source scripting
language.
• The PHP is used to create dynamic websites, so that one can create dynamic
web pages which is a drawback of html where one can create only static web
pages.
Brief History of PHP :

PHP is a language for creating website that can be more or less interactive. It was
created in 1994 by Rasmus Lerdorf who was a software engineer and who was part of
the Apache Team. In the same year, he created a package, added some database support
and called it PHP/FI (Form Interpretation).
In 1995, it was called the Personal Home Page Tool then was released as version2 with
a name called PHP/FI (a form interpreter responsible for analysing queries). In mid of
1997, more than 50,000 websites began using PHP and in October, 1998, there was an
increase in the number of websites using PHP which was about 100,000.
In 2000, there was a release of PHP 4.0.2. And currently over 1,000,000 sites in the
whole world are using PHP.
19
PHP and its Uses :
PHP can help read and write files. It also can do basic files and directory maintenance;
therefore it basically can help one in editing documents. It can also take content that can
be used in the generation of files in various formats which can include HTML
(Hypertext Markup Language) and PDF. It also can help manage graphical content
which include charts. Not only can it do the above but can it also read, write information
in a database.
Basic Syntax for PHP :
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
CSS ( Cascading Style Sheet ) :
1. Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML and
PHP.
2. CSS is designed to enable the separation of presentation and content, including
layout, colours, and fonts.
3. It is generally used with HTML and PHP to change the style of web pages and
user interfaces. It can also be used with any kind of XML documents including
plain XML, SVG and XUL.
4. CSS style definitions are saved in external CSS files so it is possible to change
the entire website by changing just one file.
20
5. CSS provides more detailed attributes than plain HTML to define the look and
feel of the website.
Database:
The Database is used to take the data from the user and save it on the system, which
only will be visible to the system admin. The feedback form is created to take user data
from the user and share their personal views about the website and the difficulties they
faced. So, that we can improve the website.
Many databases available like MySQL, Sybase, Oracle, MongoDB, PostgreSQL, SQL
Server, etc. In this section, we are going to focus on MySQL mainly.
MySQL :
MySQL is currently the most popular database management system software used for
managing the relational database. It is open-source database software, which is
supported by Oracle Company. It is fast, scalable and easy to use database management
system in comparison with Microsoft SQL Server and Oracle Database. It is commonly
used in conjunction with PHP scripts for creating powerful and dynamic server-side or
web-based enterprise applications.
MySQL follows the working of Client-Server Architecture. This model is designed for
the end-users called clients to access the resources from a central computer known as a
server using network services. Here, the clients make requests through a graphical user
interface (GUI), and the server will give the desired output as soon as the instructions
are matched. The process of MySQL environment is the same as the client-server model.
21
MySQL works on many operating systems and with many languages including PHP,
PERL, C, C++, JAVA, etc. MySQL works very quickly and works well even with large
data sets. MySQL is very friendly to PHP, the most appreciated language for web
development.
22
SOFTWARE
AND
HARDWARE
REQUIREMENT
23
4) SOFTWARE AND HARDWARE REQUIREMENT
SPECIFICATION
HARDWARE:
Hardware is being defined as under it contain how processor speed and how much RAM
will be used for the better performance of the website.
Device Name: DESKTOP-CTE61DT
Installed RAM : 16.0 GB (15.9 GB usable)
Hard Disk : 512 SSD
Processor : Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz 2.50 GHz
Input : Keyboard and Mouse
System Type : 64-bit operating system, x64-based processor
SOFTWARE :
Software is defined as under it contain in which Operating System and on which web
browser has supported for the performance of the website
Browser : Internet Explorer, Google Chrome
Text Editor : Visual Studio
Localhost : Xampp Server
OPERATING SYSTEM :
Windows 10 Pro
24
DETAILED SYSTEM
ANALYSIS
25
5 ) DETAILED SYSTEM ANALYSIS
5.1 ) Data Flow Diagram
Login /
The Digital Crew
Registration
DATABASE
26
5.2 ) Data Structure and Tables
DATABASE :
USERS TABLE :
BUYING TABLE :
27
CONTACT TABLE :
JOBS TABLE :
28
5.3 ) Entity Relationship Diagram
Use
r
Login / Registration
The Digital Crew
Home About Us Services Portfolio Contact Job Logout

Vacncie
s
Buying My Contact Jobapply

Form Work Form Form
PHP Pages
DATA
BASE
29
SYSTEM DESIGN
30
6.1) FORM DESIGN :
SINGUP FORM :
LOGIN FORM :
31
BUYING FORM :
JOB VACANCIES FORM :
32
CONTACT FORM :
33
6.2) SOURCE CODE :
INDEX PAGE CODE :
<?php include 'include/config.php'; ?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>The Digital Crew</title>
<meta content="" name="description">
<meta content="" name="keywords">

<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

<link
href="https://fonts.googleapis.com/cssfamily=Open+Sans:300,300i,400,400i,600,600i
,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,4
00,400i,500,500i,600,600i,700,700i"
rel="stylesheet">

<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>

<header id="header">
34
<div class="container">
<h1><a href="index.php">The Digital Crew</a></h1>


<h2>Here Is <span>Services Based Website</span> from Nagpur, India</h2>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link active" href="#header">Home</a></li>
<li><a class="nav-link active" href="#Information">Information</a></li>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#services">Services</a></li>
<li><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li><a class="nav-link" href="#jobs">Job Vacncies</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>

<li><a class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17"
fill="currentColor"
class="bi bi-person-square" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-
2H2zm12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1v-1c0-1-1-4-6-4s-6 3-6 4v1a1 1 0 0 1-1-
1V2a1 1 0 0 1 1-1h12z" />
</svg>
<?php
if ($_SESSION['user_data']) {
echo ' ' . $_SESSION['user_data']['username'];
} else {
header('location: login.php');
}
?>
</a></li>

<li class="dropdown"><a href="#"><span>
35
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
fill="currentColor" class="bi bi-gear"
viewBox="0 0 16 16">
<path
d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-
6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
<path
d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0
1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52
1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-
.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1
1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-
.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-
.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-
.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-
.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693
1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116
2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115
2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693
1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-
1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945
8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06
4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-
1.115l.094-.319z" />
</svg></span></a>
<ul>
<li><a class="nav-link" href="logout.php">Logout</a></li>
</ul>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<div class="social-links">
<a href="https://twitter.com/" target="_blank" class="twitter"><i class="bi bi-
twitter"></i></a>
<a href="https://www.facebook.com/" target="_blank" class="facebook"><i
class="bi bi-facebook"></i></a>
36
<a href="https://www.instagram.com/aditya_zodape456/" target="_blank"
class="instagram"><i
class="bi bi-instagram"></i></a>
<a href="#" target="_blank" class="linkedin"><i class="bi bi-linkedin"></i></a>
</header>

<section id="Information" class="Information">
<h2>What Is Information Technology ? </h2>
<p class="mt-4" style="font-size: large;">Information technology (IT) is the use of
computer systems or devices to
access information. Information technology is responsible for such a large portion
of our workforce, business
operations and personal access to information that it comprises much of our daily
activities. Whether you are
storing, retrieving, accessing or manipulating information, IT greatly impacts our
everyday lives. </p><br>
<p style="font-size: large;">Information technology is used by everyone from
enterprise companies all the way down
to one-person businesses and local operations. Global companies use it to manage
data and innovate their
processes. Even flea market sellers use smartphone credit card readers to collect
payments and street performers
give out a Venmo name to gather donations. If you use a spreadsheet to catalogue
which Christmas presents you
bought, you’re using information technology.</p>
<h2 class="mt-5">What Are The Types Of Information Technology ? </h2>
<p class="mt-4" style="font-size: large;">Information technology is a broad term
that involves the use of
technology to communicate, transfer data and process information.</p>
<p class="mt-5" style="font-size: large;">The different trends within information
technology include, but aren’t
limited to:</p>
<ul style="font-size: large;">
<li>Analytics </li>
<li>Automation </li>
<li>Artificial intelligence </li>
37
<li>Cloud computing </li>
<li>Communications </li>
<li>Cybersecurity </li>
<li>Data/database management </li>
<li>Infrastructure </li>
<li>Internet of things </li>
<li>Machine learning </li>
<li>Maintenance and repair </li>
<li>Networks </li>
<li>Robotics </li>
<li>Software/application development </li>
<li>SCADA </li>
</ul>
<h2 class="mt-5">Why Do We Need Information Technology ?</h2>
<p class="mt-4" style="font-size: large;">Information technology drives much of
what we do in our personal and
professional lives. It is the foundation of our communication, technological
advancement, innovation,
sustainability and recreation. We use information technology on a personal level
to connect and communicate with
others, play games, share media, shop and be social.</p>
<p class="mt-5" style="font-size: large;">From a career perspective, information
technology is largely responsible
for much of our business operations and spans nearly every industry. From
healthcare to food services,
manufacturing to sales, and beyond, we rely on IT to help connect us to others,
store and manage information and
create more efficient processes.</p>
<h2 class="mt-5">IT Career Opportunities : </h2>
<p class="mt-4" style="font-size: large;">According to Cyberstates 2020, there
were 12.1 million technology-based
jobs in 2020, which continues to grow year over year. Careers in IT span many
different areas, from computer
hardware and software development to networking, computer repair, technical
support, cybersecurity, cloud
computing, artificial intelligence, data science and so much more. What
originally began as a siloed department,
38
information technology is now considered a critical business function that
impacts nearly every aspect of an
organization.</p>
<h2 class="mt-5">What Exactly Is an IT Job ? </h2>
<p class="mt-4" style="font-size: large;">An IT job is any position that involves
the implementation, support,
maintenance, repair or protection of data or computer systems. Those involved in
development, deployment or
support of the systems or applications others use are the most common examples
of IT jobs. If you like problem
solving and being an active learner, a technology job could be right for you.</p>
<h2 class="mt-5">Examples of IT Jobs </h2>
<p class="mt-4" style="font-size: large;">Information technology is a broad term
that involves the use of
technology to communicate, transfer data and process informationIT jobs run the
gamut. Here’s a brief rundown of
some IT job possibilities. Keep in mind that these positions can also be industry
specific, so you could work
one of the following roles in an industry of your choice.</p>
<p class="mt-5" style="font-size: large;">Hardware-based IT jobs could include
any of the following :</p>
<li>Help desk technician </li>
<li>Computer technician </li>
<li>Network engineer/architect </li>
<li>Hardware manufacturer </li>
<li>Cloud engineer </li>
<li>Cloud architect </li>
</ul>
<p class="mt-5" style="font-size: large;">Software-based jobs might involve
developing applications or programs
and may include the following :</p>
<li>Software developer </li>
<li>Software engineer </li>
<li>Programmer </li>
<li>Mobile application developer </li>
39
<li>Web developer </li>
<li>Product owner/support </li>
</ul>
<p class="mt-5" style="font-size: large;">IT jobs that involve data protection or
incident response fall under
cybersecurity and may include the following :</p>
<li>Cybersecurity specialist </li>
<li>Cybersecurity analyst </li>
<li>Cybersecurity architect </li>
<li>Forensic analyst </li>
<li>Malware analyst </li>
<li>Threat hunter </li>
<li>Pen tester/ethical Hacker </li>
</ul>
<p class="mt-5" style="font-size: large;">Jobs in information technology that
involve data collection, storage or
analysis fall under data jobs, which may include :</p>
<li>Data scientist/analyst </li>
<li>Data engineer </li>
<li>Database engineer </li>
<li>Data privacy officer </li>
<li>Business intelligence analyst </li>
</ul>
</div>
</section>

<section id="about" class="about">

<div class="about-me container">
<div class="section-title">
<h2>About</h2>
<p>Learn more about us</p>
</div>
<div class="row">
<div class="col-lg-4" data-aos="fade-right">
40
<img src="assets/img/me.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
<h3>The Digital Crew</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et
dolore
magna aliqua.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Start Up:</strong>
<span>May 1995</span></li><br>
<li><i class="bi bi-chevron-right"></i> <strong>Email:</strong>
<span>thedigitalcrew@email.com</span>
</li><br>
<li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong>
<span>+91 76202 04797</span></li>
</ul>
</div>
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Website:</strong>
<span>www.thedigitalcrew.com</span>
</li><br>
<li><i class="bi bi-chevron-right"></i> <strong>Freelance:</strong>
<span>Available</span></li><br>
<li><i class="bi bi-chevron-right"></i> <strong>City:</strong>
<span>Nagpur, India</span></li>
</ul>
</div>
</div>
<p>
As IT industry is one of the biggest industry in India, many IT companies are
present in India.
41
IT companies offers various services like Business process outsourcing,
knowledge process outsourcing,
solutions to software problems and many more. IT companies offering these
services in Nagpur are:
</p>
</div>
</div>
</div>

<div class="counts container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="count-box">
<i class="bi bi-emoji-smile"></i>
<span data-purecounter-start="0" data-purecounter-end="232" data-
purecounter-duration="1"
class="purecounter"></span>
<p>Happy Clients</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-md-0">
<i class="bi bi-journal-richtext"></i>
<p>Projects</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<i class="bi bi-headset"></i>
<p>Hours Of Support</p>
</div>
42
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<i class="bi bi-award"></i>
<p>Awards</p>
</div>
</div>
</div>
</div>

<div class="skills container">
<h2>We Work On This Languages For Making Projects</h2>
</div>
<div class="row skills-content">
<div class="progress">
<span class="skill">HTML <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-
valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<span class="skill">CSS <i class="val">90%</i></span>
</div>
</div>
</div>
<span class="skill">JavaScript <i class="val">75%</i></span>
43
</div>
</div>
</div>
</div>
<span class="skill">PHP <i class="val">80%</i></span>
</div>
</div>
</div>
<span class="skill">WordPress/CMS <i class="val">90%</i></span>
</div>
</div>
</div>
<span class="skill">Photoshop <i class="val">55%</i></span>
</div>
</div>
</div>
</div>
</div>
</div>

44

<div class="testimonials container">
<h2>Employees</h2>
</div>
<div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="testimonial-item">
<p>
Email : konikamool@gmail.com<br><br>
Phone : 7218933726<br><br>
<a href="https://twitter.com/" target="_blank" class="twitter test-icon"><i
class="bi bi-twitter"></i></a>
<a href="" target="_blank" class="facebook test-icon"><i class="bi bi-
facebook"></i></a>
class="instagram test-icon"><i
</p>
<img src="assets/img/employee/konika.jpg" class="testimonial-img" alt="">
<h3>Konika Mool</h3>
<h4>Data Analytics</h4>
</div>
</div>

<p>
Email : adityavzodape2002@gmail.com<br><br>
Phone : 7620207497<br><br>
<a href="https://www.facebook.com/" target="_blank" class="facebook"
test-icon><i
45
</p>
<img src="assets/img/employee/Ceo.jpg" class="testimonial-img" alt="">
<h3>ADITYA ZODAPE</h3>
<h4>Ceo & Founder</h4>
</div>
</div>
<p>
Email : krutikameshram933@gmail.com<br><br>
Phone : 8010273667<br><br>
<a href="https://www.facebook.com/" target="_blank" class="facebook test-
icon"><i
<a href="https://www.instagram.com/krutika1235/" target="_blank"
</p>
<img src="assets/img/employee/Designer.jpg" class="testimonial-img"
alt="">
<h3>KRUTIKA MESHRAM</h3>
<h4>Web & Designer</h4>
</div>
</div>
<p>
Email : ramtekerohit@gmail.com<br><br>
Phone : 7558658740<br><br>
46
icon"><i
<a href="https://www.instagram.com/ramteke855/" target="_blank"
</p>
<img src="assets/img/employee/Ceo.jpg" class="testimonial-img" alt="">
<h3>Rohit Ramteke</h3>
<h4>JAVA & Devloper</h4>
</div>
</div>
<p>
Email : krutikameshram933@gmail.com<br><br>
Phone : 8010273667<br><br>
icon"><i
</p>
<img src="assets/img/employee/Designer.jpg" class="testimonial-img"
alt="">
<h3>KRUTIKA MESHRAM</h3>
<h4>Designer</h4>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
47
<div class="owl-carousel testimonials-carousel">
</div>
</div>
</section>

<section id="services" class="services">
<h2>Services</h2>
<p>My Services</p>
</div>
<?php
if (isset($_POST['buynow'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$address = $_POST['address'];
$service = $_POST['service'];
$message = $_POST['message'];
$sql = "INSERT INTO buying (name, email, number, address, service, message)
VALUES ('$name','$email','$phone','$address','$service','$message')";
mysqli_query($db, $sql);
}
?>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
<div class="icon-box">
<div class="icon"><i class="bx bxl-dribbble"></i></div>
<h4>Web Design</h4>
<p>Web design refers to the design of websites that are displayed on the
internet. </p><br></br>
<button class="btn btn-success"><a href="buyingform.php">Buy
Now</a></button>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
48
<div class="icon"><i class="bx bx-file"></i></div>
<h4>Data Analytics</h4>
<p>Data analytics is the science of analyzing raw data to make conclusions
about that information.</p>
<br></br>
Now</a></button>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
<div class="icon"><i class="bx bx-tachometer"></i></div>
<h4>Cybersecurity Services</h4>
<p>Cyber security is the practice of defending computers, servers, networks,
and data from malicious
attacks.</p><br></br>
Now</a></button>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
<div class="icon"><i class="bx bx-world"></i></div>
<h4><a href="">Web Application</a></h4>
<p>A web-application is an application program that is usually stored on a
remote server, and users can
access it through the use of Software known as web-browser.</p><br></br>
Now</a></button>
</div>
</div>
<div class="icon"><i class="bx bx-slideshow"></i></div>
<h4><a href="">Anti-Virus Protection</a></h4>
<p>An antivirus product is a program designed to detect and remove viruses
and other kinds of malicious
49
software from your computer or laptop.</p><br></br>
Now</a></button>
</div>
</div>
<div class="icon"><i class="bx bx-arch"></i></div>
<h4><a href="">Data Backup and Restoration</a></h4>
<p>Backup and recovery describes the process of creating and storing copies
of data that can be used to
protect organizations against data loss.</p><br></br>
Now</a></button>
</div>
</div>
</div>
</div>
</section>


<section id="portfolio" class="portfolio">
<h2>Portfolio</h2>
<p>My Works</p>
</div>
<div class="row">
<div class="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">Web-Application</li>
<li data-filter=".filter-web">Web design</li>
</ul>
</div>
</div>
<div class="row portfolio-container">
50
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/shoes.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>Daily Shoes Wear</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/shoes.jpg" data-gallery="portfolioGallery"
class="portfolio-lightbox"
title="Daily Shoes Wear"><i class="bx bx-plus"></i></a>
<a href="shoes.php" data-gallery="portfolioDetailsGallery" data-
glightbox="type: external"
class="portfolio-details-lightbox" title="Portfolio Details"><i class="bx
bx-link"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<img src="assets/img/portfolio/medicean.jpg" class="img-fluid" alt="">
<h4>Health Care E-Shop</h4>
<p>App</p>
<a href="assets/img/portfolio/medicean.jpg" data-gallery="portfolioGallery"
title="Health Care E-Shop"><i class="bx bx-plus"></i></a>
<a href="medicean.php" data-gallery="portfolioDetailsGallery" data-
bx-link"></i></a>
</div>
</div>
</div>
</div>
51
<img src="assets/img/portfolio/restaurant.jpg" class="img-fluid" alt="">
<h4>Chaska Food</h4>
<p>App</p>
<a href="assets/img/portfolio/restaurant.jpg" data-
gallery="portfolioGallery" class="portfolio-lightbox"
title="Chaska Food"><i class="bx bx-plus"></i></a>
<a href="restaurant.php" data-gallery="portfolioDetailsGallery" data-
bx-link"></i></a>
</div>
</div>
</div>
</div>
<img src="assets/img/portfolio/cake.jpg" class="img-fluid" alt="">
<h4>Make Your Own Cakes</h4>
<p>Web </p>
<a href="assets/img/portfolio/cake.jpg" data-gallery="portfolioGallery"
title="Make Your Own Cakes"><i class="bx bx-plus"></i></a>
<a href="cake.php" data-gallery="portfolioDetailsGallery" data-
bx-link"></i></a>
</div>
</div>
</div>
</div>
52
<img src="assets/img/portfolio/ladies.jpg" class="img-fluid" alt="">
<h4>Ladies Accessories</h4>
<p>App</p>
<a href="assets/img/portfolio/ladies.jpg" data-gallery="portfolioGallery"
title="Ladies Accessories"><i class="bx bx-plus"></i></a>
<a href="ladies.php" data-gallery="portfolioDetailsGallery" data-
bx-link"></i></a>
</div>
</div>
</div>
</div>
<img src="assets/img/portfolio/watch.jpg" class="img-fluid" alt="">
<h4>Run With Time</h4>
<p>Web</p>
<a href="assets/img/portfolio/watch.jpg" data-gallery="portfolioGallery"
title="Run With Time"><i class="bx bx-plus"></i></a>
<a href="watch.php" data-gallery="portfolioDetailsGallery" data-
bx-link"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
53


<section id="jobs" class="services">
<h2>Jobs</h2>
<p>Job Vacncies</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
<div class="icon"><i class="bi bi-filetype-html"></i></div>
<h4>HTML</h4>
<p>Web design refers to the design of websites that are displayed on the
internet. </p><br></br>
<button class="btn btn-success"><a href="jobs.php">Apply
Now</a></button>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
<div class="icon"><i class="bi bi-filetype-php"></i></div>
<h4>PHP</h4>
<p>Data analytics is the science of analyzing raw data to make conclusions
about that information.</p>
<br></br>
Now</a></button>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
<div class="icon"><i class="bi bi-filetype-css"></i></div>
<h4>Cybersecurity Services</h4>
<p>Cyber security is the practice of defending computers, servers, networks,
and data from malicious
attacks.</p><br></br>
54
Now</a></button>
</div>
</div>
<div class="icon"><i class="bi bi-filetype-java"></i></div>
<h4>ADVANCE JAVA</h4>
<p>A web-application is an application program that is usually stored on a
remote server, and users can
access it through the use of Software known as web-browser.</p><br></br>
Now</a></button>
</div>
</div>
<div class="icon"><i class="bi bi-filetype-js"></i></div>
<h4><a href="">Anti-Virus Protection</a></h4>
<p>An antivirus product is a program designed to detect and remove viruses
and other kinds of malicious
software from your computer or laptop.</p><br></br>
Now</a></button>
</div>
</div>
<div class="icon"><i class="bi bi-filetype-sql"></i></div>
<h4><a href="">Data Backup and Restoration</a></h4>
<p>Backup and recovery describes the process of creating and storing copies
of data that can be used to
protect organizations against data loss.</p><br></br>
Now</a></button>
</div>
</div>
55
</div>
</div>
</section>


<section id="contact" class="contact">
<?php
if (isset($_POST['sendnow'])) {
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$username = $_POST['username'];
$state = $_POST['state'];
$pincode = $_POST['pincode'];
$number = $_POST['number'];
$age = $_POST['age'];
$qualification = $_POST['qualification'];
$applicant = $_POST['applicant'];
$resume = $FILES['resume']['name'];
$gender = $_POST['gender'];
$sql = "INSERT INTO `jobs` (`firstname`, `lastname`, ùsername`,

àddress`,`state`, `pincode`, èmail`, `number`,àge`, `qualification`,
àpplicant`,`resume`,`gender`) VALUES ('$firstname', '$lastname', '$username',
'$address','$state', '$pincode', '$email', '$number','$age', '$qualification', '$applicant',
'$resume','$gender')";
if (mysqli_query($db, $sql)) {
move_uploaded_file($FILES['resume']['tmp_name'], "upload/");
header('location: ../index.php');
} else {
header('location: ../singup.php?error');
}
}
?>
56
<h2>Contact</h2>
<p>Contact Me</p>
</div>
<div class="row mt-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-map"></i>
<h3>My Address</h3>
<p>Civil Lines, Amravati Road, Nagpur -440001.</p>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0 d-flex align-items-stretch">
<i class="bx bx-share-alt"></i>
<h3>Social Profiles</h3>
<div class="social-links">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="google-plus"><i class="bi bi-skype"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<i class="bx bx-envelope"></i>
<h3>Email Me</h3>
<p>gscollegenagpur@rediffmail.com</p>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<i class="bx bx-phone-call"></i>
<h3>Call Me</h3>
<p>Tel -0712-2531760 <br>Fax - 0712-2528747</p>
</div>
57
</div>
</div>
<div class="text-center mt-5 border p-3">
<iframe class="myMap"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3721.127090394
3623!2d79.06040107517977!3d21.14733998053185!2m3!1f0!2f0!3f0!3m2!1i1024!2i
768!4f13.1!3m3!1m2!1s0x3bd4c05f13abe559%3A0x4bf4d1ebde5cbba2!2sG.%20S.
%20College%20of%20Commerce%20%26%20Economics!5e0!3m2!1sen!2sin!4v167
9425659625!5m2!1sen!2sin"
style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-
referrer-when-downgrade"></iframe>
</div>
<?php
if (isset($_POST['send_message'])) {
$subject = $_POST['subject'];
$message = $_POST['message'];
$sql = "INSERT INTO contact (name, email, subject, address, message)

VALUES ('$name','$email','$subject','$address','$message')";
}
?>
<div class="container w-50 m-auto">
<form action="#" method="POST" autocomplete="off">
<div class="user my-4">
<label for="name">Username: </label>
<input type="text" name="name" id="name" class="form-control"
placeholder="Enter Username" required>
</div>
<div class="email my-3">
<label for="email">E-mail: </label>
<input type="email" name="email" id="email" class="form-control"
placeholder=" Enter Email" required>
58
</div>
<div class="contact my-3">
<label for="contact">Subject: </label>
<input type="subject" name="subject" id="subject" class="form-control"
placeholder=" Enter Subject"
required>
</div>
<div class="address my-3">
<label for="address">Address: </label>
<input class="form-control" type="text" name="address" id="address"
class="form-control"
placeholder="Enter Address" required>
</div>
<div class="message my-3">
<label for="message">Message: </label>
<textarea name="message" id="message" class="form-control" cols="30"
rows="5" placeholder="Enter Message"
required></textarea>
</div>
<button class="btn btn-success" name="send_message">Send
Message</button>
</form>
</div>
</div>
</section>
<div class="credits">




Designed by <a href="https://www.instagram.com/krutika1235/"
target="_blank">Krutika_Meshram</a>
</div>

<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
59
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>

<script src="assets/js/main.js"></script>
</body>
</html>
60
CSS CODE :
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
background-color: #040404;
color: #fff;
position: relative;
background: transparent;
}
body::before {
content: "";
position: fixed;
background: #040404 url("../img/bg.jpg") top right no-repeat;
background-size: cover;
left: 0;
right: 0;
top: 0;
height: 100vh;
z-index: -1;
}
@media (min-width: 1024px) {

body::before {
background-attachment: fixed;
}
}
a{
color: #18d26e;
text-decoration: none;
}
a:hover {
color: #35e888;
text-decoration: none;
}
h1,
61
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
transition: ease-in-out 0.3s;
position: relative;
height: 100vh;
display: flex;
align-items: center;
z-index: 997;
overflow-y: auto;
}
#header * {
}
#header h1 {
font-size: 48px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
font-family: "Poppins", sans-serif;
}
#header h1 a,
#header h1 a:hover {
color: #fff;
line-height: 1;
display: inline-block;
}
#header h2 {
font-size: 24px;
62
margin-top: 20px;
color: rgba(255, 255, 255, 0.8);
}
#header h2 span {
color: #fff;
border-bottom: 2px solid #18d26e;
padding-bottom: 6px;
}
#header img {
padding: 0;
margin: 0;
}
#header .social-links {
margin-top: 40px;
display: flex;
}
#header .social-links a {
font-size: 16px;
display: flex;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
color: #fff;
line-height: 1;
margin-right: 8px;
border-radius: 50%;
width: 40px;
height: 40px;
}
#header .social-links a:hover {

background: #18d26e;
}
@media (max-width: 992px) {

#header h1 {
font-size: 36px;
}
63
#header h2 {
font-size: 20px;
line-height: 30px;
}
#header .social-links {
margin-top: 15px;
}
#header .container {
display: flex;
flex-direction: column;
}
}
/* Header Top */
#header.header-top {
height: 125px;
position: fixed;
left: 0;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.9);
overflow: hidden;
}
#header.header-top .social-links,
#header.header-top h2 {
display: none;
}
margin-right: auto;
font-size: 36px;
}
#header.header-top .container {
display: flex;
}
#header.header-top .navbar {
64
margin: 0;
}

#header.header-top {
height: 60px;
}
font-size: 26px;
}
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
margin-top: 35px;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar li {
position: relative;
}
.navbar li+li {
margin-left: 30px;
}
.navbar a,
.navbar a:focus {
display: flex;
65
justify-content: space-between;
padding: 0;
font-size: 16px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #18d26e;
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before,
.navbar li:hover>a:before,
.navbar .active:before {
visibility: visible;
width: 25px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #fff;
66
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
position: fixed;
right: 15px;
top: 15px;
}

.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
transition: 0.3s;
z-index: 999;
margin-top: 0;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
67
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 45px;
left: 15px;
padding: 10px 0;
overflow-y: auto;
transition: 0.3s;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.navbar-mobile li {
padding: 12px 20px;
}
.navbar-mobile li+li {
margin: 0;
}
.navbar-mobile a,
.navbar-mobile a:focus {
font-size: 16px;
position: relative;
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
z-index: 2;
}
68
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
}
section .container {
background: #000;
padding: 30px;
}

section {
top: 120px;
}
section.section-show {
top: 80px;
}
}
.section-title h2 {
font-size: 14px;
font-weight: 500;
padding: 0;
line-height: 1px;
margin: 0 0 20px 0;
letter-spacing: 2px;
text-transform: uppercase;
color: #aaaaaa;
}
.section-title h2::after {
content: "";
width: 120px;
height: 1px;
background: #4ceb95;
margin: 4px 10px;
}
69
.section-title p {
margin: 0;
margin: -15px 0 15px 0;
font-size: 36px;
font-weight: 700;
color: #fff;
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about-me .content h3 {
font-weight: 700;
font-size: 26px;
color: #18d26e;
}
.about-me .content ul {
list-style: none;
padding: 0;
}
.about-me .content ul li {
margin-bottom: 20px;
display: flex;
}
.about-me .content ul strong {

margin-right: 10px;
}
.about-me .content ul i {
font-size: 16px;
margin-right: 5px;
color: #18d26e;
line-height: 0;
}
.about-me .content p:last-child {

70
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
padding: 70px 0 60px;
}
.counts .count-box {
padding: 30px 30px 25px 30px;
width: 100%;
position: relative;
text-align: center;
background: rgba(255, 255, 255, 0.08);
}
.counts .count-box i {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
background: #212529;
padding: 12px;
color: #18d26e;
border-radius: 50px;
line-height: 0;
}
.counts .count-box span {

font-size: 36px;
display: block;
font-weight: 600;
color: #fff;
}
.counts .count-box p {
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-size: 14px;
71
}
/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills .progress {
height: 60px;
display: block;
background: none;
border-radius: 0;
}
.skills .progress .skill {

padding: 10px 0;
margin: 0;
display: block;
font-weight: 600;
color: #fff;
}
.skills .progress .skill .val {

float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: rgba(255, 255, 255, 0.2);
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: 0.9s;
}
/*--------------------------------------------------------------
# Interests
--------------------------------------------------------------*/
.interests .icon-box {
display: flex;
72
padding: 20px;
background: rgba(255, 255, 255, 0.08);
}
.interests .icon-box i {
font-size: 32px;
padding-right: 10px;
line-height: 1;
}
.interests .icon-box h3 {
font-weight: 700;
margin: 0;
padding: 0;
line-height: 1;
font-size: 16px;
color: #fff;
}
.interests .icon-box:hover {
background: rgba(255, 255, 255, 0.12);
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
box-sizing: content-box;
min-height: 320px;
}
.testimonials .testimonial-item .testimonial-img {

width: 90px;
border-radius: 50%;
margin: -40px 0 0 40px;
position: relative;
73
z-index: 2;
border: 6px solid rgba(255, 255, 255, 0.12);
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 45px;
color: #fff;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0 0 0 45px;
}
.testimonials .testimonial-item .quote-icon-left,

.testimonials .testimonial-item .quote-icon-right {
color: rgba(255, 255, 255, 0.25);
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {

left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {

right: -5px;
position: relative;
top: 10px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 15px 0 15px;
background: rgba(255, 255, 255, 0.1);
position: relative;
border-radius: 6px;
74
position: relative;
z-index: 1;
}
.test-icon{
margin: 6px !important;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {

width: 12px;
height: 12px;
opacity: 1;
background-color: rgba(255, 255, 255, 0.3);
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {

}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
text-align: center;
background: rgba(204, 204, 204, 0.1);
padding: 80px 20px;
transition: all ease-in-out 0.3s;
}
.services .icon-box .icon {

margin: 0 auto;
width: 64px;
height: 64px;
border-radius: 5px;
transition: all 0.3s ease-out 0s;
display: flex;
75
transform-style: preserve-3d;
}
.services .icon-box .icon i {

color: #fff;
font-size: 28px;
}
.services .icon-box .icon::before {

position: absolute;
content: "";
left: -8px;
top: -8px;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.15);
border-radius: 5px;
transition: all 0.3s ease-out 0s;
transform: translateZ(-1px);
}
.services .icon-box h4 {
font-weight: 700;
font-size: 24px;
}
.services .icon-box h4 a {
color: #fff;
}
.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .icon-box:hover {
border-color: #18d26e;
}
76
.services .icon-box:hover .icon {
background: #fff;
}
.services .icon-box:hover .icon i {

color: #18d26e;
}
.services .icon-box:hover .icon::before {

background: #35e888;
}
.services .icon-box:hover h4 a,
.services .icon-box:hover p {
color: #fff;
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
}
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 15px auto;
list-style: none;
text-align: center;
border-radius: 50px;
padding: 2px 15px;
}
.portfolio #portfolio-flters li {
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 1;
color: #fff;
77
background: rgba(255, 255, 255, 0.1);
margin: 0 3px 10px 3px;
transition: all 0.3s ease-in-out;
border-radius: 4px;
}
.portfolio #portfolio-flters li:hover,

.portfolio #portfolio-flters li.filter-active {
}
.portfolio #portfolio-flters li:last-child {

margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio .portfolio-wrap::before {
content: "";
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
z-index: 2;
opacity: 0;
}
.portfolio .portfolio-wrap .portfolio-info {

opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
78
text-align: center;
z-index: 3;
display: flex;
flex-direction: column;
}
.portfolio .portfolio-wrap .portfolio-info::before {

display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
top: 35px;
left: 35px;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info::after {

display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
bottom: 35px;
right: 35px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info h4 {

font-size: 20px;
color: #fff;
font-weight: 600;
}
79
.portfolio .portfolio-wrap .portfolio-info p {
color: #ffffff;
font-size: 14px;
padding: 0;
margin: 0;
}
.portfolio .portfolio-wrap .portfolio-links {

text-align: center;
z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {

color: #fff;
margin: 0 2px;
font-size: 28px;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {

color: #63eda3;
}
.portfolio .portfolio-wrap:hover::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info {

opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info::before {

top: 15px;
left: 15px;
}
.portfolio .portfolio-wrap:hover .portfolio-info::after {

80
bottom: 15px;
right: 15px;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 40px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
.portfolio-details .container {
padding-top: 20px;
}
.portfolio-details .portfolio-title {
font-size: 26px;
font-weight: 700;
}
.portfolio-details .portfolio-info {
padding-top: 45px;
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 400;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
81
}
.portfolio-details .portfolio-info ul li+li {

margin-top: 10px;
}
.portfolio-details .portfolio-info p {
font-size: 15px;
padding: 15px 0 0 0;
}

.portfolio-details .portfolio-info {
padding-top: 20px;
}
}
.portfolio-details .swiper-pagination {
margin-top: 20px;
position: relative;
}
.portfolio-details .swiper-pagination .swiper-pagination-bullet {

width: 12px;
height: 12px;
opacity: 1;
background-color: rgba(255, 255, 255, 0.3);
}
.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {

}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
color: #444444;
padding: 20px;
width: 100%;
background: rgba(255, 255, 255, 0.08);
}
82
.contact .info-box i.bx {
font-size: 24px;
color: #18d26e;
border-radius: 50%;
padding: 14px;
float: left;
background: rgba(255, 255, 255, 0.1);
}
.contact .info-box h3 {
font-size: 20px;
color: rgba(255, 255, 255, 0.5);
font-weight: 700;
margin: 10px 0 8px 68px;
}
.contact .info-box p {
padding: 0;
color: #fff;
line-height: 24px;
font-size: 14px;
margin: 0 0 0 68px;
}
.contact .info-box .social-links {

margin: 5px 0 0 68px;
display: flex;
}
.contact .info-box .social-links a {

font-size: 18px;
color: #fff;
line-height: 1;
margin-right: 12px;
transition: 0.3s;
}
.contact .info-box .social-links a:hover {

color: #18d26e;
}
83
/*--------------------------------------------------------------
# Credits
--------------------------------------------------------------*/
.credits {
position: fixed;
right: 0;
left: 0;
bottom: 0;
padding: 15px;
text-align: right;
font-size: 13px;
color: #fff;
z-index: 999999;
}

.credits {
text-align: center;
padding: 10px;
}
}
.credits a {
color: #18d26e;
transition: 0.3s;
}
.credits a:hover {
color: #fff;
} /* ------------------------------ */
.arrow-btn{
width: 100%;
height: 20px;
/* background-color: yellow; */
display: flex;
justify-content: end;
position: relative;
}
.cross-icon{
position: absolute;
84
top: -30px;
right: -20;
}
/* --------- Drop Down ---------------*/
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: transparent;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover,

.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
color: #1eeb4e;
}
.navbar .dropdown:hover>ul {
opacity: 1;
85
top: 100%;
}
.navbar .dropdown .dropdown ul {

top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover>ul {

opacity: 1;
top: 0;
left: 100%;
}

.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover>ul {

left: -100%;
}
}
/* contact us css */
.form-control{
background-color: rgba(0,0,0,0.5) !important;
color: rgba(255, 255, 255, 0.81) !important;
border: 1px solid grey !important;
}
.myMap{
width: 100%;
height: 300px;
}
86
JAVASCRIPT CODE :
(function() {
"use strict";
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all)
if (selectEl) {
if (all) {
selectEl.forEach(e => e.addEventListener(type, listener))
} else {
selectEl.addEventListener(type, listener)
}
}
}
/**
* Scrolls to an element with header offset
*/
const scrollto = (el) => {
window.scrollTo({
top: 0,
87
behavior: 'smooth'
})
}
/**
* Mobile nav toggle
*/
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
/**
* Scrool with ofset on links with a class name .scrollto
*/
on('click', '#navbar .nav-link', function(e) {
let section = select(this.hash)
if (section) {
e.preventDefault()
let navbar = select('#navbar')

let header = select('#header')
let sections = select('section', true)
let navlinks = select('#navbar .nav-link', true)
navlinks.forEach((item) => {
item.classList.remove('active')
})
this.classList.add('active')
if (navbar.classList.contains('navbar-mobile')) {
navbar.classList.remove('navbar-mobile')
let navbarToggle = select('.mobile-nav-toggle')
navbarToggle.classList.toggle('bi-list')
navbarToggle.classList.toggle('bi-x')
88
}
if (this.hash == '#header') {
header.classList.remove('header-top')
sections.forEach((item) => {
item.classList.remove('section-show')
})
return;
}
if (!header.classList.contains('header-top')) {
header.classList.add('header-top')
setTimeout(function() {
})
section.classList.add('section-show')
}, 350);
} else {
})
section.classList.add('section-show')
}
scrollto(this.hash)
}
}, true)
/**
* Activate/show sections on load with hash links
*/
window.addEventListener('load', () => {
if (window.location.hash) {
let initial_nav = select(window.location.hash)
89
if (initial_nav) {
let header = select('#header')
let navlinks = select('#navbar .nav-link', true)
header.classList.add('header-top')
navlinks.forEach((item) => {
if (item.getAttribute('href') == window.location.hash) {
item.classList.add('active')
} else {
item.classList.remove('active')
}
})
setTimeout(function() {
initial_nav.classList.add('section-show')
}, 350);
scrollto(window.location.hash)
}
}
});
/**
* Skills animation
*/
let skilsContent = select('.skills-content');
if (skilsContent) {
new Waypoint({
element: skilsContent,
offset: '80%',
handler: function(direction) {
let progress = select('.progress .progress-bar', true);
progress.forEach((el) => {
el.style.width = el.getAttribute('aria-valuenow') + '%'
});
}
90
})
}
/**
* Testimonials slider
*/
new Swiper('.testimonials-slider', {
speed: 600,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 20
},
1200: {
slidesPerView: 3,
spaceBetween: 20
}
}
});
/**
* Porfolio isotope and filter
*/
window.addEventListener('load', () => {
let portfolioContainer = select('.portfolio-container');
91
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item',
layoutMode: 'fitRows'
});
let portfolioFilters = select('#portfolio-flters li', true);
on('click', '#portfolio-flters li', function(e) {

e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active');
});
this.classList.add('filter-active');
portfolioIsotope.arrange({
filter: this.getAttribute('data-filter')
});
}, true);
}
});
/**
* Initiate portfolio lightbox
*/
const portfolioLightbox = GLightbox({
selector: '.portfolio-lightbox'
});
/**
* Initiate portfolio details lightbox
*/
const portfolioDetailsLightbox = GLightbox({
selector: '.portfolio-details-lightbox',
width: '90%',
height: '90vh'
92
});
/**
* Portfolio details slider
*/
new Swiper('.portfolio-details-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Initiate Pure Counter
*/
new PureCounter();
})()
93
Header.php File :
<?php include 'include/config.php'; ?>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>The Digital Crew - Login / Sign up</title>
<meta content="" name="description">
<meta content="" name="keywords">

<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600
i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,4
00,400i,500,500i,600,600i,700,700i"
rel="stylesheet">

<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

<link href="assets/css/style.css" rel="stylesheet">
<title>Login / Sign up</title>
</head>
<body>
Footer.php File :
</body>
</html>
94
Contact.php File :
<?php
include 'include/config.php';
if(isset($_POST['send_message'])){
global $db;
$name = mysqli_real_escape_string($db, $_POST['name']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$subject = mysqli_real_escape_string($db, $_POST['subject']);
$message = mysqli_real_escape_string($db, $_POST['message']);
$contact = "INSERT INTO `contact` (`name`, èmail`, `subject`, `message`)

VALUES ('$name', '$email', '$subject', '$message')";
mysqli_query($db, $contact);
}
?>
95
Singup.php File:
<?php include 'include/header.php';?>

<div class="container mt-5 border p-5" style="width:500px; height: 700px;">
<form method="post" action="include/functions.php">
<div class="arrow-btn">
<a href="login.php" class="cross-icon"><i class="bi bi-x-circle-fill"
style="font-size: 25px;"></i></a>
</div>
<h1> The Digital Crew </h1><br>
<h3 Class= "center">Sign up Page</h3>
<div class="mt-5">
<label for="name" class="form-label">Name: </label>
<input type="text" class="form-control" id="name" name="name"
placeholder="Your Fullname" required minlength="2" maxlength="30">
</div>
<div class="mt-3">
<label for="email" class="form-label">Email: </label>
<input type="email" class="form-control" id="email" name="email"
placeholder="Your Email" required maxlength="30">
</div>
<div class="mt-3">
<label for="username" class="form-label">Username: </label>
<input type="text" class="form-control" id="username"
name="username" placeholder=" Your Username"required minlength="2"
maxlength="12">
</div>
<div class="mt-3">
<label for="password" class="form-label">Password: </label>
<input type="password" class="form-control" id="password"
name="password" placeholder="Your Password" required minlength="8"
maxlength="12">
</div>
<div class="mt-5">
<button class="btn btn-success" name="signup">Sign Up</button>
96
<?php if(isset($_GET['error'])){echo "<p class='text-danger mt-5'
style='font-size:small;'>Something went wrong...</p>";}?>
</div>
</form>
</div>
<?php include 'include/footer.php';?>
Login.php File :
<?php include 'include/header.php';?>
<div class="container mt-5 border p-5" style="width:500px;">

<form method="post" action="include/functions.php">
<h1>The Digital Crew<h1><br>

<h3>Login Page</h3>
<div class="mt-5">
<label for="username" class="form-label">Username: </label>
<input type="text" class="form-control" id="username"
name="username" placeholder="Enter Your Username" required minlength="2"
maxlength="12">
</div>
<div class="mt-3">
<label for="password" class="form-label">Password: </label>
<input type="password" class="form-control" id="password"
name="password" placeholder="Enter Your Password" required minlength="8"
maxlength="12">
</div>
<div class="mt-5">
<button class="btn btn-success" name="login">Login</button>
<p class="mt-5"><a href="singup.php" class="text-decoration-none text-
white">Create New Account</a></p>
<?php if(isset($_GET['error'])){echo "<p class='text-danger mt-5'
style='font-size:small;'>Incorrect Username/Password...</p>";}?>
97
</div>
</form>
</div>
<?php include 'include/footer.php';?>
Function.php File :
<?php
include 'config.php';
if(isset($_POST['signup'])){
$password = $_POST['password'];
$pass_enc = md5($password);
$sql = "INSERT INTO ùsers` (`name`, èmail`, ùsername`, `password`) VALUES
('$name', '$email', '$username', '$pass_enc')";
if(mysqli_query($db, $sql)){
header('location: ../login.php');
}
else{
header('location: ../singup.php?error');
}
}
if(isset($_POST['login'])){
$password = $_POST['password'];
$pass_enc = md5($password);
$sql = "SELECT * FROM ùsers` WHERE ùsername`='$username' AND
`password`='$pass_enc'";
$result = mysqli_query($db, $sql);
if($result -> num_rows > 0){

$_SESSION['user_auth'] = true;
98
$_SESSION['user_data'] = mysqli_fetch_assoc($result);
header('location: ../index.php');
}
else{
header('location: ../login.php?error');
}
}
?>
Jobs.php File:
<?php include 'include/header.php'; ?>
<div class="container mt-5 border p-5" style="width:800px; height: 700px;">

<form method="post" action="index.php" enctype="multipart/form-data">
<a href="index.php" class="cross-icon"><i class="bi bi-x-circle-fill"
style="font-size: 25px;"></i></a>
</div>
<h3> The Digital Crew </h3><br>
<div class="row">
<div class="col">
<label for="Firstname" class="form-label">First name : </label>
<input type="text" name="firstname" class="form-control"
placeholder="First name" required minlength="2" maxlength="10">
</div>
<div class="col">
<label for="Lastname" class="form-label">Last name : </label>
<input type="text" name="lastname" class="form-control"
placeholder="Last name" required minlength="2" maxlength="10">
</div>
<div class="col">
<label for="Username" class="form-label">Username : </label>
<div class="input-group mb-2">
<div class="input-group-prepend">
99
<div class="input-group-text">@</div>
</div>
<input type="text" name="username" class="form-control"
placeholder="User name" required minlength="2" maxlength="12">
</div>
</div>
</div>
<div class="col-md-6 mb-3">

<label for="Address" class="form-label">Address : </label>
<input type="text" name="address" class="form-control"
placeholder="Address" required minlength="2" maxlength="50">
</div>
<label for="State" class="form-label">State : </label>
<input type="text" name="state" class="form-control" placeholder="State"
required>
</div>
<label for="Pincode" class="form-label">Pincode : </label>
<input type="text" name="pincode" class="form-control"
placeholder="Pincode" required minlength="6" maxlength="6">
</div>
</div>

<label for="Email" class="form-label">Email : </label>
<input type="Email" name="email" class="form-control"
placeholder="Your Email" required minlength="12" maxlength="30">
</div>
<label for="Number" class="form-label">Number : </label>
100
<input type="text" name="number" class="form-control"
placeholder="Your Number" required minlength="2" maxlength="10">
</div>
<label for="Age" class="form-label">Age : </label>
<input type="text" name="age" class="form-control" placeholder="Your
Age" required minlength="2" maxlength="2">
</div>
</div>

<label for="Qualification" class="form-label">Qualification : </label>
<input type="text" name="qualification" class="form-control mt-2"
placeholder="Education" required>
</div>

<div class="custom-control custom-radio">
<input type="radio" name="applicant" class="custom-control-input"
required>
<label class="custom-control-label"
for="customRadio1">Experience</label><br>
<input type="radio" name="applicant" class="custom-control-input mt-4"
>
for="customRadio2">Freshers</label>
</div>
</div>
<div class="custom-file col-md-3 mb-3">

<label class="custom-file-label" for="customFile">Resume :</label>
<input type="file" name="resume" class="custom-file-input mt-3"
id="customFile">
101
</div>
</div>

<label for="Gender" class="form-label col-md-2 mb-3">Gender : </label>

<input type="radio" name="gender" required>
for="customRadioInline1">Male</label>
</div>
<input type="radio" name="gender">
for="customRadioInline2">Female</label>
</div>
</div>
<div class="mt-3">
<button class="btn btn-success" name="sendnow">Send Now</button>
<?php if (isset($_GET['error'])) {
echo "<p class='text-danger mt-5' style='font-size:small;'>Something went
wrong...</p>";
} ?>
</div>
</form>
</div>
<?php include 'include/footer.php'; ?>
102
Jobfunction.php File :
<?php
include 'config.php';
if(isset($_POST['sendnow'])){
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$state = $_POST['state'];
$pincode = $_POST['pincode'];
$number = $_POST['number'];
$age = $_POST['age'];
$qualification = $_POST['qualification'];
$applicant = $_POST['applicant'];
$resume = $_POST['resume'];
$gender = $_POST['gender'];
$sql = "INSERT INTO `jobs` (`firstname`, `lastname`, ùsername`, àddress`,`state`,
`pincode`, èmail`, `number`,àge`, `qualification`, àpplicant`,`resume`,`gender`)
VALUES ('$firstname', '$lastname', '$username', '$address','$state', '$pincode',
'$email', '$number','$age', '$qualification', '$applicant', '$resume','$gender')";
}
?>
103
Buyingform.php File :
<?php include 'include/header.php'; ?>
<form action="index.php" method="POST">

<div class="container mt-3 border p-5" style="max-width: 30rem;">
<div style="font-size: 25px; ">
<a href="index.php" class="cross-icon"><i class="bi bi-x-circle-fill" style="font-size:
25px;"></i></a>
</div>
<h2>Buy Services</h2>
</div>
<div >
<div class="mt-2">
<label for="name" class="form-label">Full Name: </label>
<input type="text" name="name" class="form-control" placeholder="Full name"
required>
</div>
<div class="mt-2">
<label for="email" class="form-label">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Email" required>
</div>
<div class="mt-2">
<label for="phone" class="form-label">Phone Number: </label>
<input type="number" name="phone" class="form-control" placeholder="Phone"
required>
</div>
<div class="mt-2">
<label for="address" class="form-label">Address : </label>
<input type="text" name="address" class="form-control" placeholder="Enetr your
address" required>
</div>
<div class="mt-2">
104
<label>Services type :</label>
<select class="form-select" name="service" data-bs-toggle="dropdown" required>
<option> --select services-- </option>
<option>Web Designed</option>
<option>Web Application</option>
<option>Cybersecurity Services</option>
<option>Data Analytics</option>
<option>Anti-Virus Protection</option>
<option>Data Backup and Restoration</option>
</select>
</div>
<div class="message mt-2">
<label for="message">Message: </label>
<textarea name="message" id="message" class="form-control" cols="30" rows="4"
placeholder="Message" required></textarea>
</div>
<div class="mt-3">
<button class="btn btn-success" name="buynow">Buy Now</button></div>
</div>
</div>
</form>
<?php include 'include/footer.php'; ?>
105
DATABASE CONECTIVITY :
Config.php File :
<?php
session_start();
$db_name = "portfolio";
$db_user = "root";
$db_pass = "";
$db_host = "localhost";
$db = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
?>
Logout.php File :
<?php
include 'include/config.php';
session_destroy();
header('location: login.php');
?>
106
6.3) INPUT SCREEN AND OUTPUT SCREEN :
SINGUP FORM :
LOGIN FORM :
107
HOME PAGE :
INFORMATION PAGE :
108
109
ABOUT PAGE :
110
SERVICE PAGE :
111
PORTFOLIO PAGE :
112
113
114
115
JOB VACANCIES PAGE :
116
CONTACT PAGE :
117
TESTING
AND
VALIDATION
CHECK
118
7 ) TESTING AND VALIDATION CHECK
TESTING
Testing plays important role to identify the quality of any software. Testing actually
refers to detecting errors in the system. Before testing can begin, a test plan needs to be
developed. Test plan actually includes the type of testing that has to be performed on
the code, resources for testing, how the software will be tested. There are several types
of testing during the test phase, that includes quality assurance testing (QAT), System
Integration testing (SIT), and user acceptance testing (UAT). • Quality Assurance (QA)
Testing: In this the procedures and processes are checked. This means whether the
instructions are executed as per the user requirements and commands.
• System Integration Testing (UAT): It verifies proper execution of software

components and proper interfacing between components within the solution. the
objective behind this testing is to validate that all software module dependencies are
functionally correct and that data integrity is maintained between separate modules for
the entire solution.
• User Acceptance Testing (UAT): This is the last phase of the software testing
procedure. During UAT, actual software users test the software to make sure it can
handle required tasks in real-world scenarios, according to specifications. UAT is one
of the final and critical software project procedures that must occur before newly
developed software is rolled out to actual use. Before testing the system, we need to
consider following questions in our mind.
119
What is the actual problem?
 How critical the problem is?

 Measures should be taken for the upcoming problems or errors?
Testing gives chance to upgrade or to improve if any drawbacks prevail in the

application.
Testing is generally done at two levels, testing of individual modules and testing entire
system.
During system testing, the system is used experimentally to ensure that the software
does not fall. that it will run according to its specification and in the way users expect.
Testing is done throughout system development at various stages.
Following are the type of testing done in the project:
1 ) Program Testing: In this, we have to concentrate on the software part, system

software should be free from errors. whether it is syntax error or logical error. In this
system, we have done software testing and the output of this test is satisfactory. It fulfills
all the conditions, which was required for the program testing.
2 ) Stress Testing: this test is conducted to check the performance of the system in main
hours. It finds out how much workload the system can bear. In stress testing of this
system, we come to know that this software can work easily and accurately at any
condition. The concentration is made on the performance of the system by checking the
giving input and their expected outputs.
3 ) Documentation Testing: this testing work to find out that whatever document
supplied is satisfactory or there is a need to supply further document. In this system, all
the documents which are supplied are satisfactory.
120
Different types of Testing
1 ) Unit Testing
Unit testing is a type of software testing which is done on an individual unit or

component to test its corrections. Typically, Unit testing is done by the developer at the
application development phase. Each unit in unit testing can be viewed as a method,
function, procedure, or object. Developers often use test automation tools such as
Unknit, Unit, JUnit for the test execution. Unit testing is important because we can find
more defects at the unit test level.
For example, there is a simple calculator application. The developer can write the unit
test to check if the user can enter two numbers and get the correct sum for addition
functionality.
2 ) Integration Testing
Integration testing is a type of software testing where two or more modules of an

application is logically grouped together and tested as a whole. The focus of this type
of testing is to find the defect on interface, communication, and data flow among
modules. Top-down or Bottom-up approach is used while integrating modules into the
whole system.
This type of testing is done on integrating modules of a system or between systems. For
example, a user is buying a flight ticket from any airline website.
Users can see flight details and payment information while buying a ticket, but flight
details and payment processing are two different systems. Integration testing should be
done while integrating of airline website and payment processing system.
121
3 ) System Testing
System testing is types of testing where tester evaluates the whole system against the
specified requirements.
a) End to End Testing
b) Black Box Testing
c) Smoke Testing
4 ) Acceptance Testing
Acceptance testing is a type of testing were client/business/customer test the software

with real time business scenarios. The client accepts the software only when all the
features and functionalities work as expected, this is the last phase of testing, after which
the software goes into production. This is also called User Acceptance Testing (UAT).
122
VALIDATION CHECKS
Data validation is the process of ensuring, at least as far as is possible, that the data
given to a program by a user or from a file (essentially, the system’s input) is of the
correct type, and in the correct format.
There are however measures that can be taken to restrict the program’s input to valid
data. such measures involve the application of validation rules to any data being input
to the program. In this system, Data validation rules can also make this system more
user friendly, since they enable the program to warn the user immediately when there is
a problem rather than simply allowing them to continue entering data until the program
crashes or some other problem occurs.
In this proposed system, we have introduced the following data validation rules:
1. Value entered check: this is used for things like required fields in online forums
where the user must enter some data (for example their username and password)
and must not leave the field blank.
2. Permitted character check: it is useful for determining whether an input string
contains valid characters. For example, a phone number may include the digits
0-9.
3. Limit check: It is used for numeric values that must either be greater than or equal
to some lower limit, or less than or equal to some upper limit. For example, the
limited number that a user can enter as a phone number is 10.
4. Confirmation check: At the time of creating an account in this system, it is used
for determining whether the enter password and confirm password are same or
not.
5. Email address check: At the time of creating an account, the system can only
accept a valid email id. For example, “@gmail.com”
123
SYSTEM SECURITY
MEASURES
124
8 ) SYSTEM SECURITY MEASURES
Security of a computer system is a crucial task. It is a process of ensuring confidentiality

A system is said to be secure if its resources are used and accessed as intended under all
the circumstances, but no system can guarantee absolute security from several of the
various threats and unauthorized access.
Security measures will be taken:
 Strong passwords :
This first measure is taken that users may used special characters in their
passwords and password length must be 8 characters.
 Confidentiality :
If any users is sharing their personal details in login form it will be secure safely
as only users can access such information.
125
IMPLEMENTATION,
EVALUATION &
MAINTENANCE
126
9) IMPLEMENTATION, EVALUATION & MAINTENANCE
IMPLEMENTATION
The software implementation stage involves the transformation of the software

technical data package (TDP) into one or more fabricated, integrated, and tested
software configuration items that are ready for software acceptance testing. The primary
activities of software implementation include the:
 Fabrication of software units to satisfy structural unit specifications.
 Assembly, integration, and testing of software components into a software

configuration item.
 Prototyping challenging software components to resolve implementation risks or

establish a fabrication proof of concept.
 Dry-run acceptance testing procedures to ensure that the procedures are properly
delineated and that the software product (software configuration items (CIs and
computing environment) is ready for acceptance testing.
The documentation is a complete description of the system from the user’s point of view
as it provides details of how to operate the given software and application. It also
includes certain error messages that a user is expected to encounter during its usage and
solution to the expected problems. It involves detained and step by step information of
the project development so as to modify or update as per the new user requirements.
127
EVALUATION
Evaluation phase is the next to the implementation and it evaluates whether or not the
system has met its requirements by comparing with the standards that were set before
its actual development. The evaluation process includes the study of the current system
and their drawbacks (if any) and various alternatives to improve and solve those
prevailing problems. Evaluation is done by keeping the preliminary requirements of the
user in mind. Evaluation is included as a part of the final phase, but practically,
evaluation takes place during each and every phase. The concentration should be on the
satisfying the primary requirement of the users. The system is evaluated on the basis of
following points:
 System Availability: whether the required system is available or not.
 Compatibility: whether the application is compatible with the system or not.
 Cost: whether the developed application is affordable and has low maintenance
cost.
 Performance: it basically checks the efficiency of the application. Efficiency in

handling the rush and fired queries simultaneously. It evaluates whether the
application generates result at same speed when load is given to it as when it is
stress free.
128
MAINTENANCE
Maintenance of software can include software upgrades, repairs, and fixes of the
software if it breaks.
Software applications often need to be upgraded or integrated with new systems the
customer deploys. It’s often necessary to provide additional testing of the software or
version upgrades. During the maintenance phase, errors or defects may exist, which
would require repairs during additional testing of the software. Monitoring the
performance of the software is also included during the maintenance phase.
Once the system is deployed, and customers start using the developed system, following
3 activities occur
 Bug fixing – bugs are reported because of some scenarios which are not tested at
all.
 Upgrade – Upgrading the application to the newer versions of the Software.
 Enhancement – Adding some new features into the existing software.
129
FUTURE SCOPE OF
PROJECT
130
10 ) FUTURE SCOPE OF PROJECT
1. Simple and Easy: This project procedure is user-friendly, easy, simple and error
free, it makes the software attractive.
2. Integration In present scenario this website cannot provide feature of Integration

with other applications as in future such platforms are well integrated with Email
, WhatsApp or SMS.
3. Providing more security In future this website can be update with more secured
as any users personal information cannot be hacked or also any users cannot be
hesitate to access or visit the website as more security features will be developed
in updated version.
4. Global Reach In future this website can be made globally Access as such
platforms can be developed so that website can be reach .
5. Additional features Efforts can be made in future for adding and developing
websites with additional features such as video facilities related to good deeds or
work made by public
131
CONCLUSION
132
11 ) CONCLUSION
As while working on project we have gain a more knowledge about programming

language and also help in how to apply or build a logic related program .
Our project is to design a tribute website and a main language we use is html with the
help of this language coding we create a Website as a student working on a project is
very challenging while facing a error but Because of teamwork we were successful in
completing this project.
Now we were clear about project that how project can be done or what are the steps
were taken while developing project .
So if we all over concluded that first we have to make a plan in mind how actually our
look or features of project and also project title then we have to also think about project
objectives is it good or bad for users then we have to make a preliminary investigation
or also do a overall feasibility study of project ,what software or hardware required and
also at last what will be the future scope of the project .
All above procedure will be done step by step so this study will help us in developing
project and overall this will help us to increase our coding skill or more knowledge
about technology so we thanks or teachers or mentor for giving us such knowledge or
supporting us this is will definitely help in future.
133
BIBLIOGRAPHY
AND
REFERENCE
134
12 ) BIBLIOGRAPHY AND REFERENCE
While developing this project internet was the eternal support. Following are the
websites referred by us which helped us in developing our project :
 www.w3schools.com
 www.html-color.codes.com
 www.mdbootstrap.com
 www.getbootstrap.com
 www.youtube.com
135
A
PROJECT
ON
“ Portfolio ”
Submitted to
Shiksha Mandal’s
G. S. COLLEGE OF COMMERCE & ECONOMICS, NAGPUR
(AUTONOMOUS)
In the Partial Fulfillment of
B.Com. (Computer Application) Final Year
Submitted by
Aditya Zodape
Krutika Meshram
Under the Guidance of

Pravin J. Yadao
Shiksha Mandal’s
G. S. COLLEGE OF COMMERCE &
ECONOMICS, NAGPUR
(AUTONOMOUS)
2022-2023
136
SYNOPSIS
1. Introduction: (Write 4 to 5 lines)
 This Project is a service based website.

 This Project is based upon Information about IT Company.
 User want to Give work to website Owner .
 This Website used for Everyone.
2. Objectives of the project: (Write only 5 points)
 To easily get online contract from user.

 To saving the time and Energy
 To making the platform for the people whose searching the jobs
 To easily get sevices through Website
3. Project Category: IT Industrial Website
4. Tools/ Platform/ Languages to be used: PHP , CSS , MYSQL , JAVAScript
5. Scope of future application: (Write 4 to 5 points)
 User can give Online Contract.

 This platform give the self employment to the people.
 Easy communication between people and website owner.
 People can get the quality of services.
137

8-1

Uploaded by

Document Information

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

8-1

Uploaded by

Copyright:

Available Formats

A

B.Com. (Computer Application) Final Year

Under the Guidance of

G. S. COLLEGE OF COMMERCE & ECONOMICS,

completed their project on the topic of “ Portfolio ” prescribed by G. S.

College of Commerce & Economics, Nagpur (Autonomous) for B.Com.

(Computer Application) – Semester-VI.

External Examiner Internal Examiner

encouragement, support and kindness.

Gawande, Prof. Preeti Rangari, Prof. Prajakta Deshpande and Prof.

for providing us wide range of opportunities, facilities and inspiration to gather

have been complete

that the work entitled “ Portfolio ” submitted by us at G. S. College of

Commerce & Economics, Nagpur (Autonomous) in partial fulfillment of

requirement for the award of B.Com. (Computer Application) degree by

Rashtrasant Tukadoji Maharaj, Nagpur University, Nagpur has not been

supervision of the subject teacher and project guide.

3 Preliminary System Analysis

5 Detailed System Analysis

9 Implementation, Evaluation & 126 – 129

10 Future Scope of Project 130 - 131

11 Conclusion 132 - 133

12 Bibliography and Reference 134 – 135

This Application Welcome to newly designed project software company portfolio is a

• The program and other operating information used by a computer.

• The software company includes business for maintain and publication of

• Integration : getting things working together to reduce risk and improve

• Business process : improving business process in areas such as efficiency and

• Algorithms : developing an optimized set of steps for solving business

• Information : providing customers, employees and partners with timely and

• Communications: tools and services that support the communications of an

• Infrastructure : foundation element such as network that support a wide

3.1) Preliminary Investigation:

3.2 ) Present System In Use :

3.3 ) Need Of The New System :

3.4 ) Feasibility Study :

The feasibility study has the following objectives:-

• Effective use of resources.

A feasibility study looks at the viability of an idea with an emphasis on identifying

• Whether the required technology is available or not.

• Whether the required resources are available like management programmers,

Once the technical feasibility is established, it is important to consider the monetary

Operational feasibility considers the acceptability of the system. It checks weather

• Website is simply known as collection of various web pages, which are

• A website mostly consists of static content. It is publicly accessible to all the

• The site doesn’t need to be pre-compiled.

• Website is an effective method to showcase your products and services.

Brief History of PHP :

CSS ( Cascading Style Sheet ) :

Device Name: DESKTOP-CTE61DT

Installed RAM : 16.0 GB (15.9 GB usable)

Hard Disk : 512 SSD

Processor : Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz 2.50 GHz

Input : Keyboard and Mouse

System Type : 64-bit operating system, x64-based processor

Browser : Internet Explorer, Google Chrome

Text Editor : Visual Studio

Localhost : Xampp Server

5.1 ) Data Flow Diagram

The Digital Crew

Home About Us Services Portfolio Contact Job Logout

Buying My Contact Jobapply

JOB VACANCIES FORM :

INDEX PAGE CODE :