├── 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 | ![](./readmeImg/banner.png) 2 | 3 | # Shaif's Cuisine 👨‍🍳 4 | 5 | **Live preview: [click me](http://shaif-s-cuisine.netlify.app)** 6 | 7 | **Watch on YouTube: ![YouTube Video Views](https://img.shields.io/youtube/views/4y-_3Ayiauw) [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 | Buy Me A Coffee 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 | 59 | 60 | 61 |
62 |
63 |
64 | 65 |
66 | shaif's cuisine 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 | kitchen img 108 |
109 |
110 | kitchen img 111 |
112 |
113 | kitchen img 114 |
115 |
116 |
117 |
118 | 119 | 120 | 226 | 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 | 58 | 59 | 60 |
61 |
62 |

Book Table

63 |
64 |
65 |
66 | 67 | 68 |
69 |
70 | 71 | 72 |
73 |
74 | 75 | 76 |
77 |
78 | 79 | 85 |
86 |
87 | 88 | 89 |
90 |
91 | 92 | 98 |
99 |
100 | 101 | 102 |
103 |
104 | 105 | 106 |
107 |
108 | 109 | 110 |
111 | 112 |
113 |
114 |
115 |
116 | 117 | 118 | 224 | 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 | 59 | 60 | 61 |
62 |
63 |
64 |
65 |
66 | clock icon 67 |
68 |

69 | 10 AM - 7 PM 70 |

71 |

72 | Opening Hour 73 |

74 |
75 |
76 |
77 | clock icon 78 |
79 |

80 | GEC, Chittagong 81 |

82 |

83 | Address 84 |

85 |
86 |
87 |
88 | clock icon 89 |
90 |

91 | +880123443 92 |

93 |

94 | Call Now 95 |

96 |
97 |
98 |
99 |
100 | 101 | 102 |
103 |
104 |

105 | Contact & Inquiry 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 | 242 | 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 | 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 |
75 | Explore Menu 76 | Book Table 77 |
78 |
79 |
80 |
81 |
82 | 83 |
84 |
85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 |
93 |
94 |
95 | clock icon 96 |
97 |

98 | 10 AM - 7 PM 99 |

100 |

101 | Opening Hour 102 |

103 |
104 |
105 |
106 | clock icon 107 |
108 |

109 | GEC, Chittagong 110 |

111 |

112 | Address 113 |

114 |
115 |
116 |
117 | clock icon 118 |
119 |

120 | +880123443 121 |

122 |

123 | Call Now 124 |

125 |
126 |
127 |
128 |
129 | 130 | 131 |
132 |
133 |
134 |
135 |
136 |
137 | food img 138 |
139 |

140 | Sweet Potato Fries Bowl 141 |

142 |

143 | $18 144 |

145 |
146 | 3 stars 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 | food img 157 |
158 |

159 | Vegan Salad bowl 160 |

161 |

162 | $18 163 |

164 |
165 | 3 stars 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 | food img 198 |
199 |
200 |

201 | Vegan Salad bowl 202 |

203 |

$12

204 |
205 | 3 star 206 |
207 |
208 |
209 |
210 |
211 | food img 212 |
213 |
214 |

215 | Vegan Pesto Zoodles 216 |

217 |

$12

218 |
219 | 3 star 220 |
221 |
222 |
223 |
224 |
225 | food img 226 |
227 |
228 |

229 | Hot Green Bowl 230 |

231 |

$12

232 |
233 | 3 star 234 |
235 |
236 |
237 |
238 |
239 |
240 | 241 | 242 |
243 |
244 |
245 |
246 |
247 | Food img 248 |
249 |
250 | Food img 251 |
252 |
253 | Food img 254 |
255 |
256 |
257 |

20% OFF

258 |

Demo Dish For Discount

259 |

260 | $45 261 | $35 262 |

263 |
264 | 3 stars 265 |
266 | Book Table 267 |
268 |
269 |
270 |
271 | 272 | 273 |
274 |
275 |
276 |
277 | events 278 | 279 | play button 280 | 281 |
282 |
283 | events 284 |
285 |
286 |
287 |
288 | 289 | 290 |
291 |
292 |
293 |
294 |
295 |
296 | corporate events 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 | wedding events 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 | quality Food 347 |
348 |

Quality Food

349 |
350 |
351 |
352 | Classical taste 353 |
354 |

Classical taste

355 |
356 |
357 |
358 | Skilled chef 359 |
360 |

Skilled chef

361 |
362 |
363 |
364 | Best service 365 |
366 |

Best service

367 |
368 |
369 |
370 |
371 |
372 |
373 | 374 | 375 |
376 |
377 |
378 |

What Our Customers Say

379 |
380 |
381 |
382 | Sayed Ahmed 383 |
384 |
385 |

Sayed Ahmed

386 |
387 | 3 star 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 | Sayed Ahmed 398 |
399 |
400 |

Arfan

401 |
402 | 3 star 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 | Sayed Ahmed 413 |
414 |
415 |

Fahim & Nishat

416 |
417 | 3 star 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 | Sayed Ahmed 429 |
430 |
431 |

Hussain

432 |
433 | 3 star 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 | 466 |
467 |
468 | 469 | 470 | 471 | 577 | 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 | 61 | 62 | 63 |
64 |
65 |

66 | Explore Our Menu 67 |

68 |
69 |
70 | 71 |
72 |
73 |

Our Specials

74 |
75 |
76 |
77 | food img 78 |
79 |
80 |

81 | Sweet Potato Fries Bowl 82 |

83 |

$12

84 |
85 | 3 stars 86 |
87 |
88 |
89 |
90 |
91 | food img 92 |
93 |
94 |

95 | Vegan Salad bowl 96 |

97 |

$12

98 |
99 | 3 stars 100 |
101 |
102 |
103 |
104 |
105 |
106 | 107 | 108 |
109 |
110 |

111 | Top Dishes 112 |

113 |
114 |
115 |
116 | food img 117 |
118 |
119 |

120 | Hot Green Bowl 121 |

122 |

$12

123 |
124 | 3 star 125 |
126 |
127 |
128 |
129 |
130 | food img 131 |
132 |
133 |

134 | Hot Green Bowl 135 |

136 |

$12

137 |
138 | 3 star 139 |
140 |
141 |
142 |
143 |
144 | food img 145 |
146 |
147 |

148 | Hot Green Bowl 149 |

150 |

$12

151 |
152 | 3 star 153 |
154 |
155 |
156 |
157 |
158 |
159 | 160 | 161 |
162 |
163 |

164 | Breakfast 165 |

166 |
167 |
168 |
169 | food img 170 |
171 |
172 |

173 | Hot Green Bowl 174 |

175 |

$12

176 |
177 | 3 star 178 |
179 |
180 |
181 |
182 |
183 | food img 184 |
185 |
186 |

187 | Hot Green Bowl 188 |

189 |

$12

190 |
191 | 3 star 192 |
193 |
194 |
195 |
196 |
197 | food img 198 |
199 |
200 |

201 | Hot Green Bowl 202 |

203 |

$12

204 |
205 | 3 star 206 |
207 |
208 |
209 |
210 |
211 | food img 212 |
213 |
214 |

215 | Hot Green Bowl 216 |

217 |

$12

218 |
219 | 3 star 220 |
221 |
222 |
223 |
224 |
225 | food img 226 |
227 |
228 |

229 | Hot Green Bowl 230 |

231 |

$12

232 |
233 | 3 star 234 |
235 |
236 |
237 |
238 |
239 |
240 | 241 | 242 |
243 |
244 |

245 | Lunch 246 |

247 |
248 |
249 |
250 | food img 251 |
252 |
253 |

254 | Hot Green Bowl 255 |

256 |

$12

257 |
258 | 3 star 259 |
260 |
261 |
262 |
263 |
264 | food img 265 |
266 |
267 |

268 | Hot Green Bowl 269 |

270 |

$12

271 |
272 | 3 star 273 |
274 |
275 |
276 |
277 |
278 | food img 279 |
280 |
281 |

282 | Hot Green Bowl 283 |

284 |

$12

285 |
286 | 3 star 287 |
288 |
289 |
290 |
291 |
292 | food img 293 |
294 |
295 |

296 | Hot Green Bowl 297 |

298 |

$12

299 |
300 | 3 star 301 |
302 |
303 |
304 |
305 |
306 | food img 307 |
308 |
309 |

310 | Hot Green Bowl 311 |

312 |

$12

313 |
314 | 3 star 315 |
316 |
317 |
318 |
319 |
320 |
321 | 322 | 323 |
324 |
325 |

326 | Dinner 327 |

328 |
329 |
330 |
331 | food img 332 |
333 |
334 |

335 | Hot Green Bowl 336 |

337 |

$12

338 |
339 | 3 star 340 |
341 |
342 |
343 |
344 |
345 | food img 346 |
347 |
348 |

349 | Hot Green Bowl 350 |

351 |

$12

352 |
353 | 3 star 354 |
355 |
356 |
357 |
358 |
359 | food img 360 |
361 |
362 |

363 | Hot Green Bowl 364 |

365 |

$12

366 |
367 | 3 star 368 |
369 |
370 |
371 |
372 |
373 | food img 374 |
375 |
376 |

377 | Hot Green Bowl 378 |

379 |

$12

380 |
381 | 3 star 382 |
383 |
384 |
385 |
386 |
387 | food img 388 |
389 |
390 |

391 | Hot Green Bowl 392 |

393 |

$12

394 |
395 | 3 star 396 |
397 |
398 |
399 |
400 |
401 |
402 | 403 | 404 | 510 | 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 | --------------------------------------------------------------------------------