Benjamin/LesRecettesDePapis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

plus d'amélioration

Browse Source
This commit is contained in:
Lycano
2026-03-20 11:08:33 +01:00
parent 4e45014b47
commit c70b4b0dde
5 changed files with 101 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
header.html
View File

@@ -5,7 +5,9 @@
</a> </a>
</div> </div>
<nav id="nav"> <nav id="nav">
<a id="google" class="nav-element" href="google.com">Google</a> <ul id="nav-list">
<a id="unTest" class="nav-element" href="bing.com">Bing</a> <li><a id="google" class="nav-element" href="google.com">Google</a></li>
<li><a id="unTest" class="nav-element" href="bing.com">Bing</a></li>
</ul>
</nav> </nav>
</header> </header>

66
main.css
View File

@@ -1,11 +1,3 @@
/*
*/
/*Tout*/ /*Tout*/
html, body{ html, body{
height: 100%; height: 100%;
@@ -35,14 +27,25 @@ html, body{
} }
#nav { #nav {
background-color: yellow;
flex: 9; flex: 9;
text-align: initial; text-align: initial;
letter-spacing: 2px; letter-spacing: 2px;
padding: 10px; padding: 10px;
} }
#nav-list {
list-style-type: none;
margin: 0;
padding: 0;
background-color: rgb(255, 217, 160);
display: flex;
border: 1px solid rgba(0,0,0,.125);
border-radius: 40px;
}
.nav-element { .nav-element {
line-height: 2.5;
padding: 10px; padding: 10px;
} }
@@ -71,20 +74,59 @@ body {
background-clip: border-box; background-clip: border-box;
} }
/* content : le cadre de base du centre de notre site
*/
#content { #content {
background-color: red; background-color: #ffe4bb;
text-align: left; text-align: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid rgba(0,0,0,.125); border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem; border-radius: 6px;
overflow: scroll; overflow: scroll;
} }
/*Recettes :
représente le contenue centrale de la page.
*/
#recettes {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(300px, auto);
}
/* Classe recette icone :
C'est la classe de chaques éléments de notre liste de recette
*/
.recette-icone{
border: 3px solid rgba(0,0,0,.125);
border-radius: 40px;
text-align: center;
vertical-align: middle;
}
/*Ici commence le CSS pour la page de chaques recettes */
#recette-content {
display: flex;
flex-direction: row;
}
#recette-image {
background-color: red;
flex : 2;
aspect-ratio: 1/1;
max-height: 225px;
}
#recette-desc {
padding : 10px;
}
/*Footer et son contenue*/ /*Footer et son contenue*/
footer{ footer{
padding: 25px; padding: 25px;
background: darkslateblue; background: rgb(11, 189, 144);
color: white; color: white;
} }

BIN
random-recette.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

34
recette-en-dur.php Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Statique</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<?php include "header.html"?>
<div id="main-body">
<div id="content">
<div id="recette-title">
<h1>TARTE AU POMME</h1>
</div>
<div id="recette-content">
<img id="recette-image" src="random-recette.jpg">
<div id = "recette-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies aliquet dignissim. Proin venenatis libero at erat rutrum consectetur. Morbi ut justo ex. Quisque ante mi, feugiat nec turpis ac, feugiat tristique magna. Nunc vitae aliquet mauris, consectetur convallis magna. Suspendisse rutrum sagittis tempor. Sed maximus vulputate vestibulum. Nam arcu enim, finibus id vestibulum in, cursus ac urna. Sed sodales, lacus hendrerit varius sollicitudin, dolor erat porttitor est, fringilla iaculis metus justo et sapien. Ut eget pharetra orci. Morbi at egestas tellus. Praesent porta elit non tempus rhoncus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae convallis eros, et tristique leo. Vestibulum vitae ultrices erat.
Sed pellentesque tempor purus, eu ullamcorper risus lacinia in. Etiam quis rhoncus risus, quis lobortis sem. Quisque pulvinar faucibus lectus, ut gravida neque aliquam non. Pellentesque ornare blandit imperdiet. Proin sed elit quis dui pharetra volutpat et sagittis tortor. Quisque nec blandit lacus. Nulla varius neque metus, ut feugiat enim commodo a. Phasellus gravida fermentum tortor at lobortis. Nam tellus libero, interdum non mollis ut, faucibus id orci. Suspendisse laoreet lorem ex, vitae maximus tortor tincidunt id. Nullam id enim id lectus egestas commodo sit amet sed est. Phasellus enim est, ornare vitae feugiat at, ornare a sapien. Nullam interdum, lectus vitae commodo vulputate, metus ligula congue massa, quis lobortis lorem nisl quis augue. Nullam vestibulum et odio non luctus. Donec vel molestie nunc, ut ultrices ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies aliquet dignissim. Proin venenatis libero at erat rutrum consectetur. Morbi ut justo ex. Quisque ante mi, feugiat nec turpis ac, feugiat tristique magna. Nunc vitae aliquet mauris, consectetur convallis magna. Suspendisse rutrum sagittis tempor. Sed maximus vulputate vestibulum. Nam arcu enim, finibus id vestibulum in, cursus ac urna. Sed sodales, lacus hendrerit varius sollicitudin, dolor erat porttitor est, fringilla iaculis metus justo et sapien. Ut eget pharetra orci. Morbi at egestas tellus. Praesent porta elit non tempus rhoncus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae convallis eros, et tristique leo. Vestibulum vitae ultrices erat.
Sed pellentesque tempor purus, eu ullamcorper risus lacinia in. Etiam quis rhoncus risus, quis lobortis sem. Quisque pulvinar faucibus lectus, ut gravida neque aliquam non. Pellentesque ornare blandit imperdiet. Proin sed elit quis dui pharetra volutpat et sagittis tortor. Quisque nec blandit lacus. Nulla varius neque metus, ut feugiat enim commodo a. Phasellus gravida fermentum tortor at lobortis. Nam tellus libero, interdum non mollis ut, faucibus id orci. Suspendisse laoreet lorem ex, vitae maximus tortor tincidunt id. Nullam id enim id lectus egestas commodo sit amet sed est. Phasellus enim est, ornare vitae feugiat at, ornare a sapien. Nullam interdum, lectus vitae commodo vulputate, metus ligula congue massa, quis lobortis lorem nisl quis augue. Nullam vestibulum et odio non luctus. Donec vel molestie nunc, ut ultrices ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies aliquet dignissim. Proin venenatis libero at erat rutrum consectetur. Morbi ut justo ex. Quisque ante mi, feugiat nec turpis ac, feugiat tristique magna. Nunc vitae aliquet mauris, consectetur convallis magna. Suspendisse rutrum sagittis tempor. Sed maximus vulputate vestibulum. Nam arcu enim, finibus id vestibulum in, cursus ac urna. Sed sodales, lacus hendrerit varius sollicitudin, dolor erat porttitor est, fringilla iaculis metus justo et sapien. Ut eget pharetra orci. Morbi at egestas tellus. Praesent porta elit non tempus rhoncus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae convallis eros, et tristique leo. Vestibulum vitae ultrices erat.
Sed pellentesque tempor purus, eu ullamcorper risus lacinia in. Etiam quis rhoncus risus, quis lobortis sem. Quisque pulvinar faucibus lectus, ut gravida neque aliquam non. Pellentesque ornare blandit imperdiet. Proin sed elit quis dui pharetra volutpat et sagittis tortor. Quisque nec blandit lacus. Nulla varius neque metus, ut feugiat enim commodo a. Phasellus gravida fermentum tortor at lobortis. Nam tellus libero, interdum non mollis ut, faucibus id orci. Suspendisse laoreet lorem ex, vitae maximus tortor tincidunt id. Nullam id enim id lectus egestas commodo sit amet sed est. Phasellus enim est, ornare vitae feugiat at, ornare a sapien. Nullam interdum, lectus vitae commodo vulputate, metus ligula congue massa, quis lobortis lorem nisl quis augue. Nullam vestibulum et odio non luctus. Donec vel molestie nunc, ut ultrices ligula.
</div>
</div>
</div>
</div>
<?php include "footer.html"?>
</body>
</html>

15
recette.html
View File

@@ -1,8 +1,11 @@
<div id="recettes"> <div id="recettes">
Les recettes <div class="recette-icone"> <a href="recette-en-dur.php">1</a> </div>
<ul> <div class="recette-icone"> 2 </div>
<li>Un élément au pif</li> <div class="recette-icone"> 3 </div>
<li>Un deuxième élément au pif</li> <div class="recette-icone"> 4 </div>
<li>Et un autre</li> <div class="recette-icone"> 5 </div>
</ul> <div class="recette-icone"> 6 </div>
<div class="recette-icone"> 7 </div>
<div class="recette-icone"> 8 </div>
<div class="recette-icone"> 9 </div>
</div> </div>