GOOGLE
<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="zxx">
<!-- Mirrored from demo.w3layouts.com/demos_new/template_demo/25-10-2018/classwork_demo_Free/2103344796/web/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 20 Jan 2019 15:43:40 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
<title>ClassWork an Education Category Flat Bootstrap Responsive Web Template| Home :: w3layouts</title>
<!--meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="ClassWork Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!--//meta tags ends here-->
<!--booststrap-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<!--//booststrap end-->
<!-- font-awesome icons -->
<link href="css/fontawesome-all.min.css" rel="stylesheet" type="text/css" media="all">
<!-- //font-awesome icons -->
<link href="css/blast.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style10.css" />
<!--stylesheets-->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<!--//stylesheets-->
<link href="http://fonts.googleapis.com/css?family=Montserrat:300,400,500" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Merriweather:300,400,700,900" rel="stylesheet">
</head>
<body>
<script src='../../../../../../../ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script><script src="../../../../../../../m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
// format, zoneKey, segment:value, options
_bsa.init('flexbar', 'CKYI627U', 'placement:w3layoutscom');
}
})();
</script>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
// format, zoneKey, segment:value, options
_bsa.init('fancybar', 'CKYDL2JN', 'placement:demo');
}
})();
</script>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
// format, zoneKey, segment:value, options
_bsa.init('stickybox', 'CKYI653J', 'placement:w3layoutscom');
}
})();
</script>
<script>
(function(v,d,o,ai){ai=d.createElement("script");ai.defer=true;ai.async=true;ai.src=v.location.protocol+o;d.head.appendChild(ai);})(window, document, "../../../../../../../vdo.ai/core/w3layouts/vdo.ai.js");
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125810435-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-125810435-1');
</script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','../../../../../../../www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-30027142-1', 'w3layouts.com');
ga('send', 'pageview');
</script>
<body>
<div class="blast-box">
<div class="blast-icon"><span class="fas fa-tint"></span></div>
<div class="blast-frame">
<p>change colors</p>
<div class="blast-colors">
<div class="blast-color">#86bc42</div>
<div class="blast-color">#8373ce</div>
<div class="blast-color">#14d4f4</div>
<div class="blast-color">#72284b</div>
</div>
<p class="blast-custom-colors">Custom colors</p>
<input type="color" name="blastCustomColor" value="#cf2626">
</div>
</div>
<div class="header-outs" id="header">
<div class="header-w3layouts">
<div class="container">
<div class="row headder-contact">
<div class="col-lg-6 col-md-7 col-sm-9 info-contact-agile">
<ul>
<li>
<span class="fas fa-phone-volume" ></span>
<p>+(000)123 4565 32</p>
</li>
<li>
<span class="fas fa-envelope"></span>
<p><a href="mailto:info@example.com">info@example1.com</a></p>
</li>
<li>
</li>
</ul>
</div>
<div class="col-lg-6 col-md-5 col-sm-3 icons px-0">
<ul>
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fas fa-envelope"></span></a></li>
<li><a href="#"><span class="fas fa-rss"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
</ul>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="hedder-up">
<h1 ><a href="index.html" class="navbar-brand" data-blast="color">Classwork</a></h1>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="headdser-nav-color" data-blast="bgColor">
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link scroll" >About</a>
</li>
<li class="nav-item">
<a href="#blog" class="nav-link scroll">Blog</a>
</li>
<li class="nav-item">
<a href="#team" class="nav-link scroll">Team</a>
</li>
<li class="nav-item">
<a href="#stats" class="nav-link scroll">Stats</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link scroll">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--//navigation section -->
<div class="clearfix"> </div>
</div>
<!--banner -->
<!-- Slideshow 4 -->
<div class="slider">
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="slider-img one-img">
<div class="container">
<div class="slider-info text-left">
<h4 >Hard Work</h4>
<h5>Lorem ipsum dolor</h5>
<p>velit sagittis vehicula
</p>
<div class="outs_more-buttn" >
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slider-img two-img">
<div class="container">
<div class="slider-info text-left">
<h4>Study</h4>
<h5>Tempo Dolor Lorem</h5>
<p>velit sagittis vehicula
</p>
<div class="outs_more-buttn">
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slider-img three-img">
<div class="container">
<div class="slider-info text-left">
<h4>Class</h4>
<h5>Ipsum Dolor Eiusmo</h5>
<p>velit sagittis vehicula
</p>
<div class="outs_more-buttn">
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- This is here just to demonstrate the callbacks -->
<!-- <ul class="events">
<li>Example 4 callback events</li>
</ul>-->
<div class="clearfix"></div>
</div>
</div>
<!-- //banner -->
<!--about-->
<section class="pt-md-5 pt-sm-4 pt-3">
<!---728x90--->
<div class="container-fluid ">
<!---728x90--->
<div class="main row ">
<!-- TENTH EXAMPLE -->
<div class="col-lg-4 view view-tenth">
<img src="images/ab1.jpg" alt="" class="img-fluid">
<div class="mask">
<h3 data-blast="bgColor">Success</h3>
<p>Vivamus sed poritor felis.ntesque habitant morbi senectus et netus</p>
<a href="#" class="info" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">Read More</a>
</div>
</div>
<div class="col-lg-4 view view-tenth">
<img src="images/ab2.jpg" alt="" class="img-fluid">
<div class="mask">
<h3 data-blast="bgColor">Hard Work</h3>
<p>Vivamus sed poritor felis.ntesque habitant morbi senectus et netus</p>
<a href="#" class="info" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">Read More</a>
</div>
</div>
<div class="col-lg-4 view view-tenth">
<img src="images/ab3.jpg" alt="" class="img-fluid">
<div class="mask">
<h3 data-blast="bgColor">Admission</h3>
<p>Vivamus sed poritor felis.ntesque habitant morbi senectus et netus</p>
<a href="#" class="info" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">Read More</a>
</div>
</div>
</div>
<!---728x90--->
</div>
</section>
<section class="about" id="about">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<!--Horizontal Tab-->
<div id="horizontalTab">
<ul class="resp-tabs-list justify-content-center">
<li data-blast="bgColor">Course</li>
<li data-blast="bgColor">Academics</li>
<li data-blast="bgColor">Admission</li>
<li data-blast="bgColor">Mission</li>
</ul>
<div class="resp-tabs-container">
<div class="tab1" >
<div class="row mt-lg-4 mt-3">
<div class="col-md-7 latest-list">
<div class="about-jewel-agile-left">
<h4 class="mb-3" data-blast="color">Dolor sit </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque</p>
<h5 data-blast="color"> Who we are</h5>
</div>
</div>
<div class="col-md-5 about-txt-img">
<img src="images/ab1.jpg" class="img-thumbnail" alt="">
</div>
</div>
</div>
<div class="tab2">
<div class="row mt-lg-4 mt-3">
<div class="col-md-5 about-txt-img">
<img src="images/ab3.jpg" class="img-thumbnail" alt="">
</div>
<div class="col-md-7 latest-list">
<div class="about-jewel-agile-left">
<h4 class="mb-3" data-blast="color"> ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque</p>
<h5 data-blast="color">What We do</h5>
</div>
</div>
</div>
</div>
<div class="tab3">
<div class="row mt-lg-4 mt-3">
<div class="col-md-7 latest-list">
<div class="about-jewel-agile-left">
<h4 class="mb-3" data-blast="color">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque</p>
<h5 data-blast="color">What Our Vision</h5>
</div>
</div>
<div class="col-md-5 about-txt-img">
<img src="images/ab2.jpg" class="img-thumbnail" alt="">
</div>
</div>
</div>
<div class="tab4">
<div class="row mt-lg-4 mt-3">
<div class="col-md-5 about-txt-img">
<img src="images/ab1.jpg" class="img-thumbnail" alt="">
</div>
<div class="col-md-7 latest-list">
<div class="about-jewel-agile-left">
<h4 class="mb-3" data-blast="color"> ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta</p>
<h5 data-blast="color">What Our Mission</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//about-->
<!--service-->
<section class="service py-lg-4 py-md-3 py-sm-3 py-3" id="service">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<h3 class="title clr text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">services</h3>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 w3layouts-service-list text-center">
<div class="white-shadow">
<div class="text-wls-ser-bake">
<span class="fas fa-book banner-icon" data-blast="color"></span>
</div>
<div class="ser-inner-info">
<h4 class="my-3">Lorem ipsum</h4>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 w3layouts-service-list text-center">
<div class="white-shadow">
<div class="text-wls-ser-bake">
<span class="fas fa-pencil-alt banner-icon" data-blast="color"></span>
</div>
<div class="ser-inner-info">
<h4 class="my-3">Lorem ipsum</h4>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 w3layouts-service-list text-center">
<div class="white-shadow">
<div class="text-wls-ser-bake">
<span class="fas fa-bookmark banner-icon" data-blast="color"></span>
</div>
<div class="ser-inner-info">
<h4 class="my-3">Lorem ipsum</h4>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 w3layouts-service-list text-center mt-md-4 mt-sm-3 mt-3">
<div class="white-shadow">
<div class="text-wls-ser-bake">
<span class="fas fa-address-book banner-icon" data-blast="color"></span>
</div>
<div class="ser-inner-info">
<h4 class="my-3">Lorem ipsum</h4>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 w3layouts-service-list text-center mt-md-4 mt-sm-3 mt-3">
<div class="white-shadow">
<div class="text-wls-ser-bake">
<span class="fas fa-graduation-cap banner-icon" data-blast="color"></span>
</div>
<div class="ser-inner-info">
<h4 class="my-3">Lorem ipsum</h4>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 w3layouts-service-list text-center mt-md-4 mt-sm-3 mt-3">
<div class="white-shadow">
<div class="text-wls-ser-bake">
<span class="fab fa-cloudscale banner-icon" data-blast="color"></span>
</div>
<div class="ser-inner-info">
<h4 class="my-3">Lorem ipsum</h4>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//service-->
<!--blog -->
<section class="blog py-lg-4 py-md-3 py-sm-3 py-3" id="blog">
<div class="container py-lg-5 py-md-4 py-sm-4 py-3">
<h3 class="title text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Our Blog </h3>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex">
<div class="clients-color">
<img src="images/ab3.jpg" class="img-fluid" alt="">
<div class="blog-txt-info">
<h4 class="mt-2"><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">Quisque a rhoncus </a></h4>
<div class="news-date my-3">
<ul>
<li class="mr-3"><span class="far fa-calendar-check"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">12/4/2019</a></li>
<li><span class="far fa-comments"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">5 Comments</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</p>
<div class="outs_more-buttn" >
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex">
<div class="clients-color">
<img src="images/ab1.jpg" class="img-fluid" alt="">
<div class="blog-txt-info">
<h4 class="mt-2"><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">Quisque a rhoncus </a></h4>
<div class="news-date my-3">
<ul>
<li class="mr-3"><span class="far fa-calendar-check"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">12/4/2019</a></li>
<li><span class="far fa-comments"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">5 Comments</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</p>
<div class="outs_more-buttn" >
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex">
<div class="clients-color">
<img src="images/ab2.jpg" class="img-fluid" alt="">
<div class="blog-txt-info">
<h4 class="mt-2"><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">Quisque a rhoncus </a></h4>
<div class="news-date my-3">
<ul>
<li class="mr-3"><span class="far fa-calendar-check"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">12/4/2019</a></li>
<li><span class="far fa-comments"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">5 Comments</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</p>
<div class="outs_more-buttn" >
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex mt-lg-5 mt-md-4 mt-sm-3 mt-3">
<div class="clients-color">
<img src="images/ab3.jpg" class="img-fluid" alt="">
<div class="blog-txt-info">
<h4 class="mt-2"><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">Quisque a rhoncus </a></h4>
<div class="news-date my-3">
<ul>
<li class="mr-3"><span class="far fa-calendar-check"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive" >12/4/2019</a></li>
<li><span class="far fa-comments"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive" >5 Comments</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</p>
<div class="outs_more-buttn" >
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex mt-lg-5 mt-md-4 mt-sm-3 mt-3" >
<div class="clients-color">
<img src="images/ab1.jpg" class="img-fluid" alt="">
<div class="blog-txt-info">
<h4 class="mt-2"><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">Quisque a rhoncus </a></h4>
<div class="news-date my-3">
<ul>
<li class="mr-3"><span class="far fa-calendar-check"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">12/4/2019</a></li>
<li><span class="far fa-comments"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">5 Comments</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</p>
<div class="outs_more-buttn" >
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex mt-lg-5 mt-md-4 mt-sm-3 mt-3">
<div class="clients-color">
<img src="images/ab2.jpg" class="img-fluid" alt="">
<div class="blog-txt-info">
<h4 class="mt-2"><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">Quisque a rhoncus </a></h4>
<div class="news-date my-3">
<ul>
<li class="mr-3"><span class="far fa-calendar-check"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">12/4/2019</a></li>
<li><span class="far fa-comments"></span><a href="#" data-toggle="modal" data-target="#exampleModalLive">5 Comments</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</p>
<div class="outs_more-buttn" >
<a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="bgColor">More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//blog -->
<!--Subscribe-->
<section class="py-md-5 py-sm-4 py-3">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 subscrib-w3layouts text-center">
<h2 data-blast="color">Subscribe Us</h2>
</div>
<div class="col-lg-6 col-md-6">
<div class="newsletter">
<form action="#" method="post" class="d-flex">
<input type="email" class="form-control" placeholder="Your Email" required="">
<button class="btn1">
<span class="far fa-envelope"></span>
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!--//Subscribe-->
<!--stats-->
<section class="stats py-lg-4 py-md-3 py-sm-3 py-3" id="stats">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<h3 class="title clr text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Our Stats </h3>
<div class="jst-must-info text-center">
<div class="row stats-info">
<div class="col-lg-3 col-md-6 col-sm-6 col-6 stats-grid-1">
<div class="stats-grid" data-blast="bgColor">
<div class="counter">2045</div>
<div class="stat-info">
<h5 class="pt-2">Experience </h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 stats-grid-2">
<div class=" stats-grid" data-blast="bgColor">
<div class="counter">350</div>
<div class="stat-info">
<h5 class="pt-2"> Staff</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 stats-grid-3">
<div class=" stats-grid" data-blast="bgColor">
<div class="counter">1000</div>
<div class="stat-info">
<h5 class="pt-2"> Coffee</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 stats-grid-4">
<div class=" stats-grid" data-blast="bgColor">
<div class="counter">650</div>
<div class="stat-info">
<h5 class="pt-2"> Projects </h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//stats-->
<!--Team-->
<section class="team py-lg-4 py-md-3 py-sm-3 py-3" id="team">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<h3 class="title text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Our Staff </h3>
<div class="row ">
<div class="col-lg-3 col-md-6 col-sm-6 profile">
<div class="team-shadow">
<div class="img-box">
<img src="images/t1.jpg" alt="">
<div class="list-social-icons">
<ul>
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fas fa-envelope"></span></a></li>
<li><a href="#"><span class="fas fa-rss"></span></a></li>
<li><a href="#"><span class="fab fa-vk"></span></a></li>
</ul>
</div>
</div>
<div class="team-w3layouts-info py-lg-4 py-3 text-center" data-blast="bgColor">
<h4 class="text-white mb-2">Rox Will</h4>
<span class="wls-client-title text-black">Professor</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 profile">
<div class="team-shadow">
<div class="img-box">
<img src="images/t2.jpg" alt="">
<div class="list-social-icons">
<ul>
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fas fa-envelope"></span></a></li>
<li><a href="#"><span class="fas fa-rss"></span></a></li>
<li><a href="#"><span class="fab fa-vk"></span></a></li>
</ul>
</div>
</div>
<div class="team-w3layouts-info py-lg-4 py-3 text-center" data-blast="bgColor">
<h4 class="text-white mb-2">Sam Doi</h4>
<span class="wls-client-title text-black">Professor</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 profile">
<div class="team-shadow">
<div class="img-box">
<div class="team-list-img">
<img src="images/t3.jpg" alt="">
</div>
<div class="list-social-icons">
<ul>
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fas fa-envelope"></span></a></li>
<li><a href="#"><span class="fas fa-rss"></span></a></li>
<li><a href="#"><span class="fab fa-vk"></span></a></li>
</ul>
</div>
</div>
<div class="team-w3layouts-info py-lg-4 py-3 text-center" data-blast="bgColor">
<h4 class="text-white mb-2">Kent Kelly</h4>
<span class="wls-client-title text-black">Professor</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 profile">
<div class="team-shadow">
<div class="img-box">
<div class="team-list-img">
<img src="images/t4.jpg" alt="">
</div>
<div class="list-social-icons">
<ul>
<li><a href="#"><span class="fab fa-facebook-f" ></span></a></li>
<li><a href="#"><span class="fas fa-envelope"></span></a></li>
<li><a href="#"><span class="fas fa-rss"></span></a></li>
<li><a href="#"><span class="fab fa-vk"></span></a></li>
</ul>
</div>
</div>
<div class="team-w3layouts-info py-lg-4 py-3 text-center" data-blast="bgColor">
<h4 class="text-white mb-2">Kent Kelly</h4>
<span class="wls-client-title text-black">Professor</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//Team-->
<!--contact -->
<section class="contact py-lg-4 py-md-3 py-sm-3 py-3" id="contact">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<h3 class="title clr text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Contact Us</h3>
<div class="row">
<div class="col-md-5 address-grid">
<div class="addres-office-hour text-center" >
<ul>
<li class="mb-2">
<h6 data-blast="color">Address</h6>
</li>
<li>
<p>Melbourne,south Brisbane,<br>QLD 4101,Aurstralia.</p>
</li>
</ul>
<ul>
<li class="mt-lg-4 mt-3">
<h6 data-blast="color">Phone</h6>
</li>
<li class="mt-2">
<p>+ 1 (234) 567 8901</p>
</li>
<li class="mt-lg-4 mt-3">
<h6 data-blast="color">Email</h6>
</li>
<li class="mt-2">
<p><a href="mailto:info@example.com">info@example.com</a></p>
</li>
</ul>
</div>
</div>
<div class="col-md-7 contact-form">
<form action="#" method="post">
<div class="row text-center contact-wls-detail">
<div class="col-md-6 form-group contact-forms">
<input type="text" class="form-control" placeholder="Your Name" required="">
</div>
<div class="col-md-6 form-group contact-forms">
<input type="email" class="form-control" placeholder="Your Email" required="">
</div>
</div>
<div class="form-group contact-forms">
<input type="text" class="form-control" placeholder="Subject" required="">
</div>
<div class="form-group contact-forms">
<textarea class="form-control" rows="3" placeholder="Your Message" required=""></textarea>
</div>
<div class="sent-butnn text-center">
<button type="submit" class="btn btn-block" data-blast="bgColor">Send</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!--//contact -->
<!--footer-->
<section class="footer py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row ">
<div class="dance-agile-info col-lg-3 col-md-6 col-sm-6">
<h4 class="pb-lg-3 pb-3" data-blast="color">Blog</h4>
<div class="footer-grid row mb-3">
<div class="col-lg-5 col-md-6 col-sm-6 col-5">
<img src="images/bb1.jpg" alt=" " class="img-fluid">
</div>
<div class="col-lg-7 col-md-6 col-sm-6 col-7 bottom-para px-0">
<h6><a href="#" data-toggle="modal" data-target="#exampleModalLive">ultricies nec,pellen eu,pretium quis,</a></h6>
<div class="news-bloger">
<ul>
<li class="mr-1"><a href="#about" class="scroll" data-blast="color">12/4/2019</a></li>
<li><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">3 Tags</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-grid row mb-3">
<div class="col-lg-5 col-md-6 col-sm-6 col-5">
<img src="images/bb2.jpg" alt=" " class="img-fluid">
</div>
<div class="col-lg-7 col-md-6 col-sm-6 col-7 bottom-para px-0">
<h6><a href="#" data-toggle="modal" data-target="#exampleModalLive">ultricies nec,pellen eu,pretium quis,</a></h6>
<div class="news-bloger">
<ul>
<li class="mr-1"><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">12/4/2019</a></li>
<li><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">3 Tags</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-grid row">
<div class="col-lg-5 col-md-6 col-sm-6 col-5">
<img src="images/bb3.jpg" alt=" " class="img-fluid">
</div>
<div class="col-lg-7 col-md-6 col-sm-6 col-7 bottom-para px-0">
<h6><a href="#" data-toggle="modal" data-target="#exampleModalLive">ultricies nec,pellen eu,pretium quis,</a></h6>
<div class="news-bloger">
<ul>
<li class="mr-1"><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">12/4/2019</a></li>
<li><a href="#" data-toggle="modal" data-target="#exampleModalLive" data-blast="color">3 Tags</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="dance-agile-info col-lg-3 col-md-6 col-sm-6">
<h4 class="pb-lg-4 pb-md-3 pb-3 text-uppercase" data-blast="color">Contact Us</h4>
<div class="address_mail_footer_grids">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3539.812628729253!2d153.014155!3d-27.4750921!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b915a0835840a2f%3A0xdd5e3f5c208dc0e1!2sMelbourne+St%2C+South+Brisbane+QLD+4101%2C+Australia!5e0!3m2!1sen!2sin!4v1492257477691"></iframe>
</div>
</div>
<div class="dance-agile-info col-lg-3 col-md-6 col-sm-6">
<h4 class="pb-lg-4 pb-md-3 pb-3 text-uppercase" data-blast="color">Twitter Us</h4>
<div class="footer-office-hour">
<ul>
<li>
<p>sit amet consectetur adipiscing</p>
</li>
<li class="my-1">
<p><a href="mailto:info@example.com" data-blast="color">http://example.com</a> sit amet</p>
</li>
<li class="mb-lg-4 mb-md-3 mb-3"><span>Posted 3 days ago.</span></li>
<li>
<p>sit amet consectetur adipiscing</p>
</li>
<li class="my-1">
<p><a href="mailto:info@example.com" data-blast="color">http://mail.com</a> sit amet</p>
</li>
<li><span>Posted 3 days ago.</span></li>
</ul>
</div>
</div>
<div class="dance-agile-info col-lg-3 col-md-6 col-sm-6">
<h4 class="pb-lg-3 pb-3" data-blast="color">Our Posts</h4>
<div class="footer-post d-flex mb-2">
<div class="agileinfo_footer_grid1 mr-2">
<a href="#blog" class=" scroll">
<img src="images/f1.jpg" alt=" " class="img-fluid">
</a>
</div>
<div class="agileinfo_footer_grid1 mr-2">
<a href="#blog" class="scroll">
<img src="images/f2.jpg" alt=" " class="img-fluid">
</a>
</div>
<div class="agileinfo_footer_grid1">
<a href="#blog" class="scroll">
<img src="images/f3.jpg" alt=" " class="img-fluid">
</a>
</div>
</div>
<div class="footer-post d-flex mb-2">
<div class="agileinfo_footer_grid1 mr-2">
<a href="#blog" class="scroll">
<img src="images/f3.jpg" alt=" " class="img-fluid">
</a>
</div>
<div class="agileinfo_footer_grid1 mr-2">
<a href="#blog" class=" scroll">
<img src="images/f2.jpg" alt=" " class="img-fluid">
</a>
</div>
<div class="agileinfo_footer_grid1">
<a href="#blog" class=" scroll">
<img src="images/f1.jpg" alt=" " class="img-fluid">
</a>
</div>
</div>
<div class="footer-post d-flex">
<div class="agileinfo_footer_grid1 mr-2">
<a href="#blog" class="scroll">
<img src="images/f2.jpg" alt=" " class="img-fluid">
</a>
</div>
<div class="agileinfo_footer_grid1 mr-2">
<a href="#blog" class=" scroll">
<img src="images/f3.jpg" alt=" " class="img-fluid">
</a>
</div>
<div class="agileinfo_footer_grid1">
<a href="#blog" class=" scroll">
<img src="images/f1.jpg" alt=" " class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="nav-footer py-sm-4 py-3">
<div class="container-fluid">
<div class="buttom-nav ">
<nav class="border-line py-2">
<ul class="nav justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link scroll">About</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link scroll">Services</a>
</li>
<li class="nav-item">
<a href="#blog" class="nav-link scroll">Blog</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link scroll">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<footer class="py-3">
<div class="container">
<div class="copy-agile-right text-center">
<div class="list-social-icons text-center py-lg-4 py-md-3 py-3">
<ul>
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fas fa-envelope"></span></a></li>
<li><a href="#"><span class="fas fa-rss"></span></a></li>
<li><a href="#"><span class="fab fa-vk"></span></a></li>
</ul>
</div>
<p>
© 2018 ClassWork. All Rights Reserved | Design by <a href="http://www.w3layouts.com/" target="_blank">W3Layouts</a>
</p>
</div>
</div>
</footer>
<!--//footer-->
<!--model-->
<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLiveLabel" data-blast="color">ClassWork</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="images/b2.jpg" alt="" class="img-fluid">
<p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellu
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--//model-->
<!--js working-->
<script src='js/jquery-2.2.3.min.js'></script>
<!--//js working-->
<!--blast colors change-->
<script src="js/blast.min.js"></script>
<!--//blast colors change-->
<!--responsiveslides banner-->
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager:false,
nav:true ,
speed: 900,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--// responsiveslides banner-->
<!--responsive tabs-->
<script src="js/easy-responsive-tabs.js"></script>
<script>
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
<!--// responsive tabs-->
<!--About OnScroll-Number-Increase-JavaScript -->
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countup.js"></script>
<script>
$('.counter').countUp();
</script>
<!-- //OnScroll-Number-Increase-JavaScript -->
<!-- start-smoth-scrolling -->
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>
<script>
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 900);
});
});
</script>
<!-- start-smoth-scrolling -->
<!-- here stars scrolling icon -->
<script>
$(document).ready(function () {
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({
easingType: 'easeOutQuart'
});
});
</script>
<!-- //here ends scrolling icon -->
<!--bootstrap working-->
<script src="js/bootstrap.min.js"></script>
<!-- //bootstrap working-->
</body>
<!-- Mirrored from demo.w3layouts.com/demos_new/template_demo/25-10-2018/classwork_demo_Free/2103344796/web/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 20 Jan 2019 15:43:58 GMT -->
</html>
Copyright © 1945 -