<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>ASA</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- style css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Responsive-->
<link rel="stylesheet" href="css/responsive.css">
<!-- fevicon -->
<link rel="icon" href="images/fevicon.png" type="image/gif" />
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
<!-- Tweaks for older IEs-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!-- owl stylesheets -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
</head>
<body>
<!--header section start -->
<div class="header_section">
<div class="container-fluid">
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<div class="logo"><a href="/"><img src="images/logo.png"></a></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar navbar-light" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<% if (loggedIn) { %>
<li class="nav-item">
<a class="nav-link text-danger" href="/logout">Logout</a>
</li>
<% } %>
<% if (!loggedIn) { %>
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/register">Register</a>
</li>
<% } %>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!--header section end -->
<!-- banner section start -->
<div class="banner_section layout_padding">
<div class="container">
<div id="main_slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm-12">
<div class="banner_taital">
<h1 class="outstanding_text">Outstanding</h1>
<h1 class="coffee_text">Coffee Shop</h1>
<p class="there_text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, </p>
<div class="learnmore_bt"><a href="#">Learn More</a></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-12">
<div class="banner_taital">
<h1 class="outstanding_text">Outstanding </h1>
<h1 class="coffee_text">Coffee Shop</h1>
<p class="there_text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, </p>
<div class="learnmore_bt"><a href="#">Learn More</a></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-12">
<div class="banner_taital">
<h1 class="outstanding_text">Outstanding </h1>
<h1 class="coffee_text">Coffee Shop</h1>
<p class="there_text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, </p>
<div class="learnmore_bt"><a href="#">Learn More</a></div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#main_slider" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control-next" href="#main_slider" role="button" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
<!-- banner section end -->
<!-- about section start -->
<div class="about_section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="about_taital_main">
<div class="about_taital">About Us</div>
<p class="about_text">Full cleaning and housekeeping services for companies and households.</p>
<p class="about_text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.Lorem Ipsum is simply</p>
<div class="read_bt"><a href="#">Read More</a></div>
</div>
</div>
<div class="col-md-6">
<div class="about_img"><img src="images/about-img.png"></div>
</div>
</div>
</div>
</div>
<!-- about section end -->
<!-- gallery section start -->
<div class="gallery_section layout_padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="gallery_taital">Our Gallery</h1>
<p class="gallery_text">Lorem Ipsum is simply dummy text of printing typesetting ststry lorem Ipsum the industry'ndard dummy text ever since of the 1500s, when an unknown printer took a galley of type and scra make a type specimen book. It has</p>
</div>
</div>
<div class="">
<div class="gallery_section_2">
<div class="row">
<div class="col-md-4">
<div class="container_main">
<img src="images/img-1.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="container_main">
<img src="images/img-2.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="container_main">
<img src="images/img-3.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery_section_2">
<div class="row">
<div class="col-md-4">
<div class="container_main">
<img src="images/img-4.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="container_main">
<img src="images/img-5.png" alt="Avatar" class="image">
<div class="overlay">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="container_main">
<img src="images/img-6.png" alt="Avatar" class="image">
<div class="overlay">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery_section_2">
<div class="row">
<div class="col-md-4">
<div class="container_main">
<img src="images/img-7.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="container_main">
<img src="images/img-8.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="container_main">
<img src="images/img-9.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seemore_bt"><a href="#">See More</a></div>
</div>
</div>
<!-- gallery section end -->
<!-- services section start -->
<div class="services_section layout_padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="services_taital">Services</h1>
<p class="services_text">Typesetting industry lorem Ipsum is simply dummy text of the </p>
</div>
</div>
<div class="services_section_2">
<div class="row">
<div class="col-lg-4 col-sm-12 col-md-4">
<div class="box_main active">
<div class="house_icon">
<img src="images/icon1.png" class="image_1">
<img src="images/icon1.png" class="image_2">
</div>
<h3 class="decorate_text">Original Coffee</h3>
<p class="tation_text">Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea </p>
<div class="readmore_bt"><a href="#">Read More</a></div>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-md-4">
<div class="box_main">
<div class="house_icon">
<img src="images/icon2.png" class="image_1">
<img src="images/icon2.png" class="image_2">
</div>
<h3 class="decorate_text">20 Coffee Flavors</h3>
<p class="tation_text">Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea </p>
<div class="readmore_bt"><a href="#">Read More</a></div>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-md-4">
<div class="box_main">
<div class="house_icon">
<img src="images/icon3.png" class="image_1">
<img src="images/icon3.png" class="image_2">
</div>
<h3 class="decorate_text">Pleasant Abient</h3>
<p class="tation_text">Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea </p>
<div class="readmore_bt"><a href="#">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- services section end -->
<!-- testimonial section start -->
<div class="client_section layout_padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="client_taital">Testimonial</h1>
<p class="client_text">Eeven slightly believable. If you are going to use a passage of Lorem Ipsum, you need to</p>
</div>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="client_section_2">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="testimonial_section_2">
<h4 class="client_name_text">Monila <span class="quick_icon"><img src="images/quick-icon.png"></span></h4>
<p class="customer_text">many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All themany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some embarrassing hidden in the middle of text. All the</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="client_section_2">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="testimonial_section_2">
<h4 class="client_name_text">Monila <span class="quick_icon"><img src="images/quick-icon.png"></span></h4>
<p class="customer_text">many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All themany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some embarrassing hidden in the middle of text. All the</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="client_section_2">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="testimonial_section_2">
<h4 class="client_name_text">Monila <span class="quick_icon"><img src="images/quick-icon.png"></span></h4>
<p class="customer_text">many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All themany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some embarrassing hidden in the middle of text. All the</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- testimonial section end -->
<!-- contact section start -->
<div class="contact_section layout_padding">
<div class="container">
<h1 class="contact_text">Contact Us</h1>
</div>
</div>
<div class="contact_section_2 layout_padding">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 padding_0">
<div class="mail_section">
<div class="email_text">
<div class="form-group">
<input type="text" class="email-bt" placeholder="Name" name="Email">
</div>
<div class="form-group">
<input type="text" class="email-bt" placeholder="Email" name="Email">
</div>
<div class="form-group">
<input type="text" class="email-bt" placeholder="Phone Numbar" name="Email">
</div>
<div class="form-group">
<textarea class="massage-bt" placeholder="Massage" rows="5" id="comment" name="Massage"></textarea>
</div>
<div class="send_btn">
<div type="text" class="main_bt"><a href="#">SEND</a></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 padding_0">
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-UE7m4qP-z21pH0eSc&q=Eiffel+Tower+Paris+France" width="600" height="508" frameborder="0" style="border:0; width: 100%;" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- contact section end -->
<!-- footer section start -->
<div class="footer_section layout_padding">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<h3 class="useful_text">About</h3>
<p class="footer_text">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u</p>
</div>
<div class="col-lg-3 col-sm-6">
<h3 class="useful_text">Menu</h3>
<div class="footer_menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<h1 class="useful_text">Useful Link</h1>
<p class="dummy_text">Adipiscing Elit, sed do Eiusmod Tempor incididunt </p>
</div>
<div class="col-lg-3 col-sm-6">
<h1 class="useful_text">Contact Us</h1>
<div class="location_text">
<ul>
<li>
<a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i><span class="padding_left_10">Address : Loram Ipusm</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-phone" aria-hidden="true"></i><span class="padding_left_10">Call : +01 1234567890</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope" aria-hidden="true"></i><span class="padding_left_10">Email : demo@gmail.com</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- footer section end -->
<!-- copyright section start -->
<div class="copyright_section">
<div class="container">
<p class="copyright_text">2020 All Rights Reserved. Design by <a href="https://html.design">Free html Templates</a></p>
</div>
</div>
<!-- copyright section end -->
<!-- Javascript files-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/plugin.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>