ION_Archive/selmer-bot-website
1
0
Fork 0
mirror of https://github.com/ION606/selmer-bot-website.git synced 2026-05-14 22:16:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Banner Responsiveness

Browse Source 
Added the description to the banner and made the banner work for smaller screen sizes.
This commit is contained in:
a-box31
2022-12-25 02:37:23 -05:00
parent 6de8db0780
commit 0a0a0d3cdb
2 changed files with 133 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CSS/index.css
+102 -77
View File
@@ -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;
}
@@ -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;
}
}
HTML/test.html
+22 -10
View File
@@ -182,11 +182,11 @@
<body>
<div class="box-area">
<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;">
@@ -222,13 +222,14 @@
</nav>
</div>
<div class="banner-area">
<h2>this is banner</h2>
<h2>WELCOME TO THE SELMER BOT DASHBOARD</h2>
<h2>Music, Games, an Economy System, and More!</h2>
</div>
</header>
<!-- Page Content -->
<section class="content-area">
<div class="row custom-alert" style="display: none;" id="alertrow">
<div class="alert alert-warning alert-dismissible" id="banner" style="text-align: center" role="alert">
@@ -237,23 +238,27 @@
</div>
</div>
<!-- <div style="text-align: center; align-content: center;">
<!- <h2 style="color:wheat">Based off a real Professor of Logic!</h2> ->
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="outline-style: dashed; border-radius: 50%; outline-color: green;">
</div> -->
<!-- Page Content -->
<section class="content-area">
<!-- Adds margins to the page -->
<div class="container">
<div id="music" class="row pb-md-5 mt-md-5">
<div class="col-xxl-4 col-xl-4 col-lg-5 col-md-12">
<img class="img-responsive" style="border-style: dashed; border-color:rgb(11, 189, 189);" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio1.png?raw=true">
<!-- <img class="img-responsive overlay-content" style="border-style: dashed; border-color:rgb(11, 189, 189); transform: rotate(25deg); margin-bottom: 20%; margin-left: 45%;" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio2.png?raw=true"> -->
<img class="img-responsive" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio1.png?raw=true">
</div>
<div class="col-xxl-4 col-xl-4 col-lg-5 col-md-6">
<div class="container desctext">
<p style="white-space: pre-line;">
@@ -274,6 +279,7 @@
</ul>
</div>
</div>
</div>
@@ -456,6 +462,8 @@
</div>
</section>
<!-- <script type="module" src="./main.js", type="application/json"></script> -->
<footer class="footer-area">
<!-- Footer -->
@@ -467,6 +475,10 @@
</li>
</ul>
</footer>
</div>
</body>
</html>