Disposición de estructura de la página con CSS

Ejercicio 35

Viendo las características de la siguiente página, resolverla de la misma manera



index.html

<!DOCTYPE html>

<html>

    <head>

        <title>Pagina visual</title>

        <style>

            * {

            box-sizing: border-box;

            }


            header{

                background-color: darkslategray;

                padding: 30px;

                text-align: center;

                font-size: 35px;

                color: white;

            }

            nav{

                float: left;

                width: 30%;

                background-color: darksalmon;

                padding: 20px;

                color: darkslategray;

            }

            nav ul {

            list-style-type: none;

            padding: 0;

            }


            main{

                float: right;

                padding: 20px;

                width: 70%;

                background-color: white;

                color: black;

            }

            aside{}

            footer{

                background-color:darkslategray;

                padding: 10px;

                color: white;

            }

        </style>

    </head>

    <body>

        <header>

            <h1>Mi página de prueba</h1>

        </header>

        <nav>

            <ul>

                <li>Acerca de nosotros</li>

                <li>Contacto</li>

            </ul>

        </nav>

        <main>

            <h1>PAGINA INICIO</h1>

            <p>Esta es mi página principal de inicio, aquí escribiré información importante</p>

            <p>Esta es mi página principal de inicio, aquí escribiré información importante</p>

            <p>Esta es mi página principal de inicio, aquí escribiré información importante</p>

            <p>Esta es mi página principal de inicio, aquí escribiré información importante</p>

            <p>Esta es mi página principal de inicio, aquí escribiré información importante</p>

            <p>Esta es mi página principal de inicio, aquí escribiré información importante</p>

            <p>Esta es mi página principal de inicio, aquí escribiré información importante</p>

        </main>

        <footer>

            <marquee>Este es el pie de mi página</marquee>

        </footer>

    </body>

</html>

...

Comentarios

Entradas más populares de este blog

Formulario 2