From ea843f6667100e2859b98d0892b58f5c88091b52 Mon Sep 17 00:00:00 2001
From: guams <guams@duck.com>
Date: Wed, 4 Jun 2025 22:46:53 +0200
Subject: [PATCH] first navbar

---
 index.html    | 25 +++++++++++++++----------
 src/style.css | 42 +++++++++++++++++++++++++++++++++---------
 2 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 6caa1f9..ad6205d 100644
--- a/index.html
+++ b/index.html
@@ -29,18 +29,23 @@
 
     </div>
     <div class="content">
-        <nav>
-            <ul>
-                <li><a class="navbar-link" href="/">Home</a></li>
-                <li><a class="navbar-link" href="./about.html">My projects</a></li>
-                <li><a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a></li>
-            </ul>
-        </nav>
         <div class="navigation">
-            <a class="header-nav-button" href="/"></a>
+            <span id="nav-title">Navigation</span>
+            <a class="navbar-link" href="/">Home</a>
+            <a class="navbar-link" href="./about.html">My projects</a>
+            <a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
         </div>
-        <div class="welcome">
-            <span>coucou</span>
+        <div class="presentation">
+            <h1>Welcome to my website</h1>
+            <span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
+            <span>
+                I'm currently studying computer science, especially web development.
+                My hobbies are giving life to my ideas thanks to my coding skills, reading books and watching anime.
+            </span><br>
+            <span>
+                On my free time I share my thoughts on the works I play or read on my
+                <a class="hypertext-link" target="_blank" href="https://abonentendeur.guams.fr">blog.</a>
+            </span>
         </div>
     </div>
 </main>
diff --git a/src/style.css b/src/style.css
index 4b26733..6b49c92 100644
--- a/src/style.css
+++ b/src/style.css
@@ -18,11 +18,11 @@ body {
     display: block;
     max-width: 100%;
     height: 200px;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
 }
 
 main {
-    margin: auto;
+    margin: 16px 0;
     width: 850px;
 }
 
@@ -74,15 +74,38 @@ li {
     list-style-type: none;
 }
 
+.navbar-link {
+    /*background-color: green;*/
+    padding: 2px;
+    margin: 2px;
+}
+
+.navigation {
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    background-color: #484848;
+    width: 20%;
+}
+
+h1 {
+    font-size: 19px;
+}
+
 .navbar-link:hover {
-    cursor: url('/src/img/cursor.png'), default;
     text-decoration-line: underline;
 }
 
-nav {
-    background-color: blue;
-    width: 80%;
-    border-right: 1px solid #0a0a0a;
+#nav-title {
+    text-align: center;
+}
+
+.hypertext-link:visited {
+    color: white;
+}
+
+.hypertext-link {
+    font-weight: bold;
 }
 
 .navbar-link {
@@ -90,7 +113,8 @@ nav {
     color: white;
 }
 
-.welcome {
+.presentation {
     width: 80%;
-    background-color: red;
+    padding: 7px;
+    text-align: center;
 }
\ No newline at end of file