Webleb - fragmentos de código - Descargar tarjeta de aplicación

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

Descargar tarjeta de aplicación

Recomendado

Etiqueta de Búsqueda

Código fuente HTML5 del juego Stick Merge

Un código de Mete

HTML

CSS

JS

Recomendado

Etiqueta de Búsqueda

Código fuente HTML5 del juego Stick Merge

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS