
<!DOCTYPE html>
<html lang="en">

<head>
   <%@include file="includes/head.jsp" %>
</head>

<body>
    <%@include file="includes/header.jsp" %>
	
	<section class="header-banner">
		<div class="container">
			<div class="row align-items-center">
			
				<div class="col">
					<div class="head-text">
						<h1>Water Delivery Management System</h1>
						<h2>Ocean Filter</h2>
						<button class="btn btn-primary btn-lg"><a class="banner-btn" href="/project_1/SignIn.jsp">Order Now</a></button>
					</div>
				</div>
				
				<div class="col">
					<div class="head-img">
						<img alt="" src="css/header.webp">
					</div>
				</div>
				
			
			</div>
		</div>
	
	</section>
    
    <section class="trusted container">
    
    
		<div class="trust-head">
		<h1>A trusted name in <br> Bottled Water Industry</h1>
		</div>
		<div class="row">
		<div class="col trust-col">
			<div class="icon-box">
				<i class="fas fa-tint fa-5x"></i>
			</div>
			<h4>Maximum Purity</h4>
			<p>Due to the importance of water in our life we give 99.99% pure water to our customers.</p>
		</div>
		
		<div class="col trust-col">
			<div class="icon-box">
				<i class="fas fa-recycle fa-5x"></i>
			</div>
			<h4>5 Step Filtration</h4>
			<p>Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin </p>
			
		</div>
		
		<div class="col trust-col">
			<div class="icon-box">
				<i class="fas fa-hand-holding-water fa-5x"></i>
			</div>
			<h4>Healthy Water</h4>
			<p>It has roots in a piece of classical Latin give 99.99% pure water  customers.</p>

		</div>
		
		<div class="col trust-col-last">
			<div class="icon-box">
				<i class="fas fa-certificate fa-5x"></i>
			</div>
			<h4>Quality Certified</h4>
			<p> It uses a dictionary of over 200 Latin words, to generate Lorem Ipsum which looks reasonable.</p>
		</div>
		
		</div>
	
	</section>
	
	<div class="bor">
		<hr>
	</div>	
		
    <section class="container-fluid px-0">
        <div class="row align-items-center content">
            <div class="col-md-6 text-center">
                <div class="row justify-content-center">

                    <div class="col-10">
                        <h2> Helping to Improve </h2>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste mollitia, qui velit, explicabo
                            fugit
                            incidunt tempora libero facilis soluta voluptate eum commodi quidem iure, dolore nobis ex
                            officia
                            repellendus? Obcaecati?</p>
                    </div>

                </div>

            </div>

            <div class="col-md-6">
                <img class="img-fluid" src="css/5.jpg" alt="">
            </div>

        </div>
    </section>

    <section class="container-fluid px-0">
        <div class="row align-items-center content">

            <div class="col-md-6 manage">
                <img class="img-fluid" src="css/4.jpg" alt="">
            </div>

            <div class="col-md-6 text-center">
                <div class="row justify-content-center">

                    <div class="col-10">
                        <h2> Protect Your Family </h2>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste mollitia, qui velit, explicabo
                            fugit
                            incidunt tempora libero facilis soluta voluptate eum commodi quidem iure, dolore nobis ex
                            officia
                            repellendus? Obcaecati?</p>
                    </div>

                </div>

            </div>


	</div>
       
    </section>

    <section class="container-fluid px-0">
        <div class="row align-items-center content">
            <div class="col-md-6 text-center">
                <div class="row justify-content-center">

                    <div class="col-10">
                        <h2> Water Management </h2>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste mollitia, qui velit, explicabo
                            fugit
                            incidunt tempora libero facilis soluta voluptate eum commodi quidem iure, dolore nobis ex
                            officia
                            repellendus? Obcaecati?</p>
                    </div>

                </div>

            </div>

            <div class="col-md-6">
                <img class="img-fluid" src="css/6.jpg" alt="">
            </div>

        </div>
    </section>
    
    <section class="delivery">
    
    <div class="delivery-banner">
    
    <div class="row ">
    <div class="col">
    <div class="boundry">
    	<img alt="" src="css/deliver.png">
    </div>
    </div>
    <div class="col">
    	<div class="deliverPara">
    	<h1>Bottled Water Delivery and Service</h1>
    	<br>
    	<p>We give our services to more than 10 countries. We give our delivery service using more than 50 couriers within 2hr in anywhere in the city.<br><br><b>Hygenic and Ergonomic Bottles
        <br>Free Delivery On Weekends
         <br>Steps Filtration Plants
         <br>Best For Health & Hydration</b></p>
    </div>
    </div>
    </div>
    </div>
    </section>
    
    <section class="healthy">
	
		<div class="row">
		<div class="col healthyImg">
			<img alt="" src="css/healthy.png" >
		</div>
		<div class="col healthyPara">
			<h1>We Always Want Safe and Healthy Water for Healthy Life.</h1>
			<p>There are 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 the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.<br>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
		</div>
		</div>
	</section>
		
	 <div class="bor">
		<hr>
	</div>
	
	<section class="review">
	
	<h1>What our clients are saying about<br> ocean filter</h1>
	<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
	
	<div class="carousel-indicators indicator-color">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
	
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="card-review d-block ">
      <div class="card mb-3" style="max-width: 540px;">
   <div class="row g-0">
    <div class="col-md-4">
      <img src="css/Aliyan.jpg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Aliyan Pirani</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">CEO of Company</small></p>
      </div>
    </div>
  </div>
</div>
    </div>
    </div>
    <div class="carousel-item">
      <div class="card-review d-block ">
      <div class="card mb-3" style="max-width: 540px;">
   <div class="row g-0">
    <div class="col-md-4">
      <img src="css/Huzaifa.jpeg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Huzaifa Adil</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">CEO of Mindstrom</small></p>
      </div>
    </div>
  </div>
</div>
    </div>
    </div>
    <div class="carousel-item">
      <div class="card-review ">
      <div class="card mb-3" style="max-width: 540px;">
   <div class="row g-0">
    <div class="col-md-4">
      <img src="css/furqan.jpg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Furqan Fazal</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Designer</small></p>
      </div>
    </div>
  </div>
</div>
    </div>
    </div>
  </div>
</div>
		
	</section>
	<%@include file="includes/footer.jsp" %>
</body>

</html>