Motivado por la clase que nos dio la teacher decidí crear mi propia tarjeta.
Los mostraré inicialmente cómo me quedó por medio de una imagen y luego les daré un paso a paso de lo que tuve que hacer para lograr
este diseño:
Para lo cual es necesario un editor de código, en mi caso quiero usar vs code que es más versátil y permite
un preview de la página mientras se está trabajando.
Es necesario iniciar con el esqueleto de cualquier HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Luego de esto es necesario añadir una secciónque que tiene la particularidad de demarcar un bloque que tiene un propósito común.
<section></section>```
Después se añade un div con un selector de clase de nombre card que va a contenerizar todo lo de la tarjeta:
<div class=“card”></div>```
El selector de clase también tiene su particular estilo, así:
Dicho estilo como su nombre lo indica define características principales de la tarjeta como son
el tamaño del contenedor en 2D, el color del contenedor, bordes redondeados y evita que los elementos
internos se salgan del contenedor al que se definió un overflow oculto.
.card {
width: 300px;
height: 460px;
background: papayawhip;
border-radius: 20px;
overflow: hidden;
}
Luego se define un elemento img que ocupa toda la tarjeta a lo ancho:
<img src="https://i.ibb.co/sv57CWmg/superman.png"
alt="">
Se le añade un src tipo URL porque no tenemos un repositorio para vincular archivos
con rutas relativas.
a esta imagen se le crea un estilo con selector de clase y de tipo, así:
.card img {
width: 100%;
}
Solo se afecta el ancho para lograr el comportamiento requerido de la imagen.
Con el fin de evitar que el estilo se propague a todas las imagenes del HTML se añade el selector de tipo como descendiente del selector de clase.
Luego agregamos la imagen que sirve de avatar
<div class="avatar">
<img src="https://i.ibb.co/Q7jwZDfS/logo.png" alt="">
</div>
Si notamos está contenida en un div con selector de clase “avatar”:
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
margin: -50px auto 10px;
border: 5px solid white;
}
Dicho selector tiene un tamaño del contenedor (width: 100px, height: 100px) para definir el diametro de la imagen, border-radius: al 50% convierte ese contenedor cuadrado en un círculo, el overflow en estado hidden para evitar que la imagen se salga de los límites del contenedor. margin: -50px auto 10px para afectar los márgenes del contenedor hacer que salga 50 pixeles más arriba del elemento que está más arriba, el valor “auto” es requerido para centrar el contenedor dentro del contenedor principal de la tarjeta.
Luego se añaden cada uno de los elementos de la tarjeta en DIV para añadir información útil:
<div class="card_title">✌️Ageo Andrés Fuentes Meriño✌️</div>
<div class="card_subtitle">✨Java Development.✨</div>
<div class="card_description">🤞<strong>Descripción:</strong>
Me apasiona el Desarrollo de Software principalmente cuando
el reto es Matemático.🤞</div>
<div class="card_footer">
<div class="card_date">
<strong>🗓️Fecha:</strong> 24/09/1984</div>
<div class="card_location">
<strong>📍Ubicación:</strong> Remoto</div>
</div>
<div class="card_wrapper">
<button class="card_btn">TRANSPARENTE</button>
<button class="card_btn card_btn-solid">SÓLIDO</button>
</div>
Cada uno de los cuales tiene estilos que han sido usados a lo largo del curso:
.card_title {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
}
.card_title:hover {
color: orange;
}
.card_subtitle {
text-align: center;
font-size: 1rem;
color: green;
margin-bottom: 15px;
}
.card_subtitle:hover {
color: violet;
}
.card_wrapper {
display: flex;
justify-content: space-around;
}
.card_btn {
padding: 10px 20px;
border: 2px solid turquoise;
background: transparent;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
color: turquoise;
transition: background 0.3s, color 0.3s;
}
.card_btn-solid {
background: turquoise;
color: white;
}
.card_btn:hover {
background: turquoise;
color: white;
}
.card_btn-solid:hover {
background: transparent;
color: turquoise;
}
.card_description {
text-align: center;
padding: 0 45px;
margin-bottom: 15px;
font-size: 0.9rem;
color: salmon;
}
.card_description:hover {
color: dodgerblue;
}
.card_footer {
display: flex;
justify-content: space-between;
padding: 0 15px;
font-size: 0.87rem;
color: blueviolet;
margin-bottom: 10px;
}
.card_date, .card_location {
font-style: normal;
}
.card_footer:hover {
color: crimson;
}
Puedes ver todos los aspectos que se modifican en los textos pero más bien a sus contenedores para que haya consistencia y eficiencia en los elementos, se estructura el contendio del html, sin atributos innecesarios, se juega con los eventos de los elementos “HOVER”, se controla el espaciado y alineación.
La página quedaría así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 100%;
}
.card {
width: 300px;
height: 460px;
background: papayawhip;
border-radius: 20px;
overflow: hidden;
}
.card img {
width: 100%;
}
.card p {
text-align: center;
}
.card p:nth-child(3) {
color: turquoise ;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
margin: -50px auto 10px;
border: 5px solid white;
}
.card_title {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
}
.card_title:hover {
color: orange;
}
.card_subtitle {
text-align: center;
font-size: 1rem;
color: green;
margin-bottom: 15px;
}
.card_subtitle:hover {
color: violet;
}
.card_wrapper {
display: flex;
justify-content: space-around;
}
.card_btn {
padding: 10px 20px;
border: 2px solid turquoise;
background: transparent;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
color: turquoise;
transition: background 0.3s, color 0.3s;
}
.card_btn-solid {
background: turquoise;
color: white;
}
.card_btn:hover {
background: turquoise;
color: white;
}
.card_btn-solid:hover {
background: transparent;
color: turquoise;
}
.card_description {
text-align: center;
padding: 0 45px;
margin-bottom: 15px;
font-size: 0.9rem;
color: salmon;
}
.card_description:hover {
color: dodgerblue;
}
.card_footer {
display: flex;
justify-content: space-between;
padding: 0 15px;
font-size: 0.87rem;
color: blueviolet;
margin-bottom: 10px;
}
.card_date, .card_location {
font-style: normal;
}
.card_footer:hover {
color: crimson;
}
</style>
</head>
<body>
<section>
<div class="card">
<img src="https://i.ibb.co/sv57CWmg/superman.png"
alt="">
<div class="avatar">
<img src="https://i.ibb.co/Q7jwZDfS/logo.png"
alt="">
</div>
<div class="card_title">✌️Ageo Andrés Fuentes Meriño✌️</div>
<div class="card_subtitle">✨Java Development.✨</div>
<div class="card_description">🤞<strong>Descripción:</strong>
Me apasiona el Desarrollo de Software principalmente cuando
el reto es Matemático.🤞</div>
<div class="card_footer">
<div class="card_date">
<strong>🗓️Fecha:</strong> 24/09/1984</div>
<div class="card_location">
<strong>📍Ubicación:</strong> Remoto</div>
</div>
<div class="card_wrapper">
<button class="card_btn">TRANSPARENTE</button>
<button class="card_btn card_btn-solid">SÓLIDO</button>
</div>
</div>
</section>
</body>
</html>
Para llegar a ver una página como la de esta imagen:
Me gustó porque es de alguna manera chévere en la práctica.
Gracias por ver el tutorial.
Curso de Frontend Developer
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
