para Iniciar con la creación de esta tarjeta
iniciamos creando nuestro archivo con extensión html
y iniciamos con nuestro codigo de estructura 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 en nuestro body creamos una etiqueta de section y un div con una clase llamada tarjeta y entre este div pondremos un h1 una imagen y 3 etiquetas de parrafo
<section>
<div class="tarjeta">
<h1>WANTED</h1>
<img src="https://www.elimparcial.com/resizer/qpkzpyeqUG21sqebfj5j_YtJ89c=/1200x630/filters:format(webp):quality(70)/cloudfront-us-east-1.images.arcpublishing.com/elimparcial/4PX4SPPZ5RHCVMGEK7BAY4LW6M.jpg" alt=""/>
<p>Dear or Alive</p>
<p>Nico Robin</p>
<p>$ 70.000.000</p>
</div>
</section>
<code>
ya para finalizar dentro del nuestras etiquetas head creamos nuestros estilos segun las etiquetas amnteriormente creadas, usamos varios estilos comunes como bordes bacground tamaños el displey flex border redondeados entre otros
section{
background: papayawhip;
display: flex;
justify-content: center;
}
.tarjeta{
background: #bfaf93;
width: 400px;
height: 500px;
border: 1px solid #000;
border-radius: 20px;
}
h1{
font-size: 60px;
text-align: center;
}
img {
width: 80%;
border-radius: 10px;
margin-left: 10%;
}
.tarjeta p{
text-align: center;
font-weight: bold;
}
.tarjeta p:nth-child(3){
font-size: 35px;
color: #000 ;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.tarjeta p:nth-child(4){
font-size: 40px;
color: #000 ;
margin: 0;
font-family: Arial, Helvetica, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.tarjeta p:nth-child(5){
font-size: 45px;
color: #000 ;
margin: 0;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
</style>
<code>
y al final este es nuestro resultad
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
