Scribd Logo
Upload

Welcome to Scribd!

  • EJERCICIO1

    Uploaded by

    Fernando Vargas Blandino
    3 views3 pages
    The document provides instructions for creating a card layout using Flexbox with 5 diamonds arranged in 3 rows. It begins with the initial HTML structure and shows it formatted as a card. It then shows steps to add CSS rules to style the card with a grey background, set its height, width and padding. Rules are added to make the parent and rows flex containers and align items vertically and horizontally.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides instructions for creating a card layout using Flexbox with 5 diamonds arranged in 3 rows. It begins with the initial HTML structure and shows it formatted as a card. It then shows steps to add CSS rules to style the card with a grey background, set its height, width and padding. Rules are added to make the parent and rows flex containers and align items vertically and horizontally.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    3 views3 pages

    EJERCICIO1

    Uploaded by

    Fernando Vargas Blandino
    The document provides instructions for creating a card layout using Flexbox with 5 diamonds arranged in 3 rows. It begins with the initial HTML structure and shows it formatted as a card. It then shows steps to add CSS rules to style the card with a grey background, set its height, width and padding. Rules are added to make the parent and rows flex containers and align items vertically and horizontally.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 3

    1.

    - Hacer esta figura, usando flexbox

    <div class="carta">
    <div id="fila1">
    <div class="diamante">1</div>
    <div class="diamante">2</div>
    </div>
    <div id="fila2">
    <div class="diamante">3</div>
    </div>
    <div id="fila3">
    <div class="diamante">4</div>
    <div class="diamante">5</div>
    </div>
    </div>
    PRIMER PASO:

    <div class="carta">
    <div id="fila1">
    <div class="diamante">1</div>
    <div class="diamante">2</div>
    </div>
    <div id="fila2">
    <div class="diamante">3</div>
    </div>
    <div id="fila3">
    <div class="diamante">4</div>
    <div class="diamante">5</div>
    </div>
    </div>

    SEGUNDO PASO

    .carta{
    background: grey;
    height: 300px;
    width: 200px;
    padding:15px;
    display:flex;
    Justify-content:space-between;
    }

    .numero{
    font-size: 30px;
    }
    TERCER PASO
    .carta{
    background: grey;
    height: 300px;
    width: 200px;
    padding:15px;
    display:flex;
    Justify-content:space-between;
    }

    .numero{
    font-size: 30px;
    }

    #fila2{
    Display:flex;
    align-items:center;
    }

    CUARTO PASO
    .carta{
    background: grey;
    height: 300px;
    width: 200px;
    padding:15px;
    display:flex;
    justify-content:space-between;
    }
    .numero{
    font-size: 30px;

    }
    #fila2 {
    display:flex;
    align-items:center;
    }

    #fila1, #fila3 {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    }

    You might also like