Webleb - Extraits de Code - Page de destination de location de voiture

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ridex - Wypożyczalnia Samochodów</title>
    <link rel="shortcut icon" href="https://i.postimg.cc/MHmHHWXK/favicon-1.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header" data-header>
        <div class="container">
            <div class="overlay" data-overlay></div>

<nav class="navbar" data-navbar>
                <ul class="navbar-list">
                    <li><a href="#home" class="navbar-link" data-nav-link>Strona Główna</a></li>
                    <li><a href="#featured-car" class="navbar-link" data-nav-link>Przeglądaj Samochody</a></li>
                    <li><a href="#" class="navbar-link" data-nav-link>O Nas</a></li>
                    <li><a href="#blog" class="navbar-link" data-nav-link>Blog</a></li>
                </ul>
            </nav>

<a href="#featured-car" class="btn" aria-labelledby="aria-label-text">
                    <ion-icon name="car-outline"></ion-icon>
                    <span id="aria-label-text">Przeglądaj Samochody</span>
                </a>

<main>
        <article>
            <section class="section hero" id="home">
                <div class="container">
                    <div class="hero-content">
                        <h2 class="h1 hero-title">Łatwy sposób na wynajem samochodu</h2>
                        <p class="hero-text">Działamy w Warszawie, Krakowie i Wrocławiu</p>
                    </div>

<form action="" class="hero-form">
                        <div class="input-wrapper">
                            <label for="input1" class="input-label">Samochód, model lub marka</label>
                            <input type="text" name="car-model" id="input1" class="input-field" placeholder="Jaki samochód Cię interesuje?">
                        </div>

<div class="input-wrapper">
                            <label for="input2" class="input-label">Maksymalna miesięczna opłata</label>
                            <input type="text" name="monthly-pay" id="input2" class="input-field" placeholder="Podaj kwotę w PLN">
                        </div>

<div class="input-wrapper">
                            <label for="input3" class="input-label">Rok produkcji</label>
                            <input type="text" name="year" id="input3" class="input-field" placeholder="Podaj minimalny rok produkcji">
                        </div>

<button type="submit" class="btn">Szukaj</button>
                    </form>
                </div>
            </section>

<section class="section featured-car" id="featured-car">
                <div class="container">
                    <div class="title-wrapper">
                        <h2 class="h2 section-title">Polecane Samochody</h2>
                        <a href="#" class="featured-car-link">
                            <span>Zobacz Więcej</span>
                            <ion-icon name="arrow-forward-outline"></ion-icon>
                        </a>
                    </div>

<div class="card-content">
                                    <div class="card-title-wrapper">
                                        <h3 class="h3 card-title"><a href="#">Toyota RAV4</a></h3>
                                        <data value="2021" class="year">2021</data>
                                    </div>

<ul class="card-list">
                                        <li class="card-list-item">
                                            <ion-icon name="people-outline"></ion-icon>
                                            <span class="card-item-text">4 Osoby</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="flash-outline"></ion-icon>
                                            <span class="card-item-text">Hybryda</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="hardware-chip-outline"></ion-icon>
                                            <span class="card-item-text">Automat</span>
                                        </li>
                                    </ul>

<div class="card-price-wrapper">
                                        <p class="card-price"><strong>1800 PLN</strong> / miesiąc</p>

<button class="btn">Wynajmij Teraz</button>
                                    </div>
                                </div>
                            </div>
                        </li>

<div class="card-content">
                                    <div class="card-title-wrapper">
                                        <h3 class="h3 card-title"><a href="#">BMW 3 Series</a></h3>
                                        <data value="2019" class="year">2019</data>
                                    </div>

<ul class="card-list">
                                        <li class="card-list-item">
                                            <ion-icon name="people-outline"></ion-icon>
                                            <span class="card-item-text">4 Osoby</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="flash-outline"></ion-icon>
                                            <span class="card-item-text">Benzyna</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="hardware-chip-outline"></ion-icon>
                                            <span class="card-item-text">Automat</span>
                                        </li>
                                    </ul>

<div class="card-price-wrapper">
                                        <p class="card-price"><strong>1400 PLN</strong> / miesiąc</p>

<button class="btn">Wynajmij Teraz</button>
                                    </div>
                                </div>
                            </div>
                        </li>

<div class="card-content">
                                    <div class="card-title-wrapper">
                                        <h3 class="h3 card-title"><a href="#">Volkswagen T-Cross</a></h3>
                                        <data value="2020" class="year">2020</data>
                                    </div>

<ul class="card-list">
                                        <li class="card-list-item">
                                            <ion-icon name="people-outline"></ion-icon>
                                            <span class="card-item-text">4 Osoby</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="flash-outline"></ion-icon>
                                            <span class="card-item-text">Benzyna</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="hardware-chip-outline"></ion-icon>
                                            <span class="card-item-text">Automat</span>
                                        </li>
                                    </ul>

<div class="card-price-wrapper">
                                        <p class="card-price"><strong>1600 PLN</strong> / miesiąc</p>

<button class="btn">Wynajmij Teraz</button>
                                    </div>
                                </div>
                            </div>
                        </li>

<div class="card-content">
                                    <div class="card-title-wrapper">
                                        <h3 class="h3 card-title"><a href="#">Cadillac Escalade</a></h3>
                                        <data value="2020" class="year">2020</data>
                                    </div>

<ul class="card-list">
                                        <li class="card-list-item">
                                            <ion-icon name="people-outline"></ion-icon>
                                            <span class="card-item-text">4 Osoby</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="flash-outline"></ion-icon>
                                            <span class="card-item-text">Benzyna</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="hardware-chip-outline"></ion-icon>
                                            <span class="card-item-text">Automat</span>
                                        </li>
                                    </ul>

<div class="card-price-wrapper">
                                        <p class="card-price"><strong>2500 PLN</strong> / miesiąc</p>

<button class="btn">Wynajmij Teraz</button>
                                    </div>
                                </div>
                            </div>
                        </li>

<div class="card-content">
                                    <div class="card-title-wrapper">
                                        <h3 class="h3 card-title"><a href="#">BMW 4 Series GTI</a></h3>
                                        <data value="2021" class="year">2021</data>
                                    </div>

<ul class="card-list">
                                        <li class="card-list-item">
                                            <ion-icon name="people-outline"></ion-icon>
                                            <span class="card-item-text">4 Osoby</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="flash-outline"></ion-icon>
                                            <span class="card-item-text">Benzyna</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="hardware-chip-outline"></ion-icon>
                                            <span class="card-item-text">Automat</span>
                                        </li>
                                    </ul>

<div class="card-price-wrapper">
                                        <p class="card-price"><strong>2100 PLN</strong> / miesiąc</p>

<button class="btn">Wynajmij Teraz</button>
                                    </div>
                                </div>
                            </div>
                        </li>

<div class="card-content">
                                    <div class="card-title-wrapper">
                                        <h3 class="h3 card-title"><a href="#">BMW 4 Series</a></h3>
                                        <data value="2019" class="year">2019</data>
                                    </div>

<ul class="card-list">
                                        <li class="card-list-item">
                                            <ion-icon name="people-outline"></ion-icon>
                                            <span class="card-item-text">4 Osoby</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="flash-outline"></ion-icon>
                                            <span class="card-item-text">Benzyna</span>
                                        </li>

<li class="card-list-item">
                                            <ion-icon name="hardware-chip-outline"></ion-icon>
                                            <span class="card-item-text">Automat</span>
                                        </li>
                                    </ul>

<div class="card-price-wrapper">
                                        <p class="card-price"><strong>1950 PLN</strong> / miesiąc</p>

<button class="btn">Wynajmij Teraz</button>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>

<section class="section get-start">
                <div class="container">
                    <h2 class="h2 section-title">Rozpocznij w 4 prostych krokach</h2>

<h3 class="card-title">Utwórz Profil</h3>

<p class="card-text">Wypełnij wymagane pola poprawnymi danymi</p>

<a href="#" class="card-link">Rozpocznij</a>
                            </div>
                        </li>

<h3 class="card-title">Powiedz nam, jaki samochód chcesz</h3>

<p class="card-text">Określ, czego potrzebujesz: rozmiar, funkcje, budżet.</p>
                            </div>
                        </li>

<h3 class="card-title">Dopasuj swoje potrzeby do sprzedawcy</h3>

<p class="card-text">Przeanalizujemy Twoje preferencje, aby znaleźć odpowiednich sprzedawców</p>
                            </div>
                        </li>

<h3 class="card-title">Zawrzyj umowę</h3>

<p class="card-text">Znajdź idealne dopasowanie dla płynnego i satysfakcjonującego doświadczenia</p>
                            </div>          
                        </li>
                    </ul>
                </div>
            </section>

<ul class="blog-list has-scrollbar">
                        <li>
                            <div class="blog-card">
                                <figure class="card-banner">
                                    <a href="#"><img src="https://i.postimg.cc/PrFY1HPy/blog-1.jpg" alt="Nowe biura w Polsce" class="w-100" loading="lazy"></a>
                                    <a href="#" class="btn card-badge">Firma</a>
                                </figure>

<div class="card-content">
                                    <h3 class="h3 card-title">Otwarcie nowych biur</h3>

<div class="card-meta">
                                        <div class="publish-date">
                                            <ion-icon name="time-outline"></ion-icon>
                                            <time datetime="2025-07-09">9 Lipca 2025</time>
                                        </div>

<li>
                            <div class="blog-card">
                                <figure class="card-banner">
                                    <a href="#"><img src="https://i.postimg.cc/x1wmFPGb/blog-2.jpg" alt="Najbardziej podatne samochody" class="w-100" loading="lazy"></a>
                                    <a href="#" class="btn card-badge">Naprawy</a>
                                </figure>

<div class="card-content">
                                    <h3 class="h3 card-title">Które samochody są najbardziej podatne na awarie</h3>

<div class="card-meta">
                                        <div class="publish-date">
                                            <ion-icon name="time-outline"></ion-icon>
                                            <time datetime="2025-07-01">1 Lipca 2025</time>
                                        </div>

<li>
                            <div class="blog-card">
                                <figure class="card-banner">
                                    <a href="#"><img src="https://i.postimg.cc/gJdZGkTz/blog-3.jpg" alt="Średni wiek samochodów" class="w-100" loading="lazy"></a>
                                    <a href="#" class="btn card-badge">Samochody</a>
                                </figure>

<div class="card-content">
                                    <h3 class="h3 card-title">Statystyki pokazują średni wiek samochodów</h3>

<div class="card-meta">
                                        <div class="publish-date">
                                            <ion-icon name="time-outline"></ion-icon>
                                            <time datetime="2025-06-21">21 Czerwca 2025</time>
                                        </div>

<li>
                            <div class="blog-card">
                                <figure class="card-banner">
                                    <a href="#"><img src="https://i.postimg.cc/XJ8yqSRw/blog-4.jpg" alt="Wymagania przy wynajmie samochodu" class="w-100" loading="lazy"></a>
                                    <a href="#" class="btn card-badge">Firma</a>
                                </figure>

<div class="card-content">
                                    <h3 class="h3 card-title">Co jest wymagane przy wynajmie samochodu?</h3>

<div class="card-meta">
                                        <div class="publish-date">
                                            <ion-icon name="time-outline"></ion-icon>
                                            <time datetime="2025-06-12">12 Czerwca 2025</time>
                                        </div>

<li>
                            <div class="blog-card">
                                <figure class="card-banner">
                                    <a href="#"><img src="https://i.postimg.cc/Zn5vysmX/blog-5.jpg" alt="Nowe zasady użytkowania samochodów" class="w-100" loading="lazy"></a>
                                    <a href="#" class="btn card-badge">Firma</a>
                                </figure>

<div class="card-content">
                                    <h3 class="h3 card-title">Nowe zasady użytkowania naszych samochodów</h3>

<div class="card-meta">
                                        <div class="publish-date">
                                            <ion-icon name="time-outline"></ion-icon>
                                            <time datetime="2025-06-01">1 Czerwca 2025</time>
                                        </div>

<p class="footer-text">Szukaj tanich samochodów do wynajęcia w Polsce. Z ponad 19 000 pojazdów, Ridex oferuje atrakcyjny wybór samochodów dla Ciebie</p>
                </div>

<ul class="footer-list">
                    <li><p class="footer-list-title">Firma</p></li>

<li><a href="#" class="footer-link">O Nas</a></li>
                    <li><a href="#" class="footer-link">Cennik</a></li>
                    <li><a href="#" class="footer-link">Nasz Blog</a></li>
                    <li><a href="#" class="footer-link">Kontakt</a></li>
                </ul>

<ul class="footer-list">
                    <li><p class="footer-list-title">Wsparcie</p></li>

<li><a href="#" class="footer-link">Centrum Pomocy</a></li>
                    <li><a href="#" class="footer-link">Zadaj Pytanie</a></li>
                    <li><a href="#" class="footer-link">Polityka Prywatności</a></li>
                    <li><a href="#" class="footer-link">Regulamin</a></li>
                </ul>

<ul class="footer-list">
                    <li><p class="footer-list-title">Miasta w Polsce</p></li>

<li><a href="#" class="footer-link">Warszawa</a></li>
                    <li><a href="#" class="footer-link">Kraków</a></li>
                    <li><a href="#" class="footer-link">Wrocław</a></li>
                    <li><a href="#" class="footer-link">Gdańsk</a></li>
                    <li><a href="#" class="footer-link">Poznań</a></li>
                    <li><a href="#" class="footer-link">Łódź</a></li>
                    <li><a href="#" class="footer-link">Katowice</a></li>
                    <li><a href="#" class="footer-link">Szczecin</a></li>
                </ul>
            </div>

<p class="copyright">©2025 <a href="#" target="_blank">Dawid Wróbel</a>. Wszelkie prawa zastrzeżone</p>
            </div>
        </div>
    </footer>

CSS

/* Import modern, premium fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Define CSS custom properties */
:root {
    /* Color Palette */
    --primary: hsl(204, 91%, 53%); /* Carolina Blue */
    --primary-light: hsl(204, 92%, 90%); /* Columbia Blue */
    --secondary: hsl(152, 63%, 43%); /* Medium Sea Green */
    --accent: hsl(329, 63%, 52%); /* Deep Cerise */
    --neutral-dark: hsl(219, 21%, 39%); /* Independence */
    --neutral-darker: hsl(210, 11%, 15%); /* Eerie Black */
    --neutral-light: hsl(216, 38%, 95%); /* Alice Blue */
    --background: hsl(0, 0%, 100%); /* White */
    --background-alt: hsl(217, 33%, 92%); /* Alice Blue 4 */
    --text-primary: hsl(240, 22%, 25%); /* Space Cadet */
    --text-secondary: hsl(219, 14%, 60%); /* Manatee */
    --error: hsl(0, 79%, 63%); /* Red Salsa */
    --success: hsl(152, 48%, 89%); /* Honey Dew */
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--secondary));

/* Dark Mode Variables */
    --dark-background: hsl(240, 22%, 20%);
    --dark-background-alt: hsl(240, 22%, 25%);
    --dark-text: hsl(0, 0%, 90%);
    --dark-text-secondary: hsl(0, 0%, 70%);

/* Typography */
    --ff-primary: 'Inter', sans-serif;
    --ff-secondary: 'Poppins', sans-serif;
    --fs-1: clamp(2rem, 5vw, 3.5rem);
    --fs-2: clamp(1.5rem, 4vw, 2.25rem);
    --fs-3: clamp(1.25rem, 3vw, 1.75rem);
    --fs-4: clamp(1rem, 2.5vw, 1.5rem);
    --fs-5: clamp(0.875rem, 2vw, 1.125rem);
    --fs-6: clamp(0.75rem, 1.5vw, 0.875rem);
    --fs-7: clamp(0.625rem, 1vw, 0.75rem);
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;

/* Spacing & Layout */
    --section-padding: clamp(40px, 8vw, 80px);
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --shadow-1: 0 4px 20px hsla(0, 0%, 0%, 0.1);
    --shadow-2: 0 8px 24px hsla(204, 91%, 53%, 0.2);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --transition-short: 0.3s ease;
    --transition-medium: 0.5s ease;
    --transition-long: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --background: var(--dark-background);
        --background-alt: var(--dark-background-alt);
        --text-primary: var(--dark-text);
        --text-secondary: var(--dark-text-secondary);
        --neutral-light: hsl(240, 22%, 25%);
        --gradient-glass: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    }
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: var(--ff-primary);
    font-size: 16px;
    line-height: 1.6;
    scroll-behavior: smooth;
    color: var(--text-primary);
}

body {
    background: var(--background);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-short);
}

button,
input {
    font: inherit;
    border: none;
    background: none;
    outline: none;
}

button {
    cursor: pointer;
}

input {
    width: 100%;
}

li {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

::-webkit-scrollbar {
    width: 12px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius-8);
    border: 2px solid var(--background);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* Utility Classes */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(16px, 5vw, 24px);
}

.section {
    padding: var(--section-padding) 0;
}

.h1, .h2, .h3 {
    font-family: var(--ff-secondary);
    line-height: 1.2;
    color: var(--text-primary);
}

.h1 { font-size: var(--fs-1); }
.h2 { font-size: var(--fs-2); }
.h3 { font-size: var(--fs-3); }

.w-100 { width: 100%; }

/* Button Styles */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: var(--fs-5);
    font-weight: var(--fw-500);
    color: var(--background);
    background: var(--primary);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-2);
    transition: var(--transition-medium);
    overflow: hidden;
    z-index: 1;
    text-transform: uppercase;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: var(--transition-short);
    z-index: -1;
}

.btn:hover,
.btn:focus {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass);
}

.btn:hover::before {
    opacity: 1;
}

.btn ion-icon {
    font-size: 1.25rem;
    --ionicon-stroke-width: 40px;
}

.user-btn {
    background: var(--neutral-light);
    color: var(--neutral-dark);
    padding: 10px;
    min-width: 40px;
    min-height: 40px;
}

.user-btn:hover {
    background: var(--primary-light);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--background);
    box-shadow: var(--shadow-1);
    z-index: 100;
    transition: var(--transition-short);
}

.header.active {
    box-shadow: var(--shadow-glass);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.header-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.header-contact {
    display: none;
}

.header-contact .contact-link {
    font-size: var(--fs-5);
    color: var(--text-primary);
    font-weight: var(--fw-500);
}

.header-contact .contact-time {
    font-size: var(--fs-7);
    color: var(--text-secondary);
}

.nav-toggle-btn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.nav-toggle-btn span {
    width: 24px;
    height: 2px;
    background: var(--neutral-dark);
    transition: var(--transition-short);
}

.nav-toggle-btn span.two {
    transform: scaleX(0.7);
}

.nav-toggle-btn span.three {
    transform: scaleX(0.4);
}

.nav-toggle-btn:hover span,
.nav-toggle-btn:focus span,
.nav-toggle-btn.active span {
    background: var(--primary);
    transform: scaleX(1);
}

.navbar {
    position: fixed;
    top: 80px;
    right: -260px;
    width: 260px;
    height: calc(100vh - 80px);
    background: var(--background);
    padding: 20px;
    visibility: hidden;
    transition: var(--transition-medium);
    z-index: 99;
}

.navbar.active {
    transform: translateX(-100%);
    visibility: visible;
}

.navbar-list {
    display: grid;
    gap: 12px;
}

.navbar-link {
    font-size: var(--fs-5);
    font-weight: var(--fw-500);
    color: var(--text-secondary);
    padding: 8px 0;
    position: relative;
}

.navbar-link:hover,
.navbar-link:focus {
    color: var(--primary);
}

.overlay {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: hsl(216, 38%, 96%);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-short);
}

.overlay.active {
    opacity: 0.7;
    pointer-events: all;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding-top: 100px;
}

.hero-content {
    margin-bottom: 32px;
}

.hero-title {
    max-width: 30ch;
    margin-bottom: 24px;
    font-weight: var(--fw-700);
    text-transform: uppercase;
}

.hero-text {
    color: var(--text-secondary);
    font-size: var(--fs-5);
    line-height: 1.8;
    max-width: 50ch;
    margin-bottom: 32px;
}

.hero-banner {
    background: url('https://i.postimg.cc/5y1Hwbh7/hero-banner.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 120px;
    bottom: 50px;
    right: 50px;
    width: 500px;
    border-radius: var(--radius-16);
    z-index: -1;
}

.hero-form {
    background: var(--gradient-glass);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-16);
    padding: 24px;
    display: grid;
    gap: 16px;
    box-shadow: var(--shadow-glass);
}

.input-wrapper {
    position: relative;
}

.input-label {
    font-size: var(--fs-6);
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.input-field {
    padding: 12px;
    border-radius: var(--radius-8);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transition: var(--transition-short);
}

.input-field:focus {
    border: 2px solid var(--primary);
    background: rgba(255, 255, 255, 0.1);
}

.input-field::placeholder {
    color: var(--text-secondary);
}

.hero-form .btn {
    width: calc(100% - 48px);
    margin: 20px;
}

/* Featured Car Section */
.featured-car .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.featured-car-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-5);
    color: var(--text-secondary);
}

.featured-car-link:hover span,
.featured-car-link:focus span {
    color: var(--text-primary);
}

.featured-car-link ion-icon {
    color: var(--primary);
    font-size: 1.25rem;
    transition: var(--transition-short);
}

.featured-car-list {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.featured-car-card {
    background: var(--gradient-glass);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-16);
    overflow: hidden;
    transition: var(--transition-medium);
    box-shadow: var(--shadow-1);
}

.featured-car-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-glass);
}

.featured-car-card .card-banner {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.featured-car-card .card-banner img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: var(--transition-long);
}

.featured-car-card:hover .card-banner img {
    transform: scale(1.05);
}

.featured-car-card .card-content {
    padding: 24px;
}

.featured-car-card .card-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.featured-car-card .card-title {
    font-size: var(--fs-4);
    width: calc(100% - 60px);
}

.featured-car-card .card-title a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.featured-car-card .card-title a:hover,
.featured-car-card .card-title a:focus {
    color: var(--primary);
}

.featured-car-card .year {
    font-size: var(--fs-6);
    font-weight: var(--fw-600);
    padding: 4px 12px;
    border: 2px dashed var(--primary-light);
    border-radius: var(--radius-8);
}

.featured-car-card .card-list {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 16px;
}

.featured-car-card .card-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-6);
}

.featured-car-card .card-list-item ion-icon {
    font-size: 1.25rem;
    color: var(--primary);
    --ionicon-stroke-width: 38px;
}

.featured-car-card .card-item-text {
    color: var(--text-secondary);
}

.featured-car-card .card-price-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.featured-car-card .card-price {
    font-size: var(--fs-5);
    color: var(--text-primary);
}

.featured-car-card .card-price strong {
    font-size: var(--fs-3);
    font-weight: var(--fw-400);
}

.featured-car-card .fav-btn {
    background: var(--primary-light);
    color: var(--primary);
    min-width: 36px;
    min-height: 36px;
    padding: 0;
}

.featured-car-card .fav-btn:hover,
.featured-car-card .fav-btn:focus {
    background: var(--accent);
    color: var(--background);
}

/* Get Started Section */
.get-start .section-title {
    margin-bottom: 32px;
}

.get-start-list {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.get-start-card {
    background: var(--gradient-glass);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-16);
    padding: 24px;
    transition: var(--transition-medium);
}

.get-start-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glass);
}

.get-start-card .card-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-12);
    margin-bottom: 16px;
    background: var(--primary-light);
    color: var(--primary);
}

.get-start-card .card-icon ion-icon {
    font-size: 1.5rem;
    --ionicon-stroke-width: 45px;
}

.get-start-card .icon-1 { background: var(--accent); color: var(--background); }
.get-start-card .icon-2 { background: var(--primary-light); color: var(--primary); }
.get-start-card .icon-3 { background: var(--success); color: var(--secondary); }
.get-start-card .icon-4 { background: var(--neutral-light); color: var(--accent); }

.get-start-card .card-title {
    font-size: var(--fs-4);
    margin-bottom: 12px;
}

.get-start-card .card-text {
    font-size: var(--fs-6);
    color: var(--text-secondary);
}

.get-start-card .card-link {
    font-size: var(--fs-6);
    color: var(--primary);
    position: relative;
    margin-top: 8px;
}

.get-start-card .card-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition-short);
}

.get-start-card .card-link:hover::before,
.get-start-card .card-link:focus::before {
    width: 100%;
}

/* Blog Section */
.blog .section-title {
    margin-bottom: 32px;
}

.blog-list {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 24px;
    scroll-snap-type: x mandatory;
}

.blog-list li {
    flex: 0 0 300px;
    scroll-snap-align: start;
}

.blog-card {
    background: var(--gradient-glass);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-16);
    overflow: hidden;
}

.blog-card .card-banner {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.blog-card .card-banner img {
    transition: var(--transition-long);
}

.blog-card:hover .card-banner img {
    transform: scale(1.05);
}

.blog-card .card-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: var(--fs-6);
    padding: 8px 16px;
    background: var(--primary);
    color: var(--background);
}

.blog-card .card-content {
    padding: 24px;
}

.blog-card .card-title {
    margin-bottom: 16px;
}

.blog-card .card-title a:hover,
.blog-card .card-title a:focus {
    color: var(--primary);
}

.blog-card .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-6);
    color: var(--text-secondary);
}

.blog-card .publish-date,
.blog-card .contents {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-card .publish-date ion-icon,
.blog-card .contents ion-icon {
    font-size: 1rem;
    color: var(--primary);
    --ionicon-stroke-width: 50px;
}

/* Footer */
.footer {
    background: var(--background-alt);
    color: var(--text-secondary);
}

.footer-top {
    padding: var(--section-padding) 0;
    display: grid;
    gap: 40px;
}

.footer-brand .logo {
    margin-bottom: 20px;
}

.footer-text {
    font-size: var(--fs-6);
    line-height: 1.8;
    max-width: 35ch;
}

.footer-list {
    display: grid;
    gap: 12px;
}

.footer-list-title {
    font-size: var(--fs-4);
    font-weight: var(--fw-600);
    color: var(--text-primary);
}

.footer-link {
    font-size: var(--fs-6);
}

.footer-link:hover,
.footer-link:focus {
    color: var(--primary);
}

.footer-bottom {
    background: var(--gradient-glass);
    backdrop-filter: blur(12px);
    padding: 24px;
    border-radius: var(--radius-16) var(--radius-16) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-list {
    display: flex;
    gap: 20px;
}

.social-link ion-icon {
    font-size: 1.25rem;
    color: var(--text-secondary);
    --ionicon-stroke-width: 40px;
}

.social-link:hover ion-icon {
    color: var(--primary);
}

.copyright {
    font-size: var(--fs-6);
}

.copyright a {
    font-family: var(--ff-secondary);
}

.copyright a:hover,
.copyright a:focus {
    color: var(--primary);
}

/* Media Queries */
@media (min-width: 580px) {
    .header-actions .btn span {
        display: block;
        padding: 0 12px;
    }

.header-actions .btn:first-of-type ion-icon {
        display: none;
    }

.featured-car-card .card-list {
        grid-template-columns: 1fr 1fr;
    }

.featured-car-card .card-price {
        margin-right: auto;
    }

.featured-car-card .btn:last-child {
        min-width: max-content;
        padding-inline: 15px;
    }
}

@media (min-width: 768px) {
    .header-contact {
        display: block;
        text-align: center;
    }

.hero {
        display: flex;
        align-items: center;
    }

.hero-form {
        grid-template-columns: repeat(4, 1fr);
    }

.input-wrapper:not(:last-of-type) {
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }

.featured-car-list {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
    }

.get-start-list {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }

.footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }

.featured-car-list {
        grid-template-columns: repeat(3, minmax(300px, 1fr));
    }

.get-start-list {
        grid-template-columns: repeat(4, minmax(200px, 1fr));
    }

.footer-top {
        grid-template-columns: 1fr 1fr 1fr 2fr;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }

.nav-toggle-btn,
    .overlay {
        display: none;
    }

.navbar,
    .navbar.active {
        all: unset;
        margin-left: auto;
    }

.navbar-list {
        display: flex;
        gap: 32px;
    }

.hero {
        min-height: 80vh;
    }

.hero-banner {
        right: 50px;
        width: 630px;
    }

.hero-form {
        max-width: 900px;
    }
}

Page de destination de location de voiture

Recommandé

Un code par hunganh

Exemple d'animation de chargement CSS

Extrait de code d'animation CSS Heart

HTML

CSS

JS

Recommandé

Un code par hunganh

Exemple d'animation de chargement CSS

Extrait de code d'animation CSS Heart

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS