télécharger la carte d'application

1123 alqsdeus

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 October 2024

Carte de remplissage en survol

29 June 2025

Extrait de code du menu déroulant HTML

16 November 2024

Basculer la barre latérale

HTML

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="react.css">
</head>
<body>

<div class="gradient-background"></div>
    <section class="download-app">
        <h2>Download the App Now</h2>
        <p>If you want to discover much more, download the app now from the App Store or Google Play</p>
        <div class="buttons">
            <a href="#" class="btn google-play">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/2560px-Google_Play_Store_badge_EN.svg.png" alt="Google Play">
            </a>
            <a href="#" class="btn app-store">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/2560px-Download_on_the_App_Store_Badge.svg.png" alt="App Store">
            </a>
        </div>
    </section>

CSS

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #2f2f2f, #000000, #474747);
    background-size: 300% 300%;
    animation: gradientMove 10s ease infinite;
    z-index: -1;
}

.download-app {
    background: rgba(255, 255, 255, 0.95);
    padding: 60px 40px;
    border-radius: 30px;
    box-shadow: 0px 12px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
    max-width: 700px;
    width: 90%;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out;
    backdrop-filter: blur(20px);
}

.download-app h2 {
    font-size: 3.2em;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(to right, #000000, #212121, #545354);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    animation: slideInDown 1s ease-out;
}

.download-app p {
    font-size: 1.2em;
    color: #000000;
    margin-bottom: 40px;
    line-height: 1.8;
    max-width: 550px;
    margin: 0 auto;
    animation: fadeInUp 1.5s ease-out;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;

}

.btn {
    display: inline-block;
    width: 100%;
    max-width: 230px;
    height: 70px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    margin: 10px;
}

.btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    border-radius: 20px;
}

.btn:hover {
    transform: translateY(-5px);
    box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.2);
}

.btn:hover img {
    opacity: 0.85;
}

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

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

Recommandé

Carte de remplissage en survol

Extrait de code du menu déroulant HTML

Basculer la barre latérale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS