Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <!-- Place the following CSS in your <head> or stylesheet --> <style> /* This is an optional body style to provide a background for the page */ body { background-color: #f3f4f6; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; } /* Container for the list */ .wishlist-container { max-width: 768px; margin: 2rem auto; padding: 0 1rem; display: grid; gap: 1rem; } /* === Wishlist Card Styles === */ .wishlist-card { --wishlist-card-radius: 12px; --wishlist-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07); background-color: #ffffff; border-radius: var(--wishlist-card-radius); box-shadow: var(--wishlist-card-shadow); display: flex; padding: 1rem; gap: 1.5rem; transition: box-shadow 0.2s ease; } .wishlist-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } .wishlist-card-image { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; display: block; flex-shrink: 0; } .wishlist-card-details { flex-grow: 1; display: flex; flex-direction: column; } .wishlist-card-main-info { flex-grow: 1; } .wishlist-card-title { font-size: 1.1rem; font-weight: 600; margin: 0.25rem 0 0.5rem; } .wishlist-card-title-link { text-decoration: none; color: inherit; transition: color 0.2s ease; } .wishlist-card-title-link:hover { color: #4f46e5; } .wishlist-card-price { font-size: 1rem; font-weight: 500; color: #111827; } .wishlist-card-stock-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; margin-top: 0.75rem; } .wishlist-card-stock-status .dot { width: 8px; height: 8px; border-radius: 50%; } .wishlist-card-stock-status.in-stock .dot { background-color: #22c55e; } .wishlist-card-stock-status.in-stock { color: #16a34a; } .wishlist-card-stock-status.out-of-stock .dot { background-color: #ef4444; } .wishlist-card-stock-status.out-of-stock { color: #dc2626; } .wishlist-card-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } .wishlist-remove-btn { background: none; border: none; padding: 0.25rem; cursor: pointer; color: #9ca3af; } .wishlist-remove-btn:hover { color: #ef4444; } .wishlist-remove-btn svg { width: 24px; height: 24px; } .wishlist-move-to-cart-btn { background-color: #1f2937; color: #ffffff; font-size: 0.875rem; font-weight: 500; border: none; border-radius: 8px; padding: 0.6rem 1rem; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease; } .wishlist-move-to-cart-btn:hover { background-color: #374151; } .wishlist-move-to-cart-btn:disabled { background-color: #d1d5db; color: #6b7280; cursor: not-allowed; } /* Responsive adjustments */ @media (max-width: 500px) { .wishlist-card { flex-direction: column; } .wishlist-card-image { width: 100%; height: 180px; } .wishlist-card-actions { flex-direction: row-reverse; justify-content: space-between; margin-top: 1rem; } } </style> <!-- Place the following HTML in your <body> --> <div class="wishlist-container"> <!-- Item 1: In Stock --> <article class="wishlist-card"> <!-- Image by placehold.co. Replace with your own. --> <img src="https://placehold.co/240x240/a855f7/ffffff/png?text=Headphones" alt="Purple wireless headphones." class="wishlist-card-image"> <div class="wishlist-card-details"> <div class="wishlist-card-main-info"> <a href="#" class="wishlist-card-title-link"> <h3 class="wishlist-card-title">Aura Wireless Headphones</h3> </a> <p class="wishlist-card-price">$180.00</p> <div class="wishlist-card-stock-status in-stock"> <span class="dot"></span> In Stock </div> </div> </div> <div class="wishlist-card-actions"> <button class="wishlist-remove-btn" type="button" aria-label="Remove from wishlist"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.9h1.368c1.603 0 2.816 1.336 2.816 2.9zM12 3.25a.75.75 0 01.75.75v.008l.008.008.008.008.008.008.008.008.008.008h-.016a.75.75 0 01-.75-.75V3.25z" clip-rule="evenodd"/></svg> </button> <button class="wishlist-move-to-cart-btn" type="button">Move to Cart</button> </div> </article> <!-- Item 2: Out of Stock --> <article class="wishlist-card"> <!-- Image by placehold.co. Replace with your own. --> <img src="https://placehold.co/240x240/ec4899/ffffff/png?text=Smart+Ring" alt="A smart ring fitness tracker." class="wishlist-card-image"> <div class="wishlist-card-details"> <div class="wishlist-card-main-info"> <a href="#" class="wishlist-card-title-link"> <h3 class="wishlist-card-title">Oura Smart Ring Gen 4</h3> </a> <p class="wishlist-card-price">$349.00</p> <div class="wishlist-card-stock-status out-of-stock"> <span class="dot"></span> Out of Stock </div> </div> </div> <div class="wishlist-card-actions"> <button class="wishlist-remove-btn" type="button" aria-label="Remove from wishlist"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.9h1.368c1.603 0 2.816 1.336 2.816 2.9zM12 3.25a.75.75 0 01.75.75v.008l.008.008.008.008.008.008.008.008.008.008h-.016a.75.75 0 01-.75-.75V3.25z" clip-rule="evenodd"/></svg> </button> <button class="wishlist-move-to-cart-btn" type="button" disabled>Out of Stock</button> </div> </article> </div>