86 lines
2.7 KiB
HTML
86 lines
2.7 KiB
HTML
|
<!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; */
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
h1.titre{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
div.contenu{
|
||
|
|
/* padding: 0 50px 0 50px; */
|
||
|
|
width: 80vw;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="navbar">
|
||
|
|
<a href="ARemplacer">KooK</a>
|
||
|
|
<h1>Accueil</h1>
|
||
|
|
<div class="menu"></div>
|
||
|
|
</div>
|
||
|
|
<div class="contenu">
|
||
|
|
<h1 class="titre">Prêt à cuisiner ?</h1>
|
||
|
|
<div class="LayoutRecettes">
|
||
|
|
<div class="RecetteDuJour">
|
||
|
|
<img src="ARemplacer" alt="Photo de la recette du jour">
|
||
|
|
<h2>Recette du jour : Blabla</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>
|
||
|
|
</div>
|
||
|
|
<div class="AutresRecettes">
|
||
|
|
<h2>Autres recettes</h2>
|
||
|
|
<div class="recette"><img src="ARemplacer" alt="Photo de recettes alternatives">
|
||
|
|
<a href="Aremplacer">
|
||
|
|
<h3>Oeoe la recette</h3>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="recette"><img src="ARemplacer" alt="Photo de recettes alternatives">
|
||
|
|
<a href="Aremplacer">
|
||
|
|
<h3>Oeoe la recette</h3>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="recette"><img src="ARemplacer" alt="Photo de recettes alternatives">
|
||
|
|
<a href="Aremplacer">
|
||
|
|
<h3>Oeoe la recette</h3>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|