Bigbil2025's picture
Vou criar a matéria completa em formato carrossel para Instagram, usando as cores da foto de destaque da revista LOREM MAGAZINE OFICIAL, com foco no lançamento do Carmed & Coca-Cola e destacando Fabiano Lima Vieira como especialista em marketing digital. Será dividido em 5 slides para facilitar a leitura e o engajamento.Slide 1: Capa — Lançamento ExclusivoLOREM MAGAZINE OFICIAL
9d19779 verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FizzPop Digital Carousel</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/carousel-slide.js"></script>
<script src="components/navigation-dots.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
carmed: '#C8102E',
coca: '#F40009',
dark: '#1A1A1A'
}
}
}
}
</script>
</head>
<body class="bg-dark text-white font-sans overflow-x-hidden">
<main class="relative h-screen w-full">
<!-- Carousel Container -->
<div id="carousel" class="flex h-full w-full transition-transform duration-500 ease-in-out">
<!-- Slides will be inserted here by JavaScript -->
</div>
<!-- Navigation Arrows -->
<button id="prevBtn" class="absolute left-4 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full z-10 hover:bg-opacity-75 transition">
<i data-feather="chevron-left"></i>
</button>
<button id="nextBtn" class="absolute right-4 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full z-10 hover:bg-opacity-75 transition">
<i data-feather="chevron-right"></i>
</button>
<!-- Navigation Dots -->
<navigation-dots total="5" class="absolute bottom-8 left-1/2 -translate-x-1/2"></navigation-dots>
</main>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>