mirror of
https://github.com/ION606/selmer-bot-website.git
synced 2026-06-05 23:46:14 +00:00
Banner Responsiveness
Added the description to the banner and made the banner work for smaller screen sizes.
This commit is contained in:
a-box31
+103
-78
@@ -19,9 +19,6 @@ body {
|
||||
height:100%; margin:0; padding:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Better Scroll Bar */
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
@@ -29,7 +26,7 @@ body::-webkit-scrollbar {
|
||||
height: .7rem;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track{
|
||||
body::-webkit-scrollbar-track {
|
||||
background-color: rgb(50,50,50);
|
||||
}
|
||||
|
||||
@@ -38,10 +35,6 @@ body::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* header portion */
|
||||
.main-header {
|
||||
margin: 0 auto;
|
||||
@@ -53,8 +46,7 @@ body::-webkit-scrollbar-thumb {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -81,7 +73,7 @@ header{
|
||||
}
|
||||
|
||||
|
||||
.logo{
|
||||
.logo {
|
||||
width: 50%;
|
||||
float: left;
|
||||
line-height: 100px;
|
||||
@@ -90,7 +82,7 @@ header{
|
||||
margin-left: 5%
|
||||
}
|
||||
|
||||
.logo a{
|
||||
.logo a {
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
font-family: poppins, sans-serif;
|
||||
@@ -99,14 +91,14 @@ header{
|
||||
}
|
||||
|
||||
|
||||
.navigation{
|
||||
.navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggle-button{
|
||||
.toggle-button {
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
right: 3rem;
|
||||
@@ -124,59 +116,7 @@ header{
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 800px){
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: .8em;
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-links li{
|
||||
.navbar-links li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@@ -191,14 +131,13 @@ header{
|
||||
background-color: rgba(255, 255, 255, 0.5)
|
||||
}
|
||||
|
||||
|
||||
.navbar-links ul{
|
||||
.navbar-links ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.banner-area{
|
||||
.banner-area {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: fixed;
|
||||
@@ -210,15 +149,16 @@ header{
|
||||
}
|
||||
|
||||
.banner-area h2 {
|
||||
padding: 8%;
|
||||
font-size: 70px;
|
||||
padding: 5%;
|
||||
font-size: 50px;
|
||||
font-family: sans-serif, poppins;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 100%;
|
||||
padding-top: 5px;
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
margin-top: 100px;
|
||||
position: relative;
|
||||
@@ -226,7 +166,14 @@ header{
|
||||
background-color: rgb(41, 42, 48);
|
||||
}
|
||||
|
||||
footer{
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: rgb(41, 42, 48);
|
||||
}
|
||||
|
||||
@@ -238,8 +185,6 @@ footer{
|
||||
background-color: rgb(41, 42, 48);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* I have no clue */
|
||||
|
||||
.loginbtn {
|
||||
@@ -247,6 +192,7 @@ footer{
|
||||
scale: 1.2;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.loginbtn:hover {
|
||||
color: #377aea;
|
||||
}
|
||||
@@ -317,7 +263,7 @@ footer{
|
||||
border:1px solid rgb(94, 104, 104);
|
||||
}
|
||||
|
||||
.carousel-control.right,
|
||||
.carousel-control.right,
|
||||
.carousel-control.left {
|
||||
background-image: none;
|
||||
}
|
||||
@@ -345,8 +291,87 @@ footer{
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.item{
|
||||
.item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* FIT TO SMALLER SCREEN */
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: .8em;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.banner-area h2 {
|
||||
padding: 8%;
|
||||
font-size: 40px;
|
||||
font-family: sans-serif, poppins;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user