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:
¡¡ Comencemos!!
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
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.
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>
*{
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