Teacher Evaluation Sheet

Name of Student: Ahire Samyak Pravin

Enrolment No: 2100790195
Name of Program: Computer Technology Semester:-V
Course Title: Client Side Scripting Language (CSS) Code: -22519
Title of the Micro Project: E- Learning Website

Course Outcomes Achieved:-

a) Create interactive web pages using a program flow control structure.
b) Implement arrays and functions in Java script.
c) Create event based web forms using a Java script.
d) Uses Java script for handling cookies.
e) Create an interactive web-page using regular expressions for validation.
f) Create menus and navigation on web pages.

Evaluation as per Suggested Rubric for Assessment of Micro-Project:

Sr.
Characteristic to be Poor Average Good Excellent
No.
assessed (Marks 1-3) (Marks 4-5) (Marks 6 - 8) (Marks 9-10)
(A) Process and Product Assessment (Convert above total marks out of 6 marks)
1 Relevance to the Course
Literature Survey /
2
Information Collection
Completion of the Target as
3
per project proposal
Analysis of data and
4
representation
5 Quality of Prototype / Model
6 Report Preparation
(B) Individual Presentation / Viva (Convert above total marks out of 4 marks)
8 Presentation
9 Viva
Micro – Project Evaluation Sheet:
Process Assessment Product Assessment
Part Part
Project Individual Total
A – project B – Project
Methodology Presentation / Marks
Proposal Report / Working
Name of Student (2 marks) Viva(4 marks) 10
(2 marks Model(2 marks)
Ahire Samyak Pravin
Comments / Suggestions about team work / leadership / inter – personal communication (if any)
Any Other Comment

Name and designation of the faculty Member: Mr. D. B. Zambare Signature

 MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION

SNJBs SHRI H. H. J. B. POLYTECHNIC,

CHANDWAD-423101 (Nashik)

MICRO PROJECT
Academic year: 2022-23

TITLE OF PROJECT
E-Learning Website

Program:Computer Technology Program Code:CM

Course: Client Side Scripting Language Course code: 22519

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

Sr.No. Name of Student Roll No Enrollment No Seat No

1. Ahire Samyak Pravin 30 2100790195

CERTIFICATE
This is to certify 1) Ahire Samyak Pravin

of 5th Semester of Diploma in Computer Technology of Institute, Shri H.H.J.B.

Polytechnic, Chandwad (Code: 0079) has completed the Micro-Project satisfactorily in
Subject Client Side Scripting Language (22519) for the academic year 2023-2024 as
prescribed in the curriculum.

Place: CHANDWAD

Date: / /2023

Course Teacher Head of the Department Principal

(Mr. D. B. Zambare) (Mr. P. R. Sali) (Dr. V. A. Wankhede)

Seal of
Institute
 INDEX

SR_NO. CONTENT PAGE NO.

Part A

1 Brief Introduction

2 Aim of Micro Project

3 Action Plan

4 Resources Required

Part B

1 Brief Description

2 Aim of Micro Project

3 Course Outcome Integrated

4 Actual Procedure Followed

5 Actual Resource Used

6 Outputs of the Micro-projects

7 Skill Developed

8 Applications of Microproject
 PART A-Plan

Title of micro-project: E -Learning Website

1. Aim/Benefits of the Micro-Project-

a) E-learning offers the convenience of accessing educational materials 24/7, making it
suitable for learners with busy schedules or those looking for flexibility.
b) E-learning has a global reach, providing access to diverse learners worldwide,
transcending geographical boundaries.
c) E-learning is cost-effective, as it eliminates the need for physical classrooms,
commuting, and housing expenses, benefiting both learners and educators.
d) E-learning platforms collect data on learner progress and engagement, which can be
used to improve courses and identify areas where learners may need extra support.
e) E-learning platforms track learner progress and often provide certificates upon
completion, which can be valuable for job seekers and career advancement.

2. Course Outcomes Addressed-

a) Create interactive web pages using program flow control structure.
b) Implement arrays and functions in Java script.
c) Create event based web forms using a Java script.
d) Use Java script for handling cookies.
e) Create an interactive web-page using regular expressions for validation.
f) Create menus and navigation on web pages.

3. Proposed Methodology-
 It starts with a needs assessment, which includes identifying the target audience,
defining learning objectives, and analyzing the competition.
 Planning follows, encompassing scoping the project, setting budget and timeline,
and selecting the technology stack. Content development is crucial, involving the
creation or sourcing of educational materials, ensuring content quality, and
addressing copyright and licensing issues.
 Website development is the core phase, where the user interface is designed, the
platform is built, and security measures are implemented.

4. Action Plan-
Planned Start Planned Finish
Sr no. Details of activity
Date Date
1. Finalization of topic
2. Preparation of Abstract
3. Collection of data
4. Preparation of concept
5. Seminar / Presentation
6. Submission of Micro Project
 5. Resources Required:

Sr.No Name of Specification Quantity Remarks

Resource/Material
1. Computer i3,RAM 2GB
1
(Desktop/Laptop)
2. Microsoft office words 2010 1
3. Books -
4. Websites -
5. Softwares Notepad, Web
1
Browser

PART B-Plan
Title of micro-project: E -Learning Website

1. Brief Description:
An E-learning website is a digital platform designed to deliver educational content
and facilitate learning experiences over the internet. These websites offer a wide
range of educational materials, such as video lectures, interactive quizzes,
assignments, and discussion forums, to help individuals acquire knowledge and skills.
E-learning websites are flexible, allowing learners to access materials at their own
pace and on their own schedule, making them ideal for diverse audiences, from
students seeking formal education to professionals looking to up-skills or anyone
interested in self-paced learning. They often cover a broad spectrum of subjects, from
academic topics to professional development and hobbies. E-learning websites
promote accessibility, enabling learners to access educational content from anywhere
in the world, breaking down geographical barriers.

2. Aims/Benefits of Micro Project:

A) E-learning offers the convenience of accessing educational materials 24/7,
making it suitable for learners with busy schedules or those looking for flexibility.
B) E-learning has a global reach, providing access to diverse learners worldwide,
transcending geographical boundaries.
C) E-learning is cost-effective, as it eliminates the need for physical classrooms,
commuting, and housing expenses, benefiting both learners and educators.
D) E-learning platforms collect data on learner progress and engagement, which can
be used to improve courses and identify areas where learners may need extra support.
E) E-learning platforms track learner progress and often provide certificates upon
completion, which can be valuable for job seekers and career advancement.
 3. Course Outcomes Achieved:
a) Create interactive web pages using program flow control structure.
b) Implement arrays and functions in Java script.
c) Create event based web forms using a Java script.
d) Use Java script for handling cookies.
e) Create an interactive web-page using regular expressions for validation.
f) Create menus and navigation on web pages.

4. Actual Methodology/Procedure Followed:

 Define Goals: Determine your target audience and educational objectives.

 Content: Create or curate high-quality educational content.
 Platform: Choose or build a Learning Management System (LMS).
 Website: Develop a user-friendly, responsive e-learning website.
 User Management: Implement registration, login, and user profiles.
 Course Structure: Organize courses, modules, and lessons.
 Assessment: Add quizzes and assignments for evaluation.
 Community: Include forums for interaction and peer learning.
 Analytics: Track user behavior and course performance.
 Testing: Thoroughly test the platform.
 Launch and Market: Launch, market, and attract learners.
 Support and Feedback: Provide user support and gather feedback.
 Iterate and Improve: Continuously update based on feedback.
 Compliance: Ensure legal and data privacy compliance.
 Security: Implement data security and backups.
 Scaling and Growth: Plan for platform scalability.
 Monetization: Decide on pricing and monetization strategy.
 Community Building: Foster a learning community.

5. Actual Resources Used:

Sr.No Name of Specification Quantity Remarks

Resource/Material
1. Computer i5,RAM 8GB 1
(Desktop/Laptop)
2. Microsoft office word 2010 1
3. Books - -
4. Websites - -
5. Softwares VS Studio 1
6. Output of the Micro-Project:

7. Skills Developed:
1. Learning Management Systems (LMS)
2. Content creation and organization
3. Assessment and feedback mechanisms
4. User profiles and progress tracking
5. Discussion forums and community features
6. Analytics and reporting
7. Web accessibility and user experience (UI/UX)
8. Content management and course structure
9. Monetization strategies

8. Applications of Microprojects:
1. Homeschooling: Parents and guardians use e-learning websites to provide education for
their children, accessing a variety of educational resources.
2. Soft Skills and Personal Development: E-learning websites offer courses on interpersonal
skills, leadership, time management, and personal growth.
3. IT and Technology Training: E-learning websites offer courses on programming, software
development, cybersecurity, and IT skills.

9. Project Source Code:

A. HTML Code: Home.html
<!DOCTYPE html> <meta http-equiv="X-UA-Compatible"
content="IE=edge">
<html lang="en">
<meta name="viewport"
<head> content="width=device-width, initial-
scale=1.0">
<meta charset="UTF-8">
 <title>home</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/aj
ax/libs/font-
awesome/6.1.2/css/all.min.css">
<link rel="stylesheet"
href="css/style.css">
</head>
<body>
<header class="header">
<section class="flex">
<a href="home.html"
class="logo">E-Learner</a>
<form action="search.html"
method="post" class="search-form">
<input type="text"
name="search_box" required
placeholder="search courses..."
maxlength="100">
<button type="submit"
class="fas fa-search"></button>
</form>
<div class="icons">
<div id="menu-btn"
class="fas fa-bars"></div>
<div id="search-btn"
class="fas fa-search"></div>
<div id="user-btn"
class="fas fa-user"></div>
<div id="toggle-btn"
class="fas fa-sun"></div>
</div>
<div class="profile">
<img src="images/pic-1.jpg"
class="image" alt="">
<h3 class="name">Samyak</h3>
<p class="role">studen</p>
<a href="profile.html"
class="btn">view profile</a>
<div class="flex-btn">
<a href="login.html"
class="option-btn">login</a>
<a href="register.html"
class="option-btn">register</a>
</div>
</div>
</section>
</header>
<div class="side-bar">
<div id="close-btn">
<i class="fas fa-times"></i>
</div>
<div class="profile">
<img src="images/pic-1.jpg"
class="image" alt="">
<h3 class="name">Samyak</h3>
<p class="role">student</p>
<a href="profile.html"
class="btn">view profile</a>
</div>
<nav class="navbar">
<a href="home.html"><i
class="fas fa-
home"></i><span>home</span></a>
 <a href="about.html"><i
class="fas fa-
question"></i><span>about</span></a>
<a href="courses.html"><i
class="fas fa-graduation-
cap"></i><span>courses</span></a>
<a href="teachers.html"><i
class="fas fa-chalkboard-
user"></i><span>teachers</span></a>
<a href="contact.html"><i
class="fas fa-
headset"></i><span>contact
us</span></a>
</nav>
</div>
<section class="home-grid">
<h1 class="heading">quick
options</h1>
<div class="box-container">
<div class="box">
<h3 class="title">likes and
comments</h3>
<p class="likes">total
likes : <span>25</span></p>
<a href="#" class="inline-
btn">view likes</a>
<p class="likes">total
comments : <span>12</span></p>
<a href="#" class="inline-
btn">view comments</a>
<p class="likes">saved
playlists : <span>4</span></p>
<a href="#" class="inline-
btn">view playlists</a>
</div>
<div class="box">
<h3 class="title">top
categories</h3>
<div class="flex">
<a href="#"><i class="fas
fa-
code"></i><span>development</span></a
>
<a href="#"><i class="fas
fa-chart-
simple"></i><span>business</span></a>
<a href="#"><i class="fas
fa-pen"></i><span>design</span></a>
<a href="#"><i class="fas
fa-award"></i><span>sports</span></a>
<a href="#"><i class="fas
fa-music"></i><span>music</span></a>
<a href="#"><i class="fas
fa-
camera"></i><span>photography</span><
/a>
<a href="#"><i class="fas
fa-cog"></i><span>software</span></a>
<a href="#"><i class="fas
fa-vial"></i><span>science</span></a>
</div>
</div>
<div class="box">
<h3 class="title">popular
topics</h3>
<div class="flex">
<a href="#"><i class="fab
fa-html5"></i><span>HTML</span></a>
<a href="#"><i class="fab
fa-css3"></i><span>CSS</span></a>
<a href="#"><i class="fab
fa-
js"></i><span>javascript</span></a>
 <a href="#"><i class="fab <div class="thumb">
fa-
python"></i><span>python</span></a> <img src="images/thumb-
1.png" alt="">
<a href="#"><i class="fab
fa-php"></i><span>PHP</span></a> <span>10 videos</span>

<a href="#"><i class="fab </div>

fa-java"></i><span>java</span></a>
<h3 class="title">complete
</div> HTML tutorial</h3>

</div> <a href="playlist.html"

class="inline-btn">view playlist</a>
<div class="box">
</div>
<h3 class="title">become a
tutor</h3> <div class="box">

<p class="tutor"></p> <div class="tutor">

<a href="teachers.html" <img src="images/pic-

class="inline-btn">get started</a> 3.jpg" alt="">

</div> <div class="info">

</div> <h3>Jabez</h3>

</section> <span>21-10-
2022</span>
<section class="courses">
</div>
<h1 class="heading">our
courses</h1> </div>

<div class="box-container"> <div class="thumb">

<div class="box"> <img src="images/thumb-

2.png" alt="">
<div class="tutor">
<span>10 videos</span>
<img src="images/pic-
2.jpg" alt=""> </div>

<div class="info"> <h3 class="title">complete

CSS tutorial</h3>
<h3>Prachi</h3>
<a href="playlist.html"
<span>21-10- class="inline-btn">view playlist</a>
2022</span>
</div>
</div>
<div class="box">
</div>
<div class="tutor">
 <img src="images/pic-
4.jpg" alt="">
<div class="info">
<h3>Ronak</h3>
<span>21-10-
2022</span>
</div>
</div>
<div class="thumb">
<img src="images/thumb-
3.png" alt="">
<span>10 videos</span>
</div>
<h3 class="title">complete
JS tutorial</h3>
<a href="playlist.html"
class="inline-btn">view playlist</a>
</div>
<div class="box">
<div class="tutor">
<img src="images/pic-
5.jpg" alt="">
<div class="info">
<h3>Gita</h3>
<span>21-10-
2022</span>
</div>
</div>
<div class="thumb">
<img src="images/thumb-
4.png" alt="">
<span>10 videos</span>
</div>
<h3 class="title">complete
Boostrap tutorial</h3>
<a href="playlist.html"
class="inline-btn">view playlist</a>
</div>
<div class="box">
<div class="tutor">
<img src="images/pic-
6.jpg" alt="">
<div class="info">
<h3>Siddesh</h3>
<span>21-10-
2022</span>
</div>
</div>
<div class="thumb">
<img src="images/thumb-
5.png" alt="">
<span>10 videos</span>
</div>
<h3 class="title">complete
JQuery tutorial</h3>
<a href="playlist.html"
class="inline-btn">view playlist</a>
</div>
<div class="box">
<div class="tutor">
<img src="images/pic-
7.jpg" alt="">
<div class="info">
<h3>Sakshi</h3>
 <span>21-10- </div>
2022</span>
</div>
</div>
<div class="more-btn">
</div>
<a href="courses.html"
<div class="thumb"> class="inline-option-btn">view all
courses</a>
<img src="images/thumb-
6.png" alt=""> </div>

<span>10 videos</span> </section>

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

<h3 class="title">complete </body>

SASS tutorial</h3>
</html>
<a href="playlist.html"
class="inline-btn">view playlist</a>
font-family: html::-webkit-
B. CSS Code: Style.css 'Nunito', sans-serif; scrollbar{
@import
margin:0; padding:0; width: 1rem;
url('https://fonts.goog
leapis.com/css2?family= box-sizing: border- height: .5rem;
Nunito:wght@200;300;400; box;
500;600;700&display=swa }
p'); outline: none;
border:none; html::-webkit-
scrollbar-track{
text-decoration:
:root{ none; background-color:
transparent;
--main-color:#8e44ad; }
}
--red:#e74c3c; *::selection{
html::-webkit-
--orange:#f39c12; background-color: scrollbar-thumb{
var(--main-color);
--light-color:#888; background-color:
color:#fff; var(--main-color);
--light-bg:#eee;
} }
--black:#2c3e50;
html{ body{
--white:#fff;
font-size: 62.5%; background-color:
--border:.1rem solid
var(--light-bg);
rgba(0,0,0,.2); overflow-x: hidden;
padding-left: 30rem;
} }
}
*{
body.dark{ .btn, .option-btn,

--light-color:#aaa; .delete-btn, .inline-option-btn{

--light-bg:#333; .option-btn{ background-

color:var(--orange);
--black:#fff; border-radius: .5rem;
}
--white:#222; color:#fff;
.delete-btn,
--border:.1rem solid font-size: 1.8rem;
rgba(255,255,255,.2); .inline-delete-btn{
cursor: pointer;
} background-color:
text-transform: var(--red);
body.active{ capitalize;
}
padding-left: 0; padding:1rem 3rem;
.inline-btn:hover,
} text-align: center;
.inline-option-
section{ margin-top: 1rem; btn:hover,
padding:2rem; } .inline-delete-
btn:hover,
margin: 0 auto; .btn,
.btn:hover,
max-width: 1200px; .delete-btn,
.delete-btn:hover,
} .option-btn{
.option-btn:hover{
.heading{ display: block;
background-color:
font-size: 2.5rem; width: 100%;
var(--black);
color:var(--black); }
color: var(--white);
margin-bottom: .inline-btn,
}
2.5rem;
.inline-option-btn,
.flex-btn{
border-bottom: var(-
-border); .inline-delete-btn{
display: flex;
padding-bottom: display: inline-
gap: 1rem;
1.5rem; block;
}
text-transform: }
capitalize; .header{
.btn,
} position: sticky;
.inline-btn{
.inline-btn, top:0; left:0; right:
background-color:
0;
.inline-option-btn, var(--main-color);
background-color:
.inline-delete-btn, }
var(--white);
 z-index: 1000; background:none; color:var(--white);

border-bottom: var(- } }
-border);
.header .flex .search- .header .flex .profile{
} form button{
position: absolute;
.header .flex{ background:none;
top:120%; right:
display: flex; font-size: 2rem; 2rem;

align-items: center; cursor: pointer; background-color:

var(--white);
justify-content: color:var(--black);
space-between; border-radius: .5rem;
}
position: relative; padding: 1.5rem;
.header .flex .search-
padding: 1.5rem 2rem; form button:hover{ text-align: center;

} color: var(--main- overflow: hidden;

color);
.header .flex .logo{ transform-origin:
} top right;
font-size: 2.5rem;
.header .flex .icons transform: scale(0);
color: var(--black); div{
transition: .2s
} font-size: 2rem; linear;
.header .flex .search- color:var(--black); width: 30rem;
form{
background-color: }
width: 50rem; var(--light-bg);
.header .flex .profile.
border-radius: .5rem; border-radius: .5rem; active{
background-color: height: 4.5rem; transform: scale(1);
var(--light-bg);
width: 4.5rem; }
padding:1.5rem 2rem;
line-height: 4.5rem; .header .flex .profile .
display: flex; image{
cursor: pointer;
gap:2rem; height: 10rem;
text-align: center;
} width: 10rem;
margin-left: .7rem;
.header .flex .search- border-radius: 50%;
form input{ }
object-fit: contain;
width: 100%; .header .flex .icons
div:hover{ margin-bottom: 1rem;
font-size: 1.8rem;
background-color: }
color:var(--black); var(--black);
.header .flex .profile . padding: 2rem; object-fit: contain;
name{
display: none; margin-bottom: 1rem;
font-size: 2rem;
} }
color:var(--black);
.side-bar #close-btn i{ .side-
overflow: hidden; bar .profile .name{
text-align: right;
text-overflow: font-size: 2rem;
ellipsis; font-size: 2.5rem;
color:var(--black);
white-space: nowrap; background:var(--
red); overflow: hidden;
}
border-radius: .5rem; text-overflow:
.header .flex .profile . ellipsis;
role{ color:var(--white);
white-space: nowrap;
font-size: 1.8rem; cursor: pointer;
}
color: var(--light- height: 4.5rem;
color); .side-
width: 4.5rem; bar .profile .role{
}
line-height: 4.5rem; font-size: 1.8rem;
#search-btn{
text-align: center; color: var(--light-
display: none; color);
}
} }
.side-bar #close-btn
.side-bar{ i:hover{ .side-bar .navbar a{

position: fixed; background-color: display: block;

var(--black);
top: 0; left: 0; padding: 2rem;
}
width: 30rem; font-size: 2rem;
.side-bar .profile{
background-color: }
var(--white); padding:3rem 2rem;
.side-bar .navbar a i{
height: 100vh; text-align: center;
margin-right: 1.5rem;
border-right: var(-- }
border); color:var(--main-
.side- color);
z-index: 1200; bar .profile .image{
transition: .2s
} height: 10rem; linear;

.side-bar #close-btn{ width: 10rem; }

text-align: right; border-radius: 50%; .side-bar .navbar a

span{
 color:var(--light- } }
color);
.home-grid .box- .home-grid .box-
} container .box .title{ container .flex
a:hover{
.side-bar .navbar font-size: 2rem;
a:hover{ background-color:
color: var(--black); var(--black);
background-color:
var(--light-bg); text-transform: }
capitalize;
} .home-grid .box-
} container .flex a:hover
.side-bar .navbar span{
a:hover i{ .home-grid .box-
container .box .flex{ color:var(--white);
margin-right: 2.5rem;
display: flex; }
}
flex-wrap: wrap; .home-grid .box-
.side-bar.active{ container .flex a:hover
gap: 1.5rem;
i{
left: -30rem;
margin-top: 2rem;
color:var(--white);
}
}
}
.home-grid .box-
container{ .home-grid .box-
.home-grid .box-
container .flex a{
container .tutor{
display: grid;
background-color:
padding: 1rem 0;
grid-template- var(--light-bg);
columns: repeat(auto- font-size: 1.8rem;
fit, 27.5rem); border-radius: .5rem;
color:var(--light-
gap:1.5rem; padding: 1rem 1.5rem;
color);
justify-content: font-size: 1.5rem;
line-height: 2;
center;
}
}
align-items: flex-
.home-grid .box-
start; .home-grid .box-
container .flex a i{
container .likes{
}
margin-right: 1rem;
color:var(--light-
.home-grid .box- color);
color:var(--black);
container .box{
} font-size: 1.7rem;
background-color:
var(--white); .home-grid .box- margin-top: 1.5rem;
container .flex a span{
border-radius: .5rem; }
color:var(--light-
padding:2rem; .home-grid .box-
color);
container .likes span{
 color:var(--main- text-transform: .about .box-
color); capitalize; container .box h3{

} } font-size: 2.5rem;

.about .row{ .about .box-container{ color: var(--black);

display: flex; display: grid; margin-bottom: .3rem;

align-items: center; grid-template- }

columns: repeat(auto-
flex-wrap: wrap; fit, minmax(27rem, .about .box-
1fr)); container .box p{
gap:1.5rem;
gap:1.5rem; font-size: 1.7rem;
}
justify-content: color:var(--light-
.about .row .image{ color);
center;
flex: 1 1 40rem; }
align-items: flex-
} start;
.reviews .box-
margin-top: 3rem; container{
.about .row .image img{

} display: grid;
width: 100%;

.about .box- grid-template-

height: 50rem;
container .box{ columns: repeat(auto-
} fit, minmax(30rem,
border-radius: .5rem; 1fr));
.about .row .content{
background-color: gap:1.5rem;
flex: 1 1 40rem; var(--white);
justify-content:
} padding: 2rem; center;

.about .row .content p{ display: flex; align-items: flex-

start;
font-size: 1.7rem; align-items: center;
}
line-height: 2; gap: 2.5rem;
.reviews .box-
color: var(--light- } container .box{
color);
.about .box- border-radius: .5rem;
padding: 1rem 0; container .box i{
background-color:
} font-size: 4rem; var(--white);
.about .row .content color: var(--main- padding: 2rem;
h3{ color);
}
font-size: 3rem; }
.reviews .box-
color:var(--black);
container .box p{
 line-height: 1.7; color:var(--orange); width: 5rem;

font-size: 1.7rem; } border-radius: 50%;

color: var(--light- .courses .box- object-fit: cover;

color); container{
}
} display: grid;
.courses .box-
.reviews .box- grid-template- container .box .tutor
container .box .student columns: repeat(auto- h3{
{ fit, minmax(30rem,
1fr)); font-size: 1.8rem;
margin-top: 2rem;
gap:1.5rem; color: var(--black);
display: flex;
justify-content: margin-bottom: .2rem;
align-items: center; center;
}
gap: 1.5rem; align-items: flex-
.courses .box-
start;
} container .box .tutor
} span{
.reviews .box-
container .box .student .courses .box- font-size: 1.3rem;
img{ container .box{
color:var(--light-
height: 5rem; border-radius: .5rem; color);

width: 5rem; background-color: }

var(--white);
object-fit: cover; .courses .box-
padding: 2rem; container .box .thumb{
border-radius: 50%;
} position: relative;
}
.courses .box- }
.reviews .box-
container .box .tutor{
container .box .student .courses .box-
h3{ display: flex; container .box .thumb
span{
font-size: 2rem; align-items: center;
position: absolute;
color: var(--black); gap: 1.5rem;
top:1rem; left: 1rem;
margin-bottom: .3rem; margin-bottom:
2.5rem; border-radius: .5rem;
}
} padding: .5rem
.reviews .box- 1.5rem;
container .box .student .courses .box-
.stars{ container .box .tutor background-color:
img{ rgba(0,0,0,.3);
font-size: 1.5rem;
height: 5rem; color: #fff;
 font-size: 1.5rem; } }

} .playlist- .playlist-
details .row .column{ details .row .column .s
.courses .box- ave-playlist
container .box .thumb flex: 1 1 40rem; button:hover{
img{
} background-color:
width: 100%; var(--black);
.playlist-
height: 20rem; details .row .column .s }
ave-playlist{
object-fit: cover; .playlist-
margin-bottom: details .row .column .s
border-radius: .5rem; 1.5rem; ave-playlist
} button:hover i{
}
.courses .box- color:var(--white);
.playlist-
container .box .title{ details .row .column .s }
ave-playlist button{
font-size: 2rem;
.playlist-
border-radius: .5rem; details .row .column .s
color: var(--black);
ave-playlist
background-color:
padding- button:hover span{
var(--light-bg);
bottom: .5rem;
color:var(--white);
padding:1rem 1.5rem;
padding-top: 1rem;
}
cursor: pointer;
}
.playlist-
}
.courses .more-btn{ details .row .column .t
.playlist- humb{
text-align: center;
details .row .column .s
position: relative;
margin-top: 2rem; ave-playlist button i{
}
} font-size: 2rem;
.playlist-
.playlist-details .row{ color:var(--black);
details .row .column .t
display: flex; margin-right: .8rem; humb span{

align-items: flex- } font-size: 1.8rem;

end;
.playlist- color: #fff;
gap:3rem; details .row .column .s
background-color:
ave-playlist button
flex-wrap: wrap; rgba(0,0,0,.3);
span{

background-color: border-radius: .5rem;

font-size: 1.8rem;
var(--white);
position: absolute;
color:var(--light-
padding: 2rem; color);
 top: 1rem; left: color:var(--black); gap:1.5rem;
1rem;
margin-bottom: .2rem; justify-content:
padding: .5rem center;
1.5rem; }
align-items: flex-
} .playlist- start;
details .row .column .t
.playlist- utor span{ }
details .row .column .t
humb img{ font-size: 1.5rem; .playlist-videos .box-
container .box{
height: 30rem; color: var(--light-
color); background-color:
width: 100%; var(--white);
}
object-fit: cover; border-radius: .5rem;
.playlist-
border-radius: .5rem; details .row .column .d padding: 2rem;
etails h3{
} position: relative;
font-size: 2rem;
.playlist- }
details .row .column .t color: var(--black);
utor{ .playlist-videos .box-
text-transform: container .box i{
display: flex; capitalize;
position: absolute;
align-items: center; }
top: 2rem; left:
gap: 2rem; .playlist- 2rem; right: 2rem;
details .row .column .d
margin-bottom: 2rem; etails p{ height: 20rem;

} padding: 1rem 0; border-radius: .5rem;

.playlist- line-height: 2; background-color:

details .row .column .t rgba(0,0,0,.3);
utor img{ font-size: 1.8rem;
display: flex;
height: 7rem; color: var(--light-
color); align-items: center;
width: 7rem;
} justify-content:
border-radius: 50%; center;
.playlist-videos .box-
object-fit: cover; container{ font-size: 5rem;

} display: grid; color: #fff;

.playlist- grid-template- display: none;

details .row .column .t columns: repeat(auto-
utor h3{ }
fit, minmax(30rem,
1fr));
font-size: 2rem;
.playlist-videos .box- position: relative; }
container .box:hover i{
margin-bottom: .watch-video .video-
display: flex; 1.5rem; container .info p span{

} } color: var(--light-
color);
.playlist-videos .box- .watch-video .video-
container .box img{ container .video video{ }

width: 100%; border-radius: .5rem; .watch-video .video-

container .info i{
height: 20rem; width: 100%;
margin-right: 1rem;
object-fit: cover; object-fit: contain;
color: var(--main-
border-radius: .5rem; background-color: color);
#000;
} }
}
.playlist-videos .box- .watch-video .video-
container .box h3{ .watch-video .video- container .tutor{
container .title{
margin-top: 1.5rem; display: flex;
font-size: 2rem;
font-size: 1.8rem; align-items: center;
color: var(--black);
color: var(--black); gap: 2rem;
}
} margin-bottom: 1rem;
.watch-video .video-
.playlist-videos .box- container .info{ }
container .box:hover
h3{ display: flex; .watch-video .video-
container .tutor img{
color: var(--main- margin-top: 1.5rem;
color); border-radius: 50%;
margin-bottom: 2rem;
} height: 5rem;
border-bottom: var(-
.watch-video .video- -border); width: 5rem;
container{
padding-bottom: object-fit: cover;
background-color: 1.5rem;
var(--white); }
gap: 2.5rem;
border-radius: .5rem; .watch-video .video-
align-items: center; container .tutor h3{
padding: 2rem;
} font-size: 2rem;
}
.watch-video .video- color: var(--black);
.watch-video .video- container .info p{
container .video{ margin-bottom: .2rem;
font-size: 1.6rem;
}
.watch-video .video- color: var(--light- }
container .tutor span{ color);
.comments .add-comment
font-size: 1.5rem; } h3{

color: var(--light- .watch-video .video- font-size: 2rem;

color); container .flex
button:hover{ color: var(--black);
}
background-color: margin-bottom: 1rem;
.watch-video .video- var(--black);
container .flex{ }
}
display: flex; .comments .add-comment
.watch-video .video- textarea{
align-items: center; container .flex
height: 20rem;
button:hover i{
justify-content:
space-between; resize: none;
color: var(--white);
gap: 1.5rem; background-color:
}
var(--light-bg);
} .watch-video .video-
border-radius: .5rem;
container .flex
.watch-video .video-
button:hover span{ border: var(--
container .flex button{
border);
color: var(--white);
border-radius: .5rem;
padding: 1.4rem;
}
padding: 1rem 1.5rem;
font-size: 1.8rem;
.watch-video .video-
font-size: 1.8rem;
container .description{ color: var(--black);
cursor: pointer;
line-height: 1.5; width: 100%;
background-color:
font-size: 1.7rem; margin: .5rem 0;
var(--light-bg);
color: var(--light- }
}
color);
.watch-video .video- .comments .box-
margin-top: 2rem; container{
container .flex button
i{ } display: grid;
margin-right: 1rem; .comments .add-comment{ gap: 2.5rem;
color: var(--black); background-color: background-color:
var(--white); var(--white);
}
border-radius: .5rem; padding: 2rem;
.watch-video .video-
container .flex button padding: 2rem; border-radius: .5rem;
span{
margin-bottom: 3rem; }
.comments .box- background-color: padding: 1.5rem 2rem;
container .box .user{ var(--light-bg);
display: flex;
display: flex; padding:1rem 1.5rem;
align-items: center;
align-items: center; white-space: pre-
line; gap: 1.5rem;
gap: 1.5rem;
margin: .5rem 0; }
margin-bottom: 2rem;
font-size: 1.8rem; .teachers .search-tutor
} input{
color: var(--black);
.comments .box- width: 100%;
container .box .user line-height: 1.5;
img{ background: none;
position: relative;
height: 5rem; font-size: 1.8rem;
z-index: 0;
width: 5rem; color: var(--black);
}
border-radius: 50%; }
.comments .box-
} container .box .comment .teachers .search-tutor
-box::before{ button{
.comments .box-
container .box .user content: ''; font-size: 2rem;
h3{
position: absolute; color: var(--black);
font-size: 2rem;
top: -1rem; left: cursor: pointer;
color: var(--black); 1.5rem;
background:none;
margin-bottom: .2rem; background-color:
}
var(--light-bg);
}
.teachers .search-tutor
height: 1.2rem;
.comments .box- button:hover{
container .box .user width: 2rem;
color: var(--main-
span{
clip-path: color);
font-size: 1.5rem; polygon(50% 0%, 0% 100%,
}
100% 100%);
color: var(--light-
.teachers .box-
color); }
container{
} .teachers .search-
display: grid;
tutor{
.comments .box-
grid-template-
container .box .comment margin-bottom: 2rem;
columns: repeat(auto-
-box{
border-radius: .5rem; fit, minmax(30rem,
border-radius: .5rem; 1fr));
background-color:
var(--white); gap:1.5rem;
 justify-content: .teachers .box- color: var(--light-
center; container .box .tutor{ color);

align-items: flex- display: flex; }

start;
align-items: center; .teachers .box-
} container .box p span{
gap:2rem;
.teachers .box- color: var(--main-
container .box{ margin-bottom: color);
1.5rem;
background-color: }
var(--white); }
.teacher-
border-radius: .5rem; .teachers .box- profile .details{
container .box .tutor
padding: 2rem; img{ text-align: center;

} height: 5rem; background-color:

var(--white);
.teachers .box- width: 5rem;
container .offer{ border-radius: .5rem;
border-radius: 50%;
text-align: center; padding: 2rem;
}
} }
.teachers .box-
.teachers .box- container .box .tutor .teacher-
container .offer h3{ h3{ profile .details .tutor
img{
font-size: 2.5rem; font-size: 2rem;
height: 10rem;
color: var(--black); color: var(--black);
width: 10rem;
text-transform: margin-bottom: .2rem;
capitalize; border-radius: 50%;
}
padding- object-fit: cover;
bottom: .5rem; .teachers .box-
container .box .tutor margin-bottom: 1rem;
} span{
}
.teachers .box- font-size: 1.6rem;
container .offer p{ .teacher-
color: var(--light- profile .details .tutor
line-height: 1.7; color); h3{

padding: .5rem 0; } font-size: 2rem;

color: var(--light- .teachers .box- color: var(--black);

color); container .box p{
}
font-size: 1.7rem; padding: .5rem 0;

} font-size: 1.7rem;
.teacher- background-color: .user-
profile .details .tutor var(--white); profile .info .box-
span{ container{
border-radius: .5rem;
color: var(--light- display: flex;
color); padding: 2rem;
flex-wrap: wrap;
font-size: 1.7rem; }
gap: 1.5rem;
} .user-
profile .info .user{ }
.teacher-
profile .details .flex{ text-align: center; .user-
profile .info .box-
display: flex; margin-bottom: 2rem; container .box{

flex-wrap: wrap; padding: 1rem; background-color:

var(--light-bg);
gap: 1.5rem; }
border-radius: .5rem;
margin-top: 2rem; .user-
profile .info .user padding: 2rem;
} img{
flex: 1 1 25rem;
.teacher- height: 10rem;
profile .details .flex }
p{ width: 10rem;
.user-
flex: 1 1 20rem; border-radius: 50%; profile .info .box-
container .box .flex{
border-radius: .5rem; object-fit: cover;
display: flex;
background-color: margin-bottom: 1rem;
var(--light-bg); align-items: center;
}
padding: 1.2rem 2rem; gap: 2rem;
.user-
font-size: 1.8rem; profile .info .user h3{ margin-bottom: 1rem;

color: var(--light- font-size: 2rem; }

color);
color: var(--black); .user-
} profile .info .box-
}
container .box .flex i{
.teacher-
.user-
profile .details .flex font-size:2rem;
profile .info .user p{
p span{
color: var(--white);
font-size: 1.7rem;
color: var(--main-
color); background-color:
color: var(--light-
var(--black);
color);
}
text-align: center;
padding: .3rem 0;
.user-profile .info{
border-radius: .5rem;
}
 height: 5rem; .contact .row form{ .contact .box-
container{
width: 5rem; flex: 1 1 30rem;
display: grid;
line-height: 4.9rem; background-color:
var(--white); grid-template-
} columns: repeat(auto-
padding: 2rem; fit, minmax(30rem,
.user-
1fr));
profile .info .box- text-align: center;
container .box .flex gap:1.5rem;
span{ }
justify-content:
font-size: 2.5rem; .contact .row form h3{
center;
color: var(--main- margin-bottom: 1rem;
align-items: flex-
color); start;
text-transform:
} capitalize;
margin-top: 3rem;
.user- color:var(--black);
}
profile .info .box-
font-size: 2.5rem;
container .box .flex p{ .contact .box-
} container .box{
color: var(--light-
color); .contact .row text-align: center;
form .box{
font-size: 1.7rem; background-color:
width: 100%; var(--white);
}
border-radius: .5rem; border-radius: .5rem;
.contact .row{
background-color: padding: 3rem;
display: flex;
var(--light-bg);
}
align-items: center;
margin: 1rem 0;
.contact .box-
flex-wrap: wrap; container .box i{
padding: 1.4rem;
gap: 1.5rem; font-size: 3rem;
font-size: 1.8rem;
} color: var(--main-
color: var(--black);
color);
.contact .row .image{
}
margin-bottom: 1rem;
flex: 1 1 50rem;
.contact .row form
textarea{ }
}
height: 20rem; .contact .box-
.contact .row .image
container .box h3{
img{
resize: none;
font-size: 2rem;
width: 100%;
}
color:var(--black);
}
 margin: 1rem 0; .form-container form border-top: var(--
h3{ border);
}
font-size: 2.5rem; position: sticky;
.contact .box-
container .box a{ text-transform: bottom: 0; left: 0;
capitalize; right: 0;
display: block;
color: var(--black); text-align: center;
padding-top: .5rem;
text-align: center; font-size: 2rem;
font-size: 1.8rem;
} padding:2.5rem 2rem;
color: var(--light-
color); .form-container form p{ color:var(--black);

} font-size: 1.7rem; margin-top: 1rem;

.contact .box- color: var(--light- z-index: 1000;

container .box a:hover{ color);
/* padding-bottom:
text-decoration: padding-top: 1rem; 9.5rem; */
underline;
} }
color:var(--black);
.form-container form p .footer span{
} span{
color:var(--main-
.form-container{ color: var(--red); color);

min-height: } }
calc(100vh - 20rem);
.form-container @media (max-
display: flex; form .box{ width:1200px){

align-items: center; font-size: 1.8rem; body{

justify-content: color: var(--black); padding-left: 0;

center;
border-radius: .5rem; }
}
padding: 1.4rem; .side-bar{
.form-container form{
background-color: left: -30rem;
background-color: var(--light-bg);
var(--white); transition: .2s
width: 100%; linear;
border-radius: .5rem;
margin: 1rem 0; }
padding: 2rem;
} .side-bar #close-
width: 50rem; btn{
.footer{
} display: block;
background-color:
var(--white); }
 .side-bar.active{ position: }
absolute;
left: 0; }
top: 99%; left: 0;
box-shadow: 0 0 0 right: 0; @media (max-
100vw rgba(0,0,0,.8); width:450px){
border-top: var(-
border-right: 0; -border); html{

} border-bottom: font-size: 50%;

var(--border);
} }
background-color:
@media (max- .flex-btn{
var(--white);
width:991px){
gap: 0;
border-radius: 0;
html{
flex-flow: column;
width: auto;
font-size: 55%;
}
padding: 2rem;
}
.home-grid .box-
clip-path:
} container{
polygon(0 0, 100% 0,
@media (max- 100% 0, 0 0); grid-template-
width:768px){ columns: 1fr;
transition: .2s
#search-btn{ linear; }

display: inline- } .about .row .image

block; img{
.header .flex .searc
} h-form.active{ height: 25rem;

.header .flex .searc clip-path: }

h-form{ polygon(0 0, 100% 0,
100% 100%, 0 100%);
}

C. JS Code: script.js body.classList.add('dark');

let toggleBtn =
localStorage.setItem('dark-mode',
document.getElementById('toggle-btn');
'enabled');
let body = document.body;
}
let darkMode =
const disableDarkMode = () =>{
localStorage.getItem('dark-mode');
toggleBtn.classList.replace('fa-
moon', 'fa-sun');
const enableDarkMode = () =>{
body.classList.remove('dark');
toggleBtn.classList.replace('fa-
sun', 'fa-moon');
 localStorage.setItem('dark-mode', let sideBar =
'disabled'); document.querySelector('.side-bar');

} document.querySelector('#menu-
btn').onclick = () =>{
if(darkMode === 'enabled'){
sideBar.classList.toggle('active');
enableDarkMode();
body.classList.toggle('active');
}
}
toggleBtn.onclick = (e) =>{
document.querySelector('#close-
darkMode = btn').onclick = () =>{
localStorage.getItem('dark-mode');
sideBar.classList.remove('active');
if(darkMode === 'disabled'){
body.classList.remove('active');
enableDarkMode();
}
}else{
window.onscroll = () =>{
disableDarkMode();
profile.classList.remove('active');
}
search.classList.remove('active');
}
if(window.innerWidth < 1200){
let profile =
document.querySelector('.header .flex sideBar.classList.remove('activ
.profile'); e');

document.querySelector('#user- body.classList.remove('active');
btn').onclick = () =>{ }

profile.classList.toggle('active'); }

search.classList.remove('active');

let search =
document.querySelector('.header .flex
.search-form');

document.querySelector('#search-
btn').onclick = () =>{

search.classList.toggle('active');

profile.classList.remove('active');