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

prend ce design la

Browse Source
This commit is contained in:
Lycano
2026-04-09 17:32:11 +02:00
parent 0ceb856272
commit 159ef1eec7
3 changed files with 105 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
acceuil.php Normal file
View File

@@ -0,0 +1,57 @@
<!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.php"?>
<div class="main-body">
<div class="content">
<div class="title-site">
<h1 class="title">Les Recettes De Papis</h1>
<hr class="line-acceuil">
<h3>Proposition de recette :</h3>
</div>
<div class="random-proposition">
<a class="recette-icone" href="recette-en-dur.php">
<img class="recette-preview-image" src="random-recette.jpg">
<div class="recette-icone-content">
<h3>Tarte au Pomme</h3>
<ul>
<li>Temps de préparation : 5ans</li>
<li>Nombre d'ingrédient : 48548964</li>
</ul>
</div>
</a>
<a class="recette-icone" href="recette-en-dur.php"> <img class="recette-preview-image" src="random-recette.jpg">
<div class="recette-icone-content">
<h3>Tarte au Pomme</h3>
<ul>
<li>Temps de préparation : 5ans</li>
<li>Nombre d'ingrédient : 48548964</li>
</ul>
</div>
</a>
<a class="recette-icone" href="recette-en-dur.php"> <img class="recette-preview-image" src="random-recette.jpg">
<div class="recette-icone-content">
<h3>Tarte au Pomme</h3>
<ul>
<li>Temps de préparation : 5ans</li>
<li>Nombre d'ingrédient : 48548964</li>
</ul>
</div>
</a>
</div>
</div>
</div>
<?php include "footer.php"?>
</body>
<script src="main.js"></script>
</html>

2
index.php
View File

@@ -15,7 +15,7 @@
<?php include "sidebar.php" ?> <?php include "sidebar.php" ?>
</div> </div>
<div class="content"> <div class="content">
<?php include "recette.php"?> <?php include "recette.php" ?>
</div> </div>
</div> </div>

48
main.css
View File

@@ -131,6 +131,33 @@ body {
/*display:none;*/ /*display:none;*/
} }
.title-site {
text-align: center;
}
.title {
width: 100%;
height: 50%;
font-size: 100px;
}
.random-proposition {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.recommandation img {
max-width: calc( 7vh + 7vw );
max-height: calc( 7vh + 7vw );
}
.line-acceuil {
color: #03be90;
box-shadow: 20px 6px 8px #007054;
}
.tag-selected-div { .tag-selected-div {
flex: 4; flex: 4;
} }
@@ -153,6 +180,8 @@ body {
} }
.search-form { .search-form {
margin-top: .5%;
padding: .5% 0 .5% .5%;
border: 1px solid black; border: 1px solid black;
border-radius: 20px; border-radius: 20px;
box-shadow: 0px 0px 10px rgb(131, 131, 131); box-shadow: 0px 0px 10px rgb(131, 131, 131);
@@ -440,8 +469,8 @@ ul {
.formcont form .form-group input { .formcont form .form-group input {
width: 95%; width: 95%;
box-sizing: border-box; box-sizing: border-box;
font-size:3vmin; font-size:3vmin;
padding:1vmin; padding:1vmin;
} }
@@ -458,12 +487,23 @@ ul {
box-shadow: 2px 2px 0px #000000; box-shadow: 2px 2px 0px #000000;
} }
.btn {
padding: .5% 2%;
border: 2px solid black;
border-radius: 10px;
margin-top: .5%;
margin-left: .5%;
background-color: #ffd9a0;
}
.btn:hover { .btn:hover {
background-color: #0bbd90; background-color: #0bbd90;
box-shadow: none; box-shadow: none;
cursor: pointer;
} }
.form-control { .form-control {
padding: 1%;
border-radius: 10px; border-radius: 10px;
box-shadow: 3px 4px 5px #8c8c8c; box-shadow: 3px 4px 5px #8c8c8c;
} }
@@ -536,6 +576,8 @@ ul {
border: 1px solid black; border: 1px solid black;
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 1px 1px black; box-shadow: 1px 1px 1px black;
margin-top: .25%;
margin-bottom: .25%;
} }
.liste-ingr-elem:hover { .liste-ingr-elem:hover {
@@ -566,6 +608,8 @@ ul {
border: 1px solid black; border: 1px solid black;
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 1px 1px black; box-shadow: 1px 1px 1px black;
margin-top: .25%;
margin-bottom: .25%;
} }
.liste-tag-elem:hover { .liste-tag-elem:hover {