ऐप कार्ड डाउनलोड करें

1592 alqsdeus

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

23 July 2024

बटन क्लिक पर Div छिपाएँ, एनिमेशन प्रारंभ करें

29 November 2024

कुशल ऐप58 द्वारा एक कोड

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

ऐप कार्ड डाउनलोड करें

अनुशंसित

पंजीकरण के साथ लॉगिन करें

बटन क्लिक पर Div छिपाएँ, एनिमेशन प्रारंभ करें

कुशल ऐप58 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

पंजीकरण के साथ लॉगिन करें

बटन क्लिक पर Div छिपाएँ, एनिमेशन प्रारंभ करें

कुशल ऐप58 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS