Luxus-Smartwatches definieren Eleganz und Technologie neu

228 zegarkidawida

Im Editor öffnen Veröffentlichen Sie Ihren Code

Luxus-Smartwatches definieren Eleganz und Technologie neu

Empfohlen

19 April 2025

HALLO MEIN FREUND

9 December 2024

HTML-CSS- und Javascript-Hover-Animationseffekt

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
});

Empfohlen

HALLO MEIN FREUND

HTML-CSS- und Javascript-Hover-Animationseffekt

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS