<![CDATA[<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Rotativo - Compra que vai chegar</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
border-radius: 25px;
box-shadow: 0 25px 80px rgba(0,0,0,0.4);
border: 3px solid #fff;
}
.banner-slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
overflow: hidden;
}
.banner-slide.active {
opacity: 1;
}
.banner-slide::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 30px 30px;
animation: sparkle 20s linear infinite;
}
@keyframes sparkle {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(50px, 50px) rotate(360deg); }
}
/* Slide 1 - Retrogames */
.slide1 {
background: linear-gradient(135deg, #ff0080 0%, #ff8c00 50%, #40e0d0 100%);
box-shadow: inset 0 0 100px rgba(255,0,128,0.3);
}
/* Slide 2 - Vendedores */
.slide2 {
background: linear-gradient(135deg, #00ff00 0%, #ffff00 50%, #ff00ff 100%);
box-shadow: inset 0 0 100px rgba(0,255,0,0.3);
}
/* Slide 3 - História dos valores */
.slide3 {
background: linear-gradient(135deg, #ff4500 0%, #ffd700 50%, #ff1493 100%);
box-shadow: inset 0 0 100px rgba(255,69,0,0.3);
}
/* Slide 4 - Produtos com desconto */
.slide4 {
background: linear-gradient(135deg, #8a2be2 0%, #00bfff 50%, #ff69b4 100%);
box-shadow: inset 0 0 100px rgba(138,43,226,0.3);
}
/* Slide 5 - Grupos de ofertas */
.slide5 {
background: linear-gradient(135deg, #ff6347 0%, #ffa500 50%, #32cd32 100%);
box-shadow: inset 0 0 100px rgba(255,99,71,0.3);
}
/* Slide 6 - Vendedores internacionais */
.slide6 {
background: linear-gradient(135deg, #1e90ff 0%, #ff00ff 50%, #00ff7f 100%);
box-shadow: inset 0 0 100px rgba(30,144,255,0.3);
}
/* Slide 7 - Dicas de vendas */
.slide7 {
background: linear-gradient(135deg, #ff1493 0%, #00ced1 50%, #ffd700 100%);
box-shadow: inset 0 0 100px rgba(255,20,147,0.3);
}
.slide-content {
text-align: center;
max-width: 800px;
z-index: 2;
position: relative;
}
.slide-icon {
font-size: 5rem;
margin-bottom: 1rem;
display: block;
animation: bounce 2s ease-in-out infinite;
filter: drop-shadow(0 0 20px rgba(255,255,255,0.8));
text-shadow: 0 0 30px rgba(255,255,255,0.9);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) scale(1);
}
40% {
transform: translateY(-30px) scale(1.1);
}
60% {
transform: translateY(-15px) scale(1.05);
}
}
.slide-title {
font-family: 'Orbitron', monospace;
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 1rem;
text-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 40px rgba(255,255,255,0.6), 0 0 60px rgba(255,255,255,0.4);
animation: slideInLeft 1s ease-out;
filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100px) scale(0.8);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.slide-description {
font-family: 'Poppins', sans-serif;
font-size: 1.4rem;
color: #ffffff;
line-height: 1.6;
margin-bottom: 2rem;
animation: slideInRight 1s ease-out 0.3s both;
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
font-weight: 600;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px) scale(0.8);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.slide-cta {
display: inline-block;
background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
background-size: 400% 400%;
border: 3px solid #fff;
color: #000;
padding: 1.2rem 2.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.2rem;
transition: all 0.3s ease;
animation: fadeInUp 1s ease-out 0.6s both, gradientShift 3s ease-in-out infinite;
text-shadow: 0 2px 5px rgba(255,255,255,0.3);
box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 0 0 rgba(255,255,255,0.5);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.slide-cta:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(255,255,255,0.8);
border-color: #ffff00;
}
/* Controles de navegação */
.banner-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 10;
}
.nav-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(45deg, #ff0080, #00ff80);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.nav-dot.active {
background: linear-gradient(45deg, #ffff00, #ff0080);
transform: scale(1.5);
box-shadow: 0 0 20px rgba(255,255,0,0.8);
}
.nav-dot:hover {
transform: scale(1.3);
box-shadow: 0 0 15px rgba(255,255,255,0.8);
}
/* Setas de navegação */
.banner-arrows {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(45deg, #ff0080, #00ff80);
border: 3px solid #fff;
color: #fff;
font-size: 2.5rem;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
font-weight: bold;
box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.3);
}
.banner-arrows:hover {
background: linear-gradient(45deg, #ffff00, #ff0080);
transform: translateY(-50%) scale(1.2);
box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 30px rgba(255,255,0,0.8);
}
.prev-arrow {
left: 20px;
}
.next-arrow {
right: 20px;
}
/* Efeitos especiais para cada slide */
.slide1 .slide-icon {
color: #ffff00;
animation: bounce 2s ease-in-out infinite, rainbow 3s linear infinite;
}
.slide2 .slide-icon {
color: #ff00ff;
animation: bounce 2s ease-in-out infinite, pulse 2s ease-in-out infinite;
}
.slide3 .slide-icon {
color: #00ffff;
animation: bounce 2s ease-in-out infinite, rotate 4s linear infinite;
}
.slide4 .slide-icon {
color: #ffff00;
animation: bounce 2s ease-in-out infinite, glow 2s ease-in-out infinite alternate;
}
.slide5 .slide-icon {
color: #00ff00;
animation: bounce 2s ease-in-out infinite, shake 3s ease-in-out infinite;
}
.slide6 .slide-icon {
color: #ff8000;
animation: bounce 2s ease-in-out infinite, zoom 2s ease-in-out infinite;
}
.slide7 .slide-icon {
color: #ff0080;
animation: bounce 2s ease-in-out infinite, wiggle 3s ease-in-out infinite;
}
@keyframes rainbow {
0% { filter: hue-rotate(0deg) drop-shadow(0 0 20px rgba(255,255,255,0.8)); }
100% { filter: hue-rotate(360deg) drop-shadow(0 0 20px rgba(255,255,255,0.8)); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes glow {
0% { text-shadow: 0 0 20px rgba(255,255,255,0.8); }
100% { text-shadow: 0 0 40px rgba(255,255,0,1), 0 0 60px rgba(255,255,0,0.8); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes zoom {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* Efeito de partículas */
.banner-slide::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1) 2px, transparent 2px);
background-size: 40px 40px;
animation: particles 15s linear infinite;
opacity: 0.6;
}
@keyframes particles {
0% { transform: translate(0, 0); }
100% { transform: translate(-40px, -40px); }
}
@media (max-width: 768px) {
.banner-container {
height: 400px;
border-radius: 20px;
}
.slide-title {
font-size: 2rem;
}
.slide-description {
font-size: 1.1rem;
}
.slide-icon {
font-size: 4rem;
}
.banner-arrows {
width: 50px;
height: 50px;
font-size: 2rem;
}
.slide-cta {
padding: 1rem 2rem;
font-size: 1.1rem;
}
}
</style>
</head>
<body>
<!-- Slide 1: Retrogames -->
🎮
<h2>Retrogames</h2>
<p>
Mergulhe no universo nostálgico dos games clássicos! Descubra análises detalhadas, curiosidades e tudo sobre os jogos que marcaram gerações.
</p>
<a href="#retrogames">Explorar Retrogames</a>
<!-- Slide 2: Vendedores Qualificados -->
🏆
<h2>Vendedores Qualificados</h2>
<p>
Conheça nossa rede de vendedores verificados e confiáveis. Compre com segurança e tranquilidade, sabendo que está lidando com profissionais sérios.
</p>
<a href="#vendedores">Ver Vendedores</a>
<!-- Slide 3: História dos Valores -->
📚
<h2>História dos Valores</h2>
<p>
Entenda como jogos e consoles raros se tornaram verdadeiros tesouros! Descubra a história por trás dos preços e valorização no mercado.
</p>
<a href="#historia">Conhecer História</a>
<!-- Slide 4: Produtos com Desconto -->
💰
<h2>Produtos com Desconto</h2>
<p>
Indicações especiais de produtos com os melhores preços! Economize nas suas compras com nossas dicas exclusivas de ofertas imperdíveis.
</p>
<a href="#descontos">Ver Ofertas</a>
<!-- Slide 5: Grupos de Ofertas -->
👥
<h2>Grupos de Ofertas</h2>
<p>
Faça parte da nossa comunidade! Acesse grupos exclusivos com ofertas em primeira mão e conecte-se com outros entusiastas de games.
</p>
<a href="#grupos">Entrar nos Grupos</a>
<!-- Slide 6: Vendedores Internacionais -->
🌍
<h2>Vendedores Internacionais</h2>
<p>
Expanda suas opções de compra! Conheça vendedores internacionais confiáveis para encontrar itens raros e exclusivos do mundo todo.
</p>
<a href="#internacional">Explorar Mundo</a>
<!-- Slide 7: Dicas de Vendas -->
💡
<h2>Dicas de Vendas</h2>
<p>
Aprenda a vender seus acessórios e eletrônicos com sucesso! Dicas práticas para maximizar seus lucros e encontrar os melhores compradores.
</p>
<a href="#dicas">Aprender Vendas</a>
<!-- Setas de navegação -->
<button onclick="changeSlide(-1)">‹</button>
<button onclick="changeSlide(1)">›</button>
<!-- Pontos de navegação -->
</body>
</html>]]>