A simple food recipe website using html, css

Introduction:

A simple website of a food recipe. In this website we easily know how much time to prepare a food, ingredients required to prepare a food, how much calories and proteins available in a recipe will be noted.

Technologies required:

A simple html and css (You can modify the code as you need)

Note:- All the topics that I used in this code will be found in our website.

Here we are using once website for timer, cooking, profile icons we are using a website called font awesome. This website has more icons like this you may also use this website for icons

This line of code will connect the website. And this will works only with the internet connection.

Project source:-

This project is taken from the freelancing website called Up work. Client need to create or need changes in the website that he will post. The original image is in the below

This is the picture taken from the freelancing website Upwork

Source code :

html
<!DOCTYPE html>
<html>
<head>
<title>Recipe website</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>
<body>

<div class="recipe-card">


<div class="time">
<i class="fas fa-clock"></i>
<p>Prep: <br> min</p>
<i class="fa-solid fa-utensils"></i>
<p>Cook: <br>0 min</p>
<i class="fas fa-user"></i>
<p>Servings: <br>1</p>
</div>
<div class="details">

<h2>Fruit salad</h2>
<ul>
<li>1 Kiwi</li>
<li>150 ml Milk</li>
<li>30 g Oats</li>

</ul>
<p>Instructions: ...</p>
<div class="nutrition">
<p>Kcal: 326 | Prot: 13g | Carb: 46g | Fat: 10g</p>
</div>

</div>

</div>
</body>
</html>

Css code

body{
padding:0;
margin: 0;
box-sizing: border-box;
background-image: url(Recipe.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
.recipe-card {
position: absolute;
margin-top: -20px;
display: flex;
color: white;
padding: 20px;
border-radius: 10px;
width: 100%;
height: 100vh;
}
.time{
background-color: rgba(0, 0, 0, 0.3);
align-items: center;
text-align: center;
width: 80px;
height:fit-content;
padding-top: 20px;
margin-right: 30%;
margin-left: 30px;
}
.details{
background-color: rgba(0, 0, 0, 0.3);
width:100%;
height: auto;


}
.details h2{
font-size: 40px;
margin-top: 200px;
margin-left: 30px;
}
.details ul {
margin-left: 30px;
}
.details ul li{
list-style-type: none;
line-height: 35px;
}
.details p{
margin: 30px;
font-size: 20px;
}

You can copy the above codes and make your own website as you need.. And the output of the code is in below picture

This is the output of the code

And background image is downloaded from the Internet and You may use your own pictures (images). or download the image from here

Background image used in this project

For more simple and different project you may follow our website content and learn the different technologies helpful for your future..

Thank you for visiting our website.. If your have any doubts. Let me know in the comment section..

A simple food recipe website using html, css

Introduction:

Technologies required:

Project source:-

Source code :

html

Css code

1 Comments

Contact Form