Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dom Casmurro - D.</title> | |
| <meta name="description" content="Dom Casmurro de Machado de Assis - Um clássico da literatura brasileira"> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { font-family: 'Inter', sans-serif; } | |
| .gallery-image { cursor: pointer; transition: all 0.3s ease; } | |
| .gallery-image:hover { opacity: 0.8; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header (mesmo do index) --> | |
| <header class="bg-white shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between py-4"> | |
| <a href="index.html" class="text-2xl font-bold text-indigo-600">D.</a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="text-gray-700 hover:text-indigo-600">Início</a> | |
| <a href="ebooks.html" class="text-gray-700 hover:text-indigo-600">E-books</a> | |
| <a href="roupas.html" class="text-gray-700 hover:text-indigo-600">Roupas</a> | |
| <a href="acessorios.html" class="text-gray-700 hover:text-indigo-600">Acessórios</a> | |
| <a href="blog.html" class="text-gray-700 hover:text-indigo-600">Blog</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Pesquisar..." class="border rounded-full py-2 px-4 w-full md:w-64"> | |
| <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <a href="carrinho.html" class="relative"> | |
| <i data-feather="shopping-cart" class="text-gray-700"></i> | |
| <span class="absolute -top-2 -right-2 bg-indigo-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span> | |
| </a> | |
| <a href="minha-conta.html" class="hidden md:block"> | |
| <i data-feather="user" class="text-gray-700"></i> | |
| </a> | |
| <button class="md:hidden"> | |
| <i data-feather="menu" class="text-gray-700"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Breadcrumb --> | |
| <nav class="flex text-sm text-gray-500 mb-8"> | |
| <a href="index.html" class="hover:text-indigo-600">Início</a> | |
| <span class="mx-2">/</span> | |
| <a href="ebooks.html" class="hover:text-indigo-600">E-books</a> | |
| <span class="mx-2">/</span> | |
| <a href="ebooks.html?genre=ficcao" class="hover:text-indigo-600">Ficção</a> | |
| <span class="mx-2">/</span> | |
| <span class="text-gray-700">Dom Casmurro</span> | |
| </nav> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Galeria de imagens --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <img src="http://static.photos/education/640x360/11" alt="Dom Casmurro" class="w-full h-96 object-contain mb-4" id="mainImage"> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <img src="http://static.photos/education/200x200/11" alt="Dom Casmurro 1" class="gallery-image h-20 object-cover border rounded" onclick="changeImage(this)"> | |
| <img src="http://static.photos/education/200x200/12" alt="Dom Casmurro 2" class="gallery-image h-20 object-cover border rounded" onclick="changeImage(this)"> | |
| <img src="http://static.photos/education/200x200/13" alt="Dom Casmurro 3" class="gallery-image h-20 object-cover border rounded" onclick="changeImage(this)"> | |
| <img src="http://static.photos/education/200x200/14" alt="Dom Casmurro 4" class="gallery-image h-20 object-cover border rounded" onclick="changeImage(this)"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Informações do produto --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h1 class="text-3xl font-bold mb-2">Dom Casmurro</h1> | |
| <p class="text-gray-600 mb-4">por Machado de Assis</p> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5"></i> | |
| </div> | |
| <span class="text-gray-500">(128 avaliações)</span> | |
| </div> | |
| <div class="mb-6"> | |
| <span class="text-3xl font-bold text-indigo-600">R$ 19,90</span> | |
| <span class="text-gray-500 line-through ml-2">R$ 24,90</span> | |
| <span class="bg-red-100 text-red-600 text-sm font-semibold ml-2 px-2 py-1 rounded">20% OFF</span> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold mb-2">Formato</h3> | |
| <div class="flex space-x-2"> | |
| <button class="border border-indigo-600 text-indigo-600 px-4 py-2 rounded">PDF</button> | |
| <button class="border border-gray-300 text-gray-700 px-4 py-2 rounded">EPUB</button> | |
| <button class="border border-gray-300 text-gray-700 px-4 py-2 rounded">MOBI</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold mb-2">Quantidade</h3> | |
| <div class="flex items-center"> | |
| <button class="bg-gray-200 w-8 h-8 rounded-l">-</button> | |
| <input type="number" value="1" class="w-12 h-8 text-center border-y"> | |
| <button class="bg-gray-200 w-8 h-8 rounded-r">+</button> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4 mb-6"> | |
| <button class="bg-indigo-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-indigo-700 flex items-center"> | |
| <i data-feather="shopping-cart" class="w-5 h-5 mr-2"></i> Adicionar ao Carrinho | |
| </button> | |
| <button class="border border-indigo-600 text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-indigo-50"> | |
| Comprar Agora | |
| </button> | |
| </div> | |
| <div class="border-t pt-4"> | |
| <div class="flex items-center text-sm text-gray-600 mb-2"> | |
| <i data-feather="truck" class="w-4 h-4 mr-2"></i> Frete grátis para todo o Brasil | |
| </div> | |
| <div class="flex items-center text-sm text-gray-600"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> Download disponível imediatamente após a compra | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Descrição e detalhes --> | |
| <div class="mt-12 bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-4">Descrição</h2> | |
| <p class="text-gray-700 mb-4"> | |
| Dom Casmurro é um romance escrito por Machado de Assis, publicado em 1899. | |
| A obra é narrada em primeira pessoa por Bento Santiago, o Dom Casmurro do título, | |
| que relata suas memórias desde a adolescência até a idade adulta, com foco em seu | |
| relacionamento com Capitu e as dúvidas que surgem sobre a fidelidade dela. | |
| </p> | |
| <p class="text-gray-700 mb-4"> | |
| Considerada uma das grandes obras da literatura brasileira, Dom Casmurro explora | |
| temas como ciúme, traição, ambiguidade e a subjetividade da memória. A narrativa | |
| é marcada pela ironia fina característica de Machado de Assis. | |
| </p> | |
| <h3 class="text-xl font-semibold mb-3">Detalhes do produto</h3> | |
| <ul class="list-disc list-inside text-gray-700 space-y-2"> | |
| <li>Formato: E-book (PDF, EPUB, MOBI)</li> | |
| <li>Número de páginas: 256</li> | |
| <li>Idioma: Português</li> | |
| <li>Editora: Clássicos Brasileiros</li> | |
| <li>Data de publicação: 1899 (original), 2023 (edição digital)</li> | |
| <li>ISBN: 978-65-123456-7-8</li> | |
| </ul> | |
| </div> | |
| <!-- Avaliações --> | |
| <div class="mt-12 bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6">Avaliações (128)</h2> | |
| <div class="flex items-center mb-8"> | |
| <div class="text-center mr-8"> | |
| <div class="text-5xl font-bold text-indigo-600">4.2</div> | |
| <div class="flex justify-center text-yellow-400 mt-2"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5"></i> | |
| </div> | |
| <div class="text-gray-500 mt-1">128 avaliações</div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center mb-1"> | |
| <span class="w-12 text-right mr-2">5</span> | |
| <div class="flex-1 bg-gray-200 rounded h-2"> | |
| <div class="bg-yellow-400 h-2 rounded" style="width: 70%"></div> | |
| </div> | |
| <span class="w-12 text-gray-500 ml-2">70%</span> | |
| </div> | |
| <div class="flex items-center mb-1"> | |
| <span class="w-12 text-right mr-2">4</span> | |
| <div class="flex-1 bg-gray-200 rounded h-2"> | |
| <div class="bg-yellow-400 h-2 rounded" style="width: 20%"></div> | |
| </div> | |
| <span class="w-12 text-gray-500 ml-2">20%</span> | |
| </div> | |
| <div class="flex items-center mb-1"> | |
| <span class="w-12 text-right mr-2">3</span> | |
| <div class="flex-1 bg-gray-200 rounded h-2"> | |
| <div class="bg-yellow-400 h-2 rounded" style="width: 7%"></div> | |
| </div> | |
| <span class="w-12 text-gray-500 ml-2">7%</span> | |
| </div> | |
| <div class="flex items-center mb-1"> | |
| <span class="w-12 text-right mr-2">2</span> | |
| <div class="flex-1 bg-gray-200 rounded h-2"> | |
| <div class="bg-yellow-400 h-2 rounded" style="width: 2%"></div> | |
| </div> | |
| <span class="w-12 text-gray-500 ml-2">2%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-12 text-right mr-2">1</span> | |
| <div class="flex-1 bg-gray-200 rounded h-2"> | |
| <div class="bg-yellow-400 h-2 rounded" style="width: 1%"></div> | |
| </div> | |
| <span class="w-12 text-gray-500 ml-2">1%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comentários --> | |
| <div class="space-y-6"> | |
| <div class="border-b pb-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-gray-300 rounded-full mr-3"></div> | |
| <div> | |
| <h4 class="font-semibold">Carlos Silva</h4> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">Excelente edição digital! A qualidade do texto está impecável e a introdução contextualiza muito bem a obra. Recomendo!</p> | |
| </div> | |
| <div class="border-b pb-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-gray-300 rounded-full mr-3"></div> | |
| <div> | |
| <h4 class="font-semibold">Ana Oliveira</h4> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">Clássico imperdível! A narrativa de Machado é fascinante, embora a edição digital tenha alguns pequenos problemas de formatação.</p> | |
| </div> | |
| </div> | |
| <button class="mt-6 text-indigo-600 font-semibold hover:text-indigo-700">Carregar mais avaliações</button> | |
| </div> | |
| </main> | |
| <!-- Footer (mesmo do index) --> | |
| <footer class="bg-gray-800 text-white py-12 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">D.</h3> | |
| <p class="text-gray-400">Sua loja virtual de confiança para e-books, roupas e acessórios.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Categorias</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="ebooks.html" class="text-gray-400 hover:text-white">E-books</a></li> | |
| <li><a href="roupas.html" class="text-gray-400 hover:text-white">Roupas</a></li> | |
| <li><a href="acessorios.html" class="text-gray-400 hover:text-white">Acessórios</a></li> | |
| <li><a href="blog.html" class="text-gray-400 hover:text-white">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Suporte</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Política de Entregas</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Trocas e Devoluções</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Contato</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a> | |
| </div> | |
| <p class="text-gray-400">contato@lojaonline.com</p> | |
| </极速赛车开奖结果 | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 D. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| function changeImage(element) { | |
| document.getElementById('mainImage').src = element.src; | |
| } | |
| </script> | |
| </body> | |
| </html> | |