{"id":574,"date":"2026-02-26T08:39:43","date_gmt":"2026-02-26T08:39:43","guid":{"rendered":"https:\/\/hithotprodcut.com\/?page_id=574"},"modified":"2026-02-26T10:05:00","modified_gmt":"2026-02-26T10:05:00","slug":"the-title","status":"publish","type":"page","link":"https:\/\/hithotprodcut.com\/index.php\/the-title\/","title":{"rendered":"the title"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n Nike | Neon Pulse + Slider + Product Banners<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n \/* ---------- YOUR EXISTING STYLES (PRESERVED) ---------- *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n overflow: auto;\r\n background: #0a0a0a;\r\n color: #222;\r\n position: relative;\r\n }\r\n\r\n .mesh-bg {\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n background: \r\n radial-gradient(circle at 20% 30%, #ff6a00 0%, transparent 40%),\r\n radial-gradient(circle at 80% 70%, #00c6ff 0%, transparent 40%),\r\n radial-gradient(circle at 40% 80%, #ff3c30 0%, transparent 40%),\r\n radial-gradient(circle at 60% 20%, #7700ff 0%, transparent 40%);\r\n filter: blur(80px);\r\n opacity: 0.7;\r\n animation: meshMove 18s ease infinite alternate;\r\n z-index: 0;\r\n }\r\n\r\n @keyframes meshMove {\r\n 0% { transform: scale(1) rotate(0deg); filter: blur(80px); }\r\n 100% { transform: scale(1.3) rotate(3deg); filter: blur(100px); }\r\n }\r\n\r\n #particle-canvas {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n .container {\r\n position: relative;\r\n z-index: 10;\r\n width:95%;\r\n min-height: 95vh;\r\n margin: 2.5vh auto;\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-radius: 40px;\r\n padding: 30px 40px;\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.2) inset;\r\n border: 1px solid rgba(255,255,255,0.2);\r\n transform-style: preserve-3d;\r\n transition: transform 0.2s;\r\n }\r\n\r\n nav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n .logo {\r\n font-size: 32px;\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #ff6a00, #ff3c30, #00c6ff);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-size: 200% 200%;\r\n animation: gradientFlow 6s infinite;\r\n letter-spacing: 2px;\r\n }\r\n\r\n @keyframes gradientFlow {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 30px;\r\n }\r\n\r\n .nav-links a {\r\n text-decoration: none;\r\n color: #fff;\r\n font-weight: 600;\r\n transition: 0.3s;\r\n text-shadow: 0 0 8px rgba(255,106,0,0.5);\r\n position: relative;\r\n padding: 5px 0;\r\n }\r\n\r\n .nav-links a::before {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, #ff6a00, #00c6ff);\r\n transition: width 0.3s ease;\r\n border-radius: 10px;\r\n box-shadow: 0 0 15px #ff6a00;\r\n }\r\n\r\n .nav-links a:hover::before {\r\n width: 100%;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: #ffaa00;\r\n text-shadow: 0 0 15px #ffaa00;\r\n }\r\n\r\n .cart {\r\n position: relative;\r\n font-size: 26px;\r\n cursor: pointer;\r\n color: #fff;\r\n transition: transform 0.3s;\r\n }\r\n\r\n .cart:hover {\r\n transform: scale(1.1);\r\n }\r\n\r\n .cart span {\r\n position: absolute;\r\n top: -8px;\r\n right: -12px;\r\n background: linear-gradient(45deg, #ff6a00, #ff3c30);\r\n color: #fff;\r\n font-size: 14px;\r\n font-weight: bold;\r\n padding: 4px 8px;\r\n border-radius: 50%;\r\n box-shadow: 0 0 15px #ff6a00;\r\n animation: cartPop 0.4s ease;\r\n }\r\n\r\n @keyframes cartPop {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.4); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n .hero {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n min-height: 85vh;\r\n position: relative;\r\n z-index: 15;\r\n }\r\n\r\n .text {\r\n max-width: 600px;\r\n animation: fadeUp 1.2s ease forwards;\r\n }\r\n\r\n .text h4 {\r\n font-weight: 400;\r\n color: rgba(255,255,255,0.8);\r\n font-size: 1.5rem;\r\n text-shadow: 0 0 10px #ff6a00;\r\n }\r\n\r\n .text h1 {\r\n font-size: 80px;\r\n font-weight: 800;\r\n margin: 10px 0 20px;\r\n line-height: 1.1;\r\n }\r\n\r\n .text h1 span {\r\n background: linear-gradient(45deg, #ff6a00, #ff3c30, #00c6ff);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-size: 300% 300%;\r\n animation: textGradient 5s infinite;\r\n }\r\n\r\n @keyframes textGradient {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .btn-wrapper {\r\n display: inline-block;\r\n position: relative;\r\n perspective: 400px;\r\n }\r\n\r\n .btn {\r\n padding: 18px 55px;\r\n border: none;\r\n border-radius: 60px;\r\n background: linear-gradient(45deg, #ff6a00, #ff3c30);\r\n color: #fff;\r\n font-weight: 700;\r\n font-size: 1.3rem;\r\n cursor: pointer;\r\n transition: transform 0.2s, box-shadow 0.3s;\r\n box-shadow: 0 10px 25px rgba(255,106,0,0.5);\r\n border: 1px solid rgba(255,255,255,0.3);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transition: left 0.5s;\r\n }\r\n\r\n .btn:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .btn:hover {\r\n box-shadow: 0 15px 35px #ff6a00, 0 0 20px #00c6ff;\r\n }\r\n\r\n \/* ---------- SLIDER STYLES ---------- *\/\r\n .shoe-box {\r\n position: relative;\r\n transform-style: preserve-3d;\r\n transition: transform 0.1s ease;\r\n width: 500px;\r\n }\r\n\r\n .slider-container {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n border-radius: 30px;\r\n box-shadow: 0 20px 30px rgba(0,0,0,0.5);\r\n transform: rotate(-15deg) translateZ(20px);\r\n transition: transform 0.3s;\r\n animation: floatShoe 4s infinite alternate;\r\n }\r\n\r\n @keyframes floatShoe {\r\n 0% { transform: rotate(-15deg) translateY(0px) translateZ(20px); }\r\n 100% { transform: rotate(-12deg) translateY(-15px) translateZ(30px); }\r\n }\r\n\r\n .slider-container:hover {\r\n transform: rotate(-8deg) scale(1.05) translateZ(40px);\r\n }\r\n\r\n .slider {\r\n display: flex;\r\n transition: transform 0.5s ease-in-out;\r\n }\r\n\r\n .slider img {\r\n width: 100%;\r\n height: 500px;\r\n flex-shrink: 0;\r\n object-fit: contain;\r\n background: transparent;\r\n display: block;\r\n }\r\n\r\n .slider-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 40px;\r\n height: 40px;\r\n background: rgba(255,255,255,0.25);\r\n backdrop-filter: blur(8px);\r\n border: 1px solid rgba(255,255,255,0.3);\r\n border-radius: 50%;\r\n color: white;\r\n font-size: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 25;\r\n transition: all 0.3s;\r\n box-shadow: 0 0 15px rgba(255,106,0,0.5);\r\n }\r\n\r\n .slider-btn:hover {\r\n background: #ff6a00;\r\n border-color: #ff6a00;\r\n transform: translateY(-50%) scale(1.1);\r\n box-shadow: 0 0 25px #ff6a00;\r\n }\r\n\r\n .slider-btn.prev {\r\n left: 10px;\r\n }\r\n\r\n .slider-btn.next {\r\n right: 10px;\r\n }\r\n\r\n .price {\r\n position: absolute;\r\n left: -50px;\r\n top: 180px;\r\n background: rgba(255,255,255,0.15);\r\n backdrop-filter: blur(10px);\r\n color: #fff;\r\n padding: 25px 20px;\r\n border-radius: 50%;\r\n font-size: 28px;\r\n font-weight: 800;\r\n border: 2px solid rgba(255,255,255,0.3);\r\n box-shadow: 0 0 30px #ff6a00, 0 0 60px #ff3c30;\r\n animation: priceFloat 2.5s infinite, rotateSlow 10s infinite linear;\r\n width: 130px;\r\n height: 130px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-shadow: 0 0 10px #000;\r\n z-index: 30;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes priceFloat {\r\n 0% { transform: translateY(0) rotate(0deg); box-shadow: 0 0 30px #ff6a00; }\r\n 50% { transform: translateY(-15px) rotate(2deg); box-shadow: 0 0 60px #00c6ff; }\r\n 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 0 30px #ff6a00; }\r\n }\r\n\r\n @keyframes rotateSlow {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(40px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* ---------- PRODUCT BANNERS SECTION ---------- *\/\r\n .product-banners {\r\n margin-top: 60px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 50px;\r\n position: relative;\r\n z-index: 20;\r\n }\r\n\r\n .banner-row {\r\n background: rgba(0, 0, 0, 0.2);\r\n backdrop-filter: blur(10px);\r\n border-radius: 40px;\r\n padding: 30px;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n box-shadow: 0 15px 35px rgba(0,0,0,0.5);\r\n }\r\n\r\n .banner-row h3 {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n margin-bottom: 25px;\r\n color: #fff;\r\n text-shadow: 0 0 15px #ff6a00;\r\n border-left: 6px solid #ff6a00;\r\n padding-left: 20px;\r\n }\r\n\r\n .product-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 25px;\r\n }\r\n\r\n .product-card {\r\n background: rgba(20, 20, 30, 0.6);\r\n backdrop-filter: blur(5px);\r\n border-radius: 25px;\r\n padding: 20px 15px;\r\n text-align: center;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n transition: transform 0.3s, box-shadow 0.3s;\r\n cursor: pointer;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.3);\r\n }\r\n\r\n .product-card:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 20px 30px #ff6a0040, 0 0 20px #00c6ff80;\r\n border-color: #ff6a00;\r\n }\r\n\r\n .product-card img {\r\n width: 100%;\r\n height: 150px;\r\n object-fit: contain;\r\n filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5));\r\n margin-bottom: 15px;\r\n transition: transform 0.3s;\r\n }\r\n\r\n .product-card:hover img {\r\n transform: scale(1.1);\r\n }\r\n\r\n .product-card h4 {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: #fff;\r\n margin-bottom: 8px;\r\n text-shadow: 0 0 8px #ff6a00;\r\n }\r\n\r\n .product-card .product-price {\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n background: linear-gradient(45deg, #ff6a00, #ff3c30);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n display: inline-block;\r\n padding: 5px 15px;\r\n border-radius: 30px;\r\n background-color: rgba(0,0,0,0.3);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n \/* ---------- NEW BIG BANNER ---------- *\/\r\n .big-banner {\r\n margin: 50px 0;\r\n border-radius: 40px;\r\n overflow: hidden;\r\n position: relative;\r\n height: 350px;\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1556906781-9a4129610c2c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80');\r\n background-size: cover;\r\n background-position: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.6);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n .big-banner::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, rgba(255,106,0,0.7), rgba(0,198,255,0.7));\r\n mix-blend-mode: overlay;\r\n }\r\n\r\n .banner-content {\r\n position: relative;\r\n z-index: 2;\r\n color: #fff;\r\n text-shadow: 0 0 20px #000;\r\n }\r\n\r\n .banner-content h2 {\r\n font-size: 3.5rem;\r\n font-weight: 800;\r\n margin-bottom: 15px;\r\n animation: fadeInUp 1.2s;\r\n }\r\n\r\n .banner-content p {\r\n font-size: 1.5rem;\r\n margin-bottom: 25px;\r\n opacity: 0.9;\r\n }\r\n\r\n .banner-content .btn-banner {\r\n padding: 15px 45px;\r\n background: #fff;\r\n border: none;\r\n border-radius: 50px;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: #ff6a00;\r\n cursor: pointer;\r\n transition: 0.3s;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.3);\r\n }\r\n\r\n .banner-content .btn-banner:hover {\r\n transform: scale(1.1);\r\n background: #ff6a00;\r\n color: #fff;\r\n box-shadow: 0 0 30px #ff6a00;\r\n }\r\n\r\n \/* ---------- FOOTER ---------- *\/\r\n .footer {\r\n margin-top: 80px;\r\n background: rgba(0,0,0,0.4);\r\n backdrop-filter: blur(10px);\r\n border-radius: 40px 40px 0 0;\r\n padding: 50px 40px 30px;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n border-bottom: none;\r\n color: #fff;\r\n }\r\n\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 40px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .footer-col h4 {\r\n font-size: 1.3rem;\r\n margin-bottom: 20px;\r\n color: #ff6a00;\r\n text-shadow: 0 0 10px #ff6a00;\r\n }\r\n\r\n .footer-col ul {\r\n list-style: none;\r\n }\r\n\r\n .footer-col ul li {\r\n margin-bottom: 12px;\r\n }\r\n\r\n .footer-col ul li a {\r\n color: #ddd;\r\n text-decoration: none;\r\n transition: 0.3s;\r\n }\r\n\r\n .footer-col ul li a:hover {\r\n color: #ff6a00;\r\n padding-left: 8px;\r\n }\r\n\r\n .social-icons {\r\n display: flex;\r\n gap: 20px;\r\n font-size: 1.8rem;\r\n }\r\n\r\n .social-icons a {\r\n color: #fff;\r\n transition: 0.3s;\r\n }\r\n\r\n .social-icons a:hover {\r\n color: #ff6a00;\r\n transform: translateY(-5px);\r\n }\r\n\r\n .copyright {\r\n text-align: center;\r\n padding-top: 30px;\r\n border-top: 1px solid rgba(255,255,255,0.1);\r\n color: #aaa;\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1000px) {\r\n .product-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n .hero {\r\n flex-direction: column;\r\n text-align: center;\r\n min-height: auto;\r\n }\r\n .shoe-box {\r\n width: 400px;\r\n margin-top: 30px;\r\n }\r\n .price {\r\n left: 50%;\r\n transform: translateX(-50%);\r\n top: 100px;\r\n }\r\n .text h1 {\r\n font-size: 60px;\r\n }\r\n .big-banner {\r\n height: 300px;\r\n }\r\n .banner-content h2 {\r\n font-size: 2.5rem;\r\n }\r\n .footer-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .product-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .text h1 {\r\n font-size: 45px;\r\n }\r\n .nav-links {\r\n gap: 15px;\r\n }\r\n .big-banner {\r\n height: 250px;\r\n }\r\n .banner-content h2 {\r\n font-size: 1.8rem;\r\n }\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n }\r\n\r\n \/* Scrollbar styling *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: rgba(0,0,0,0.3);\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: linear-gradient(#ff6a00, #ff3c30);\r\n border-radius: 10px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Background layers -->\r\n <div class=\"mesh-bg\"><\/div>\r\n <canvas id=\"particle-canvas\"><\/canvas>\r\n\r\n <div class=\"container\" id=\"container\">\r\n <nav>\r\n <div class=\"logo\">NIKE<\/div>\r\n <div class=\"nav-links\">\r\n <a href=\"#\">Home<\/a>\r\n <a href=\"#\">Men<\/a>\r\n <a href=\"#\">Women<\/a>\r\n <a href=\"#\">Kids<\/a>\r\n <a href=\"#\">Contact<\/a>\r\n <\/div>\r\n <div class=\"cart\" id=\"cartIcon\">\r\n \ud83d\uded2 <span id=\"cart\">0<\/span>\r\n <\/div>\r\n <\/nav>\r\n\r\n <div class=\"hero\">\r\n <div class=\"text\">\r\n <h4>Nike Shoe Store<\/h4>\r\n <h1>Shoe <span>Collection<\/span><\/h1>\r\n <div class=\"btn-wrapper\" id=\"btnWrapper\">\r\n <button class=\"btn\" id=\"buyBtn\">Buy Now<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT SIDE: THREE-IMAGE SLIDER -->\r\n <div class=\"shoe-box\" id=\"shoeBox\">\r\n <div class=\"price\">$200<\/div>\r\n <div class=\"slider-container\" id=\"sliderContainer\">\r\n <div class=\"slider\" id=\"slider\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_qhhdz0qhhdz0qhhd-removebg-preview-1.png\" alt=\"Nike Shoe 1\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_8ql7628ql7628ql7-removebg-preview.png\" alt=\"Nike Shoe 2\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_lcsrnrlcsrnrlcsr__1_-removebg-preview.png\" alt=\"Nike Shoe 3\">\r\n <\/div>\r\n <div class=\"slider-btn prev\" id=\"prevBtn\">\u276e<\/div>\r\n <div class=\"slider-btn next\" id=\"nextBtn\">\u276f<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EXISTING TWO PRODUCT BANNERS -->\r\n <div class=\"product-banners\">\r\n <!-- Banner 1 -->\r\n <div class=\"banner-row\">\r\n <h3>\ud83d\udd25 Featured Collection<\/h3>\r\n <div class=\"product-grid\">\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Screenshot_22-2-2026_82523_static.nike_.com-removebg-preview.png\" alt=\"Product 1\">\r\n <h4>Nike Air Max<\/h4>\r\n <div class=\"product-price\">$159<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_5njn105njn105njn-removebg-preview.png\" alt=\"Product 2\">\r\n <h4>Nike Zoom Fly<\/h4>\r\n <div class=\"product-price\">$179<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/download-removebg-preview.png\" alt=\"Product 3\">\r\n <h4>Nike Revolution<\/h4>\r\n <div class=\"product-price\">$129<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_qhhdz0qhhdz0qhhd-removebg-preview.png\" alt=\"Product 4\">\r\n <h4>Nike Pegasus<\/h4>\r\n <div class=\"product-price\">$199<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Banner 2 -->\r\n <div class=\"banner-row\">\r\n <h3>\u26a1 New Arrivals<\/h3>\r\n <div class=\"product-grid\">\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_5njn105njn105njn-removebg-preview.png\" alt=\"Product 5\">\r\n <h4>Nike Vaporfly<\/h4>\r\n <div class=\"product-price\">$229<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/download-removebg-preview.png\" alt=\"Product 6\">\r\n <h4>Nike Wildhorse<\/h4>\r\n <div class=\"product-price\">$149<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_qhhdz0qhhdz0qhhd-removebg-preview.png\" alt=\"Product 7\">\r\n <h4>Nike Downshifter<\/h4>\r\n <div class=\"product-price\">$119<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_5njn105njn105njn-removebg-preview.png\" alt=\"Product 8\">\r\n <h4>Nike Flex<\/h4>\r\n <div class=\"product-price\">$139<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- NEW: BIG BANNER ADVERTISEMENT -->\r\n <div class=\"big-banner\">\r\n <div class=\"banner-content\">\r\n <h2>JUST DO IT.<\/h2>\r\n <p>Limited edition Nike shoes \u2013 up to 40% off<\/p>\r\n <button class=\"btn-banner\">Shop Now<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- NEW: THIRD PRODUCT BANNER (4 products) -->\r\n <div class=\"banner-row\">\r\n <h3>\ud83c\udfc6 Best Sellers<\/h3>\r\n <div class=\"product-grid\">\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_qhhdz0qhhdz0qhhd-removebg-preview.png\" alt=\"Product 9\">\r\n <h4>Nike Air Force<\/h4>\r\n <div class=\"product-price\">$169<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_5njn105njn105njn-removebg-preview.png\" alt=\"Product 10\">\r\n <h4>Nike Blazer<\/h4>\r\n <div class=\"product-price\">$149<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/download-removebg-preview.png\" alt=\"Product 11\">\r\n <h4>Nike Court<\/h4>\r\n <div class=\"product-price\">$139<\/div>\r\n <\/div>\r\n <div class=\"product-card\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_qhhdz0qhhdz0qhhd-removebg-preview.png\" alt=\"Product 12\">\r\n <h4>Nike SB<\/h4>\r\n <div class=\"product-price\">$189<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- NEW: FOOTER SECTION -->\r\n <footer class=\"footer\">\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-col\">\r\n <h4>Shop<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Men<\/a><\/li>\r\n <li><a href=\"#\">Women<\/a><\/li>\r\n <li><a href=\"#\">Kids<\/a><\/li>\r\n <li><a href=\"#\">Sale<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Help<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Customer Service<\/a><\/li>\r\n <li><a href=\"#\">Returns<\/a><\/li>\r\n <li><a href=\"#\">Size Guide<\/a><\/li>\r\n <li><a href=\"#\">Contact Us<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>About<\/h4>\r\n <ul>\r\n <li><a href=\"#\">Our Story<\/a><\/li>\r\n <li><a href=\"#\">Careers<\/a><\/li>\r\n <li><a href=\"#\">Sustainability<\/a><\/li>\r\n <li><a href=\"#\">Press<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Follow Us<\/h4>\r\n <div class=\"social-icons\">\r\n <a href=\"#\"><i class=\"fab fa-facebook\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-youtube\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"copyright\">\r\n \u00a9 2026 Nike Store. All rights reserved. | Powered by Neon Pulse\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ ---------- YOUR EXISTING CART COUNTER ----------\r\n let count = 0;\r\n const cartSpan = document.getElementById('cart');\r\n const buyBtn = document.getElementById('buyBtn');\r\n\r\n function addCart() {\r\n count++;\r\n cartSpan.innerText = count;\r\n cartSpan.style.animation = 'none';\r\n cartSpan.offsetHeight;\r\n cartSpan.style.animation = 'cartPop 0.4s ease';\r\n }\r\n buyBtn.addEventListener('click', addCart);\r\n\r\n \/\/ ---------- YOUR EXISTING PARTICLE BACKGROUND ----------\r\n const canvas = document.getElementById('particle-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let width, height;\r\n let particles = [];\r\n\r\n function initParticles() {\r\n width = window.innerWidth;\r\n height = window.innerHeight;\r\n canvas.width = width;\r\n canvas.height = height;\r\n particles = [];\r\n for (let i = 0; i < 120; i++) {\r\n particles.push({\r\n x: Math.random() * width,\r\n y: Math.random() * height,\r\n radius: Math.random() * 3 + 1,\r\n speedX: (Math.random() - 0.5) * 0.3,\r\n speedY: (Math.random() - 0.5) * 0.3,\r\n color: `hsl(${Math.random() * 30 + 20}, 90%, 65%)`\r\n });\r\n }\r\n }\r\n\r\n function drawParticles() {\r\n ctx.clearRect(0, 0, width, height);\r\n particles.forEach(p => {\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color;\r\n ctx.shadowColor = p.color;\r\n ctx.shadowBlur = 15;\r\n ctx.fill();\r\n p.x += p.speedX;\r\n p.y += p.speedY;\r\n if (p.x < 0) p.x = width;\r\n if (p.x > width) p.x = 0;\r\n if (p.y < 0) p.y = height;\r\n if (p.y > height) p.y = 0;\r\n });\r\n requestAnimationFrame(drawParticles);\r\n }\r\n\r\n window.addEventListener('resize', () => {\r\n initParticles();\r\n });\r\n initParticles();\r\n drawParticles();\r\n\r\n \/\/ ---------- YOUR EXISTING 3D TILT ----------\r\n const shoeBox = document.getElementById('shoeBox');\r\n shoeBox.addEventListener('mousemove', (e) => {\r\n const rect = shoeBox.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n const centerX = rect.width \/ 2;\r\n const centerY = rect.height \/ 2;\r\n const rotateY = ((x - centerX) \/ centerX) * 15;\r\n const rotateX = ((centerY - y) \/ centerY) * 10;\r\n shoeBox.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n });\r\n shoeBox.addEventListener('mouseleave', () => {\r\n shoeBox.style.transform = '';\r\n });\r\n\r\n \/\/ ---------- YOUR EXISTING MAGNETIC BUTTON ----------\r\n const btnWrapper = document.getElementById('btnWrapper');\r\n const btn = document.getElementById('buyBtn');\r\n btnWrapper.addEventListener('mousemove', (e) => {\r\n const rect = btnWrapper.getBoundingClientRect();\r\n const x = e.clientX - rect.left - rect.width \/ 2;\r\n const y = e.clientY - rect.top - rect.height \/ 2;\r\n const distance = Math.sqrt(x*x + y*y);\r\n const maxDist = 150;\r\n if (distance < maxDist) {\r\n const strength = (1 - distance \/ maxDist) * 12;\r\n const moveX = (x \/ distance) * strength || 0;\r\n const moveY = (y \/ distance) * strength || 0;\r\n btn.style.transform = `translate(${moveX}px, ${moveY}px)`;\r\n } else {\r\n btn.style.transform = '';\r\n }\r\n });\r\n btnWrapper.addEventListener('mouseleave', () => {\r\n btn.style.transform = '';\r\n });\r\n\r\n \/\/ ---------- YOUR EXISTING PARALLAX ----------\r\n const container = document.getElementById('container');\r\n window.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth - 0.5) * 20;\r\n const y = (e.clientY \/ window.innerHeight - 0.5) * 20;\r\n container.style.transform = `translateX(${x}px) translateY(${y}px)`;\r\n });\r\n window.addEventListener('mouseleave', () => {\r\n container.style.transform = '';\r\n });\r\n\r\n \/\/ ---------- SLIDER FUNCTIONALITY ----------\r\n const slider = document.getElementById('slider');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const slides = document.querySelectorAll('.slider img');\r\n let currentIndex = 0;\r\n const totalSlides = slides.length;\r\n\r\n function updateSlider() {\r\n const offset = -currentIndex * 100;\r\n slider.style.transform = `translateX(${offset}%)`;\r\n }\r\n\r\n prevBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;\r\n updateSlider();\r\n });\r\n\r\n nextBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n currentIndex = (currentIndex + 1) % totalSlides;\r\n updateSlider();\r\n });\r\n\r\n let autoSlide = setInterval(() => {\r\n currentIndex = (currentIndex + 1) % totalSlides;\r\n updateSlider();\r\n }, 5000);\r\n\r\n const sliderContainer = document.getElementById('sliderContainer');\r\n sliderContainer.addEventListener('mouseenter', () => {\r\n clearInterval(autoSlide);\r\n });\r\n sliderContainer.addEventListener('mouseleave', () => {\r\n autoSlide = setInterval(() => {\r\n currentIndex = (currentIndex + 1) % totalSlides;\r\n updateSlider();\r\n }, 5000);\r\n });\r\n\r\n \/\/ ---------- DISABLE DEVTOOLS (optional) ----------\r\n document.addEventListener('contextmenu', e => e.preventDefault());\r\n document.onkeydown = function(e) {\r\n if (e.keyCode == 123) return false;\r\n if (e.ctrlKey && e.shiftKey && e.keyCode == 73) return false;\r\n };\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nike | Neon Pulse + Slider + Product Banners NIKE Home Men Women Kids Contact \ud83d\uded2 0 Nike Shoe Store […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-574","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/comments?post=574"}],"version-history":[{"count":34,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/574\/revisions"}],"predecessor-version":[{"id":610,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/574\/revisions\/610"}],"wp:attachment":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/media?parent=574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}