├── LICENSE
├── README.md
├── about.css
├── about.html
├── booking.html
├── components.css
├── contact.html
├── globalStyles.css
├── home.css
├── images
├── 3star.png
├── address-icon.svg
├── discount-illustration.png
├── event-corporate.png
├── event-weedings.png
├── eventsMedia1.png
├── eventsMedia2.png
├── facebook.svg
├── favicon.ico
├── food-1.png
├── food-2.png
├── food-3.png
├── food-4.png
├── food-5.png
├── food-6.png
├── food-7.png
├── heroImg.png
├── logo.svg
├── ourGoals_img1.png
├── ourGoals_img2.png
├── ourGoals_img3.png
├── ourStoryImg.png
├── phone-icon.svg
├── playIcon.svg
├── testimonial_img1.png
├── wall-clock-icon.svg
├── whyUs-icon1.svg
├── whyUs-icon2.svg
├── whyUs-icon3.svg
└── whyUs-icon4.svg
├── index.html
├── main.js
├── menu.css
├── menu.html
├── readmeImg
└── banner.png
└── reset.css
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Shaif Arfan
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Shaif's Cuisine 👨🍳
4 |
5 | **Live preview: [click me](http://shaif-s-cuisine.netlify.app)**
6 |
7 | **Watch on YouTube:  [https://youtu.be/4y-_3Ayiauw](https://youtu.be/4y-_3Ayiauw)**
8 |
9 | ---
10 |
11 | ### Made with ❤️ by [Shaif Arfan](https://www.instagram.com/shaifarfan08/)
12 |
13 | Like my works and want to support me?
14 |
15 |
16 |
17 | ---
18 |
19 | A `HTML, CSS` Project. Made with ♥ by the `web cifar community`. There will be 5 pages in the website (HomePage, MenuPage, AboutPage, ContactPage, BookingPage). In this project we gonna learn how we can create a website using simple `HTML, CSS`. The main purpose of the project is to get more used to with HTML, CSS. Although we used a few lines of JavaScript in the project for necessary cases. Later on, in this project, we gonna learn how we can deploy this site using `Netlify`. Also, we gonna learn the process from the zero to end and make the website ready for live production.
20 |
21 | ## What we are going to learn
22 |
23 | - HTML, CSS
24 | - CSS Grid
25 | - Scroll Animation
26 | - Netlify Deployment
27 | - Netlify Form functionality
28 | - More . . .
29 |
30 | ## Starter files
31 |
32 | You can find all the starter files in `starter_files` branch. You can to go to the `starter_files` branch and `download zip` the the starter files or You can clone the project and git checkout to `starter_files` branch.
33 |
34 | ## Requirements
35 |
36 | - Basic HTML, CSS
37 |
38 | ## Developer team of Shaif's Cuisine
39 |
40 | - Shaif Arfan
41 | - Anwar saeed
42 | - MD Moniruzzaman Sojol
43 | - Lovekesh Pal
44 | - Houmayan Rashid Chy
45 |
46 | ## Tools Used
47 |
48 | 1. icons - (flat & Feather icons)
49 | 2. illustration - [https://storyset.com/](https://storyset.com/)
50 | 3. UI Design: Figma
51 | 4. Code Editor: VS Code
52 |
53 | ## Other projects
54 |
55 | 📚 [All Web Cifar Project Tutorials](https://github.com/ShaifArfan/wc-project-tutorials)
56 |
57 | ## FAQ
58 |
59 | ### How can i get started?
60 |
61 | You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: [coming soon].
62 |
63 | ### What i need to start the project?
64 |
65 | Just open your favorite code editor and follow along with the [YouTube Tutorial](https://youtu.be/4y-_3Ayiauw).
66 |
67 | ### Who the project is for?
68 |
69 | The project is for the people who wanna get more skilled in HTML & CSS.
70 |
71 | ## Feedback
72 |
73 | If you have any feedback, please reach out to us at [@web_cifar](http://instagram.com/web_cifar)
74 |
75 | ## Support
76 |
77 | For support, join our [Community Group](http://facebook.com/groups/webcifar).
78 |
79 | ## License
80 |
81 | [MIT](https://choosealicense.com/licenses/mit/)
82 |
--------------------------------------------------------------------------------
/about.css:
--------------------------------------------------------------------------------
1 | /* Our Story Styles */
2 | .ourStory__wrapper {
3 | display: flex;
4 | flex-direction: column;
5 | gap: 2rem;
6 | }
7 | .ourStory__title,
8 | .ourGoals__title {
9 | font-size: 1.8rem;
10 | font-weight: 600;
11 | color: var(--black-1);
12 | margin-bottom: 1rem;
13 | }
14 | .ourStory__subtitle {
15 | font-size: 1.4rem;
16 | font-weight: 600;
17 | color: var(--black-1);
18 | margin-bottom: 2rem;
19 | }
20 | .ourStory__text,
21 | .ourGoals__text {
22 | font-size: 1.4rem;
23 | line-height: 1.4em;
24 | color: var(--black-2);
25 | }
26 | @media only screen and (min-width: 768px) {
27 | .ourStory__wrapper {
28 | flex-direction: row;
29 | gap: 3rem;
30 | }
31 | .ourStory__img,
32 | .ourStory__info {
33 | flex: 1;
34 | }
35 | .ourStory__title,
36 | .ourGoals__title {
37 | font-size: 3.6rem;
38 | }
39 | .ourStory__subtitle {
40 | font-size: 1.8rem;
41 | }
42 | .ourStory__text,
43 | .ourGoals__text {
44 | font-size: 1.8rem;
45 | max-width: 800px;
46 | }
47 | }
48 |
49 | /* Our Goals Styles */
50 |
51 | .ourGoals__info {
52 | text-align: left;
53 | margin-bottom: 5rem;
54 | }
55 | .ourGoals__imgs__wrapper img {
56 | object-fit: cover;
57 | }
58 | .ourGoals__imgs__wrapper {
59 | max-width: 800px;
60 | margin: 0 auto;
61 | display: grid;
62 | grid-template-columns: 1fr 1fr;
63 | grid-template-rows: 1fr 1fr;
64 | grid-row: auto;
65 | gap: 1rem;
66 | }
67 | .ourGoals__img1 {
68 | grid-row: 1/3;
69 | }
70 | @media only screen and (min-width: 768px) {
71 | .ourGoals__info {
72 | text-align: center;
73 | }
74 | .ourGoals__imgs__wrapper {
75 | gap: 2rem;
76 | }
77 | .ourGoals__text {
78 | margin: 0 auto;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | About | Shaif's Cuisine
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
35 |
36 |
37 |
38 |
39 |
42 |
43 |
44 |
45 |
46 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | Our Story
71 |
72 |
73 | It's all started since 1998
74 |
75 |
76 | Welcome to Shaif's Cuisine. We take pride in delivering warm, friendly service and creating mouth-watering
77 | culinary delights for all. Using only the freshest locally sourced ingredients, we’ll ensure you have a
78 | dining
79 | experience to remember.
80 |
81 | Since 1998, we are the perfect place for a romantic meal for two, a catch-up with friends, family parties,
82 | business meetings, and bringing loved ones together. With comfortable surroundings, affordable prices, and
83 | seating for up to 65 guests, we can cater for all occasions.
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | Our Goals
96 |
97 |
98 | We shall sell delicious and remarkable food and beverages that meet the highest quality, freshness, and
99 | seasonality criteria while combining modern-creative and classic cooking traditions. By showcasing warmth,
100 | graciousness, efficiency, skill, professionalism, and integrity in our work, we will continually serve our
101 | consumers with exceptional service. To have every customer who comes through our doors leave impressed by
102 | their experience at Shaif's Cuisine and excited to come back again.
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
226 |
227 |
228 |
229 | © copyright 2021 Shaif’s Cuisine | All rights reserved
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
--------------------------------------------------------------------------------
/booking.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Booking | Shaif's Cuisine
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
34 |
35 |
36 |
37 |
38 |
41 |
42 |
43 |
44 |
45 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
116 |
117 |
118 |
224 |
225 |
226 |
227 | © copyright 2021 Shaif’s Cuisine | All rights reserved
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
--------------------------------------------------------------------------------
/components.css:
--------------------------------------------------------------------------------
1 | /* Nav Styles */
2 | .nav {
3 | padding: 2rem 0;
4 | }
5 | .nav__icon,
6 | .nav__close,
7 | .nav__bgOverlay {
8 | display: none;
9 | }
10 | .nav__wrapper {
11 | display: flex;
12 | justify-content: space-between;
13 | }
14 | .nav__list li {
15 | display: inline-block;
16 | margin: 0 1rem;
17 | }
18 | .nav__list .nav__link {
19 | font-size: 1.8rem;
20 | font-family: Poppins;
21 | color: var(--black-2);
22 | padding: 0.5rem;
23 | }
24 | .nav__list li:hover .nav__link {
25 | color: var(--green-1);
26 | }
27 | @media only screen and (max-width: 768px) {
28 | .nav {
29 | position: relative;
30 | /* overflow-x: scroll; */
31 | }
32 | .nav__icon {
33 | display: block;
34 | }
35 | .nav__icon svg,
36 | .nav__close svg {
37 | pointer-events: none;
38 | height: 30px;
39 | width: 30px;
40 | }
41 | .nav__close {
42 | display: block;
43 | position: absolute;
44 | color: var(--black-1);
45 | right: 1rem;
46 | top: 1rem;
47 | cursor: pointer;
48 | }
49 | .nav__list {
50 | z-index: 1000;
51 | position: absolute;
52 | left: 100%;
53 | top: 0;
54 | height: 100vh;
55 | width: 80%;
56 | background: var(--lightGreen-1);
57 | display: flex;
58 | align-items: center;
59 | justify-content: flex-end;
60 | padding-right: 2rem;
61 | transform: translate(0%);
62 | overflow: hidden;
63 | transition: 0.3s ease-in transform;
64 | }
65 | .nav__list.show {
66 | transform: translate(-100%);
67 | }
68 | .nav__list li {
69 | display: block;
70 | text-align: right;
71 | margin-bottom: 2rem;
72 | }
73 | .nav__list a {
74 | font-size: 1.6rem;
75 | }
76 | .nav__bgOverlay {
77 | position: absolute;
78 | left: 0;
79 | top: 0;
80 | z-index: 1000;
81 | height: 100vh;
82 | width: 100%;
83 | background: rgba(18, 24, 14, 0.808);
84 | display: none;
85 | }
86 | .nav__bgOverlay.active {
87 | display: block;
88 | }
89 | }
90 | /* End Nav Styles */
91 | /* Global Button Styles */
92 | .btn {
93 | color: var(--green-1);
94 | font-family: Poppins;
95 | font-weight: 500;
96 | border-radius: 8px;
97 | font-size: 1.4rem;
98 | padding: 1.2rem 2rem;
99 | }
100 | .primary-btn {
101 | color: var(--white-1);
102 | background: var(--green-1);
103 | }
104 | @media only screen and (min-width: 700px) {
105 | .btn {
106 | padding: 1.3rem 2rem;
107 | font-size: 2rem;
108 | }
109 | }
110 | /* End Global Button Styles */
111 |
112 | /* Store info section styles*/
113 | .storeInfo__wrapper {
114 | display: flex;
115 | justify-content: center;
116 | flex-wrap: wrap;
117 | gap: 1rem;
118 | }
119 | .storeInfo__item {
120 | background-color: var(--lightGreen-1);
121 | padding: 20px 30px;
122 | text-align: center;
123 | text-align: center;
124 | border-radius: 12px;
125 | width: 150px;
126 | }
127 | .storeInfo__icon {
128 | width: 30px;
129 | margin: 0 auto;
130 | margin-bottom: 1.5rem;
131 | }
132 | .storeInfo__title {
133 | font-size: 1.4rem;
134 | font-family: Poppins;
135 | font-weight: 500;
136 | margin-bottom: 0.5rem;
137 | color: var(--black-1);
138 | }
139 | .storeInfo__text {
140 | font-size: 1.4rem;
141 | font-family: Raleway;
142 | color: var(--black-2);
143 | }
144 | @media only screen and (min-width: 768px) {
145 | .storeInfo__wrapper {
146 | gap: 2rem;
147 | }
148 | .storeInfo__item {
149 | min-width: 200px;
150 | padding: 40px 0;
151 | }
152 | .storeInfo__icon {
153 | width: 47px;
154 | margin-bottom: 2.5rem;
155 | }
156 | .storeInfo__title {
157 | font-size: 1.8rem;
158 | margin-bottom: 1rem;
159 | }
160 | .storeInfo__text {
161 | font-size: 1.6rem;
162 | }
163 | }
164 |
165 | /* Dishes Grid */
166 | .dishGrid__title {
167 | font-size: 1.8rem;
168 | margin-bottom: 2rem;
169 | font-weight: 600;
170 | color: var(--black-1);
171 | }
172 | .dishGrid__wrapper {
173 | display: grid;
174 | /* grid-template-columns: repeat(autofit, minmax(140px, 1fr)); */
175 | grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
176 | gap: 1rem;
177 | }
178 | .dishGrid__item {
179 | display: flex;
180 | flex-direction: column;
181 | background-color: var(--lightGreen-1);
182 | padding: 0.5rem;
183 | border-radius: 8px;
184 | gap: 0.5rem;
185 | }
186 | .dishGrid__item__img {
187 | flex: 4;
188 | }
189 | .dishGrid__item__info {
190 | flex: 5;
191 | }
192 | .dishGrid__item__img img {
193 | object-fit: cover;
194 | border-radius: 12px;
195 | }
196 | .dishGrid__item__title {
197 | font-size: 1.4rem;
198 | line-height: 1.3em;
199 | font-weight: 500;
200 | color: var(--black-1);
201 | margin-bottom: 0.5rem;
202 | }
203 | .dishGrid__item__price {
204 | font-size: 1.4rem;
205 | color: var(--green-1);
206 | font-weight: 600;
207 | margin-bottom: 0.5rem;
208 | }
209 | .dishGrid__item__stars {
210 | max-height: 15px;
211 | width: max-content;
212 | }
213 | @media only screen and (min-width: 768px) {
214 | .dishGrid__title {
215 | font-size: 2.4rem;
216 | }
217 | .dishGrid__wrapper {
218 | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
219 | gap: 3rem;
220 | }
221 | .dishGrid__item {
222 | flex-direction: row;
223 | padding: 1.5rem;
224 | border-radius: 12px;
225 | gap: 1rem;
226 | }
227 | .dishGrid__item__title {
228 | font-size: 2.4rem;
229 | margin-bottom: 1rem;
230 | }
231 | .dishGrid__item__price {
232 | font-size: 2rem;
233 | margin-bottom: 1rem;
234 | }
235 | }
236 | /* Dishes Grid */
237 |
238 | /* Footer Styles */
239 | footer {
240 | background: var(--lightGreen-1);
241 | padding-top: 5rem;
242 | padding-bottom: 2rem;
243 | }
244 | .footer__wrapper {
245 | display: flex;
246 | flex-direction: column;
247 | gap: 3rem;
248 | }
249 | .footer__logo {
250 | width: 150px;
251 | margin-bottom: 2rem;
252 | }
253 | .footer__desc {
254 | font-size: 1.4rem;
255 | color: var(--black-2);
256 | margin-bottom: 2rem;
257 | }
258 | .footer__socials__title {
259 | font-size: 1.8rem;
260 | color: var(--black-1);
261 | margin-bottom: 1rem;
262 | }
263 | .footer__socials li {
264 | display: inline-block;
265 | margin-right: 0.5rem;
266 | }
267 | .footer__socials a {
268 | padding: 0.5rem 0.8rem;
269 | background-color: var(--white-1);
270 | border: 1px solid var(--green-2);
271 | border-radius: 8px;
272 | }
273 | .footer__socials svg {
274 | width: 20px;
275 | color: var(--black-2);
276 | }
277 | .footer__text__title {
278 | font-size: 1.8rem;
279 | margin-bottom: 1rem;
280 | color: var(--black-1);
281 | font-weight: 600;
282 | }
283 | .footer__text a {
284 | font-size: 1.4rem;
285 | margin-bottom: 0.5rem;
286 | color: var(--black-2);
287 | font-family: Raleway;
288 | font-weight: 500;
289 | line-height: 1.4em;
290 | }
291 | @media only screen and (min-width: 768px) {
292 | footer {
293 | padding-top: 8rem;
294 | padding-bottom: 4rem;
295 | }
296 | .footer__wrapper {
297 | flex-direction: row;
298 | }
299 | .footer__col1 {
300 | flex: 4;
301 | }
302 | .footer__col2,
303 | .footer__col3,
304 | .footer__col4 {
305 | flex: 2;
306 | }
307 | .footer__desc {
308 | max-width: 300px;
309 | font-size: 1.8rem;
310 | margin-bottom: 2.5rem;
311 | }
312 | .footer__socials__title {
313 | font-size: 2rem;
314 | margin-bottom: 1.5rem;
315 | }
316 | .footer__text__title {
317 | font-size: 2rem;
318 | margin-bottom: 2rem;
319 | }
320 | .footer__text a {
321 | font-size: 1.8rem;
322 | margin-bottom: 1rem;
323 | }
324 | }
325 | #copyright {
326 | padding: 1rem 0;
327 | }
328 | .copyright__text {
329 | font-size: 1.4rem;
330 | text-align: center;
331 | }
332 | @media only screen and (min-width: 768px) {
333 | .copyright__text {
334 | font-size: 1.6rem;
335 | text-align: left;
336 | }
337 | }
338 | /* End Footer Styles */
339 |
340 | /* Form Styles */
341 | #form {
342 | padding: 5rem 0;
343 | }
344 | .form__title {
345 | font-size: 1.8rem;
346 | color: var(--black-1);
347 | font-weight: 600;
348 | }
349 | .form__wrapper {
350 | padding: 3rem 0;
351 | }
352 | .form__wrapper form {
353 | display: grid;
354 | grid-template-columns: 1fr;
355 | gap: 2rem;
356 | }
357 | .form__group label {
358 | font-size: 1.6rem;
359 | font-family: Poppins;
360 | color: var(--black-2);
361 | font-weight: 500;
362 | }
363 | .form__group input,
364 | .form__group textarea,
365 | .form__group select {
366 | width: 100%;
367 | border: none;
368 | background-color: var(--lightGreen-1);
369 | font-size: 1.4rem;
370 | font-family: Raleway;
371 | font-weight: 600;
372 | padding: 1.5rem;
373 | border-radius: 8px;
374 | margin-top: 0.5rem;
375 | color: var(--black-2);
376 | }
377 | .form__group textarea {
378 | resize: vertical;
379 | }
380 | .form__wrapper button[type='submit'] {
381 | width: max-content;
382 | border: none;
383 | padding: 1rem 4rem;
384 | font-weight: 500;
385 | letter-spacing: 0.1rem;
386 | }
387 | @media only screen and (min-width: 768px) {
388 | .form__title {
389 | font-size: 3.6rem;
390 | }
391 | .form__wrapper {
392 | padding: 5rem 0;
393 | }
394 | .form__wrapper form {
395 | grid-template-columns: 1fr 1fr;
396 | }
397 | .form__group__full {
398 | grid-column: 1/3;
399 | }
400 | .form__group label {
401 | font-size: 1.8rem;
402 | }
403 | .form__group input,
404 | .form__group textarea,
405 | .form__group select {
406 | font-size: 1.8rem;
407 | padding: 2rem;
408 | margin-top: 1.5rem;
409 | }
410 | }
411 |
--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Contact | Shaif's Cuisine
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
35 |
36 |
37 |
38 |
39 |
42 |
43 |
44 |
45 |
46 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | 10 AM - 7 PM
70 |
71 |
72 | Opening Hour
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | GEC, Chittagong
81 |
82 |
83 | Address
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | +880123443
92 |
93 |
94 | Call Now
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
134 |
135 |
136 |
242 |
243 |
244 |
245 | © copyright 2021 Shaif’s Cuisine | All rights reserved
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
--------------------------------------------------------------------------------
/globalStyles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Raleway:wght@400;500;600&display=swap');
2 | html {
3 | font-size: 10px;
4 | overflow-x: hidden;
5 | }
6 | body {
7 | background: var(--lightGreen-2);
8 | overflow-x: hidden;
9 | visibility: hidden;
10 | }
11 | section {
12 | padding: 100px 0;
13 | }
14 | @media only screen and (max-width: 767px) {
15 | section {
16 | padding: 50px 0;
17 | }
18 | }
19 | .container {
20 | max-width: 1200px;
21 | width: 90%;
22 | margin: 0 auto;
23 | }
24 | :root {
25 | --green-1: #26643b;
26 | --green-2: #a2de96;
27 | --lightGreen-1: #d6e5d8;
28 | --lightGreen-2: #f5fcf4;
29 | --black-1: #3b413a;
30 | --black-2: #3f3c3c;
31 | --black-3: #5b6359;
32 | --white-1: #e8e8e8;
33 | }
34 | img {
35 | width: 100%;
36 | height: 100%;
37 | object-fit: contain;
38 | }
39 | h1,
40 | h2,
41 | h3,
42 | h4 {
43 | font-family: Poppins;
44 | }
45 | p {
46 | font-family: Raleway;
47 | font-weight: 400;
48 | line-height: 1.4em;
49 | font-size: 1.8rem;
50 | }
51 | a {
52 | display: inline-block;
53 | text-decoration: none;
54 | }
55 |
--------------------------------------------------------------------------------
/home.css:
--------------------------------------------------------------------------------
1 | /* hero section styles */
2 | .hero__wrapper {
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | flex-direction: column-reverse;
7 | gap: 5rem;
8 | }
9 | .hero__left__wrapper {
10 | max-width: 350px;
11 | }
12 | .hero__imgWrapper {
13 | max-width: 400px;
14 | width: 80%;
15 | margin: 0 auto;
16 | }
17 | .hero__heading {
18 | font-family: Poppins;
19 | font-weight: 600;
20 | line-height: 1.4em;
21 | text-align: center;
22 | font-size: 1.8rem;
23 | margin-bottom: 1.5rem;
24 | color: var(--black-1);
25 | }
26 | .hero__info {
27 | text-align: center;
28 | font-size: 1.4rem;
29 | margin-bottom: 1.5rem;
30 | color: var(--black-2);
31 | }
32 | .button__wrapper {
33 | text-align: center;
34 | }
35 |
36 | @media only screen and (min-width: 768px) {
37 | .hero__wrapper {
38 | flex-direction: row;
39 | gap: 0;
40 | }
41 | .hero__left {
42 | flex: 3;
43 | }
44 | .hero__right {
45 | flex: 4;
46 | }
47 | .hero__heading {
48 | font-size: 3.6rem;
49 | margin-bottom: 2rem;
50 | text-align: left;
51 | }
52 |
53 | .hero__info {
54 | margin-bottom: 2rem;
55 | text-align: left;
56 | font-size: 1.8rem;
57 | }
58 |
59 | .button__wrapper {
60 | text-align: left;
61 | }
62 | .hero__imgWrapper {
63 | max-width: none;
64 | width: 90%;
65 | }
66 | }
67 | @media only screen and (max-width: 900px) {
68 | .hero__left,
69 | .hero__right {
70 | flex: 1;
71 | }
72 | }
73 | /* Our Specials Section Styles */
74 | #ourSpecials {
75 | padding-top: 10rem;
76 | }
77 | .ourSpecials__wrapper {
78 | display: flex;
79 | flex-direction: column;
80 | gap: 3rem;
81 | }
82 | .ourSpecials__left {
83 | display: flex;
84 | gap: 1rem;
85 | }
86 | .ourSpecials__item {
87 | background-color: var(--lightGreen-1);
88 | padding: 1.2rem;
89 | padding-top: 5rem;
90 | border-radius: 12px;
91 | width: 45%;
92 | margin: 0 auto;
93 | }
94 | .ourSpecials__item__img {
95 | margin-top: calc(-50% - 2rem);
96 | margin-bottom: 2rem;
97 | border-radius: 12px;
98 | height: 150px;
99 | overflow: hidden;
100 | }
101 | .ourSpecials__item__img img {
102 | object-fit: cover;
103 | }
104 | .ourSpecials__item__title {
105 | font-size: 1.4rem;
106 | color: var(--black-1);
107 | font-weight: 600;
108 | margin-bottom: 1rem;
109 | }
110 | .ourSpecials__item__price {
111 | color: var(--green-1);
112 | font-size: 1.4rem;
113 | font-weight: 600;
114 | margin-bottom: 1rem;
115 | }
116 | .ourSpecials__item__stars {
117 | height: 1.5rem;
118 | width: max-content;
119 | margin-bottom: 1rem;
120 | }
121 | .ourSpecials__item__text {
122 | font-size: 1.4rem;
123 | color: var(--black-2);
124 | font-weight: 500;
125 | }
126 | .ourSpecials__title {
127 | font-size: 1.8rem;
128 | margin-bottom: 1.5rem;
129 | color: var(--black-1);
130 | }
131 | .ourSpecials__text {
132 | font-size: 1.4rem;
133 | color: var(--black-2);
134 | margin-bottom: 1rem;
135 | }
136 | @media only screen and (min-width: 768px) {
137 | #ourSpecials {
138 | padding-top: 15rem;
139 | }
140 | #ourSpecials .container {
141 | max-width: 900px;
142 | }
143 | .ourSpecials__wrapper {
144 | flex-direction: row;
145 | }
146 | .ourSpecials__right {
147 | flex: 2;
148 | }
149 | .ourSpecials__left {
150 | flex: 4;
151 | gap: 2rem;
152 | }
153 | .ourSpecials__item {
154 | padding: 2rem;
155 | }
156 | .ourSpecials__item__title {
157 | font-size: 2.4rem;
158 | line-height: 1.4em;
159 | margin-bottom: 1.5rem;
160 | }
161 | .ourSpecials__item__price {
162 | font-size: 1.8rem;
163 | margin-bottom: 1rem;
164 | }
165 | .ourSpecials__item__stars {
166 | margin-bottom: 2rem;
167 | }
168 | .ourSpecials__item__text {
169 | font-size: 1.6rem;
170 | }
171 | .ourSpecials__title {
172 | font-size: 3.6rem;
173 | margin-bottom: 1.5rem;
174 | }
175 | .ourSpecials__text {
176 | font-size: 1.8rem;
177 | margin-bottom: 1.5rem;
178 | }
179 | }
180 | @media only screen and (max-width: 300px) {
181 | .ourSpecials__left {
182 | flex-wrap: wrap;
183 | gap: 10rem;
184 | }
185 | .ourSpecials__item {
186 | width: 100%;
187 | }
188 | }
189 | /* Discount Styles */
190 | .discount__wrapper {
191 | display: flex;
192 | flex-direction: column;
193 | padding: 1.5rem;
194 | border-radius: 12px;
195 | background: var(--lightGreen-1) url(./images/discount-illustration.png)
196 | no-repeat bottom right / 100px;
197 | }
198 | .discount__images {
199 | display: flex;
200 | gap: 1rem;
201 | width: 100%;
202 | margin-bottom: 2rem;
203 | }
204 | .discount__img1 {
205 | flex: 2;
206 | }
207 | .discount__img2 {
208 | flex: 3;
209 | }
210 | .discount__images img {
211 | object-fit: cover;
212 | border-radius: 12px;
213 | }
214 | .discount__text {
215 | font-size: 1.4rem;
216 | font-weight: 900;
217 | color: var(--green-1);
218 | margin-bottom: 0.5rem;
219 | }
220 | .discount__title {
221 | font-size: 1.8rem;
222 | color: var(--black-1);
223 | font-weight: 600;
224 | margin-bottom: 1rem;
225 | }
226 | .discount__price {
227 | font-size: 1.4rem;
228 | font-weight: 600;
229 | display: flex;
230 | gap: 1rem;
231 | margin-bottom: 1rem;
232 | }
233 | .discount__oldPrice {
234 | color: var(--black-2);
235 | text-decoration: line-through;
236 | }
237 | .discount__newPrice {
238 | color: var(--green-1);
239 | }
240 | .discount__stars {
241 | width: max-content;
242 | height: 15px;
243 | margin-bottom: 1rem;
244 | }
245 | @media only screen and (min-width: 768px) {
246 | .discount__wrapper {
247 | flex-direction: row;
248 | gap: 4rem;
249 | padding: 2rem;
250 | align-items: center;
251 | background-size: 150px;
252 | margin: 0 auto;
253 | }
254 | .discount__images {
255 | flex: 5;
256 | margin-bottom: 0;
257 | gap: 2rem;
258 | }
259 | .discount__img1,
260 | .discount__img2,
261 | .discount__img3 {
262 | flex: 1;
263 | height: 350px;
264 | }
265 | .discount__info {
266 | flex: 3;
267 | }
268 | .discount__text {
269 | font-size: 2.4rem;
270 | }
271 | .discount__title {
272 | font-size: 3.6rem;
273 | margin-bottom: 1.5rem;
274 | }
275 | .discount__price {
276 | font-size: 2.4rem;
277 | }
278 | .discount__stars {
279 | height: 20px;
280 | margin-bottom: 2rem;
281 | }
282 | }
283 | @media only screen and (max-width: 1000px) {
284 | .discount__wrapper {
285 | gap: 2rem;
286 | }
287 | .discount__img3 {
288 | display: none;
289 | }
290 | }
291 | /* End Discount Styles */
292 | /* EventsMedia Styles */
293 | .eventsMedia__wrapper {
294 | display: flex;
295 | gap: 1rem;
296 | }
297 | .eventsMedia__1 {
298 | position: relative;
299 | }
300 | .eventsMedia__1__playButton {
301 | display: inline-block;
302 | position: absolute;
303 | left: 50%;
304 | top: 50%;
305 | transform: translate(-50%, -50%);
306 | max-width: 50px;
307 | }
308 | @media only screen and (min-width: 768px) {
309 | .eventsMedia__wrapper {
310 | gap: 2rem;
311 | }
312 | .eventsMedia__1__playButton {
313 | max-width: 100px;
314 | }
315 | }
316 | /* End EventsMedia Styles */
317 | /* EventsInfo Styles*/
318 | #eventsInfo {
319 | padding-top: 0;
320 | }
321 | .eventsInfo__wrapper {
322 | display: flex;
323 | flex-direction: column;
324 | }
325 | .eventsInfo__item {
326 | display: flex;
327 | gap: 1rem;
328 | padding: 1rem;
329 | background: var(--lightGreen-1);
330 | margin-bottom: 1.5rem;
331 | border-radius: 12px;
332 | }
333 | .eventsInfo__item__img {
334 | border-radius: 12px;
335 | overflow: hidden;
336 | flex: 3;
337 | }
338 | .eventsInfo__item__info {
339 | flex: 4;
340 | }
341 | .eventsInfo__item__img img {
342 | object-fit: cover;
343 | }
344 | .eventsInfo__item__title {
345 | font-size: 1.4rem;
346 | margin-bottom: 1rem;
347 | color: var(--black-1);
348 | }
349 | .eventsInfo__item__text {
350 | font-size: 1.4rem;
351 | color: var(--black-2);
352 | }
353 | .eventsInfo__right {
354 | margin-top: 2rem;
355 | }
356 | .eventsInfo__title {
357 | font-size: 1.8rem;
358 | color: var(--black-1);
359 | margin-bottom: 1rem;
360 | }
361 | .eventsInfo__text {
362 | color: var(--black-2);
363 | font-size: 1.4rem;
364 | margin-bottom: 1rem;
365 | }
366 | @media only screen and (min-width: 760px) {
367 | .eventsInfo__wrapper {
368 | flex-direction: row;
369 | gap: 2rem;
370 | }
371 | .eventsInfo__left,
372 | .eventsInfo__right {
373 | flex: 1;
374 | }
375 | .eventsInfo__item {
376 | padding: 2rem;
377 | gap: 2rem;
378 | max-width: 500px;
379 | margin-bottom: 2rem;
380 | }
381 | .eventsInfo__item__title {
382 | font-size: 1.8rem;
383 | }
384 | .eventsInfo__item__text {
385 | font-size: 1.6rem;
386 | }
387 | .eventsInfo__title {
388 | font-size: 3.6rem;
389 | }
390 | .eventsInfo__text {
391 | max-width: 500px;
392 | font-size: 1.8rem;
393 | margin-bottom: 2rem;
394 | }
395 | }
396 | /* End EventsInfo Styles*/
397 | /* WhyUs Section */
398 | .whyUs__wrapper {
399 | display: flex;
400 | align-items: center;
401 | justify-content: center;
402 | flex-direction: column;
403 | gap: 4rem;
404 | }
405 | .whyUs__left {
406 | text-align: center;
407 | }
408 | .whyUs__title {
409 | font-family: Poppins;
410 | font-size: 1.8rem;
411 | color: var(--black-1);
412 | font-weight: 500;
413 | margin-bottom: 1rem;
414 | }
415 | .whyUs__text {
416 | font-size: 1.4rem;
417 | }
418 | .whyUs__right {
419 | text-align: center;
420 | }
421 | .whyUs__items__wrapper {
422 | display: grid;
423 | grid-template-columns: 1fr 1fr;
424 | gap: 1rem;
425 | }
426 | .whyUs__item {
427 | background: var(--lightGreen-1);
428 | padding: 2rem;
429 | border-radius: 12px;
430 | }
431 | .whyUs__item__icon {
432 | max-width: 56px;
433 | margin: 0 auto;
434 | margin-bottom: 1rem;
435 | }
436 | .whyUs__item__text {
437 | font-family: Poppins;
438 | font-size: 1.4rem;
439 | font-weight: 500;
440 | color: var(--black-1);
441 | }
442 | @media only screen and (min-width: 768px) {
443 | .whyUs__wrapper {
444 | flex-direction: row;
445 | max-width: 900px;
446 | margin: 0 auto;
447 | }
448 | .whyUs__left {
449 | flex: 4;
450 | text-align: left;
451 | }
452 | .whyUs__right {
453 | flex: 3;
454 | }
455 | .whyUs__title {
456 | font-size: 3.6rem;
457 | margin-bottom: 2rem;
458 | }
459 | .whyUs__text {
460 | font-size: 1.8rem;
461 | line-height: 1.4em;
462 | }
463 | .whyUs__items__wrapper {
464 | gap: 1.5rem;
465 | }
466 | .whyUs__item {
467 | padding: 2rem;
468 | }
469 | .whyUs__item__icon {
470 | max-width: 65px;
471 | margin-bottom: 1.5rem;
472 | }
473 | .whyUs__item__text {
474 | font-size: 1.8rem;
475 | }
476 | }
477 |
478 | /* End WhyUs Section */
479 |
480 | /* Testimonial Section */
481 | .testimonial__wrapper {
482 | max-width: 400px;
483 | margin: 0 auto;
484 | }
485 | .testimonial__title {
486 | font-size: 1.8rem;
487 | margin-bottom: 3rem;
488 | text-align: center;
489 | color: var(--black-1);
490 | }
491 | .testimonial__items__wrapper {
492 | display: grid;
493 | grid-template-columns: 1fr;
494 | gap: 1rem;
495 | }
496 | .testimonial__item {
497 | padding: 1rem;
498 | display: flex;
499 | gap: 1rem;
500 | background-color: var(--lightGreen-1);
501 | border-radius: 12px;
502 | }
503 | .testimonial__item__info {
504 | flex: 4;
505 | }
506 | .testimonial__item__img {
507 | flex: 2;
508 | border-radius: 12px;
509 | overflow: hidden;
510 | width: 100%;
511 | height: 100%;
512 | }
513 | .testimonial__item__img img {
514 | object-fit: cover;
515 | }
516 | .testimonial__item__name {
517 | font-size: 1.4rem;
518 | font-family: poppins;
519 | margin-bottom: 1rem;
520 | }
521 | .testimonial__item__stars {
522 | max-height: 15px;
523 | width: max-content;
524 | margin-bottom: 1.5rem;
525 | }
526 | .testimonial__item__text {
527 | font-size: 1.4rem;
528 | }
529 | @media only screen and (min-width: 768px) {
530 | .testimonial__wrapper {
531 | max-width: 900px;
532 | }
533 | .testimonial__title {
534 | font-size: 3.6rem;
535 | margin-bottom: 5rem;
536 | }
537 | .testimonial__items__wrapper {
538 | grid-template-columns: 1fr 1fr;
539 | gap: 2rem;
540 | }
541 | .testimonial__item {
542 | padding: 2rem;
543 | }
544 | .testimonial__item__name {
545 | font-size: 1.8rem;
546 | margin-bottom: 1.5rem;
547 | }
548 | .testimonial__item__stars {
549 | margin-bottom: 2rem;
550 | }
551 | .testimonial__item__text {
552 | font-size: 1.6rem;
553 | line-height: 1.4em;
554 | }
555 | }
556 | @media only screen and (max-width: 350px) {
557 | .testimonial__item {
558 | flex-direction: column;
559 | }
560 | .testimonial__item__img,
561 | .testimonial__item__info {
562 | flex: auto;
563 | }
564 | }
565 | /* End Testimonial Section */
566 |
567 | /* Newsletter Section */
568 | .newsletter__wrapper {
569 | display: flex;
570 | flex-direction: column;
571 | background-color: var(--green-2);
572 | padding: 1.5rem;
573 | border-radius: 8px;
574 | gap: 2rem;
575 | }
576 | .newsletter__title {
577 | font-size: 1.8rem;
578 | color: var(--black-1);
579 | font-weight: 600;
580 | margin-bottom: 1.3rem;
581 | }
582 | .newsletter__text {
583 | font-size: 1.4rem;
584 | color: var(--black-2);
585 | font-weight: 500;
586 | }
587 | .newsletter__form form {
588 | position: relative;
589 | width: 100%;
590 | border-radius: 8px;
591 | overflow: hidden;
592 | }
593 | .newsletter__form label {
594 | width: 100%;
595 | }
596 | .newsletter__form input {
597 | width: 100%;
598 | font-size: 1.4rem;
599 | padding: 1.5rem 1rem;
600 | border: none;
601 | }
602 | .newsletter__form input::placeholder {
603 | color: rgb(168, 166, 166);
604 | }
605 | .newsletter__form button[type='submit'] {
606 | background-color: var(--green-1);
607 | color: var(--white-1);
608 | border: none;
609 | font-size: 1.4rem;
610 | padding: 0 2rem;
611 | height: 100%;
612 | /* width: 100%; */
613 | position: absolute;
614 | right: 0;
615 | top: 0;
616 | }
617 | @media only screen and (min-width: 768px) {
618 | .newsletter__wrapper {
619 | flex-direction: row;
620 | padding: 5rem;
621 | align-items: center;
622 | }
623 | .newsletter__info,
624 | .newsletter__form {
625 | flex: 1;
626 | }
627 | .newsletter__title {
628 | font-size: 3.6rem;
629 | margin-bottom: 2rem;
630 | }
631 | .newsletter__text {
632 | font-size: 1.8rem;
633 | max-width: 400px;
634 | }
635 | .newsletter__form {
636 | max-width: 450px;
637 | border-radius: 12px;
638 | }
639 | .newsletter__form input {
640 | font-size: 1.8rem;
641 | padding: 2rem;
642 | }
643 | .newsletter__form button[type='submit'] {
644 | font-size: 1.8rem;
645 | padding: 0 3rem;
646 | }
647 | }
648 | /* End Newsletter Section */
649 |
--------------------------------------------------------------------------------
/images/3star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/3star.png
--------------------------------------------------------------------------------
/images/address-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/images/discount-illustration.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/discount-illustration.png
--------------------------------------------------------------------------------
/images/event-corporate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/event-corporate.png
--------------------------------------------------------------------------------
/images/event-weedings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/event-weedings.png
--------------------------------------------------------------------------------
/images/eventsMedia1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/eventsMedia1.png
--------------------------------------------------------------------------------
/images/eventsMedia2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/eventsMedia2.png
--------------------------------------------------------------------------------
/images/facebook.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/favicon.ico
--------------------------------------------------------------------------------
/images/food-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/food-1.png
--------------------------------------------------------------------------------
/images/food-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/food-2.png
--------------------------------------------------------------------------------
/images/food-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/food-3.png
--------------------------------------------------------------------------------
/images/food-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/food-4.png
--------------------------------------------------------------------------------
/images/food-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/food-5.png
--------------------------------------------------------------------------------
/images/food-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/food-6.png
--------------------------------------------------------------------------------
/images/food-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/food-7.png
--------------------------------------------------------------------------------
/images/heroImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/heroImg.png
--------------------------------------------------------------------------------
/images/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/images/ourGoals_img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/ourGoals_img1.png
--------------------------------------------------------------------------------
/images/ourGoals_img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/ourGoals_img2.png
--------------------------------------------------------------------------------
/images/ourGoals_img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/ourGoals_img3.png
--------------------------------------------------------------------------------
/images/ourStoryImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/ourStoryImg.png
--------------------------------------------------------------------------------
/images/phone-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/images/playIcon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/images/testimonial_img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/images/testimonial_img1.png
--------------------------------------------------------------------------------
/images/wall-clock-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/images/whyUs-icon1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/images/whyUs-icon2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/images/whyUs-icon3.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/images/whyUs-icon4.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Shaif's Cuisine
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
36 |
37 |
38 |
39 |
40 |
43 |
44 |
45 |
46 |
47 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
The flavor of tradition
69 |
70 | We are a multi-cuisine restaurant offering a wide variety of food experience in both casual and fine
71 | dining
72 | environment.
73 |
74 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | 10 AM - 7 PM
99 |
100 |
101 | Opening Hour
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 | GEC, Chittagong
110 |
111 |
112 | Address
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 | +880123443
121 |
122 |
123 | Call Now
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | Sweet Potato Fries Bowl
141 |
142 |
143 | $18
144 |
145 |
146 |
147 |
148 |
149 | These Sweet Potato Fries bowl are a glorious, messy plate of goodness. Crispy sweet potato fries loaded
150 | with lots of fresh summer vegetables and a lime ranch. By adding a seasoning blend with chipotle powder,
151 | garlic, and onion, these spicy sweet potato fries are full of flavor.
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 | Vegan Salad bowl
160 |
161 |
162 | $18
163 |
164 |
165 |
166 |
167 |
168 | Vegan salad bowl are immensely satisfying with any combination of whole grains, pulses, noodles, raw or
169 | cooked fruits, and veggies all topped off with a delicious sauce or dressing – each bite is an explosion
170 | of flavors and textures.
171 |
172 |
173 |
174 |
175 |
176 | Our Specials
177 |
178 |
179 | All of our food is prepared daily at our restaurants to ensure the highest quality, freshest meals are
180 | delivered to our customers
181 |
182 |
Book Table
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 | Top Dishes
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 | Vegan Salad bowl
202 |
203 |
$12
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 | Vegan Pesto Zoodles
216 |
217 |
$12
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 | Hot Green Bowl
230 |
231 |
$12
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
20% OFF
258 |
Demo Dish For Discount
259 |
260 | $45
261 | $35
262 |
263 |
264 |
265 |
266 |
Book Table
267 |
268 |
269 |
270 |
271 |
272 |
273 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
Corporate Events
300 |
301 | Shaif's Cuisine is the perfect venue for your corporate events. We specialize in private parties.
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
Weddings
311 |
312 | Shaif's Cuisine offers an intimately unique wedding experience set in a spectacular setting that is
313 | sophisticated and comfortable.
314 |
315 |
316 |
317 |
318 |
319 |
Book For Events
320 |
Book your private event or corporate function at Shaif's cuisine to experience a
321 | truly unique experience.
322 |
Contact Now
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 | Why Choose Our Food
335 |
336 |
337 | Quality of Service, Food, Ambiance, and Value of Money are the primary elements for choosing a restaurant.
338 | Shaif's Cuisine is one of the most exquisite fine-dinning restaurant in Chittagong cities with a captivating
339 | view of GEC Hills, perfect ambiance, and scrumptious food.
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
Quality Food
349 |
350 |
351 |
352 |
353 |
354 |
Classical taste
355 |
356 |
357 |
358 |
359 |
360 |
Skilled chef
361 |
362 |
363 |
364 |
365 |
366 |
Best service
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
What Our Customers Say
379 |
380 |
381 |
382 |
383 |
384 |
385 |
Sayed Ahmed
386 |
387 |
388 |
389 |
390 | “Visited Shaif’s Cuisine with friends last Sunday. Really lovely meal and very warm welcome – we would
391 | recommend this lovely restaurant and will try to go back again”
392 |
393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |
Arfan
401 |
402 |
403 |
404 |
405 | "from start to finish, lovely experience. Hostess very pleasant, wait staff john was wonderful and
406 | attentive, food plentiful and delicious, desserts out of this world"
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
Fahim & Nishat
416 |
417 |
418 |
419 |
420 | “A warm and friendly welcome with fantastic customer service. Always great, tasty food served piping
421 | hot- just the way we love it . Would definitely recommend. We have been repeatedly and it's consistently
422 | exceeded our expectations"
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
Hussain
432 |
433 |
434 |
435 |
436 | “I would just like to say thank you for the excellent service we received in your restaurant last night.
437 | Although the place was very busy we still had an excellent time and really appreciated the live
438 | entertainment too!“
439 |
440 |
441 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 |
450 |
451 |
452 |
Join Newsletter
453 |
454 | Get notified with the latest news and recent offers from the “Shaif’s Cuisine”
455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 | Join
463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
577 |
578 |
579 |
580 | © copyright 2021 Shaif’s Cuisine | All rights reserved
581 |
582 |
583 |
584 |
585 |
586 |
587 |
588 |
589 |
590 |
591 |
592 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const navCloseEl = document.querySelector('.nav__close');
2 | const navList = document.querySelector('.nav__list');
3 | const navIconEl = document.querySelector('.nav__icon');
4 | const navBgOverlayEl = document.querySelector('.nav__bgOverlay');
5 |
6 |
7 | window.addEventListener('DOMContentLoaded', () =>{
8 | document.body.style.visibility = 'visible';
9 | });
10 |
11 | const navOpen = () => {
12 | navList.classList.add('show');
13 | navBgOverlayEl.classList.add('active');
14 | document.body.style= 'visibility: visible; height: 100vh; width:100vw; overflow:hidden;';
15 | }
16 |
17 | const navClose = () => {
18 | navList.classList.remove('show');
19 | navBgOverlayEl.classList.remove('active');
20 | document.body.style= 'visibility: visible; height: initial; width: 100%; overflow-x: hidden;';
21 | }
22 |
23 | navIconEl.addEventListener('click', navOpen);
24 |
25 | navCloseEl.addEventListener('click', navClose);
26 |
27 | navBgOverlayEl.addEventListener('click', navClose)
28 |
29 | // AOS
30 | // AOS.refreshHard();
31 | AOS.init({
32 | offset: 200, // offset (in px) from the original trigger point
33 | delay: 100, // values from 0 to 3000, with step 50ms
34 | duration: 400, // values from 0 to 3000, with step 50ms
35 | easing: 'ease', // default easing for AOS animations
36 | once: false, // whether animation should happen only once - while scrolling down
37 | mirror: false, // whether elements should animate out while scrolling past them
38 | anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
39 | });
40 |
41 | // const dishGridEl = Array.from(document.querySelectorAll('#dishGrid'));
42 | // if (dishGridEl.length > 0){
43 | // // console.log(dishGridEl)
44 | // dishGridEl.forEach(item => {
45 | // item.setAttribute('data-aos', 'fade-up');
46 | // })
47 | // }
--------------------------------------------------------------------------------
/menu.css:
--------------------------------------------------------------------------------
1 | /* page title styles */
2 | #page__title {
3 | padding-top: 3rem;
4 | padding-bottom: 2rem;
5 | }
6 | .page__title__text {
7 | font-size: 2.2rem;
8 | color: var(--black-1);
9 | }
10 | @media only screen and (min-width: 768px) {
11 | #page__title {
12 | padding-top: 5rem;
13 | padding-bottom: 3rem;
14 | }
15 | .page__title__text {
16 | font-size: 3.6rem;
17 | }
18 | }
19 | /* Our Specials Menu Styles */
20 | #ourSpecials {
21 | padding: 0;
22 | }
23 | .ourSpecials__title {
24 | font-size: 1.8rem;
25 | color: var(--black-1);
26 | margin-bottom: 2rem;
27 | }
28 | .ourSpecials__wrapper {
29 | display: flex;
30 | gap: 1.5rem;
31 | flex-direction: column;
32 | max-width: 400px;
33 | }
34 | .ourSpecials__item {
35 | flex: 1;
36 | display: flex;
37 | gap: 2rem;
38 | background-color: var(--lightGreen-1);
39 | padding: 1.5rem;
40 | border-radius: 12px;
41 | }
42 | .ourSpecials__item__img,
43 | .ourSpecials__item__info {
44 | flex: 1;
45 | }
46 | .ourSpecials__item__img {
47 | border-radius: 12px;
48 | overflow: hidden;
49 | }
50 | .ourSpecials__item__img img {
51 | object-fit: cover;
52 | }
53 | .ourSpecials__item__title {
54 | font-size: 2.4rem;
55 | font-weight: 500;
56 | margin-bottom: 1rem;
57 | color: var(--black-1);
58 | line-height: 1.2em;
59 | }
60 | .ourSpecials__item__price {
61 | font-size: 1.8rem;
62 | color: var(--green-1);
63 | font-weight: 600;
64 | margin-bottom: 1rem;
65 | }
66 | .ourSpecials__item__stars {
67 | width: max-content;
68 | }
69 | @media only screen and (min-width: 768px) {
70 | .ourSpecials__title {
71 | font-size: 2.4rem;
72 | }
73 | .ourSpecials__wrapper {
74 | flex-direction: row;
75 | gap: 2rem;
76 | max-width: none;
77 | }
78 | .ourSpecials__item {
79 | padding: 3rem;
80 | gap: 2rem;
81 | }
82 | .ourSpecials__item__title {
83 | font-size: 3rem;
84 | margin-bottom: 1.5rem;
85 | }
86 | .ourSpecials__item__price {
87 | font-size: 2.4rem;
88 | margin-bottom: 1.5rem;
89 | }
90 | }
91 | @media only screen and (min-width: 1100px) {
92 | .ourSpecials__item__img {
93 | flex: 4;
94 | }
95 | .ourSpecials__item__info {
96 | flex: 3;
97 | }
98 | }
99 |
100 | /* Dish Grid Styles */
101 | #dishGrid {
102 | padding-bottom: 0;
103 | }
104 | #dishGrid:last-of-type {
105 | padding-bottom: 10rem;
106 | }
107 |
--------------------------------------------------------------------------------
/menu.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Menu | Shaif's Cuisine
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
37 |
38 |
39 |
40 |
41 |
44 |
45 |
46 |
47 |
48 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | Explore Our Menu
67 |
68 |
69 |
70 |
71 |
72 |
73 |
Our Specials
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | Sweet Potato Fries Bowl
82 |
83 |
$12
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | Vegan Salad bowl
96 |
97 |
$12
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 | Top Dishes
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 | Hot Green Bowl
121 |
122 |
$12
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 | Hot Green Bowl
135 |
136 |
$12
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 | Hot Green Bowl
149 |
150 |
$12
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 | Breakfast
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 | Hot Green Bowl
174 |
175 |
$12
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 | Hot Green Bowl
188 |
189 |
$12
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 | Hot Green Bowl
202 |
203 |
$12
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 | Hot Green Bowl
216 |
217 |
$12
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 | Hot Green Bowl
230 |
231 |
$12
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 | Lunch
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 | Hot Green Bowl
255 |
256 |
$12
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 | Hot Green Bowl
269 |
270 |
$12
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 | Hot Green Bowl
283 |
284 |
$12
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 | Hot Green Bowl
297 |
298 |
$12
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 | Hot Green Bowl
311 |
312 |
$12
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 | Dinner
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 | Hot Green Bowl
336 |
337 |
$12
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 | Hot Green Bowl
350 |
351 |
$12
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |
363 | Hot Green Bowl
364 |
365 |
$12
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 | Hot Green Bowl
378 |
379 |
$12
380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 | Hot Green Bowl
392 |
393 |
$12
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
510 |
511 |
512 |
513 | © copyright 2021 Shaif’s Cuisine | All rights reserved
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
--------------------------------------------------------------------------------
/readmeImg/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/0985e752b8bbd68c4a905fe1b1ba32cc2e73f345/readmeImg/banner.png
--------------------------------------------------------------------------------
/reset.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | padding: 0;
5 | margin: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | html,
10 | body,
11 | div,
12 | span,
13 | applet,
14 | object,
15 | iframe,
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6,
22 | p,
23 | blockquote,
24 | pre,
25 | a,
26 | abbr,
27 | acronym,
28 | address,
29 | big,
30 | cite,
31 | code,
32 | del,
33 | dfn,
34 | em,
35 | img,
36 | ins,
37 | kbd,
38 | q,
39 | s,
40 | samp,
41 | small,
42 | strike,
43 | strong,
44 | sub,
45 | sup,
46 | tt,
47 | var,
48 | b,
49 | u,
50 | i,
51 | center,
52 | dl,
53 | dt,
54 | dd,
55 | ol,
56 | ul,
57 | li,
58 | fieldset,
59 | form,
60 | label,
61 | legend,
62 | table,
63 | caption,
64 | tbody,
65 | tfoot,
66 | thead,
67 | tr,
68 | th,
69 | td,
70 | article,
71 | aside,
72 | canvas,
73 | details,
74 | embed,
75 | figure,
76 | figcaption,
77 | footer,
78 | header,
79 | hgroup,
80 | menu,
81 | nav,
82 | output,
83 | ruby,
84 | section,
85 | summary,
86 | time,
87 | mark,
88 | audio,
89 | video {
90 | margin: 0;
91 | padding: 0;
92 | border: 0;
93 | font-size: 100%;
94 | font: inherit;
95 | vertical-align: baseline;
96 | }
97 |
98 | /* make sure to set some focus styles for accessibility */
99 | :focus {
100 | outline: 0;
101 | }
102 |
103 | /* HTML5 display-role reset for older browsers */
104 | article,
105 | aside,
106 | details,
107 | figcaption,
108 | figure,
109 | footer,
110 | header,
111 | hgroup,
112 | menu,
113 | nav,
114 | section {
115 | display: block;
116 | }
117 |
118 | body {
119 | line-height: 1;
120 | }
121 |
122 | ol,
123 | ul {
124 | list-style: none;
125 | }
126 |
127 | blockquote,
128 | q {
129 | quotes: none;
130 | }
131 |
132 | blockquote:before,
133 | blockquote:after,
134 | q:before,
135 | q:after {
136 | content: '';
137 | content: none;
138 | }
139 |
140 | table {
141 | border-collapse: collapse;
142 | border-spacing: 0;
143 | }
144 |
145 | input[type='search']::-webkit-search-cancel-button,
146 | input[type='search']::-webkit-search-decoration,
147 | input[type='search']::-webkit-search-results-button,
148 | input[type='search']::-webkit-search-results-decoration {
149 | -webkit-appearance: none;
150 | -moz-appearance: none;
151 | }
152 |
153 | input[type='search'] {
154 | -webkit-appearance: none;
155 | -moz-appearance: none;
156 | -webkit-box-sizing: content-box;
157 | -moz-box-sizing: content-box;
158 | box-sizing: content-box;
159 | }
160 |
161 | textarea {
162 | overflow: auto;
163 | vertical-align: top;
164 | resize: vertical;
165 | }
166 |
167 | /**
168 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
169 | */
170 |
171 | audio,
172 | canvas,
173 | video {
174 | display: inline-block;
175 | *display: inline;
176 | *zoom: 1;
177 | max-width: 100%;
178 | }
179 |
180 | /**
181 | * Prevent modern browsers from displaying `audio` without controls.
182 | * Remove excess height in iOS 5 devices.
183 | */
184 |
185 | audio:not([controls]) {
186 | display: none;
187 | height: 0;
188 | }
189 |
190 | /**
191 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
192 | * Known issue: no IE 6 support.
193 | */
194 |
195 | [hidden] {
196 | display: none;
197 | }
198 |
199 | /**
200 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
201 | * `em` units.
202 | * 2. Prevent iOS text size adjust after orientation change, without disabling
203 | * user zoom.
204 | */
205 |
206 | html {
207 | font-size: 100%; /* 1 */
208 | -webkit-text-size-adjust: 100%; /* 2 */
209 | -ms-text-size-adjust: 100%; /* 2 */
210 | }
211 |
212 | /**
213 | * Address `outline` inconsistency between Chrome and other browsers.
214 | */
215 |
216 | a:focus {
217 | outline: thin dotted;
218 | }
219 |
220 | /**
221 | * Improve readability when focused and also mouse hovered in all browsers.
222 | */
223 |
224 | a:active,
225 | a:hover {
226 | outline: 0;
227 | }
228 |
229 | /**
230 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
231 | * 2. Improve image quality when scaled in IE 7.
232 | */
233 |
234 | img {
235 | border: 0; /* 1 */
236 | -ms-interpolation-mode: bicubic; /* 2 */
237 | }
238 |
239 | /**
240 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
241 | */
242 |
243 | figure {
244 | margin: 0;
245 | }
246 |
247 | /**
248 | * Correct margin displayed oddly in IE 6/7.
249 | */
250 |
251 | form {
252 | margin: 0;
253 | }
254 |
255 | /**
256 | * Define consistent border, margin, and padding.
257 | */
258 |
259 | fieldset {
260 | border: 1px solid #c0c0c0;
261 | margin: 0 2px;
262 | padding: 0.35em 0.625em 0.75em;
263 | }
264 |
265 | /**
266 | * 1. Correct color not being inherited in IE 6/7/8/9.
267 | * 2. Correct text not wrapping in Firefox 3.
268 | * 3. Correct alignment displayed oddly in IE 6/7.
269 | */
270 |
271 | legend {
272 | border: 0; /* 1 */
273 | padding: 0;
274 | white-space: normal; /* 2 */
275 | *margin-left: -7px; /* 3 */
276 | }
277 |
278 | /**
279 | * 1. Correct font size not being inherited in all browsers.
280 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
281 | * and Chrome.
282 | * 3. Improve appearance and consistency in all browsers.
283 | */
284 |
285 | button,
286 | input,
287 | select,
288 | textarea {
289 | font-size: 100%; /* 1 */
290 | margin: 0; /* 2 */
291 | vertical-align: baseline; /* 3 */
292 | *vertical-align: middle; /* 3 */
293 | }
294 |
295 | /**
296 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in
297 | * the UA stylesheet.
298 | */
299 |
300 | button,
301 | input {
302 | line-height: normal;
303 | }
304 |
305 | /**
306 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
307 | * All other form control elements do not inherit `text-transform` values.
308 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
309 | * Correct `select` style inheritance in Firefox 4+ and Opera.
310 | */
311 |
312 | button,
313 | select {
314 | text-transform: none;
315 | }
316 |
317 | /**
318 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
319 | * and `video` controls.
320 | * 2. Correct inability to style clickable `input` types in iOS.
321 | * 3. Improve usability and consistency of cursor style between image-type
322 | * `input` and others.
323 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
324 | * Known issue: inner spacing remains in IE 6.
325 | */
326 |
327 | button,
328 | html input[type="button"], /* 1 */
329 | input[type="reset"],
330 | input[type="submit"] {
331 | -webkit-appearance: button; /* 2 */
332 | cursor: pointer; /* 3 */
333 | *overflow: visible; /* 4 */
334 | }
335 |
336 | /**
337 | * Re-set default cursor for disabled elements.
338 | */
339 |
340 | button[disabled],
341 | html input[disabled] {
342 | cursor: default;
343 | }
344 |
345 | /**
346 | * 1. Address box sizing set to content-box in IE 8/9.
347 | * 2. Remove excess padding in IE 8/9.
348 | * 3. Remove excess padding in IE 7.
349 | * Known issue: excess padding remains in IE 6.
350 | */
351 |
352 | input[type='checkbox'],
353 | input[type='radio'] {
354 | box-sizing: border-box; /* 1 */
355 | padding: 0; /* 2 */
356 | *height: 13px; /* 3 */
357 | *width: 13px; /* 3 */
358 | }
359 |
360 | /**
361 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
362 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
363 | * (include `-moz` to future-proof).
364 | */
365 |
366 | input[type='search'] {
367 | -webkit-appearance: textfield; /* 1 */
368 | -moz-box-sizing: content-box;
369 | -webkit-box-sizing: content-box; /* 2 */
370 | box-sizing: content-box;
371 | }
372 |
373 | /**
374 | * Remove inner padding and search cancel button in Safari 5 and Chrome
375 | * on OS X.
376 | */
377 |
378 | input[type='search']::-webkit-search-cancel-button,
379 | input[type='search']::-webkit-search-decoration {
380 | -webkit-appearance: none;
381 | }
382 |
383 | /**
384 | * Remove inner padding and border in Firefox 3+.
385 | */
386 |
387 | button::-moz-focus-inner,
388 | input::-moz-focus-inner {
389 | border: 0;
390 | padding: 0;
391 | }
392 |
393 | /**
394 | * 1. Remove default vertical scrollbar in IE 6/7/8/9.
395 | * 2. Improve readability and alignment in all browsers.
396 | */
397 |
398 | textarea {
399 | overflow: auto; /* 1 */
400 | vertical-align: top; /* 2 */
401 | }
402 |
403 | /**
404 | * Remove most spacing between table cells.
405 | */
406 |
407 | table {
408 | border-collapse: collapse;
409 | border-spacing: 0;
410 | }
411 |
412 | html,
413 | button,
414 | input,
415 | select,
416 | textarea {
417 | color: #222;
418 | }
419 |
420 | ::-moz-selection {
421 | background: #b3d4fc;
422 | text-shadow: none;
423 | }
424 |
425 | ::selection {
426 | background: #b3d4fc;
427 | text-shadow: none;
428 | }
429 |
430 | img {
431 | vertical-align: middle;
432 | }
433 |
434 | fieldset {
435 | border: 0;
436 | margin: 0;
437 | padding: 0;
438 | }
439 |
440 | textarea {
441 | resize: vertical;
442 | }
443 |
444 | .chromeframe {
445 | margin: 0.2em 0;
446 | background: #ccc;
447 | color: #000;
448 | padding: 0.2em 0;
449 | }
450 |
--------------------------------------------------------------------------------