Updated website styling and content

Significant changes to the website have been implemented. The styling and positioning of certain elements across different pages were updated for better appearance and navigation. In addition, the projects page has been populated with new content, providing details about various projects.
MatejMa2ur · May 14, 2024 · 069376c · 069376c
1 parent 52104d6
commit 069376c
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 10 deletions.
diff --git a/about-me.html b/about-me.html
@@ -8,6 +8,11 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <link rel="stylesheet" HREF="style/style.css">
+    <style>
+        .links{
+            position: absolute;
+        }
+    </style>
 </head>
 <body class="yellow">
 <div class="container position-relative vh-100 pt-5">

diff --git a/index.html b/index.html
@@ -6,24 +6,30 @@
     <title>Live</title>
     <link rel="icon" href="img/Icon.png" type="image/png">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <link rel="stylesheet" HREF="style/style.css" >
+    <style>
+        .links{
+            position: absolute;
+        }
+    </style>
 </head>
 <body style="margin: 0;padding: 0" class="yellow">
 <div class="index-container">
     <div class="image-container" style="z-index: 1;">
         <img src="img/Bg.jpeg" />
         <div class="overlay"></div>
-    </div>
-    <div class="image-container" style="z-index: 2; height:80%; width:80%;">
-        <img src="img/Bg.jpeg" />
-        <div class="overlay"></div>
         <div class="links nordic">
             <a href="projects.html"
                class="y" style="margin-right: 8%;">Projects</a>
             <a href="about-me.html"
                class="y">About Me</a>
         </div>
     </div>
+    <div class="image-container" style="z-index: 2; height:80%; width:80%;">
+        <img src="img/Bg.jpeg" />
+        <div class="overlay"></div>
+    </div>
     <div class="image-container" style="z-index: 3; height:60%; width:60%;">
         <img src="img/Bg.jpeg" />
         <div class="overlay"></div>

diff --git a/projects.html b/projects.html
@@ -5,12 +5,80 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Live</title>
     <link rel="icon" href="img/Icon.png" type="image/png">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <link rel="stylesheet" HREF="style/style.css" >
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <link rel="stylesheet" HREF="style/style.css">
+
+    <style>
+        .links {
+            position: sticky;
+        }
+    </style>
 </head>
-<body class="yellow container d-flex justify-content-center align-items-center vh-100">
+<body class="yellow vh-100 flex-column">
+<!-- My projects -->
+<div class="container pt-5">
+    <div class="border border-2 border-dark text-center p-5">
+        <h1 class="nordic h1 text-center">My projects</h1>
+        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-3">
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
+                 class="border border-2 border-dark"></div>
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+        </div>
+
+        <p class="container">
+            These are all the project I have created over the years of coding.
+        </p>
+    </div>
+</div>
+
+<!-- 2023 -->
+
+<div class="d-flex flex-row gap-4 justify-content-center align-items-center my-5">
+    <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+    <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
+         class="border border-2 border-dark"></div>
+    <div class="nordic">
+        2023
+    </div>
+    <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
+         class="border border-2 border-dark"></div>
+    <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+</div>
+
+<div class="row mx-0 w-100 d-flex flex-row mb-3">
+    <div class="border border-2 border-dark p-3 col-sm-auto" style="max-width: 60%">
+        <img src="https://sagafjord.dk/wp-content/uploads/2022/07/placeholder.png" class="p-0 img-fluid"/>
+    </div>
+    <div class="col d-flex flex-column justify-content-center align-items-center">
+        <h2 class="nordic h2 text-center">Hack The Flag</h2>
+        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
+                 class="border border-2 border-dark"></div>
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+        </div>
+        <p class="container">
+            Hack the Flag is a competition for anyone who likes to solve ciphers. The competition aims to promote the
+            world of cryptography and encourage people to learn more about it.
+            The competition will test your skills in solving ciphers and how quickly you can do it.
+        </p>
+        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
+                 class="border border-2 border-dark"></div>
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+        </div>
+        <a href="https://hacktheflag.net" class="text-dark">
+            <i class="bi bi-link-45deg h3"></i>
+        </a>
+
+    </div>
+</div>
 
-<h1 class="nordic">Work in progress</h1>
+<!-- Menu -->
 
 <div class="links nordic">
     <a href="index.html"
@@ -19,7 +87,9 @@ <h1 class="nordic">Work in progress</h1>
        class="b">About Me</a>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
 <script src="js/script.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/style/style.css b/style/style.css
@@ -59,7 +59,6 @@ html {
 }
 
 .links {
-    position: absolute;
     bottom: 2%;
     width: 100%;
     text-align: center;