Cómo implementar una Card de presentación con HTML y CSS.

702

Pensé en una representación de mi mismo como estudiante de platzi, implementando un botón donde me dirija a la pagina principal de Platzi, tambien le di un fondo que sea un color dark mode que me encanta y un poco de iluminucidad en los bordes. 😃

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mi Avatar</title></head><style>
    * {
        font: message-box;
        background-color: DarkSlateGray;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        background-color: DarkSlateGray;
    }

    section {
        width: 100%;
        display: flex;
        justify-content: center;
    } 
    .card-avatar {
        width: 500px;
        height: 600px;
        background-color: SeaGreen;
        border-radius: 20px;
        display: grid;
        margin-top: 20px;
        justify-content: center;
        overflow: hidden;
        box-shadow: 0px0px25px SeaGreen;
    }
    .card-avatarimg{
        width: 300px;
        height: 300px;
        box-shadow: 0px0px25pxrgb(87, 222, 145);
        border-radius: 500px;
        margin-top: 10px;
        object-fit: scale-down;
    }
    .card-avatarp{
        height: 0px;
        text-align: center;
    }

    .card-avatarp:nth-child(2){
        color:rgb(255, 255, 255);
        font-size: 30px;
    }

    .card-avatarp:nth-child(3){
        margin-top: 20px;
        font-weight: 200px;
        font-size: 30px;
        color:rgb(255, 255, 255)
    }

    .boton {
    display: inline-block;
    color: rgb(0, 0, 0);
    font-size: 20px;
    background-color: SpringGreen;
    text-align: center;
    height: 50px;
    padding: 10px20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    margin: 20px;
}

.boton:hover {
    background-color: #168d32;
}


</style><body><section><divclass="card-avatar"><imgsrc="/avatar.jpg"alt="avatar"><p>David Cevallos</p><p>Estudiante de Platzi</p><aclass="boton"href="https://platzi.com/home/"target="_blank"rel="noopener noreferrer">Seguir aprendiendo</a></div></section></body></html>```