diff --git a/boplplus/Sky3Clean.png b/boplplus/Sky3Clean.png new file mode 100644 index 0000000..171beb9 Binary files /dev/null and b/boplplus/Sky3Clean.png differ diff --git a/boplplus/archrival.ttf b/boplplus/archrival.ttf new file mode 100644 index 0000000..2d54933 Binary files /dev/null and b/boplplus/archrival.ttf differ diff --git a/boplplus/archrivalbold.ttf b/boplplus/archrivalbold.ttf new file mode 100644 index 0000000..9e83eb2 Binary files /dev/null and b/boplplus/archrivalbold.ttf differ diff --git a/boplplus/canvasbg.png b/boplplus/canvasbg.png new file mode 100644 index 0000000..fffa224 Binary files /dev/null and b/boplplus/canvasbg.png differ diff --git a/boplplus/index.html b/boplplus/index.html new file mode 100644 index 0000000..c732be3 --- /dev/null +++ b/boplplus/index.html @@ -0,0 +1,78 @@ + + + + + + Bopl Plus + + + + + + + + + + + +
+ +
+ +
+
+

Bopl Plus

+

Built-in mods to improve your bopl experience!

+
+
+
+
+

Custom Mods

+

Add custom mods to personalize your gameplay.

+
+
+

Improved Performance

+

Optimized mods for smoother bopling.

+
+
+

User-Friendly Interface

+

Intuitive interface for easy mod management.

+
+
+
+
+ Download Now +
+
+

Join Our Discord Community

+

The letter 3!

+ Join Discord +
+
+

Featured Mods

+
+

Mod Name 1

+

Description of the first featured mod goes here.

+
+
+

Mod Name 2

+

Description of the second featured mod goes here.

+
+
+

Mod Name 3

+

Description of the third featured mod goes here.

+
+
+
+ + + + + \ No newline at end of file diff --git a/boplplus/script.js b/boplplus/script.js new file mode 100644 index 0000000..f21472c --- /dev/null +++ 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`; +}); \ No newline at end of file diff --git a/boplplus/style.css b/boplplus/style.css new file mode 100644 index 0000000..3466af3 --- /dev/null +++ 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; +} \ No newline at end of file