From 123efa5d6887b552569f26ac7b731b61a2392c72 Mon Sep 17 00:00:00 2001 From: Notoric Date: Wed, 22 May 2024 23:20:33 +0100 Subject: [PATCH] Added nav bar --- index.html | 31 +++++++++++++++++ scripts/homepage.js | 0 styles/global.css | 84 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 index.html create mode 100644 scripts/homepage.js create mode 100644 styles/global.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..916958e --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + Notoric's Portfolio + + + +
+ + + +
+
+

Home

+

Welcome to the home page.

+
+ + \ No newline at end of file diff --git a/scripts/homepage.js b/scripts/homepage.js new file mode 100644 index 0000000..e69de29 diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 0000000..ccc3458 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,84 @@ +@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap'); + +body { + background-color: #111; + color: #eee; + margin: 0; + font-family: "Fira Mono", monospace; + font-weight: 400; + font-style: normal; + font-size: 16px; +} + +header { + background-color: black; + margin: 0; + overflow: hidden; + padding-inline: 16px; + font-size: 22px; + display: flex; + flex-direction: row; + align-items: center; +} + +#logo { + font-weight: 500; +} + +header p { + margin: 16px; + margin-inline: 0; +} + +#links, #nav { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + position: absolute; +} + +#links { + right: 0; +} + +#nav { + left: 50%; + transform: translateX(-50%); +} + +#links a, #nav a { + text-decoration: none; + color: #eee; + margin: 16px; + display: flex; + flex-direction: row; + align-items: center; + position: relative; +} + +#links a:after, #nav a:after { + content: ""; + display: block; + border-bottom: solid 3px #f05; + position: absolute; + right: 0; + width: 0; + height: 36px; + transition: width 0.3s ease; +} + +#links a:hover:after, #nav a:hover:after { + width: 100%; +} + +#links a svg { + fill: #eee; + width: 20px; + height: 20px; + padding-right: 8px; +} + +main { + padding-inline: 20px; +} \ No newline at end of file