Cómo crear un perfil de usuario con HTML y CSS

555

Bienvenido a este tutorial en el cual aprenderás a crear un perfil con información básica, utilizando HTML y CSS!

Primero

Empecemos generando nuestra plantilla de HTML.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Perfil de usuario</title></head><body></body></html>

Segundo

Ahora es momento de escribir el codigo de nuestra tarjeta, en mi caso en el body agregué lo siguiente:

<body><divclass="container"><sectionclass="carta"><imgsrc="AQUI EL FONDO DE TU CARTA"alt="Fondo de la carta"class="fondoCarta" ><imgsrc="AQUI LA IMAGEN DE PERFIL"alt="Foto de perfil"class="fotoPerfil"><p>Nombre</p><p>Cargo</p><sectionclass="info"><div>Ciudad</div><div>Enviar mensaje</div></section><sectionclass="influencia"><div>8,000</div><div>Seguidores</div><div>1,000</div><div>Seguidos</div></section><sectionclass="boton"><buttonid="botonSeguir">Seguir</button></section></section></div></body>

Como verás, te marqué los lugares donde puedes poner tu nombre, tu cargo, la foto de perfil y la imagen del fondo de tu carta.

Ingresa tu mismo los datos que quieres mostrar!

Tercero

Es momento de personalizar tu carta, para este caso yo lo hice en el mismo archivo HTML, simplemente en el head agregué la sección “Style”.
Pero tu puedes hacerlo en otro archivo diferente, hazlo como tu prefieras.
En mi caso la personalicé de la siguiente manera:

<style>html{
            font-family: 'Segoe UI';
        }
        .container{
            width: 100%;
            height: 900px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
        }
        .carta{
            width: 450px;
            border: 1px solid black;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgb(26,26,26);
            color: rgb(240, 240, 240);
        }
        .fondoCarta{
            margin-top: -7rem;
            width: 500px;
            height: auto;
            z-index: 1;
        }
        .fotoPerfil{
            position: relative;
            margin-top: -4.5rem;
            border-radius: 80px;
            width: 150px;
            border: 2px solid black;
            z-index: 2;
        }
        .cartap:nth-child(3){
            margin-top: 0.5rem;
            font-size: 25px;
            font-weight: bold;
        }
        .cartap:nth-child(4){
            font-size: 20px;
            margin-top: -24px;
        }

        .info{
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between ;
            margin-bottom: -0.5rem;
            align-items: center;
        }

        .infodiv:nth-child(1){
            width: 50%;
            font-size: 20px;
            position: relative;
            text-align: center;
            border-right: 1px solid rgb(36, 34, 34);
        }

        .infodiv:nth-child(2){
            width: 50%;
            font-size: 20px;
            position: relative;
            text-align: center;
        }
        .influencia{
            width: 100%;
            height: 70px;
            margin-top: 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            background: rgb(46, 46, 46);
        }
        .influenciadiv{
            text-align: center;
            font-size: 20px;
        }
        .influenciadiv:nth-child(1){
            text-align: center;
            grid-column: 1;
            grid-row: 1;
            margin-top: 10px;
            border-right: 1px solid rgba(245, 245, 245, 0.123);
        }
        .influenciadiv:nth-child(3){
            margin-top: 10px;
        }
        .influenciadiv:nth-child(2){
            text-align: center;
            grid-column: 1;
            grid-row: 2;
            margin-bottom: 6px;
            border-right: 1px solid rgba(245, 245, 245, 0.123);
        }
        .boton{
            width: 100%;
            height: 40px;
            display: flex;
            background: rgba(7, 1, 29, 0.89);
            justify-content: center;
        }
        #botonSeguir{
            background-color: transparent;
            border: 0cap;
            font-size: 24px;
            color: white;
            font-weight: bold;
        
    </style>