Montres connectées de luxe redéfinissant l'élégance et la technologie

512 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Montres connectées de luxe redéfinissant l'élégance et la technologie

Recommandé

17 August 2024

Modèle de barre de navigation Bootstrap

30 August 2024

Diaporama de parallaxe

26 July 2025

Exemple d'animation de bouton HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="High-quality digital watches by David Wróbel. Elegance and technology combined.">
    <meta name="keywords" content="watches, smartwatch, technology, elegance, David Wróbel">
    <title>Wróbel Watches</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="logo"><a href="index.html"><span class="logo-circle"></span> Wróbel</a></div>
                <ul class="menu">
                    <li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#product" class="nav-link">Products</a></li>
                    <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
                <div class="menu-btn">
                    <i class="fa-solid fa-bars"></i>
                </div>
            </div>
        </div>
    </nav>

<div class="container">
            <div class="row full-screen align-items-center">
                <div class="home-text">
                    <h2>Digital <span>watch</span> for a luxurious lifestyle</h2>
                    <p>The perfect accessory combining elegance with modern technology. Our luxury watches offer smart features, premium materials, iconic design, limited editions, and versatility.</p>
                    <a href="#" class="btn1">Shop Now</a>
                </div>
                <div class="home-image">
                    <div class="img-box">
                        <img src="https://i.postimg.cc/tCt0D8wm/purple.png" alt="purple watch">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="about-section section-padding" id="about">
        <div class="container">
            <div class="row">
                <div class="about-img">
                    <div class="img-box">
                        <img src="https://i.postimg.cc/5t0jYgz7/green.png" alt="green watch" id="main-watch">
                    </div>
                </div>
                <div class="about-text">
                    <div class="section-title">
                        <h1 class="title">About the Product</h1>
                        <h2 class="subtitle">An incredible digital watch to simplify your life</h2>
                    </div>
                    <div class="about-content">
                        <p>Whether you're attending a business meeting or enjoying a night out, Wróbel watches add sophistication to your style.</p>
                        <div class="color-container">
                            <h3 class="title">Choose a Color</h3>
                            <div class="colors">
                                <span class="color blue"></span>
                                <span class="color purple"></span>
                                <span class="color cyan"></span>
                                <span class="color pink"></span>
                                <span class="color green active"></span>
                                <span class="color red"></span>
                            </div>
                        </div>
                        <div class="price">
                            <h3 class="title">Product Price</h3>
                            <span class="new-price">$49.99</span>
                            <span class="old-price">$63.99</span>
                        </div>
                        <a href="#" class="btn1">Shop Now</a>
                        <a href="#" class="configurate">
                            <i class="fa-solid fa-circle-question"></i>
                            How to configure your smartwatch
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="product-items section-padding" id="product">
        <div class="container">
            <div class="row">
                <div class="section-title">
                    <h1 class="title">Our Products</h1>
                    <h2 class="subtitle">Latest Products</h2>
                </div>
            </div>
            <div class="row">
                <div class="product-item">
                    <div class="product-item-inner">
                        <div class="card-img">
                            <img src="https://i.postimg.cc/Wb7kdXzr/blue.png" alt="blue watch">
                        </div>
                        <div class="card-name">
                            <p>Wróbel Smartwatch</p>
                        </div>
                        <div class="card-prices">
                            <a href="#" class="card-icon"><i class="fa-solid fa-heart"></i></a>
                            <div>
                                <span class="card-price card-price-before">$63.99</span>
                                <span class="card-price card-price-now">$49.99</span>
                            </div>
                            <a href="#" class="card-icon"><i class="fa-solid fa-cart-plus"></i></a>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="product-item-inner">
                        <div class="card-img">
                            <img src="https://i.postimg.cc/5t0jYgz7/green.png" alt="green watch">
                        </div>
                        <div class="card-name">
                            <p>Wróbel Smartwatch</p>
                        </div>
                        <div class="card-prices">
                            <a href="#" class="card-icon"><i class="fa-solid fa-heart"></i></a>
                            <div>
                                <span class="card-price card-price-before">$63.99</span>
                                <span class="card-price card-price-now">$49.99</span>
                            </div>
                            <a href="#" class="card-icon"><i class="fa-solid fa-cart-plus"></i></a>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="product-item-inner">
                        <div class="card-img">
                            <img src="https://i.postimg.cc/WbVZpQNT/pink.png" alt="pink watch">
                        </div>
                        <div class="card-name">
                            <p>Wróbel Smartwatch</p>
                        </div>
                        <div class="card-prices">
                            <a href="#" class="card-icon"><i class="fa-solid fa-heart"></i></a>
                            <div>
                                <span class="card-price card-price-before">$63.99</span>
                                <span class="card-price card-price-now">$49.99</span>
                            </div>
                            <a href="#" class="card-icon"><i class="fa-solid fa-cart-plus"></i></a>
                        </div>
                    </div>
                </div>
                <div class="product-item">
                    <div class="product-item-inner">
                        <div class="card-img">
                            <img src="https://i.postimg.cc/VkLbnn0h/red.png" alt="red watch">
                        </div>
                        <div class="card-name">
                            <p>Wróbel Smartwatch</p>
                        </div>
                        <div class="card-prices">
                            <a href="#" class="card-icon"><i class="fa-solid fa-heart"></i></a>
                            <div>
                                <span class="card-price card-price-before">$63.99</span>
                                <span class="card-price card-price-now">$49.99</span>
                            </div>
                            <a href="#" class="card-icon"><i class="fa-solid fa-cart-plus"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact-section section-padding" id="contact">
        <div class="container">
            <div class="row">
                <div class="section-title">
                    <h1 class="title">Contact</h1>
                    <h2 class="subtitle">Get in Touch</h2>
                </div>
            </div>
            <div class="row">
                <div class="contact-info">
                    <h3>For any questions or support needs</h3>
                    <div class="contact-info-item">
                        <i class="fa-solid fa-location-arrow"></i>
                        <h4>Company Location</h4>
                        <p>123 Krakowska St, 30-001 Kraków, Poland</p>
                    </div>
                    <div class="contact-info-item">
                        <i class="fa-solid fa-envelope"></i>
                        <h4>Email Us</h4>
                        <p>dawid.wrobel@example.com</p>
                    </div>
                    <div class="contact-info-item">
                        <i class="fa-solid fa-phone"></i>
                        <h4>Call Us</h4>
                        <p>+48 123 456 789</p>
                    </div>
                </div>
                <div class="contact-form">
                    <form action="" id="contact-form">
                        <div class="row">
                            <div class="left">
                                <div class="form-group">
                                    <input type="text" name="name" placeholder="Your Name" class="form-control" required>
                                </div>
                            </div>
                            <div class="right">
                                <div class="form-group">
                                    <input type="email" name="email" placeholder="Your Email" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="full-width">
                                <div class="form-group">
                                    <input type="tel" name="phone" placeholder="Your Phone" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="full-width">
                                <div class="form-group">
                                    <input type="text" name="subject" placeholder="Subject" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="full-width">
                                <div class="form-group">
                                    <input name="message" cols="30" rows="10" placeholder="Your Message" class="form-control" required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="full-width">
                                <button class="btn1" type="submit">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="section-padding">
        <div class="container">
            <div class="row">
                <div class="left-col">
                    <div class="logo"><a href="index.html"><span class="logo-circle"></span> Wróbel</a></div>
                    <div class="social-media">
                        <a href="#"><i class="fa-brands fa-facebook"></i></a>
                        <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
                        <a href="#"><i class="fa-brands fa-instagram"></i></a>
                        <a href="#"><i class="fa-brands fa-youtube"></i></a>
                        <a href="#"><i class="fa-brands fa-linkedin"></i></a>
                    </div>
                    <p class="left-text">© 2025 Created by David Wróbel. All rights reserved.</p>
                </div>
                <div class="right-col">
                    <h1>Our Newsletter</h1>
                    <div class="border"></div>
                    <p>Enter your email to receive our news and updates</p>
                    <form action="" class="newsletter-form">
                        <input type="email" class="txtb" placeholder="Enter your email" required>
                        <input type="submit" value="Subscribe" class="btn1">
                    </form>
                </div>
            </div>
        </div>
    </footer>

CSS

/* Import nowoczesnych fontów */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@300;400;600;700&display=swap');

/* Zmienne CSS dla spójności i łatwej edycji */
:root {
    --primary-color: #6A1B9A; /* Głęboki, luksusowy fiolet */
    --secondary-color: #E8B923; /* Subtelne złoto */
    --background-color: #FAF8FF; /* Jasne, eleganckie tło */
    --text-color: #2D1B4E; /* Głęboki granat dla tekstu */
    --white: #FFFFFF;
    --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.1); /* Miękka warstwa cienia */
    --shadow-glow: 0 8px 30px rgba(106, 27, 154, 0.2); /* Subtelna poświata */
    --border-radius: 12px; /* Zaokrąglone rogi */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Płynne przejścia */
    --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

/* Tryb ciemny */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1E1E2F;
        --text-color: #E0E0E0;
        --white: #2D2D3A;
    }
}

/* Reset i podstawowe style */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-x: hidden;
}

/* Kontener główny */
.container {
    max-width: 1280px;
    margin: auto;
    padding: 0 24px;
}

/* Wiersz Flexbox */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.full-screen {
    padding: 120px 0;
    min-height: 100vh;
}

.section-padding {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.full-width {
    width: 100%;
}

/* Tytuły sekcji */
.section-title {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 80px;
    text-align: center;
    animation: fadeInUp 1s ease-out;
}

.section-title .title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--white);
    background: var(--gradient);
    padding: 8px 20px;
    border-radius: var(--border-radius);
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: var(--shadow-glow);
}

.section-title .subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
}

/* Przyciski */
.btn1 {
    background: var(--gradient);
    color: var(--white);
    padding: 16px 40px;
    border: none;
    border-radius: var(--border-radius);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn1::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn1:hover::before,
.btn1:focus::before {
    width: 300px;
    height: 300px;
}

.btn1:hover,
.btn1:focus {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    animation: pulse 1.5s infinite;
}

.btn1:active {
    transform: translateY(0);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

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

/* Efekty tła */
.effect-wrap .effect {
    position: absolute;
    z-index: -1;
}

.effect1 {
    width: 50px;
    height: 50px;
    border: 4px solid var(--primary-color);
    border-radius: 50%;
    right: 10%;
    bottom: 20%;
    animation: spin 15s linear infinite, pulse 3s infinite;
}

.effect3 {
    width: 60px;
    height: 60px;
    background: var(--gradient);
    border-radius: 50%;
    left: 20%;
    top: 30%;
    opacity: 0.3;
    animation: spin 20s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    padding: 20px 0;
    background: linear-gradient(to bottom, rgba(106, 27, 154, 0.9), transparent);
    transition: var(--transition);
}

.navbar.sticky {
    background: var(--primary-color);
    box-shadow: var(--shadow-soft);
    padding: 15px 0;
}

.navbar .menu .nav-item {
    display: inline-block;
    margin-right: 32px;
    position: relative;
}

.navbar .menu .nav-item .nav-link {
    font-family: 'Poppins', sans-serif;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 8px 0;
    transition: var(--transition);
}

.navbar .menu .nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: var(--transition);
}

.navbar .menu .nav-item .nav-link:hover::after,
.navbar .menu .nav-item .nav-link:focus::after {
    width: 100%;
}

.navbar .menu .nav-item .nav-link:hover,
.navbar .menu .nav-item .nav-link:focus {
    color: var(--secondary-color);
    transform: translateY(-1px);
}

.logo a {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    color: var(--white);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-circle {
    width: 28px;
    height: 28px;
    border: 4px solid var(--white);
    border-radius: 50%;
    position: relative;
    transition: var(--transition);
}

.logo-circle:hover {
    transform: rotate(360deg);
}

.logo-circle::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu-btn {
    display: none;
    color: var(--white);
    background: var(--gradient);
    height: 44px;
    width: 44px;
    border-radius: var(--border-radius);
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    transition: var(--transition);
}

.menu-btn:hover,
.menu-btn:focus {
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

/* Sekcja główna (Home) */
.home-section {
    position: relative;
    background: var(--gradient);
    overflow: hidden;
}

.home-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://i.postimg.cc/659ws9rN/bg-shape.png') no-repeat center/cover;
    opacity: 0.15;
    z-index: -1;
}

.home-section .home-text,
.home-section .home-image {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 24px;
    animation: fadeInUp 1.2s ease-out;
}

.home-section .home-text h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 32px;
}

.home-section .home-text h2 span {
    background: linear-gradient(to right, var(--secondary-color), var(--white));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-section .home-text p {
    font-size: 18px;
    color: var(--white);
    margin-bottom: 48px;
    line-height: 1.8;
    opacity: 0.9;
}

.home-section .home-image .img-box {
    max-width: 450px;
    margin: auto;
    position: relative;
    perspective: 1000px;
}

.home-section .home-image .img-box img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-glow);
    transition: var(--transition);
    animation: float 7s ease-in-out infinite;
}

.home-section .home-image .img-box img:hover {
    transform: scale(1.1) rotateY(10deg);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25px); }
}

/* Sekcja O produkcie (About) */
.about-img,
.about-text {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 24px;
}

.about-img .img-box {
    max-width: 400px;
    margin: auto;
}

.about-img .img-box img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-glow);
    transition: var(--transition);
}

.about-img .img-box img:hover {
    transform: scale(1.08) translateY(-10px);
}

.about-text .section-title {
    text-align: left;
    margin-bottom: 40px;
}

.about-text .about-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 32px;
}

.color-container .title {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 24px;
}

.colors {
    display: flex;
    gap: 16px;
}

.color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 4px solid var(--white);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
}

.color.blue { background-color: #2175F5; }
.color.red { background-color: #F84848; }
.color.green { background-color: #29B864; }
.color.purple { background-color: var(--primary-color); }
.color.cyan { background-color: #3ED1D1; }
.color.pink { background-color: #F02669; }

.color.active {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.price .title {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
}

.price .new-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 12px;
}

.price .old-price {
    font-size: 22px;
    color: var(--text-color);
    text-decoration: line-through;
    opacity: 0.7;
}

.configurate {
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    transition: var(--transition);
}

.configurate:hover,
.configurate:focus {
    color: var(--secondary-color);
    transform: translateX(5px);
}

/* Sekcja Produkty */
.product-item {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 16px;
}

.product-item .product-item-inner {
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.product-item .product-item-inner:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow);
}

.product-item .product-item-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--gradient);
    opacity: 0.1;
    transition: var(--transition);
}

.product-item .product-item-inner:hover::before {
    height: 100%;
}

.card-img {
    width: 100%;
    padding: 24px;
    transition: var(--transition);
}

.card-name {
    position: absolute;
    left: -35%;
    top: 0;
    width: 48px;
    height: 100%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: var(--gradient);
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.product-item .product-item-inner:hover .card-name {
    left: 0;
}

.product-item .product-item-inner:hover .card-img {
    transform: translateX(48px) scale(1.05);
}

.card-prices {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px;
    transition: var(--transition);
}

.product-item .product-item-inner:hover .card-prices {
    transform: translateX(48px);
}

.card-icon {
    font-size: 22px;
    color: var(--text-color);
    transition: var(--transition);
}

.card-icon:hover,
.card-icon:focus {
    color: var(--primary-color);
    transform: scale(1.2);
}

.card-price-before {
    font-size: 15px;
    color: var(--text-color);
    text-decoration: line-through;
    opacity: 0.7;
}

.card-price-now {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

/* Sekcja Kontakt */
.contact-info {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 24px;
    animation: fadeInUp 1s ease-out;
}

.contact-info h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 48px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    transition: var(--transition);
}

.contact-info-item:hover {
    transform: translateX(10px);
}

.contact-info-item i {
    font-size: 22px;
    color: var(--primary-color);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    transition: var(--transition);
}

.contact-info-item:hover i {
    background: var(--gradient);
    color: var(--white);
}

.contact-info-item h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.contact-info-item p {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.6;
}

.contact-form {
    flex: 0 0 66.66%;
    max-width: 66.66%;
    padding: 24px;
    animation: fadeInUp 1.2s ease-out;
}

.contact-form .left,
.contact-form .right {
    flex: 0 0 50%;
    max-width: 50%;
}

.contact-form .left {
    padding-right: 12px;
}

.contact-form .right {
    padding-left: 12px;
}

.contact-form .form-group {
    margin-bottom: 24px;
}

.contact-form .form-control {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid #E0E0E0;
    border-radius: var(--border-radius);
    font-size: 16px;
    color: var(--text-color);
    background-color: var(--white);
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
}

.contact-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(106, 27, 154, 0.3);
}

.contact-form textarea.form-control {
    height: 160px;
    resize: none;
    padding: 16px;
}

/* Stopka */
footer {
    background: var(--gradient);
    color: var(--white);
    padding: 80px 0;
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://i.postimg.cc/659ws9rN/bg-shape.png') no-repeat center/cover;
    opacity: 0.1;
    z-index: -1;
}

.left-col,
.right-col {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 24px;
}

.right-col h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    margin-bottom: 24px;
}

.right-col p {
    font-size: 16px;
    margin-bottom: 24px;
    opacity: 0.9;
}

.social-media {
    display: flex;
    gap: 24px;
    margin: 24px 0;
}

.social-media a {
    font-size: 28px;
    color: var(--white);
    transition: var(--transition);
}

.social-media a:hover,
.social-media a:focus {
    color: var(--secondary-color);
    transform: translateY(-4px);
}

.left-text {
    font-size: 14px;
    opacity: 0.8;
}

.border {
    width: 100px;
    height: 4px;
    background: var(--secondary-color);
    margin: 24px 0;
}

.newsletter-form {
    display: flex;
    gap: 12px;
}

.newsletter-form .txtb {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    color: var(--text-color);
    background-color: var(--white);
    box-shadow: var(--shadow-soft);
}

.newsletter-form .btn1 {
    padding: 16px 32px;
}

/* Media Queries */
@media (max-width: 991px) {
    .navbar .menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        background: var(--gradient);
        flex-direction: column;
        padding: 24px;
        box-shadow: var(--shadow-soft);
        transition: var(--transition);
    }

.navbar .menu.active {
        left: 0;
    }

.navbar .menu .nav-item {
        margin: 16px 0;
    }

.menu-btn {
        display: block;
    }

.home-section .home-text,
    .home-section .home-image {
        flex: 0 0 100%;
        max-width: 100%;
    }

.home-section .home-text h2 {
        font-size: 48px;
    }

.home-section .home-image .img-box {
        margin-top: 48px;
    }

.about-img,
    .about-text {
        flex: 0 0 100%;
        max-width: 100%;
    }

.about-text .section-title {
        text-align: center;
    }

.product-item {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

.contact-info,
    .contact-form {
        flex: 0 0 100%;
        max-width: 100%;
    }

.contact-form .left,
    .contact-form .right {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }
}

@media (max-width: 767px) {
    .home-section .home-text h2 {
        font-size: 36px;
    }

.section-title .subtitle {
        font-size: 32px;
    }

.product-item {
        flex: 0 0 50%;
        max-width: 50%;
    }

.left-col,
    .right-col {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

.right-col {
        margin-bottom: 48px;
    }

.newsletter-form {
        flex-direction: column;
    }

.newsletter-form .btn1 {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .product-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

.contact-info-item {
        flex-direction: column;
        text-align: center;
    }

.contact-info-item i {
        margin-bottom: 12px;
    }

.home-section .home-text h2 {
        font-size: 28px;
    }

.section-title .subtitle {
        font-size: 24px;
    }

.container {
        padding: 0 16px;
    }
}

JS

// === Funkcje pomocnicze ===
const $ = (selector, context = document) => context.querySelector(selector);
const $$ = (selector, context = document) => context.querySelectorAll(selector);

// === Zmiana koloru produktu ===
const initializeColorPicker = () => {
    const mainWatch = $('#main-watch');
    const colors = $$('.color');
    const colorMap = new Map([
        ['cyan', 'https://i.postimg.cc/pdrzbz2j/cyan.png'],
        ['purple', 'https://i.postimg.cc/tCt0D8wm/purple.png'],
        ['blue', 'https://i.postimg.cc/Wb7kdXzr/blue.png'],
        ['pink', 'https://i.postimg.cc/WbVZpQNT/pink.png'],
        ['green', 'https://i.postimg.cc/5t0jYgz7/green.png'],
        ['red', 'https://i.postimg.cc/VkLbnn0h/red.png'],
    ]);
    const fallbackImage = 'https://i.postimg.cc/5t0jYgz7/green.png'; // Fallback dla błędów

const changeImage = (src) => {
        mainWatch.style.opacity = 0;
        setTimeout(() => {
            mainWatch.src = src;
            mainWatch.style.opacity = 1;
        }, 300);
    };

const handleColorChange = (colorElement) => {
        colors.forEach(c => c.classList.remove('active'));
        colorElement.classList.add('active');
        const color = colorElement.dataset.color;
        const src = colorMap.get(color) || fallbackImage;

// Obsługa błędów ładowania obrazu
        const img = new Image();
        img.src = src;
        img.onload = () => changeImage(src);
        img.onerror = () => {
            console.warn(`Błąd ładowania obrazu: ${src}. Używam fallback.`);
            changeImage(fallbackImage);
        };
    };

colors.forEach(color => {
        color.addEventListener('click', () => handleColorChange(color));
        color.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleColorChange(color);
            }
        });
    });
};

// === Sticky Navbar ===
const initializeStickyNavbar = () => {
    const navbar = $('.navbar');
    if (!navbar) return;

window.addEventListener('scroll', () => requestAnimationFrame(handleScroll));
};

// === Nawigacja mobilna ===
const initializeMobileNav = () => {
    const navMenu = $('.menu');
    const navToggle = $('.menu-btn');
    if (!navMenu || !navToggle) return;

const toggleMenu = () => {
        navMenu.classList.toggle('active');
        navMenu.style.transition = 'transform 0.3s ease';
        navMenu.style.transform = navMenu.classList.contains('active') ? 'translateX(0)' : 'translateX(-100%)';
        navToggle.setAttribute('aria-expanded', navMenu.classList.contains('active'));
    };

navToggle.addEventListener('click', toggleMenu);
    navToggle.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            toggleMenu();
        }
    });

// Zamykanie menu po kliknięciu linku
    const navLinks = $$('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            navMenu.classList.remove('active');
            navMenu.style.transform = 'translateX(-100%)';
            navToggle.setAttribute('aria-expanded', 'false');
        });
    });

// Zamykanie menu klawiszem Esc
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && navMenu.classList.contains('active')) {
            toggleMenu();
        }
    });
};

// === Płynne przewijanie ===
const initializeSmoothScroll = () => {
    const navLinks = $$('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetId = link.getAttribute('href').substring(1);
            const targetElement = $(`#${targetId}`);
            if (targetElement) {
                targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });
};

// === Walidacja formularza kontaktowego ===
const initializeContactForm = () => {
    const form = $('#contact-form');
    if (!form) return;

const showError = (input, message) => {
        const formGroup = input.parentElement;
        let error = formGroup.querySelector('.error-message');
        if (!error) {
            error = document.createElement('div');
            error.className = 'error-message';
            error.style.color = '#D32F2F';
            error.style.fontSize = '14px';
            error.style.marginTop = '8px';
            formGroup.appendChild(error);
        }
        error.textContent = message;
        input.style.borderColor = '#D32F2F';
    };

const clearError = (input) => {
        const formGroup = input.parentElement;
        const error = formGroup.querySelector('.error-message');
        if (error) error.remove();
        input.style.borderColor = '';
    };

form.addEventListener('submit', (e) => {
        e.preventDefault();
        const inputs = form.querySelectorAll('input[required], textarea[required]');
        let isValid = true;

inputs.forEach(input => {
            clearError(input);
            if (!input.value.trim()) {
                showError(input, 'To pole jest wymagane');
                isValid = false;
            } else if (input.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value)) {
                showError(input, 'Wprowadź poprawny adres email');
                isValid = false;
            }
        });

if (isValid) {
            console.log('Formularz przesłany:', new FormData(form));
            form.reset();
            alert('Wiadomość została wysłana! Skontaktujemy się wkrótce.');
        }
    });

// Czyszczenie błędów przy wprowadzaniu danych
    form.querySelectorAll('input, textarea').forEach(input => {
        input.addEventListener('input', () => clearError(input));
    });
};

// === Lazy loading obrazów (opcjonalne) ===
/*
const initializeLazyLoading = () => {
    const images = $$('img');
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src || img.src;
                observer.unobserve(img);
            }
        });
    }, { rootMargin: '100px' });

images.forEach(img => observer.observe(img));
};
*/

// === Inicjalizacja ===
document.addEventListener('DOMContentLoaded', () => {
    initializeColorPicker();
    initializeStickyNavbar();
    initializeMobileNav();
    initializeSmoothScroll();
    initializeContactForm();
    // initializeLazyLoading(); // Odkomentuj, jeśli chcesz włączyć lazy loading
});

Recommandé

Modèle de barre de navigation Bootstrap

Diaporama de parallaxe

Exemple d'animation de bouton HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS