Access_New/demo-elearning-blog-single-simple.html
2024-09-05 11:33:27 +05:45

526 lines
28 KiB
HTML

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/elearning/elearning.css" />
</head>
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-style="modern" data-mobile-nav-bg-color="#313e3b">
<header>
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="demo-elearning.html">
<img src="images/demo-elearning-logo-white.png" data-at2x="images/demo-elearning-logo-white@2x.png" alt class="default-logo">
<img src="images/demo-elearning-logo-black.png" data-at2x="images/demo-elearning-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-elearning-logo-black.png" data-at2x="images/demo-elearning-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav alt-font">
<li class="nav-item"><a href="demo-elearning.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-elearning-about.html" class="nav-link">About</a></li>
<li class="nav-item dropdown dropdown-with-icon">
<a href="demo-elearning-courses.html" class="nav-link">Courses</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<a href="demo-elearning-courses-details.html"><i class="bi bi-laptop"></i>
<div class="submenu-icon-content">
<span>Development</span>
<p>Develop professional skills</p>
</div>
</a>
</li>
<li>
<a href="demo-elearning-courses-details.html"><i class="bi bi-briefcase"></i>
<div class="submenu-icon-content">
<span>Business</span>
<p>Advance your business</p>
</div>
</a>
</li>
<li>
<a href="demo-elearning-courses-details.html"><i class="bi bi-vector-pen"></i>
<div class="submenu-icon-content">
<span>Design</span>
<p>Design skills & concepts</p>
</div>
</a>
</li>
<li>
<a href="demo-elearning-courses-details.html"><i class="bi bi-megaphone"></i>
<div class="submenu-icon-content">
<span>Marketing</span>
<p>New age marketing skills</p>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item"><a href="demo-elearning-instructors.html" class="nav-link">Instructors</a></li>
<li class="nav-item"><a href="demo-elearning-testimonial.html" class="nav-link">Testimonial</a></li>
<li class="nav-item"><a href="demo-elearning-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-elearning-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end d-none d-sm-flex">
<div class="header-icon">
<div><div class="alt-font fw-500 lg-fs-15"><a href="tel:1800222000" class="widget-text text-white-hover"><i class="feather icon-feather-phone-call me-10px lg-me-5px"></i>1 800 222 000</a></div></div>
</div>
</div>
</div>
</nav>
</header>
<section class="ipad-top-space-margin bg-dark-gray cover-background one-fifth-screen d-flex align-items-center" style="background-image: url('images/demo-elearning-blog-single-simple-bg.jpg')">
<div class="background-position-center-top h-100 w-100 position-absolute left-0px top-0" style="background-image: url('images/vertical-line-bg-small.svg')"></div>
<div id="particles-style-01" class="h-100 position-absolute left-0px top-0 w-100" data-particle="true" data-particle-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot;: 12,&quot;density&quot;: {&quot;enable&quot;: true,&quot;value_area&quot;: 2000}},&quot;color&quot;: {&quot;value&quot;: [&quot;#d5d52b&quot;, &quot;#d5d52b&quot;, &quot;#d5d52b&quot;, &quot;#d5d52b&quot;, &quot;#d5d52b&quot;]},&quot;shape&quot;: {&quot;type&quot;: &quot;circle&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;}},&quot;opacity&quot;: {&quot;value&quot;: 1,&quot;random&quot;: false,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;speed&quot;: 1,&quot;sync&quot;: false}},&quot;size&quot;: {&quot;value&quot;: 8,&quot;random&quot;: true,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;sync&quot;: true}},&quot;line_linked&quot;:{&quot;enable&quot;:false,&quot;distance&quot;:0,&quot;color&quot;:&quot;#ffffff&quot;,&quot;opacity&quot;:1,&quot;width&quot;:1},&quot;move&quot;: {&quot;enable&quot;: true,&quot;speed&quot;:1,&quot;direction&quot;: &quot;right&quot;,&quot;random&quot;: false,&quot;straight&quot;: false}},&quot;interactivity&quot;: {&quot;detect_on&quot;: &quot;canvas&quot;,&quot;events&quot;: {&quot;onhover&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;repulse&quot;},&quot;onclick&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;push&quot;},&quot;resize&quot;: true}},&quot;retina_detect&quot;: false}"></div>
<div class="opacity-light bg-dark-gray"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 position-relative" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0, 1], &quot;translateX&quot;: [50, 0], &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="d-inline-block mb-20px sm-mb-25px">
<span class="text-white fs-18 opacity-5">
<a href="demo-elearning-blog.html" class="text-white">26 November 2020</a>
<span class="d-inline-block fs-24 align-top ms-10px me-10px"></span>
<a href="demo-elearning-blog.html" class="text-white">eLearning</a>
</span>
</div>
<h1 class="text-white w-60 lg-w-80 md-w-70 sm-w-100 fw-500 ls-minus-2px text-white alt-font mb-30px overflow-hidden mb-0">Some people just try to celebrate the joys of life.</h1>
<div class="text-white fs-18 mt-40px">
<img class="w-80px h-80px rounded-circle me-15px" src="images/avtar-24.jpg" alt>
<a href="demo-elearning-blog.html" class="text-white text-decoration-line-bottom">Shane smith</a>
</div>
</div>
</div>
</div>
</section>
<section class="pb-0">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<h4 class="alt-font text-dark-gray fw-600 ls-minus-1px w-90 md-w-100">Fashion is what you're offered four times a year by designers and style is what you choose.</h4>
</div>
<div class="col-lg-10 mb-6 sm-mb-35px">
<div class="row">
<div class="col-lg-6 last-paragraph-no-margin md-mb-30px">
<p class="w-90 lg-w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt sed ante ullamcorper tempor. Maecenas semper odio amet libero luctus sodales. <strong class="text-dark-gray">Pellentesque sit amet convallis ante.</strong></p>
</div>
<div class="col-lg-6 last-paragraph-no-margin">
<p class="w-90 lg-w-100"><span class="text-decoration-line-bottom">Etiam at tristique arcu sit amet sagittis</span> lorem ut idex dignissim, scelerisque augue et, varius sem. Donec sem nulla, vestibulum egestas suscipit at, tincidunt at eros. Quisque blandit nisi sed nulla vulputate.</p>
</div>
</div>
</div>
<div class="col-lg-10 mb-6 sm-mb-35px last-paragraph-no-margin text-center">
<img src="images/demo-elearning-blog-single-simple-01.jpg" class="mb-20px" alt>
<p class="pb-20px alt-font fs-14 text-uppercase">Photography by Richard winters</p>
<div class="h-1px w-100 bg-extra-medium-gray"></div>
</div>
<div class="col-lg-10 mb-6 sm-mb-35px last-paragraph-no-margin">
<h5 class="alt-font text-dark-gray fw-600 ls-minus-1px w-95 md-w-100">Fashion you can buy but style you possess. The key to style is learning who you are which takes years.</h5>
<p class="w-90 lg-w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut nim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis.</p>
</div>
<div class="col-lg-10 mb-6 sm-mb-35px">
<div class="row">
<div class="col-md-6 sm-mb-30px">
<img src="images/demo-elearning-blog-single-simple-02.jpg" alt>
</div>
<div class="col-md-6">
<img src="images/demo-elearning-blog-single-simple-03.jpg" alt>
</div>
</div>
</div>
<div class="col-lg-10 last-paragraph-no-margin">
<h5 class="alt-font text-dark-gray fw-600 ls-minus-1px w-90 md-w-100">We finished our first sensor sweep of the neutral zone</h5>
<p class="mb-6 w-90 lg-w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.</p>
<h5 class="alt-font text-dark-gray fw-600 ls-minus-1px w-90 md-w-100">You considered all your options you tried every alternative</h5>
<p class="w-90 lg-w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>
</div>
</div>
</div>
</section>
<section class="half-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="row mb-30px">
<div class="tag-cloud col-md-9 text-center text-md-start sm-mb-15px">
<a href="demo-elearning-blog.html">Development</a>
<a href="demo-elearning-blog.html">Event</a>
<a href="demo-elearning-blog.html">Multimedia </a>
<a href="demo-elearning-blog.html">Fashion</a>
</div>
<div class="tag-cloud col-md-3 text-uppercase text-center text-md-end">
<a class="likes-count fw-500 mx-0" href="demo-elearning-blog-single-simple.html#"><i class="fa-regular fa-heart text-red me-10px"></i><span class="text-dark-gray text-dark-gray-hover">05 Likes</span></a>
</div>
</div>
<div class="row">
<div class="col-12 mb-6">
<div class="d-block d-md-flex w-100 box-shadow-extra-large align-items-center border-radius-4px p-7 sm-p-35px">
<div class="w-140px text-center me-50px sm-mx-auto">
<img src="images/avtar-07.jpg" class="rounded-circle w-120px" alt>
<a href="demo-elearning-blog.html" class="text-dark-gray fw-500 mt-20px d-inline-block lh-20">Colene Landin</a>
<span class="fs-15 lh-20 d-block sm-mb-15px">Co-founder</span>
</div>
<div class="w-75 sm-w-100 text-center text-md-start last-paragraph-no-margin">
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type.</p>
<a href="demo-elearning-blog.html" class="btn btn-link btn-extra-large text-dark-gray mt-15px">All author posts</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center elements-social social-icon-style-04">
<ul class="large-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
<li><a class="behance" href="http://www.behance.com/" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-tranquil">
<div class="container">
<div class="row justify-content-center mb-1">
<div class="col-lg-7 text-center">
<span class="alt-font text-dark-gray fs-19 fw-500 mb-5px d-inline-block ls-minus-05p">You may also like</span>
<h2 class="alt-font text-dark-gray fw-600 ls-minus-3px">Related posts</h2>
</div>
</div>
<div class="row">
<div class="col-12 px-0 xs-ps-15px xs-pe-15px">
<ul class="blog-masonry blog-wrapper grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-1col xs-grid-1col gutter-extra-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="card border-0 border-radius-4px overflow-hidden box-shadow-large box-shadow-extra-large-hover">
<div class="card-top d-flex align-items-center">
<a href="demo-elearning-blog.html"><img src="images/avtar-05.jpg" class="avtar" alt></a>
<span class="fs-16">By <a href="demo-elearning-blog.html" class="text-dark-gray fw-600">Andy glamer</a></span>
<div class="like-count ms-auto fs-14">
<a href="demo-elearning-blog-single-simple.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray fw-600">65</span></a>
</div>
</div>
<div class="blog-image position-relative overflow-hidden">
<a href="demo-elearning-blog-single-simple.html"><img src="images/demo-elearning-07.jpg" alt /></a>
</div>
<div class="card-body p-0">
<div class="post-content p-11 md-p-9">
<a href="demo-elearning-blog-single-simple.html" class="card-title mb-10px fw-600 fs-19 lh-28 text-dark-gray d-inline-block">How to evaluate the effective of training programs.</a>
<p class="mb-0">Lorem ipsum has been industry standard dummy text ever...</p>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-0 border-radius-4px overflow-hidden box-shadow-large box-shadow-extra-large-hover">
<div class="card-top d-flex align-items-center">
<a href="demo-elearning-blog.html"><img src="images/avtar-04.jpg" class="avtar" alt></a>
<span class="fs-16">By <a href="demo-elearning-blog.html" class="text-dark-gray fw-600">Den viliamson</a></span>
<div class="like-count ms-auto fs-14">
<a href="demo-elearning-blog-single-simple.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray fw-600">35</span></a>
</div>
</div>
<div class="blog-image position-relative overflow-hidden">
<a href="demo-elearning-blog-single-simple.html"><img src="images/demo-elearning-08.jpg" alt /></a>
</div>
<div class="card-body p-0">
<div class="post-content p-11 md-p-9">
<a href="demo-elearning-blog-single-simple.html" class="card-title mb-10px fw-600 fs-19 lh-28 text-dark-gray d-inline-block">Experience the breathtaking views and perspectives.</a>
<p class="mb-0">Lorem ipsum has been industry standard dummy text ever...</p>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-0 border-radius-4px overflow-hidden box-shadow-large box-shadow-extra-large-hover">
<div class="card-top d-flex align-items-center">
<a href="demo-elearning-blog.html"><img src="images/avtar-03.jpg" class="avtar" alt></a>
<span class="fs-16">By <a href="demo-elearning-blog.html" class="text-dark-gray fw-600">Jones robbert</a></span>
<div class="like-count ms-auto fs-14">
<a href="demo-elearning-blog-single-simple.html#"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray fw-600">58</span></a>
</div>
</div>
<div class="blog-image position-relative overflow-hidden">
<a href="demo-elearning-blog-single-simple.html"><img src="images/demo-elearning-09.jpg" alt /></a>
</div>
<div class="card-body p-0">
<div class="post-content p-11 md-p-9">
<a href="demo-elearning-blog-single-simple.html" class="card-title mb-10px fw-600 fs-19 lh-28 text-dark-gray d-inline-block">Build up healthy habits and strong peaceful life.</a>
<p class="mb-0">Lorem ipsum has been industry standard dummy text ever...</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-9 text-center mb-2">
<h5 class="alt-font text-dark-gray fw-600 ls-minus-05px">4 Comments</h5>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-9">
<ul class="blog-comment">
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-65px sm-mb-10px">
<img src="images/avtar-18.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
<a href="demo-elearning-blog-single-simple.html#" class="text-dark-gray fw-600">Herman Miller</a>
<a href="demo-elearning-blog-single-simple.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-10px">17 July 2020, 6:05 PM</div>
<p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the make book.</p>
</div>
</div>
<ul class="child-comment">
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-65px sm-mb-10px">
<img src="images/avtar-19.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
<a href="demo-elearning-blog-single-simple.html#" class="text-dark-gray fw-600">Wilbur Haddock</a>
<a href="demo-elearning-blog-single-simple.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-10px">18 July 2020, 10:19 PM</div>
<p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since.</p>
</div>
</div>
</li>
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start border-radius-5px p-50px md-p-30px sm-p-20px bg-very-light-gray">
<div class="w-90px sm-w-65px sm-mb-10px">
<img src="images/avtar-17.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
<a href="demo-elearning-blog-single-simple.html#" class="text-dark-gray fw-600">Colene Landin</a>
<a href="demo-elearning-blog-single-simple.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-10px">18 July 2020, 12:39 PM</div>
<p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Ipsum has been the industry's standard dummy text.</p>
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-65px sm-mb-10px">
<img src="images/avtar-18.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
<a href="demo-elearning-blog-single-simple.html#" class="text-dark-gray fw-600">Jennifer Freeman</a>
<a href="demo-elearning-blog-single-simple.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-10px">19 July 2020, 8:25 PM</div>
<p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the make a type specimen book.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="comments" class="pt-0 overflow-hidden position-relative overlap-height">
<div class="container overlap-gap-section">
<div class="row justify-content-center">
<div class="col-lg-9 mb-3">
<h6 class="alt-font text-dark-gray fw-600 ls-minus-05p mb-5px">Write a comment</h6>
<div class="mb-5px">Your email address will not be published. Required fields are marked *</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-9">
<form action="email-templates/contact-form.php" method="post" class="row contact-form-style-02">
<div class="col-md-6 mb-30px">
<input class="input-name border-radius-4px form-control required" type="text" name="name" placeholder="Enter your name*">
</div>
<div class="col-md-6 mb-30px">
<input class="border-radius-4px form-control required" type="email" name="email" placeholder="Enter your email address*">
</div>
<div class="col-md-12 mb-30px">
<textarea class="border-radius-4px form-control" cols="40" rows="4" name="comment" placeholder="Your message"></textarea>
</div>
<div class="col-12">
<input type="hidden" name="redirect" value>
<button class="btn btn-dark-gray btn-small btn-round-edge submit" type="submit">Post Comment</button>
<div class="form-results mt-20px d-none"></div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="bg-gradient-aztec-green position-relative">
<div class="position-absolute left-minus-100px top-25px">
<img src="images/demo-elearning-bg-05.png" alt class="w-80">
</div>
<div class="background-position-center-top h-100 w-100 position-absolute left-0px top-0" style="background-image: url('images/vertical-line-bg-small.svg')"></div>
<div class="container overlap-section">
<div class="row g-0 justify-content-center align-items-center text-center bg-base-color border-radius-6px ps-5 pe-5 pt-3 pb-3 mb-8 sm-p-25px background-position-left-bottom background-no-repeat contain-background position-relative" style="background-image: url('images/demo-elearning-bg-06.png')">
<div class="col-lg-auto lg-mb-20px">
<h6 class="alt-font fw-600 text-dark-gray m-0 ls-minus-1px d-inline-block me-30px lg-me-0">Admission is open for the next year batch</h6>
</div>
<div class="col-auto">
<a href="demo-elearning-contact.html" class="btn btn-extra-large btn-dark-gray btn-rounded btn-box-shadow btn-switch-text d-inline-block me-20px align-middle xs-m-0">
<span>
<span class="btn-double-text" data-text="Get started now">Get started now</span>
<span><i class="feather icon-feather-thumbs-up"></i></span>
</span>
</a>
<span class="d-block d-sm-inline-block text-dark-gray fs-19 fw-600 left-icon d-inline-block align-middle xs-mt-10px ls-minus-05px"><a href="tel:12345678910"><i class="feather icon-feather-phone-call"></i>+1 234 567 8910</a></span>
</div>
</div>
</div>
<div class="container footer-dark text-center text-sm-start position-relative">
<div class="row mb-5 sm-mb-7 xs-mb-30px">
<div class="col-lg-3 col-md-4 col-sm-6 d-flex flex-column last-paragraph-no-margin md-mb-40px xs-mb-30px">
<a href="demo-elearning.html" class="footer-logo mb-15px d-inline-block">
<img src="images/demo-elearning-footer-logo.png" data-at2x="images/demo-elearning-footer-logo@2x.png" alt>
</a>
<p class="lh-28">We are providing high-quality courses for about ten years.</p>
<div class="elements-social social-text-style-01 mt-9 xs-mt-15px">
<ul class="small-icon light fw-500">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
<li><a class="behance" href="http://www.behance.com/" target="_blank">Be.</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 ps-4 last-paragraph-no-margin md-mb-40px xs-mb-30px">
<span class="fw-500 fs-18 d-block text-white mb-10px">Popular courses</span>
<ul>
<li><a href="demo-elearning-courses.html">Business finance</a></li>
<li><a href="demo-elearning-courses.html">Advanced design</a></li>
<li><a href="demo-elearning-courses.html">Web development</a></li>
<li><a href="demo-elearning-courses.html">Data visualization</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 last-paragraph-no-margin xs-mb-30px">
<span class="fw-500 fs-18 d-block text-white mb-10px">Need help?</span>
<span class="lh-26 d-block">Call us directly?</span>
<span class="text-white d-block mb-10px"><a href="tel:12345678910">+1 234 567 8910 </a><span class="bg-base-color fw-700 text-dark-gray lh-22 text-uppercase border-radius-30px ps-10px pe-10px fs-11 ms-5px d-inline-block align-middle">Free</span></span>
<span class="lh-26 d-block">Need support?</span>
<a href="cdn-cgi/l/email-protection.html#ec8489809cac8883818d8582c28f8381" class="text-white text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="6c0409001c2c0803010d0502420f0301">[email&#160;protected]</span></a>
</div>
<div class="col-lg-3 col-md-12 col-sm-6 text-md-center text-lg-start">
<span class="fs-18 fw-500 d-block text-white mb-20px">Subscribe our newsletter</span>
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-15px">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="input-small bg-dark-gray border-color-transparent-white-light w-100 form-control required" type="email" name="email" placeholder="Enter your email...">
<input type="hidden" name="redirect" value>
<button type="submit" aria-label="submit" class="btn pe-20px text-white fs-13 fw-500 lg-ps-15px lg-pe-15px submit">Submit <i class="feather icon-feather-arrow-right submit"></i></button>
<div class="form-results border-radius-4px pt-5px pb-5px ps-15px pe-15px fs-14 lh-22 mt-10px w-100 text-center position-absolute d-none"></div>
</form>
</div>
<div class="d-flex align-items-center justify-content-center justify-content-md-center justify-content-sm-start justify-content-lg-start fs-14">
<div class="d-inline-block"><i class="line-icon-Handshake me-10px align-middle icon-very-medium"></i>Protecting your privacy</div>
</div>
</div>
</div>
<div class="row align-items-center footer-bottom border-top border-color-transparent-white-light pt-30px g-0">
<div class="col-xl-7 ps-0 text-center text-xl-start lg-mb-10px">
<ul class="footer-navbar fs-16 lh-normal">
<li class="nav-item active"><a href="demo-elearning.html" class="nav-link ps-0">Home</a></li>
<li class="nav-item"><a href="demo-elearning-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-elearning-courses.html" class="nav-link">Courses</a></li>
<li class="nav-item"><a href="demo-elearning-instructors.html" class="nav-link">Instructors</a></li>
<li class="nav-item"><a href="demo-elearning-testimonial.html" class="nav-link">Testimonial</a></li>
<li class="nav-item"><a href="demo-elearning-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-elearning-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="col-xl-5 last-paragraph-no-margin text-center text-xl-end">
<p class="fs-16">&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-white text-decoration-line-bottom">ThemeZaa</a></p>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-elearning-blog-single-simple.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>