diff --git a/recipe_website/index.html b/recipe_website/index.html index c956371..c6a88d7 100644 --- a/recipe_website/index.html +++ b/recipe_website/index.html @@ -13,7 +13,7 @@
- +
-

Vegetarian

 +

Vegetarian
@@ -60,7 +60,7 @@
-

Breakfast

 +

Brunch
@@ -70,7 +70,7 @@
-

Dinners

 +

Dinners
@@ -80,7 +80,7 @@
-

Desserts

 +

Desserts
@@ -109,13 +109,273 @@ - +
+
+
+

As seen in

+
+ + + + + +
+
+
+
+ +
+
+
+

The big guide for you

+
+
    +
  • +
    +
    + +
    +
    +
    + August 3, 2023 +
    +

    Mint Mojito: A must try in summer

    +

    Love easy summer cocktails? Try this classic mint mojito, it's a refreshing drink for a hot summer night and a great way to use up any mint in your garden.

    + Read more +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    + July 29, 2023 +
    +

    Avocado Ice Cream - Just only 4 Ingredients!

    +

    This healthy avocado ice cream is rich, smooth, and so unbelievably creamy. The sweet and creamy texture of this ice cream is sure to win you over!

    + Read more +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    + July 15, 2023 +
    +

    Why do people tap watermelon before buying?

    +

    There's a definite art to picking the very best watermelons. It involves weighing the watermelon between your hands, turning it over, and giving it a firm thwap! on the underside.

    + Read more +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    + July 1, 2023 +
    +

    Smoky Barbecue Ribs

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    + Read more +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    + June 29, 2023 +
    +

    Healthy Banana Chai Smoothie

    +

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    + Read more +
    +
    +
    • +
  • +
    +
    + +
    +
    +
    + June 15, 2023 +
    +

    Kombucha tea: Does it have health benefits?

    +

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    + Read more +
    +
    +
    • +
+ View more posts +
+
+
+
+ +
+
+
+
+

Margherita Pizza

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. +

+ View recipe +
+
+
+
+ +
+
+ + +
+
+ +
+
+
+ watch videos +
+
+ + + +
+
+
+ +
+
+
+

join our community

+
+
+

come join our amazing group of food recipes!

+ + + + +
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + - - \ No newline at end of file diff --git a/recipe_website/main.js b/recipe_website/main.js index fb0a441..21dcc2a 100644 --- a/recipe_website/main.js +++ b/recipe_website/main.js @@ -2,7 +2,7 @@ const menu = document.querySelector('.menu'); const showMenu = document.querySelector('.site'); menu.addEventListener('click', function(){ showMenu.classList.toggle('showmenu') -}) +}) //recipe const search_btn = document.getElementById('search-btn'); const meal_list = document.getElementById('meal'); @@ -34,7 +34,7 @@ function getMealList(){ meal_list.classList.remove('notFound') } else{ - html = "Sorry! we do not have this meal" + html = "Sorry! we do not have this recipe" meal_list.classList.add('notFound'); } meal_list.innerHTML = html; @@ -65,3 +65,26 @@ function mealRecipeModel(meal){ meal_detail.innerHTML = html; meal_detail.parentElement.classList.add('showRecipe'); } +//loadmore +const loadmore =document.querySelector('.load-more'); +let currentItems = 3; +loadmore.addEventListener('click', (e) => { + const elementList = [...document.querySelectorAll('.post li')]; + e.target.classList.add('show-loader'); + + for (let i = currentItems; i < currentItems +3; i++){ + setTimeout(function(){ + e.target.classList.remove('show-loader'); + if(elementList[i]){ + elementList[i].style.display = 'flex'; + } + }, 3000) + } + currentItems += 3; + + if(currentItems >= elementList.length){ + event.target.classList.add('loaded') + } +}) + + diff --git a/recipe_website/style.css b/recipe_website/style.css index 5a8d0c7..1b03e8c 100644 --- a/recipe_website/style.css +++ b/recipe_website/style.css @@ -10,14 +10,13 @@ a{ color: inherit; -webkit-tap-highlight-color: transparent; } -ul{ +ul, li{ list-style: none; } p{ margin-bottom: 0 0 15px; } .container{ - position: relative; max-width: 60%; padding: 0 20px; margin: 0 auto; @@ -90,17 +89,19 @@ nav li a:hover{ } .showmenu .menu i::before{ content: 'x' -} +} /*---------- home title----------*/ -.homepage-title{ +.homepage-title .container{ display: flex; position: relative; text-align: center; } .home-title{ margin-top: 30px; + margin-left: 30%; + margin-right: 30%; } -.title p{ +.home-title .title p{ font-size: 22px; font-weight: 800; letter-spacing: 1px; @@ -114,12 +115,15 @@ nav li a:hover{ color: #C38154; } /*---------- home content----------*/ +.home-content{ + background-color: #F8F6F4; +} .home-content .container{ max-width: 60%; - display: block;; + display: block; + background-color: #F8F6F4; } .img-content{ - margin-top: 30px; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); @@ -127,9 +131,10 @@ nav li a:hover{ } .img-content .image-item .image{ width: 100%; - height: 350px; + height: 400px; } .img-content .image-item .image img{ + margin-top: 50px; width: 100%; height: 100%; object-fit: cover; @@ -141,6 +146,7 @@ nav li a:hover{ overflow: hidden; } .img-content .image-item:before{ + margin-top: 50px; content: ''; position: absolute; width: 100%; @@ -170,7 +176,9 @@ nav li a:hover{ cursor: pointer; } .img-content .image-item .overlay p{ + margin-top: 60px; font-size: 18px; + font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; @@ -181,13 +189,16 @@ nav li a:hover{ top: 0; } /*---------- meal----------*/ +.meal-recipe{ + background-color: #F8F6F4; +} .meal-recipe .container{ - min-height: 30vh; + min-height: 20vh; } .meal-wrap{ max-width: 100%; margin: 30px auto; - background: white; + background: #F8F6F4; text-align: center; } .meal-search{ @@ -335,12 +346,691 @@ nav li a:hover{ width: 100%; color: red; } -/**/ - - - - +/*---------- partner ----------*/ +.partner{ + max-width: 100%; +} +.partner-image{ + height: 200px; + width: auto; + margin: auto; + overflow: hidden; + position: relative; +} +.partner-image h3{ + margin-top: 50px; + text-align: center; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 1px; + color: #FFC26F; +} +.slide-track{ + display: flex; + gap: 50px; +} +.partner-logo img{ + margin-top: 30px; + width: auto; + height: 80px; +} +/*---------- home blog ----------*/ +.home-blog .container{ + max-width: 60%; +} +.home-blog-title{ + border-top: 1px solid lightgray; + width: 100%; +} +.home-blog-title h2{ + margin-top: 50px; + margin-bottom: 30px; + font-size: 18px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; + color: #5F264A; +} +.blog-post{ + display: flex; + align-items: center; + border-bottom: 1px solid lightgrey; + width: 100%; + margin-top: 20px; +} +.blog-post-img img{ + width: 300px; + height: 200px; + object-fit: cover; + object-position: center; + margin-bottom: 30px; +} +.blog-post-info{ + padding: 20px; +} +.blog-post-date{ + margin-bottom: 20px; + color: gray; +} +.blog-post-title{ + font-size: 24px; + text-transform: capitalize; + margin-bottom: 20px; + color: #5F264A; +} +.blog-post-info p{ + margin-bottom: 20px; + color: #85586F; +} +.blog-post-info a{ + color: #FFC26F; + font-weight: 800; +} +.blog-post-info a:hover{ + color: #C38154; +} +.post li:nth-child(3) ~ li{ + display: none; +} +.load-more{ + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + width: 180px; + height: 40px; + text-transform: uppercase; + background-color: #5F264A; + color: white; + margin: 0 auto; + margin-top: 30px; +} +.loading{ + display: none; + height: 32px; + width: 32px; + margin: 0 auto; +} +.loading.show-loader{ + width: 52px; + background-color: #5F264A; + text-indent: -9999px; +} +.loading.show-loader .loading{ + display: block; +} +.load-more.loaded{ + visibility: hidden; + opacity: 0; + height: 0; + transition: visibility 0.3s 0.3s, opacity 0.3s 0.3s, height 0.3s 0.3s; +} +/*---------- home-content-2 ----------*/ +.home-content-2 .container{ + margin-top: 50px; + margin-bottom: 50px; + max-width: 50%; + height: 50vh; + background: url(images/home-content.jpg) no-repeat center center/cover; +} +.home-frame{ + width: 1000px; + height: 410px; + border: 2px solid white; + background: transparent; + margin: auto; +} +.home-2-title{ + width: 350px; + height: 250px; + background: #eee; + float: right; + margin-top: 140px; + margin-right: 20px; + padding: 25px 10px; + justify-content: center; + align-items: center; + text-align: center; +} +.home-2-title h2{ + font-size: 30px; + margin-bottom: 20px; +} +.home-2-title p{ + font-size: 16px; + color: gray; + margin-bottom: 20px; +} +.home-2-title span{ + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + color: #F99417; +} +.home-2-title span:hover{ + text-decoration: underline; + color: #FFC95F; +} +/*---------- footer ----------*/ +footer{ + width: 100%; + bottom: 0; + background-color: #5F264A; + color: white; + padding: 50px 0 30px; + font-size: 14px; + line-height: 20px; +} +.footer-row{ + width: 70%; + margin: auto; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; +} +.footer-col{ + flex-basis: 25%; + padding: 10px; +} +.footer-col:nth-child(2), .footer-col:nth-child(3){ + flex-basis: 15%; +} +.footer-logo{ + margin-bottom: 20px; +} +.footer-logo a{ + font-size: 30px; +} +.footer-logo span{ + font-family: 'WindSong'; + font-size: 54px; + color: #FFC26F; +} +.footer-col h3{ + width: fit-content; + position: relative; + margin-bottom: 20px; + text-transform: uppercase; + font-size: 14px; +} +form{ + padding-bottom: 15px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #FFC26F; + margin-bottom: 30px; +} +form .bx{ + font-size: 20px; + margin-right: 10px; +} +form input{ + width: 100%; + background: transparent; + color: white; + border: 0; + outline: none; +} +form button{ + background: transparent; + border: 0; + outline: none; + cursor: pointer; +} +form button .bx-right-arrow-alt{ + font-size: 24px; + color: white; +} +.footer-social .bx{ + font-size: 24px; + padding: 0 5px; +} +hr{ + border: 0; + border-bottom: 1px solid #85586F; + margin: 20px auto; +} +.copy-right{ + text-align: center; +} +/*---------- join ----------*/ +.join .container{ + display: block; +} +.hr-lines{ + position: relative; + max-width: 650px; + margin: 50px auto; + text-align: center; +} +.hr-lines:before{ + content:" "; + height: 1px; + width: 150px; + background: #E5B8F4; + display: block; + position: absolute; + top: 50%; + left: 0; +} +.hr-lines:after{ + content:" "; + height: 1px; + width: 150px; + background: #E5B8F4; + display: block; + position: absolute; + top: 50%; + right: 0; +} +.join-title{ + text-transform: uppercase; + color: #5F264A; +} +.join-social{ + text-align: center; + margin-top: -30px; + margin-bottom: 30px; +} +.join-social p{ + font-size: 16px; + text-transform: capitalize; + color: #5F264A; + opacity: 0.5; +} +.join-social i{ + margin-top: 30px; + font-size: 24px; + padding: 0 10px; + color: #85586F; +} +/*---------- join-content ----------*/ +.join-content .container{ + max-width: 40%; + margin: auto; + margin-bottom: 40px; +} +.join-gallery{ + display: flex; + gap: 10px; +} +.join-col{ + display: flex; + flex-direction: column; + gap: 10px; +} +.join-img img{ + width: 100%; + height: 100%; + object-fit: cover; +} +/*------------------------------------------------------- vegetarian page -------------------------------------------------------*/ +.veggie-heading{ + background: #eee; +} +.veggie-heading .container{ + display: flex; + align-self: flex-start; + justify-content: space-between; + background: #eee; +} +.veggie-left{ + margin-top: 50px; + flex-basis: 30%; +} +.veggie-right{ + flex-basis: 90%; +} +.veggie-left img{ + width: 180px; + height: 180px; + border-radius: 50%; +} +.veggie-left h3{ + padding: 10px 10px; + text-transform: uppercase; + font-size: 16px; + color: gray; +} +.veggie-left a p{ + margin-bottom: 50px; + text-transform: uppercase; + font-size: 12px; + font-weight: 700; + color: #5F264A; +} +.veggie-left a p:hover{ + text-decoration: underline; + color: #F99417; +} +.veggie-right h1{ + font-size: 38px; + color: #5F264A; + letter-spacing: 1px; + margin-bottom: 20px; +} +.veggie-right p{ + font-size: 20px; + font-weight: 300; +} +/*---------- veggie-rated/ veggie-dinner / veggie-healthy ----------*/ +.veggie-rating, .veggie-dinner, .veggie-healthy{ + min-height: 60vh; + display: flex; + align-items: center; + justify-content: center; +} +.container{ + max-width: 1120px; + width: 100%; +} +.veggie-title, .veggie-dinner-title, .veggie-healthy-title{ + margin-bottom: 50px; + text-align: center; +} +.veggie-title i{ + color: #F99417; + font-size: 32px; +} +.veggie-title span{ + text-transform: uppercase; + color: #5F264A; + font-size: 24px; + font-weight: bold; +} +.veggie-dinner-title h2, .veggie-healthy-title h2{ + text-transform: uppercase; + color: #5F264A; +} +.veggie-title p, .veggie-dinner-title p, .veggie-healthy-title p{ + margin-top: 10px; + font-size: 18px; + color: gray; +} +.slide-container{ + margin: 0 30px; +} +.card{ + background: white; +} +.card .image-box{ + height: 250px; +} +.card .image-box img{ + width: 100%; + height: 100%; + object-fit: cover; +} +.card .profile-detail{ + display: grid; + align-items: center; + text-align: center; + padding: 15px; +} +.card .profile-detail li i{ + font-size: 18px; + color: #FFC26F; +} +.profile-detail .rating{ + margin-top: 10px; + margin-bottom: 10px; + font-size: 10px; + text-transform: uppercase; + color: gray; +} +.profile-detail .name{ + font-size: 14px; + font-weight: 800; + text-transform: uppercase; +} +.container .swiper-btn{ + display: none; +} +.container .swiper-pagination-bullet{ + background-color: gray; +} +.line{ + margin-left: 20%; + margin-right: 20%; + height: 1px; + background: lightgray; +} +/*---------- subscribe ----------*/ +.subscribe{ + background-color: #5F264A; +} +.subscribe .container{ + max-width: 60%; + height: 20vh; + display: flex; + align-self: flex-start; + justify-content: space-between; + background-color: #5F264A; +} +.subscribe-left{ + flex-basis: 60%; +} +.subscribe-left h3{ + color: white; + text-transform: capitalize; + font-size: 22px; +} +.subscribe-right{ + margin: 20px; + display: flex; + flex-basis: 40%; + align-items: stretch; +} +.subscribe-control{ + padding: 0 20px; + font-size: 16px; + outline: 0; + border: 1px solid #FFC26F; +} +.subscribe-control::placeholder{ + color: gray; + font-size: 12px; + text-transform: uppercase; +} +.subscribe-btn{ + width: 80px; + height: 40px; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + background-color: #FFC26F; + color: white; + border: none; + cursor: pointer; +} +.subscribe-btn:hover{ + background-color: #F9E0BB; + color: black; +} +/*---------- video ----------*/ +.veggie-video{ + background-color: #eee; +} +.veggie-video .container{ + display:block; + justify-content: center; + align-items: center; + text-align: center; + background-color: #eee; +} +.veggie-video-title{ + padding: 50px 50px; +} +.veggie-video-title i{ + color: #F99417; + font-size: 32px; +} +.veggie-video-title span{ + text-transform: uppercase; + color: #5F264A; + font-size: 24px; + font-weight: bold; +} +.veggie-video-content{ + display: flex; + gap: 20px; +} +iframe{ + margin-bottom: 50px; +} +/*---------- veggie-content ----------*/ +.veggie-content-2 .container{ + margin-top: 50px; + margin-bottom: 50px; + max-width: 50%; + height: 50vh; + background: url(images/post-7.jpg) no-repeat center center/cover; +} +.veggie-frame{ + width: 1000px; + height: 410px; + border: 2px solid white; + background: transparent; + margin: auto; +} +.veggie-2-title{ + width: 350px; + height: 250px; + background: #eee; + float: right; + margin-top: 140px; + margin-right: 20px; + padding: 25px 10px; + justify-content: center; + align-items: center; + text-align: center; +} +.veggie-2-title h2{ + font-size: 30px; + margin-bottom: 20px; +} +.veggie-2-title p{ + font-size: 16px; + color: gray; + margin-bottom: 20px; +} +.veggie-2-title span{ + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + color: #F99417; +} +.veggie-2-title span:hover{ + text-decoration: underline; + color: #FFC95F; +} +/*---------- brunch-content ----------*/ +.brunch-content-2 .container{ + margin-top: 50px; + margin-bottom: 50px; + max-width: 50%; + height: 50vh; + background: url(images/brunch.jpg) no-repeat center center/cover; +} +.brunch-frame{ + width: 1000px; + height: 410px; + border: 2px solid white; + background: transparent; + margin: auto; +} +.brunch-2-title{ + width: 350px; + height: 250px; + background: #eee; + float: right; + margin-top: 140px; + margin-right: 20px; + padding: 25px 10px; + justify-content: center; + align-items: center; + text-align: center; +} +.brunch-2-title h2{ + font-size: 30px; + margin-bottom: 20px; +} +.brunch-2-title p{ + font-size: 16px; + color: gray; + margin-bottom: 20px; +} +.brunch-2-title span{ + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + color: #F99417; +} +.brunch-2-title span:hover{ + text-decoration: underline; + color: #FFC95F; +} +/*---------- dinner-content ----------*/ +.dinner-content-2 .container{ + margin-top: 50px; + margin-bottom: 50px; + max-width: 50%; + height: 50vh; + background: url(images/dinner.jpg) no-repeat center center/cover; +} +.dinner-frame{ + width: 1000px; + height: 410px; + border: 2px solid white; + background: transparent; + margin: auto; +} +.dinner-2-title{ + width: 350px; + height: 250px; + background: #eee; + float: right; + margin-top: 140px; + margin-right: 20px; + padding: 25px 10px; + justify-content: center; + align-items: center; + text-align: center; +} +.dinner-2-title h2{ + font-size: 30px; + margin-bottom: 20px; +} +.dinner-2-title p{ + font-size: 16px; + color: gray; + margin-bottom: 20px; +} +.dinner-2-title span{ + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + color: #F99417; +} +.dinner-2-title span:hover{ + text-decoration: underline; + color: #FFC95F; +} +/*------------------------------------------------------- responsive (main page) -------------------------------------------------------*/ +@media screen and (max-width:1200px){ + .home-blog .container{ + max-width: 90%; + } + header{ + max-width: 100%; + } + .brand img{ + width: 150px; + } +} @media screen and (min-width:1200px){ #meal{ display: grid; @@ -381,4 +1071,196 @@ nav li a:hover{ .meal-detail{ width: 700px; } +} +@media screen and (max-width:876px){ + .blog-post-img img{ + height: 280px; + } + .home-content-2 .container{ + max-width: 100%; + height: 50vh; + } + .veggie-content-2 .container{ + max-width: 100%; + height: 50vh; + } + .brunch-content-2 .container{ + max-width: 100%; + height: 50vh; + } + .dinner-content-2 .container{ + max-width: 100%; + height: 50vh; + } + .home-frame{ + display: flex; + } + footer{ + bottom: unset; + } + .footer-col{ + flex-basis: 100%; + } + .footer-col:nth-child(2), .footer-col:nth-child(3){ + flex-basis: 100%; + } +} +@media screen and (max-width:725px){ + .blog-post{ + display: block; + } + .blog-post-img img{ + width: 100%; + height: 300px; + object-fit: cover; + object-position: center; + } + .title p{ + font-size: 20px; + } + .title span{ + font-size: 30px; + } + .home-content .container{ + max-width: 100%; + } + .join-content .container{ + max-width: 60%; + } + .hr-lines{ + max-width: 500px; + } + .hr-lines:before{ + width: 80px; + } + .hr-lines:after{ + width: 80px; + } +} +@media screen and (max-width:525px){ + .brand img{ + width: 100px; + } + .social a p{ + margin: 0 10px; + font-size: 10px; + } + .join-content .container{ + max-width: 80%; + } + .hr-lines:before{ + display: none; + } + .hr-lines:after{ + display: none; + } +} +@media screen and (max-width:400px){ + .home-content-2 .container, .veggie-content-2 .container, .brunch-content-2 .container, + .dinner-content-2 .container { + display: none; + } + .subscribe .container{ + margin-top: 50px; + } + .home-frame{ + display: none; + } + iframe{ + width: 300px; + height: 200px; + } + .join-content .container{ + max-width: 100%; + } +} +/*------------------------------------------------------- responsive (vegetarian page) -------------------------------------------------------*/ +@media screen and (max-width:1500px){ + .veggie-right{ + flex-basis: 70%; + } + .subscribe .container{ + max-width: 80%; + } +} +@media screen and (max-width:1200px){ + .veggie-heading .container{ + max-width: 80%; + } + .subscribe .container{ + max-width: 90%; + } +} +@media screen and (max-width:950px){ + .veggie-heading .container{ + max-width: 100%; + } + .veggie-right{ + padding: 0 10px; + } + .veggie-right h1{ + font-size: 30px; + } + .veggie-right p{ + font-size: 16px; + } + .subscribe .container{ + display: block; + text-align: center; + } + .subscribe-left h3{ + padding-top: 50px; + } + .subscribe-right{ + justify-content: center; + } + .veggie-video-content{ + display: block; + } +} +@media screen and (max-width:750px){ + .veggie-heading .container{ + display: block; + } + .veggie-left{ + margin-top: 0; + margin-left: 35%; + } + .veggie-left img{ + margin-top: 50px; + } + .veggie-right{ + justify-content: center; + align-items: center; + text-align: center; + padding-bottom: 50px; + } +} +@media screen and (max-width:550px){ + .veggie-left{ + margin-left: 30%; + } + .subscribe-left h3{ + font-size: 16px; + } + .subscribe-control{ + padding: 0 10px; + font-size: 10px; + } + .subscribe-control::placeholder{ + font-size: 10px; + } + .subscribe-btn{ + width: 80px; + height: 22px; + font-size: 12px; + } +} +@media screen and (max-width:420px){ + .veggie-left{ + margin-left: 25%; + } + .veggie-right h1{ + font-size: 26px; + } }