Add files via upload

AbstractMelon · Apr 19, 2024 · fd2dc41 · fd2dc41
1 parent 1d874c9
commit fd2dc41
Show file tree

Hide file tree

Showing 7 changed files with 316 additions and 0 deletions.
diff --git a/boplplus/Sky3Clean.png b/boplplus/Sky3Clean.png
diff --git a/boplplus/archrival.ttf b/boplplus/archrival.ttf
diff --git a/boplplus/archrivalbold.ttf b/boplplus/archrivalbold.ttf
diff --git a/boplplus/canvasbg.png b/boplplus/canvasbg.png
diff --git a/boplplus/index.html b/boplplus/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bopl Plus</title>
+    <link rel="icon" type="image/png" href="favicon.png"> 
+    <meta name="description" content="A bopl battle client mod to improve your experience!"> 
+    <meta name="keywords" content="bopl, battle, client, mod, bopl battle, game, tweak, better, performance"> 
+    <meta name="author" content="Melon"> 
+    <meta name="robots" content="index, follow">
+
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+
+    <div class="headerbar">
+        <nav>
+            <a href="#features">Features</a>
+            <a href="#download">Download</a>
+            <a href="#discord">Discord</a>
+            <a href="#mods">Mods</a>
+        </nav>
+    </div>
+
+    <div class="container">
+        <header>
+            <h1>Bopl Plus</h1>
+            <p>Built-in mods to improve your bopl experience!</p>
+        </header>
+        <section id="features">
+            <div class="features">
+                <div class="feature">
+                    <h2>Custom Mods</h2>
+                    <p>Add custom mods to personalize your gameplay.</p>
+                </div>
+                <div class="feature">
+                    <h2>Improved Performance</h2>
+                    <p>Optimized mods for smoother bopling.</p>
+                </div>
+                <div class="feature">
+                    <h2>User-Friendly Interface</h2>
+                    <p>Intuitive interface for easy mod management.</p>
+                </div>
+            </div>
+        </section>
+        <section id="download">
+            <a href="#" class="download-btn">Download Now</a>
+        </section>
+        <section id="discord">
+            <h2>Join Our Discord Community</h2>
+            <p>The letter 3!</p>
+            <a href="#" class="discord-link">Join Discord</a>
+        </section>
+        <section id="mods" class="mods">
+            <h2>Featured Mods</h2>
+            <div class="mod">
+                <h2>Mod Name 1</h2>
+                <p>Description of the first featured mod goes here.</p>
+            </div>
+            <div class="mod">
+                <h2>Mod Name 2</h2>
+                <p>Description of the second featured mod goes here.</p>
+            </div>
+            <div class="mod">
+                <h2>Mod Name 3</h2>
+                <p>Description of the third featured mod goes here.</p>
+            </div>
+        </section>
+    </div>
+    <footer>
+        <p>&copy; 2024 Borpl Plus. All rights reserved.</p>
+    </footer>
+
+    <script href="script.js"></script>
+</body>
+</html> 
diff --git a/boplplus/script.js b/boplplus/script.js
@@ -0,0 +1,5 @@
+document.addEventListener("scroll", function() {
+    const scrolled = window.scrollY;
+    const speed = 0.8; // Adjust this value to change the speed of the parallax effect
+    document.querySelector('body').style.backgroundPosition = `center ${-scrolled * speed}px`;
+});
diff --git a/boplplus/style.css b/boplplus/style.css
@@ -0,0 +1,233 @@
+html {
+  height: 100%;
+  width: 100%;
+}
+
+@font-face {
+   font-family: Main;
+   src: url(archrivalbold.ttf);
+}
+@font-face {
+   font-family: Secondary;
+   src: url(archrival.ttf);
+}
+
+h1 {
+   font-family: Main;
+   color: #fff;
+   font-size: 100px;
+}
+
+.content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    color: #ffffff;
+    text-align: center;
+}
+
+body {
+  perspective: 0.5px;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-image: url('Sky3Clean.png');
+  background-size: cover;
+  background-attachment: fixed;
+
+  background-position: translateZ(1px);
+  color: #ffffff; /* Text color */
+  position: relative;
+  transition: background-position 0.3s;
+}
+body::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 67, 87, 0.534); 
+    z-index: -1; 
+    background-clip: 100%;
+}
+.container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 20px;
+}
+header {
+    text-align: center;
+    margin-bottom: 40px;
+}
+.headerbar {
+    text-align: center;
+    background-color: #2099EE;
+    border: solid 7px #125988;
+    padding: 20px 0;
+    border-radius: 20px;
+    margin: auto;
+    max-width: 480px;
+    transform: translate(0px, 30px);
+}
+.headerbar a {
+    color: #ffffff;
+    text-decoration: none;
+    margin: 0 10px;
+    font-size: 18px;
+    font-family: main;
+    transition-duration: 0.4s;
+}
+
+
+h2 {
+  font-family: Main;
+  font-size: 130;
+  text-align: center;
+}
+
+p {
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+    font-family: Secondary;
+    text-align: center;
+}
+
+.discord-link {
+    display: block;  
+    color: #125988;
+    text-decoration: none;
+    font-family: Main;
+    text-align: center;
+
+    background-color: #2099EE;
+    padding: 20px 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-radius: 200px;
+    border: solid 7px #125988;
+    margin: auto;
+    max-width: 100px;
+}
+a:hover {
+  background-color: #F89928;
+  border: solid 7px #915924;
+  color: #ffffff;
+  border-radius: 200px;
+  padding: 20px 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.features {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 40px;
+
+}
+.feature {
+    flex: 0 0 calc(33.33% - 20px);
+    background-color: #2099EE;
+    border: solid 7px #125988;
+    padding: 20px;
+    border-radius: 30px;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+}
+.feature h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #125988;
+}
+.feature p {
+    font-size: 16px;
+    line-height: 1.4;
+    color: #fff;
+}
+.download-btn {
+    display: block;
+    padding: 10px 20px;
+    border: solid 7px #125988;
+    background-color: #2099EE;
+    color: #125988;
+    text-decoration: none;
+    border-radius: 200px;
+    font-size: 18px;
+    font-family: Main;
+    margin: auto;
+    max-width: 130px;
+}
+.download-btn:hover {
+    background-color: #F89928;
+    border: solid 7px #915924;
+    color: #ffffff;
+}
+footer {
+    text-align: center;
+    padding-top: 10px;
+    border-top: 5px solid #ddd;
+    position: relative;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    padding-bottom: 5px;
+}
+footer p {
+    font-size: 14px;
+    color: #ffd900;    
+}
+.mods {
+    margin-top: 50px;
+}
+.mod {
+    margin-bottom: 20px;
+    padding: 20px;
+    background-color: #2099EE;
+    border: solid 7px #125988;
+    border-radius: 30px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    color: #ffffff;
+}
+.mod h2 {
+    font-size: 24px;
+    color: #125988;
+    margin-bottom: 10px;
+}
+.mod p {
+    font-size: 16px;
+    line-height: 1.4;
+}
+
+::-webkit-scrollbar {
+    width: 8px; /
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888; 
+    border-radius: 6px; 
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+}
+
+* {
+    scrollbar-width: thin; 
+    scrollbar-color: #333 #555; 
+}
+
+*::-moz-scrollbar-thumb {
+    background-color: #555;
+    border-radius: 5px; 
+}
+
+*::-moz-scrollbar-thumb:hover {
+    background-color: #777; 
+}