Tutorial de carta de presentación utilizando diseño responsivo.

2887

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>```

hace un año

Escribe tu comentario

+ 2

Entradas relacionadas

Tutorial Html y Css (en pocas palabras)

Implementar un diseño responsivo es una excelente manera de asegurarte de que tu sitio web se vea bien en diferentes dispositivos. aca te de

mauricio.e.rodriguez94

como crear una ficha de precentacion html

alguna vez te an encargado una ficha de precentacion o solo quieres poner aprueva tus abilidades hoy te enseñare como crear tu propia ficha

vr963085

Abriendo tu tercer ojo con Posicionamiento CSS

<htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.

sandra.arriagar

Tutorial Html y Css (en pocas palabras)

Implementar un diseño responsivo es una excelente manera de asegurarte de que tu sitio web se vea bien en diferentes dispositivos. aca te de

mauricio.e.rodriguez94