muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated code

Browse source
This commit is contained in:
JSriwongsa 2023-08-23 14:15:08 -05:00
parent 40ee1218bf
commit 2ae67844fd
3 changed files with 1191 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

278
recipe_website/index.html
View file

@ -13,7 +13,7 @@
<header>
<div class="container site">
<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 class="navigation">
<nav>
@ -35,7 +35,7 @@
<div class="container">
<div class="home-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>
@ -50,7 +50,7 @@
</div>
<div class="overlay">
<div class="content">
<a href=""><p>Vegetarian</p></a>
<a href="vegetarian.html"><p>Vegetarian</p></a>
</div>
</div>
</div>
@ -60,7 +60,7 @@
</div>
<div class="overlay">
<div class="content">
<a href=""><p>Breakfast</p></a>
<a href="brunch.html"><p>Brunch</p></a>
</div>
</div>
</div>
@ -70,7 +70,7 @@
</div>
<div class="overlay">
<div class="content">
<a href=""><p>Dinners</p></a>
<a href="dinner.html"><p>Dinners</p></a>
</div>
</div>
</div>
@ -80,7 +80,7 @@
</div>
<div class="overlay">
<div class="content">
<a href=""><p>Desserts</p></a>
<a href="dessert.html"><p>Desserts</p></a>
</div>
</div>
</div>
@ -109,13 +109,273 @@
</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>
<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 &copy;2023 M Recipes</p>
</footer>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="main.js"></script>
</body>
</html>

27
recipe_website/main.js
View file

@ -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')
}
})

912
recipe_website/style.css
View file

@ -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;
}
}