Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (96 sloc) 4.62 KB
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/my-styles.css">
<!-- JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="index.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Ramen Heaven</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">
<a class="nav-item nav-link active" href="#">Reservations<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Menu</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid my-jumbotron">
<div class="container">
<h1 class="display-4">Ramen Heaven</h1>
<p class="lead">Ramen is a Japanese dish. It consists of Chinese-style wheat noodles served in a meat or fish-based broth, <br> often flavored with soy sauce or miso, and uses toppings such as sliced pork, dried seaweed, menma, <br> and green onions.</p>
<button class="btn btn-dark">Learn more</button>
</div>
</div>
<div id="containercard">
<div class="card mb-3 locations">
<img src="images/NYC.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Find us New York</h5>
<p class="card-text">The Absolute Best Places for Ramen in NYC Right Now.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-3 locations">
<img src="images/SF.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Find us in San Francisco</h5>
<p class="card-text">Best Ramen in San Francisco.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-3 locations">
<img src="images/seat.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Find us in Seattle</h5>
<p class="card-text">Ramen's popularity has skyrocketed in Seattle in recent years.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModal">
Contact us
</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">Contacts</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>+16506600389 - from 9am till 5pm</p>
<p>+16506644006 - from 5pm till 9am</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-dark">Save changes</button>
</div>
</div>
</div>
</div>
<div>
<button data-id="0" type="button" class="btn btn-dark animal">Giraffe</button>
<button data-id="1" type="button" class="btn btn-dark animal">Hippo</button>
</div>
<div class="box"></div>
</body>
</html>