Layout and box models

HTML & CSS
1

Good morning

I’m trying to recreate a web site with a lookalike of an image At least I have clear that I should have a header (with 2 columns?), a navigation bar, a three column layout and a footer, but due to my total lack of kowledge (this is my first HTML&CSS course) I do not have any idea from were start from. I attach the image of the layout waiting if someone could give me a hand.

Best regards

1191×675 48 KB

2

I didn’t see it in the forum!!

3

When you buy it at Ali Express

1191×675 48 KB

And when arrives home

1737×1079 50.8 KB

I post my code, to see if someone can help me!! THX

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <style>
        body {
            font: 24px Helvetica;
            background: #999999;
        }
        
        .container {
            width: 90%;
            max-width: 1140px;
            background: #ffffff;
            margin: 50px auto;
        }
        
        #main {
            min-height: 400px;
            margin: 0px;
            padding: 0px;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row;
            flex-flow: row;
        }
        
        #main > article {
            margin: 4px;
            padding: 5px;
            border: 1px solid #cccc33;
            border-radius: 7pt;
            background: #000000;
            -webkit-flex: 3 1 60%;
            flex: 3 1 60%;
            -webkit-order: 2;
            order: 2;
        }
        
        #main > nav {
            margin: 4px;
            padding: 5px;
            border: 1px solid #ffffff;
            background: ffffff;
            -webkit-flex: 1 6 20%;
            flex: 1 6 20%;
            -webkit-order: 1;
            order: 1;
        }
        
        #main > aside {
            margin: 4px;
            padding: 5px;
            border: 1px solid #ffffff;
            background: ffffff;
            -webkit-flex: 1 6 20%;
            flex: 1 6 20%;
            -webkit-order: 3;
            order: 3;
        }
        
        header {
            display: block;
            margin: 4px;
            padding: 5px;
            min-height: 100px;
            border: 1px solid #EEEDED;
            background: #ffffff;
        }
        
        footer {
            font: 12px Helvetica;
            text-align: center;
            display: block;
            margin: 0px;
            padding: 5px;
            min-height: 100px;
            border: 1px solid #EEEDED;
            background: #38FF90;
        }
        
        .lletrap {
            font: 12px Helvetica;
            text-align: justify;
            display: block;
            margin: 4px;
            padding: 5px;
            min-height: 100px;
            background: #000000;
            color: white;
        }
        
        .lletrapc {
            font: 12px Helvetica;
            text-align: center;
            display: block;
            margin: 4px;
            padding: 5px;
            min-height: 100px;
            border: 1px solid #EEEDED;
            background: #000000;
            color: white;
        }
        
        .lletram {
            font: 18px Helvetica;
            text-align: center;
            display: block;
            margin: 4px;
            padding: 5px;
            min-height: 40px;
            background: #EAC80D;
        }
        
        navi {
            display: block;
            margin: 0px;
            padding: 5px;
            min-height: 60px;
            border: 1px solid #EEEDED;
            background: #38FF90;
        }
        
        hr {
            border: 0;
            align: "left";
            width: 75%;
            color: #38FF90;
            background-color: #38FF90;
            height: 5px;
        }
        
        .navega {
            border: 1px solid #ccc;
            border-width: 1px 0;
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        
        .navega li {
            display: inline;
        }
        
        .navega a {
            display: inline-block;
            padding: 10px;
        }
        /* Too narrow to support three columns */
        
        @media all and (max-width: 640px) {
            #main,
            #page {
                -webkit-flex-flow: column;
                flex-flow: column;
            }
            #main > article,
            #main > nav,
            #main > aside {
                /* Return them to document order */
                -webkit-order: 0;
                order: 0;
            }
            #main > nav,
            #main > aside,
            header,
            footer {
                min-height: 50px;
                max-height: 50px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="hr" align="left">
                <hr />
            </div>
        </header>
        <navi>
            <ul class="navega">
                <li><a href="#">INICIO</a></li>
                <li><a href="#news">PROYECTOS</a></li>
                <li><a href="#contact">COLABORA</a></li>
            </ul>
        </navi>

        <div id='main'>
            <nav>

            </nav>
            <article>
                <p class="lletram">¿Quién investiga?</p>
                <p class="lletrap">La actividad de I+D+i de la UOC se organiza en 45 grupos de investigación y se desarrolla en los estudios y en el Internet Interdisciplinary Institute (IN3). También se colabora en investigación e innovación en los otros dos centros: el eLearn Center (eLC) y el eHealth Center (eHC).</article>
            <article>
                <p class="lletram">¿Qué se investiga?</p>
                <p class="lletrap">
                    Promovemos las ideas innovadoras basadas en datos disponibles y procuramos que la mejora resultante sea tanto incremental como rupturista.</p>
            </article>
            <article>
			<p class="lletram">Publicaciones</ul>
			
			
			
			</article>

            <aside></aside>
        </div>
        <footer>
            <p>PEC3 de la asignatura Lenguajes y estándares web, 2018. Nombre autor
                <p>Los textos han sido elaborados a partir de la información que proporciona UOC R&I - http://research.uoc.edu/portal/es/ri/index.html
        </footer>
</body>

</html>
4

The first place to start would be to run your code through the validator and fix the errors.

2 Likes
5

I have corrected all errors. I have posted the code in https://codepen.io/saotome99/pen/OvopJr

Hope this page can look like the test one.

Thanks to all

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.