initial commit
This commit is contained in:
JSriwongsa
parent
f68466c429
commit
355e4db147
3 changed files with 554 additions and 0 deletions
162
recipe_website/index.html
Normal file
162
recipe_website/index.html
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cooking and Recipes</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container site">
|
||||
<div class="brand">
|
||||
<a href=""><img src="images/logo-home.png" alt=""></a>
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Recipe</a></li>
|
||||
<li><a href="">Tips & Tools</a></li>
|
||||
<li><a href="">About</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="trigger">
|
||||
<button class="menu"><i class='bx bx-menu'></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="homepage-title">
|
||||
<div class="container">
|
||||
<div class="home-title">
|
||||
<div class="title">
|
||||
<p>M Recipies made for <span>everyone</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-content">
|
||||
<div class="container">
|
||||
<div class="img-content">
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/home-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="content">
|
||||
<a href=""><p>Vegetarian</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/home-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="content">
|
||||
<a href=""><p>Dinners</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/home-3.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="content">
|
||||
<a href=""><p>Drink</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="image">
|
||||
<img src="images/home-4.jpg" alt="">
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="content">
|
||||
<a href=""><p>Desserts</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meal-recipe">
|
||||
<div class="container">
|
||||
<div class="meal-wrap">
|
||||
<div class="meal-search">
|
||||
<h2 class="search-title">Find a recipe</h2>
|
||||
<div class="meal-search-box">
|
||||
<input type="text" id="search-input" class="search-control" placeholder="Search...">
|
||||
<button type="submit" id="search-btn" class="search-btn btn"><i class='bx bx-search'></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meal-result">
|
||||
<h2 class="search-title">Your Search Recipes:</h2>
|
||||
<div id="meal">
|
||||
<div class="meal-item">
|
||||
<div class="meal-img">
|
||||
<img src="images/food.jpg" alt="">
|
||||
</div>
|
||||
<div class="meal-name">
|
||||
<h3>Fries</h3>
|
||||
<a href="" class="recipe-btn">Get Recipe</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meal-item">
|
||||
<div class="meal-img">
|
||||
<img src="images/food.jpg" alt="">
|
||||
</div>
|
||||
<div class="meal-name">
|
||||
<h3>Fries</h3>
|
||||
<a href="" class="recipe-btn">Get Recipe</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meal-item">
|
||||
<div class="meal-img">
|
||||
<img src="images/food.jpg" alt="">
|
||||
</div>
|
||||
<div class="meal-name">
|
||||
<h3>Fries</h3>
|
||||
<a href="" class="recipe-btn">Get Recipe</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meal-detail">
|
||||
<button id="recipe-button" class="btn recipe-button"><i class='bx bx-x' ></i></button>
|
||||
<div class="meal-content">
|
||||
<h2 class="recipe-title">Name:</h2>
|
||||
<p class="recipe-cat">Category name</p>
|
||||
<div class="recipe-guide">
|
||||
<h3>Directions:</h3>
|
||||
<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 ut aliquip ex ea commodo consequat.</p>
|
||||
</div>
|
||||
<div class="recipe-img">
|
||||
<img src="images/food.jpg" alt="">
|
||||
</div>
|
||||
<div class="recipe-link">
|
||||
<a href="" target="_blank">Watch Video</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
5
recipe_website/main.js
Normal file
5
recipe_website/main.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
const menu = document.querySelector('.menu');
|
||||
const showMenu = document.querySelector('.site');
|
||||
menu.addEventListener('click', function(){
|
||||
showMenu.classList.toggle('showmenu')
|
||||
})
|
||||
387
recipe_website/style.css
Normal file
387
recipe_website/style.css
Normal file
|
|
@ -0,0 +1,387 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0 0 15px;
|
||||
}
|
||||
.container{
|
||||
position: relative;
|
||||
max-width: 60%;
|
||||
padding: 0 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*---------- nav ----------*/
|
||||
header{
|
||||
position: relative;
|
||||
line-height: 30px;
|
||||
background-color: white;
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
.container, .navigation{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.brand img{
|
||||
margin-top: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
nav{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFAF4;
|
||||
z-index: 5;
|
||||
align-items: center;
|
||||
display: none;
|
||||
}
|
||||
nav ul{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 200px;
|
||||
}
|
||||
nav li a{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
margin-top: 30px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #5F264A;
|
||||
}
|
||||
nav li a:hover{
|
||||
color: #85586F;
|
||||
}
|
||||
.trigger button{
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.showmenu nav{
|
||||
display: flex;
|
||||
}
|
||||
.showmenu .menu{
|
||||
z-index: 10;
|
||||
color: black;
|
||||
}
|
||||
.showmenu .menu i::before{
|
||||
content: 'x'
|
||||
}
|
||||
/*---------- home title----------*/
|
||||
.homepage-title{
|
||||
display: flex;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.home-title{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.title p{
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
color: #5F264A;
|
||||
}
|
||||
.title span{
|
||||
font-size: 36px;
|
||||
font-family: 'WindSong';
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
color: #C38154;
|
||||
}
|
||||
/*---------- home content----------*/
|
||||
.home-content .container{
|
||||
max-width: 60%;
|
||||
display: block;;
|
||||
}
|
||||
.img-content{
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-gap: 25px;
|
||||
}
|
||||
.img-content .image-item .image{
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
.img-content .image-item .image img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
.img-content .image-item{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-content .image-item:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 5;
|
||||
}
|
||||
.img-content .image-item:hover.image-item:before{
|
||||
display: block;
|
||||
}
|
||||
.img-content .image-item .overlay{
|
||||
position: absolute;
|
||||
top: 110%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: 1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.img-content .image-item .overlay p{
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: #FFC26F;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.img-content .image-item:hover .overlay{
|
||||
top: 0;
|
||||
}
|
||||
/*---------- meal----------*/
|
||||
.meal-recipe .container{
|
||||
min-height: 60vh;
|
||||
}
|
||||
.meal-wrap{
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
text-align: center;
|
||||
}
|
||||
.meal-search{
|
||||
margin: 30px 0;
|
||||
}
|
||||
.meal-search-box{
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.search-control, .search-btn{
|
||||
width: 100%;
|
||||
}
|
||||
.search-control{
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
outline: 0;
|
||||
border: 1px solid #5F264A;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.search-control::placeholder{
|
||||
color: #85586F;
|
||||
}
|
||||
.search-btn{
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
background-color: #5F264A;
|
||||
color: white;
|
||||
border: none;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.search-btn:hover{
|
||||
background-color: #85586F;
|
||||
}
|
||||
.meal-result{
|
||||
margin-top: 30px;
|
||||
}
|
||||
#meal{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.meal-item{
|
||||
margin: 20px 0;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px -12px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.meal-img img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.meal-name{
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.meal-name h3{
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.recipe-btn{
|
||||
display: block;
|
||||
width: 150px;
|
||||
margin: 20px auto;
|
||||
border-radius: 10px;
|
||||
background: #FFC26F;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 10px 0;
|
||||
}.recipe-btn:hover{
|
||||
background-color: #F9E0BB;
|
||||
color: black;
|
||||
}
|
||||
.meal-detail{
|
||||
display: none;
|
||||
padding: 30px 0;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #F9E0BB;
|
||||
color: #884A39;
|
||||
border-radius: 10px;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
z-index: 20;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.showRecipe{
|
||||
display: block;
|
||||
}
|
||||
.meal-content{
|
||||
margin: 30px;
|
||||
}
|
||||
.meal-content p:not(.recipe-cat){
|
||||
padding: 20px 0;
|
||||
}
|
||||
.recipe-button{
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
font-size: 30px;
|
||||
background: transparent;
|
||||
color: #884A39;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.recipe-title{
|
||||
text-transform: uppercase;
|
||||
font-size: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.recipe-cat{
|
||||
display: inline-block;
|
||||
background: #FFC95F;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
.recipe-guide{
|
||||
padding: 20px 0;
|
||||
}
|
||||
.recipe-img img{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.recipe-link{
|
||||
margin: 30px 0;
|
||||
}
|
||||
.recipe-link a{
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
.recipe-link a:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
.notFound{
|
||||
grid-template-columns: 1fr !important;
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width:1200px){
|
||||
#meal{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
.meal-item{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:992px){
|
||||
nav{
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
nav ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
max-width: 100%;
|
||||
}
|
||||
nav li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
nav li a{
|
||||
margin-right: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.trigger .menu{
|
||||
display: none;
|
||||
}
|
||||
.meal-detail{
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue