0% found this document useful (0 votes)

94 views53 pages

Industrial Training Report: E-Learning

Uploaded by

Nishant Pandey

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

94 views53 pages

Industrial Training Report: E-Learning

Uploaded by

Nishant Pandey

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 53

INDUSTRIAL TRAINING REPORT

“E-LEARNING”

Submitted in partial fulfilment of the requirement for degree of

DIPLOMA
in
COMPUTER SCIENCE AND ENGINEERING
at
ARKA JAIN UNIVERSITY, Jharkhand

Submitted By

Rohit Raj
AJU/201000

Under the Guidance of

MR. MANNU KUMAR
(IT HEAD, AAC)

SCHOOL OF ENGINEERING & I.T,

ARKA JAIN UNIVERSITY, JAMSHEDPUR
2020-2023

1|Page
**ATTACH CERTIFICATE (Xerox) FROM THE
COMPANY**

2|Page
DECLARATION BY THE STUDENT

I sincerely declare that:

1. I am the sole writer of this report.

2. The details of training and experience contain in this report describe my involvement as a trainee in the
field of Computer Science And Engineering.

3. All the information contains in this report is certain and correct to the knowledge.

Signature: ……………………………………………

Name: ………………………………………………….

Registration No: ……………………………………

Date: ……………………………………………………

3|Page
CERTIFICATE
This is to certify that the Industrial Training Report titled "E-LEARINIG" in partial fulfillment of the requirement
for the award of the Degree of Diploma in Computer Science And Engineering, submitted to ARKA JAIN
University, Jharkhand, is an authentic record of bonafide industrial training work carried out by Mr. MANNU
KUMAR and submitted under my supervision/guidance.

( Miss D.Vally ) Mr. Ashwini Kumar

Assistant Professor Assistant Dean
Faculty-Incharge School of Engineering & I.T

Date:
Place: Jamshedpur

4|Page
ACKNOWLEDGEMENT

I would like to express my utmost gratitude to the AJU for providing an opportunity to pursue the engineering
training as partial fulfillment of the requirement for the degree of Diploma in
COMPUTER SCIENCE AND ENGINEERING. The internship opportunity I had with AAC was a great chance
for learning and professional development. Therefore, I consider myself as a very lucky individual as I was
provided with an opportunity to be a part of it. I am also grateful for having a chance to meet so many wonderful
people and professionals who led me through this internship period.

Bearing in mind previous I am using this opportunity to express my deepest gratitude and special thanks to the
Mr. MANNU KUMAR, IT HEAD,AUTO CLUSTER (ADITYAPUR) who in spite of being extraordinarily
busy with his duties, took time out to hear, guide and keep me on the correct path and allowing me to carry out
my project at their esteemed organization and extending during the training.

I express my deepest thanks to Mr. RANJAN KUMAR DEY, BUSINESS DEVELOPMENT MANAGER,
AUTO CLUSTER (ADITYAPUR) for taking part in useful decision & giving necessary advice and guidance
and arranged all facilities to make life easier. I choose this moment to acknowledge his contribution gratefully.

I express my deepest thanks to all staffs and employees of ADITYAPUR AUTO CLUSTER for taking part in
useful decision & giving necessary advice and guidance and arranged all facilities to make life easier. I choose
this moment to acknowledge their contribution gratefully. I perceive as this opportunity as a big milestone in my
career development. I will strive to use gained skills and knowledge in the best possible way, and I will continue
to work on their improvement, in order to attain desired career objectives. Hope to continue cooperation with all
of you in the future.

5|Page
ABSTRACT

The aim of this training is to get exposed to the web development. Learning about HTML, CSS,
JAVASCRIPT, BOOTSTRAP, SQL, PHP.

I joined the company as trainee for one month training. In this report, I have highlighted the
challenges that I encountered and the actions taken or solutions to problems during training in AAC,
Adityapur.

It was a rewarding opportunity for me to learn the web development as; how the organization work
for the entire project, was structured, its hierarchy, how various departments work in coordination
with one another inside the system to achieve a common target and predetermined goals, how the
superior officers interact with the clients and contractors, how the information is being delivered
from the top to the bottom level employees etc.

6|Page
CONTENTS
S.no Topics Page.no

1 Drawbacks of existing system 8

2 Advantages of e-learning 9
3 System analysis and design 10
4 Hardware and software requirments 11
5 Data flow diagram 12
6 Context level DFD 13
7 Data dictionary 14
8 Index.html 15-17
9 About.htlm 18-21
10 Htmlpage.html 22-25
11 Csspage.html 26-29
12 Jspage.html 30-33
13 Bootstrappage.html 34-37
14 Style.css 38-39
15 Cardhover.css 40
16 Contact.css 41
17 Scroll.js 42
18 Contact.php 43-46
19 Preview 47-53

7|Page
DRAWBACKS OF EXISTING SYSTEM

1. Lacks Student Focused Learning

A drawback of traditional training is that it inherently places the most value on standards,
curriculum and passing tests as opposed to student-focused learning. Student-focused
learning places value on the student and builds the curriculum around the questions young
people need answered in order to understand the material. Constructivist learning builds on
the knowledge students already have allowing them to form concrete associations to new
information, which improves retention. Traditional learning is based on repetition and
memorization of facts that students care less about and retain at lower rates after testing.

2. Lacks Emphasis on Critical Thinking

Traditional classroom training doesn't encourage critical thinking skills, the ability to actively
apply information gained through experience and reasoning. Instead, traditional training
emphasizes the role of teachers as knowledge dispensers and students as repositories. This
style of learning doesn't allow students deeper levels of understanding required for complex
concepts and lifelong learning.

3. Lacks Process Oriented Learning

Traditional training emphasizes passing tests, whether or not students under testing material.
The learning process is thus devalued, and students are not encouraged to understand the
methods, techniques and skills required to find answers. Constructivist learning holds the
process as important as the results because it stimulates skills important long after schooling.

4. Lacks Emphasis on Larger Concepts or Structures

Rather than focusing on larger concepts and considering student context in the learning as
constructivist training does, traditional training focuses on basic skills and gradually builds to a
whole. While this simplifies learning, it provides little context, which can disconnect learners.

5. Lacks Interactivity

Traditional training emphasizes individual student work and projects and is poor preparation
for a student's future endeavors, which are likely to include working on teams and
collaborating with colleagues. Under this training model, students receive few opportunities to
practice group dynamics and teamwork.

8|Page
ADVANTAGES OF E-LEARNING
1. E-learning saves time and money.

With online learning, your learners can access content anywhere and anytime. They
don’t need to take time out from their jobs to attend classes. E-learning is also cost-
effective; companies save a substantial amount on the travel and accommodation
costs of both learners and instructors, as well as the venue and materials. No printing
helps reduce your carbon footprint, too.

2. E-learning leads to better retention.

Modern learners prefer bite-sized, interactive content. They would rather watch a video
or listen to a podcast than read through pages of a manual. E-learning tools enable
learning designers to make content interactive. The more engaging the content is, the
better the learners remember information. If they enjoy learning, they can able to recall
and apply the concepts at work.

3. E-learning is consistent.

In face-to-face sessions, every instructor has his or her own method of teaching. Each
varies in approach and style and is susceptible to mistakes. You can eliminate these
issues with e-learning. Online learning provides consistent and standardized
training every time. Each learner goes through the same experience regardless of
when and where he or she takes the course.

4. E-learning is scalable.

Online learning is scalable. You can roll it out to as many employees you need and is a
one-time investment. The more learners take the course, the faster you can write off
the expense.

5. E-learning offers personalization.

Each learner has unique preferences and learning goals. E-learning makes it possible
to cater to individual needs. It allows learners to choose their learning path and
navigate at their own pace. When they decide what to learn and when, they remain
invested in the course.
9|Page
SYSTEM ANALYSIS & DESIGN

System Analysis and Design to the process of examining a business situation with
the intent of improving it through better methods and procedures.
System Analysis is the process of gathering and implementing the facts, Designing
the problems and using the information to recommended the improvements to the
replace or complement and existing system.

The system Development life Cycle (SDLC) method is classically thought of as the
set of activities that analysis. Designers and User carry out the develop and
implement the information system. The nine phases the make up the system
development life cycle are: -

 PRELIMINARY INVESTIGATION
 REQUIRMENT ANALYSIS
 FEASIBILITY STUDY
 SYSTEM ANALYSIS
 HARDWARE AND SOFTWARE STUDY
 SYSTEM DESIGN
 SYSTEM TESTING AND IMPLEMENTATION
 EVALUTION
 MAINTENANCE AND MODIFICATION

10 | P a g e
HARDWARE & SOFTWARE

REQUIREMENT SPECIFICATION

The developed system can be uploaded into web server and can be accessed from

multiple systems (desktops/laptops/mobiles) from any part of the world.

Minimum system requirements to run the developed system smoothly are listed
below.

Hardware requirement

 Dual core Processor & above

 2GB of RAM

 20 GB Hard Disk

Software requirement

 Client side : Web Browser (Google Chrome, Mozilla Firefox)

 Server side : Any Linux Server with Apache and MYSQL

11 | P a g e
DATA FLOW DIAGRAM (DFD)

DFD is an important tool used by system analysis. A data flow diagram model, a
system using external entities from which data flows to a process which transforms
the data and create output which go to other processes or external entities such as
files. The main merit of DFD is that it can provide an overview of what data a
system would process.

SYMBOLS
 A Circle represents a process that transforms incoming data flow into
outgoing data flows.

 A Square defines a source or destination of system data.

 An Arrow identifies data flow direction. It is the pipeline through which the
information flows.

 An Open Rectangle is a data store, data at rest or a temporary repository of

data.

Process that transforms data

Source or Destination of data

Data flow

Data Store

12 | P a g e
CONTEXT LEVEL DFD

13 | P a g e
DATA DICTIONARY

VARIABLES DATA TYPE SIZE DISCRIPTION

Name text 55 To store name
E-mail varchar 55 To store e-mail
Phone number Text 100 To store number
Message varchar 200 To store message

14 | P a g e
HTML CODING
Index.html
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>WebElites - Home</title>
<link rel="stylesheet" href="style.css">
</head
<body>

<nav class="navbar navigation navbar-expand-lg w-75 m-auto navbar-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder fs-3 " href="index.html"><img src="logo2.png" height="80" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100 " id="navbarSupportedContent">
<ul class="navbar-nav mb-2 w-100 justify-content-end mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active hover text-white" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hover text-white " href="about.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link hover text-white dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
expanded="false">
Topics
</a>
<ul class="dropdown-menu " style="background:#0E2A47;" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-primary" href="htmlpage.html">HTML</a></li>
<li><a class="dropdown-item text-primary" href="csspage.html">CSS</a></li>
<li><a class="dropdown-item text-primary" href="jspage.html">Javascript</a></li>
<li><a class="dropdown-item text-primary" href="bootstrappage.html">Bootstrap</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white hover" href="contact.php">Contact Us</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#loginModal" class="nav-link text-white hover" href="" >Login</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#SignupModal" class="nav-link text-white hover" href="" >Sign-up</a>
</li>

<div class="modal fade " id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="loginModalLabel">Login to WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
15 | P a g e
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> 
<div class="modal fade" id="SignupModal" tabindex="-1" aria-labelledby="SignupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="SignupModalLabel">Create Account On WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="cexampleInputPassword1" class="form-label">ConfirmPassword</label>
<input type="password" class="form-control" id="cexampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Create account</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-Primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div></div </div> </div>
</div>
</div>
</div> </div>
</div>
</nav>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<main class="herosection">
<div class="container col-xxl-8 px-4 mt-5 py-5 mx-0">
<div class="row flex-lg-row g-5 py-5">
<div class="col-lg-6 hero">
<h1 class="display-5 fw-bold lh-1 mb-4">Wanna learn <br><span class="highlight text-info"> Web Development </span></h1>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<a type="button" href="./htmlpage.html" class="btn btn-primary btn-lg px-4 me-md-2">Lets Get Started</a>
</div>
</div>
16 | P a g e
</div>
</div>
</main>


<footer class="pt-4 p-md-5">
<div class="row">
<div class="col-6 col-md-2">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="index.html">Home</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">About Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="contact.html">Contact Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Support us</a></li> </div>
<div class="col-6 col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.W3Schools.com">W3Schools</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.youtube.com">Youtube</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.html.com">HTML</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.tutorialspoint.com">Tutorials Point</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">Team</a></li>
</ul>
</div>
<div class="col-sm-8 col-md-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1839.0654296076443!2d86.13339449123092!3d22.79761453566654!2m3!1f0
!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f5e4e282a14223%3A0x32402bfcb5217629!2sAdityapur%20Auto%20Cluster!5e0!3m2!1sen!2
sin!4v1630593067597!5m2!1sen!2sin" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 WebElites, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><img src="instagram.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="facebook.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="github.svg" height="30px" width="30px" alt="instagram"/></a></li>
</ul>
</div>
</div>
</footer>
<script src="scroll.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


</body>
</html>

17 | P a g e
HTML CODING
about.html
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>WebElites - About</title>
<link rel="stylesheet" href="cardhover.css">
</head>
<body>

<nav class="navbar navigation navbar-expand-lg w-75 m-auto navbar-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder fs-3 " href="index.html"><img src="logo2.png" height="80" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100 " id="navbarSupportedContent">
<ul class="navbar-nav mb-2 w-100 justify-content-end mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active hover text-white" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hover text-white " href="about.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link hover text-white dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
expanded="false">
Topics
</a>
<ul class="dropdown-menu " style="background:#0E2A47;" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-primary" href="htmlpage.html">HTML</a></li>
<li><a class="dropdown-item text-primary" href="csspage.html">CSS</a></li>
<li><a class="dropdown-item text-primary" href="jspage.html">Javascript</a></li>
<li><a class="dropdown-item text-primary" href="bootstrappage.html">Bootstrap</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white hover" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#loginModal" class="nav-link text-white hover" href="" >Login</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#SignupModal" class="nav-link text-white hover" href="" >Sign-up</a>
</li>

<div class="modal fade " id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="loginModalLabel">Login to WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
18 | P a g e
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="SignupModal" tabindex="-1" aria-labelledby="SignupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="SignupModalLabel">Create Account On WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="cexampleInputPassword1" class="form-label">ConfirmPassword</label>
<input type="password" class="form-control" id="cexampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Create account</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-Primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<main>
<div class="container marketing my-2 p-md-5 w-100">

19 | P a g e
<div class="row d-flex justify-content-center p-md-3">
<h1 class="text-center border-bottom border-danger my-5 fw-bold">OUR TEAM</h1>
<div class="cardcontainer col-lg-3 m-2 col-10 ">
<img src="avatar.png" alt="Avatar" class="image">
<div class="overlay ">
<div class="text ">Rohit<br><span class="fs-6">Web Developer</span></div>

<div class="d-flex justify-content-evenly " style="margin-top:250px;"> <a class="col-2" href=""><img src="github.svg" alt="github
icon"/></a><a class="col-2" href=""><img src="facebook.svg" alt="facebook icon"/></a><a class="col-2" href=""><img src="instagram.svg"
alt="instagram icon"/></a>
</div>
</div>
</div><div class="cardcontainer col-lg-3 m-2 col-10">
<img src="avatar.png" alt="Avatar" class="image">
<div class="overlay ">
<div class="text">Nitesh<br><span class="fs-6">Web Developer</span></div>
<div class="d-flex justify-content-evenly " style="margin-top:250px;"> <a class="col-2" href=""><img src="github.svg" alt="github
icon"/></a><a class="col-2" href=""><img src="facebook.svg" alt="facebook icon"/></a><a class="col-2" href=""><img src="instagram.svg"
alt="instagram icon"/></a>
</div>
</div>
</div><div class="cardcontainer col-lg-3 m-2 col-10 ">
<img src="avatarfemale.png" alt="Avatar" class="image">
<div class="overlay ">
<div class="text">Isha<br><span class="fs-6">Web Developer</span></div>
<div class="d-flex justify-content-evenly " style="margin-top:250px;"> <a class="col-2" href=""><img src="github.svg" alt="github
icon"/></a><a class="col-2" href=""><img src="facebook.svg" alt="facebook icon"/></a><a class="col-2" href=""><img src="instagram.svg"
alt="instagram icon"/></a>
</div>
</div>
</div><div class="cardcontainer col-lg-3 m-2 col-10 ">
<img src="avatar.png" alt="Avatar" class="image">
<div class="overlay ">
<div class="text">Rahul<br><span class="fs-6">Web Developer</span></div>
<div class="d-flex justify-content-evenly " style="margin-top:250px;"> <a class="col-2" href=""><img src="github.svg" alt="github
icon"/></a><a class="col-2" href=""><img src="facebook.svg" alt="facebook icon"/></a><a class="col-2" href=""><img src="instagram.svg"
alt="instagram icon"/></a>
</div>
</div>
</div><div class="cardcontainer col-lg-3 m-2 col-10">
<img src="avatar.png" alt="Avatar" class="image">
<div class="overlay ">
<div class="text">Jayanto<br><span class="fs-6">Web Developer</span></div>
<div class="d-flex justify-content-evenly " style="margin-top:250px;"> <a class="col-2" href=""><img src="github.svg" alt="github
icon"/></a><a class="col-2" href=""><img src="facebook.svg" alt="facebook icon"/></a><a class="col-2" href=""><img src="instagram.svg"
alt="instagram icon"/></a>
</div>
</div>
</div><div class="cardcontainer col-lg-3 m-md-2 col-10 mx-sm-auto">
<img src="avatar.png" alt="Avatar" class="image">
<div class="overlay ">
<div class="text"><br><span class="fs-6">Web Developer</span></div>
<div class="d-flex justify-content-evenly " style="margin-top:250px;"> <a class="col-2" href=""><img src="github.svg" alt="github
icon"/></a><a class="col-2" href=""><img src="facebook.svg" alt="facebook icon"/></a><a class="col-2" href=""><img src="instagram.svg"
alt="instagram icon"/></a>
</div>
</div>
</div>
</div>

</main>

<footer class="pt-4 p-md-5">
<div class="row">
<div class="col-6 col-md-2">
<h5>Features</h5>
<ul class="list-unstyled text-small">
20 | P a g e
<li class="mb-1"><a class="link-secondary text-decoration-none" href="index.html">Home</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">About Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="contact.html">Contact Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Support us</a></li> </div>
<div class="col-6 col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.W3Schools.com">W3Schools</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.youtube.com">Youtube</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.html.com">HTML</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.tutorialspoint.com">Tutorials Point</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">Team</a></li>
</ul>
</div>
<div class="col-sm-8 col-md-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1839.0654296076443!2d86.13339449123092!3d22.79761453566654!2m3!1f0
!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f5e4e282a14223%3A0x32402bfcb5217629!2sAdityapur%20Auto%20Cluster!5e0!3m2!1sen!2
sin!4v1630593067597!5m2!1sen!2sin" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 WebElites, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><img src="instagram.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="facebook.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="github.svg" height="30px" width="30px" alt="instagram"/></a></li>
</ul>
</div>
</div>
</footer>
<script src="scroll.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

21 | P a g e
HTML CODING
htmlpage.html
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>WebElites - HTML</title>
</head>
<body>

<nav class="navbar navigation navbar-expand-lg w-75 m-auto navbar-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder fs-3 " href="index.html"><img src="logo2.png" height="80" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100 " id="navbarSupportedContent">
<ul class="navbar-nav mb-2 w-100 justify-content-end mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active hover text-white" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hover text-white " href="about.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link hover text-white dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
expanded="false">
Topics
</a>
<ul class="dropdown-menu " style="background:#0E2A47;" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-primary" href="htmlpage.html">HTML</a></li>
<li><a class="dropdown-item text-primary" href="csspage.html">CSS</a></li>
<li><a class="dropdown-item text-primary" href="jspage.html">Javascript</a></li>
<li><a class="dropdown-item text-primary" href="bootstrappage.html">Bootstrap</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white hover" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#loginModal" class="nav-link text-white hover" href="" >Login</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#SignupModal" class="nav-link text-white hover" href="" >Sign-up</a>
</li>

<div class="modal fade " id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="loginModalLabel">Login to WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
22 | P a g e
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="SignupModal" tabindex="-1" aria-labelledby="SignupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="SignupModalLabel">Create Account On WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="cexampleInputPassword1" class="form-label">ConfirmPassword</label>
<input type="password" class="form-control" id="cexampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Create account</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-Primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<main>
<div class="px-4 py-5 my-5 text-center htmlpic">
<div class="col-lg-6 mx-auto mt-3">
<image src="htmlicon.svg" alt="html icon" width="300"/>
</div>
23 | P a g e
</div>
<div class="container-fluid " style="max-width:100%;min-height:70vh; background:#FA314A;">
<div class="heading text-center px-md-3 pt-5 mx-auto border-bottom border-danger w-50">
<h1 class="fw-bolder display-4 mx-auto">HTML</h1>
</div>
<div class="content mx-auto p-md-1 p-1 " style="max-width:100%; margin:0 auto">
<div class="left col-8 mx-auto my-3 m-1"> <img src="./bootstrap.jpg" alt="" width="100%"> </div>
<div class="right fs-5 col-8 mx-auto p-1 mb-5">
<p> HTML is the language in which most websites are written. HTML is used to create pages and make them functional.
<br><br>
The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you
how to build rather than design.
<br><br>
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Markup Language.
<br>
Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether.
The latest version is known as HTML5.
<br><br>
A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things:
tags and attributes.
<br><br><br>
What are Tags and Attributes?<br>
Tags and attributes are the basis of HTML.
<br><br>
They work together but perform different functions – it is worth investing 2 minutes in differentiating the two.
<br><br><br>
What Are HTML Tags?<br>
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <br> &lth1&gt <br>
<br><br>
Most tags must be opened &lth1&gt and closed &lt/h1&gt in order to function.
<br><br>
What are HTML Attributes?<br>
Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.
<br><br><br>
An example of an attribute is:
<br><br>
<code class="bg-dark p-3">&ltimg src="mydog.jpg" alt="A photo of my dog."&gt</code>
<br><br>
In this instance, the image source (src) and the alt text (alt) are attributes of the &ltimg&gt tag.
<br><br>
Golden Rules To Remember <br>
The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags.
When using multiple tags, the tags must be closed in the order in which they were opened. For example:
<br><br>
<code class="bg-dark p-3">
&ltstrong&gt &ltem&gtThis is really important!&lt/em&gt &lt/strong&gt </code> <br><br>
HTML Editors <br><br>
Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website.
<ul>
<li>VS Code</li>
<li>Sublime Text</li>
<li>Atom</li>
</ul>
<br><br>
HTML Editors
Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website.
<br><br>
First off, we must ensure that we have the right tools. Most important, we need an HTML editor.
<br><br>
There are many choices on the market. Here are a handful of the most popular:
<br><br>
Sublime Text 3
<br>
However, for this tutorial, we will use the Sublime Text 3 as it is free and also offers cross-platform support for Windows, Mac, and Linux users.
<br>
Notepad ++
24 | P a g e
Another common choice for HTML and other language coders is Notepad ++. It is a tiny program to download and perform the functions you need
for writing clean code.</p>
<br><br> <a href="https://html.com/#ixzz75J2wICo0 " class="bg-dark p-3">Read more</a>
</div>
</div>
</div>
</main>

<footer class="pt-4 p-md-5">
<div class="row">
<div class="col-6 col-md-2">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="index.html">Home</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">About Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="contact.html">Contact Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Support us</a></li> </div>
<div class="col-6 col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.W3Schools.com">W3Schools</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.youtube.com">Youtube</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.html.com">HTML</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.tutorialspoint.com">Tutorials Point</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">Team</a></li>
</ul>
</div>
<div class="col-sm-8 col-md-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1839.0654296076443!2d86.13339449123092!3d22.79761453566654!2m3!1f0
!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f5e4e282a14223%3A0x32402bfcb5217629!2sAdityapur%20Auto%20Cluster!5e0!3m2!1sen!2
sin!4v1630593067597!5m2!1sen!2sin" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 WebElites, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><img src="instagram.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="facebook.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="github.svg" height="30px" width="30px" alt="instagram"/></a></li>
</ul> </div> </div> </footer>
<script src="scroll.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-
IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-
cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>

25 | P a g e
HTML CODING
csspage.html
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>WebElites - CSS</title>
</head>
<body>

<nav class="navbar navigation navbar-expand-lg w-75 m-auto navbar-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder fs-3 " href="index.html"><img src="logo2.png" height="80" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100 " id="navbarSupportedContent">
<ul class="navbar-nav mb-2 w-100 justify-content-end mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active hover text-white" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hover text-white " href="about.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link hover text-white dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
expanded="false">
Topics
</a>
<ul class="dropdown-menu " style="background:#0E2A47;" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-primary" href="htmlpage.html">HTML</a></li>
<li><a class="dropdown-item text-primary" href="csspage.html">CSS</a></li>
<li><a class="dropdown-item text-primary" href="jspage.html">Javascript</a></li>
<li><a class="dropdown-item text-primary" href="bootstrappage.html">Bootstrap</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white hover" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#loginModal" class="nav-link text-white hover" href="" >Login</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#SignupModal" class="nav-link text-white hover" href="" >Sign-up</a>
</li>

<div class="modal fade " id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="loginModalLabel">Login to WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
26 | P a g e
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="SignupModal" tabindex="-1" aria-labelledby="SignupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="SignupModalLabel">Create Account On WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="cexampleInputPassword1" class="form-label">ConfirmPassword</label>
<input type="password" class="form-control" id="cexampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Create account</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-Primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<main>
<div class="px-4 py-5 my-5 text-center w-100 csspic">
<div class="col-lg-6 mx-auto mt-3" >
<image src="cssicon.svg" alt="css icon" width="300" />
27 | P a g e
</div>
</div>
<div class="container-fluid" style="max-width:100%;min-height:70vh; background:#4A90E2;">
<div class="heading text-center px-md-3 pt-5 mx-auto border-bottom border-danger w-50">
<h1 class="fw-bolder display-4 mx-auto">CSS</h1>
</div>
<div class="content mx-auto p-md-1 p-1 " style="max-width:100%; margin:0 auto">
<div class="left col-8 mx-auto my-3 m-1"> <img src="./css.jpg" alt="" width="100%"> </div>
<div class="right fs-5 col-8 mx-auto p-1 mb-5">
If you currently have a website or plan to build a website, CSS is definitely a term that you’ve come across. But for those of you who don’t
know how to code and don’t have any development experience, it can be a little confusing.<br><br>
Let me start with the basics.
<br><br>
<div class="definition bg-dark fs-5 p-2">
CSS stands for cascading style sheets. It’s a stylesheet language that describes the appearance or presentation of a website. Essentially, CSS tells web
browsers how each element in an HTML document should be displayed.
</div>
<br><br>
Along with JavaScript and HTML, CSS is a crucial component to every web page on the Internet.
<br><br><br>
The main benefit of CSS is the ability to separate website content from the design elements, simply by changing rules in a CSS file.
<br><br>
Before CSS was used, nearly every attribute related to how HTML documents were displayed was written in HTML markup. This means that so
many rules had to be repeated throughout the HTML code.
<br><br>
But CSS makes it possible for developers to move that information into a style sheet, which simplifies the HTML.
<br><br>
As a result, the HTML is shorter, lighter, and less prone to errors. It also makes your HTML much easier to maintain.
<br><br>
In this guide, I’ll give you some common use cases for CSS and show you my favorite ways to learn CSS online.
<br><br>
CSS common uses
There are lots of different ways to use CSS on your website. But I want to show you some of the more basic and common applications so you can get
familiar with how CSS works.
<br><br>
Once you’re able to master these common principles and use cases, you’ll be able to tackle more complex CSS elements in the future.
<br><br>
Font styling
You can use CSS to create a font style. Write properties for elements like:
<br><br>
Font type
Color
Weight
Size
Alignment
Case
Line height
CSS can also be used to add effects like underlining and strikethroughs. Let me give you an example to show you how this works.<br><br>
You want the design to reflect the look and feel of your brand. You want to have the functionality required to meet the needs of your visitors without
going over budget. And you want to create responsive layouts that display elements like buttons and forms consistently, no matter what device or
browser the visitor is using.
<br><br>
<h1>Responsive web design with CSS</h1>
<br><br>
Today, we have hundreds, if not thousands, of different screens available on the market. This means that people who visit your website can be doing
so from countless variations of devices, screen sizes, display sizes, and resolutions.
<br><br>
Having a full-size website with just one additional design for a smaller device is no longer an option. So you need to use CSS to create a responsive
design.
<br><br>
In order for this to happen, there are certain principles that you need to follow to ensure that your CSS is responsive on any screen from any device.
<br><br>
Your entire layout and grid needs to be fluid. You need to make sure that images automatically resize to render aesthetically from any screen.
<br><br>
One of the most popular ways to tackle a responsive web design is with a mobile-first approach. This means that the design is made with the smallest
screens in mind first, and then styles are added as the size gets larger. <br><br>

28 | P a g e
By building with Bootstrap, you can check that last item off your list. Bootstrap is an open-source framework for quickly building responsive
websites and mobile-first web projects. Because it offers a collection of reusable code, you won’t have to build a site from scratch.
<br><br></div></div>
</div> </main>

<footer class="pt-4 p-md-5">
<div class="row">
<div class="col-6 col-md-2">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="index.html">Home</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">About Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="contact.html">Contact Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Support us</a></li> </div>
<div class="col-6 col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.W3Schools.com">W3Schools</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.youtube.com">Youtube</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.html.com">HTML</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.tutorialspoint.com">Tutorials Point</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">Team</a></li>
</ul>
</div>
<div class="col-sm-8 col-md-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1839.0654296076443!2d86.13339449123092!3d22.79761453566654!2m3!1f0
!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f5e4e282a14223%3A0x32402bfcb5217629!2sAdityapur%20Auto%20Cluster!5e0!3m2!1sen!2
sin!4v1630593067597!5m2!1sen!2sin" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 WebElites, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><img src="instagram.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="facebook.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="github.svg" height="30px" width="30px" alt="instagram"/></a></li>
</ul>
</div>
</div>
</footer>
<script src="scroll.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-

MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html
29 | P a g e
HTML CODING
jspage.html
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>WebElites - Javascript</title>
</head>
<body>

<nav class="navbar navigation navbar-expand-lg w-75 m-auto navbar-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder fs-3 " href="index.html"><img src="logo2.png" height="80" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100 " id="navbarSupportedContent">
<ul class="navbar-nav mb-2 w-100 justify-content-end mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active hover text-white" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hover text-white " href="about.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link hover text-white dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
expanded="false">
Topics
</a>
<ul class="dropdown-menu " style="background:#0E2A47;" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-primary" href="htmlpage.html">HTML</a></li>
<li><a class="dropdown-item text-primary" href="csspage.html">CSS</a></li>
<li><a class="dropdown-item text-primary" href="jspage.html">Javascript</a></li>
<li><a class="dropdown-item text-primary" href="bootstrappage.html">Bootstrap</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white hover" href="contact.html">Contact Us</a>
</li>

<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#loginModal" class="nav-link text-white hover" href="" >Login</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#SignupModal" class="nav-link text-white hover" href="" >Sign-up</a>
</li>

<div class="modal fade " id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="loginModalLabel">Login to WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
30 | P a g e
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="SignupModal" tabindex="-1" aria-labelledby="SignupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="SignupModalLabel">Create Account On WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="cexampleInputPassword1" class="form-label">ConfirmPassword</label>
<input type="password" class="form-control" id="cexampleInputPassword1">
</div>

<button type="submit" class="btn btn-primary">Create account</button>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-Primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<main>
<div class="px-4 py-5 my-5 text-center jspic">
<div class="col-lg-6 mx-auto mt-3">
31 | P a g e
<image src="jsicon.svg" alt="js icon" width="300"/>
</div>
</div>
<div class="container-fluid text-primary" style="max-width:100%;min-height:70vh; background:#f8c809;">
<div class="heading text-center px-md-3 pt-5 mx-auto border-bottom border-danger w-50">
<h1 class="fw-bolder display-4 mx-auto">Javascript</h1>
</div>
<div class="content mx-auto p-md-1 p-1 " style="max-width:100%; margin:0 auto">
<div class="left col-8 mx-auto my-3 m-1"> <img src="./bootstrap.jpg" alt="" width="100%"> </div>
<div class="right fs-5 col-8 mx-auto p-1 mb-5">
JavaScript is a popular programming language that has a wide range of applications. <br><br>
<div class="bg-dark p-3">
JavaScript was previously used mainly for making webpages interactive such as form validation, animation, etc. Nowadays, JavaScript is also used in
many other areas such as server-side development, mobile app development and so on.
</div>
<br><br><br>
Because of its wide range of applications, you can run JavaScript in several ways:
<br><br>
<ul>
<li>Using console tab of web browsers</li>
<li>Using Node.js</li>
<li>By creating web pages</li>
</ul>
<br><br><br>
Using Console Tab of Web Browsers <br><br>
All the popular web browsers have built-in JavaScript engines. Hence, you can run JavaScript on a browser. To run JavaScript on a browser, <br>
<br>
Open your favorite browser (here we will use Google Chrome). <br><br>
Open the developer tools by right clicking on an empty area and select Inspect. <br>
Shortcut: <kbd>F12</kbd> <br><br>
On the developer tools, go to the console tab. Then, write JavaScript code and press enter to run the code. <br><br> <br>
JavaScript was initially created to make web pages interactive, that's why JavaScript and HTML go hand in hand. <br><br>
The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads.
<br><br>
Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run. <br><br>
In this aspect, JavaScript is very different from another language called Java.
<br><br>
<div class="bg-dark p-3">
<h3>Why is it called JavaScript?</h3> <br>
When JavaScript was created, it initially had another name: “LiveScript”. But Java was very popular at that time, so it was decided that positioning a
new language as a “younger brother” of Java would help. </div><br><br>
But as it evolved, JavaScript became a fully independent language with its own specification called ECMAScript, and now it has no relation to Java
at all. <br><br>
The browser has an embedded engine sometimes called a “JavaScript virtual machine”. <br><br>
</div>
</div>
</div>
</main>

<footer class="pt-4 p-md-5">
<div class="row">
<div class="col-6 col-md-2">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="index.html">Home</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">About Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="contact.html">Contact Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Support us</a></li> </div>
<div class="col-6 col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.W3Schools.com">W3Schools</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.youtube.com">Youtube</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.html.com">HTML</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.tutorialspoint.com">Tutorials Point</a></li>
</ul>
</div>
32 | P a g e
<div class="col-6 col-md-3">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">Team</a></li>
</ul>
</div>
<div class="col-sm-8 col-md-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1839.0654296076443!2d86.13339449123092!3d22.79761453566654!2m3!1f0
!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f5e4e282a14223%3A0x32402bfcb5217629!2sAdityapur%20Auto%20Cluster!5e0!3m2!1sen!2
sin!4v1630593067597!5m2!1sen!2sin" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 WebElites, Inc</span>
</div>

<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">

33 | P a g e
HTML CODING
bootstrap.html
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>WebElites - Bootstrap</title>
</head>
<body>

<nav class="navbar navigation navbar-expand-lg w-75 m-auto navbar-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder fs-3 " href="index.html"><img src="logo2.png" height="80" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100 " id="navbarSupportedContent">
<ul class="navbar-nav mb-2 w-100 justify-content-end mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active hover text-white" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hover text-white " href="about.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link hover text-white dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
expanded="false">
Topics
</a>
<ul class="dropdown-menu " style="background:#0E2A47;" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-primary" href="htmlpage.html">HTML</a></li>
<li><a class="dropdown-item text-primary" href="csspage.html">CSS</a></li>
<li><a class="dropdown-item text-primary" href="jspage.html">Javascript</a></li>
<li><a class="dropdown-item text-primary" href="bootstrappage.html">Bootstrap</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white hover" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#loginModal" class="nav-link text-white hover" href="" >Login</a>
</li>

<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#SignupModal" class="nav-link text-white hover" href="" >Sign-up</a>
</li>

<div class="modal fade " id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="loginModalLabel">Login to WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
34 | P a g e
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="SignupModal" tabindex="-1" aria-labelledby="SignupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="SignupModalLabel">Create Account On WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="cexampleInputPassword1" class="form-label">ConfirmPassword</label>
<input type="password" class="form-control" id="cexampleInputPassword1">
</div>

<button type="submit" class="btn btn-primary">Create account</button>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-Primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<main >
35 | P a g e
<div class="px-md-2 px-0 py-5 my-5 w-100 text-center bootstrappic">
<div class="col-lg-6 mx-auto mt-3">
<image src="bootstrapicon.svg" alt="bootstrap icon" width="300"/>
</div>
</div>
<div class="container-fluid " style="max-width:100%;min-height:70vh; background:#673AB7;">
<div class="heading text-center px-md-3 pt-5 mx-auto border-bottom border-danger w-50">
<h1 class="fw-bolder display-4 mx-auto">Bootstrap</h1>
</div>
<div class="content mx-auto p-md-1 p-1 " style="max-width:100%; margin:0 auto">
<div class="left col-8 mx-auto my-3 m-1"> <img src="./bootstrap.jpg" alt="" width="100%"> </div>
<div class="right fs-5 col-8 mx-auto p-1 mb-5">
If you’re creating a website for your business, then you probably have a long wish list.
<br><br>
You want the design to reflect the look and feel of your brand. You want to have the functionality required to meet the needs of your visitors without
going over budget. And you want to create responsive layouts that display elements like buttons and forms consistently, no matter what device or
browser the visitor is using.
<br><br>
By building with Bootstrap, you can check that last item off your list. Bootstrap is an open-source framework for quickly building responsive
websites and mobile-first web projects. Because it offers a collection of reusable code, you won’t have to build a site from scratch.
<br><br>
<div class="definition bg-dark fs-5 p-2">
Bootstrap CSS is the leading CSS framework for developing responsive and mobile-first websites. This free and open-source toolkit comes with a
responsive grid system, global CSS settings, extensive pre-built components including buttons, navbars, and forms, and optional JavaScript plugins
to speed up the development process.
Though Bootstrap is an open-source toolkit for developing with HTML, CSS, and JavaScript, it is often referred to as a CSS framework.</div>
<br><br>
To understand why, you must first understand that CSS is generally easier to learn for people at all levels of technical experience and is faster in
browsers than JavaScript. For these reasons, Bootstrap developers wrote in CSS (and HTML) over JavaScript whenever possible. The CSS library
included in Bootstrap is therefore much larger than the JavaScript library.
<br><br>
Since Bootstrap makes it easier and faster to create responsive websites, it appeals to many front-end developers and beginners in particular.
However, it’s not recommended by all. Below we’ll look at why Bootstrap is so popular and when it’s ideal to use — and when it’s not ideal.
<br><br>
Bootstrap is the go-to toolkit for many front-end developers. According to W3Techs, it's used by 22.1% of all websites on the internet.
<br><br>
There are a few factors driving Bootstrap’s popularity. First and foremost, it’s open-source and therefore free to download and use. It’s also fully
customizable, and compatible with all modern browsers. This is true of many CSS frameworks, however.
<br><br>
What sets Bootstrap apart from other development toolkits is that it was developed mobile-first. Meaning, the code was optimized for mobile devices
(i.e. the smallest screen size) first and then scaled up to display on larger screens. As a result, building with Bootstrap CSS ensures that your site
supports proper rendering and touch zooming for all devices.
<br><br>
Another reason Bootstrap is so popular is that it’s easy to use. It comes bundled with templates for typography, forms, buttons, drop-down menus,
navigation, and other interface components. Using these pre-styled templates, you can add features that enrich the user experience on your site
without having to code them from scratch.
</div>
</div>
</div>
</main>
<footer class="pt-4 p-md-5">
<div class="row">
<div class="col-6 col-md-2">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="index.html">Home</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">About Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="contact.html">Contact Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Support us</a></li> </div>
<div class="col-6 col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.W3Schools.com">W3Schools</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.youtube.com">Youtube</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.html.com">HTML</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.tutorialspoint.com">Tutorials Point</a></li>
</ul>
36 | P a g e
</div>
<div class="col-6 col-md-3">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">Team</a></li>
</ul>
</div>
<div class="col-sm-8 col-md-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1839.0654296076443!2d86.13339449123092!3d22.79761453566654!2m3!1f0
!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f5e4e282a14223%3A0x32402bfcb5217629!2sAdityapur%20Auto%20Cluster!5e0!3m2!1sen!2
sin!4v1630593067597!5m2!1sen!2sin" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 WebElites, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><img src="instagram.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="facebook.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="github.svg" height="30px" width="30px" alt="instagram"/></a></li>
</ul>
</div>
</div>
</footer>
<script src="scroll.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


</body>
</html>

37 | P a g e
All Css coding
Style.css

.navigation,footer,main,body{
background-color: #0E2A47;
color:#fff;
}
.link-secondary{
color:#fff;
}

.nav-link{
color:#fff;
}
.navbar-nav{
color:#fff;
}
.hover{
color:#fff;
}
.hover:hover{
color:#fff;
border-bottom:1px solid red;
}

.herosection{
background:url('background5.svg');
background-size: cover;
background-repeat: no-repeat;
}

main{
min-height: 94vh;

}
html{
background:#141414;
/* background:url('background2.jpg'); */

}
body{
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
margin:0;
padding:0;
max-width:100vw;
margin:0 auto;
}
.hero{
margin-top:23vh;
margin-left:12vh;
}
.htmlpic{
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('blog.jpg');
width: 100%;
height: 400px;
background-size: cover;
color: white;
padding: 20px;
38 | P a g e
}
.csspic{
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(221, 90, 14, 0.9)),
url('css.jpg');
width: 100%;
height: 400px;
background-size: cover;
color: white;
padding: 20px;
}
.jspic{
background-image:
linear-gradient(to top, rgba(245, 246, 252, 0.52), rgba(16, 13, 163, 0.6)),
url('js.jpg');
width: 100%;
height: 400px;
background-size: cover;
color: white;
padding: 20px;
}
.bootstrappic{
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(143, 172, 17, 0.9)),
url('bootstrap.jpg');
width: 100%;
height: 400px;
background-size: cover;
color:#673AB7;
padding: 20px ;
}
.learntext{
width:max-content;
padding:10px 20px;
margin:0 auto;
color:orangered;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}

#myBtn:hover {
background-color: #555;
}

@media screen and (max-width:800px) {

.hero{
margin-top:10vh;
margin-left:1vh;
}
}

39 | P a g e
Card hover

.cardcontainer {
position: relative;
min-height: 350px;
}

.image {
display: block;
width: 100%;
height: auto;
margin:0 auto;
}

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #892bad;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}

.cardcontainer:hover .overlay {
bottom: 0;
height: 100%;
width:100%;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-60%, -60%);
text-align: center;
}

40 | P a g e
CONTACT PAGE
contact-form{
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
.contact-form .form-control{
border-radius:1rem;
}
.contact-image{
text-align: center;
}
.contact-image img{
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
.contact-form form{
padding: 14%;
}
.contact-form form .row{
margin-bottom: -7%;
}
.contact-form h3{
margin-bottom: 8%;
margin-top: -10%;
text-align: center;
color: #0062cc;
}
.contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
.btnContactSubmit
{
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}

41 | P a g e
Java script

Scrollbar

var mybutton = document.getElementById("myBtn");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

42 | P a g e
Hypertext preprocessor(php)
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>WebElites - Contact</title>
<link rel="stylesheet" href="contact.css">
</head>
<body>

<nav class="navbar navigation navbar-expand-lg w-75 m-auto navbar-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder fs-3 " href="index.html"><img src="logo2.png" height="80" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100 " id="navbarSupportedContent">
<ul class="navbar-nav mb-2 w-100 justify-content-end mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active hover text-white" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link hover text-white " href="about.html">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link hover text-white dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
expanded="false">
Topics
</a>
<ul class="dropdown-menu " style="background:#0E2A47;" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item text-primary" href="htmlpage.html">HTML</a></li>
<li><a class="dropdown-item text-primary" href="csspage.html">CSS</a></li>
<li><a class="dropdown-item text-primary" href="jspage.html">Javascript</a></li>
<li><a class="dropdown-item text-primary" href="bootstrappage.html">Bootstrap</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-white hover" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#loginModal" class="nav-link text-white hover" href="" >Login</a>
</li>
<li class="nav-item">
<a data-bs-toggle="modal" data-bs-target="#SignupModal" class="nav-link text-white hover" href="" >Sign-up</a>
</li>

<div class="modal fade " id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="loginModalLabel">Login to WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
43 | P a g e
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="SignupModal" tabindex="-1" aria-labelledby="SignupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#0E2A47;">
<div class="modal-header">
<h5 class="modal-title text-primary" id="SignupModalLabel">Create Account On WebElites</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="cexampleInputPassword1" class="form-label">ConfirmPassword</label>
<input type="password" class="form-control" id="cexampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Create account</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-Primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<main>
<div class="container contact-form">
<div class="contact-image">
<img src="https://image.ibb.co/kUagtU/rocket_contact.png" alt="rocket_contact"/>
</div>
<form action="#" method="post">
44 | P a g e
<h3>Drop Us a Message</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group m-2">
<input type="text" name="txtName" class="form-control" placeholder="Your Name *" value="" required/>
</div>
<div class="form-group m-2">
<input type="email" name="txtEmail" class="form-control" placeholder="Your Email *" value="" required/>
</div>
<div class="form-group m-2">
<input type="text" name="txtPhone" class="form-control" placeholder="Your Phone Number *" value="" required/>
</div>
<div class="form-group m-2">
<input type="submit" name="btnSubmit" class="btnContact" value="Send Message" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea name="txtMsg" class="form-control" placeholder="Your Message *" style="width: 100%; height: 150px;"
required></textarea>
</div>
</div>
</div>
</form>
</div>
</main>
<?php
if(isset($_POST["btnSubmit"]))
{
$name=$_POST["txtName"];
$email=$_POST["txtEmail"];
$phone=$_POST["txtPhone"];
$msg=$_POST["txtMsg"];
$conn=mysqli_connect("localhost","root","","contact us");
$sql="insert into contact values('$name','$email','$phone','$msg')";
if(mysqli_query($conn,$sql))
{
"OK";
}

else{

echo mysqli_error($conn);
}
}
?>


<footer class="pt-4 p-md-5">
<div class="row">
<div class="col-6 col-md-2">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="index.html">Home</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">About Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="contact.html">Contact Us</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Support us</a></li> </div>
<div class="col-6 col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.W3Schools.com">W3Schools</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.youtube.com">Youtube</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.html.com">HTML</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="https://www.tutorialspoint.com">Tutorials Point</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
45 | P a g e
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="about.html">Team</a></li>
</ul>
</div>
<div class="col-sm-8 col-md-5">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1839.0654296076443!2d86.13339449123092!3d22.79761453566654!2m3!1f0
!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f5e4e282a14223%3A0x32402bfcb5217629!2sAdityapur%20Auto%20Cluster!5e0!3m2!1sen!2
sin!4v1630593067597!5m2!1sen!2sin" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
</a>
<span class="text-muted">© 2021 WebElites, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><img src="instagram.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="facebook.svg" height="30px" width="30px" alt="instagram"/></a></li>
<li class="ms-3"><a class="text-muted" href="#"><img src="github.svg" height="30px" width="30px" alt="instagram"/></a></li>
</ul>
</div>
</div>
</footer>
<script src="scroll.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


</body>
</html>

46 | P a g e
Previews

Grade 8 Computer Studies Notes
87% (107)
Grade 8 Computer Studies Notes
75 pages
ENLIGHTINGHUB
No ratings yet
ENLIGHTINGHUB
28 pages
Akash Kr. Kanaujia G.P Mahoba
No ratings yet
Akash Kr. Kanaujia G.P Mahoba
87 pages
IM File
No ratings yet
IM File
32 pages
Major Project Report
No ratings yet
Major Project Report
40 pages
Elearn
No ratings yet
Elearn
72 pages
Elearning Project File (Final)
No ratings yet
Elearning Project File (Final)
68 pages
Major Project Report
No ratings yet
Major Project Report
84 pages
Performax: Infosys Limited
No ratings yet
Performax: Infosys Limited
69 pages
Documentation
No ratings yet
Documentation
45 pages
E Learning Website Ravishankar Pandit
No ratings yet
E Learning Website Ravishankar Pandit
51 pages
Devesh Final Report
No ratings yet
Devesh Final Report
37 pages
Abhinav Singh J L N P
No ratings yet
Abhinav Singh J L N P
74 pages
pdf1 KUMAR SAI
No ratings yet
pdf1 KUMAR SAI
39 pages
Im PDF
No ratings yet
Im PDF
33 pages
Nazish A Khan IT REPORT TRAINNING
No ratings yet
Nazish A Khan IT REPORT TRAINNING
35 pages
Internship Report
No ratings yet
Internship Report
19 pages
Web Designing: Yatharth Solutions & Educational Consultancy
No ratings yet
Web Designing: Yatharth Solutions & Educational Consultancy
34 pages
Tvs Mostly
No ratings yet
Tvs Mostly
81 pages
Internship Report
No ratings yet
Internship Report
27 pages
E Learning 9th Sem-3
No ratings yet
E Learning 9th Sem-3
29 pages
SomveerVIIsem Web Development (Report)
No ratings yet
SomveerVIIsem Web Development (Report)
39 pages
Suhail It Report
No ratings yet
Suhail It Report
36 pages
Final Report
No ratings yet
Final Report
15 pages
Third Year Practical Training Seminar Report
No ratings yet
Third Year Practical Training Seminar Report
35 pages
FILE Revised Merged
No ratings yet
FILE Revised Merged
105 pages
Amandeep Mid Report
No ratings yet
Amandeep Mid Report
22 pages
Ajay Kumar Garg Engineering College: (Shapemyskills)
No ratings yet
Ajay Kumar Garg Engineering College: (Shapemyskills)
32 pages
Training Report
86% (7)
Training Report
88 pages
Training Report Format
No ratings yet
Training Report Format
7 pages
TED Imp
No ratings yet
TED Imp
21 pages
Training Report
No ratings yet
Training Report
50 pages
Listening and Reading - Mini Test 1
No ratings yet
Listening and Reading - Mini Test 1
8 pages
Reading Passage 3
No ratings yet
Reading Passage 3
6 pages
Harshit
No ratings yet
Harshit
29 pages
Major Project Report
No ratings yet
Major Project Report
24 pages
Challenges Encountered by TVL Students in Specialization Subject During The Online Distance Learning Modality at Mataasnakahoy Senior High School
100% (1)
Challenges Encountered by TVL Students in Specialization Subject During The Online Distance Learning Modality at Mataasnakahoy Senior High School
16 pages
E Learning Applicatiion Final Report (1) vbmn0098
No ratings yet
E Learning Applicatiion Final Report (1) vbmn0098
58 pages
E-Learning (Web Based Learning System) : in Computer Science and Engineering
50% (4)
E-Learning (Web Based Learning System) : in Computer Science and Engineering
67 pages
CK FinalLLLL Internship
No ratings yet
CK FinalLLLL Internship
68 pages
Ok 1
No ratings yet
Ok 1
30 pages
Synopsis
100% (1)
Synopsis
16 pages
Mobilehub
No ratings yet
Mobilehub
20 pages
Internship Report - Sem 2 (AUG 16 - SEPT 25 2021) : TH TH
No ratings yet
Internship Report - Sem 2 (AUG 16 - SEPT 25 2021) : TH TH
36 pages
Eproject Mainfile
No ratings yet
Eproject Mainfile
16 pages
Web Development REPORT
No ratings yet
Web Development REPORT
89 pages
Himanshi Bhardwaj Mini Project 1st Semester-1
No ratings yet
Himanshi Bhardwaj Mini Project 1st Semester-1
40 pages
Kartik Thakur 5c8 Summer Training Report
No ratings yet
Kartik Thakur 5c8 Summer Training Report
61 pages
In Plant Training: A Report On
No ratings yet
In Plant Training: A Report On
24 pages
Elearning Project File (Final)
No ratings yet
Elearning Project File (Final)
65 pages
E Lerning 2025
No ratings yet
E Lerning 2025
27 pages
Acknowledgement: "World Acknowledge Those Who Acknowledge The World"
No ratings yet
Acknowledgement: "World Acknowledge Those Who Acknowledge The World"
5 pages
VANSH
No ratings yet
VANSH
8 pages
IndustrialTrainingReport Templet GGP Ayodhya
No ratings yet
IndustrialTrainingReport Templet GGP Ayodhya
19 pages
Java Training
No ratings yet
Java Training
7 pages
Internship Report
No ratings yet
Internship Report
22 pages
Calculator Project Report File
No ratings yet
Calculator Project Report File
44 pages
Cot-Filipino - Pangngalan
100% (1)
Cot-Filipino - Pangngalan
4 pages
Industrial Internship Training Report: Marathwada Institute of Technology
No ratings yet
Industrial Internship Training Report: Marathwada Institute of Technology
4 pages
Net Student Handbook
100% (1)
Net Student Handbook
71 pages
Project Training
No ratings yet
Project Training
25 pages
Manual
100% (1)
Manual
499 pages
Ft1 in TG LP 1-45
No ratings yet
Ft1 in TG LP 1-45
254 pages
Research 2 Final
No ratings yet
Research 2 Final
9 pages
Allama Iqbal Open University, Islamabad Warning: (Department of Computer Science)
No ratings yet
Allama Iqbal Open University, Islamabad Warning: (Department of Computer Science)
5 pages
ICTICT313 IP, Ethics and Privacy ICT Enviro - Student
No ratings yet
ICTICT313 IP, Ethics and Privacy ICT Enviro - Student
71 pages
TeachingStrategy Buladaco - Edited
No ratings yet
TeachingStrategy Buladaco - Edited
15 pages
Digital Literacy of Elementary Teachers and Its Relation in Performing Their Various School Roles Amidst COVID19 Pandemic
No ratings yet
Digital Literacy of Elementary Teachers and Its Relation in Performing Their Various School Roles Amidst COVID19 Pandemic
14 pages
Reimagining Learning Environments Strategies For Urban Campus Design
No ratings yet
Reimagining Learning Environments Strategies For Urban Campus Design
34 pages
QUESTIONNAIRE Final Copy Maam Lourdes
No ratings yet
QUESTIONNAIRE Final Copy Maam Lourdes
5 pages
Chemistry Stage 6 Syllabus 2017
No ratings yet
Chemistry Stage 6 Syllabus 2017
76 pages
Daily Lesson Plan Physics STPM
No ratings yet
Daily Lesson Plan Physics STPM
1 page
2016 Srategic Plan TEC
No ratings yet
2016 Srategic Plan TEC
31 pages
The National Integrated ICT Policy White Paper - 03 October 2016 Final
No ratings yet
The National Integrated ICT Policy White Paper - 03 October 2016 Final
177 pages
Geetanjali Institute of Technical Studies, Udaipur: Internship Report
No ratings yet
Geetanjali Institute of Technical Studies, Udaipur: Internship Report
8 pages
Welcome To Topic 1 Energy Transfers!
No ratings yet
Welcome To Topic 1 Energy Transfers!
6 pages
Clephumangrowthch 1
No ratings yet
Clephumangrowthch 1
9 pages
Candace M Gallagher 9 18 2013
No ratings yet
Candace M Gallagher 9 18 2013
2 pages
New Case Study
No ratings yet
New Case Study
20 pages
Digital Knowledge Resources Utilized by Science Teachers
No ratings yet
Digital Knowledge Resources Utilized by Science Teachers
10 pages
Assignment 3 ICT (MOHAMAD AZWAN BIN MOHAMED G1819417)
No ratings yet
Assignment 3 ICT (MOHAMAD AZWAN BIN MOHAMED G1819417)
3 pages
Beige Clean Lines Marketing Executive Resume
No ratings yet
Beige Clean Lines Marketing Executive Resume
2 pages
Digital Media
No ratings yet
Digital Media
20 pages
Factors Affecting Distance Learning of Carrascal National High School, Division of Surigao Del Sur
No ratings yet
Factors Affecting Distance Learning of Carrascal National High School, Division of Surigao Del Sur
8 pages
CIED 7602: Online Teaching Endorsement Competency Checklist (OTECC)
No ratings yet
CIED 7602: Online Teaching Endorsement Competency Checklist (OTECC)
15 pages
Reflection Paper Robianes, Zyrahb. 4charlie
No ratings yet
Reflection Paper Robianes, Zyrahb. 4charlie
1 page
Alumni Class Notes
No ratings yet
Alumni Class Notes
7 pages
A Critical Analysis of National Apprenticeship Training Scheme (NATS) and It's Employability on Technical Graduates: A Case Study of the Eastern Region.
From Everand
A Critical Analysis of National Apprenticeship Training Scheme (NATS) and It's Employability on Technical Graduates: A Case Study of the Eastern Region.
DR. S.M. EJAZ AHMAD
No ratings yet
Exploring Higher Vocational Software Technology Education
From Everand
Exploring Higher Vocational Software Technology Education
Chen Ping
No ratings yet
Workshop Practice Manual
From Everand
Workshop Practice Manual
Jatinder Madan
No ratings yet

Industrial Training Report: E-Learning

Uploaded by

Industrial Training Report: E-Learning

Uploaded by

INDUSTRIAL TRAINING REPORT

Submitted in partial fulfilment of the requirement for degree of

Under the Guidance of

SCHOOL OF ENGINEERING & I.T,

I sincerely declare that:

1. I am the sole writer of this report.

Registration No: ……………………………………

( Miss D.Vally ) Mr. Ashwini Kumar

1 Drawbacks of existing system 8

1. Lacks Student Focused Learning

2. Lacks Emphasis on Critical Thinking

3. Lacks Process Oriented Learning

4. Lacks Emphasis on Larger Concepts or Structures

2. E-learning leads to better retention.

5. E-learning offers personalization.

multiple systems (desktops/laptops/mobiles) from any part of the world.

 Dual core Processor & above

 Client side : Web Browser (Google Chrome, Mozilla Firefox)

 Server side : Any Linux Server with Apache and MYSQL

 A Square defines a source or destination of system data.

 An Open Rectangle is a data store, data at rest or a temporary repository of

Process that transforms data

Source or Destination of data

VARIABLES DATA TYPE SIZE DISCRIPTION

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-

<button type="submit" class="btn btn-primary">Create account</button>

<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">

<button type="submit" class="btn btn-primary">Create account</button>

@media screen and (max-width:800px) {

var mybutton = document.getElementById("myBtn");

window.onscroll = function() {scrollFunction()};

You might also like