Descargar tarjeta de aplicación

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

23 April 2025

Formulario de inicio de sesión de Panda

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

Un código de Metehan

Un código de robustvariable23

Formulario de inicio de sesión de Panda

HTML

CSS

JS

Recomendado

Un código de Metehan

Un código de robustvariable23

Formulario de inicio de sesión de Panda

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS