<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8"
/>
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<!-- build:css css/main.css -->
<link
rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="node_modules/font-awesome/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="node_modules/bootstrap-social/bootstrap-social.css"
/>
<link
rel="stylesheet"
href="css/styles.css"
/>
<!-- endbuild -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans"
/>
<title>portfolio</title>
</head>
<body>
<header
class="jumbotron
jumbotron-fluid">
<div
class="container">
<div
class="row">
<div
class="col-2
align-self-center">
<img
src="img/pixlr-bg-result.png "
class="img-fluid"
/>
</div>
<div
class="col">
<h1>Margie's
Happy
Hour Bar</h1>
<h2>Where
every
day is
happy
hour</h2>
</div>
<!-- Task 1 starts here -->
<!-- Task 1 ends here -->
</div>
</div>
</header>
<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
<div class="container">
<a href="index.html"><img src="img/pixlr-bg-result.png" height="70" width="60" /></a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="index.html"><i class="fa fa-home fa-lg"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="aboutus.html"><i class="fa fa-info fa-lg"></i>About</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="menus.html"><i class="fa fa-list fa-lg"></i>Menu</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="contactus.html"><i class="fa fa-envelope fa-lg"></i>Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link text-light" href="#"><i class="fas fa dice fa-lg"></i>Games</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Container for the image gallery -->
<div class="container">
<!-- Full-width images with number text -->
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="img/air hockey.png" style="width:100%;">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="img/1_fooball.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="img/CHESS-222.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="img/IMG_5399.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="img/bar-billiards.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="img/dart -games.png" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo cursor" src="img/air hockey.png" style="width:200px; height: 175px;" onclick="currentSlide(1)" alt="Air Hockey">
</div>
<div class="column">
<img class="demo cursor" src="img/1_fooball.jpeg" style="width:200px; height: 175px;" onclick="currentSlide(2)" alt="fooseball">
</div>
<div class="column">
<img class="demo cursor" src="img/CHESS-222.jpg" style="width:200px; height: 175px;" onclick="currentSlide(3)" alt="chess">
</div>
<div class="column">
<img class="demo cursor" src="img/IMG_5399.jpg" style="width:200px; height: 175px;" onclick="currentSlide(4)" alt="Giant Jenga">
</div>
<div class="column">
<img class="demo cursor" src="img/bar-billiards.jpg" style="width:200px; height: 175px;" onclick="currentSlide(5)" alt="Pool Billiards">
</div>
<div class="column">
<img class="demo cursor" src="img/dart -games.png" style="width:200px; height: 175px;" onclick="currentSlide(6)" alt="Dart Games">
</div>
</div>
</div>
<footer class="site-footer">
<div class="container-fluid">
<div class="row">
<div class="col col-sm-2 offset-1">
<h5>Business Hours</h5>
<ul class="list-unstyled">
<li>Monday-Thursday 4pm-12am</li>
<li>Friday and Saturday 4pm-3am</li>
<li>Snday 4pm-12am</li>
</ul>
</div>
<div class="col-6 col-sm-5 text-center">
<h5>Social</h5>
<a class="btn btn-social-icon btn-instagram" href="http://instagram.com/"><i class="fa fa-instagram"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://facebook.com/"><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
</div>
<div class="col-sm-4 text-center">
<a role="button" class="btn btn-link text-white" href="tel:+12065551234"><i class="fa fa-phone"></i> 1-206-555-1234</a><br />
<a role="button" class="btn btn-link text-white" href="mailto:nargie'sBar@margie.co"><i class="fa fa-envelope"></i> margie'sBar@margie.co</a>
</div>
</div>
</div>
</footer>
<!-- jQuery must come first, then Popper.js, then the Bootstrap JavaScript plugins.-->
<!-- build:js js/main.js -->
<script
src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script
src="node_modules/popper.js/dist/umd/pop per.min.js"></script>
<script
src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- endbuild -->
</body>
</html>