Â
Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive online education website design using HTML CSS And JAVASCRIPT in this Blog.
Using standard JavaScript, users can use the navigation buttons on the web design best online learning website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online tutoring sites for teachers, this video will be helpful.
You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete responsive online Cryptocurrency education website design</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="menu-btn" class="fas fa-bars"></div>
<header class="header">
<a href="" class="logo"> <i class="fas fa-infinity"></i> Crypto edu </a>
<nav class="navbar">
<a href="#home"> <i class="fas fa-angle-right"></i> home </a>
<a href="#category"> <i class="fas fa-angle-right"></i> category </a>
<a href="#about"> <i class="fas fa-angle-right"></i> about </a>
<a href="#courses"> <i class="fas fa-angle-right"></i> courses </a>
<a href="#pricing"> <i class="fas fa-angle-right"></i> pricing </a>
<a href="#contact"> <i class="fas fa-angle-right"></i> contact </a>
<a href="#reviews"> <i class="fas fa-angle-right"></i> reviews </a>
<a href="#blogs"> <i class="fas fa-angle-right"></i> blogs </a>
</nav>
<div class="share">
<a href="#" class="fab fa-facebook"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
<p class="credit">created by <span>dailywebdesign</span> || all right reserved</p>
</header>
<section class="home" id="home">
<div class="img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/home-img.svg">
</div>
<div class="content">
<span>online Cryptocurrency education</span>
<h3>A better learning future starts here. <a href="">get started</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Maiores dignissimos dolor ipsum voluptatem farhan fuga minima animi quae unde eum!</p>
<a href="#courses" class="btn"> our courses</a>
</div>
</section>
<section class="info-container">
<div class="box">
<i class="fas fa-user-graduate"></i>
<div class="info">
<h3>+550</h3>
<p>User</p>
</div>
</div>
<div class="box">
<i class="fas fa-laptop-code"></i>
<div class="info">
<h3>+70</h3>
<p>courses</p>
</div>
</div>
<div class="box">
<i class="fas fa-chalkboard-teacher"></i>
<div class="info">
<h3>+170</h3>
<p>experts</p>
</div>
</div>
</section>
<section class="category" id="category">
<div class="heading">
<span>our category</span>
<h3>our top category</h3>
</div>
<div class="box-container">
<div class="box">
<i class="fas fa-user"></i>
<h3>avtars</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
</div>
<div class="box">
<i class="fab fa-medium"></i>
<h3>art & media</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
</div>
<div class="box">
<i class="fas fa-id-card-alt"></i>
<h3>trading cards</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
</div>
<div class="box">
<i class="fas fa-link"></i>
<h3>virtual worlds</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
</div>
<div class="box">
<i class="fas fa-key"></i>
<h3>access</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
</div>
<div class="box">
<i class="fab fa-draft2digital"></i>
<h3>digiphysical goods</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
</div>
</div>
</section>
<section class="about" id="about">
<div class="img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/about-img.svg" alt="">
</div>
<div class="content">
<span>about us</span>
<h3>best online platform for Crypto learning</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis Lorem ipsum dolor sit amet,
Lorem ipsum dolor.</p>
<a href="#" class="btn">read more</a>
</div>
</section>
<section class="courses" id="courses">
<div class="heading">
<span>our courses</span>
<h3>popular courses</h3>
</div>
<div class="box-container">
<div class="box">
<div class="img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/course-1.svg">
<h3>portfolio management</h3>
</div>
<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-alt"></i>
</div>
<h3>portfolio management</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<a href="#" class="btn">select courses</a>
</div>
</div>
<div class="box">
<div class="img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/course-2.svg">
<h3>future ideas</h3>
</div>
<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-alt"></i>
</div>
<h3>future ideas</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<a href="#" class="btn">select courses</a>
</div>
</div>
<div class="box">
<div class="img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/course-3.svg">
<h3>business analysis</h3> </h3>
</div>
<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-alt"></i>
</div>
<h3>business analysis</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<a href="#" class="btn">select courses</a>
</div>
</div>
<div class="box">
<div class="img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/course-4.svg">
<h3>crypto analytics</h3>
</div>
<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-alt"></i>
</div>
<h3>crypto analytics</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<a href="#" class="btn">select courses</a>
</div>
</div>
<div class="box">
<div class="img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/course-5.svg">
<h3>manage profile</h3>
</div>
<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-alt"></i>
</div>
<h3>manage profile</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<a href="#" class="btn">select courses</a>
</div>
</div>
<div class="box">
<div class="img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/course-6.svg">
<h3>crypto investing</h3>
</div>
<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-alt"></i>
</div>
<h3>crypto investing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<a href="#" class="btn">select courses</a>
</div>
</div>
</div>
</section>
<section class="pricing" id="pricing">
<div class="heading">
<span>choose a plan</span>
<h3>affordable plans</h3>
</div>
<div class="box-container">
<div class="box">
<h3>basic plan</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/price-1.svg" alt="">
<div class="amount"> <span>$</span>30<span>/mo</span> </div>
<div class="list">
<p><i class="fas fa-check"></i> full courses</p>
<p><i class="fas fa-check"></i> online exams</p>
<p><i class="fas fa-check"></i> certificate</p>
<p><i class="fas fa-times"></i> full modules</p>
<p><i class="fas fa-times"></i> 24/7 support</p>
</div>
<a href="#" class="btn">choose plan</a>
</div>
<div class="box">
<h3>standard plan</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/price-2.svg" alt="">
<div class="amount"> <span>$</span>50<span>/mo</span> </div>
<div class="list">
<p><i class="fas fa-check"></i> full courses</p>
<p><i class="fas fa-check"></i> online exams</p>
<p><i class="fas fa-check"></i> certificate</p>
<p><i class="fas fa-check"></i> full modules</p>
<p><i class="fas fa-times"></i> 24/7 support</p>
</div>
<a href="#" class="btn">choose plan</a>
</div>
<div class="box">
<h3>premium plan</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/price-3.svg" alt="">
<div class="amount"> <span>$</span>90<span>/mo</span> </div>
<div class="list">
<p><i class="fas fa-check"></i> full courses</p>
<p><i class="fas fa-check"></i> online exams</p>
<p><i class="fas fa-check"></i> certificate</p>
<p><i class="fas fa-check"></i> full modules</p>
<p><i class="fas fa-check"></i> 24/7 support</p>
</div>
<a href="#" class="btn">choose plan</a>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="heading">
<span>contact us</span>
<h3>get in touch</h3>
</div>
<div class="row">
<div class="contact-info-container">
<div class="box">
<i class="fas fa-phone"></i>
<div class="info">
<h3>phone :</h3>
<p>+111-222-3333</p>
<p>+123-456-7890</p>
</div>
</div>
<div class="box">
<i class="fas fa-envelope"></i>
<div class="info">
<h3>email :</h3>
<p>shaikhfarhan@gmail.</p>
<p>farhan@gmail.com</p>
</div>
</div>
<div class="box">
<i class="fas fa-map"></i>
<div class="info">
<h3>address :</h3>
<p>mumbai, india - 401203</p>
</div>
</div>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<form action="">
<div class="inputBox">
<input type="text" placeholder="name" name="" id="">
<input type="email" placeholder="email" name="" id="">
</div>
<div class="inputBox">
<input type="number" placeholder="phone" name="" id="">
<input type="text" placeholder="subject" name="" id="">
</div>
<textarea name="" placeholder="message" id="" cols="30" rows="10"></textarea>
<input type="submit" value="send message" class="btn">
</form>
</div>
</section>
<section class="reviews" id="reviews">
<div class="heading">
<span>client reviews</span>
<h3>what they say</h3>
</div>
<div class="box-container">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-1.png">
<h3>jenna bey</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<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-alt"></i>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-2.png">
<h3>edward bey</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<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-alt"></i>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-3.png">
<h3>lisa bey</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
<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-alt"></i>
</div>
</div>
</div>
</section>
<section class="blogs" id="blogs">
<div class="heading">
<span>our blogs</span>
<h3>our untold stories</h3>
</div>
<div class="box-container">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog-1.svg" alt="">
<a href="#" class="title">blog title goes here.</a>
<p class="blog-description">lorem ipsum dolor sit amet, consectetipsum doloripsum dolor</p>
<div class="icons">
<p><i class="fas fa-clender"></i>1st jan, 2022</p>
<a href="#">read more</a>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog-2.svg" alt="">
<a href="#" class="title">blog title goes here.</a>
<p class="blog-description">lorem ipsum dolor sit amet, consectetipsum doloripsum dolor</p>
<div class="icons">
<p><i class="fas fa-clender"></i>2nd jan, 2022</p>
<a href="#">read more</a>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog-3.svg" alt="">
<a href="#" class="title">blog title goes here.</a>
<p class="blog-description">lorem ipsum dolor sit amet, consectetipsum doloripsum dolor</p>
<div class="icons">
<p><i class="fas fa-clender"></i>12 jan, 2022</p>
<a href="#">read more</a>
</div>
</div>
</div>
</section>
<script type="litespeed/javascript" data-src="main.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://dailywebdesigns.com/wp-content/litespeed/js/1b3f96ee2c4d7c42a4b314914800caf2.js?ver=5a62f"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap');
*{
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: all .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}
html::-webkit-scrollbar{
width: 1rem;
}
html::-webkit-scrollbar-track{
background: transparent;
}
html::-webkit-scrollbar-thumb{
background: #BA68C8;
}
body{
padding-left: 30rem;
}
section{
padding:3rem 5%;
}
section:nth-child(even) {
background: #f6f6f6;
}
.heading{
text-align:center;
margin-bottom:3rem;
}
.heading span{
font-size:2rem;
color: #BA68C8;
text-transform: uppercase;
}
.heading h3{
padding-top: 1rem;
font-size: 3rem;
color: #000;
text-transform: uppercase;
}
.btn{
display: inline-block;
margin-top: 1rem;
padding: 1.2rem 3rem;
cursor:pointer;
color: #fff;
background-color: #000;
font-size: 1.7rem;
}
.btn:hover{
background-color: #BA68C8;
}
.header{
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background:#BA68C8;
width: 30rem;
height: 100%;
padding:3rem;
}
.header .logo{
font-size: 2.5rem;
color: #fff;
}
.header .logo i{
color: #ff0;
}
.header .navbar{
padding: 20% 0;
}
.header .navbar a{
display: block;
font-size: 2rem;
margin: 1.7rem 0;
color: #fff;
}
.header .navbar a i{
color: #ff0;
padding-right: .5rem;
}
.header .navbar a:hover{
color: #ff0;
}
.header .navbar a:hover i{
padding-right: 2rem;
}
.header .share{
text-align: center;
}
.header .share a{
height: 4.5rem;
width: 4.5rem;
line-height: 4.5rem;
font-size: 1.8rem;
background: #fff;
color: #BA68C8;
margin: 0 .1rem;
}
.header .share a:hover{
color: #BA68C8;
background: #000;
}
.header .credit{
text-align: center;
color:#fff;
font-size: 1.6rem;
padding-top: 15%;
}
.header .credit span{
color: #ff0;
}
#menu-btn{
position: fixed;
top: 1rem;
right:2rem;
height:5rem;
width:5rem;
line-height: 5rem;
font-size: 2.5rem;
background: #BA68C8;
color: #fff;
cursor: pointer;
text-align: center;
z-index: 10000;
display: none;
}
#menu-btn.fa-times {
background: #fff;
color: #BA68C8;
}
.home{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}
.home .img{
flex: 1 1 40rem;
}
.home .img img{
width: 100%;
}
.home .content{
width: 45rem;
}
.home .content span{
color: #000;
font-size: 2rem;
font-weight: bold;
}
.home .content h3{
color: #000;
font-size: 3rem;
padding: 2rem 0;
}
.home .content h3 a{
color: #BA68C8;
}
.home .content h3 a:hover{
text-decoration: underline;
}
.home .content p{
font-size: 1.4rem;
color: #777;
padding-bottom: 1rem;
line-height: 2;
}
.info-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 2rem;
}
.info-container .box{
padding:3rem;
background: #fff;
display: flex;
align-items: center;
gap: 1.5rem;
border: 0.1rem solid #999;
}
.info-container .box i{
height:5rem;
width:5rem;
line-height:5rem;
font-size: 2rem;
border-radius:50%;
background: #BA68C8;
color: #fff;
text-align: center;
}
.info-container .box h3{
font-size: 2rem;
padding-bottom: .5rem;
color: #BA68C8;
}
.info-container .box p{
font-size: 1.5rem;
color: #777;
}
.category .box-container{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;
}
.category .box-container .box{
text-align: center;
padding: 3rem 1rem;
border: 0.1rem solid #999;
}
.category .box-container .box i {
height: 5.5rem;
width: 5.5rem;
line-height: 5.5rem;
font-size: 2rem;
border-radius: .5rem;
color: #fff;
background: #BA68C8;
margin-bottom: 1.5rem;
}
.category .box-container .box i:hover{
transform:translateY(-1rem);
}
.category .box-container .box h3{
font-size: 2rem;
color: #263238;
}
.category .box-container .box p{
font-size: 1.4rem;
color: #777;
line-height: 2;
padding-top: 1.5rem;
}
.about{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}
.about .img{
flex: 1 1 40rem;
}
.about .img img{
width: 100%;
}
.about .content{
width: 45rem;
}
.about .content span{
font-size:2rem;
color: #BA68C8;
font-weight: bold;
}
.about .content h3{
padding-top: 2rem;
font-size: 2.4rem;
color: #263238;
}
.about .content p{
padding: 1.5rem;
line-height: 2;
font-size: 1.4rem;
color: #777;
}
.courses .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;
}
.courses .box-container .box{
position: relative;
padding: 2rem;
border: 0.1rem solid #999;
overflow: hidden;
text-align: center;
}
.courses .box-container .box:hover .content{
opacity: 1;
}
.courses .box-container .box .img img{
width: 100%;
}
.courses .box-container .box .img h3{
font-size: 2rem;
color: #263238;
font-weight: normal;
padding-bottom: 1rem;
}
.courses .box-container .box .content{
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
background: #BA68C8;
padding:2rem;
opacity: 0;
}
.courses .box-container .box .content .stars{
padding-bottom: 2rem;
}
.courses .box-container .box .content .stars i{
font-size: 1.7rem;
color: #ff0;
}
.courses .box-container .box .content h3{
font-size: 2rem;
color: #fff;
}
.courses .box-container .box .content p{
font-size: 1.4rem;
color: #fff;
padding: 1.5rem 0;
line-height: 2;
}
.courses .box-container .box .content .btn:hover{
background:#ff0;
color: #263238;
}
.pricing .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;
}
.pricing .box-container .box{
text-align: center;
padding:2rem;
border: 0.1rem solid #999;
background: #fff;
}
.pricing .box-container .box h3{
font-size: 2rem;
color: #263238;
}
.pricing .box-container .box img{
height:20rem;
}
.pricing .box-container .box .amount{
font-size: 5rem;
color: #BA68C8;
}
.pricing .box-container .box .amount span{
font-size:2.5rem;
}
.pricing .box-container .box .list{
padding: 1.5rem 0;
text-align: left;
}
.pricing .box-container .box .list p{
padding: 1rem 0;
font-size: 1.5rem;
color: #777;
}
.pricing .box-container .box .list p i{
color: #BA68C8;
padding-right: .5rem;
}
.pricing .box-container .box .list p i.fa-times {
color: #000;
}
.contact .row{
display:flex;
flex-wrap: wrap;
gap:2rem;
}
.contact .row .contact-info-container {
width: 40rem;
}
.contact .row .contact-info-container .box{
margin-bottom: 3rem;
display: flex;
gap:1.5rem;
}
.contact .row .contact-info-container .box i{
height:5rem;
width:5rem;
line-height: 5rem;
font-size:1.7rem;
background: #BA68C8;
color: #fff;
border-radius:50%;
text-align:center;
margin-top:-1rem;
}
.contact .row .contact-info-container .box h3{
font-size: 2rem;
color: #263238;
padding-bottom: 1rem;
}
.contact .row .contact-info-container .box p{
font-size: 1.5rem;
color: #777;
line-height: 2;
}
.contact .row .contact-info-container .share{
padding-top: 1rem;
}
.contact .row .contact-info-container .share a{
height:5rem;
width:5rem;
line-height: 5rem;
font-size: 2rem;
background: #000;
color: #BA68C8;
margin-right: .1rem;
text-align: center;
}
.contact .row .contact-info-container .share a:hover{
background: #BA68C8;
color: #fff;
}
.contact .row form{
flex: 1 1 42rem;
}
.contact .row form .inputBox{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
.contact .row form .inputBox input{
width: 49%;
}
.contact .row form .inputBox input,
.contact .row form textarea{
padding:1.4rem;
background: #f6f6f6;
text-transform: none;
color: #777;
margin: .7rem 0;
font-size: 1.6rem;
border: 0.1rem solid #999;
}
.contact .row form textarea{
width:100%;
resize: none;
height: 15rem;
}
.reviews .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;
}
.reviews .box-container .box{
text-align: center;
padding:3rem;
background: #fff;
border: 0.1rem solid #999;
}
.reviews .box-container .box img{
height:10rem;
width:10rem;
border-radius: 50%;
margin-bottom:1rem;
}
.reviews .box-container .box h3{
font-size: 2rem;
color: #263238;
}
.reviews .box-container .box p{
line-height: 2;
padding: 2rem 0;
font-size: 1.3rem;
color: #777;
}
.reviews .box-container .box .stars i{
font-size: 1.7rem;
color: #BA68C8;
}
.blogs .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:2rem;
}
.blogs .box-container .box{
text-align: center;
padding: 2rem;
border: 0.1rem solid #999;
}
.blogs .box-container .box:hover img{
transform: translateY(-1rem);
}
.blogs .box-container .box img{
height:20rem;
}
.blogs .box-container .box .title{
display: block;
margin-bottom:1rem;
font-size: 2rem;
color: #263238;
}
.blogs .box-container .box .title:hover{
text-decoration: underline;
}
.blogs .box-container .box .blog-description{
padding:1rem 0;
font-size: 1.4rem;
color: #777;
line-height: 2;
}
.blogs .box-container .box .icons{
padding-top: 1.7rem;
margin-top:1.5rem;
border-top: 0.1rem solid #999;
display: flex;
align-items: center;
justify-content: space-between;
}
.blogs .box-container .box .icons p{
font-size: 1.4rem;
color: #777;
}
.blogs .box-container .box .icons p i{
padding-right: .5rem;
color: #BA68C8;
}
.blogs .box-container .box .icons a{
font-size: 1.4rem;
color: #263238;
}
.blogs .box-container .box .icons a:hover{
text-decoration: underline;
}
@media (max-width:1200px){
html{
font-size: 55%;
}
}
@media (max-width:991px){
body{
padding-left: 0;
}
#menu-btn{
display: block;
}
.header{
left: -110%;
}
.header.active{
left: 0;
box-shadow: 0 0 0 100vw rgba(0,0,0,0.7);
width: 35rem;
}
.home .content h3{
font-size:2.5rem;
}
}
@media (max-width:450px){
html{
font-size: 50%;
}
.contact .row form .inputBox input{
width:100%;
}
}
main.js
let menu = document.querySelector('#menu-btn');
let header = document.querySelector('.header');
menu.onclick = function(){
menu.classList.toggle('fa-times');
header.classList.toggle('active');
}
window.onscroll = function(){
menu.classList.remove('fa-times');
header.classList.remove('active');
}