first navbar

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>

src/style.css

@@ -22,7 +22,7 @@ body {
 }
 
 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;
 }