@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9V1s.ttf) format('truetype'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7V1s.ttf) format('truetype'); } * { color: white; margin: 0; padding: 0; font-family: "Poppins", sans-serif; transition: 0.25s; user-select: none; } body { overflow: hidden; } body > .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; background: linear-gradient(130.7deg, #000000 0.58%, rgba(0, 0, 0, 0) 65.77%); } .container { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); display: flex; gap: 10px; flex-flow: column; align-items: center; width: 650px; z-index: 5; } .container .title { display: flex; align-items: center; gap: 7.5px; font-size: 24px; } .container .title span { font-weight: bold; } .container .slider { position: relative; height: 550px; width: 650px; overflow-x: hidden; } .container .slider .controller { position: absolute; left: 50%; top: 250px; transform: translateX(-50%); z-index: 100; display: flex; flex-flow: column; align-items: center; } .container .slider .controller .arrows { display: flex; gap: 185px; } .container .slider .controller .arrows .arrow { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: linear-gradient(90deg, rgba(87, 87, 87, 0.8) 0%, rgba(6, 6, 6, 0) 100.49%); border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; } .container .slider .controller .arrows .arrow:hover { background: rgba(1, 209, 255, 0.23); border-color: #01d1ff; } .container .slider .controller .arrows .arrow ion-icon { font-size: 24px; } .container .slider .controller .button { margin-top: 185px; position: relative; padding-top: 7.5px; padding-bottom: 7.5px; padding-left: 25px; padding-right: 25px; background: linear-gradient(90deg, rgba(105, 105, 105, 0) 0.22%, rgba(217, 213, 213, 0.59) 98.97%); box-shadow: 0px 0px 35px 0.3px rgba(255, 255, 255, 0.28); border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.4); font-weight: bold; cursor: pointer; } .container .slider .controller .button:hover { padding-left: 35px; padding-right: 35px; background: rgba(1, 209, 255, 0.23); border-color: #01d1ff; } .container .slider .controller .button span { font-weight: 200; } .container .slider .controller .button .vector1 { position: absolute; width: 30px; height: 100%; left: 0; top: 0; } .container .slider .controller .button .vector2 { position: absolute; width: 30px; height: 100%; left: 15px; top: 0; } .container .slider .slider-inner { position: absolute; display: flex; align-items: center; gap: 10px; left: 0; top: 0; width: 650px; height: 100%; } .container .slider .slider-inner .package { position: relative; min-width: 200px; width: 200px; display: flex; flex-flow: column; align-items: center; height: 500px; box-sizing: border-box; border-radius: 2px; border: 1.5px solid rgba(255, 255, 255, 0.4); overflow: hidden; } .container .slider .slider-inner .package .wave { position: absolute; bottom: 0; right: -250px; width: 250px; height: 391px; background: rgba(1, 209, 255, 0.6); filter: blur(100px); backdrop-filter: blur(100px); opacity: 0; z-index: -1; } .container .slider .slider-inner .package .vector3, .container .slider .slider-inner .package .vector4 { position: absolute; opacity: 0; z-index: -1; } .container .slider .slider-inner .package .vector3 { bottom: 0; left: 0px; } .container .slider .slider-inner .package .vector4 { bottom: 0; left: -5px; } .container .slider .slider-inner .package .package-description, .container .slider .slider-inner .package .package-percentage { display: none; } .container .slider .slider-inner .package.active { width: 230px !important; min-width: 230px; height: 550px; } .container .slider .slider-inner .package.active .title { padding-bottom: 7.5px; padding-top: 7.5px; border-color: #01d1ff; background-color: rgba(1, 209, 255, 0.23); } .container .slider .slider-inner .package.active .vector3, .container .slider .slider-inner .package.active .vector4, .container .slider .slider-inner .package.active .wave { opacity: 1; } .container .slider .slider-inner .package.active .price { padding-bottom: 7.5px; padding-top: 7.5px; } .container .slider .slider-inner .package.active .title { margin-top: 70px; } .container .slider .slider-inner .package.active .bg { filter: blur(0) grayscale(1); } .container .slider .slider-inner .package .title { display: flex; justify-content: center; margin-top: 50px; width: 100%; background: rgba(24, 24, 24, 0.5); backdrop-filter: blur(2px); text-align: center; font-size: 16px; padding-top: 5px; padding-bottom: 5px; border-top: 1.5px solid rgba(255, 255, 255, 0.4); border-bottom: 1.5px solid rgba(255, 255, 255, 0.4); } .container .slider .slider-inner .package .price { display: flex; justify-content: center; margin-top: 300px; width: 100%; background: rgba(24, 24, 24, 0.5); backdrop-filter: blur(2px); text-align: center; font-size: 16px; padding-top: 5px; padding-bottom: 5px; border-top: 1.5px solid rgba(255, 255, 255, 0.4); border-bottom: 1.5px solid rgba(255, 255, 255, 0.4); } .container .slider .slider-inner .package .price span { margin-left: 10px; font-weight: bold; } .container .slider .slider-inner .package .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -2; filter: blur(2px) grayscale(1); } .container .footer { position: relative; box-sizing: border-box; padding: 10px; display: flex; flex-flow: column; align-items: center; border: 1.5px solid rgba(255, 255, 255, 0.4); background-color: rgba(0, 0, 0, 0.45); /* Note: backdrop-filter has minimal browser support */ border-radius: 10px; } .container .footer .top { width: 100%; position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; } .container .footer .top .left { position: absolute; left: 0px; background: linear-gradient(90deg, rgba(105, 105, 105, 0) 0.22%, rgba(217, 213, 213, 0.59) 98.97%); box-shadow: 0px 0px 35px 0.3px rgba(255, 255, 255, 0.28); border-radius: 4px; padding-left: 5px; padding-right: 5px; border: 1.5px solid rgba(255, 255, 255, 0.4); color: #c1c1c1; font-size: 14px; } .container .footer .top .left span { color: white; } .container .footer .top .title { position: relative; background: rgba(1, 209, 255, 0.23); padding-left: 15px; padding-right: 15px; border-top: 1.5px solid #01d1ff; border-bottom: 1.5px solid #01d1ff; } .container .footer .description { text-align: center; font-size: 14px; color: #c1c1c1; } .container .footer .description span { color: white; }