├── assets ├── images │ ├── logo.png │ ├── option │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ ├── 04.png │ │ ├── separate_left.png │ │ └── separate_right.png │ ├── gameplay │ │ ├── 01.png │ │ ├── 02.png │ │ └── 03.png │ ├── left_character.png │ ├── analysis │ │ ├── balance.png │ │ ├── background.jpg │ │ └── separate_bar.png │ ├── contact │ │ ├── header01.jpg │ │ ├── header02.jpg │ │ ├── header03.jpg │ │ ├── character01.png │ │ ├── character02.png │ │ └── character03.png │ ├── icons │ │ ├── drop_icon.png │ │ ├── email_icon.png │ │ ├── lock_icon.png │ │ ├── money_icon.png │ │ ├── brodcast_icon.png │ │ ├── discord_icon.png │ │ ├── exchange_icon.png │ │ ├── telegram_icon.png │ │ ├── twitter_icon.png │ │ └── menu_title_icon.png │ ├── mobile_background.jpg │ ├── right_character.png │ ├── title_background.png │ ├── buttons │ │ ├── buy_button.png │ │ ├── join_button.png │ │ ├── buy_button_hover.png │ │ └── join_button_hover.png │ └── desktop_background.jpg ├── js │ └── app.js └── css │ └── app.css ├── tailwind.config.js └── index.html /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/option/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/option/01.png -------------------------------------------------------------------------------- /assets/images/option/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/option/02.png -------------------------------------------------------------------------------- /assets/images/option/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/option/03.png -------------------------------------------------------------------------------- /assets/images/option/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/option/04.png -------------------------------------------------------------------------------- /assets/images/gameplay/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/gameplay/01.png -------------------------------------------------------------------------------- /assets/images/gameplay/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/gameplay/02.png -------------------------------------------------------------------------------- /assets/images/gameplay/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/gameplay/03.png -------------------------------------------------------------------------------- /assets/images/left_character.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/left_character.png -------------------------------------------------------------------------------- /assets/images/analysis/balance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/analysis/balance.png -------------------------------------------------------------------------------- /assets/images/contact/header01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/contact/header01.jpg -------------------------------------------------------------------------------- /assets/images/contact/header02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/contact/header02.jpg -------------------------------------------------------------------------------- /assets/images/contact/header03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/contact/header03.jpg -------------------------------------------------------------------------------- /assets/images/icons/drop_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/drop_icon.png -------------------------------------------------------------------------------- /assets/images/icons/email_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/email_icon.png -------------------------------------------------------------------------------- /assets/images/icons/lock_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/lock_icon.png -------------------------------------------------------------------------------- /assets/images/icons/money_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/money_icon.png -------------------------------------------------------------------------------- /assets/images/mobile_background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/mobile_background.jpg -------------------------------------------------------------------------------- /assets/images/right_character.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/right_character.png -------------------------------------------------------------------------------- /assets/images/title_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/title_background.png -------------------------------------------------------------------------------- /assets/images/analysis/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/analysis/background.jpg -------------------------------------------------------------------------------- /assets/images/buttons/buy_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/buttons/buy_button.png -------------------------------------------------------------------------------- /assets/images/buttons/join_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/buttons/join_button.png -------------------------------------------------------------------------------- /assets/images/contact/character01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/contact/character01.png -------------------------------------------------------------------------------- /assets/images/contact/character02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/contact/character02.png -------------------------------------------------------------------------------- /assets/images/contact/character03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/contact/character03.png -------------------------------------------------------------------------------- /assets/images/desktop_background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/desktop_background.jpg -------------------------------------------------------------------------------- /assets/images/icons/brodcast_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/brodcast_icon.png -------------------------------------------------------------------------------- /assets/images/icons/discord_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/discord_icon.png -------------------------------------------------------------------------------- /assets/images/icons/exchange_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/exchange_icon.png -------------------------------------------------------------------------------- /assets/images/icons/telegram_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/telegram_icon.png -------------------------------------------------------------------------------- /assets/images/icons/twitter_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/twitter_icon.png -------------------------------------------------------------------------------- /assets/images/analysis/separate_bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/analysis/separate_bar.png -------------------------------------------------------------------------------- /assets/images/icons/menu_title_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/icons/menu_title_icon.png -------------------------------------------------------------------------------- /assets/images/option/separate_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/option/separate_left.png -------------------------------------------------------------------------------- /assets/images/option/separate_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/option/separate_right.png -------------------------------------------------------------------------------- /assets/images/buttons/buy_button_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/buttons/buy_button_hover.png -------------------------------------------------------------------------------- /assets/images/buttons/join_button_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitfullstacker/chain_rivals/HEAD/assets/images/buttons/join_button_hover.png -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{html,js}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | $(document).ready(function() { 4 | $(document).on("scroll", onScroll); 5 | 6 | function onScroll(event){ 7 | scrollFunction(); 8 | 9 | var scrollPos = $(document).scrollTop(); 10 | $('.header-menu-item').each(function () { 11 | var currLink = $(this); 12 | var refElement = $(currLink.attr("href")); 13 | if (refElement.position().top <= scrollPos + 1 && refElement.position().top + refElement.height() > scrollPos + 1) { 14 | $('.header-menu-item').removeClass("active"); 15 | currLink.addClass("active"); 16 | } 17 | else{ 18 | currLink.removeClass("active"); 19 | } 20 | }); 21 | 22 | reveal(); 23 | } 24 | 25 | // Get the button: 26 | let scrollTopButton = document.getElementById("scrollTopBtn"); 27 | 28 | function scrollFunction() { 29 | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 30 | scrollTopButton.style.display = "block"; 31 | } else { 32 | scrollTopButton.style.display = "none"; 33 | } 34 | } 35 | 36 | // 3D Button Effect 37 | let calculateAngle = function(e, item, parent) { 38 | let dropShadowColor = `rgba(0, 0, 0, 0.3)` 39 | if(parent.getAttribute('data-filter-color') !== null) { 40 | dropShadowColor = parent.getAttribute('data-filter-color'); 41 | } 42 | 43 | // Get the x position of the users mouse, relative to the button itself 44 | let x = Math.abs(item.getBoundingClientRect().x - e.clientX); 45 | // Get the y position relative to the button 46 | let y = Math.abs(item.getBoundingClientRect().y - e.clientY); 47 | 48 | // Calculate half the width and height 49 | let halfWidth = item.getBoundingClientRect().width / 2; 50 | let halfHeight = item.getBoundingClientRect().height / 2; 51 | 52 | // Use this to create an angle. I have divided by 6 and 4 respectively so the effect looks good. 53 | // Changing these numbers will change the depth of the effect. 54 | let calcAngleX = (x - halfWidth) / 40; 55 | let calcAngleY = (y - halfHeight) / 30; 56 | 57 | // Set the items transform CSS property 58 | item.style.transform = `rotateY(${calcAngleX}deg) rotateX(${calcAngleY}deg) scale(1)`; 59 | 60 | // And set its container's perspective. 61 | parent.style.perspective = `${halfWidth * 2}px` 62 | item.style.perspective = `${halfWidth * 3}px` 63 | 64 | if(parent.getAttribute('data-custom-perspective') !== null) { 65 | parent.style.perspective = `${parent.getAttribute('data-custom-perspective')}` 66 | } 67 | 68 | // Reapply this to the shadow, with different dividers 69 | let calcShadowX = (x - halfWidth) / 3; 70 | let calcShadowY = (y - halfHeight) / 3; 71 | 72 | // Add a filter shadow - this is more performant to animate than a regular box shadow. 73 | item.style.filter = `drop-shadow(${-calcShadowX}px ${calcShadowY}px 15px ${dropShadowColor})`; 74 | } 75 | 76 | document.querySelectorAll('.following-button').forEach(function(item) { 77 | item.addEventListener('mouseenter', function(e) { 78 | calculateAngle(e, this, this); 79 | }); 80 | 81 | item.addEventListener('mousemove', function(e) { 82 | calculateAngle(e, this, this); 83 | }); 84 | 85 | item.addEventListener('mouseleave', function(e) { 86 | let dropShadowColor = `rgba(0, 0, 0, 0.3)` 87 | if(item.getAttribute('data-filter-color') !== null) { 88 | dropShadowColor = item.getAttribute('data-filter-color') 89 | } 90 | item.style.transform = `rotateY(0deg) rotateX(0deg) scale(1)`; 91 | item.style.filter = `drop-shadow(0 10px 15px ${dropShadowColor})`; 92 | }); 93 | }); 94 | 95 | // Show Panel When Scroll 96 | function reveal() { 97 | var reveals = document.querySelectorAll(".reveal"); 98 | 99 | for (var i = 0; i < reveals.length; i++) { 100 | var windowHeight = window.innerHeight; 101 | var elementTop = reveals[i].getBoundingClientRect().top; 102 | var elementVisible = 150; 103 | 104 | if (elementTop < windowHeight - elementVisible) { 105 | reveals[i].classList.add("active"); 106 | } else { 107 | reveals[i].classList.remove("active"); 108 | } 109 | } 110 | } 111 | }); 112 | 113 | // When the user clicks on the button, scroll to the top of the document 114 | function topFunction() { 115 | document.body.scrollTop = 0; // For Safari 116 | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera 117 | } -------------------------------------------------------------------------------- /assets/css/app.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html { 6 | scroll-behavior: smooth; 7 | } 8 | 9 | body { 10 | overflow-x: hidden; 11 | width: 100%; 12 | } 13 | 14 | @media only screen and (max-width: 768px) { 15 | .main-body { 16 | background-image: url(../images/mobile_background.jpg); 17 | } 18 | .left-character { 19 | position: absolute; 20 | top: 85px; 21 | left: -14%; 22 | width: 100%; 23 | } 24 | 25 | .right-character { 26 | position: absolute; 27 | top: 140px; 28 | right: -40px; 29 | width: 100%; 30 | } 31 | } 32 | 33 | @media only screen and (min-width: 768px) { 34 | .main-body { 35 | background-image: url(../images/desktop_background.jpg); 36 | } 37 | .left-character { 38 | position: absolute; 39 | top: 96px; 40 | left: 11%; 41 | width: 45%; 42 | } 43 | 44 | .right-character { 45 | position: absolute; 46 | top: 175px; 47 | right: 0px; 48 | width: 45%; 49 | } 50 | } 51 | 52 | #scrollTopBtn { 53 | display: none; 54 | position: fixed; 55 | bottom: 20px; 56 | right: 20px; 57 | z-index: 99; 58 | border: none; 59 | outline: none; 60 | background-color: red; 61 | color: white; 62 | cursor: pointer; 63 | padding: 10px; 64 | border-radius: 10px; 65 | font-size: 16px; 66 | } 67 | 68 | .header-menu { 69 | display: flex; 70 | flex-direction: row; 71 | align-items: center; 72 | justify-content: space-between; 73 | } 74 | 75 | .header-menu-item { 76 | display: flex; 77 | padding-top: 0.5rem; 78 | padding-bottom: 0.5rem; 79 | color: #ffffff; 80 | align-items: center; 81 | cursor: pointer; 82 | } 83 | 84 | .header-menu-item.active { 85 | color: #bf7bff; 86 | border-radius: 9999px; 87 | border-width: 1px; 88 | border-color: #bf7bff; 89 | } 90 | 91 | .header-menu-item:hover { 92 | color: #bf7bff; 93 | border-radius: 9999px; 94 | /* border-width: 1px; */ 95 | border-color: #bf7bff; 96 | } 97 | 98 | .header-menu-item p { 99 | text-align: center; 100 | } 101 | 102 | .left-popup-menu { 103 | display: flex; 104 | position: fixed; 105 | left: 0; 106 | flex-direction: row; 107 | top: 29%; 108 | gap: 15px; 109 | z-index: 20; 110 | } 111 | 112 | .left-popup-menu-items-panel { 113 | display: flex; 114 | padding-top: 2rem; 115 | padding-bottom: 2rem; 116 | padding-left: 15px; 117 | padding-right: 15px; 118 | flex-direction: column; 119 | border-top-right-radius: 0.5rem; 120 | border-bottom-right-radius: 0.5rem; 121 | background-color: rgb(255 255 255 / 0.2); 122 | gap: 2rem; 123 | } 124 | 125 | .left-popup-menu-items-panel:hover { 126 | background-color: rgb(255 255 255 / 0.4); 127 | } 128 | 129 | .left-popup-menu-item { 130 | width: 49px; 131 | cursor: pointer; 132 | transition-duration: 200ms; 133 | } 134 | 135 | .left-popup-menu-item:hover { 136 | --tw-scale-x: 1.1; 137 | --tw-scale-y: 1.1; 138 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 139 | } 140 | 141 | .left-popup-menu-title { 142 | display: flex; 143 | justify-content: center; 144 | align-items: center; 145 | } 146 | 147 | .main-button { 148 | position: relative; 149 | } 150 | 151 | .main-button .hover-image { 152 | display: none; 153 | position: absolute; 154 | top: 0; 155 | left: 0; 156 | z-index: 5; 157 | } 158 | 159 | .main-button:hover .hover-image { 160 | display: inline; 161 | } 162 | 163 | .main-button:active .hover-image { 164 | display: none; 165 | } 166 | 167 | .gameplay-items-panel { 168 | align-content: center; 169 | } 170 | 171 | .gameplay-item { 172 | display: flex; 173 | flex-direction: column; 174 | justify-content: start; 175 | align-items: center; 176 | padding: 20px; 177 | border-radius: 1rem; 178 | border-width: 1px; 179 | border-color: #ed6d04; 180 | color: white; 181 | --tw-backdrop-brightness: brightness(.5); 182 | backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); 183 | background-color: rgb(255 255 255 / 0.05); 184 | cursor: pointer; 185 | } 186 | 187 | .gameplay-item:hover { 188 | border-color: #83b8bb; 189 | } 190 | 191 | .gameplay-item .title { 192 | font-size: 24px; 193 | } 194 | 195 | .gameplay-item .description { 196 | text-align: center; 197 | } 198 | 199 | .sub-title-section { 200 | position: relative; 201 | display: flex; 202 | justify-content: center; 203 | align-items: center; 204 | } 205 | 206 | .sub-title-section .title { 207 | display: flex; 208 | position: absolute; 209 | width: 100%; 210 | top: 43%; 211 | left: 0; 212 | justify-content: center; 213 | align-items: center; 214 | color: white; 215 | font-weight: bold; 216 | text-transform: uppercase; 217 | } 218 | 219 | .option-title { 220 | color: #f0d498; 221 | font-weight: 900; 222 | text-transform: uppercase; 223 | letter-spacing: 1px; 224 | } 225 | 226 | .bar-section { 227 | display: flex; 228 | flex-direction: row; 229 | justify-content: center; 230 | align-items: center; 231 | width: 100%; 232 | height: 30vw; 233 | background-image: url('../images/analysis/background.jpg'); 234 | background-repeat: no-repeat; 235 | background-size: cover; 236 | } 237 | 238 | .analysis-items-panel { 239 | display: flex; 240 | flex-direction: column; 241 | } 242 | 243 | .analysis-item { 244 | display: flex; 245 | flex-direction: row; 246 | gap: 16px; 247 | padding-left: 16%; 248 | } 249 | 250 | .analysis-item .img { 251 | display: flex; 252 | flex-direction: row; 253 | justify-content: center; 254 | align-items: center; 255 | } 256 | 257 | .analysis-item .part { 258 | display: flex; 259 | flex-direction: column; 260 | justify-content: center; 261 | gap: 1px; 262 | color: white; 263 | text-transform: uppercase; 264 | } 265 | 266 | .contact-item { 267 | display: flex; 268 | flex-direction: column; 269 | border: solid 2px; 270 | transition-duration: 300ms; 271 | cursor: pointer; 272 | } 273 | 274 | .contact-item:hover { 275 | --tw-scale-x: 1.02; 276 | --tw-scale-y: 1.02; 277 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 278 | } 279 | 280 | .contact-item .header { 281 | position: relative; 282 | border-bottom: solid 2px; 283 | color: white; 284 | background-size: cover; 285 | } 286 | 287 | .contact-item .header .icon { 288 | position: absolute; 289 | } 290 | 291 | .contact-item .body { 292 | height: 100%; 293 | color: white; 294 | background-color: black; 295 | } 296 | 297 | .contact-item .body .action-button { 298 | display: flex; 299 | flex-direction: row; 300 | justify-content: center; 301 | align-items: center; 302 | border: solid 2px white; 303 | border-radius: 50px; 304 | padding-left: 40px; 305 | padding-right: 40px; 306 | padding-top: 4px; 307 | padding-bottom: 4px; 308 | font-weight: bold; 309 | cursor: pointer; 310 | z-index: 5; 311 | } 312 | 313 | .contact-item .body .action-button:hover { 314 | --tw-scale-x: 1.1; 315 | --tw-scale-y: 1.1; 316 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 317 | } 318 | 319 | .reveal { 320 | position: relative; 321 | opacity: 0; 322 | } 323 | 324 | .reveal.active { 325 | opacity: 1; 326 | } 327 | 328 | .active.fade-bottom { 329 | animation: fade-bottom 1s ease-in; 330 | } 331 | 332 | .active.fade-left { 333 | animation: fade-left 1s ease-in; 334 | } 335 | 336 | .active.fade-right { 337 | animation: fade-right 1s ease-in; 338 | } 339 | 340 | @keyframes fade-bottom { 341 | 0% { 342 | transform: translateY(50px); 343 | opacity: 0; 344 | } 345 | 346 | 100% { 347 | transform: translateY(0); 348 | opacity: 1; 349 | } 350 | } 351 | 352 | @keyframes fade-left { 353 | 0% { 354 | transform: translateX(-100px); 355 | opacity: 0; 356 | } 357 | 358 | 100% { 359 | transform: translateX(0); 360 | opacity: 1; 361 | } 362 | } 363 | 364 | @keyframes fade-right { 365 | 0% { 366 | transform: translateX(100px); 367 | opacity: 0; 368 | } 369 | 370 | 100% { 371 | transform: translateX(0); 372 | opacity: 1; 373 | } 374 | } 375 | 376 | @media only screen and (max-width: 640px) { 377 | .first-character { 378 | width: 35%; 379 | } 380 | .second-character { 381 | width: 60%; 382 | } 383 | .third-character { 384 | width: 35%; 385 | } 386 | } 387 | 388 | @media only screen and (min-width: 640px) { 389 | .first-character { 390 | width: 20%; 391 | } 392 | .second-character { 393 | width: 35%; 394 | } 395 | .third-character { 396 | width: 20%; 397 | } 398 | } 399 | 400 | @media only screen and (min-width: 768px) { 401 | .first-character { 402 | width: 50%; 403 | } 404 | .second-character { 405 | width: 70%; 406 | } 407 | .third-character { 408 | width: 45%; 409 | } 410 | } 411 | 412 | @media only screen and (min-width: 1200px) { 413 | .first-character { 414 | width: 50%; 415 | } 416 | .second-character { 417 | width: 70%; 418 | } 419 | .third-character { 420 | width: 45%; 421 | } 422 | } 423 | 424 | @media only screen and (min-width: 1600px) { 425 | .first-character { 426 | width: 36%; 427 | } 428 | .second-character { 429 | width: 51%; 430 | } 431 | .third-character { 432 | width: 33%; 433 | } 434 | } 435 | 436 | @media only screen and (min-width: 2000px) { 437 | .first-character { 438 | width: 33%; 439 | } 440 | .second-character { 441 | width: 48%; 442 | } 443 | .third-character { 444 | width: 30%; 445 | } 446 | } 447 | 448 | @media only screen and (min-width: 2400px) { 449 | .first-character { 450 | width: 30%; 451 | } 452 | .second-character { 453 | width: 45%; 454 | } 455 | .third-character { 456 | width: 27%; 457 | } 458 | } 459 | 460 | @media only screen and (min-width: 3000px) { 461 | .first-character { 462 | width: 22%; 463 | } 464 | .second-character { 465 | width: 40%; 466 | } 467 | .third-character { 468 | width: 24%; 469 | } 470 | } 471 | 472 | @media only screen and (min-width: 3700px) { 473 | .first-character { 474 | width: 18%; 475 | } 476 | .second-character { 477 | width: 36%; 478 | } 479 | .third-character { 480 | width: 20%; 481 | } 482 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Chain Rivals 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 | 34 | 35 |
36 |
37 | 60 |
61 | 62 | 63 | 82 | 83 | 84 |
85 | 86 |
87 | 88 |
89 | 90 |
91 | 92 |
93 |
94 | 95 | 96 |
97 | 98 |
99 | 103 | 104 | 105 | 106 | 107 |
108 | 109 |
111 |
112 |
113 | 114 |
115 |

Core gameplay

116 |
117 |
118 |
119 |
120 |
121 | 122 |

Play to Earn

123 | 124 | In Chain Rivals, users can play a blockchain-powered game that allows them to earn the 125 | project's native token, $RIVALS. The game features various challenges and tournaments that 126 | reward players with $RIVALS for their achievements. As players progress through the game and 127 | build their skills, they can accumulate more $RIVALS, which they can then use to participate 128 | in the game's economy, such as buying in-game items or staking their tokens to earn 129 | additional rewards. Overall, Chain Rivals provides an engaging and rewarding gaming 130 | experience for players while also fostering a thriving ecosystem around the $RIVALS token. 131 | 132 |
133 |
134 | 135 |

Wager System

136 | 137 | In Chain Rivals, users can wager their $RIVALS tokens in multiplayer matches to earn even 138 | more tokens. The game's matchmaking system pairs users with similar skill levels, and 139 | players can place bets on the outcome of the match using $RIVALS. The winner of the match 140 | earns the pot, which includes the wagers of both players, in addition to a bonus payout in 141 | $RIVALS. This feature adds an extra layer of excitement to the gameplay and allows players 142 | to earn more tokens while competing against other users. It also helps to increase the 143 | overall demand and liquidity for the $RIVALS token. 144 | 145 |
146 |
147 | 148 |

NFT Utility

149 | 150 | Chain Rivals also features NFTs that seamlessly integrate into the game ecosystem. These 151 | NFTs represent unique digital assets that players can collect, trade, and use in the game. 152 | Each NFT has different attributes and characteristics that provide various benefits to the 153 | player, such as access to exclusive game modes, additional resources, or new abilities. By 154 | using NFTs, players can customize their gaming experience and access additional content that 155 | is not available to non-NFT holders. Additionally, the ownership and scarcity of these 156 | digital assets create a vibrant marketplace around them, allowing users to trade them and 157 | potentially earn even more $RIVALS. 158 | 159 |
160 |
161 |
162 | 163 |
165 |
166 |
167 | 168 |
169 |

Chain rivals road map

170 |
171 |
172 |
173 |
174 |
175 |
177 | 178 |
179 |
180 |
182 |

Phase 1: Initial Development (Q1 2023 - Q2 2023)

183 |
184 |
185 |
186 |

-

187 |

188 | In the initial phase, the focus will be on developing the core 189 | gameplay mechanics and infrastructure for Chain Rivals. 190 |

191 |
192 |
193 |

-

194 |

195 | The team will work on 196 | building the game engine, designing the user interface, and implementing the 197 | blockchain infrastructure for $RIVALS. 198 |

199 |
200 |
201 |

-

202 |

203 | The team will also begin creating the 204 | first set of NFTs that will be integrated into the game. 205 |

206 |
207 |
208 |
209 |
210 |
212 |
213 | 214 |
215 |
216 |
218 |

Phase 2: Alpha Testing and Balancing (Q3 2023 - Q4 219 | 2023)

220 |
221 |
222 |
223 |

-

224 |

225 | In the second phase, the game will move into alpha testing to gather feedback 226 | from a small group of users. 227 |

228 |
229 |
230 |

-

231 |

232 | The team will use the feedback to fine-tune the 233 | game mechanics, balance the economy, and optimize the user experience. 234 |

235 |
236 |
237 |

-

238 |

239 | The team 240 | will also work on building the multiplayer matchmaking system and integrating 241 | the wagering mechanics. 242 |

243 |
244 |
245 |
246 |
248 | 249 |
250 |
251 |
253 |
254 | 255 |
256 |
258 | 259 |
260 |
261 |
263 |

Phase 3: Public Beta and Marketing (Q1 2024 - Q2 264 | 2024)

265 |
266 |
267 |
268 |

-

269 |

270 | In the third phase, Chain Rivals will enter into a public beta, allowing a 271 | larger audience to play and test the game. 272 |

273 |
274 |
275 |

-

276 |

277 | The team will launch a marketing 278 | campaign to attract users to the platform and generate awareness for $RIVALS. 279 | 280 |

281 |
282 |
283 |

-

284 |

285 | The team will also continue to create and release new NFTs that will unlock new 286 | features and content for the game. 287 |

288 |
289 |
290 |
291 |
292 |
293 |
294 | 295 |
296 |
297 |
299 |

Phase 4: Full Launch and Ecosystem Expansion (Q3 300 | 2024 - Q4 2024)

301 |
302 |
303 |
304 |

-

305 |

306 | In the final phase, Chain Rivals will launch fully, with all gameplay mechanics 307 | and features in place. 308 |

309 |
310 |
311 |

-

312 |

313 | The team will continue to release new NFTs, events, and 314 | challenges to keep the community engaged and the game fresh. 315 |

316 |
317 |
318 |

-

319 |

320 | The team will also 321 | work on expanding the ecosystem around $RIVALS by integrating with other 322 | blockchain projects and gaming platforms, making it easier for users to acquire 323 | and use $RIVALS outside of Chain Rivals. 324 |

325 |
326 |
327 |
328 |
330 | 331 |
332 |
333 |
334 |
335 | 336 |
337 |
338 |
339 | 340 |
341 |

Tokenomics

342 |
343 |
344 |
345 |
346 | 349 | 352 |
353 |
354 |
355 | 356 |
357 |
358 |

360 | 75%

361 |

363 | uniswap liquidity pool

364 |
365 |
366 |
367 |
368 | 369 |
370 |
371 |

373 | 15%

374 |

376 | marketing & partnerships

377 |
378 |
379 |
380 |
381 | 382 |
383 |
384 |

386 | 10%

387 |

389 | cex listings

390 |
391 |
392 |
393 |
394 | 395 |
396 |
397 |

399 | 5%

400 |

402 | buy and sell tax

403 |
404 |
405 |
406 |
407 | 408 |
409 |
410 |

412 | 100%

413 |

415 | lp tokens locked

416 |
417 |
418 |
419 |
420 |
421 | 422 |
423 |
424 |
425 | 426 |
427 |

Team

428 |
429 |
430 |
431 |
432 |
433 |
435 |

Developer

436 | 438 |
439 |
440 |
441 |
442 | The developer plays a crucial role in the success of Chain Rivals. As the main 443 | creator and maintainer of the game, the developer is responsible for implementing 444 | new features, fixing bugs, and ensuring the game runs smoothly. Users can contact 445 | the developer with any issues, suggestions or feedback regarding development of the 446 | game and ecosystem 447 |
448 |
449 | 450 |
451 |
452 |
453 |
454 |
455 |
457 |

Operations

458 | 460 |
461 |
462 |
463 |
464 | The operations lead is a key member of the Chain Rivals team. As the person 465 | responsible for managing the day-to-day operations of the game, the operations lead 466 | oversees areas such as customer support, community management, and marketing. Users 467 | can contact the operations lead with any operational concerns or proposals 468 |
469 |
470 | 471 |
472 |
473 |
474 |
475 |
476 |
478 |

Project Manager

479 | 481 |
482 |
483 |
484 |
485 | The project manager is another essential member of the Chain Rivals team. They are 486 | responsible for overseeing the development and execution of the project plan, 487 | ensuring that deadlines are met, and coordinating the efforts of the development, 488 | operations, and marketing teams. Users can contact the project manager with any 489 | project-related concerns 490 |
491 |
492 | 493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 | 501 | 502 |
503 | 504 | 505 | 506 |
507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 |
520 |

Chain Rivals © 2023

521 |
522 |
523 | 524 | 558 | 559 | 560 | 561 | 562 | --------------------------------------------------------------------------------