-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
111 lines (107 loc) · 4.27 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Roos Café & Bistro</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/46a8a0c63b.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Roos Café & Bistro</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Jumbotron -->
<div class="jumbotron jumbotron-fluid text-center bg-pink">
<div class="container">
<h1 class="display-4">Welcome to Roos Café & Bistro</h1>
<p class="lead">Enjoy our freshly brewed coffee and delicious bistro menu</p>
<a class="btn btn-outline-light btn-lg mt-4" href="#menu" role="button">View Menu</a>
</div>
</div>
<!-- About Section -->
<section id="about" class="py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class="text-center">About Us</h2>
<p class="lead text-justify">Roos Café & Bistro is a family-owned business that takes pride in serving only the freshest and highest quality food and drinks. Our menu is designed to offer something for everyone, from delicious breakfast options to tasty lunch and dinner items, as well as a selection of sweet treats and beverages.</p>
</div>
<div class="col-md-6">
<img src="https://i.ibb.co/vc2Mct9/about-us.jpg" alt="about us image" class="img-fluid rounded">
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-5">Our Menu</h2>
<div class="row">
<!-- Menu Item 1 -->
<div class="col-md-4">
<div class="card mb-4">
<img src="https://i.ibb.co/4gGz9N9/coffee.jpg" class="card-img-top" alt="coffee">
<div class="card-body">
<h5 class="card-title">Coffee</h5>
<p class="card-text">Our coffee is freshly brewed from locally sourced beans and is available in a variety of flavors.</p>
</div>
</div>
</div>
<!-- Menu Item 2 -->
<div class="col-md-4">
<div class="card mb-4">
<img src="https://i.ibb.co/pKRYf7g/salmon.jpg" class="card-img-top" alt="salmon">
<div class="card-body">
<h5 class="card-title">Salmon Salad</h5>
<p class="card-text">Our salmon salad is made with fresh greens, grilled salmon, cherry tomatoes, cucumber, and a lemon vinaigrette dressing.</p>
</div>
</div>
</div>
<!-- Menu Item 3 -->
<div class="col-md-4">
<div class="card mb-4">
<img src="https://i.ibb.co/k1KpC0z/cake.jpg" class="card-img-top" alt="cake">
<div class="card-body">
<h5 class="card-title">Chocolate Cake</h5>
<p class="card-text">Our chocolate cake is made with premium dark chocolate and is the perfect sweet treat to end your meal.</p>
</div>
</div>
</div>
</div>
<!-- Instagram Feed -->
<div class="row">
<div class="col-md-12">
<h2 class="text-center mb-5">Follow Us on Instagram</h2>
<div class="instagram-feed">
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-6517f331-39a6-4b02-bb3c-bef346f3ec12"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>