Para este tutorial les enseñaré a hacer unas **cards **que pueden usar en su portafolio donde presentar lo básico de su proyecto, dándole un toque neón, además aplicaré lo aprendido sobre html y css.
Para empezar debemos hacer la estructura en el HTML, para esto ocuparemos un “<Section>” donde pondremos nuestras cartas
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"href="style.css">
<title>Tutorialtitle>
head>
<body><section>
section>
body>
html>
Después en el archivo Css lo hacemos “flex” y “wrap” para que sea responsivo (se acomode en teléfonos) le damos un ancho de toda la pantalla, y lo alineamos al centro con justify content y alineamos su contenido al centro con align items
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
font: 1rem'Montserrat', sans-serif;
}
section{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100vw;
}
despues en el archivo html creamos un div y le asignamos la clase “card”, este contendra la informacion, imagen y boton para leer mas
<section><divclass="card"></div></section>y le damos estilo en css
.card{
display: flex;
flex-direction: column;
width: 400px;
height: 500px;
margin: 40px;
background-color: #057ddf;
border-radius: 10px;
box-shadow: 0040px#00DDFF;
overflow: hidden;
position: relative;
align-items: center;
color: white;
}
ahora le agregaremos la imagen en html adentro del div y le daremos la clase de “card__image”
<div class="card">
<imgclass="link a la imagen"alt="image"></div>ahora en el css añadimos esto
.card__image{
width: 100%;
height: 45%;
object-fit: cover;
object-position: center;
}
Después en el HTML adentro del div de classe card, agregamos un H2 con la clase de “card__title” para poner el titulo del proyecto y en seguida agregamos un p con la clase de “card__text” para ponerle la descripcion del proyecto.
<div class="card">
<imgclass="link a la imagen"alt="image"><h2class="card__title">Project 2</h2><pclass="card__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sed excepturi dolorem, culpa minima corrupti. Dolorem, beatae blanditiis doloribus repellat, quidem obcaecati iure laborum fuga officia eos recusandae ipsam nesciunt?</p></div>despues en el css le damos tamaño y acomodamos
.card__title{
font-size: 1.5rem;
font-weight: 500;
margin-top: 20px;
margin-bottom: 10px;
background-color: #057ddf;
}
.card__text{
padding: 20px;
background-color: #057ddf;
}
Por último agregamos un botón para que despés le podamos agregar la funcionalidad para llevar a mas detalles del proyecto
<div class="card">
<imgclass="link a la imagen"alt="image"><h2class="card__title">Project 2</h2><pclass="card__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga sed excepturi dolorem, culpa minima corrupti. Dolorem, beatae blanditiis doloribus repellat, quidem obcaecati iure laborum fuga officia eos recusandae ipsam nesciunt?</p><buttonclass="card__button">▶</button></div>Por último solo le cambiamos el color del borde y los redondeamos
.card__button{
width: 50px;
height: 50px;
background-color: white;
border-color: rgba(255, 255, 255, 0);
border-radius: 50%;
font-weight: bold;
font-size: 1.5rem;
}
y eso sería todo, espero les sirva.
