Paso diseñar una card responsivo utilizando HTML y CSS.

2390

Creamos un documento HTML.


<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
body>
html>

Agregamos en la etiqueta “” contenido.

<section>
        <divclass="card">
            <imgsrc="imagenes/rubiks-cube-digital-art-wallpaper.jpg"alt="portada">
            <sectionclass="imagen">
                <imgclass="perfil"src="imagenes/pngwing.com.png"alt="perfil">
            section>
            <divclass="cardInfo">
                <h1>Nombresh1>   
            div>
            <sectionclass="footer">
                <p>Profesionp>
            section>
        div>

    section>

Después agregamos una entre las etiquetas “” y “” la etiqueta “” para empezar a darle estilo a la información agregada.

<style>body {
        background-image:linear-gradient(45deg,#d2dae2, #1e272e );
        font-family: Arial, Helvetica, sans-serif;
    }
    section {            
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .card {
        width: 300px;
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #3498db;
        border-radius: 15px;
        overflow: hidden;
        text-align: center;
        box-shadow: 10px10px10px#c79610;
    }
    .footer{
        display: flex;
        flex-direction: column;
        align-items: center;            
    }
    .perfil{
        position: absolute;
        border-radius: 50%;
        height: 100px;
        width: 100px;
        border: 5px solid #a76d22;
        top: auto;
    }
    .cardInfo{
        display: flex;
        width: 100%;
        flex-direction: column;
        margin: 60px auto 10px;
        align-items: center;
    }
    .cardInfoh1 {
        width: 75%;
        margin: 0;
        border-bottom: 1px solid gray;
    }

style>