From 57ef82bc5c2fe62671ffde80d78d13bcc6521d1e Mon Sep 17 00:00:00 2001
From: Giildo <giildo.jm@gmail.com>
Date: Fri, 14 Feb 2025 16:32:00 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Create=20navbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/css/index.css | 0
assets/css/style.css | 73 +++++++++++++----------------------------
assets/img/logo.svg | 3 ++
assets/php/navbar.php | 20 +++++++++++
index.html => index.php | 11 +++----
5 files changed, 50 insertions(+), 57 deletions(-)
create mode 100644 assets/css/index.css
create mode 100644 assets/img/logo.svg
create mode 100644 assets/php/navbar.php
rename index.html => index.php (75%)
diff --git a/assets/css/index.css b/assets/css/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/assets/css/style.css b/assets/css/style.css
index 0b6bc22..643890e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,63 +1,36 @@
+:root {
+ --primary-light: #ABCA97;
+
+ --text-action: #99005E;
+}
+
body {
margin: 0;
}
-section {
- height: 100vh;
- display: grid;
+.main_navbar {
+ display: flex;
+ justify-content: space-between;
align-items: center;
- justify-items: center;
- grid-template-columns: 1fr;
-
- @media (width > 720px) {
- grid-template-columns: 1fr 1fr;
- }
-
- @media (width > 960px) {
- grid-template-columns: 1fr 1fr 1fr;
- }
-
- div {
- width: 100px;
- height: 100px;
-
- &:first-child {
- background-color: red;
- }
-
- &:nth-child(2) {
- background-color: brown;
- }
-
- &:nth-child(3) {
- background-color: rebeccapurple;
- }
-
- &:nth-of-type(4) {
- background-color: blue;
- }
-
-
- &:last-of-type {
- background-color: yellow;
- }
- }
-}
-
-nav {
+ padding: 0 1rem;
height: 64px;
- display: flex;
- justify-content: flex-end;
- ul {
+ background-color: var(--primary-light);
+
+ menu {
display: flex;
- gap: 8px;
list-style: none;
- padding: 0 8px 0 0;
+ gap: 1rem;
margin: 0;
+ padding: 0 ;
+
li {
- display: flex;
- justify-content: center;
- align-items: center;
+ a {
+ color: var(--text-action);
+
+ &:visited, &:active {
+ color: var(--text-action);
+ }
+ }
}
}
}
\ No newline at end of file
diff --git a/assets/img/logo.svg b/assets/img/logo.svg
new file mode 100644
index 0000000..91fc6a5
--- /dev/null
+++ b/assets/img/logo.svg
@@ -0,0 +1,3 @@
+<svg width="54" height="38" viewBox="0 0 54 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.2 9.6999C33.9 9.2999 31.9 21.0999 32 21.6999C31.9 21.6999 31.9 12.0999 31.5 12.0999C31.1 12.0999 31.2 21.6999 31 21.6999C30.8 21.6999 30.8 12.0999 30.5 12.0999C30.1 12.0999 30.1 21.6999 30 21.6999C29.9 21.6999 29.9 12.0999 29.5 12.0999C29.1 12.0999 29.1 21.6999 29 21.6999C28.8 21.6999 28.1 10.6999 28.1 10.6999C28.1 9.9999 28.7 9.7999 29.2 9.4999C29.2 8.8999 29 7.9999 29.1 7.5999C29 7.2999 29 7.0999 29 7.0999C29 7.0999 29 7.1999 28.9 7.1999C28.2 7.4999 28.4 5.5999 28.5 5.2999C28.5 3.8999 29.1 2.5999 30.3 1.9999C31 2.1999 31.6 2.5999 32.2 1.8999C34.1 0.599902 36.5 2.8999 38.4 1.6999C41.3 0.399903 44.8 1.3999 48 0.899902C48.6 0.899902 49.1 0.999903 49.2 1.5999C49.5 2.1999 50 1.9999 50.5 2.2999C51.7 3.1999 51.3 4.8999 50.4 5.9999C50.1 7.4999 48.8 8.2999 48.6 9.7999C46.7 10.1999 46.9 13.2999 44.8 13.5999C44.2 14.8999 43.3 16.0999 42.9 17.3999C42.1 17.6999 42.5 18.0999 42.2 18.5999C42 18.6999 41.5 18.6999 41.3 18.8999C41.7 20.0999 40.5 20.9999 39.5 21.2999C39.7 22.1999 38.8 22.6999 38.3 23.2999C38 24.1999 37.9 24.7999 37 25.1999C36.3 25.7999 36.4 26.3999 36 27.0999C35.6 27.9999 34.3 28.9999 34.8 29.8999C36.3 31.3999 38.8 29.6999 40.6 30.4999C42.8 30.7999 47.3 31.1999 48.1 28.3999C48.1 27.3999 48.2 26.0999 48.5 25.3999C48.2 24.3999 48.7 13.5999 48.5 12.0999C50.1 13.9999 54.6 22.7999 51.5 24.0999C51.6 24.4999 53.1 25.1999 53.1 25.5999C52.8 26.7999 52.8 27.6999 53.1 28.8999C53.2 30.0999 51.6 30.6999 52.3 31.6999C52.5 32.3999 52.4 33.5999 52.2 34.2999C51.7 35.0999 52.3 36.1999 51 36.0999C47.1 35.8999 43.1 36.8999 39.2 35.9999C38.1 35.4999 37.2 36.9999 35.9 36.2999C33.9 34.8999 31.6 36.2999 29.5 35.8999C27.6 37.3999 23.6 36.8999 22 34.8999C21 32.8999 20.7 30.1999 20.4 28.1999C20.4 28.0999 20.5 27.9999 20.6 27.9999C21.1 27.3999 20.4 26.9999 20.5 26.1999C20.8 23.8999 19.9 22.2999 18.5 20.5999C17.7 20.7999 16.9 20.5999 16.3 20.5999C16.3 20.1999 16.3 14.9999 16.3 14.9999C22 14.3999 19.1 3.1999 15.4 3.0999C11.7 3.1999 8.79995 14.0999 14.3 14.8999V20.5999C12.7 20.6999 10.9 19.6999 9.89995 21.5999C9.59995 21.9999 9.69995 22.6999 9.69995 23.1999C9.89995 25.3999 8.49995 28.1999 9.59995 30.1999C10.6 32.1999 14.2 31.6999 14.6 33.9999C13.5 38.2999 7.99995 35.7999 4.99995 36.6999C1.79995 38.1999 -1.50005 34.5999 3.09995 33.9999C3.79995 33.9999 4.19995 32.9999 4.99995 33.1999C8.49995 30.7999 5.99995 25.7999 6.69995 22.4999C6.79995 17.2999 7.99995 12.2999 6.69995 7.1999C6.39995 5.3999 4.99995 5.1999 3.59995 4.9999C0.599952 -0.200097 12.6 2.1999 15 1.6999C17.7 0.799903 20.7 1.3999 23.4 2.3999C25 2.9999 24.8 4.7999 25.9 5.8999C26.5 6.3999 26.9 6.7999 26.4 7.4999C27.4 8.7999 27.7 8.7999 27 10.2999C27.1 10.3999 27.2 10.4999 27.3 10.5999C27.4 12.0999 27.4 13.6999 26.9 15.1999C26.6 15.9999 25.7 16.1999 25.1 16.6999C24.6 17.5999 23.9 18.5999 23.2 19.2999C22.7 21.5999 25.1 23.9999 24.6 26.5999C24.8 28.2999 25.1 31.1999 26.7 31.9999C27.8 31.6999 27.5 29.5999 28.7 29.4999C29 27.1999 31.7 24.1999 34.1 23.8999C34.4 23.4999 34.1 23.0999 33.7 23.0999C32.2 22.6999 34.6 20.7999 35.2 20.3999C35.1 18.2999 37.1 16.8999 38.2 15.2999C38.5 14.3999 39 13.3999 40 13.0999C40.1 13.0999 40.1 13.0999 40.2 12.9999C40.3 12.7999 40.5 11.8999 40.8 11.7999C41 11.7999 41.1 11.8999 41.2 11.6999C41.4 11.3999 41.2 10.2999 41.5 9.8999C42.3 8.7999 44.3 6.7999 43.1 5.4999C42.3 4.9999 41 5.4999 40.4 4.5999C39.4 4.4999 38.8 6.1999 37.8 5.3999C37.8 5.3999 34.1 3.5999 32.5 5.2999C30.8 6.9999 32.2 9.6999 32.2 9.6999Z" fill="#99005E"/>
+</svg>
diff --git a/assets/php/navbar.php b/assets/php/navbar.php
new file mode 100644
index 0000000..d39529b
--- /dev/null
+++ b/assets/php/navbar.php
@@ -0,0 +1,20 @@
+<nav class="main_navbar">
+ <a href="/">
+ <img src="/assets/img/logo.svg" alt="Retour à l'accueil">
+ </a>
+
+ <menu>
+ <li>
+ <a href="/">Accueil</a>
+ </li>
+ <li>
+ <a href="/create.php">Créer sa recette</a>
+ </li>
+ <li>
+ <a href="#">Se connecter</a>
+ </li>
+ <li>
+ <a href="#">À propos</a>
+ </li>
+ </menu>
+</nav>
\ No newline at end of file
diff --git a/index.html b/index.php
similarity index 75%
rename from index.html
rename to index.php
index 7574511..c5e8c4f 100644
--- a/index.html
+++ b/index.php
@@ -6,16 +6,13 @@
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">
+ <link rel="stylesheet" href="assets/css/index.css">
<script src="assets/js/dialog.js" type="module"></script>
</head>
<body>
-<nav>
- <ul>
- <li>Accueil</li>
- <li>About</li>
- <li>Contact</li>
- </ul>
-</nav>
+<?php
+include_once 'assets/php/navbar.php';
+?>
</body>
</html>
\ No newline at end of file
--
GitLab