practica_html-css-flexbox/flexbox.html at master · mike123456654321/practica_html-css-flexbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/flexbox.css">
    <title>EJEJMPLO DE FLEXBOX</title>
</head>

<body>
    <!--  representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, pero también otros elementos como un logo, una sección que aglutine secciones de encabezados, una formulario de búsqueda o cosas parecidas. https://developer.mozilla.org/es/docs/Web/HTML/Elemento/header -->
    <header> EJEMPLO FLEXBOX</header>

    <!-- utlisamos un div para crear una caja y separarlos de las demas etiquetas-->
    <div id='main'>

        <!--  representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la sindicación. https://developer.mozilla.org/es/docs/Web/HTML/Elemento/article-->
        <article>
            <h1>ARTICULO</h1>
            <p>
                La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.
            </p>
        </article>

        <!-- creacion de un menu de navegacion-->
        <nav>
            <h1>PLATAFORMA DE PRACTICA</h1>
            <a href="https://loading.io/flexbox/">FLEXBOX GENERATOR</a>
        </nav>

        <!-- representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido. https://developer.mozilla.org/es/docs/Web/HTML/Elemento/aside -->

        <aside>
            <h1>JUEGO DE APRENDISAJE</h1>

            <p>con este juego podras poner en practica la estructura FLEBOX </p>
            <br>
            <a href="https://flexboxfroggy.com/#es">
           FLEXBOX FROGGY</a>

        </aside>
    </div>

   <!-- representa un pie de página para el contenido de sección más cercano o el elemento  raíz de sección (p.e, su ancestro mas cercano <article>, <aside>, <nav>, <section>,<blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). https://developer.mozilla.org/es/docs/Web/HTML/Elemento/footer-->
    <footer>BEDU TECH</footer>

</body>

</html>