Spaces:
Running
Running
crie um site de doces com menu a esquerda que abre e feche fundo moderno coloque o carrinho contato etc transição
60e180e verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SugarSwipe Delights - Doces Artesanais</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .sidebar { | |
| transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| } | |
| .sidebar-closed { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar-open { | |
| transform: translateX(0); | |
| } | |
| .menu-item { | |
| transition: all 0.3s ease; | |
| } | |
| .menu-item:hover { | |
| transform: translateX(10px); | |
| } | |
| .candy-card { | |
| transition: all 0.3s ease; | |
| } | |
| .candy-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .bg-candy-gradient { | |
| background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 50%, #ec4899 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-pink-50"> | |
| <!-- Sidebar Navigation --> | |
| <div class="fixed inset-y-0 left-0 z-50 w-64 sidebar sidebar-closed bg-white shadow-xl"> | |
| <div class="flex flex-col h-full"> | |
| <!-- Logo --> | |
| <div class="p-6 bg-pink-600"> | |
| <h1 class="text-2xl font-bold text-white">SugarSwipe 🍭</h1> | |
| <p class="text-pink-100 text-sm">Delícias açucaradas</p> | |
| </div> | |
| <!-- Menu Items --> | |
| <nav class="flex-1 p-4 overflow-y-auto"> | |
| <ul class="space-y-3"> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg menu-item bg-pink-100 text-pink-700"> | |
| <i data-feather="home" class="mr-3"></i> | |
| <span>Início</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg menu-item hover:bg-pink-50 hover:text-pink-600"> | |
| <i data-feather="shopping-bag" class="mr-3"></i> | |
| <span>Nossos Doces</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg menu-item hover:bg-pink-50 hover:text-pink-600"> | |
| <i data-feather="star" class="mr-3"></i> | |
| <span>Especiais</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg menu-item hover:bg-pink-50 hover:text-pink-600"> | |
| <i data-feather="users" class="mr-3"></i> | |
| <span>Sobre Nós</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg menu-item hover:bg-pink-50 hover:text-pink-600"> | |
| <i data-feather="phone" class="mr-3"></i> | |
| <span>Contato</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <!-- Footer --> | |
| <div class="p-4 border-t border-pink-100"> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="text-pink-400 hover:text-pink-600"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-pink-400 hover:text-pink-600"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-pink-400 hover:text-pink-600"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="min-h-screen transition-all duration-300"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-40 bg-white/80 backdrop-blur-md shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <button id="menu-toggle" class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition relative"> | |
| <i data-feather="shopping-cart"></i> | |
| <span class="absolute -top-1 -right-1 bg-pink-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <a href="#" class="hidden md:inline-block px-4 py-2 bg-pink-600 text-white rounded-full hover:bg-pink-700 transition">Encomendar</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="bg-candy-gradient py-20 px-4"> | |
| <div class="container mx-auto text-center text-white"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">Doces que Derretem Corações</h1> | |
| <p class="text-xl md:text-2xl mb-8">Experimente nossas delícias artesanais feitas com amor</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="px-6 py-3 bg-white text-pink-600 rounded-full font-medium hover:bg-opacity-90 transition">Ver Cardápio</a> | |
| <a href="#" class="px-6 py-3 border-2 border-white text-white rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">Fazer Encomenda</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-white transform -skew-y-2 origin-top-left"></div> | |
| </section> | |
| <!-- Featured Candies --> | |
| <section class="py-16 px-4"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-pink-700">Nossas Delícias</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Candy 1 --> | |
| <div class="candy-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl"> | |
| <img src="http://static.photos/food/640x360/1" alt="Brigadeiro Gourmet" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-pink-700 mb-2">Brigadeiro Gourmet</h3> | |
| <p class="text-gray-600 mb-4">O tradicional brasileiro com um toque especial de qualidade.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-pink-600">R$ 2,50</span> | |
| <button class="px-4 py-2 bg-pink-100 text-pink-700 rounded-full hover:bg-pink-200 transition"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Candy 2 --> | |
| <div class="candy-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl"> | |
| <img src="http://static.photos/food/640x360/2" alt="Cupcake de Morango" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-pink-700 mb-2">Cupcake de Morango</h3> | |
| <p class="text-gray-600 mb-4">Massa fofinha com recheio cremoso e cobertura de morango.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-pink-600">R$ 8,90</span> | |
| <button class="px-4 py-2 bg-pink-100 text-pink-700 rounded-full hover:bg-pink-200 transition"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Candy 3 --> | |
| <div class="candy-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl"> | |
| <img src="http://static.photos/food/640x360/3" alt="Trufas Belgas" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-pink-700 mb-2">Trufas Belgas</h3> | |
| <p class="text-gray-600 mb-4">Feitas com chocolate belga de alta qualidade e diversos sabores.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-pink-600">R$ 6,50</span> | |
| <button class="px-4 py-2 bg-pink-100 text-pink-700 rounded-full hover:bg-pink-200 transition"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Special Offer --> | |
| <section class="py-16 px-4 bg-pink-100"> | |
| <div class="container mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6 text-pink-700">Promoção Especial</h2> | |
| <p class="text-xl mb-8 text-gray-700 max-w-2xl mx-auto">Adquira nossa caixa surpresa com 12 doces variados por apenas R$ 29,90. Um presentão para você ou para presentear!</p> | |
| <button class="px-8 py-4 bg-pink-600 text-white rounded-full font-bold text-lg hover:bg-pink-700 transition shadow-lg hover:shadow-xl"> | |
| Quero minha Caixa Surpresa | |
| </button> | |
| </div> | |
| </section> | |
| <!-- About Us --> | |
| <section class="py-16 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="http://static.photos/people/640x360/4" alt="Nossa Equipe" class="rounded-xl shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6 text-pink-700">Sobre Nós</h2> | |
| <p class="text-gray-600 mb-4">A SugarSwipe nasceu do amor por doces e da vontade de trazer felicidade através de sabores especiais.</p> | |
| <p class="text-gray-600 mb-6">Trabalhamos apenas com ingredientes de alta qualidade e muita paixão pelo que fazemos. Cada doce é preparado artesanalmente com cuidado e dedicação.</p> | |
| <div class="flex space-x-4"> | |
| <div class="flex items-center"> | |
| <div class="mr-3 p-2 bg-pink-100 rounded-full text-pink-600"> | |
| <i data-feather="check" class="w-4 h-4"></i> | |
| </div> | |
| <span class="text-gray-700">100% Natural</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="mr-3 p-2 bg-pink-100 rounded-full text-pink-600"> | |
| <i data-feather="check" class="w-4 h-4"></i> | |
| </div> | |
| <span class="text-gray-700">Sem Conservantes</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-pink-800 text-white py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">SugarSwipe 🍭</h3> | |
| <p class="text-pink-200">Doces artesanais feitos com amor para adoçar sua vida.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Links Rápidos</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-pink-200 hover:text-white transition">Início</a></li> | |
| <li><a href="#" class="text-pink-200 hover:text-white transition">Cardápio</a></li> | |
| <li><a href="#" class="text-pink-200 hover:text-white transition">Encomendas</a></li> | |
| <li><a href="#" class="text-pink-200 hover:text-white transition">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contato</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="mr-2 w-4 h-4"></i> | |
| <span class="text-pink-200">(11) 9999-9999</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="mr-2 w-4 h-4"></i> | |
| <span class="text-pink-200">contato@sugarswipe.com</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="map-pin" class="mr-2 w-4 h-4"></i> | |
| <span class="text-pink-200">São Paulo, SP</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Redes Sociais</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="p-2 bg-pink-700 rounded-full hover:bg-pink-600 transition"> | |
| <i data-feather="instagram" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-pink-700 rounded-full hover:bg-pink-600 transition"> | |
| <i data-feather="facebook" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-pink-700 rounded-full hover:bg-pink-600 transition"> | |
| <i data-feather="twitter" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-pink-700 mt-8 pt-8 text-center text-pink-300"> | |
| <p>© 2023 SugarSwipe Delights. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Toggle sidebar | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const sidebar = document.querySelector('.sidebar'); | |
| menuToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('sidebar-closed'); | |
| sidebar.classList.toggle('sidebar-open'); | |
| }); | |
| // Initialize feather icons | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Simple animation for menu items | |
| const menuItems = document.querySelectorAll('.menu-item'); | |
| menuItems.forEach((item, index) => { | |
| item.style.transitionDelay = `${index * 0.1}s`; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |