-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (150 loc) · 7.13 KB
/
index.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caravan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="mobile.css">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="last.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<header class="main-header">
<div class="centre">
<div class="logo">
<img src="Images/pic3.png" alt="">
</div>
<a href="#1" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="mid-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
</ul>
</div>
<div class="right-nav">
<a href="#last"><button>Call US</button></a>
</div>
</div>
</header>
<section class="home" id="home">
<div class="main-logo">
<img src="Images/pic2.png" alt="">
</div>
<div>
<a href="#last"><button class="btn">openings</button></a>
</div>
</section>
</div>
<section class="about" id="about">
<div class="content">
<h2>About Us</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi exercitationem molestias quasi, architecto
optio voluptatibus illum doloremque magnam impedit perferendis possimus voluptas omnis illo ducimus
aperiam? Necessitatibus sequi quos at ullam perferendis ex vitae maxime ducimus voluptatem laborum, iure
doloribus veniam totam itaque similique officia nulla, consequuntur commodi eveniet nobis unde eos,
dolorem voluptatum eligendi? Minima repudiandae totam obcaecati consequatur!
</p>
</div>
</section>
<section class="menu" id="menu">
<div class="content">
<h2>Menu</h2>
<div class="foods">
<article class="time">
<div class="time-title">
<p>Breakfast</p>
<button class="time-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<div class="time-text">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas rerum accusamus nihil aperiam in adipisci doloribus minima excepturi rem quisquam, explicabo iste cum dolorem natus voluptate laboriosam deserunt nobis magni ad aspernatur molestiae sapiente! Atque sequi explicabo aspernatur autem asperiores ipsa sint vitae exercitationem officiis placeat temporibus ad, quos eius?
</p>
</div>
</article>
<article class="time">
<div class="time-title">
<p>Lunch</p>
<button class="time-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<div class="time-text">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas rerum accusamus nihil aperiam in adipisci doloribus minima excepturi rem quisquam, explicabo iste cum dolorem natus voluptate laboriosam deserunt nobis magni ad aspernatur molestiae sapiente! Atque sequi explicabo aspernatur autem asperiores ipsa sint vitae exercitationem officiis placeat temporibus ad, quos eius?
</p>
</div>
</article>
<article class="time">
<div class="time-title">
<p>Dinner</p>
<button class="time-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<div class="time-text">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas rerum accusamus nihil aperiam in adipisci doloribus minima excepturi rem quisquam, explicabo iste cum dolorem natus voluptate laboriosam deserunt nobis magni ad aspernatur molestiae sapiente! Atque sequi explicabo aspernatur autem asperiores ipsa sint vitae exercitationem officiis placeat temporibus ad, quos eius?
</p>
</div>
</article>
</div>
</div>
</section>
<section class="last" id="last">
<div class="content">
<div class="col1">
<h3>OPENING TIMES</h3>
<p>Monday-Tuesday: 09.00 — 22.00</p>
<p>Wednesday-Thursday: 09.00 — 23.00</p>
<p>Friday: 9.00 — 00:00</p>
<p>Saturday: 10.00 — 00:00</p>
<p>Sunday: 10.00 — 22.00</p>
<p>Weekend Brunch: 10.00 — 16:00 </p>
</div>
<div class="col2">
<h3>CONTACT</h3>
<p>Email: </p>
<p>Mob.no.: </p>
<p>
<img src="https://www.caravanrestaurants.co.uk/perch/resources/smiconartboard-3-1-w640h480.png" alt="">
<img src="https://www.caravanrestaurants.co.uk/perch/resources/smicon-01-w640h480.png" alt="">
<img src="https://www.caravanrestaurants.co.uk/perch/resources/smicon-02-w640h480.png" alt="">
</p>
</div>
</div>
<footer class="footer">
<p>
Copyright © Caravan Restaurant 2020. All Rights Reserved
</p>
</footer>
</section>
<script src="script.js"></script>
<script src="menu.js"></script>
<script src="toggle-button.js"></script>
</body>
</html>