{"id":93,"date":"2026-10-23T16:10:50","date_gmt":"2026-10-23T16:10:50","guid":{"rendered":"https:\/\/kaziconsumerproductsltd.xyz\/?page_id=93"},"modified":"2026-10-24T05:24:54","modified_gmt":"2026-10-24T05:24:54","slug":"web-development","status":"publish","type":"page","link":"https:\/\/kaziconsumerproductsltd.xyz\/?page_id=93","title":{"rendered":"Web-development"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"93\" class=\"elementor elementor-93\">\n\t\t\t\t<div class=\"elementor-element elementor-element-908285b e-flex e-con-boxed e-con e-parent\" data-id=\"908285b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d9c59a elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-html\" data-id=\"4d9c59a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Tailwind CSS (CDN) -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<!-- Font Awesome Icons -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n<!-- Google Fonts -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n    .webdev-wrapper { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #0b0f19; color: #f3f4f6; min-height: 100vh; }\r\n    .webdev-wrapper .gradient-text {\r\n        background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n    }\r\n<\/style>\r\n\r\n<div class=\"webdev-wrapper selection:bg-indigo-500 selection:text-white flex flex-col justify-between\">\r\n\r\n    <!-- Header \/ Navbar Section -->\r\n    <header class=\"bg-[#0b0f19]\/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-800\/80\">\r\n        <div class=\"max-w-6xl mx-auto px-4 py-4 flex justify-between items-center\">\r\n            <!-- Brand Logo -->\r\n            <a href=\"#\" class=\"text-2xl font-extrabold tracking-tight text-white flex items-center gap-1\">\r\n                Rubaiyat<span class=\"text-indigo-500 text-3xl\">.<\/span>\r\n            <\/a>\r\n            \r\n            <!-- Desktop Navigation -->\r\n            <nav class=\"hidden md:flex space-x-8 text-sm font-medium text-gray-300\">\r\n                <a href=\"https:\/\/kaziconsumerproductsltd.xyz\/\" class=\"hover:text-indigo-400 transition-colors\">Home<\/a>\r\n                <a href=\"https:\/\/kaziconsumerproductsltd.xyz\/?page_id=63\" class=\"hover:text-indigo-400 transition-colors\">About<\/a>\r\n                <a href=\"https:\/\/kaziconsumerproductsltd.xyz\/?page_id=75\" class=\"hover:text-indigo-400 transition-colors\">Services<\/a>\r\n                <a href=\"https:\/\/kaziconsumerproductsltd.xyz\/?page_id=80\" class=\"text-indigo-400 font-semibold relative after:content-[''] after:absolute after:-bottom-5 after:left-0 after:w-full after:h-0.5 after:bg-indigo-500\">Portfolio<\/a>\r\n                <a href=\"https:\/\/kaziconsumerproductsltd.xyz\/?page_id=88\" class=\"hover:text-indigo-400 transition-colors\">Contact<\/a>\r\n            <\/nav>\r\n\r\n            <!-- Action Button & Mobile Menu Toggle -->\r\n            <div class=\"flex items-center gap-4\">\r\n                <a href=\"https:\/\/kaziconsumerproductsltd.xyz\/?page_id=80\" class=\"bg-gray-800\/80 hover:bg-gray-700 text-gray-300 hover:text-white px-4 py-2 rounded-xl transition text-xs flex items-center gap-2 border border-gray-700\/85\">\r\n                    <i class=\"fa-solid fa-arrow-left\"><\/i> Back to Portfolio\r\n                <\/a>\r\n                <button id=\"menu-btn\" class=\"md:hidden text-gray-400 hover:text-white focus:outline-none text-xl\">\r\n                    <i class=\"fa-solid fa-bars\"><\/i>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Mobile Dropdown Navigation -->\r\n        <div id=\"mobile-menu\" class=\"hidden md:hidden bg-[#0b0f19] border-b border-gray-800 px-4 pt-2 pb-4 space-y-3 text-sm\">\r\n            <a href=\"#\" class=\"block text-gray-300 hover:text-indigo-400\">Home<\/a>\r\n            <a href=\"#\" class=\"block text-gray-300 hover:text-indigo-400\">About<\/a>\r\n            <a href=\"#\" class=\"block text-gray-300 hover:text-indigo-400\">Services<\/a>\r\n            <a href=\"#\" class=\"block text-indigo-400 font-semibold\">Portfolio<\/a>\r\n            <a href=\"#\" class=\"block text-gray-300 hover:text-indigo-400\">Contact<\/a>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- Page Title Header -->\r\n    <section class=\"py-12 relative overflow-hidden bg-gray-900\/20 border-b border-gray-800\/80\">\r\n        <div class=\"max-w-6xl mx-auto px-4 text-center space-y-3\">\r\n            <span class=\"text-xs text-indigo-400 font-bold uppercase tracking-widest bg-indigo-500\/10 border border-indigo-500\/20 px-4 py-1.5 rounded-full inline-block\">\r\n                <i class=\"fa-solid fa-code mr-1\"><\/i> Web Showcase\r\n            <\/span>\r\n            <h1 class=\"text-3xl sm:text-5xl font-black text-white tracking-tight\">Web Development <span class=\"gradient-text\">Projects<\/span><\/h1>\r\n            <p class=\"text-gray-400 text-sm max-w-xl mx-auto leading-relaxed\">\r\n                Explore live websites, e-commerce layouts, and custom front-end projects built with modern web technologies.\r\n            <\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Main Content Container -->\r\n    <main class=\"max-w-6xl mx-auto px-4 py-12 w-full space-y-10\">\r\n\r\n        <!-- Projects Grid -->\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n\r\n            <!-- Website Project 1: Aura Wear Clothing -->\r\n            <div class=\"group bg-gray-900\/40 hover:bg-gray-900\/80 border border-gray-800 hover:border-indigo-500\/50 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-indigo-500\/10 flex flex-col justify-between\">\r\n                <div>\r\n                    <div class=\"relative overflow-hidden h-48 bg-gray-800\">\r\n                        <img decoding=\"async\" src=\"https:\/\/kaziconsumerproductsltd.xyz\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-22-155730-e1792819077402.png\" alt=\"Aura Wear Demo\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-[#0b0f19] via-transparent to-transparent opacity-60\"><\/div>\r\n                        <span class=\"absolute top-3 right-3 bg-indigo-600\/90 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md border border-indigo-400\/20\">\r\n                            E-Commerce\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"p-6 space-y-3\">\r\n                        <h3 class=\"text-xl font-bold text-white group-hover:text-indigo-400 transition-colors\">\r\n                            Aura Wear Clothing E-Commerce Store\r\n                        <\/h3>\r\n                        <p class=\"text-gray-400 text-xs leading-relaxed\">\r\n                            Premium fabrics, timeless designs, and unmatched comfort tailored for every occasion.\r\n                        <\/p>\r\n                        \r\n                        <div class=\"flex flex-wrap gap-2 pt-2\">\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">WordPress<\/span>\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">Laravel<\/span>\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">HTML<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"px-6 pb-6 pt-2 flex items-center justify-between border-t border-gray-800\/60 mt-4\">\r\n                    <a href=\"https:\/\/aurawear-demo01.netlify.app\/\" target=\"_blank\" class=\"text-xs font-semibold text-indigo-400 hover:text-indigo-300 flex items-center gap-1.5 transition-colors\">\r\n                        <i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"><\/i> Live Preview\r\n                    <\/a>\r\n                    <a href=\"https:\/\/github.com\" target=\"_blank\" class=\"text-xs text-gray-400 hover:text-white flex items-center gap-1.5 transition-colors\">\r\n                        <i class=\"fa-brands fa-github text-sm\"><\/i> Demo\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Website Project 2: Organic E-Commerce Store -->\r\n            <div class=\"group bg-gray-900\/40 hover:bg-gray-900\/80 border border-gray-800 hover:border-indigo-500\/50 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-indigo-500\/10 flex flex-col justify-between\">\r\n                <div>\r\n                    <div class=\"relative overflow-hidden h-48 bg-gray-800\">\r\n                        <img decoding=\"async\" src=\"https:\/\/kaziconsumerproductsltd.xyz\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-22-134117-e1792819203810.png\" alt=\"Organic E-Commerce Demo\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-[#0b0f19] via-transparent to-transparent opacity-60\"><\/div>\r\n                        <span class=\"absolute top-3 right-3 bg-indigo-600\/90 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md border border-indigo-400\/20\">\r\n                            E-Commerce\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"p-6 space-y-3\">\r\n                        <h3 class=\"text-xl font-bold text-white group-hover:text-indigo-400 transition-colors\">\r\n                            Organic E-Commerce Store\r\n                        <\/h3>\r\n                        <p class=\"text-gray-400 text-xs leading-relaxed\">\r\n                            Bringing 100% pure organic food straight from farmers to your doorstep. Power your healthy lifestyle with trusted nature-friendly nutrition.\r\n                        <\/p>\r\n                        \r\n                        <div class=\"flex flex-wrap gap-2 pt-2\">\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">WordPress<\/span>\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">PHP<\/span>\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">HTML<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"px-6 pb-6 pt-2 flex items-center justify-between border-t border-gray-800\/60 mt-4\">\r\n                    <a href=\"https:\/\/organic-demo01.netlify.app\/\" target=\"_blank\" class=\"text-xs font-semibold text-indigo-400 hover:text-indigo-300 flex items-center gap-1.5 transition-colors\">\r\n                        <i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"><\/i> Live Preview\r\n                    <\/a>\r\n                    <a href=\"https:\/\/github.com\" target=\"_blank\" class=\"text-xs text-gray-400 hover:text-white flex items-center gap-1.5 transition-colors\">\r\n                        <i class=\"fa-brands fa-github text-sm\"><\/i> Demo\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Website Project 3: ElectroPulse E-Commerce Store -->\r\n            <div class=\"group bg-gray-900\/40 hover:bg-gray-900\/80 border border-gray-800 hover:border-indigo-500\/50 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-indigo-500\/10 flex flex-col justify-between\">\r\n                <div>\r\n                    <div class=\"relative overflow-hidden h-48 bg-gray-800\">\r\n                        <img decoding=\"async\" src=\"https:\/\/kaziconsumerproductsltd.xyz\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-22-125756-e1792819357533.png\" alt=\"ElectroPulse Demo\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-[#0b0f19] via-transparent to-transparent opacity-60\"><\/div>\r\n                        <span class=\"absolute top-3 right-3 bg-indigo-600\/90 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md border border-indigo-400\/20\">\r\n                            E-Commerce\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"p-6 space-y-3\">\r\n                        <h3 class=\"text-xl font-bold text-white group-hover:text-indigo-400 transition-colors\">\r\n                            ElectroPulse E-Commerce Store\r\n                        <\/h3>\r\n                        <p class=\"text-gray-400 text-xs leading-relaxed\">\r\n                            Power your world with smart electronics, flagship gadgets, and future tech. Top brands, best deals, and guaranteed quality.\r\n                        <\/p>\r\n                        \r\n                        <div class=\"flex flex-wrap gap-2 pt-2\">\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">Tailwind CSS<\/span>\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">JavaScript<\/span>\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">HTML5<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"px-6 pb-6 pt-2 flex items-center justify-between border-t border-gray-800\/60 mt-4\">\r\n                    <a href=\"https:\/\/electropulse-demo01.netlify.app\/\" target=\"_blank\" class=\"text-xs font-semibold text-indigo-400 hover:text-indigo-300 flex items-center gap-1.5 transition-colors\">\r\n                        <i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"><\/i> Live Preview\r\n                    <\/a>\r\n                    <a href=\"https:\/\/github.com\" target=\"_blank\" class=\"text-xs text-gray-400 hover:text-white flex items-center gap-1.5 transition-colors\">\r\n                        <i class=\"fa-brands fa-github text-sm\"><\/i> Demo\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Website Project 4: AmarShop E-Commerce Store -->\r\n            <div class=\"group bg-gray-900\/40 hover:bg-gray-900\/80 border border-gray-800 hover:border-indigo-500\/50 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-indigo-500\/10 flex flex-col justify-between\">\r\n                <div>\r\n                    <div class=\"relative overflow-hidden h-48 bg-gray-800\">\r\n                        <img decoding=\"async\" src=\"https:\/\/kaziconsumerproductsltd.xyz\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-22-121445-e1792819399321.png\" alt=\"AmarShop Demo\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n                        <div class=\"absolute inset-0 bg-gradient-to-t from-[#0b0f19] via-transparent to-transparent opacity-60\"><\/div>\r\n                        <span class=\"absolute top-3 right-3 bg-indigo-600\/90 backdrop-blur-md text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md border border-indigo-400\/20\">\r\n                            E-Commerce\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"p-6 space-y-3\">\r\n                        <h3 class=\"text-xl font-bold text-white group-hover:text-indigo-400 transition-colors\">\r\n                            AmarShop E-Commerce Store\r\n                        <\/h3>\r\n                        <p class=\"text-gray-400 text-xs leading-relaxed\">\r\n                            Feature-rich online store interface featuring dynamic product filtering, cart drawer, and responsive layout.\r\n                        <\/p>\r\n                        \r\n                        <div class=\"flex flex-wrap gap-2 pt-2\">\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">WordPress<\/span>\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">JavaScript<\/span>\r\n                            <span class=\"text-[11px] bg-gray-800\/80 text-indigo-300 px-2.5 py-1 rounded-md border border-gray-700\/80 font-medium\">HTML<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"px-6 pb-6 pt-2 flex items-center justify-between border-t border-gray-800\/60 mt-4\">\r\n                    <a href=\"https:\/\/amarshop-demo01.netlify.app\/\" target=\"_blank\" class=\"text-xs font-semibold text-indigo-400 hover:text-indigo-300 flex items-center gap-1.5 transition-colors\">\r\n                        <i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"><\/i> Live Preview\r\n                    <\/a>\r\n                    <a href=\"https:\/\/github.com\" target=\"_blank\" class=\"text-xs text-gray-400 hover:text-white flex items-center gap-1.5 transition-colors\">\r\n                        <i class=\"fa-brands fa-github text-sm\"><\/i> Demo\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/main>\r\n\r\n    <!-- Footer -->\r\n    <footer class=\"py-8 border-t border-gray-800\/80 text-center text-gray-500 text-xs mt-auto bg-[#0b0f19]\">\r\n        <p>&copy; 2026 Rubaiyat. All rights reserved.<\/p>\r\n    <\/footer>\r\n\r\n<\/div>\r\n\r\n<!-- Mobile Menu Script -->\r\n<script>\r\n    const menuBtn = document.getElementById('menu-btn');\r\n    const mobileMenu = document.getElementById('mobile-menu');\r\n\r\n    menuBtn.addEventListener('click', () => {\r\n        mobileMenu.classList.toggle('hidden');\r\n    });\r\n<\/script>\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>Rubaiyat. Home About Services Portfolio Contact Back to Portfolio Home About Services Portfolio Contact Web Showcase Web Development Projects Explore live websites, e-commerce layouts, and custom front-end projects built with modern web technologies. E-Commerce Aura Wear Clothing E-Commerce Store Premium fabrics, timeless designs, and unmatched comfort tailored for every occasion. WordPress Laravel HTML Live Preview [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-93","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kaziconsumerproductsltd.xyz\/index.php?rest_route=\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kaziconsumerproductsltd.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kaziconsumerproductsltd.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kaziconsumerproductsltd.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kaziconsumerproductsltd.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=93"}],"version-history":[{"count":16,"href":"https:\/\/kaziconsumerproductsltd.xyz\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":253,"href":"https:\/\/kaziconsumerproductsltd.xyz\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions\/253"}],"wp:attachment":[{"href":"https:\/\/kaziconsumerproductsltd.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}