bilal/BUT2IHM
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

push avancee accueil

Browse Source
This commit is contained in:
Desesquelles Antoine
2025-09-24 17:12:27 +02:00
commit 5dade190c5
5 changed files with 115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
accueil.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Accueil | KooK</title>
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
/* background-color: grey; */
}
a{
color: black;
}
div.navbar{
padding: 0 25px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid black;
}
div.menu{
width: 25px;
height: 25px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
div.menu div{
width: 100%;
height: 2px;
background-color: black;
}
h1.titre{
text-align: center;
}
div.contenu{
width: 70vw;
margin: 70px auto;
}
div.LayoutRecettes{
display: flex;
flex-direction: row;
align-items: start;
justify-content: stretch;
}
div.LayoutRecettes div{
padding: 0 40px;
}
div.RecetteDuJour{
flex: 600px 2 1;
}
div.AutresRecettes{
flex: 300px 1 1;
}
img{
width: 100%;
}
h2.autresRecettes{
text-align: center;
margin-top: 0;
}
a.lienRecetteAlternative p{
margin: 5px 0 20px 0;
}
</style>
</head>
<body>
<div class="navbar">
<a href="./accueil.html">KooK</a>
<h1>Accueil</h1>
<div class="menu">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="contenu">
<h1 class="titre">Prêt à cuisiner ? C'est Parti !</h1>
<div class="LayoutRecettes">
<div class="RecetteDuJour">
<img class="photoRecetteJour" src="./images/recetteJour.jpg" alt="Photo de la recette du jour">
<h2>Recette du jour : Pancakes fruités caramel</h2>
<p class="descriptionRecetteJour">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum ipsa, necessitatibus et eligendi enim deleniti, accusamus laudantium dignissimos, excepturi rerum eveniet consequuntur harum obcaecati delectus blanditiis reprehenderit tempore veritatis perspiciatis!</p>
<a href="ARemplacer">Accéder à la recette ></a>
</div>
<div class="AutresRecettes">
<h2 class="autresRecettes">Autres recettes</h2>
<div class="recette">
<a class="lienRecetteAlternative" href="Aremplacer">
<img src="./images/pizza.jpg" alt="Photo de recettes alternatives">
<p>Pizzas base tomate</p>
</a>
</div>
<div class="recette">
<a class="lienRecetteAlternative" href="Aremplacer">
<img src="./images/tiramisu.jpg" alt="Photo de recettes alternatives">
<p>Tiramisu cacao</p>
</a>
</div>
<div class="recette">
<a class="lienRecetteAlternative" href="Aremplacer">
<img src="./images/cheeseNaan.jpg" alt="Photo de recettes alternatives">
<p>Cheese naan</p>
</a>
</div>
</div>
</div>
</div>
</body>
</html>