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

updated html & css

Browse source
This commit is contained in:
JSriwongsa 2023-08-02 21:43:35 -05:00
parent 1c9381d70e
commit 40ee1218bf
2 changed files with 13 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
recipe_website/index.html
View file

@ -60,7 +60,7 @@
</div>
<div class="overlay">
<div class="content">
<a href=""><p>Dinners</p></a>
<a href=""><p>Breakfast</p></a>
</div>
</div>
</div>
@ -70,7 +70,7 @@
</div>
<div class="overlay">
<div class="content">
<a href=""><p>Drink</p></a>
<a href=""><p>Dinners</p></a>
</div>
</div>
</div>
@ -99,58 +99,17 @@
</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 id="meal"></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 class="meal-content"></div>
</div>
</div>
</div>
</div>
</main>

17
recipe_website/style.css
View file

@ -182,17 +182,21 @@ nav li a:hover{
}
/*---------- meal----------*/
.meal-recipe .container{
min-height: 60vh;
min-height: 30vh;
}
.meal-wrap{
max-width: 100%;
margin: 0 auto;
margin: 30px auto;
background: white;
text-align: center;
}
.meal-search{
margin: 30px 0;
}
.search-title{
font-size: 22px;
color: #5F264A;
}
.meal-search-box{
margin: 20px;
display: flex;
@ -206,8 +210,6 @@ nav li a:hover{
font-size: 16px;
outline: 0;
border: 1px solid #5F264A;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.search-control::placeholder{
color: #85586F;
@ -219,8 +221,6 @@ nav li a:hover{
background-color: #5F264A;
color: white;
border: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.search-btn:hover{
background-color: #85586F;
@ -233,7 +233,6 @@ nav li a:hover{
}
.meal-item{
margin: 20px 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 20px -12px rgba(0, 0, 0, 0.8);
}
@ -254,7 +253,6 @@ nav li a:hover{
display: block;
width: 150px;
margin: 20px auto;
border-radius: 10px;
background: #FFC26F;
color: white;
font-size: 16px;
@ -273,7 +271,6 @@ nav li a:hover{
transform: translate(-50%, -50%);
background-color: #F9E0BB;
color: #884A39;
border-radius: 10px;
width: 80%;
height: 80%;
z-index: 20;
@ -338,7 +335,7 @@ nav li a:hover{
width: 100%;
color: red;
}
/**/