diff --git a/Avatar_editv3.png b/Avatar_editv3.png new file mode 100644 index 0000000..049bede Binary files /dev/null and b/Avatar_editv3.png differ diff --git a/MyLogo.png b/MyLogo.png index 2e02189..5b40b98 100644 Binary files a/MyLogo.png and b/MyLogo.png differ diff --git a/icon-close.svg b/icon-close.svg new file mode 100644 index 0000000..ace11db --- /dev/null +++ b/icon-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icon-hamburger.svg b/icon-hamburger.svg new file mode 100644 index 0000000..7e5eab1 --- /dev/null +++ b/icon-hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index bd697c7..46ef549 100644 --- a/index.html +++ b/index.html @@ -1,38 +1,56 @@ - - - - - - - Moon Moon's Hub - - -
- -

Moon Moon's Hub

-
- -
-
-
- -
-

I am a 26-year-old Norwegian guy that occasionally streams, is a tech head, and hosts various things on my local server. Some of these you can check out here:

- My Projects' dashboard - PDF Tools - IT Tools -
- - - - - - + + + + + + + + + Moon Moon's hub + + + + + + +
+
+ +
+ + + +
+ +
+ +
+
+

Welcome to + Moon Moon's Hub

+ +

I am a 26-year-old Norwegian guy that occasionally streams, is a tech head, and hosts various things on my local server. + Some of these you can check out at my dashborad.

+
+
+ + + + + + + \ No newline at end of file diff --git a/navigation.js b/navigation.js new file mode 100644 index 0000000..4fad527 --- /dev/null +++ b/navigation.js @@ -0,0 +1,14 @@ +const nav = document.querySelector(".primary-navigation"); +const navToggle = document.querySelector(".mobile-nav-toggle"); + +navToggle.addEventListener("click", () => { + + const visiblity = nav.getAttribute("data-visible"); + if (visiblity === "false") { + nav.setAttribute("data-visible", true); + navToggle.setAttribute("aria-expanded", true); + } else { + nav.setAttribute("data-visible", false); + navToggle.setAttribute("aria-expanded", false); + } +}) diff --git a/script.js b/script.js index e69de29..d30dd9a 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,22 @@ +const wrapper = document.querySelector('.wrapper'); +const loginLink = document.querySelector('.login-link'); +const registerLink = document.querySelector('.register-link'); +const btnPopup = document.querySelector('.btnLogin-popup'); +const iconClose = document.querySelector('.icon-close'); + +registerLink.addEventListener('click', ()=> { + wrapper.classList.add('active'); +}); + +loginLink.addEventListener('click', ()=> { + wrapper.classList.remove('active'); +}); + +btnPopup.addEventListener('click', ()=> { + wrapper.classList.add('active-popup'); +}); + +iconClose.addEventListener('click', ()=> { + wrapper.classList.remove('active-popup'); + wrapper.classList.remove('active'); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3e6efd0 --- /dev/null +++ b/style.css @@ -0,0 +1,447 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +/* ------------------- */ +/* Custom properties */ +/* ------------------- */ + +:root { + /* colors */ + --clr-dark: 230 35% 7%; + --clr-light: 231 77% 90%; + --clr-white: 0 0% 100%; + + /* font-sizes */ + --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem); + --fs-800: 3.5rem; + --fs-700: 1.5rem; + --fs-600: 1rem; + --fs-500: 1rem; + --fs-400: 0.9375rem; + --fs-300: 1rem; + --fs-200: 0.875rem; + + /* font-families */ + --ff-serif: "Bellefair", serif; + --ff-sans-cond: "Barlow Condensed", sans-serif; + --ff-sans-normal: "Barlow", sans-serif; +} + +@media (min-width: 35em) { + :root { + --fs-800: 5rem; + --fs-700: 2.5rem; + --fs-600: 1.5rem; + --fs-500: 1.25rem; + --fs-400: 1rem; + } +} + +@media (min-width: 45em) { + :root { + /* font-sizes */ + --fs-800: 6.25rem; + --fs-700: 3.5rem; + --fs-600: 2rem; + --fs-500: 1.75rem; + --fs-400: 1.125rem; + } +} +/* ------------------- */ +/* Reset */ +/* ------------------- */ + +/* https://piccalil.li/blog/a-modern-css-reset/ */ + +/* Box sizing */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reset margins */ +body, +h1, +h2, +h3, +h4, +h5, +p, +figure, +picture { + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-weight: 400; +} + +/* set up the body */ +body { + color: hsl( var(--clr-white) ); + font-family: var(--ff-sans-normal); + font-size: var(--fs-400); + background-color: hsl( var(--clr-dark) ); + display: flex; + justify-content: center; + align-items: center; + line-height: 1.5; + min-height: 100vh; + overflow-x: hidden; +} + + + + +.background { + position: absolute; + top: 0; + left: 0; + width: 100%; + min-height: 100vh; + background-image: url('background.jpg'); + background-repeat: no repeat; + background-position: bottom center; + background-size: cover; + z-index: -1; + filter:blur(5px) saturate(100%) brightness(75%); +} + +/* primary-header */ + +.primary-header { + display: flex; + padding: 20px 100px; + position: fixed; + top: 0; + height: auto; + width: 100%; + align-items: center; + justify-content: space-between; + z-index: 99; +} + +.logo { + width: auto; + height: 90px; + margin: 1.5rem clamp(1.5rem, 5vw, 3.5rem); + user-select: none; +} + + +.primary-navigation { + --gap: clamp(1.5rem, 5vw, 3.5rem); + --underline-gap: 2rem; + list-style: none; + padding: 0; + margin: 0; +} + +.primary-navigation a { + text-decoration: none; +} + +.primary-navigation a > span { + font-weight: 700; + margin-right: .5em; +} + +.mobile-nav-toggle { + display: none; +} + +@media (max-width: 35rem) { + .primary-navigation { + --underline-gap: .5rem; + position: fixed; + z-index: 1000; + inset: 0 0 0 30%; + list-style: none; + padding: min(20rem, 15vh) 2rem; + margin: 0; + flex-direction: column; + transform: translateX(100%); + transition: transform 500ms ease-in-out; + } + + .primary-navigation[data-visible="true"] { + transform: translateX(0); + } + + .primary-navigation.underline-indicators > .active { + border: 0; + } + + .mobile-nav-toggle { + display: block; + position: absolute; + z-index: 2000; + right: 1rem; + top: 2rem; + background: transparent; + background-image: url(icon-hamburger.svg); + background-repeat: no-repeat; + background-position: center; + width: 1.5rem; + aspect-ratio: 1; + border: 0; + } + + .mobile-nav-toggle[aria-expanded="true"] { + background-image: url(icon-close.svg); + } + + .mobile-nav-toggle:focus-visible { + outline: 5px solid white; + outline-offset: 5px; + } + +} + +@media (min-width: 35em) { + .primary-navigation { + padding-inline: clamp(3rem, 7vw, 7rem); + } +} + +@media (min-width: 35em) and (max-width: 44.999em) { + .primary-navigation a > span { + display: none; + } +} + +@media (min-width: 45em) { + + .primary-header::after { + content: ''; + display: block; + position: relative; + height: 1px; + width: 100%; + margin-right: -2.5rem; + background: hsl( var(--clr-white) / .25); + order: 1; + } + + nav { + order: 2; + } + + .primary-navigation { + margin-block: 2rem; + } + + +} + + +.primary-navigation a { + position: relative; + align-self: flex-end; + align-items: center; + font-size: 1.1em; + color: #fff; + text-decoration: none; + font-weight: 500; + margin-left: 40px; + margin: 0.5rem; + margin-inline-end: 0.5rem; +} + +.primary-navigation a::after { + content: ''; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 3px; + background: #fff; + border-radius: 5px; + transform-origin: right; + transform: scaleX(0); + transition: transform .5s; +} + +.primary-navigation a:hover::after { + transform-origin: right; + transform: scaleX(1); +} + + +.content { + display: flex; + justify-content: center; + text-align: center; + width: 700px; + height: 50vh; + margin: 0 auto; +} + +.content p { + font-size: 25px; + color: #000000; + height: auto; +} + + + +footer { + position: fixed; + display: flex; + bottom: 0; + align-items: center; + justify-content: center; + z-index: 99; + min-height: 10vh; + overflow-x: hidden; +} + + +.social-buttons { + display: flex; + align-self: center; + position: relative; + align-items: center; + bottom: 0; + margin: 0 auto; +} + +.social-buttons a { + position: relative; + display: inline-block; + width: 45px; + height: 45px; + background: transparent; + box-shadow: 0 4px 4px rgba(0, 0, 0, .3); + margin: 0 8px; + z-index: 1; + text-align: center; + line-height: 45px; + transition: .3s; +} + +.social-buttons a:hover{ + background: rgb(63, 9, 126); + transform: rotate(135deg); + box-shadow: 0 0 5px rgb(63, 9, 126), 0 0 10px rgb(63, 9, 126); +} + + +.social-buttons a::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background: #929498; + z-index: -1; +} + +.social-buttons a i { + font-size: 18px; + color: #000; + transition: .3s; +} + +.social-buttons a i:hover { + transform: rotate(225deg); + color: rgb(63, 9, 126); + +} + + + +/* ------------------- */ +/* Utility classes */ +/* ------------------- */ + +/* general */ + +.flex { + display: flex; + gap: var(--gap, .5rem) +} + +.grid { + display: grid; + gap: var(--gap, 1rem); +} + +.d-block { + display: block; +} + +.flow > *:where(:not(:first-child)) { + margin-top: var(--flow-space, 1rem); +} + +.flow--space-small { + --flow-space: .75rem; +} + +.container { + padding-inline: 2em; + margin-inline: auto; + max-width: 80rem; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; /* added line */ + border: 0; +} + +.skip-to-content { + position: absolute; + z-index: 9999; + background: hsl( var(--clr-white) ); + color: hsl( var(--clr-dark) ); + padding: .5em 1em; + margin-inline: auto; + transform: translateY(-100%); + transition: transform 250ms ease-in; +} + +.skip-to-content:focus { + transform: translateY(0); +} + + + +.grid-container { + text-align: center; + display: grid; + place-items: center; + padding-inline: 1rem; + padding-bottom: 4rem; +} + +.grid-container p:not([class]) { + max-width: 50ch; +} + +img, +picutre { + max-width: 100%; + display: block; +} \ No newline at end of file