Tecnología de rescisión

Abrir en el editor Publica tu código

Recomendado

15 January 2025

Un código de Mete

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Cars Website</title>
    
    <link rel="stylesheet" href="./style.css">
    
    <link rel="stylesheet" href="./fontawesome-free-6.4.0-web/css/all.css">
    <style>
        /* Ajout du style pour le menu utilisateur */
        .user-menu {
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

/* Icône de l'utilisateur */
        .user-menu::before {
            content: "";
            font-size: 24px;
            margin-right: 10px;
            color: white;
        }

/* Menu déroulant caché par défaut */
        .dropdown {
            display: none;
            position: absolute;
            top: 30px;
            right: 0;
            background-color: #333;
            min-width: 160px;
            border-radius: 5px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
            z-index: 1;
        }

.dropdown a {
            display: block;
            padding: 12px 16px;
            text-align: left;
            color: white;
            text-decoration: none;
        }

.dropdown a:hover {
            background-color: #575757;
        }

/* Afficher le menu déroulant lorsque l'élément est survolé */
        .user-menu:hover .dropdown {
            display: block;
        }

/* Style des liens "Se connecter" et "Créer un compte" */
        .user-links {
            display: flex;
            align-items: center;
        }

.user-links a {
            color: white;
            text-decoration: none;
            padding: 10px;
            margin-left: 10px;
        }

.user-links a:hover {
            background-color: #575757;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    
    <nav>
        <div class="container nav-container">
            <a href="index.html" class="logo"><h3>Resstech.</h3></a>
            <ul class="nav-link">
                <li><a href="index.html" style="--i:1;" class="active">Home</a></li>
                <li><a href="lieu.html" style="--i:2;">About</a></li>
                <li><a href="services.html" style="--i:3;">Services</a></li>
                <li><a href="contact.html" style="--i:5;">Contact</a></li>
                
                
                <li class="user-menu">
                    
                    <div class="user-links">
                        <a href="connexion.html">Se connecter</a>
                        <a href="Inscription.html">Créer un compte</a>
                    </div>
                </li>
            </ul>
            <ul class="social-link">
                <li><a href="#" style="--i:1;"><i class="fab fa-facebook"></i></a></li>
                <li><a href="#" style="--i:2;"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#" style="--i:3;"><i class="fab fa-instagram"></i></a></li>
            </ul>
        </div>
    </nav>

<header>
        <div class="container header-container">
            <div class="header-left">
                <h1>Car Dealing Experience.</h1>
                <h3>Redefine It!</h3>
                <p>
                    Discover the best car models tailored for your needs. We offer a wide range of vehicles <br>
                    with state-of-the-art features, comfort, and performance. Your dream car is just a click away!
                </p>
                <a href="cars.html" class="btn">Explore Cars</a>
                
                <div class="car-options">
                    <a href="bmw-neuve.html" class="car-btn">
                        <img src="icons8-car-rental-parakeet-line-96.png" alt="BMW Neuve" class="car-icon">
                        <p>BMW NEUVE</p>
                    </a>
                    <a href="bmw-occasion.html" class="car-btn">
                        <img src="icons8-car-sale-96.png" alt="BMW Occasion" class="car-icon">
                        <p>BMW OCCASION</p>
                    </a>
                </div>
                
            </div>
            <div class="header-right">
                <div class="sq-box">
                    <img src="./BMW-M4-G82-PNG-NO-BACKGROUND-1024x614.png.webp" alt="BMW M4">
                </div>
            </div>
        </div>
        <div class="sq-box2"></div>
    </header>

<div class="footer">
        <p>© 2025 EnilsonFer Demoo . Tous droits réservés.</p>
    </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

:root {
    --color-primary: #bee317;
    --color-white: #eaeaea;
    --color-dark: #333;
    --color-black: #222;
}

.btn {
    display: inline-block;
    width: fit-content;
    padding: 12px 28px;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: var(--color-white);
    letter-spacing: .4px;
    font-weight: 600;
    transition: .4s ease;
    opacity: 0;
    animation: logoAni 1s ease forwards;
    animation-delay: 1.3s;
}

.btn:hover {
    background: transparent;
    color: var(--color-primary);
}

.container {
    max-width: 1620px;
    width: 90%;
    margin: 0 auto;
}

/* .......................Start Nav Bar...................... */
nav {
    width: 100%;
    height: 5rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: grid;
    place-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-container ul {
    display: flex;
    align-items: center;
    gap: 30px;
}

.logo h3 {
    font-size: 25px;
    color: var(--color-black);
    opacity: 0;
    animation: logoAni 1s ease forwards;
}

.nav-link li a {
    color: var(--color-black);
    font-size: 17px;
    transition: .4s ease;
    display: inline-block;
    animation: NavliaAni forwards 1s ease;
    animation-delay: calc(.2s * var(--i));
    opacity: 0;
}

.nav-link li a:hover {
    color: var(--color-primary);
}

.nav-link li .active {
    color: var(--color-primary);
}

.social-link li a {
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transform: rotate(45deg);
    transition: .4s ease;
    animation: socialAni forwards 1s ease;
    animation-delay: calc(.2s * var(--i));
    opacity: 0;
}

.social-link li a:hover {
    border-color: var(--color-white);
}

.social-link li a i {
    transform: rotate(-45deg);
    font-size: 20px;
    color: var(--color-white);
}

/* .......................End Nav Bar...................... */

/* .......................Start Header Section...................... */
header {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.header-left {
    max-width: 620px;
    position: relative;
}

.header-left h1 {
    font-size: 54px;
    line-height: 1.2;
    color: var(--color-black);
    animation: H1Ani forwards 1s ease;
    opacity: 0;
    animation-delay: 1s;
}

.header-left h3 {
    font-size: 40px;
    font-weight: 400;
    color: var(--color-primary);
    margin-top: .5rem;
    animation: H1Ani forwards 1s ease;
    opacity: 0;
    animation-delay: .8s;
}

.header-left p {
    margin: 15px 0 30px;
    line-height: 150%;
    font-size: 16px;
    animation: logoAni forwards 1s ease;
    opacity: 0;
    animation-delay: .6s;
}

.header-container {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}

.header-right {
    position: relative;
    width: 450px;
    height: 450px;
    transform: rotate(45deg);
    right: -7%;
}

.sq-box {
    height: 100%;
    width: 100%;
    border: 25px solid var(--color-primary);
    background: var(--color-white);
    box-shadow: -15px 15px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: zoomOut 1s ease forwards;
    animation-delay: 1.3s;
}

.sq-box img {
    position: absolute;
    transform: rotate(-45deg);
    max-width: 700px;
    top: 130px;
    left: -180px;
    opacity: 0;
    animation: carAni forwards 1s ease;
    animation-delay: 1.6s;
}

.sq-box2 {
    position: absolute;
    width: 700px;
    height: 700px;
    background: var(--color-primary);
    transform: rotate(45deg);
    top: -26%;
    right: -26%;
    z-index: -1;
    opacity: 0;
    animation: sqbox2Ani forwards 1s ease;
    animation-delay: .3s;
}

/* .......................End Header Section...................... */

/* .......................Car Models Section...................... */
.car-models {
    padding: 50px 0;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centre horizontalement */
    justify-content: flex-start;  /* Aligne les éléments en haut */
    min-height: 100vh;  /* Assure que la section prend toute la hauteur de la page */
}

.car-models h1 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-dark);
}

.cars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.car-card {
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 20px;
    background: var(--color-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.car-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.car-card img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.car-card h3 {
    margin: 15px 0 10px;
    color: var(--color-dark);
}

.car-card p {
    font-size: 14px;
    color: var(--color-dark);
}

/* .......................End Car Models Section...................... */

/* .......................Animation Start...................... */
@keyframes logoAni {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes NavliaAni {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes socialAni {
    0% {
        transform: translateX(100px) rotate(45deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(45deg);
        opacity: 1;
    }
}

@keyframes H1Ani {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1.1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes carAni {
    0% {
        transform: translate(180px, -300px) scale(0) rotate(-45deg);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(-45deg);
        opacity: 1;
    }
}

@keyframes sqbox2Ani {
    0% {
        right: -40%;
        opacity: 0;
    }
    100% {
        right: -26%;
        opacity: 1;
    }
}
/* .......................End Animation...................... */

/* Car Options Section */
.car-options {
    display: flex;
    gap: 20px;
    justify-content: flex-end; /* Aligner à droite */
    margin-top: 20px;
}

.car-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 25px; /* Arrondir les coins */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: var(--color-white);
    letter-spacing: .4px;
    font-weight: 600;
    transition: .4s ease;
    text-decoration: none;
}

.car-btn:hover {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.car-btn .car-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px; /* Espacement entre l'image et le texte */
}

.car-btn p {
    font-size: 16px;
    margin: 0;
}

/* Explore Button */
.explore-btn {
    display: flex;
    justify-content: flex-end; /* Aligner à droite */
    margin-top: 30px;
}

.btn {
    display: inline-block;
    width: fit-content;
    padding: 12px 28px;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 25px; /* Arrondir les coins */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: var(--color-white);
    letter-spacing: .4px;
    font-weight: 600;
    transition: .4s ease;
}

.btn:hover {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.footer {
    text-align: center;
    margin-top: 40px;
    padding: 10px;
    background-color: #bee317;
    color: rgb(0, 0, 0);
}

Tecnología de rescisión

Recomendado

Escalada de la torre circular

Efecto de botón de burbuja

Un código de Mete

HTML

CSS

JS

Recomendado

Escalada de la torre circular

Efecto de botón de burbuja

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS