updated code
This commit is contained in:
JSriwongsa
parent
40ee1218bf
commit
2ae67844fd
3 changed files with 1191 additions and 26 deletions
|
|
@ -13,7 +13,7 @@
|
||||||
<header>
|
<header>
|
||||||
<div class="container site">
|
<div class="container site">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<a href=""><img src="images/logo-home.png" alt=""></a>
|
<a href="#"><img src="images/logo-home.png" alt=""></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="navigation">
|
<div class="navigation">
|
||||||
<nav>
|
<nav>
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="home-title">
|
<div class="home-title">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<p>M Recipies made for <span>everyone</span></p>
|
<p>M Recipes made for <span>everyone</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<a href=""><p>Vegetarian</p></a>
|
<a href="vegetarian.html"><p>Vegetarian</p></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<a href=""><p>Breakfast</p></a>
|
<a href="brunch.html"><p>Brunch</p></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -70,7 +70,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<a href=""><p>Dinners</p></a>
|
<a href="dinner.html"><p>Dinners</p></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -80,7 +80,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<a href=""><p>Desserts</p></a>
|
<a href="dessert.html"><p>Desserts</p></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -109,13 +109,273 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="partner">
|
||||||
|
<div class="container">
|
||||||
|
<div class="partner-image">
|
||||||
|
<h3>As seen in</h3>
|
||||||
|
<div class="slide-track">
|
||||||
|
<div class="partner-logo">
|
||||||
|
<img src="images/p-1.png">
|
||||||
|
</div>
|
||||||
|
<div class="partner-logo">
|
||||||
|
<img src="images/p-2.png">
|
||||||
|
</div>
|
||||||
|
<div class="partner-logo">
|
||||||
|
<img src="images/p-3.png">
|
||||||
|
</div>
|
||||||
|
<div class="partner-logo">
|
||||||
|
<img src="images/p-4.png">
|
||||||
|
</div>
|
||||||
|
<div class="partner-logo">
|
||||||
|
<img src="images/p-5.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home-blog">
|
||||||
|
<div class="container">
|
||||||
|
<div class="home-blog-title">
|
||||||
|
<h2>The big guide for you</h2>
|
||||||
|
<div class="post">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="blog-post">
|
||||||
|
<div class="blog-post-img">
|
||||||
|
<img src="images/blog-1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="blog-post-info">
|
||||||
|
<div class="blog-post-date">
|
||||||
|
<span>August 3, 2023</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="blog-post-title">Mint Mojito: A must try in summer</h1>
|
||||||
|
<p>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.</p>
|
||||||
|
<a href="" class="blog-btn">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="blog-post">
|
||||||
|
<div class="blog-post-img">
|
||||||
|
<img src="images/blog-2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="blog-post-info">
|
||||||
|
<div class="blog-post-date">
|
||||||
|
<span>July 29, 2023</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="blog-post-title">Avocado Ice Cream - Just only 4 Ingredients!</h1>
|
||||||
|
<p>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!</p>
|
||||||
|
<a href="" class="blog-btn">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="blog-post">
|
||||||
|
<div class="blog-post-img">
|
||||||
|
<img src="images/blog-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="blog-post-info">
|
||||||
|
<div class="blog-post-date">
|
||||||
|
<span>July 15, 2023</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="blog-post-title">Why do people tap watermelon before buying?</h1>
|
||||||
|
<p>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.</p>
|
||||||
|
<a href="" class="blog-btn">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="blog-post">
|
||||||
|
<div class="blog-post-img">
|
||||||
|
<img src="images/blog-4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="blog-post-info">
|
||||||
|
<div class="blog-post-date">
|
||||||
|
<span>July 1, 2023</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="blog-post-title">Smoky Barbecue Ribs</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
|
||||||
|
<a href="" class="blog-btn">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="blog-post">
|
||||||
|
<div class="blog-post-img">
|
||||||
|
<img src="images/blog-5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="blog-post-info">
|
||||||
|
<div class="blog-post-date">
|
||||||
|
<span>June 29, 2023</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="blog-post-title">Healthy Banana Chai Smoothie</h1>
|
||||||
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||||
|
<a href="" class="blog-btn">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="blog-post">
|
||||||
|
<div class="blog-post-img">
|
||||||
|
<img src="images/blog-6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="blog-post-info">
|
||||||
|
<div class="blog-post-date">
|
||||||
|
<span>June 15, 2023</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="blog-post-title">Kombucha tea: Does it have health benefits?</h1>
|
||||||
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
<a href="" class="blog-btn">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="load-more">View more posts <span class="loading"><span></span></span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home-content-2">
|
||||||
|
<div class="container">
|
||||||
|
<div class="home-frame">
|
||||||
|
<div class="home-2-title">
|
||||||
|
<h2>Margherita Pizza</h2>
|
||||||
|
<p>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.
|
||||||
|
</p>
|
||||||
|
<a href=""><span class="home-btn">View recipe</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="subscribe">
|
||||||
|
<div class="container">
|
||||||
|
<div class="subscribe-left">
|
||||||
|
<h3>Get the latest recipes right in your inbox</h3>
|
||||||
|
</div>
|
||||||
|
<div class="subscribe-right">
|
||||||
|
<input type="text" placeholder="Your email address" class="subscribe-control">
|
||||||
|
<button type="submit" class="subscribe-btn">Sing Up</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="veggie-video">
|
||||||
|
<div class="container">
|
||||||
|
<div class="veggie-video-title">
|
||||||
|
<i class='bx bxs-videos' ></i><span> watch videos</span>
|
||||||
|
</div>
|
||||||
|
<div class="veggie-video-content">
|
||||||
|
<iframe width="340" height="210" src="https://www.youtube.com/embed/Woiiet4vQ58"></iframe>
|
||||||
|
<iframe width="340" height="210" src="https://www.youtube.com/embed/SKAnZgIoqns"></iframe>
|
||||||
|
<iframe width="340" height="210" src="https://www.youtube.com/embed/8dXucFib8eg"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="join">
|
||||||
|
<div class="container">
|
||||||
|
<div class="join-title">
|
||||||
|
<h2 class="hr-lines">join our community</h2>
|
||||||
|
</div>
|
||||||
|
<div class="join-social">
|
||||||
|
<p>come join our amazing group of food recipes!</p>
|
||||||
|
<a href=""><i class='bx bxl-facebook' ></i></a>
|
||||||
|
<a href=""><i class='bx bxl-instagram-alt' ></i></a>
|
||||||
|
<a href=""><i class='bx bxl-twitter' ></i></a>
|
||||||
|
<a href=""><i class='bx bxl-pinterest-alt' ></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="join-content">
|
||||||
|
<div class="container">
|
||||||
|
<div class="join-gallery">
|
||||||
|
<div class="join-col">
|
||||||
|
<div class="join-img">
|
||||||
|
<img src="images/post-1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="join-img">
|
||||||
|
<img src="images/post-2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="join-img">
|
||||||
|
<img src="images/post-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="join-col">
|
||||||
|
<div class="join-img">
|
||||||
|
<img src="images/post-4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="join-img">
|
||||||
|
<img src="images/post-5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="join-col">
|
||||||
|
<div class="join-img">
|
||||||
|
<img src="images/post-7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="join-img">
|
||||||
|
<img src="images/post-8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="join-img">
|
||||||
|
<img src="images/post-9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="footer-row">
|
||||||
|
<div class="footer-col">
|
||||||
|
<div class="footer-logo">
|
||||||
|
<a href=""><span>M</span> Recipes</a>
|
||||||
|
</div>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-col">
|
||||||
|
<h3>helpful links</h3>
|
||||||
|
<li><a href="">Contact</a></li>
|
||||||
|
<li><a href="">FAQ</a></li>
|
||||||
|
<li><a href="">Request a Catalog</a></li>
|
||||||
|
<li><a href="">Gift Cards</a></li>
|
||||||
|
<li><a href="">Advertising Inquiries</a></li>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
<div class="footer-col">
|
||||||
|
<h3>explore</h3>
|
||||||
|
<li><a href="">Blog</a></li>
|
||||||
|
<li><a href="">Recipes</a></li>
|
||||||
|
<li><a href="">Food</a></li>
|
||||||
|
<li><a href="">The Shop</a></li>
|
||||||
|
<li><a href="">Rewards</a></li>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
<div class="footer-col">
|
||||||
|
<h3>Newsletter</h3>
|
||||||
|
<form>
|
||||||
|
<i class='bx bx-envelope'></i>
|
||||||
|
<input type="email" placeholder="Enter your email" required>
|
||||||
|
<button type="submit"><i class='bx bx-right-arrow-alt' ></i></button>
|
||||||
|
</form>
|
||||||
|
<div class="footer-social">
|
||||||
|
<a href=""><i class='bx bxl-facebook' ></i></a>
|
||||||
|
<a href=""><i class='bx bxl-instagram-alt' ></i></a>
|
||||||
|
<a href=""><i class='bx bxl-twitter' ></i></a>
|
||||||
|
<a href=""><i class='bx bxl-pinterest-alt' ></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<p class="copy-right">copyright ©2023 M Recipes</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
|
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -2,7 +2,7 @@ const menu = document.querySelector('.menu');
|
||||||
const showMenu = document.querySelector('.site');
|
const showMenu = document.querySelector('.site');
|
||||||
menu.addEventListener('click', function(){
|
menu.addEventListener('click', function(){
|
||||||
showMenu.classList.toggle('showmenu')
|
showMenu.classList.toggle('showmenu')
|
||||||
})
|
})
|
||||||
//recipe
|
//recipe
|
||||||
const search_btn = document.getElementById('search-btn');
|
const search_btn = document.getElementById('search-btn');
|
||||||
const meal_list = document.getElementById('meal');
|
const meal_list = document.getElementById('meal');
|
||||||
|
|
@ -34,7 +34,7 @@ function getMealList(){
|
||||||
meal_list.classList.remove('notFound')
|
meal_list.classList.remove('notFound')
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
html = "Sorry! we do not have this meal"
|
html = "Sorry! we do not have this recipe"
|
||||||
meal_list.classList.add('notFound');
|
meal_list.classList.add('notFound');
|
||||||
}
|
}
|
||||||
meal_list.innerHTML = html;
|
meal_list.innerHTML = html;
|
||||||
|
|
@ -65,3 +65,26 @@ function mealRecipeModel(meal){
|
||||||
meal_detail.innerHTML = html;
|
meal_detail.innerHTML = html;
|
||||||
meal_detail.parentElement.classList.add('showRecipe');
|
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')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,13 @@ a{
|
||||||
color: inherit;
|
color: inherit;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
ul{
|
ul, li{
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
margin-bottom: 0 0 15px;
|
margin-bottom: 0 0 15px;
|
||||||
}
|
}
|
||||||
.container{
|
.container{
|
||||||
position: relative;
|
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -90,17 +89,19 @@ nav li a:hover{
|
||||||
}
|
}
|
||||||
.showmenu .menu i::before{
|
.showmenu .menu i::before{
|
||||||
content: 'x'
|
content: 'x'
|
||||||
}
|
}
|
||||||
/*---------- home title----------*/
|
/*---------- home title----------*/
|
||||||
.homepage-title{
|
.homepage-title .container{
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.home-title{
|
.home-title{
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
margin-left: 30%;
|
||||||
|
margin-right: 30%;
|
||||||
}
|
}
|
||||||
.title p{
|
.home-title .title p{
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
|
@ -114,12 +115,15 @@ nav li a:hover{
|
||||||
color: #C38154;
|
color: #C38154;
|
||||||
}
|
}
|
||||||
/*---------- home content----------*/
|
/*---------- home content----------*/
|
||||||
|
.home-content{
|
||||||
|
background-color: #F8F6F4;
|
||||||
|
}
|
||||||
.home-content .container{
|
.home-content .container{
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
display: block;;
|
display: block;
|
||||||
|
background-color: #F8F6F4;
|
||||||
}
|
}
|
||||||
.img-content{
|
.img-content{
|
||||||
margin-top: 30px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
|
@ -127,9 +131,10 @@ nav li a:hover{
|
||||||
}
|
}
|
||||||
.img-content .image-item .image{
|
.img-content .image-item .image{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 350px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
.img-content .image-item .image img{
|
.img-content .image-item .image img{
|
||||||
|
margin-top: 50px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
@ -141,6 +146,7 @@ nav li a:hover{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.img-content .image-item:before{
|
.img-content .image-item:before{
|
||||||
|
margin-top: 50px;
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -170,7 +176,9 @@ nav li a:hover{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.img-content .image-item .overlay p{
|
.img-content .image-item .overlay p{
|
||||||
|
margin-top: 60px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -181,13 +189,16 @@ nav li a:hover{
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
/*---------- meal----------*/
|
/*---------- meal----------*/
|
||||||
|
.meal-recipe{
|
||||||
|
background-color: #F8F6F4;
|
||||||
|
}
|
||||||
.meal-recipe .container{
|
.meal-recipe .container{
|
||||||
min-height: 30vh;
|
min-height: 20vh;
|
||||||
}
|
}
|
||||||
.meal-wrap{
|
.meal-wrap{
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
background: white;
|
background: #F8F6F4;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.meal-search{
|
.meal-search{
|
||||||
|
|
@ -335,12 +346,691 @@ nav li a:hover{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: red;
|
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){
|
@media screen and (min-width:1200px){
|
||||||
#meal{
|
#meal{
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -381,4 +1071,196 @@ nav li a:hover{
|
||||||
.meal-detail{
|
.meal-detail{
|
||||||
width: 700px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue