2

🃏 COMO CREAR TU PROPIA CARD 🃏

En este tutorial vamos a ver como crear nuestra propia tarjetas de presentacion! 😎

1 - Empezamos creando nuestro archivo HTML
En el “title” vamos a poner el texto que veremos en la pestaña del navegador

<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>CARDtitle>
head>
<body>

body>
html>

2 - Vamos a agregar en el lo que vayamos a usar en nuestra tarjeta, en este caso agregaremos

  • imagen
  • Nombres
  • Informacion
  • Link
<body><section><divclass="card"><imgsrc="(Tuimagen)"alt="img"><p>
               Edwin Segura
            p>
            <p>
               Desarrollador de Software
            p>
            <divid="footer">Tarjeta de presentaciondiv>
            <ahref="(Tulink)">Sigueme!a>
        div>
    section>
body>

3 - Ahora agregaremos los estilos, para poner todo lindo! 🎆

Iniciamos centrando todo y dandole un display flex, para poder organizar todo de mejor manera dentro del contenedor.

section
        {
    display: flex;
    justify-content: center;
        }

4 - ahora vamos a estilizar la tarjeta, agregamos varios parametros

  • centramos : justify-items: center;

  • agregamos el margen con los bordes : margin-top

  • el color del fondo : background-color

  • sombra : box-shadow

  • Tamaño : width, height

.card
    {
    display: grid;
    justify-items: center;
    margin-top: 50px;
    width: 450px;
    height: 600px;
    background-color: #7BC9FF;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0px0px35px#26205e;
    }

5 - Ahora vamos meterle estilos a la imagen 📷 que elegimos para nuestra tarjeta

  • sombra : box-shadow

  • el borde : border-radius

.cardimg
    {
    margin-top: 50px;
    -webkit-box-shadow: 0px0px81px15pxrgb(220, 106, 238, 0.6);
    -moz-box-shadow: 0px0px81px15pxrgba(220, 106, 238, 0.6);
    box-shadow: 0px0px81px15pxrgba(220, 106, 238, 0.6);
    width: 60%;
    border-radius: 50%;
    }

6 - seguiremos estilizando los parrafos ✏ elegimos el color, tamaño y el margen con el contenedor

.cardp:nth-child(3)
    {
    color: #26205e;
    margin-top: -60px;
    font-size: 20px;
    }

    .cardp:nth-child(2)
    {
    margin-top: 20px;
    font-weight: 700;
    font-size: 40px;
    color: #2e0063;;
    }

7 - ahora vamos a estilizar el footer, similar a como estilizamos los anteriores contenedores

.card#footer
    {  
    color: #2e0063;
    font-size: 30px;
    width: 100%;
    background-color: #40AFCC;
    text-align: center;
    padding-top: 10px;
    }

8 - Vamos a poner estilo en los

(Parrafos) hover nos ayuda a cambiar el color de el texto cuando pasamos el cursos por encuima de este

.cardp:hover
    {
        color: #4e00a7;
    }
    .card#footer:hover
    {
        color: #4e00a7;
    }
    .carda:hover
    {
        color: lawngreen;     
    }

Asi quedaría nuestra carta de presentacíon :

Dejaré todo el codigo completo, por si quieres usarlo y darle tu toque!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CARD</title>
</head>
<style>
    section
        {
    display: flex;
    justify-content: center;
        }

    .card
    {
    display: grid;
    justify-items: center;
    margin-top: 50px;width: 450px;
    height: 600px;
    background-color: #7BC9FF;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0px 0px 35px #26205e;
    }

    .card img
    {
    margin-top: 50px;
    -webkit-box-shadow: 0px 0px 81px 15px rgb(220, 106, 238, 0.6);
    -moz-box-shadow: 0px 0px 81px 15px rgba(220, 106, 238, 0.6);
    box-shadow: 0px 0px 81px 15px rgba(220, 106, 238, 0.6);width: 60%;
    border-radius: 50%;
    }

    .card p:nth-child(3)
    {
    color: #26205e;
    margin-top: -60px;font-size: 20px;
    }

    .card p:nth-child(2)
    {
    margin-top: 20px;font-weight: 700;font-size: 40px;color: #2e0063;;
    }
    .card p:hover
    {
        color: #4e00a7;
    }
    .card #footer:hover
    {
        color: #4e00a7;
    }
    .card #footer
    {  
    color: #2e0063;font-size: 30px;width: 100%;
    background-color: #40AFCC;
    text-align: center;
    padding-top: 10px;
    }
    .card a 
    {
        margin-top: 20px;color: #1a6443;
    }
    .card a:hover
    {
        color: lawngreen;
        
    }
    </style>
<body>
    <section>
        <div class="card">
            <img src="perfil.png" alt="img">
            <p>
               Edwin Segura
            </p>
            <p>
               Desarrollador de Software
            </p>
            <div id="footer">Tarjeta de presentacion</div>
            <a href="https://konect.gg/makia">Sigueme!</a>
        </div>
    </section>
</body>
</html>   
Escribe tu comentario
+ 2