Landing Page - Cuidados com a pele

Abrir no Editor Publique Seu Código

Recomendado

2 December 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luxe Skincare</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            background-color: #fff;
            color: #333;
            line-height: 1.6;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

header {
            background-color: rgba(255, 255, 255, 0.9);
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 24px;
            font-weight: 700;
        }

.cart-icon {
            font-size: 24px;
            cursor: pointer;
            position: relative;
        }

.cart-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #ff4757;
            color: #fff;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 12px;
        }

.hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

.hero-content {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 40px;
            border-radius: 10px;
        }

.hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s forwards;
        }

.hero p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s 0.5s forwards;
        }

.btn {
            display: inline-block;
            background-color: #333;
            color: #fff;
            padding: 12px 24px;
            border-radius: 30px;
            text-decoration: none;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s 1s forwards;
        }

.btn:hover {
            background-color: #555;
        }

@keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.products {
            padding: 80px 0;
            background-color: #f9f9f9;
        }

.products h2 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 40px;
        }

.product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

.product-card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

.product-card:hover {
            transform: translateY(-10px);
        }

.product-image {
            height: 200px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.product-info {
            padding: 20px;
        }

.product-title {
            font-size: 18px;
            margin-bottom: 10px;
        }

.product-price {
            font-weight: 600;
            margin-bottom: 15px;
        }

.add-to-cart {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.add-to-cart:hover {
            background-color: #555;
        }

.cart {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background-color: #fff;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            transition: right 0.3s ease;
            z-index: 1001;
        }

.cart.open {
            right: 0;
        }

.cart-header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            font-size: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.close-cart {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }

.cart-items {
            padding: 20px;
            max-height: calc(100vh - 180px);
            overflow-y: auto;
        }

.cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

.cart-item-info {
            flex-grow: 1;
        }

.cart-item-title {
            font-size: 16px;
            margin-bottom: 5px;
        }

.cart-item-price {
            font-weight: 600;
        }

.cart-item-remove {
            background: none;
            border: none;
            color: #ff4757;
            cursor: pointer;
        }

.cart-total {
            padding: 20px;
            font-size: 18px;
            font-weight: 600;
            text-align: right;
            border-top: 1px solid #eee;
        }

@media (max-width: 768px) {
            .hero h1 {
                font-size: 36px;
            }

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

.product-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <div class="logo">Luxe Skincare</div>
            <div class="cart-icon" id="cartIcon">???? <span class="cart-count">0</span></div>
        </nav>
    </header>

<main>
        <section class="hero">
            <video class="hero-video" autoplay loop muted playsinline>
                <source src="https://videos.pexels.com/video-files/4153588/4153588-uhd_2732_1440_25fps.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="hero-content">
                <h1>Discover Your Natural Beauty</h1>
                <p>High-quality skincare products for radiant skin</p>
                <a href="#products" class="btn">Shop Now</a>
            </div>
        </section>

<section id="products" class="products">
            <div class="container">
                <h2>Our Products</h2>
                <div class="product-grid" id="productGrid"></div>
            </div>
        </section>
    </main>

<div class="cart" id="cart">
        <div class="cart-header">
            <span>Shopping Cart</span>
            <button class="close-cart" id="closeCart">×</button>
        </div>
        <div class="cart-items" id="cartItems"></div>
        <div class="cart-total" id="cartTotal">Total: $0</div>
    </div>

const cart = [];
        const productGrid = document.getElementById('productGrid');
        const cartIcon = document.getElementById('cartIcon');
        const cartElement = document.getElementById('cart');
        const closeCart = document.getElementById('closeCart');
        const cartItems = document.getElementById('cartItems');
        const cartTotal = document.getElementById('cartTotal');
        const cartCount = document.querySelector('.cart-count');

function renderProducts() {
            productGrid.innerHTML = products.map(product => `
                <div class="product-card">
                    <div class="product-image">
                        <img src="${product.image}" alt="${product.name}">
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">${product.name}</h3>
                        <p class="product-price">$${product.price}</p>
                        <button class="add-to-cart" data-id="${product.id}">Add to Cart</button>
                    </div>
                </div>
            `).join('');

document.querySelectorAll('.add-to-cart').forEach(button => {
                button.addEventListener('click', addToCart);
            });
        }

updateCart();
            animateCartIcon();
        }

function updateCart() {
            cartItems.innerHTML = cart.map(item => `
                <div class="cart-item">
                    <div class="cart-item-info">
                        <h4 class="cart-item-title">${item.name}</h4>
                        <p class="cart-item-price">$${item.price} x ${item.quantity}</p>
                    </div>
                    <button class="cart-item-remove" data-id="${item.id}">×</button>
                </div>
            `).join('');

const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
            cartTotal.textContent = `Total: $${total}`;
            cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);

document.querySelectorAll('.cart-item-remove').forEach(button => {
                button.addEventListener('click', removeFromCart);
            });
        }

function animateCartIcon() {
            cartIcon.style.transform = 'scale(1.2)';
            setTimeout(() => {
                cartIcon.style.transform = 'scale(1)';
            }, 200);
        }

cartIcon.addEventListener('click', () => {
            cartElement.classList.add('open');
        });

closeCart.addEventListener('click', () => {
            cartElement.classList.remove('open');
        });

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

Landing Page - Cuidados com a pele

Recomendado

Um código por slowarray902

Um Código por fadlanbryan22

Um código por agilecloud61

HTML

CSS

JS

Recomendado

Um código por slowarray902

Um Código por fadlanbryan22

Um código por agilecloud61

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS