mirror of
https://github.com/ION606/selmer-bot-website.git
synced 2026-05-14 22:16:54 +00:00
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.
This commit is contained in:
a-box31
+197
-122
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -179,12 +179,43 @@
|
||||
<header>
|
||||
<div class="main-header">
|
||||
<nav class="navigation">
|
||||
|
||||
<div class="logo">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
|
||||
</a>
|
||||
<a href="#"><h1 class="brand-name brand-name-large">Selmer Bot<h1></a>
|
||||
</div>
|
||||
|
||||
<a href="#" class="toggle-button">
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-links">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="myGuilds" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="calendar" id="callink" class="nav-link"><i class="fa-solid fa-calendar" alt="Calendar" style="scale: 2; color: lightgrey;"></i></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://docs.selmerbot.com" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="premium" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="team" class="nav-link"><i class="fa-solid fa-user-gear" style="scale: 2; color: rgb(12, 216, 5);" alt="AUTHOR"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="banner-area">
|
||||
|
||||
Reference in New Issue
Block a user