Las tarjetas son elementos esenciales en el diseño web moderno. Son ideales para mostrar información de manera organizada y atractiva. En este artículo, te enseñaremos cómo crear tarjetas elegantes utilizando HTML y CSS. Además, te proporcionaremos un ejemplo de código que puedes utilizar como punto de partida para tus proyectos. Diseño de tarjetas HTML y CSS.
¿Por qué utilizar tarjetas en tu sitio web?
Las tarjetas son una excelente manera de presentar contenido de manera visualmente atractiva. Son versátiles y se pueden utilizar para mostrar productos, perfiles de usuarios, publicaciones de blog y mucho más. Algunas de las razones por las que deberías considerar utilizar tarjetas en tu sitio web son:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Diseño de tarjetas HTML y CSS</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<section class="section">
<div class="container">
<div class="section-cards">
<div class="section-card">
<span>1</span>
<h2>Tarjeta 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#">Saber más</a>
</div>
<div class="section-card">
<span>2</span>
<h2>Tarjeta 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<a href="#">Saber más</a>
</div>
<div class="section-card">
<span>3</span>
<h2>Tarjeta 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<a href="#">Saber más</a>
</div>
</div>
</div>
</section>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'poppins', sans-serif;
background-color: #f9f9f9;
font-size: 16px;
}
.container {
max-width: 900px;
padding: 0 15px;
margin: auto;
}
.section {
padding: 80px 0;
min-height: 100vh;
display: flex;
justify-content: center;
}
.section-cards {
display: flex;
justify-content: space-between;
}
.section-card {
background-color: #ffffff;
border-radius: 10px;
padding: 30px;
position: relative;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
width: 31%;
}
.section-card:hover {
transform: translateY(-10px);
background-image: linear-gradient(45deg, #faafd4, #f7dde1);
cursor: pointer;
}
.section-card span {
display: block;
background-color: #ff69b4;
color: #ffffff;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 24px;
margin: 0 auto 15px;
}
.section-card h2 {
font-size: 24px;
color: #333333;
margin-bottom: 10px;
}
.section-card p {
color: #666666;
line-height: 1.5;
margin-bottom: 20px;
}
.section-card a {
display: inline-block;
text-transform: capitalize;
background-color: #ff69b4;
color: #ffffff;
padding: 8px 20px;
border-radius: 25px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3 ease-in-out;
}
.section-card a:hover {
background-color: #ff4486;
}Este código crea una estructura de tarjeta que incluye un título, una descripción y un enlace para obtener más información. Además, se han aplicado estilos CSS para darle a las tarjetas un aspecto atractivo y moderno.
Personaliza y amplía
Puedes personalizar este código para adaptarlo a tus necesidades específicas. Puedes cambiar los colores, fuentes y tamaños de las tarjetas para que coincidan con la identidad visual de tu sitio web. También puedes agregar más tarjetas copiando y pegando el código de la tarjeta dentro del elemento .section-cards.
En resumen, las tarjetas son una herramienta valiosa en el diseño web moderno. Con este ejemplo de código HTML y CSS, tienes un punto de partida sólido para crear tarjetas atractivas y funcionales en tu sitio web. ¡Experimenta y crea tarjetas únicas que cautiven a tus visitantes!
