- Crear el documento html y poner la estructura del mismo.
"en">
"UTF-8">
"X-UA-Compatible"content="IE=edge">
"viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
body>
html>
- Crear una section y agregarle un div con el nombre “class”.
<section>
"card">
div>
section>
- Insertar las imagenes o textos necesarios para la carta (a las imagenes les pusimos un class"[nombre descriptivo]" para el style).
**1. Hacer el apartado de style en el head.
"UTF-8">
"X-UA-Compatible"content="IE=edge">
"viewport"content="width=device-width, initial-scale=1.0">
<title>Cristiano Ronaldotitle>
<style>
style>
head>
- Hacer que el apartado section sea flex para luego poder modificar las imagenes.
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Cristiano Ronaldotitle>
<style>
section{
width: 100%;
display: flex;
justify-content: center;
}
style>
head>
- Crear el style .card{} para poder tener un fondo que represente la carta y el body (en este caso se le puso una background-image).
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Cristiano Ronaldotitle>
<style>
section{
width: 100%;
display: flex;
justify-content: center;
}
body {
background-image: url('https://www.civitatis.com/f/espana/madrid/guia/estadio-santiago-bernabeu-m.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.card{
width: 300px;
height: 500px;
background: #FCF3CF;
border-radius: 20px;
}
style>
head>
- Imagen por imagen ir cambiando sus alturas y anchuras para que este bien, ademas agregar margenes para que queden simetricas.
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Cristiano Ronaldotitle>
<style>
section{
width: 100%;
display: flex;
justify-content: center;
}
body {
background-image: url('https://www.civitatis.com/f/espana/madrid/guia/estadio-santiago-bernabeu-m.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.card{
width: 300px;
height: 500px;
background: #FCF3CF;
border-radius: 20px;
}
.sporting{
margin-left: 10px;
margin-top: 10px;
width: 30px;
height: 40px;
}
.united{
width: 40px;
height: 40px;
margin-left: 45px;
}
.madrid{
width: 60px;
height: 40px;
margin-left: 30px
}
.juventus{
width: 60px;
height: 40px;
margin-left: 5px;
}
.cristiano{
display: block;
margin: 0 auto;
margin-top: 150px;
width: 50%;
border-radius: 50px;
}
style>
head>
- Modificar el color del texto y centrarlo.
"UTF-8">
"X-UA-Compatible"content="IE=edge">
"viewport"content="width=device-width, initial-scale=1.0">
<title>Cristiano Ronaldotitle>
section{
<span class="hljs-keyword">width</span>: <span class="hljs-number">100</span>%<span class="hljs-comment">;</span>
display: flex<span class="hljs-comment">;</span>
justify-content: center<span class="hljs-comment">;</span>
}
body {
background-image: url(<span class="hljs-string">'https://www.civitatis.com/f/espana/madrid/guia/estadio-santiago-bernabeu-m.jpg'</span>)<span class="hljs-comment">;</span>
background-size: cover<span class="hljs-comment">;</span>
background-<span class="hljs-keyword">repeat</span>: no-<span class="hljs-keyword">repeat</span><span class="hljs-comment">;</span>
}
.card{
<span class="hljs-keyword">width</span>: <span class="hljs-number">300</span>px<span class="hljs-comment">;</span>
height: <span class="hljs-number">500</span>px<span class="hljs-comment">;</span>
background: <span class="hljs-meta">#FCF3CF;</span>
border-radius: <span class="hljs-number">20</span>px<span class="hljs-comment">;</span>
}
.sporting{
margin-left: <span class="hljs-number">10</span>px<span class="hljs-comment">;</span>
margin-top: <span class="hljs-number">10</span>px<span class="hljs-comment">;</span>
<span class="hljs-keyword">width</span>: <span class="hljs-number">30</span>px<span class="hljs-comment">;</span>
height: <span class="hljs-number">40</span>px<span class="hljs-comment">;</span>
}
.united{
<span class="hljs-keyword">width</span>: <span class="hljs-number">40</span>px<span class="hljs-comment">;</span>
height: <span class="hljs-number">40</span>px<span class="hljs-comment">;</span>
margin-left: <span class="hljs-number">45</span>px<span class="hljs-comment">;</span>
}
.madrid{
<span class="hljs-keyword">width</span>: <span class="hljs-number">60</span>px<span class="hljs-comment">;</span>
height: <span class="hljs-number">40</span>px<span class="hljs-comment">;</span>
margin-left: <span class="hljs-number">30</span>px
}
.juventus{
<span class="hljs-keyword">width</span>: <span class="hljs-number">60</span>px<span class="hljs-comment">;</span>
height: <span class="hljs-number">40</span>px<span class="hljs-comment">;</span>
margin-left: <span class="hljs-number">5</span>px<span class="hljs-comment">;</span>
}
.cristiano{
display: block<span class="hljs-comment">;</span>
margin: <span class="hljs-number">0</span> auto<span class="hljs-comment">;</span>
margin-top: <span class="hljs-number">150</span>px<span class="hljs-comment">;</span>
<span class="hljs-keyword">width</span>: <span class="hljs-number">50</span>%<span class="hljs-comment">;</span>
border-radius: <span class="hljs-number">50</span>px<span class="hljs-comment">;</span>
}
.cardp{
<span class="hljs-keyword">color</span>: black<span class="hljs-comment">;</span>
<span class="hljs-keyword">font</span>-size: <span class="hljs-number">50</span>px<span class="hljs-comment">;</span>
text-align: center<span class="hljs-comment">;</span>
}
style>
head>```Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
