1

Tutorial fácil para realizar una Card de presentación utilizando html y CSS

Si eres nuevo en este mundo del fronted una de las mejores maneras de afianzar tus conocimientos es realizando una card, ya que con esta puedes practicar conceptos de maquetación, principales etiquetas de html y propiedades de CSS para que puedas personalizarla como tu desees. Si decidiste tomar este reto debes tener en cuenta lo siguiente:

  1. Tener conocimientos previos en html y CSS
  2. Tener un editor de código instalado en tu PC
  3. Estar listo para empezar

¡¡ Comencemos!!

  1. Lo primero que tienes que hacer es abrir tu editor de código y crear el documento de html, por buenas prácticas este documento que es el inicial debe llevar por nombre “index” y debe terminar con la extensión html, así: index.html.
    Para poder comenzar a escribir tu código debes poner el encabezado de html. Te voy a enseñar una forma fácil de hacerlo, oprimes ! y seguido la tecla Tab y listo, ya tienes tu encabezado html

  2. Lo siguiente que debes hacer el crear tu hoja de estilo, hay dos maneras de hacerlo, la primera es dentro de tu archivo de html con una etiqueta y la segunda es creando una nueva hoja igual como lo hiciste con el documento de html, a este si le puedes poner cualquier nombre, pero la terminación debe ser CSS, así: card.css.

  3. Ahora si manos a la obra, vamos a darle el esqueleto a tu card en el html


<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Tutorial cardtitle>
    <linkrel="stylesheet"href="card.css">

head>
<body>

    <divclass="container">

        <imgsrc="./imagenes/pexels-photo-270632.jpeg"alt="">
        <imgsrc="./imagenes/descarga.png"alt="">
        <h1>
            Carolina Luque Casallas
        h1>
        <p>
            Técnica laboral en desarrollo de softward
        p> 

        <divclass="redes">
            <imgsrc="./imagenes/x.png"alt="">
            <imgsrc="./imagenes/linkid.png"alt=""> 
            <imgsrc="./imagenes/qr.png"alt="">  
        div>         

    div> 

  1. Por último, para poder darle el estilo elegido para tu card se aplicarán las propiedades de CSS de la siguiente manera
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html{

    background-color: 	rgb(0, 0, 0);
    font-size: 62.5%;
}
.container{
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    width: 600px;
    height: 600px;
    background-color: #2f4f4fb3;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    margin: 50px500px50px450px;

}
.containerimg:nth-child(1){
    width: 100%;
    height: 250px;    
 }
 .containerimg:nth-child(2){
    position: relative;
    width: 20%;
    top: -60px;
    border-radius: 20px;
 }
  .containerh1{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    top: 10px;
 }
 .containerp{
    font-family: cursive;
 }

 .redes{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width:100%;

}

.redesimg:nth-child(1){
   position: relative;
   width: 5%;
   height: 35px;
   top: 55px;
   right: 30px;

}
.redesimg:nth-child(2){
    position: relative;
    width: 5%;
    height: 30px;
    top: 55px;

 }
 .redesimg:nth-child(3){
    position: relative;
    width: 5%;
    height: 30px;
    top: 55px;
    left: 40px;
 }


Espero te haya sido útil este pequeño tutorial y puedas aplicarlo a los ejercicios que realices para practicar, toma esta plantilla como base y realiza los cambios que necesites de acuerdo a estilo que elijas darle a la card

Escribe tu comentario
+ 2