{% extends 'base.html' %}

{% block title %}
Home-Locly.in | Take Your Shop Online Today FREE
{% endblock title %}
{% block disc %}Search the products in the local market near your home at locly.in and save your time. 
locly.in is a platform for the shops and small startups where they can start e-commerce business and can 
get free website.Now don't need to go outside just locly it and get the price in your phone. 
You can also compare the prices with the big e-commerce sites like flipkart and amazon.
{% endblock disc %}

{% block body %}
<div class="card">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active ">
        <img style="width:150px;height:400px; " src="static/3.png" class="d-block w-100 " alt="...">
      </div>
      <div class="carousel-item">
        <img style="width:150px;height:400px; " src="static/2.png" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img style="width:150px;height:400px; " src="static/4.png" class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <h2 style="text-align:center;margin-top: 5px;">About Locly.in</h2>
  <div id="about" class="container text-center">
    <div class="row">
      <br>
      <p>Search the products in the local market near your home at locly.in and save your time.
        locly.in is a platform for the shops and small startups where they can start e-commerce business and can
        get free website.Now don't need to go outside just locly it and get the price in your phone. You can also
        compare
        the prices with the big e-commerce sites like flipkart and amazon.
      </p><br>
      <br>

      <!-- Button trigger modal -->
      
      <button type="button" class="btn btn-outline-success text-center col-12" style="text-align: center;" data-toggle="modal"
        data-target="#exampleModal">
        Get free website
      </button>

      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">List Your Business</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>It's very easy to list your business. Just contact us and our team will explain everything
                and make a profile for you.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <a type="button" href="/contact" class="btn btn-primary">Contact Us</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container text-center my-3">

    <!-- Three columns of text below the carousel -->
    <div class="row my-5">
      <div class="col-lg-4">
        <span style="font-size: 90px; color:grey;">
          <i class="fas fa-store"></i>
        </span>
        <!-- <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg> -->
        <h2>Find The Shop</h2>
        <p>Find the shops of yoyr city and locality.</p>
        <!-- <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> -->
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-4">
        <span style="font-size: 90px; color: grey;">
          <i class="fas fa-search-location"></i>
        </span>
        <h2>Search The Products</h2>
        <p>Search any product, check the price that you wish to buy.</p>
        <!-- <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> -->
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-4">
        <span style="font-size: 90px; color: grey;">
          <i class="fas fa-shopping-cart"></i></i>
        </span>
        <h2>Buy</h2>
        <p>Buy directly for us.</p>
        <!-- <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> -->
      </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">Don't Need to Go Outside <span class="text-muted">You will get everything
            here</span></h2>
        <p class="lead">If you want to buy any product, why worry about this you can browse the products at home</p>
      </div>
      <div class="col-md-5">
        <img style="width:350px;height:350px;" src="static/stay-home.png" alt="..." class="rounded img-responsive">
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">It's very easy.</span></h2>
        <p class="lead">It's a headache to find any product in the local market , But on out platform you can easily
          find
          the product.</p>
      </div>
      <div class="col-md-5 order-md-1">
        <img style="width:350px;height:350px;" src="static/feat2.png" alt="..." class="rounded">
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">Stay home <span class="text-muted">Stay Safe.</span></h2>
        <p class="lead">Coronavirus (COVID-19) which is an epidemic,
          the epidemic started in China but now the disease has played all over the world.
          China was the first to be badly affected by Coronavirus. But now the United States of America,
          the world’s largest superpower, has succumbed to an epidemic like the coronavirus. </p>
      </div>
      <div class="col-md-5">
        <img style="width:350px;height:350px;" src="static/feat3.png" alt="..." class="rounded">
      </div>
    </div>


    <hr class="featurette-divider">

    <!-- /END THE FEATURETTES -->

  </div><!-- /.container -->
</div>
{% endblock body %}