estilos css - introduccion frontend

3646

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><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="tarjeta"><h1>WANTED</h1><imgsrc="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;
        }
        .tarjetap:nth-child(3){
            font-size: 35px;
            color: #000 ;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        .tarjetap:nth-child(4){
            font-size: 40px;
            color: #000 ;
            margin: 0;
            font-family: Arial, Helvetica, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }
        .tarjetap:nth-child(5){
            font-size: 45px;
            color: #000 ;
            margin: 0;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
    </style>