<!DOCTYPE html>
<html>
<head>
<title>Grab Cafe</title>
<!--Mobile responsiveness-->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--CDN to bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Link to CSS file-->
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<!--CDN to social sites icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font Awesome CDN-->
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>
<!--Navbar for site-->
<nav class="navbar navbar-expand-lg navbar-light bg-brown">
<a class="navbar-brand" href="#">Grab Cafe</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-lg-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#contact">Contact</a>
</div>
</div>
</nav>
<!--Adding cover for whole screen
<div id="cover">
<div id="cover-caption">
<div class="container">
</div>
</div>
</div>-->
<!--Carousel-->
<div id="carouselSlides" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
<li data-target="#carouselSlides" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=843991c27d422f3207d8dda937413274&auto=format&fit=crop&w=1057&q=80" alt="Cafe">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1499721297526-536718e770ba?auto=format&fit=crop&w=1050&q=80" alt="Coffee-mug">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1453408685708-56aebfce1b7a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=810be5bdc363761d5ad9590ad6b273c2&auto=format&fit=crop&w=1050&q=80" alt="Coffee-machine">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSlides" 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="#carouselSlides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--Section1-->
<setion id="icons-section">
<div class= "container">
<div class="row">
<div class="col-md-3 offset-md-1 col-sm-10 icon-card" >
<i class="fas fa-coffee"></i>
<p id="content">Lorem ipsum dolor sit amet, an unum docendi phaedrum cum, est te veniam moderatius omittantur. Vim luptatum ocurreret assueverit
te, nisl aperiam accumsan ad cum.</p>
</div>
<div class="col-md-3 offset-md-1 col-sm-10 icon-card">
<i class="fas fa-users"></i>
<p id="content">Lorem ipsum dolor sit amet, an unum docendi phaedrum cum, est te veniam moderatius omittantur. Vim luptatum ocurreret assueverit
te, nisl aperiam accumsan ad cum.</p>
</div>
<div class="col-md-3 offset-md-1 col-sm-10 icon-card">
<i class="fas fa-check"></i>
<p id="content">Lorem ipsum dolor sit amet, an unum docendi phaedrum cum, est te veniam moderatius omittantur. Vim luptatum ocurreret assueverit
te, nisl aperiam accumsan ad cum.</p>
</div>
</div>
</div>
</setion>
<!--Section2-->
<section id="feature-one">
<div class="container">
<div class="row">
<div class="col-lg-6 text-sm-center hidden-sm-down feature-content">
<img src="https://images.unsplash.com/photo-1462917882517-e150004895fa?auto=format&fit=crop&w=1050&q=80" alt="Pour Coffe">
</div>
<div class="col-lg-5 offset-lg-1 col-md-10 col-sm-5 offset-sm-1 feature-caption">
<h3>Always fresh coffee, always freshly brew</h3>
<p class="lead">Lorem ipsum dolor sit amet, an unum docendi phaedrum cum, est te veniam moderatius omittantur. Vim luptatum ocurreret assueverit
te, nisl aperiam accumsan ad cum. Partem suscipit theophrastus mei at, lorem iudicabit comprehensam ad nec. Ea esse adhuc
epicuri quo. Ludus copiosae consectetuer in eum, cu has offendit prodesset definiebas. Cu sed rebum utinam.</p>
</div>
</div>
</div>
</section>
<!--Section3-->
<section id="feature-two" class="feature-brown">
<div class="container">
<div class="row">
<div class="col-xl-5 offset-xl-1 col-lg-10 offset-lg-1 col-md-10 col-sm-5 offset-sm-1 feature-caption">
<h3>Great atmosphere for everyone!</h3>
<p class="lead">Lorem ipsum dolor sit amet, an unum docendi phaedrum cum, est te veniam moderatius omittantur. Vim luptatum ocurreret assueverit
te, nisl aperiam accumsan ad cum. Partem suscipit theophrastus mei at, lorem iudicabit comprehensam ad nec. Ea esse adhuc
epicuri quo. Ludus copiosae consectetuer in eum, cu has offendit prodesset definiebas. Cu sed rebum utinam.</p>
</div>
<div class="offset-lg-1 col-lg-5 col-sm-5 offset-sm-1 text-sm-center d-none d-xl-block feature-content">
<img src="https://images.unsplash.com/photo-1429681601148-75510b2cef43?auto=format&fit=crop&w=1050&q=80" alt="Inside Cafe Place">
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="offset-lg-1 col-lg-5 text-sm-center d-none d-sm-block feature-content">
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=Lubbock,Tx&key=AIzaSyDZkjS-_yvuhsviRHwiazwROwz_YzMueuM" allowfullscreen></iframe>
</div>
<div id="contact-info" class="col-lg-4 offset-lg-2 col-sm-3 offset-sm-3 text-center">
<h3>Contact Us</h3>
<h6>grabcafe@example.com</h6>
<h6>777-777-7777</h6>
<h6>1425 12st Somewhere,Tx</h6>
</div>
</div>
</div>
</section>
<footer id="main-footer">
<div class="container">
<div class="row">
<div id="cpy" class="col-md-6">
© 2018 Grab Cafe, this is just a web project, if actual site exists I will gladly remove this
</div>
<div class="col-md-2 offset-md-3 menu-list">
<ul class="list-unstyled">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!--CDN for JS,jQuery so Bootstrap can work better-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>