dj

2026-03-20 16:00:45 +01:00
parent 867134a3e5
commit 0c958b0c59
4 changed files with 54 additions and 0 deletions
--- a/header.php
+++ b/header.php
@@ -8,6 +8,7 @@
        <ul class="nav-list">
            <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>
+            <li><a id="login" class= "nav-element" href="login.php">Login</a></li>
        </ul>
    </nav>
 </header>
--- a/login.php
+++ b/login.php
@@ -0,0 +1,21 @@
+<!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">
+        <form>
+            
+        </form>
+    </div>
+
+    <?php include "footer.php"?>
+</body>
+</html>
--- a/main.css
+++ b/main.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 /* Sommaire :
 - body et html
 - Header et ses contenues
@@ -14,6 +15,7 @@ html, body{
    height: 100%;
    text-align: center;
    /*font-size: 98%;*/
+    font-family: "Roboto", sans-serif;
 }


@@ -64,6 +66,20 @@ nav {
 .nav-element {
    line-height: 2.5;
    padding: 10px;
+    text-decoration: none;
+    color: black;
+}
+
+.nav-list{
+    li:nth-of-type(3){
+        position: fixed;
+        right: 25px;
+    }
+}
+
+#login {
+    border: 1px solid black;
+    border-radius: 6px;
 }

 /*Body et son contenu */
@@ -137,6 +153,7 @@ body {
    C'est la classe de chaques éléments de notre liste de recette
 */
 .recette-icone{
+    display: flex;
    border: 3px solid rgba(0,0,0,.125);
    border-radius: 40px;
    text-align: left;
@@ -144,6 +161,14 @@ body {
    vertical-align: middle;
    box-shadow: 3px 5px 5px black;
    max-width: 400px;
+    text-decoration: none;
+    color: black;
+}
+
+.recette-icone-content{
+    display: flex;
+    flex-direction: column;
+    padding-left: 10px;
 }

 .recette-preview-image{
--- a/recette.php
+++ b/recette.php
@@ -1,6 +1,13 @@
 <div class="recettes">
    <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"> 2 </a>
    <a class="recette-icone" href="recette-en-dur.php"> 3 </a>