Skip to content

Commit

Permalink
Website Overhauled
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinyplayerss
tinyplayerss committed Nov 29, 2023
1 parent 4b5e1e5 commit 2e31cae
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 48 deletions.
32 changes: 27 additions & 5 deletions main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,22 @@
Newsletter</a
>
</li>
<li></li>
</ul>
</nav>
<nav class="redbanner">
<div>
</header>

<nav class="redbanner">
<div class="sliding-text-container">
<div class="sliding-text">
<i class="fa-solid fa-bug" style="color: red"></i>
We're addressing the End Label issue. Seeking volunteers with
JavaScript and HTML/CSS skills to assist with fixes and
improvements. Despite our size compared to established companies,
we're dedicated to resolving this issue.
<i class="fa-solid fa-bug" style="color: red"></i>
</div>
</nav>
</header>
</div>
</nav>

<section>
<h1 class="headerbackground">Welcome to CustomBAR</h1>
Expand All @@ -95,6 +99,24 @@ <h1 class="headerbackground">Welcome to CustomBAR</h1>
allows you to create visually stunning progress bars tailored to your
needs.
</p>

<div class="twitterembed">
<blockquote class="twitter-tweet" data-dnt="true" data-theme="dark">
<p lang="en" dir="ltr">
Thank you for your service to the Rumble community!
</p>
&mdash; Rick Racela (@ric_rac)
<a
href="https://twitter.com/ric_rac/status/1718803578024817000?ref_src=twsrc%5Etfw"
>October 30, 2023</a
>
</blockquote>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script>
</div>
</section>

<section class="updatebanner">
Expand Down
106 changes: 63 additions & 43 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,16 @@ html {
body {
font-family: Arial, sans-serif;
color: #c9d1d9;
max-width: 67%;
width: 960px;
min-width: 1000px;
margin: 0 auto;
border-left: 2px solid #30363d;
border-right: 2px solid #30363d;
display: flex;
}

header {
background-color: #0d1117;
background-color: #061726;
padding: 20px;
border-radius: 0px 0px 20px 20px;
height: 75px;
}

nav {
Expand Down Expand Up @@ -52,7 +51,7 @@ nav {
border-radius: 50px;
color: #ffffff;
font-size: 8px;
border: 1px solid #ffffff;
border: 1px solid #85c742;
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
padding: 5px 15px 6px 15px;
}
Expand All @@ -63,7 +62,7 @@ nav {
padding: 10px;
text-decoration: none;
border-radius: 50px;
border: 1px solid #ffffff;
border: 1px solid #85c742;
transition: color 0.3s, background-color 0.3s;
padding: 5px 15px 6px 15px;
}
Expand All @@ -75,8 +74,8 @@ nav {

.button:hover {
color: black;
box-shadow: 0px 0px 20px #58a6ff;
background-color: #58a6ff;
box-shadow: 0px 0px 20px #85c742;
background-color: #85c742;
cursor: pointer;
}

Expand Down Expand Up @@ -128,15 +127,15 @@ nav ul li a:hover {

section {
padding: 30px;
background-color: #161b22;
background-color: #061726;
border-radius: 20px;
width: 100%;
max-width: 80%;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 40px;
text-align: center;
border: 1px solid #30363d;
border: 1px solid #85c742;
overflow: hidden;
}

Expand Down Expand Up @@ -177,10 +176,9 @@ footer, header {
}

footer {
background-color: #0d1117;
background-color: #061726;
padding: 20px;
text-align: center;
border-radius: 20px 20px 0px 0px;
}

footer p {
Expand All @@ -196,14 +194,14 @@ footer p {
text-decoration: none;
font-weight: bold;
border-radius: 50px;
border: 1px solid #ffffff;
border: 1px solid #85c742;
transition: background-color 0.3s, box-shadow 0.3s, color 0.3s ease;
}

.download-button:hover {
color: black;
box-shadow: 0px 0px 20px #58a6ff;
background-color: #58a6ff;
box-shadow: 0px 0px 20px #85c742;
background-color: #85c742;
}

.story {
Expand All @@ -218,25 +216,38 @@ footer p {
}

.updatebanner > h1 {
color: #ffd45e;
text-shadow: 0px 0px 20px #ffd45e84;
color: #85c742;
text-shadow: 0px 0px 20px #85c742;
}

.redbanner {
background-color: transparent;
width: 100%;
max-width: fit-content;
margin: 0 auto;
margin-top: 20px;
padding: 10px;
border-radius: 10px;
color: #ffffff;
justify-content: center;
border: 1px solid rgb(255, 157, 0);
border-radius: 20px;
.sliding-text-container {
overflow: hidden;
white-space: nowrap;
max-width: 1000px; /* Set the maximum width */
margin: 0 auto; /* Center the container within the page */
background-color: rgb(214, 214, 214);
padding: 10px;
font-size: 15px;
color: black;
text-transform: uppercase;
}

.sliding-text {
display: inline-block;
animation: slide 45s linear infinite;
}

@keyframes slide {
from {
transform: translateX(64%);
}
to {
transform: translateX(-100%);
}
}



.donationbar {
text-align: center;
}
Expand Down Expand Up @@ -267,16 +278,15 @@ progress::-webkit-progress-bar {

/* Fill color of the progress element */
progress::-webkit-progress-value {
background-color: #ffffff; /* Green fill color */
box-shadow: 0px 0px 20px 5px rgb(252, 228, 93);
background-color: #f23160; /* Green fill color */
}

progress::-webkit-progress-bar, progress::-webkit-progress-value {
border-radius: 50px;
}

.money {
color: #e9c94a;
color: #f23160;
}

.donationbutton {
Expand All @@ -289,13 +299,13 @@ progress::-webkit-progress-bar, progress::-webkit-progress-value {
font-weight: bold;
border-radius: 50px;
transition: color 0.3s, color 0.3s, background-color 0.3s, box-shadow 0.3s ease;
border: 1px solid #ffffff;
border: 1px solid #85c742;
}

.donationbutton:hover {
color: black;
background-color: #58a6ff;
box-shadow: 0px 0px 20px #58a6ff;
background-color: #85c742;
box-shadow: 0px 0px 20px #85c742;
cursor: pointer;
}

Expand All @@ -317,11 +327,11 @@ progress::-webkit-progress-bar, progress::-webkit-progress-value {

/* Version Label */
.versionstability {
border-right: 20px solid rgb(140, 248, 126);
border-right: 20px solid #85c742;
}

.preview {
border-right: 20px solid rgb(255, 190, 105);
border-right: 20px solid rgb(233, 160, 65);
}

.version {
Expand All @@ -346,12 +356,15 @@ progress::-webkit-progress-bar, progress::-webkit-progress-value {
}

.outsidebackground {
background-color: #121016;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: #030614;
}

.insidebackground {
background-color: #0d1117;
box-shadow: 0px 0px 1000px 10px #58a6ff4b;
backdrop-filter: blur(25px);
background-color: #000312;
}

.fa-cloud-arrow-down {
Expand All @@ -373,7 +386,6 @@ progress::-webkit-progress-bar, progress::-webkit-progress-value {
display: grid;
grid-auto-flow: column;
margin: 0 auto;
margin: -50px 40px -50px 40px;
}

.credits {
Expand All @@ -384,7 +396,7 @@ progress::-webkit-progress-bar, progress::-webkit-progress-value {

.profile {
border-radius: 100%;
border: 4px solid rgb(87, 153, 223);
border: 3px solid #85c742;
transition: scale 0.3s, border 0.3s, box-shadow 0.3s;
padding: 8px;
}
Expand All @@ -393,4 +405,12 @@ progress::-webkit-progress-bar, progress::-webkit-progress-value {
scale: 1.08;
border: 4px solid rgb(130, 181, 235);
box-shadow: 0px 0px 20px rgb(87, 153, 223);
}

.twitter-tweet {
margin: 0 auto;
}

.twitterembed {
scale: 0.9;
}

0 comments on commit 2e31cae

Please sign in to comment.