From bcd5579927495acfdde6e392938dcc0a5ae30b26 Mon Sep 17 00:00:00 2001 From: fabolous005 Date: Wed, 26 Feb 2025 21:22:53 +0100 Subject: [PATCH] new first design --- static/css/styles.css | 116 +++++++++++++++++++++++------------- static/html/index.html.tera | 43 +++++++------ static/icons/logo.svg | 22 +++++++ static/icons/menu.svg | 5 ++ static/js/scripts.js | 8 +++ 5 files changed, 131 insertions(+), 63 deletions(-) create mode 100644 static/icons/logo.svg create mode 100644 static/icons/menu.svg create mode 100644 static/js/scripts.js diff --git a/static/css/styles.css b/static/css/styles.css index 463176c..b142c9e 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,50 +1,84 @@ * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } -#navbar-container { - height: 2.5rem; - display: flex; - justify-content: space-between; - background-color: #181825; - color: white; - align-items: center; - gap: 0.4rem; +body { + margin: 0; + font-family: Arial, sans-serif; } -#navbar .left { - position: relative; +.navbar { + background-color: #333; + color: #fff; + /*padding: 1rem;*/ + position: relative; + z-index: 1000; } -#navbar .right { - display: flex; -} - -#navbar .link { - padding: 0.3rem 0.4rem; -} - -#navbar .item { - display: flex; -} -#navbar .button { - display: none; -} -@media (max-width: 770px) { - #navbar .item { - display: none; - } - #navbar .button .item { +.navbar-container { display: flex; - } - - #navbar .item { - display: none; - } - #navbar .item .open { - width: 100%; - padding: 0; - display: flex; - } + justify-content: space-between; + align-items: center; +} + +.logo { + width: 4%; + height: 4%; + margin-left: 5px; +} + +.nav-links { + list-style: none; + display: flex; + gap: 1.5rem; + margin: 1rem; +} + +.nav-links a { + color: #fff; + text-decoration: none; + font-size: 1.3rem; +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; +} + +@media (max-width: 768px) { + .nav-links { + display: none; + flex-direction: column; + gap: 0; + position: absolute; + background-color: #333; + width: 100%; + top: 100%; + left: 0; + margin: 0; + } + + .nav-links.active { + display: flex; + } + + .nav-toggle { + display: flex; + } + + .nav-links li { + text-align: center; + padding: 1rem 0; + } + + .nav-links a { + display: block; + width: 100%; + padding: 1rem 0; + } } diff --git a/static/html/index.html.tera b/static/html/index.html.tera index b5fca14..803c86a 100644 --- a/static/html/index.html.tera +++ b/static/html/index.html.tera @@ -1,29 +1,28 @@ - - - Responsive Navbar - + + + Responsive Navbar + - - + + diff --git a/static/icons/logo.svg b/static/icons/logo.svg new file mode 100644 index 0000000..e540390 --- /dev/null +++ b/static/icons/logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/icons/menu.svg b/static/icons/menu.svg new file mode 100644 index 0000000..63895fd --- /dev/null +++ b/static/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/js/scripts.js b/static/js/scripts.js new file mode 100644 index 0000000..2a2dd27 --- /dev/null +++ b/static/js/scripts.js @@ -0,0 +1,8 @@ +document.addEventListener('DOMContentLoaded', () => { + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.querySelector('.nav-links'); + + navToggle.addEventListener('click', () => { + navLinks.classList.toggle('active'); + }); +});