|
|
|
<!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">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<script src="cms.js" defer></script>
|
|
|
|
<title>🥣</title>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<div class="intro">
|
|
|
|
<h1>Soup Generator</h1>
|
|
|
|
each soup has:
|
|
|
|
|
|
|
|
1. a title <br>
|
|
|
|
2. a list of ingredients <br>
|
|
|
|
3. a list of instructions <br>
|
|
|
|
4. a chef <br>
|
|
|
|
5. an image ? TODO ? ahah <br>
|
|
|
|
<br>
|
|
|
|
so we haveee:
|
|
|
|
<br>
|
|
|
|
name is a string
|
|
|
|
ingredients are an array of strings
|
|
|
|
recipe is an array of strings (first this, second this, third this, ecc)
|
|
|
|
and the chef (usually who upload the recipe) is a string again ? or maybe we can avoid this? idk is funny
|
|
|
|
<br>
|
|
|
|
ask to michael: what is the best solution to add images??
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="cookbook" id="cookbook">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- structure of the recipes -->
|
|
|
|
|
|
|
|
<!-- <div class="recipe">
|
|
|
|
<div class="info">
|
|
|
|
<h2 class="title">Soup name</h2>
|
|
|
|
<div class="description">Incididunt Lorem magna cillum aliquip laborum nisi anim eu.</div>
|
|
|
|
<div class="chef">giraffa anonima</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="ingredients">
|
|
|
|
<h3>Ingredients</h3>
|
|
|
|
<ul>
|
|
|
|
<li>First ingredient</li>
|
|
|
|
<li>Second ingredient</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
|
|
<h3>Instructions</h3>
|
|
|
|
<ol>
|
|
|
|
<li>First instruction</li>
|
|
|
|
<li>Second instruction</li>
|
|
|
|
</ol>
|
|
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|