Para un spa

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Serenity Spa | Bienestar y Relajación</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../Ideas_diceño/ida2.css">
</head>
<body>
    
    <nav class="navbar">
        <a href="#" class="logo">
            <i class="fas fa-spa"></i> Serenity Spa
        </a>
        <ul class="nav-links">
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Tratamientos</a></li>
            <li><a href="#">Sobre Nosotros</a></li>
            <li><a href="#">Contacto</a></li>
            <li><button class="book-btn">Reservar Ahora</button></li>
        </ul>
        <div class="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>
    </nav>

<div class="hero-slider">
        
        <div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')">
            <div class="slide-content">
                <h1>Experiencias de Relax Inigualables</h1>
                <p>Descubre nuestro exclusivo spa donde el bienestar y la relajación se fusionan para ofrecerte una experiencia única y renovadora.</p>
                <a href="#" class="slide-btn">Explorar Servicios</a>
            </div>
        </div>

<div class="slide" style="background-image: url('https://images.unsplash.com/photo-1562325951-5b257784e7a3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')">
            <div class="slide-content">
                <h1>Tratamientos Personalizados</h1>
                <p>Nuestros expertos terapeutas diseñan tratamientos a medida para satisfacer tus necesidades específicas de relajación y cuidado personal.</p>
                <a href="#" class="slide-btn">Ver Tratamientos</a>
            </div>
        </div>

<div class="slide" style="background-image: url('https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')">
            <div class="slide-content">
                <h1>Ofertas Exclusivas</h1>
                <p>Aprovecha nuestros paquetes especiales diseñados para ofrecerte la máxima experiencia de spa a un precio inigualable.</p>
                <a href="#" class="slide-btn">Ver Ofertas</a>
            </div>
        </div>

<div class="slider-controls">
            <div class="slider-control active" data-slide="0"></div>
            <div class="slider-control" data-slide="1"></div>
            <div class="slider-control" data-slide="2"></div>
        </div>
    </div>

<section class="welcome-section">
        <h2 class="section-title">Bienvenido a Serenity Spa</h2>
        <p class="welcome-text">
            En Serenity Spa, nos dedicamos a proporcionar experiencias de bienestar que nutren el cuerpo, 
            calman la mente y elevan el espíritu. Nuestro equipo de profesionales certificados utiliza 
            solo los mejores productos y técnicas para garantizar que cada visita sea una experiencia 
            transformadora.
        </p>
        
    </section>

<footer>
        <div class="footer-logo">
            <i class="fas fa-spa"></i> Serenity Spa
        </div>
        <div class="social-icons">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-pinterest-p"></i></a>
        </div>
        <p class="copyright">
            © 2023 Serenity Spa. Todos los derechos reservados.
        </p>
    </footer>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

body {
            background-color: #f9f9f9;
            color: #333;
            overflow-x: hidden;
        }

/* Barra de navegación */
        .navbar {
            background: linear-gradient(135deg, #0a192f 0%, #1a3a6a 100%);
            padding: 15px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

.navbar.scrolled {
            padding: 10px 5%;
            background: rgba(10, 25, 47, 0.95);
            backdrop-filter: blur(10px);
        }

.logo {
            color: #45ffca;
            font-size: 28px;
            font-weight: 700;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

.logo i {
            margin-right: 10px;
            font-size: 32px;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s ease;
            position: relative;
        }

.nav-links a:hover {
            color: #45ffca;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: #45ffca;
            bottom: -5px;
            left: 0;
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

.book-btn {
            background: #45ffca;
            color: #0a192f;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

.book-btn:hover {
            background: #3ce6b7;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

/* Slider hero */
        .hero-slider {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            margin-top: 70px;
        }

.slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            padding: 0 10%;
        }

.slide.active {
            opacity: 1;
        }

.slide::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 25, 47, 0.5);
        }

.slide-content {
            position: relative;
            z-index: 1;
            max-width: 600px;
            color: #fff;
            transform: translateY(50px);
            opacity: 0;
            transition: all 0.8s ease;
            transition-delay: 0.3s;
        }

.slide.active .slide-content {
            transform: translateY(0);
            opacity: 1;
        }

.slide h1 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

.slide p {
            font-size: 18px;
            margin-bottom: 30px;
            line-height: 1.6;
        }

.slide-btn {
            display: inline-block;
            background: #45ffca;
            color: #0a192f;
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

.slide-btn:hover {
            background: #3ce6b7;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

/* Controles del slider */
        .slider-controls {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 10;
        }

.slider-control {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            margin: 0 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.slider-control.active {
            background: #45ffca;
            transform: scale(1.3);
        }

/* Sección de bienvenida */
        .welcome-section {
            padding: 100px 10%;
            text-align: center;
            background: #fff;
        }

.section-title {
            font-size: 36px;
            color: #0a192f;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

.section-title::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            background: #45ffca;
            bottom: -10px;
            left: 25%;
        }

.welcome-text {
            max-width: 800px;
            margin: 0 auto 50px;
            font-size: 18px;
            line-height: 1.6;
            color: #555;
        }

/* Efectos de hover para tarjetas (puedes agregar tarjetas de servicios después) */
        .service-card {
            background: #fff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            margin: 15px;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }

/* Pie de página */
        footer {
            background: #0a192f;
            color: #fff;
            padding: 50px 10% 20px;
            text-align: center;
        }

.footer-logo {
            font-size: 24px;
            color: #45ffca;
            margin-bottom: 20px;
            display: inline-block;
        }

.social-icons {
            margin: 20px 0;
        }

.social-icons a {
            color: #fff;
            font-size: 20px;
            margin: 0 10px;
            transition: all 0.3s ease;
        }

.social-icons a:hover {
            color: #45ffca;
            transform: translateY(-3px);
        }

.copyright {
            margin-top: 30px;
            font-size: 14px;
            color: #8f8f8f;
        }

/* Animaciones */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

/* Responsive */
        @media (max-width: 768px) {
            .navbar {
                padding: 15px 5%;
                flex-direction: column;
                align-items: flex-start;
            }

.nav-links {
                margin-top: 20px;
                width: 100%;
                flex-direction: column;
                display: none;
            }

.nav-links.active {
                display: flex;
            }

.nav-links li {
                margin: 10px 0;
            }

.slide h1 {
                font-size: 36px;
            }

.slide p {
                font-size: 16px;
            }

.menu-toggle {
                display: block;
                color: #fff;
                font-size: 24px;
                cursor: pointer;
                position: absolute;
                right: 5%;
                top: 20px;
            }
        }

JS

/* Replace with your JS Code 
(Leave empty if not needed) */ // Efecto de navbar al hacer scroll
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

// Slider automático
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        const controls = document.querySelectorAll('.slider-control');

function showSlide(index) {
            slides.forEach(slide => slide.classList.remove('active'));
            controls.forEach(control => control.classList.remove('active'));
            
            slides[index].classList.add('active');
            controls[index].classList.add('active');
            currentSlide = index;
        }

function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide(currentSlide);
        }

// Cambiar slide cada 5 segundos
        setInterval(nextSlide, 5000);

// Controles manuales
        controls.forEach((control, index) => {
            control.addEventListener('click', () => {
                showSlide(index);
            });
        });

// Menú responsive
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');

menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });

Para un spa

Recommended

Sunflower

CSS Animated Background with Shapes and Text

CSS Animation Container with Countdown

HTML

CSS

JS

Recommended

Sunflower

CSS Animated Background with Shapes and Text

CSS Animation Container with Countdown

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS