From ade281602fa5d910cf0d8978c7e53b93209c11a1 Mon Sep 17 00:00:00 2001 From: a-box31 Date: Tue, 29 Nov 2022 16:41:09 -0500 Subject: [PATCH] Hamburger Test This is a test to use the hamburger menu and be able to show Selmer Bot on mobile and tablet screens. It is not fully functional yet as it has to media query for specific size values better. --- CSS/index.css | 319 ++++++++++++++++++++++++++++++------------------- HTML/test.html | 31 +++++ 2 files changed, 228 insertions(+), 122 deletions(-) diff --git a/CSS/index.css b/CSS/index.css index c3e6c1d..6db8ce1 100644 --- a/CSS/index.css +++ b/CSS/index.css @@ -1,3 +1,4 @@ +/* General styles for the page */ *{ margin: 0px; padding: 0px; @@ -17,6 +18,11 @@ body { height:100%; margin:0; padding:0; } + + + +/* Better Scroll Bar */ + body::-webkit-scrollbar { width: .5rem } @@ -30,6 +36,197 @@ body::-webkit-scrollbar-thumb { border-radius: 10px; } + + + +/* header portion */ +.main-header { + margin: 0 auto; + background-color: black; + height: 100px; + width: 100%; + z-index: 12; + position: fixed; + top: 0; +} + + +header{ + text-align: center; +} + +.brand-name { + + /* class for band name: should be centered wherever it is */ + text-align: center; + + /* heading elements like h1 all have margins: let the margins be 0 */ + margin: 0; + + font-size: 1em; + + /* changing the everything tag's font set on the heading to be different */ + font-family: Rajdhani, sans-serif, poppins; + + /* + Since heading are by default bolded, the font-weight can be changed to + normalize the bolded text + */ + font-weight: normal; + + /* All band names should be white */ + color: white; +} + +.band-name-large { + font-size: 2em; +} + + +.logo{ + width: 50%; + float: left; + line-height: 100px; + display: flex; + align-items: center; + margin-left: 5% +} + +.logo a{ + text-decoration: none; + font-size: 30px; + font-family: poppins, sans-serif; + color: #fff; + letter-spacing: 5px; +} + + +.navigation{ + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.toggle-button{ + position: absolute; + top: 3rem; + right: 3rem; + display: none; + flex-direction: column; + justify-content: space-between; + width: 30px; + height: 22px; +} + +.toggle-button .bar { + height: 3px; + width: 100%; + background-color: white; + border-radius: 10px; +} + + +@media (max-width: 1350px){ + .toggle-button { + display: flex; + } + .navbar-links { + display: none; + width: 100%; + } + + .navbar { + flex-direction: column; + align-items: flex-start; + } + + .navbar-links ul{ + flex-direction: column; + width: 100%; + } + + .navbar-links li { + border-top: 1px solid rgba(255, 255, 255, .3); + text-align: center; + } + + .navbar-links li a { + padding: 0.5rem 1rem; + } + + .navbar-links.active { + display: flex; + } +} + + +.navbar-links li{ + list-style: none; +} + +.navbar-links li a { + text-decoration: none; + color: #fff; + padding: 2rem; + display: block; +} + +.navbar-links li:hover { + background-color: rgba(255, 255, 255, 0.5) +} + + +.navbar-links ul{ + margin:0; + padding:0; + display: flex; +} + +.banner-area{ + width: 100%; + height: 500px; + position: fixed; + top: 100px; + background-image: url('https://github.com/ION606/selmer-bot-website/blob/main/assets/Header%20BK.gif?raw=true'); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; +} + +.banner-area h2 { + padding: 8%; + font-size: 70px; + font-family: sans-serif, poppins; + text-transform: uppercase; + color: #fff; +} + +.content-area { + width: 100%; + height: auto; + margin-top: 100px; + position: relative; + top: 450px; + background-color: rgb(41, 42, 48); +} + +footer{ + background-color: rgb(41, 42, 48); +} + +.footer-area { + padding-top: 30px; + width: 100%; + position: relative; + top: 450px; + background-color: rgb(41, 42, 48); +} + + + +/* I have no clue */ + .loginbtn { margin-top: 14px; scale: 1.2; @@ -138,125 +335,3 @@ body::-webkit-scrollbar-thumb { } -.main-header { - margin: 0 auto; - background-color: black; - height: 100px; - width: 100%; - z-index: 12; - position: fixed; - top: 0; -} - - - -header{ - text-align: center; -} - -.brand-name { - - /* class for band name: should be centered wherever it is */ - text-align: center; - - /* heading elements like h1 all have margins: let the margins be 0 */ - margin: 0; - - font-size: 1em; - - /* changing the everything tag's font set on the heading to be different */ - font-family: Rajdhani, sans-serif, poppins; - - /* - Since heading are by default bolded, the font-weight can be changed to - normalize the bolded text - */ - font-weight: normal; - - /* All band names should be white */ - color: white; -} - -.band-name-large { - font-size: 2em; -} - - -.logo{ - width: 50%; - float: left; - line-height: 100px; - display: flex; - align-items: center; - margin-left: 5% -} - -.logo a{ - text-decoration: none; - font-size: 30px; - font-family: poppins, sans-serif; - color: #fff; - letter-spacing: 5px; -} - -nav{ - float: right; - line-height: 100px; -} - -nav a{ - text-decoration: none; - font-family: poppins, sans-serif; - letter-spacing: 4px; - font-size: 20px; - margin: 0 10px; - color: #fff; -} - -.navigation{ - display: flex; - justify-content: space-between; - align-items: flex-end; - width: 100%; -} - -.banner-area{ - width: 100%; - height: 500px; - position: fixed; - top: 100px; - background-image: url('https://github.com/ION606/selmer-bot-website/blob/main/assets/Header%20BK.gif?raw=true'); - background-size: cover; - background-repeat: no-repeat; - background-position: center center; -} - -.banner-area h2 { - padding: 8%; - font-size: 70px; - font-family: sans-serif, poppins; - text-transform: uppercase; - color: #fff; -} - -.content-area { - width: 100%; - height: auto; - margin-top: 100px; - position: relative; - top: 450px; - background-color: rgb(41, 42, 48); -} - -footer{ - background-color: rgb(41, 42, 48); -} - -.footer-area { - padding-top: 30px; - width: 100%; - position: relative; - top: 450px; - background-color: rgb(41, 42, 48); -} - diff --git a/HTML/test.html b/HTML/test.html index 5e74da0..a517da4 100644 --- a/HTML/test.html +++ b/HTML/test.html @@ -179,12 +179,43 @@