<!
--
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="[Link]" />
<title>Interactive Recipe Card</title>
</head>
<body>
<div class = "recipe- card">
<h1 class = "recipee-title">Chocolate Cake</h1>
<div class = "image-container">
<img src=[Link]
eggless/ alt="Chocolate Cake" class="recipe-image">
<button class="toggle-button" id="ingredients-toggle">Show
Ingredients</button>
<div class="ingredients" id="ingredients">
<h3>Intgredient</h3>
<ul>
<li>2 cups of flour</li>
<li>1 cup of sugar</li>
<li>1/2 cup of cocoa powder</li>
<li>2 eggs</li>
<li>1 cup of milk</li>
<li>1/2 cup of vegetable oil</li>
<li>1 tsp vanilla extract</li>
<li>1 tsp baking powder</li>
</ul>
</div>
<button class="toggle-button" id="steps-toggle">Show Steps</button>
<div class="steps" id="steps">
<h3>Instructions:</h3>
<ol>
<li>Heat the oven.</li>
<li>Mix dry ingredients in a large bowl.</li>
<li>Add eggs, milk, oil, and vanilla to the bowl. Stir until smooth.</li>
<li>Pour the mixture into pan and bake for 30-35 minutes.</li>
<li>Let it cool, then frost with chocolate frosting.</li>
</ol>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
//STYLE CSS
body {
font-family: Arial, sans-serif;
background-color: white;
display:flex;
justify-content:center;
align-item: center;
height: 100vh;
margin: 0;
}
recipe-card {
background-color: white;
width: 350px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
transition: transform 0.3s ease;
}
.recipe-card:hover {
transform: scale(1.05);
}
recipe-title{
font-size:24px;
margin-bottom:10px
}
recipe-image {
width: 100%;
height: auto;
border-radius: 8px;
}
toggle-button{
background-color:#ff7043;
color:white;
border: none;
padding: 10px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
