Para um spa

Abrir no Editor Publique Seu Código

Recomendado

16 December 2024

Efeito de moldura de foto CSS 3D para imagens

HTML

<!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 um spa

Recomendado

Um Código por Meriem

Um código por logicalarray833

Efeito de moldura de foto CSS 3D para imagens

HTML

CSS

JS

Recomendado

Um Código por Meriem

Um código por logicalarray833

Efeito de moldura de foto CSS 3D para imagens

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS