-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (162 loc) · 7.83 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
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/favicon-restaurant.png" type="image/x-icon">
<link rel="stylesheet" href="css/index.css">
<title>Restaurant</title>
</head>
<body>
<div class="header">
<nav class="navbar">
<div class="navbar__brand">
<a href="#" class="navbar__text">
<h1 class="navbar__title">
<i class="fa fa-utensils me-3"></i> Restaurant</h1>
</a>
</div>
<button class="navbar__toggler" type="button">
<span class="fa fa-bars"></span>
</button>
<div class="navbar__collapse">
<div class="navbar__nav_collapse">
<a href="#" class="nav__item nav__link collapse active">Home</a>
<a href="#" class="nav__item nav__link collapse">About</a>
<a href="#" class="nav__item nav__link collapse">Service</a>
<a href="#" class="nav__item nav__link collapse">Menu</a>
<div class="nav__item dropdown collapse">
<a href="#" class="nav__link collapse">
Pages<i class="fa-solid fa-angle-down fa-fade link"></i></a>
<ul class="dropdown-menu collapse__menu">
<li><a href="#" class="dropdown__item">Booking</a></li>
<li><a href="#" class="dropdown__item">Our Team</a></li>
<li><a href="#" class="dropdown__item">Testimonials</a></li>
</ul>
</div>
<a href="#" class="nav__item nav__link collapse">Contact</a>
<a href="#" class="nav__item nav__link collapse btn__book btn__collapse">Book a table</a>
</div>
</div>
<div class="navbar__full">
<div class="navbar__nav">
<a href="#" class="nav__item nav__link active">Home</a>
<a href="#" class="nav__item nav__link">About</a>
<a href="#" class="nav__item nav__link">Service</a>
<a href="#" class="nav__item nav__link">Menu</a>
<div class="nav__item dropdown">
<a href="#" class="nav__link">
Pages<i class="fa-solid fa-angle-down fa-fade link"></i></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown__item">Booking</a></li>
<li><a href="#" class="dropdown__item">Our Team</a></li>
<li><a href="#" class="dropdown__item">Testimonials</a></li>
</ul>
</div>
<a href="#" class="nav__item nav__link">Contact</a>
<a href="#" class="nav__item nav__link btn__book">Book a table</a>
</div>
</div>
</nav>
<div class="header__content bg__dark">
<div class="header__content_containers container">
<div class="header__left">
<h2 class="slide__left">Enjoy Our <br> Delicious Meal</h2>
<p class="slide__right">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit.
Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem
sit clita duo justo magna dolore erat amet</p>
<a href="#" class="btn__header">Book a table</a>
</div>
<div class="header__right">
<img src="images/header-img.png" alt="Header Image" class="img__fluid">
</div>
</div>
</div>
</div>
<div class="cards container">
<div class="card__info">
<i class="fa-solid fa-user-tie text__primary"></i>
<h5 class="card__title">Master Chefs</h5>
<p class="card__text">Diam elitr kasd sed at elitr sed ipsum justo dolor sed clita amet diam</p>
</div>
<div class="card__info">
<i class="fa-solid fa-utensils text__primary"></i>
<h5 class="card__title">Quality Food</h5>
<p class="card__text">Diam elitr kasd sed at elitr sed ipsum justo dolor sed clita amet diam</p>
</div>
<div class="card__info">
<i class="fa-solid fa-cart-plus text__primary"></i>
<h5 class="card__title">Online Order</h5>
<p class="card__text">Diam elitr kasd sed at elitr sed ipsum justo dolor sed clita amet diam</p>
</div>
<div class="card__info">
<i class="fa-solid fa-headset text__primary"></i>
<h5 class="card__title">24/7 Service</h5>
<p class="card__text">Diam elitr kasd sed at elitr sed ipsum justo dolor sed clita amet diam</p>
</div>
</div>
<div class="about container">
<div class="about__images g-3">
<div class="top">
<div class="img">
<img class="img__about about_big" src="images/about-1.jpg" alt="about-1">
</div>
<div class="img">
<img class="img__about about_small" src="images/about-2.jpg" alt="about-2">
</div>
</div>
<div class="bottom">
<div class="img">
<img class="img__about about_small" src="images/about-3.jpg" alt="about-3">
</div>
<div class="img">
<img class="img__about about_big" src="images/about-4.jpg" alt="about-4">
</div>
</div>
</div>
<div class="about__content">
<h5 class="about__title">About Us <span class="span__about"></span></h5>
<h1 class="welcome__title">Welcome to
<i class="fa-solid fa-utensils text__primary"></i>
Restoran
</h1>
<p class="about__text">
Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit.
Aliqu diam amet diam et eos erat ipsum et lorem et sit, sed stet lorem sit.
</p>
<p class="about__text">
Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit.
Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit,
sed stet lorem sit clita duo justo magna dolore erat amet
</p>
<div class="about__slots">
<div class="years">
<div class="years__title">
<h2 class="years__number">15</h2>
</div>
<div class="years__content">
<p class="years__text">Years of</p>
<h6 class="years__second_text">experience</h6>
</div>
</div>
<div class="popular">
<div class="popular__title">
<h2 class="popular__number">50</h2>
</div>
<div class="popular__content">
<p class="popular__text">Popular</p>
<h6 class="popular__second-text">Master Chefs</h6>
</div>
</div>
<a href="#" class="more__info">Read more</a>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/db47ece932.js" crossorigin="anonymous"></script>
<script src="js/dropdown-nav.js"></script>
<script src="js/navbar-toggler.js"></script>
<script src="js/navbar-scroll.js"></script>
<script src="js/cards-animation"></script>
</body>
</html>