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
I didn’t see it in the forum!!
When you buy it at Ali Express
And when arrives home
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>
The first place to start would be to run your code through the validator and fix the errors.
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
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.