Responsive-restaurant-website-mobile-friendly/index.html at main · psergicv/Responsive-restaurant-website-mobile-friendly · GitHub

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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!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="stylesheet" href="static/main.css">
    <title>Responsive Restaurant Website #1</title>
</head>
<body>
    <header>
        <a href="#" class="logo">Restaurant<span>Name</span></a>
        <div class="menuToggle" onclick="toggleMenu();"></div>
        <ul class="navigation">
            <li>
                <a href="#banner" onclick="toggleMenu();">Home</a>
            </li>
            <li>
                <a href="#menu" onclick="toggleMenu();">Menu</a>
            </li>
            <li>
                <a href="#chef" onclick="toggleMenu();">Chef</a>
            </li>
            <li>
                <a href="#testimonials" onclick="toggleMenu();">Testimonial</a>
            </li>
            <li>
                <a href="#about" onclick="toggleMenu();">About Us</a>
            </li>
            <li>
                <a href="#contact" onclick="toggleMenu();">Contact Us</a>
            </li>
        </ul>
    </header>
    <section class="banner" id="banner">
        <div class="content">
            <h2>Choose The Best</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquam eveniet velit,
                accusamus illum dolorum ut est minus expedita hic voluptate ab ratione. A fuga corporis
                sequi ipsa voluptate temporibus?</p>
            <a href="#" class="btn">Menu</a>
        </div>
    </section>

    <section class="about" id="about">
        <div class="row">
            <div class="col50">
                <h2 class="titleText"><span>About</span> Us</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum accusantium alias dolores
                    expedita illo ipsa maiores eligendi fugit repellendus eum, ipsum placeat possimus, odit
                    deleniti recusandae? Accusamus fugiat, fugit at obcaecati eaque cum voluptas ipsa excepturi
                    sunt tempora sint corporis magni repellat error similique eligendi temporibus eos. Facere
                    illum exercitationem omnis. Odit architecto officia labore quasi consequatur sequi,
                    necessitatibus itaque, eaque autem amet velit tempore optio atque quam perferendis voluptatibus
                    accusamus. Iusto optio minima cum eligendi est maxime animi ipsam quis molestiae, nostrum
                    aliquid harum consequatur? Qui, quaerat veritatis vitae minus odio laudantium, at ipsa sint
                    id inventore ut fuga!<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores,
                    ipsum? Illum aliquid, laborum maiores fuga nam eligendi saepe harum veniam iure facilis. Officia
                    tempora ipsum dicta laborum, qui atque quis quasi possimus consectetur earum totam odio ea,
                    quisquam enim. Corrupti!</p>
            </div>
            <div class="col50">
                <div class="imagebox">
                    <img src="assets/img/img1.jpg" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="menu" id="menu">
        <div class="title">
            <h2 class="titleText">Our <span>Menu</span></h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim, ullam.</p>
        </div>
        <div class="content">
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/menu1sml.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Special Dishes</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/menu2sml.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Special Pizza</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/menu3sml.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Special Pasta</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/menu4sml.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Special Steaks</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/menu5sml.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Special Seafood</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/menu6sml.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Special Desserts</h3>
                </div>
            </div>
        </div>
        <div class="title">
            <a href="#" class="btn">View all</a>
        </div>
    </section>

    <section class="chef" id="chef">
        <div class="title">
            <h2 class="titleText">Our <span>Chef's</span></h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim, ullam.</p>
        </div>
        <div class="content">
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/chef1.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Chef #1</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/chef2.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Chef #2</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/chef3.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Chef #3</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/chef4.jpg" alt="">
                </div>
                <div class="text">
                    <h3>Chef #4</h3>
                </div>
            </div>
        </div>
    </section>

    <section class="testimonials" id="testimonials">
        <div class="title testimBlock">
            <h2 class="titleText">Meet our <span>Customers</span></h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet accusamus rem numquam id velit veniam.</p>
        </div>
        <div class="content">
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/people1.jpg" alt="">
                </div>
                <div class="text">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum perspiciatis aliquam corporis
                        repellat ab nulla officiis veniam. Officia dignissimos esse molestias exercitationem expedita?
                        Quas cupiditate cumque, fuga veniam voluptatem inventore quis laborum amet doloremque nam.</p>
                    <h3>John Smith</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/people2.jpg" alt="">
                </div>
                <div class="text">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum perspiciatis aliquam corporis
                        repellat ab nulla officiis veniam. Officia dignissimos esse molestias exercitationem expedita?
                        Quas cupiditate cumque, fuga veniam voluptatem inventore quis laborum amet doloremque nam.</p>
                    <h3>John Smith</h3>
                </div>
            </div>
            <div class="box">
                <div class="imagebox">
                    <img src="/assets/img/people3.jpg" alt="">
                </div>
                <div class="text">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum perspiciatis aliquam corporis
                        repellat ab nulla officiis veniam. Officia dignissimos esse molestias exercitationem expedita?
                        Quas cupiditate cumque, fuga veniam voluptatem inventore quis laborum amet doloremque nam.</p>
                    <h3>Johana Smith</h3>
                </div>
            </div>
        </div>
    </section>

    <section class="contact" id="contact">
        <div class="title">
            <h2 class="titleText"><span>Contact</span> Us</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum eveniet illo iste quod sapiente deleniti.</p>
        </div>
        <div class="messageForm">
            <h3>Contact Us</h3>
            <div class="inputField">
                <input type="text" placeholder="Name">
            </div>
            <div class="inputField">
                <input type="text" placeholder="Email">
            </div>
            <div class="inputField">
                <textarea placeholder="Message"></textarea>
            </div>
            <div class="inputField">
                <input type="submit" value="Send">
            </div>
        </div>
    </section>

    <div class="copyright">
        <p>Copyright 2021. Postoalchi Sergiu. All rights reserved.</p>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>