Skip to content

Commit

Permalink
index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@sjaquer
sjaquer authored Dec 4, 2024
1 parent 7eb70f9 commit 839e9c5
Showing 1 changed file with 342 additions and 0 deletions.
342 changes: 342 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,342 @@
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>UPYAY Drinks</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Pacifico&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
color: #333;
overflow-x: hidden; /* Hide horizontal scrollbar */
display: flex;
flex-direction: column;
align-items: center;
}
.header {
text-align: center;
padding: 20px;
}
.header img {
width: 150px;
}
.main-title {
font-size: 2.5em;
font-weight: 700;
margin: 20px 0;
font-family: 'Pacifico', cursive;
}
.main-content {
text-align: center;
padding: 20px;
}
.main-content img {
width: 200px;
}
.section {
padding: 40px 20px;
text-align: center;
width: 100%;
}
.section-title {
font-size: 1.5em;
font-weight: 700;
margin-bottom: 20px;
}
.section-content {
max-width: 1000px;
margin: 0 auto;
}
.products {
display: flex;
overflow: hidden;
gap: 20px;
padding: 20px 0;
position: relative;
}
.product {
min-width: 150px;
text-align: center;
flex-shrink: 0;
transform: translateZ(0);
animation: scrollProducts 20s linear infinite;
}
.product img {
width: 100%;
border-radius: 10px;
}
@keyframes scrollProducts {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.carousel {
position: relative;
max-width: 800px;
margin: 20px auto;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.carousel-item.active {
opacity: 1;
transform: scale(1.05);
position: relative;
}
.carousel img {
width: 100%;
border-radius: 10px;
}
.carousel-text {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.5s ease;
}
.carousel-item:hover .carousel-text {
opacity: 1;
}
.carousel-dots {
text-align: center;
margin-top: 10px;
}
.carousel-dots span {
display: inline-block;
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.carousel-dots .active {
background-color: #333;
}
.cta-button {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
margin-top: 20px;
}
.cta-button:hover {
background-color: #555;
}
.carousel-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.carousel-nav i {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
border-radius: 50%;
cursor: pointer;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
width: 100%;
}
.footer p {
margin: 5px 0;
}
.footer a {
color: #fff;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header class="header">
<img alt="UPYAY logo" height="50" src="https://storage.googleapis.com/a1aa/image/OfoqUDqmxJyMDq9xjtdRNlFRec0sjn0cc4cK8uWlvaIpIo3TA.jpg" width="150"/>
</header>
<main>
<section class="main-content">
<h1 class="main-title">Te da Aaalas</h1>
<img alt="UPYAY Clasica bottle" height="400" src="https://storage.googleapis.com/a1aa/image/1ruaDVdIepWgf0t1qS4pHYWyhUCJfiT7qrBvdh2QcU8bRQvnA.jpg" width="200"/>
</section>
<section class="section">
<h2 class="section-title">PRODUCTOS UPYAY DRINKS</h2>
<div class="section-content">
<h3>Vitaliza Mente y Cuerpo©</h3>
<p>UPYAY Drinks es apreciado en todo el mundo por atletas, estudiantes, en ocasiones de alta demanda, en viajes largos y en el trabajo.</p>
<div class="products">
<div class="product">
<img alt="UPYAY Lucuma" height="300" src="https://storage.googleapis.com/a1aa/image/EwqTqJzQySq0Ipv30X4fOjn1GwmGmQeaRTukO08ZYXClLo3TA.jpg" width="150"/>
<p>UPYAY Lucuma</p>
</div>
<div class="product">
<img alt="UPYAY Maracuya" height="300" src="https://storage.googleapis.com/a1aa/image/NEz9UMInZGZMMFaSIAs7oZNegQj19YtxqD9RdHxq7HNyF07JA.jpg" width="150"/>
<p>UPYAY Maracuya</p>
</div>
<div class="product">
<img alt="UPYAY Cacao" height="300" src="https://storage.googleapis.com/a1aa/image/ACvakMhq1Sa8PduPNtVrGu3SIC2ICCe4ZgmArLWKyDSzF07JA.jpg" width="150"/>
<p>UPYAY Cacao</p>
</div>
<div class="product">
<img alt="UPYAY Fresa" height="300" src="https://storage.googleapis.com/a1aa/image/ZnglYtw2C0rKAhmfAwBUGnuA3T40v7n6ZjCouFi3sAN0F07JA.jpg" width="150"/>
<p>UPYAY Fresa</p>
</div>
<div class="product">
<img alt="UPYAY Mango" height="300" src="https://storage.googleapis.com/a1aa/image/dS1bfjHNHLylZa8sxTOZJvqq5mJB59paOwG108cG6lb1F07JA.jpg" width="150"/>
<p>UPYAY Mango</p>
</div>
<div class="product">
<img alt="UPYAY Piña" height="300" src="https://storage.googleapis.com/a1aa/image/EQTuHxSxOfzRH62iTU5tFzTcCZs3T6Vae3qWeN8G4kROXQvnA.jpg" width="150"/>
<p>UPYAY Piña</p>
</div>
<!-- Repeat products to create infinite scroll effect -->
<div class="product">
<img alt="UPYAY Lucuma" height="300" src="https://storage.googleapis.com/a1aa/image/EwqTqJzQySq0Ipv30X4fOjn1GwmGmQeaRTukO08ZYXClLo3TA.jpg" width="150"/>
<p>UPYAY Lucuma</p>
</div>
<div class="product">
<img alt="UPYAY Maracuya" height="300" src="https://storage.googleapis.com/a1aa/image/NEz9UMInZGZMMFaSIAs7oZNegQj19YtxqD9RdHxq7HNyF07JA.jpg" width="150"/>
<p>UPYAY Maracuya</p>
</div>
<div class="product">
<img alt="UPYAY Cacao" height="300" src="https://storage.googleapis.com/a1aa/image/ACvakMhq1Sa8PduPNtVrGu3SIC2ICCe4ZgmArLWKyDSzF07JA.jpg" width="150"/>
<p>UPYAY Cacao</p>
</div>
<div class="product">
<img alt="UPYAY Fresa" height="300" src="https://storage.googleapis.com/a1aa/image/ZnglYtw2C0rKAhmfAwBUGnuA3T40v7n6ZjCouFi3sAN0F07JA.jpg" width="150"/>
<p>UPYAY Fresa</p>
</div>
<div class="product">
<img alt="UPYAY Mango" height="300" src="https://storage.googleapis.com/a1aa/image/dS1bfjHNHLylZa8sxTOZJvqq5mJB59paOwG108cG6lb1F07JA.jpg" width="150"/>
<p>UPYAY Mango</p>
</div>
<div class="product">
<img alt="UPYAY Piña" height="300" src="https://storage.googleapis.com/a1aa/image/EQTuHxSxOfzRH62iTU5tFzTcCZs3T6Vae3qWeN8G4kROXQvnA.jpg" width="150"/>
<p>UPYAY Piña</p>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="section-title">Funcionalidad</h2>
<div class="carousel">
<div class="carousel-item active">
<img alt="Lúcuma" height="400" src="https://storage.googleapis.com/a1aa/image/1.jpg" width="800"/>
<div class="carousel-text">
<p>Lúcuma: Superalimento con alto contenido de carbohidratos complejos y fibra, aporta energía sostenida y favorece la salud digestiva.</p>
</div>
</div>
<div class="carousel-item">
<img alt="Camú Camú" height="400" src="https://storage.googleapis.com/a1aa/image/2.jpg" width="800"/>
<div class="carousel-text">
<p>Camú Camú: Fruto amazónico con alta concentración de vitamina C y antioxidantes, refuerza el sistema inmunológico y combate el estrés oxidativo.</p>
</div>
</div>
<div class="carousel-item">
<img alt="Granadilla" height="400" src="https://storage.googleapis.com/a1aa/image/3.jpg" width="800"/>
<div class="carousel-text">
<p>Granadilla: Rica en fibra dietética y antioxidantes, contribuye a la salud intestinal y mejora el sabor dulce y refrescante de la bebida.</p>
</div>
</div>
<div class="carousel-item">
<img alt="Maca" height="400" src="https://storage.googleapis.com/a1aa/image/4.jpg" width="800"/>
<div class="carousel-text">
<p>Maca: Planta conocida por sus propiedades energizantes, mejora la resistencia y el rendimiento físico, ideal para personas activas.</p>
</div>
</div>
<div class="carousel-item">
<img alt="Cacao" height="400" src="https://storage.googleapis.com/a1aa/image/5.jpg" width="800"/>
<div class="carousel-text">
<p>Cacao: Proporciona un sabor agradable y contiene propiedades estimulantes y antioxidantes, mejorando el bienestar general.</p>
</div>
</div>
<div class="carousel-item">
<img alt="Guaraná" height="400" src="https://storage.googleapis.com/a1aa/image/6.jpg" width="800"/>
<div class="carousel-text">
<p>Guaraná: El guaraná es una planta nativa de la región amazónica, especialmente conocida por su alto contenido en cafeína y su uso en bebidas energéticas.</p>
</div>
</div>
<div class="carousel-nav">
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>
</div>
<div class="carousel-dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
<footer class="footer">
<p><a href="#">Términos y Condiciones</a></p>
<p><a href="#">Contáctenos</a></p>
<p><a href="#">Política de Privacidad</a></p>
<p>&copy; 2023 UPYAY Drinks. Todos los derechos reservados.</p>
</footer>
</main>
<script>
const carousel = document.querySelector('.carousel');
const carouselItems = carousel.querySelectorAll('.carousel-item');
const prevButton = carousel.querySelector('.fa-chevron-left');
const nextButton = carousel.querySelector('.fa-chevron-right');
const dots = carousel.querySelectorAll('.carousel-dots span');
let currentIndex = 0;

function updateCarousel() {
carouselItems.forEach((item, index) => {
item.classList.toggle('active', index === currentIndex);
});
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}

prevButton.addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : carouselItems.length - 1;
updateCarousel();
});

nextButton.addEventListener('click', () => {
currentIndex = (currentIndex < carouselItems.length - 1) ? currentIndex + 1 : 0;
updateCarousel();
});

dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
currentIndex = index;
updateCarousel();
});
});

updateCarousel();
</script>
</body>
</html>

0 comments on commit 839e9c5

Please sign in to comment.