Skip to content
This repository was archived by the owner on Jan 13, 2022. It is now read-only.

Education website #480

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Education website #480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Web Tools/Education website/img/home-bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Web Tools/Education website/img/teachers.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
341 changes: 341 additions & 0 deletions Web Tools/Education website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,341 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>

<!-- google fonts cdn link -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">

<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

<!-- custom css file link -->
<link rel="stylesheet" href="style.css">

</head>
<body>

<!-- header section starts -->

<header>

<div id="menu" class="fas fa-bars"></div>

<a href="#" class="logo"><i class="fas fa-user-graduate"></i>LOGO</a>

<nav class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#course">Course</a></li>
<li><a href="#teacher">Teacher</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<div id="login" class="fas fa-user-circle"></div>

</header>

<!-- header section ends -->

<!-- login form -->

<div class="login-form">

<form action="">
<h3>login</h3>
<input type="email" placeholder="username" class="box">
<input type="password" placeholder="password" class="box">
<p>forget password? <a href="#">click here</a></p>
<p>don't have an account? <a href="#">register now</a></p>
<input type="submit" class="btn" value="login">
<i class="fas fa-times"></i>
</form>

</div>

<!-- home section starts -->

<section class="home" id="home">

<h1>education from home</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum neque aliquid similique error velit placeat vitae accusantium est nam magnam?</p>
<a href="#"><button class="btn">get started</button></a>

<div class="shape"></div>

</section>

<!-- home section ends -->

<!-- about section starts -->

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

<div class="image">
<img src="img/home-bg.jpg" alt="">
</div>

<div class="content">
<h3>why choose us?</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aperiam quaerat dolor voluptas nobis voluptates illum? Inventore voluptas dolore voluptates.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex delectus ducimus dignissimos pariatur. Amet sed distinctio earum dolorum nulla, in obcaecati aliquid modi quos magni ducimus culpa nobis laudantium incidunt.</p>
<a href="#"><button class="btn">learn more</button></a>
</div>

</section>

<!-- about section ends -->

<!-- course section starts -->

<section class="course" id="course">

<h1 class="heading">our popular courses</h1>

<div class="box-container">

<div class="box">
<img src="images/course1.jpg" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, beatae. Modi quos excepturi id quibusdam? Molestiae quis nihil non debitis!</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>

<div class="box">
<img src="images/course2.jpg" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, beatae. Modi quos excepturi id quibusdam? Molestiae quis nihil non debitis!</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>

<div class="box">
<img src="images/course3.jpg" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, beatae. Modi quos excepturi id quibusdam? Molestiae quis nihil non debitis!</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>

<div class="box">
<img src="images/course4.jpg" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, beatae. Modi quos excepturi id quibusdam? Molestiae quis nihil non debitis!</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>

<div class="box">
<img src="images/course5.jpg" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, beatae. Modi quos excepturi id quibusdam? Molestiae quis nihil non debitis!</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>

<div class="box">
<img src="images/course6.jpg" alt="">
<h3 class="price">$50</h3>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
<a href="#" class="title">learn front end development</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, beatae. Modi quos excepturi id quibusdam? Molestiae quis nihil non debitis!</p>
<div class="info">
<h3> <i class="far fa-clock"></i> 2 hours </h3>
<h3> <i class="far fa-calendar-alt"></i> 6 months </h3>
<h3> <i class="fas fa-book"></i> 12 modules </h3>
</div>
</div>
</div>

</div>

</section>

<!-- course section ends -->

<!-- teacher section starts -->

<section class="teacher" id="teacher">

<h1 class="heading">our expert teachers</h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At non explicabo tempora modi, reprehenderit ratione sunt ea porro tenetur officiis alias sapiente praesentium voluptas cumque quo maiores dolores totam ex.</p>

<a href="#"><button class="btn">learn more</button></a>
<div><img style="width: 70%;" src="img/teachers.png" alt=""></div>

</section>

<!-- teacher section ends -->

<!-- contact section starts -->

<section class="contact" id="contact">

<h1 class="heading">contact us</h1>

<div class="row">

<form action="">
<input type="text" placeholder="full name" class="box">
<input type="email" placeholder="your email" class="box">
<input type="password" placeholder="your password" class="box">
<input type="number" placeholder="your number" class="box">
<textarea name="" id="" cols="30" rows="10" class="box address" placeholder="your address"></textarea>
<input type="submit" class="btn" value="send now">
</form>

<div class="image">
<img src="images/contact-img.png" alt="">
</div>

</div>

</section>

<!-- contact section ends -->

<!-- footer section starts -->

<div class="footer">

<div class="box-container">

<div class="box">
<h3>branch locations</h3>
<a href="#">India</a>
<a href="#">USA</a>
<a href="#">france</a>
<a href="#">russia</a>
</div>

<div class="box">
<h3>quick links</h3>
<a href="#">home</a>
<a href="#">about</a>
<a href="#">course</a>
<a href="#">teachers</a>
<a href="#">contact</a>
</div>

<div class="box">
<h3>contact info</h3>
<p> <i class="fas fa-map-marker-alt"></i> mumbai, india 400104. </p>
<p> <i class="fas fa-envelope"></i> [email protected] </p>
<p> <i class="fas fa-phone"></i> +123-456-7890 </p>
</div>

</div>

<h1 class="credit">created by <a href="#">Shruti Singh</a> all rights reserved. </h1>

</div>

<!-- footer section ends -->





















<!-- jquery cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- custom js file link -->
<script src="js/script.js"></script>

</body>
</html>
40 changes: 40 additions & 0 deletions Web Tools/Education website/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
$(document).ready(function(){

$('#menu').click(function(){
$(this).toggleClass('fa-times');
$('.navbar').toggleClass('nav-toggle');
});

$('#login').click(function(){
$('.login-form').addClass('popup');
});

$('.login-form form .fa-times').click(function(){
$('.login-form').removeClass('popup');
});

$(window).on('load scroll',function(){

$('#menu').removeClass('fa-times');
$('.navbar').removeClass('nav-toggle');

$('.login-form').removeClass('popup');

$('section').each(function(){

let top = $(window).scrollTop();
let height = $(this).height();
let id = $(this).attr('id');
let offset = $(this).offset().top - 200;

if(top > offset && top < offset + height){
$('.navbar ul li a').removeClass('active');
$('.navbar').find(`[href="#${id}"]`).addClass('active');
}


});

});

});
Loading