Skip to content

Instantly share code, notes, and snippets.

@NextGenCreatorduga

NextGenCreatorduga/gist:71f7d5641f0e86aae612a84c3e6d97bf

Created May 16, 2025 12:30
Show Gist options
  • Save NextGenCreatorduga/71f7d5641f0e86aae612a84c3e6d97bf to your computer and use it in GitHub Desktop.
Save NextGenCreatorduga/71f7d5641f0e86aae612a84c3e6d97bf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShopLink - Affiliate Shopping</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#0066cc',secondary:'#ff9900'},borderRadius:{'none':'0px','sm':'2px',DEFAULT:'4px','md':'8px','lg':'12px','xl':'16px','2xl':'20px','3xl':'24px','full':'9999px','button':'4px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Inter', sans-serif;
}
.search-input:focus {
outline: none;
}
.category-dropdown::-webkit-scrollbar {
width: 6px;
}
.category-dropdown::-webkit-scrollbar-thumb {
background-color: #d1d5db;
border-radius: 3px;
}
.custom-checkbox {
position: relative;
padding-left: 28px;
cursor: pointer;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border: 1px solid #d1d5db;
border-radius: 4px;
}
.custom-checkbox:hover input ~ .checkmark {
background-color: #f3f4f6;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #0066cc;
border-color: #0066cc;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.range-slider {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: #e5e7eb;
border-radius: 5px;
outline: none;
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #0066cc;
cursor: pointer;
}
.range-slider::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #0066cc;
cursor: pointer;
border: none;
}
.custom-switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e5e7eb;
transition: .4s;
border-radius: 20px;
}
.switch-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .switch-slider {
background-color: #0066cc;
}
input:checked + .switch-slider:before {
transform: translateX(20px);
}
.star-rating {
display: inline-flex;
font-size: 1rem;
color: #fbbf24;
}
.product-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.carousel-container {
position: relative;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-slide {
flex: 0 0 100%;
}
.carousel-dots {
display: flex;
justify-content: center;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
margin: 0 4px;
cursor: pointer;
}
.carousel-dot.active {
background-color: white;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="bg-[#131921] text-white">
<!-- Top Header -->
<div class="container mx-auto px-4 py-2 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="flex items-center">
<span class="font-['Pacifico'] text-2xl text-white">ShopLink</span>
</a>
<!-- Location -->
<div class="hidden md:flex items-center ml-4">
<div class="w-8 h-8 flex items-center justify-center">
<i class="ri-map-pin-line text-white"></i>
</div>
<div class="ml-1">
<div class="text-xs text-gray-300">Deliver to</div>
<div class="text-sm font-medium">New York 10001</div>
</div>
</div>
<!-- Search Bar -->
<div class="flex-1 max-w-3xl mx-4 relative">
<div class="flex">
<div class="relative">
<button id="categoryDropdownBtn" class="h-10 px-3 bg-gray-100 text-gray-700 border-r border-gray-300 rounded-l-button flex items-center text-sm whitespace-nowrap">
All Categories
<div class="w-4 h-4 ml-1 flex items-center justify-center">
<i class="ri-arrow-down-s-line text-gray-500"></i>
</div>
</button>
<div id="categoryDropdown" class="category-dropdown absolute left-0 top-full mt-1 w-48 bg-white shadow-lg rounded-md overflow-y-auto max-h-60 z-50 hidden">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">All Categories</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Electronics</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Computers</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Smart Home</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Arts & Crafts</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Automotive</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Baby</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Beauty & Personal Care</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Books</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Fashion</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Health & Household</a>
</div>
</div>
</div>
<input type="text" class="search-input h-10 px-4 py-2 w-full text-gray-700 border-0 focus:ring-0" placeholder="Search for products, brands and more...">
<button class="h-10 w-10 bg-secondary text-white rounded-r-button flex items-center justify-center !rounded-button">
<div class="w-5 h-5 flex items-center justify-center">
<i class="ri-search-line"></i>
</div>
</button>
</div>
<div id="searchSuggestions" class="absolute left-0 right-0 top-full mt-1 bg-white shadow-lg rounded-md z-50 hidden">
<div class="py-2">
<div class="px-4 py-1 text-xs font-medium text-gray-500">Popular Searches</div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<div class="flex items-center">
<div class="w-4 h-4 mr-2 flex items-center justify-center">
<i class="ri-history-line text-gray-400"></i>
</div>
wireless earbuds
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<div class="flex items-center">
<div class="w-4 h-4 mr-2 flex items-center justify-center">
<i class="ri-history-line text-gray-400"></i>
</div>
smartphone
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<div class="flex items-center">
<div class="w-4 h-4 mr-2 flex items-center justify-center">
<i class="ri-history-line text-gray-400"></i>
</div>
laptop deals
</div>
</a>
<div class="px-4 py-1 text-xs font-medium text-gray-500">Products</div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<div class="flex items-center">
<div class="w-4 h-4 mr-2 flex items-center justify-center">
<i class="ri-shopping-bag-line text-gray-400"></i>
</div>
Apple AirPods Pro
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<div class="flex items-center">
<div class="w-4 h-4 mr-2 flex items-center justify-center">
<i class="ri-shopping-bag-line text-gray-400"></i>
</div>
Samsung Galaxy S22
</div>
</a>
</div>
</div>
</div>
<!-- Right Navigation -->
<div class="flex items-center">
<!-- Account -->
<div class="relative group">
<button class="flex flex-col mr-4">
<span class="text-xs text-gray-300">Hello, Sign in</span>
<span class="text-sm font-medium flex items-center">
Account & Lists
<div class="w-4 h-4 ml-1 flex items-center justify-center">
<i class="ri-arrow-down-s-line"></i>
</div>
</span>
</button>
<div class="absolute right-0 top-full mt-1 w-60 bg-white shadow-lg rounded-md z-50 hidden group-hover:block">
<div class="p-3 border-b">
<button class="w-full bg-primary text-white py-1.5 px-4 rounded-button text-sm font-medium whitespace-nowrap">Sign In</button>
<div class="text-xs mt-2 text-center">
New customer? <a href="#" class="text-primary hover:underline">Start here</a>
</div>
</div>
<div class="py-2 grid grid-cols-2 gap-x-2">
<div>
<div class="px-3 py-1 text-sm font-bold">Your Account</div>
<a href="#" class="block px-3 py-1 text-xs text-gray-700 hover:text-primary">Account</a>
<a href="#" class="block px-3 py-1 text-xs text-gray-700 hover:text-primary">Orders</a>
<a href="#" class="block px-3 py-1 text-xs text-gray-700 hover:text-primary">Recommendations</a>
<a href="#" class="block px-3 py-1 text-xs text-gray-700 hover:text-primary">Browsing History</a>
</div>
<div>
<div class="px-3 py-1 text-sm font-bold">Your Lists</div>
<a href="#" class="block px-3 py-1 text-xs text-gray-700 hover:text-primary">Wishlist</a>
<a href="#" class="block px-3 py-1 text-xs text-gray-700 hover:text-primary">Saved Items</a>
<a href="#" class="block px-3 py-1 text-xs text-gray-700 hover:text-primary">Create a List</a>
</div>
</div>
</div>
</div>
<!-- Returns & Orders -->
<a href="#" class="hidden md:flex flex-col mr-4">
<span class="text-xs text-gray-300">Returns</span>
<span class="text-sm font-medium">& Orders</span>
</a>
<!-- Cart -->
<a href="#" class="flex items-center">
<div class="relative">
<div class="w-8 h-8 flex items-center justify-center">
<i class="ri-shopping-cart-line text-2xl"></i>
</div>
<span class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
</div>
<span class="hidden md:inline text-sm font-medium ml-1">Cart</span>
</a>
</div>
</div>
<!-- Bottom Header -->
<div class="bg-[#232f3e] py-1">
<div class="container mx-auto px-4">
<div class="flex items-center overflow-x-auto whitespace-nowrap py-1">
<button class="flex items-center text-white px-2 py-1 mr-4">
<div class="w-4 h-4 mr-1 flex items-center justify-center">
<i class="ri-menu-line"></i>
</div>
All
</button>
<a href="#" class="text-white text-sm px-2 py-1 mr-4 hover:text-secondary">Today's Deals</a>
<a href="#" class="text-white text-sm px-2 py-1 mr-4 hover:text-secondary">Customer Service</a>
<a href="#" class="text-white text-sm px-2 py-1 mr-4 hover:text-secondary">Electronics</a>
<a href="#" class="text-white text-sm px-2 py-1 mr-4 hover:text-secondary">Books</a>
<a href="#" class="text-white text-sm px-2 py-1 mr-4 hover:text-secondary">Fashion</a>
<a href="#" class="text-white text-sm px-2 py-1 mr-4 hover:text-secondary">Home & Kitchen</a>
<a href="#" class="text-white text-sm px-2 py-1 mr-4 hover:text-secondary">Computers</a>
<a href="#" class="text-white text-sm px-2 py-1 hover:text-secondary">New Releases</a>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main>
<!-- Hero Carousel -->
<div class="carousel-container w-full relative bg-white">
<div class="carousel-track" id="heroCarousel">
<div class="carousel-slide">
<div class="relative">
<img src="https://readdy.ai/api/search-image?query=modern%20e-commerce%20website%20hero%20banner%20with%20electronics%20gadgets%20and%20devices%20like%20smartphones%2C%20laptops%2C%20smartwatches%20displayed%20in%20a%20clean%2C%20minimalist%20layout%20with%20soft%20lighting%20and%20subtle%20shadows%2C%20professional%20product%20photography%20style&width=1280&height=400&seq=1&orientation=landscape" alt="Electronics Sale" class="w-full h-[400px] object-cover object-top">
<div class="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent flex items-center">
<div class="container mx-auto px-8 md:px-16">
<div class="max-w-lg">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Summer Tech Sale</h1>
<p class="text-lg text-white mb-6">Up to 40% off on the latest electronics and gadgets</p>
<button class="bg-secondary hover:bg-secondary/90 text-white px-6 py-3 rounded-button font-medium text-lg transition duration-200 whitespace-nowrap">Shop Now</button>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-slide">
<div class="relative">
<img src="https://readdy.ai/api/search-image?query=modern%20e-commerce%20website%20hero%20banner%20with%20fashion%20items%20like%20clothing%2C%20shoes%2C%20accessories%20arranged%20elegantly%20on%20a%20clean%20light%20background%20with%20soft%20shadows%2C%20professional%20fashion%20photography%20style&width=1280&height=400&seq=2&orientation=landscape" alt="Fashion Sale" class="w-full h-[400px] object-cover object-top">
<div class="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent flex items-center">
<div class="container mx-auto px-8 md:px-16">
<div class="max-w-lg">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Fashion Week</h1>
<p class="text-lg text-white mb-6">Discover the latest trends with up to 50% off</p>
<button class="bg-secondary hover:bg-secondary/90 text-white px-6 py-3 rounded-button font-medium text-lg transition dura
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment