├── images ├── Arrow.png ├── Dish.png ├── logo.png ├── PepperSoup.png ├── Checked-Save.png ├── news-image1.png ├── news-image2.png ├── news-image3.png ├── twitter_icon.png ├── youtube-icon.png ├── Unchecked-heart.png ├── facebook_icon_.png ├── instagram-icon.png └── Young-smiling-man.png ├── dietri-quote-of-the-day-page-mobile.png ├── dietri-quote-of-the-day-page-desktop.png ├── README.md ├── JS └── scripts.js ├── index.html └── css └── styles.css /images/Arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/Arrow.png -------------------------------------------------------------------------------- /images/Dish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/Dish.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/PepperSoup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/PepperSoup.png -------------------------------------------------------------------------------- /images/Checked-Save.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/Checked-Save.png -------------------------------------------------------------------------------- /images/news-image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/news-image1.png -------------------------------------------------------------------------------- /images/news-image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/news-image2.png -------------------------------------------------------------------------------- /images/news-image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/news-image3.png -------------------------------------------------------------------------------- /images/twitter_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/twitter_icon.png -------------------------------------------------------------------------------- /images/youtube-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/youtube-icon.png -------------------------------------------------------------------------------- /images/Unchecked-heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/Unchecked-heart.png -------------------------------------------------------------------------------- /images/facebook_icon_.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/facebook_icon_.png -------------------------------------------------------------------------------- /images/instagram-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/instagram-icon.png -------------------------------------------------------------------------------- /images/Young-smiling-man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/images/Young-smiling-man.png -------------------------------------------------------------------------------- /dietri-quote-of-the-day-page-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/dietri-quote-of-the-day-page-mobile.png -------------------------------------------------------------------------------- /dietri-quote-of-the-day-page-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/preciousvictory/Dietri-quote-of-the-day-page/HEAD/dietri-quote-of-the-day-page-desktop.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dietri-quote-of-the-day-page 2 | 3 | Side hustle bootcamp 4 | 5 | Start-up bootcamp Dietri 6 | 7 | Dietri Dietri-quote-of-the-day-page 8 | 9 | [View live link](https://dietri-quote-of-the-day-page.netlify.app/) 10 | 11 | # This is the desktop view 12 | ![](dietri-quote-of-the-day-page-desktop.png) 13 | 14 | # This is the mobile view 15 | ![](dietri-quote-of-the-day-page-mobile.png) 16 | 17 | ## Author 18 | 19 | - LinkedIn - [Abiodun-Omoniyi Victory](https://www.linkedin.com/in/victory-a-17a11b231/) 20 | - Frontend Mentor - [@preciousvictory](https://www.frontendmentor.io/profile/preciousvictory) 21 | - Twitter - [@preciousvicky_](https://www.twitter.com/preciousvicky_) 22 | -------------------------------------------------------------------------------- /JS/scripts.js: -------------------------------------------------------------------------------- 1 | const hamburger= document.querySelector(".hamburger"); 2 | const navMenu= document.querySelector(".nav-menu"); 3 | 4 | hamburger.addEventListener("click", () => { 5 | hamburger.classList.toggle("active") 6 | navMenu.classList.toggle("active") 7 | }) 8 | 9 | 10 | document.querySelectorAll(".nav-item").forEach(n => n.addEventListener("click", () => { 11 | hamburger.classList.remove("active") 12 | navMenu.classList.remove("active") 13 | })) 14 | 15 | // on click scroll for suggest section 16 | const rightBtn = document.querySelector('#slide'); 17 | const leftBtn = document.querySelector('#slide_'); 18 | 19 | rightBtn.addEventListener("click", function(event) { 20 | const conent = document.querySelector('#container'); 21 | conent.scrollLeft += 300; 22 | event.preventDefault(); 23 | }); 24 | 25 | leftBtn.addEventListener("click", function(event) { 26 | const conent = document.querySelector('#container'); 27 | conent.scrollLeft -= 300; 28 | event.preventDefault(); 29 | }); 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Dietri App | A basic food nutritional value guide app 14 | 15 | 16 |
17 | 18 | 45 |
46 | 47 | 48 | 49 |
50 |
51 | 52 |
53 |

Quote of the day

54 | 55 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 56 | et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 57 | aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 58 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 59 | culpa qui officia deserunt mollit anim id est laborum. 60 | 61 |
62 | 63 |
64 | 75 | 76 | 77 |
78 |
ASSORTED RICE, SALAD AND CHICKEN
79 |
80 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 81 | ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 82 | ullamco laboris nisi ut aliquip ex ea commodo consequat.

83 |
Cost Range N1200 - N2000
84 |
85 |
86 | 87 |
88 | 89 |
90 |
91 | Unchecked-heart 92 | Checked-Save 93 |
94 |
95 | 96 |
97 |

Other Breakfast suggestions for you

98 |
99 |
100 | foodpicture 101 |
102 |
103 |

Pepper Soup

104 |
N1200 - N2000
105 |
106 |

Pepper soup is a spicy dish made from a distinct blend of ground seeds, spices and fresh herbs. 107 | Pepper soup can be made with any type of meat or seafood, and even obscure cuts and scraps can 108 | be elevated by the bold broth 109 |

110 |
111 |
112 |
113 | foodpicture 114 |
115 |
116 |

Pepper Soup

117 |
N1200 - N2000
118 |
119 |

Pepper soup is a spicy dish made from a distinct blend of ground seeds, spices and fresh herbs. 120 | Pepper soup can be made with any type of meat or seafood, and even obscure cuts and scraps can 121 | be elevated by the bold broth 122 |

123 |
124 |
125 |
126 | foodpicture 127 |
128 |
129 |

Pepper Soup

130 |
N1200 - N2000
131 |
132 |

Pepper soup is a spicy dish made from a distinct blend of ground seeds, spices and fresh herbs. 133 | Pepper soup can be made with any type of meat or seafood, and even obscure cuts and scraps can 134 | be elevated by the bold broth 135 |

136 |
137 |
138 |
139 | foodpicture 140 |
141 |
142 |

Pepper Soup

143 |
N1200 - N2000
144 |
145 |

Pepper soup is a spicy dish made from a distinct blend of ground seeds, spices and fresh herbs. 146 | Pepper soup can be made with any type of meat or seafood, and even obscure cuts and scraps can 147 | be elevated by the bold broth 148 |

149 |
150 |
151 |
152 | foodpicture 153 |
154 |
155 |

Pepper Soup

156 |
N1200 - N2000
157 |
158 |

Pepper soup is a spicy dish made from a distinct blend of ground seeds, spices and fresh herbs. 159 | Pepper soup can be made with any type of meat or seafood, and even obscure cuts and scraps can 160 | be elevated by the bold broth 161 |

162 |
163 |
164 |
165 | foodpicture 166 |
167 |
168 |

Pepper Soup

169 |
N1200 - N2000
170 |
171 |

Pepper soup is a spicy dish made from a distinct blend of ground seeds, spices and fresh herbs. 172 | Pepper soup can be made with any type of meat or seafood, and even obscure cuts and scraps can 173 | be elevated by the bold broth 174 |

175 |
176 |
177 |
178 | foodpicture 179 |
180 |
181 |

Pepper Soup

182 |
N1200 - N2000
183 |
184 |

Pepper soup is a spicy dish made from a distinct blend of ground seeds, spices and fresh herbs. 185 | Pepper soup can be made with any type of meat or seafood, and even obscure cuts and scraps can 186 | be elevated by the bold broth 187 |

188 |
189 |
190 |
191 | foodpicture 192 |
193 |
194 |

Pepper Soup

195 |
N1200 - N2000
196 |
197 |

Pepper soup is a spicy dish made from a distinct blend of ground seeds, spices and fresh herbs. 198 | Pepper soup can be made with any type of meat or seafood, and even obscure cuts and scraps can 199 | be elevated by the bold broth 200 |

201 |
202 |
203 |
204 |
205 | Arrow 206 |
207 |
208 | Arrow 209 |
210 |
211 | 212 |
213 |

News

214 |
215 |
216 | 217 |
218 |
These local foods are shown to be effective against cancer - WHO
219 |
220 |
221 |
222 | 223 |
224 |
Reasons why direct heat shouldn't be used on veggies- Health Experts
225 |
226 |
227 |
228 | 229 |
230 |
Food inflation reaches all time high in Nigeria- check out the prices 2014 and current prices
231 |
232 |
233 |
234 |
235 | 236 | 285 | 286 | 287 | 288 | 289 | 290 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | /* Color Palette 2 | #7a121b - wine 3 | #fad427 - yellow*/ 4 | 5 | 6 | /* Global Styles 7 | ---------------------------------- */ 8 | *{ 9 | /* box-sizing: border-box; */ 10 | padding: 0; 11 | margin: 0; 12 | font-family: 'Montserrat', sans-serif; 13 | } 14 | 15 | a{ 16 | text-decoration: none; 17 | color: #ffffff; 18 | font-size: 12px; 19 | } 20 | 21 | ul{ 22 | list-style-type: none; 23 | } 24 | 25 | .quote-of-the-day, .meals, .news, .suggest h2, .options, footer{ 26 | padding: 20px 30px; 27 | } 28 | 29 | /* Header styles 30 | ------------------------------ */ 31 | 32 | header{ 33 | padding: 5px 40px; 34 | height: 75px; 35 | background-color: #7a121b; 36 | color: #ffffff; 37 | display: flex; 38 | flex-direction: row; 39 | } 40 | 41 | .logo{ 42 | flex: 15%; 43 | } 44 | 45 | /* Nav styles 46 | ------------------------------ */ 47 | nav{ 48 | flex: 85%; 49 | } 50 | 51 | nav ul li{ 52 | float: left; 53 | } 54 | 55 | .nav-list, .profile{ 56 | float: right; 57 | margin-top: 15px; 58 | } 59 | 60 | .nav-item{ 61 | padding: 5px 10px; 62 | } 63 | 64 | .nav-item a{ 65 | padding: 3px 0px; 66 | } 67 | 68 | .nav-item a.active{ 69 | border-bottom: 2px solid #fad427; 70 | } 71 | 72 | .nav-item a:hover{ 73 | border-bottom: 2px solid #fad427; 74 | } 75 | 76 | .nav-item.signout{ 77 | border: 1px solid #fad427; 78 | border-radius: 8px; 79 | margin-left: 20px; 80 | transition: 1s ease-out; 81 | } 82 | 83 | .nav-item.signout:hover{ 84 | background-color: #fad427; 85 | } 86 | 87 | .nav-item.signout a:hover{ 88 | border: 0; 89 | } 90 | 91 | .profile{ 92 | display: inline; 93 | margin-left: 30px; 94 | margin-top: 8px; 95 | } 96 | 97 | .profile h6{ 98 | color: #fad427; 99 | font-size: 10px; 100 | margin: auto; 101 | } 102 | 103 | .profile img{ 104 | display: block; 105 | margin: auto; 106 | } 107 | 108 | .profile.nav-item{ 109 | padding: 0; 110 | } 111 | 112 | .hamburger{ 113 | display: none; 114 | margin-top: 10px; 115 | cursor: pointer; 116 | transition: all 0.3s ease-in-out; 117 | float: right; 118 | right: 30px; 119 | top: 30px; 120 | z-index: 1; 121 | } 122 | 123 | .bar{ 124 | display: block; 125 | width: 30px; 126 | height: 4px; 127 | background-color: #fad427; 128 | margin: 8px 0; 129 | } 130 | 131 | 132 | /* quote-of-the-day styles 133 | ------------------------------ */ 134 | .quote-of-the-day h4{ 135 | font-size: 18px; 136 | text-transform: uppercase; 137 | font-weight: bold; 138 | padding-bottom: 7px; 139 | } 140 | 141 | .quote-of-the-day q{ 142 | font-size: 14px; 143 | } 144 | 145 | /* Meals styles 146 | ------------------------------ */ 147 | .meals{ 148 | margin-top: 20px; 149 | } 150 | 151 | .meals .meal-times{ 152 | display: flex; 153 | flex-direction: row; 154 | height: 40px; 155 | margin-bottom: 15px; 156 | } 157 | 158 | .meal-times li{ 159 | width: 33.33%; 160 | display: inline-block; 161 | } 162 | 163 | .meal-times li:nth-child(2){ 164 | text-align: center; 165 | } 166 | 167 | .meal-times li:nth-child(3){ 168 | text-align: right; 169 | } 170 | 171 | .meal-times a{ 172 | color: black; 173 | font-size: 18px; 174 | font-weight: bold; 175 | padding-bottom: 3px; 176 | } 177 | 178 | .meal-times a.active{ 179 | border-bottom: 3px solid #fad427; 180 | } 181 | 182 | .meal-times a:hover{ 183 | border-bottom: 3px solid #fad427; 184 | } 185 | 186 | 187 | .meals .picturegroup{ 188 | display: flex; 189 | flex-direction: column; 190 | justify-content: space-between; 191 | z-index: 1; 192 | background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../images/Dish.png); 193 | background-position: center center; 194 | background-repeat: no-repeat; 195 | background-size: cover; 196 | height: 100vh; 197 | width: auto; 198 | padding: 30px 40px 20px; 199 | color: #ffffff; 200 | } 201 | 202 | .meals .picturegroup p{ 203 | color: #ffffff; 204 | font-size: 12px; 205 | } 206 | 207 | .check{ 208 | margin-top: -10px; 209 | padding-right: 20px; 210 | float: right; 211 | z-index: 2; 212 | } 213 | 214 | .caption>*{ 215 | display: inline-block; 216 | } 217 | 218 | .caption p{ 219 | max-width: 50%; 220 | line-height: 20px; 221 | } 222 | 223 | /* News styles 224 | ------------------------------ */ 225 | .news h2{ 226 | text-align: center; 227 | padding-bottom: 20px; 228 | } 229 | 230 | .news-group{ 231 | display: flex; 232 | flex-wrap: wrap; 233 | gap: 20px; 234 | } 235 | 236 | .news-group figure { 237 | flex: 30%; 238 | } 239 | 240 | .news-group figure img{ 241 | width: 100%; 242 | } 243 | 244 | .news-group figure h6{ 245 | padding: 10px 0; 246 | font-size: 18px; 247 | font-weight: 600; 248 | } 249 | 250 | abbr{ 251 | text-decoration: none; 252 | } 253 | 254 | /* Suggestion styles 255 | ------------------------------ */ 256 | .suggest{ 257 | margin: 40px 0; 258 | } 259 | 260 | .suggest .options{ 261 | overflow-x: scroll; 262 | white-space: nowrap; 263 | background-color: #d9d9d9; 264 | padding-bottom: 80px; 265 | overflow: hidden; 266 | } 267 | 268 | .suggest .options figure{ 269 | display: inline-block; 270 | } 271 | 272 | .suggest h2{ 273 | text-align: center; 274 | padding-bottom: 10px; 275 | } 276 | 277 | .suggestions{ 278 | padding: 40px 10px 0; 279 | width: 175px; 280 | z-index: -1; 281 | } 282 | 283 | .suggestions h3, .suggestions h6{ 284 | display: inline; 285 | } 286 | 287 | .suggestions .food-name{ 288 | padding-top: 8px; 289 | } 290 | 291 | .suggestions h3{ 292 | font-size: 14px; 293 | } 294 | 295 | .suggestions h6{ 296 | font-size: 9px; 297 | } 298 | 299 | .suggestions p{ 300 | width: 175px; 301 | font-size: 11px; 302 | text-align: left; 303 | padding-top: 5px; 304 | font-size: 12px; 305 | white-space:initial; 306 | } 307 | 308 | .suggest .arrow{ 309 | background: #ffffff; 310 | border-radius: 50%; 311 | box-shadow: 0 2px 4px #a7a2a2; 312 | width: 50px; 313 | height: 50px; 314 | float: right; 315 | margin: -70px 40px 0; 316 | cursor: pointer; 317 | } 318 | 319 | .suggest .arrow img{ 320 | width: 15px; 321 | height: 26px; 322 | margin: 12px 20px; 323 | z-index: 1; 324 | } 325 | 326 | .suggest .arrow2{ 327 | background: #ffffff; 328 | border-radius: 50%; 329 | box-shadow: 0 2px 4px #a7a2a2; 330 | width: 50px; 331 | height: 50px; 332 | float: left; 333 | margin: -70px 40px 0; 334 | cursor: pointer; 335 | } 336 | 337 | .suggest .arrow2 img{ 338 | width: 15px; 339 | height: 26px; 340 | margin: 12px 15px; 341 | z-index: 1; 342 | transform: rotate(180deg); 343 | } 344 | 345 | 346 | 347 | /* Footer styles 348 | ------------------------------ */ 349 | footer{ 350 | background-color: #7a121b; 351 | color: #ffffff; 352 | } 353 | 354 | .footer{ 355 | margin: 0 auto; 356 | text-align: center; 357 | } 358 | 359 | footer h6{ 360 | padding: 10px 0; 361 | font-size: 15px; 362 | } 363 | 364 | footer p, footer label{ 365 | font-size: 11px; 366 | line-height: 18px; 367 | margin-bottom: 0px; 368 | } 369 | 370 | footer form{ 371 | padding: 15px 0 40px; 372 | } 373 | 374 | footer #email{ 375 | background: #b07878; 376 | color: #ffffff; 377 | width: 400px; 378 | height: 30px; 379 | border: 1px solid #fad427; 380 | border-radius: 6px; 381 | padding: 2px 10px; 382 | } 383 | 384 | footer form input:focus{ 385 | outline: 1px solid #fad427; 386 | } 387 | 388 | footer label{ 389 | padding-right: 10px; 390 | } 391 | 392 | #email::placeholder{ 393 | color: #ffffff93; 394 | } 395 | 396 | footer form .btn{ 397 | border: 0; 398 | outline: 1px solid #fad427; 399 | background-color: #fad427; 400 | border-radius: 8px; 401 | margin-left: 10px; 402 | transition: 1s ease-out; 403 | width: 120px; 404 | height: 36px; 405 | color: #ffffff; 406 | font-size: 16px; 407 | font-weight: 700; 408 | } 409 | 410 | footer form .btn:hover{ 411 | background-color: #fad327b2; 412 | } 413 | 414 | footer form .btn:active{ 415 | background-color: #fad327b2; 416 | outline: 1px solid #fad327b2; 417 | } 418 | 419 | footer form .btn:focus{ 420 | border: 0; 421 | } 422 | 423 | footer .more_info{ 424 | display: flex; 425 | flex-direction: row; 426 | gap: 50px; 427 | padding: 10px 0 20px; 428 | } 429 | 430 | footer .more_info .col1, footer .more_info .col2 { 431 | flex: 1 1 35%; 432 | } 433 | 434 | footer .footer-logo { 435 | flex: 1 1 30%; 436 | } 437 | 438 | 439 | footer .footer-logo img{ 440 | width: 220px; 441 | height: 130px; 442 | flex: 1 1 30%; 443 | } 444 | 445 | footer .more_info .col1 .col1-row1{ 446 | display: flex; 447 | flex-direction: row; 448 | padding-top: 20px; 449 | } 450 | 451 | footer .col1 .col1-row1>*{ 452 | flex: 1 1 33.33%; 453 | } 454 | 455 | .line{ 456 | flex: 1 1 0.1%; 457 | width: 1px; 458 | height: 100px; 459 | background-color: #ffffff; 460 | margin-top: 15px; 461 | } 462 | 463 | footer .col2 .col2-row1{ 464 | text-align: left; 465 | } 466 | 467 | footer .info{ 468 | max-width: 680px; 469 | margin: 0 auto; 470 | text-align: center; 471 | } 472 | 473 | footer .contact-list{ 474 | padding-left: 40px; 475 | } 476 | 477 | footer .contact-lists{ 478 | display: flex; 479 | flex-direction: row; 480 | padding-top: 10px; 481 | } 482 | 483 | footer .contact-lists>*{ 484 | flex: 1 1 25%; 485 | } 486 | 487 | footer .col1-row1 .more:hover{ 488 | border-bottom: 3px solid #fad427; 489 | } 490 | 491 | footer .mail:hover{ 492 | color: #fad427; 493 | } 494 | 495 | footer .p_no:hover{ 496 | color: #fad427; 497 | } 498 | 499 | 500 | 501 | .col2-row1 li{ 502 | font-size: 12px; 503 | padding-bottom: 10px; 504 | word-spacing: 0.3px; 505 | } 506 | 507 | .col2-row1 li a{ 508 | padding-left: 10px; 509 | } 510 | @media screen and (max-width: 1200px) { 511 | .meals .picturegroup{ 512 | height: 80vh; 513 | width: auto; 514 | padding: 30px 40px 20px; 515 | color: #ffffff; 516 | } 517 | 518 | .caption p{ 519 | max-width: 50%; 520 | line-height: 20px; 521 | } 522 | } 523 | 524 | @media screen and (max-width: 900px) { 525 | .meals .picturegroup{ 526 | height: 70vh; 527 | width: auto; 528 | padding: 30px 40px 20px; 529 | color: #ffffff; 530 | } 531 | 532 | .caption p{ 533 | max-width: 75%; 534 | line-height: 20px; 535 | } 536 | } 537 | 538 | 539 | @media screen and (max-width: 740px) { 540 | /* Nav styles 541 | ------------------------------ */ 542 | nav { 543 | display: none; 544 | } 545 | 546 | .nav-menu.active{ 547 | position: fixed; 548 | background-color: #7a121b; 549 | width: 100%; 550 | height: 70%; 551 | top: 75px; 552 | border: 1px solid #fad427; 553 | padding-top: 0px; 554 | display: flex !important; 555 | flex-direction: column-reverse; 556 | align-items: center; 557 | box-shadow: 2px 2px 2px #535353; 558 | } 559 | 560 | .nav-list, .profile { 561 | float: none; 562 | margin-top: 30px; 563 | } 564 | 565 | .nav-list{ 566 | flex: 1 1 70%; 567 | } 568 | 569 | .profile{ 570 | flex: 1 1 30%; 571 | margin-left: 0; 572 | } 573 | 574 | nav ul li { 575 | float: none; 576 | } 577 | 578 | .nav-item{ 579 | text-align: center; 580 | padding: 15px 0; 581 | } 582 | 583 | .nav-item.signout { 584 | margin-left: 0; 585 | margin-top: 20px; 586 | padding: 10px 20px; 587 | } 588 | 589 | .hamburger{ 590 | display: block; 591 | } 592 | 593 | .bar{ 594 | display: block; 595 | } 596 | 597 | .bar{ 598 | -webkit-transition: all 0.3s ease-in-out; 599 | transition: all 0.3s ease-in-out; 600 | } 601 | 602 | .hamburger.active .bar:nth-child(2){ 603 | opacity: 0; 604 | } 605 | 606 | .hamburger.active .bar:nth-child(1){ 607 | transform: translateY(12px) rotate(45deg); 608 | } 609 | 610 | .hamburger.active .bar:nth-child(3){ 611 | transform: translateY(-12px) rotate(-45deg); 612 | } 613 | 614 | .nav-menu.active{ 615 | left: 0; 616 | display: block; 617 | } 618 | 619 | /* Meals styles 620 | ------------------------------ */ 621 | .meals{ 622 | height: 78vh; 623 | } 624 | .meals .meal-times{ 625 | display: block; 626 | height: 50px; 627 | padding: 0 40px; 628 | overflow-x: scroll; 629 | white-space: nowrap; 630 | } 631 | 632 | .meals .meal-times::-webkit-scrollbar { 633 | height: 10px; 634 | } 635 | 636 | .meals .meal-times::-webkit-scrollbar-track { 637 | background-color: #a7a2a2; 638 | border-radius: 8px; 639 | } 640 | 641 | .meals .meal-times::-webkit-scrollbar-thumb { 642 | background: #fad427; 643 | border-radius: 10px; 644 | } 645 | 646 | .meals .meal-times::-webkit-scrollbar-thumb:hover { 647 | background: #fad327a4; 648 | } 649 | 650 | 651 | .meal-times li{ 652 | display: inline-block; 653 | width: 200px; 654 | } 655 | 656 | .meal-times li:nth-child(2){ 657 | text-align: center; 658 | } 659 | 660 | .meal-times li:nth-child(3){ 661 | text-align: right; 662 | } 663 | 664 | .meal-times a{ 665 | color: black; 666 | font-size: 18px; 667 | font-weight: bold; 668 | padding-bottom: 3px; 669 | } 670 | 671 | 672 | .main-meal img { 673 | width: 100vw; 674 | height: 320px; 675 | } 676 | 677 | .meals .picturegroup{ 678 | background-position: center center; 679 | background-repeat: no-repeat; 680 | background-size: cover; 681 | width: auto; 682 | height: 50vh; 683 | padding: 0; 684 | color: #ffffff; 685 | } 686 | 687 | .meals .picturegroup .name{ 688 | padding: 30px 40px 20px; 689 | } 690 | 691 | .caption{ 692 | margin: 250px 0 0; 693 | background-color: black; 694 | padding: 30px 20px 20px; 695 | z-index: -1; 696 | } 697 | 698 | .caption>* { 699 | display: block; 700 | } 701 | 702 | .caption p { 703 | max-width: 100%; 704 | line-height: 20px; 705 | } 706 | 707 | 708 | /* News styles 709 | ------------------------------ */ 710 | .news-group figure { 711 | align-items: center; 712 | } 713 | 714 | 715 | 716 | 717 | /* Footer styles 718 | ------------------------------ */ 719 | 720 | 721 | footer form label{ 722 | line-height: 40px; 723 | } 724 | 725 | footer #email{ 726 | width: 90%; 727 | } 728 | 729 | footer .btn{ 730 | margin-top: 20px; 731 | } 732 | 733 | footer .more_info{ 734 | gap: 10px; 735 | padding: 10px 0 20px; 736 | flex-wrap: wrap; 737 | } 738 | 739 | .line { 740 | flex: none; 741 | } 742 | 743 | footer .more_info .col1, footer .more_info .col2 { 744 | width: 50%; 745 | flex: 1 1 30%; 746 | } 747 | 748 | footer .footer-logo { 749 | width: 100%; 750 | flex: 1 1 100%; 751 | padding-bottom: 40px; 752 | } 753 | @media screen and (max-width: 520px) { 754 | .meals{ 755 | height: 85vh; 756 | } 757 | } 758 | 759 | @media screen and (max-width: 460px) { 760 | .nav-menu.active{ 761 | position: fixed; 762 | background-color: #7a121b; 763 | width: 150px; 764 | } 765 | 766 | /* suggest styles 767 | ------------------------------ */ 768 | 769 | .suggest h2{ 770 | font-size: 20px; 771 | } 772 | 773 | /* News styles 774 | ------------------------------ */ 775 | .news-group figure { 776 | flex: 1 1 60%; 777 | } 778 | 779 | /* Meals styles 780 | ------------------------------ */ 781 | .meals{ 782 | height: 80vh; 783 | } 784 | 785 | .meals .meal-times{ 786 | padding: 0; 787 | } 788 | 789 | .meals .meal-times li{ 790 | width: 150px; 791 | } 792 | 793 | .meals .picturegroup{ 794 | background-position: center center; 795 | background-repeat: no-repeat; 796 | background-size: cover; 797 | width: auto; 798 | height: 40vh; 799 | padding: 0; 800 | color: #ffffff; 801 | } 802 | 803 | .caption { 804 | margin: 180px 0 0; 805 | background-color: black; 806 | padding: 30px 20px 20px; 807 | z-index: -1; 808 | } 809 | 810 | 811 | /* Footer styles 812 | ------------------------------ */ 813 | footer .more_info{ 814 | gap: 30px; 815 | padding: 10px 0 30px; 816 | } 817 | 818 | .line { 819 | width: 100%; 820 | height: 1px; 821 | } 822 | 823 | footer .footer-logo img { 824 | width: 197px; 825 | height: 109px; 826 | flex: 1 1 30%; 827 | } 828 | 829 | footer .more_info .col1, footer .more_info .col2 { 830 | flex: 1 1 100%; 831 | } 832 | 833 | footer .footer-logo { 834 | flex: 1 1 100%; 835 | padding-bottom: 20px; 836 | } 837 | } 838 | 839 | 840 | @media screen and (max-width: 430px) { 841 | .quote-of-the-day, .meals, .news, .suggest h2, .options, footer{ 842 | padding: 20px 12px; 843 | } 844 | 845 | /* Meals styles 846 | ------------------------------ */ 847 | .meals{ 848 | height: 70vh; 849 | } 850 | 851 | .meals .picturegroup{ 852 | background-position: center center; 853 | background-repeat: no-repeat; 854 | background-size: cover; 855 | width: auto; 856 | height: 30vh; 857 | padding: 0; 858 | color: #ffffff; 859 | } 860 | 861 | .caption { 862 | margin: 110px 0 0; 863 | background-color: black; 864 | padding: 30px 20px 20px; 865 | z-index: -1; 866 | } 867 | 868 | .meals .picturegroup .name { 869 | font-size: 12px; 870 | padding: 30px 15px 20px; 871 | } 872 | } 873 | } 874 | 875 | @media screen and (max-width: 300px) { 876 | /* Meals styles 877 | ------------------------------ */ 878 | .meals{ 879 | height: 85vh; 880 | } 881 | 882 | } 883 | 884 | @media screen and (max-width: 220px) { 885 | /* Meals styles 886 | ------------------------------ */ 887 | .meals{ 888 | height: 95vh; 889 | } 890 | 891 | } 892 | --------------------------------------------------------------------------------