m1lt72

e-s-l · Mar 31, 2024 · 65c3c35 · 65c3c35
1 parent 26aae63
commit 65c3c35
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -1 +1,51 @@
-Hello
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Navigation Bar with Flexbox</title>
+        <link rel="stylesheet" href="./styles.css">
+            <!--PASTE LINK HREF TO GOOGLE FONT HERE (then also something into css)-->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
+    </head>
+
+<!--
+TASK BRIEF:
+Make a navigation menu, include the previous logo IN THE NAVBAR.
+-->
+
+    <body>
+
+        <header id="home">
+            <img class="logo" src="./miro-3.png" alt="Logo">
+         <!--BLOCK ELEMENT WITH FLEX ENABLED-->
+            <ul class="navbar">
+                <li><a href="#home">Home</a></li>
+                <li><a href="#text">Text</a></li>
+                <li><a href="#author">Attribution</a></li>
+                <li><a href="#about">About</a></li>
+            </ul>
+        </header>
+
+        <section class="area-x">
+        <p id="text">Where lies the strangling fruit that came from the hand of the sinner I shall bring forth the seeds of the dead to share with the worms that gather in the darkness and surround the world with the power of their lives while from the dimlit halls of other places forms that never were and never could be writhe for the impatience of the few who never saw what could have been. In the black water with the sun shining at midnight, those fruit shall come ripe and in the darkness of that which is golden shall split open to reveal the revelation of the fatal softness in the earth. The shadows of the abyss are like the petals of a monstrous flower that shall blossom within the skull and expand the mind beyond what any man can bear, but whether it decays under the earth or above on green fields, or out to sea or in the very air, all shall come to revelation, and to revel, in the knowledge of the strangling fruit and the hand of the sinner shall rejoice, for there is no sin in shadow or in light that the seeds of the dead cannot forgive. And there shall be in the planting in the shadows a grace and a mercy from which shall blossom dark flowers, and their teeth shall devour and sustain and herald the passing of an age. That which dies shall still know life in death for all that decays is not forgotten and reanimated it shall walk the world in the bliss of not-knowing. And then there shall be a fire that knows the naming of you, and in the presence of the strangling fruit, its dark flame shall acquire every part of you that remains.
+        </p>
+
+        <div id="author">
+            <h3>This text is taken from</h3>
+            <h1>Annihilation</h1>
+            <h3>by</h3>
+            <h1>Jeff Vandameer</h1>
+        </div>
+        </section>
+
+
+        <footer id="about">
+            This is an example website developed for ICT40120, 2024, by E.S.L.
+        </footer>
+
+    </body>
+</html>
+
diff --git a/miro-3.png b/miro-3.png
diff --git a/styles.css b/styles.css
@@ -0,0 +1,94 @@
+
+
+/* CSS reset */
+* {
+    margin:0;
+    padding:0;
+}
+
+html {
+    font-size:16px;
+    scroll-behavior: smooth;
+}
+
+/***/
+
+
+html, body {
+    margin: 0;
+    width:100%;
+}
+
+
+
+/*linear background over body*/
+body {
+    /*ADD CSS FROM GOOGLE FONT HERE TO APPLY TO WHOLE BODY*/
+    font-family: "Nanum Gothic Coding", monospace;
+    font-weight: 400;
+    font-style: normal;
+    background-image: url(watercolor.webp);
+}
+
+header {
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    padding:0 2em 2em 0;
+}
+
+.logo{
+    height:100px;
+    width:100px;
+    padding:0px;
+    margin-right:auto;
+    cursor: pointer;
+}
+
+.navbar {
+    list-style: none;
+    margin-right:10em;
+}
+
+.navbar li {
+    display:inline-block;
+    padding: 0 30px;
+}
+
+.navbar li a {
+    transition: all 0.3s ease 0s;
+}
+
+
+a:link {
+    color: #000000;
+    text-decoration: none;
+}
+
+a:visited {
+    color: #000000;
+}
+
+.navbar li a:hover {
+    transition: all 0.3s ease 0s;
+    color: #0088a9;
+
+}
+
+
+p{
+    padding: 50em 0 50em 0;
+}
+
+.area-x{
+    margin:auto;
+    padding:10em 10em 50em 10em;
+}
+
+footer{
+    margin:auto;
+    padding:10em;
+}
+
+
+
diff --git a/watercolor.webp b/watercolor.webp