Posicionamiento de Layout Básico en CSS

Clase 40 de 56 • Curso Definitivo de HTML y CSS

Resumen

¿Cómo crear un diseño básico con CSS?

Aprender a crear un layout básico es esencial en el mundo del desarrollo web. Al principio, puede parecer un reto, pero una vez que entiendes los conceptos de display y position en CSS, el proceso se vuelve mucho más claro. En el entorno laboral, te enfrentarás a peticiones de crear páginas que incluyan un header, un footer, una sección principal y quizá una sidebar para anuncios o contenido adicional. Vamos a explorar cómo puedes lograr esto de manera efectiva.

¿Qué elementos debe incluir el layout?

Al trabajar en un layout web, es importante distinguir las diferentes secciones que componen la página:

Header: Generalmente incluye el logo y la barra de navegación.
Sección principal: Área de contenido principal con texto e imágenes de ejemplo.
Sidebar: Espacio para elementos complementarios como noticias, blog posts o multimedia.
Footer: Contiene información básica de la empresa y enlaces a redes sociales.

¿Cómo posicionar los contenedores correctamente?

El posicionamiento de los elementos es un paso crucial. La intención es lograr que cada sección del layout esté en su lugar deseado. Aquí es donde los conceptos de display y position entran en juego. Algunas recomendaciones para un diseño eficiente incluyen:

Utilizar display: block para asegurarte de que cada sección ocupe su propio espacio y no se mezcle con otras.
Incorporar position: relative o position: absolute cuando sea necesario para ajustes más precisos.
Comenzar con un layout estático: ve ajustando los elementos en sus posiciones básicas antes de añadir estilos más complejos.

¿Cómo personalizar el diseño?

Una vez que tienes el esqueleto del layout listo, puedes comenzar a personalizarlo. Aunque el estilo no es el enfoque principal en un primer prototipo, añadir toques personales puede darte una mejor comprensión de cómo CSS da vida a una página web.

Colores y fuentes: Aplica diferentes paletas de color y tipografías para mejorar la estética visual.
Imágenes y multimedia: Asegúrate de que las imágenes se vean bien y funcionen con el diseño general.
Estilos avanzados de CSS: Una vez dominado el layout básico, considera experimentar con funcionalidades como Display Flex para añadir más dinámica y flexibilidad a tu diseño.

Crear un layout básico es el primer paso hacia el desarrollo de páginas web efectivas y atractivas. No te detengas aquí, sigue explorando y personalizando tus diseños. Aprender y practicar es un ciclo continuo, y cada nuevo conocimiento te llevará a crear interfaces más complejas y funcionales.

Usuario anónimo

user•

hola continuando con la temática de mi desafío anterior, les dejo aquí mi reto

Usuario anónimo

user•

Hola Mariana,esta muy chévere! como colocaste los textos (Equipación, moda, accesorios y ofertas) al lado de los logos? saludos.

Usuario anónimo

user•

hola agentemotorsas, lo hice con las propiedades inline-block y position, es cuestión de ir calculando, es mas fácil hacerlo con flexbox, pero lo hice de este modo porque es sobre el tema que se estaba explicando.

Usuario anónimo

user•

Desafìo completado :D

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Among us Layout</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <header class="header">
        <figure class="logo">
            <img src="./img/logo.png" alt="among us logo">
        </figure>
        <nav class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Maps</a></li>
                <li><a href="#">Skins</a></li>
                <li><a href="#">Server</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <aside class="crewmate">
            <figure class="crewmate__img">
                <img src="./img/purple.png" alt="purple crewmate">
                <img src="./img/yellow.png" alt="yellow crewmate">
                <img src="./img/pink.png" alt="pink crewmate">
                <img src="./img/green.png" alt="green crewmate">
                <img src="./img/white.png" alt="white crewmate">

            </figure>
        </aside>
        <section class="map">
            <h1 class="map__title">POLUS</h2>
            <figure>
                <img src="./img/map.png" alt="polus map">
            </figure>
        </section>
    </main>
    <footer class="footer">
        <div class="social__media">
            <a href="#">Coded by: ALEJANDRA LOPEZ</a>
        </div>
    </footer>
</body>
</html>

/* La fuente usada es In your face, Joffrey! hecha por 
reema.chhabra@hotmail.com */

@font-face {
  font-family: AmongUs;
  src: url(./font.ttf);
}

body {
  background-color: black;
  font-family: AmongUs;
  width: 100vw;
  height: 100vh;
}

header {
  height: 5vh;
  background-color: black;
  border-bottom: #25282c 2px solid;
}

main {
  height: 88vh;
}

.logo {
  display: inline-block;
  margin: 0 0 0 30px;
}

.logo img {
  height: 40px;
}

.nav {
  display: inline-block;
  list-style: none;
  position: absolute;
  right: 0;
}

.nav li {
  display: inline-block;
  margin-right: 3rem;
  font-size: 1.5rem;
}

.nav li a {
  color: white;
  text-decoration: none;
}

.crewmate {
  width: 10%;
  min-width: 150px;
  height: 100%;
  background-color: #25282c;
  display: inline-block;
  padding: 0;
}

.crewmate__img {
  margin: 0em;
}

.crewmate__img img {
  height: 120px;
  margin: 1.5em;
  background-color: #6f7174;
  border-radius: 10px;
  display: block;
}

.map {
  width: 90%;
  height: 80vh;
  display: inline-block;
  background-color: black;
  position: absolute;
}

.map__title {
  text-align: center;
  font-size: 3rem;
  color: white;
}

.map figure {
  text-align: center;
  width: 95%;
}

.map img {
  height: 700px;
  text-align: center;
}

footer {
  width: 100vw;
  height: 4vh;
  border-top: #25282c 2px solid;
}

.social__media {
  margin: 10px;
  text-align: center;
  font-size: 2rem;
}

.social__media a {
  color: white;
}

Usuario anónimo

user•

jajaja el mejor aporte de todos

Usuario anónimo

user•

He estado una tarde para conseguirlo, pero aquí está, gracias por la inspiración xD

Usuario anónimo

user•

Este es mi resultado (muy simple xD)

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>layout - Example</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <figure>Logo</figure>
    <nav>
      <ul>
        <li>Inicio</li>
        <li>Cursos</li>
        <li>Blog</li>
        <li>Acerca De</li>
      </ul>
    </nav>
  </header>
  <main>
    <aside>
      <div>Elemento 1</div>
      <div>Elemento 2</div>
      <div>Elemento 3</div>
      <div>Elemento 4</div>
    </aside>
    <section>
      Area principal
    </section>
  </main>
  <footer>
    <div class="footer-social">
      Redes Sociales
    </div>
    <div class="footer-info">
      Información
    </div>
  </footer>
</body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

li {
  list-style: none;
}

header {
  height: 10vh;
  background-color: cadetblue;
}

main {
  height: 80vh;
}

footer {
  height: 10vh;
  background-color: darkorange;
}

figure, nav {
  display: inline-block;
}

figure {
  margin: 1rem;
}

li {
  display: inline-block;
  margin: 1rem;
}

nav {
  position: absolute;
  right: 1.5rem;
}

aside, section {
  display: inline-block;
  height: 80vh;
}

aside {
  width: 20vw;
  background-color: chocolate;
}

aside div {
  height: 15vh;
  margin: 3vh;
  background-color: crimson;
}

section {
  position: absolute;
  left: 20vw;
  width: 80vw;
  padding: 1rem;
  background-color: darkblue;
}

.footer-social, .footer-info {
  display: inline-block;
  margin: 1rem;
}

.footer-info {
  position: absolute;
  right: 1.5rem;
}

Usuario anónimo

user•

Estaba muy atorado y tu post me ayudo mucho, ahora solo tengo que entenderlo. Gracias.

Usuario anónimo

user•

De nada

Usuario anónimo

user•

Reto cumplido Sin usar flex ni grid Clave: Conocer bien el funcionamiento de los valores de display y position.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="header">
    <figure class="header__logo">
      <img src="./images/logo.webp" alt="Logo">
      <img src="./images/platzi.webp" alt="Platzi">
    </figure>
    <nav class="nav">
      <ul class="nav__list">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Cursos</a>
        </li>
        <li>
          <a href="#">Instructores</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <aside class="routes">
      <figure class="routes__images">
        <img src="./images/route_1.png" alt="Route 1">
        <img src="./images/route_2.png" alt="Route 1">
        <img src="./images/route_3.png" alt="Route 1">
        <img src="./images/route_4.png" alt="Route 1">
      </figure>
    </aside>
    <section class="content">
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem debitis nulla reprehenderit culpa architecto fuga deserunt quos repellat officia ut magni quibusdam earum, aliquam, vitae dicta blanditiis excepturi! Neque, dolorum.
      </p>
    </section>
  </main>
  <footer class="footer">
    <p>About us</p>
  </footer>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.header {
  background-color: peru;
}
.header__logo, .nav, .nav__list li {
  display: inline-block;
  margin: 5px;
}
.nav {
  position: absolute;
  right: 0;
}
.nav__list {
  list-style: none;
}
.nav__list li a {
  text-decoration: none;
  color: white;
}
.main {
  height: 400px;
  background-color: seagreen;
}
.routes {
  display: inline-block;
  height: 100%;
  padding: 10px;
  background-color: royalblue;
}
.routes__images img {
  display: block;
  margin: 5px 0;
  border-radius: 10px;
}
.content {
  display: inline-block;
  padding: 10px;
  position: absolute;
}
.footer {
  padding: 20px;
  text-align: center;
  background-color: orange;
}

Usuario anónimo

user•

Buen trabajo!!

Usuario anónimo

user•

Lo has hecho ver tan simple, me maree bastante si usar display flex.

Usuario anónimo

user•

Cumpliendo reto

Usuario anónimo

user•

Muy bien

Usuario anónimo

user•

que belleza amigo, la opacidad, que lo vuelve casi trasparente lo hace super elegante.

Usuario anónimo

user•

Comparto este diseño que hice de SNK. Para que se inspiren en la estructura que da el profe.

Usuario anónimo

user•

Buaaj, está buenisimo

Usuario anónimo

user•

Muy cool!

Usuario anónimo

user•

Quizás no sea tan bonito como los demás... 😢 Pero es trabajo duro y honesto

Usuario anónimo

user•

mu bien!

Usuario anónimo

user•

Excelente bro buen trabajo

Usuario anónimo

user•

Usuario anónimo

user•

Que no se note el gusto por One Piece haha Muy buen trabajo! Felicidades :)

Usuario anónimo

user•

Genial!

Usuario anónimo

user•

Desafío completado. Este layout es parte de un diseño desechado de mi portafolio :D

Usuario anónimo

user•

Adoro tu logo, esta lindo el red panda, te quedo bien todo!

Usuario anónimo

user•

Muchas gracias 😊

Usuario anónimo

user•

Hola amigos quiero compartir con ustedes mi historia de cómo cumplí este reto: Hace un mes cuando empecé a ver este curso e intentar el reto, la verdad es que me frustré al no entender como hacerlo. Lo intenté un par de veces y siempre había algo que no me gustaba y decidí no compartirlo y seguir avanzando, terminé este curso y un par más en la ruta de desarrollo web, seguía practicando e interiorizando los conceptos, así fue como, regrese aquí, intente hacer de nuevo este reto pendiente y puede decirles que la satisfacción es muy grande al ver que si lo puedes lograr. PD. Con CSS-Grid pueden hacer este layout en 3 minutos pero es importante aprender bien estas bases.

Usuario anónimo

user•

Gracias por compartir tu historia José. Casi me pasó igual, estuve a punto de abandonar el Reto, pero lo intenté varias veces, luego de frustrarme me iba a hacer la ruta de ingles y regresaba a darle patadas... hasta que lo logré!... PD: debo reconocer que me iluminó otro compañero de la comunidad que posteó su código y me resultó sencillo de entender gracias que usó metodología BEM para la definición de clases. Eso fue revelador, el nudo que tenía en el cerebro lo pude desenredar jejeje Saludos.

Usuario anónimo

user•

Muchas gracias Felix, por compartir tu historia.

Saludos.

Usuario anónimo

user•

hola ,como estan?. Quisiera una opinion porfavor , en realidad dure bastante realizandolo con casi todo lo que e aprendido

Usuario anónimo

user•

super genial!

Usuario anónimo

user•

Me parece buenísimo!

Usuario anónimo

user•

Aquí dejo mi reto concluido Espero les agrade

Usuario anónimo

user•

Hola! te puedo preguntar como traes los iconos de las redes sociales? no entendi bien como los trajiste. Gracias.

Usuario anónimo

user•

Claro que si. Lo que uso es Font Awesome

lo que te crea es un script donde va a buscar los iconos que tu tengas en tu librería, este script lo pones en el head y en en HTML los mandas a llamar con una clase que te da la pagina.

Te dejo un video para que veas como funciona Como Poner Iconos Personalizados

Usuario anónimo

user•

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./estilo.css">
    <title>Layout</title>
</head>
<body>
    <header class="container">
        <p class="left">Logo</p>
        <div class="right">
                <li>Home</li>
                <li>Page</li>
                <li>About</li>
        </div>
    </header>
    <main class="navbar">
        <section class="one">
            <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
            <div id="four"></div>
        </section>
        <section class="two"></section>
    </main>
    <footer class="footer">
        Adriel Pezo
    </footer>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 62.5%;
}

.container {
    background-color: rgb(175, 149, 110);
    width: 100%;
    height: 4rem;
    font-size:4rem;
    padding-top:0.5rem ;
}

.left{
    float: left;
    margin-left: 2rem;
}

.right{
    float: right;
    margin-right: 2rem;
}

.container li{
    display: inline-block;
}

.navbar{
    display: grid;
    grid-template-columns: 0.75fr 2.25fr;
    height: 68.9rem;
}

.one{
    background-color: rgb(153, 118, 65);
    display: block;
    padding: 1rem;
}

#one{
    background-color: rgb(212, 166, 96);
    height:14rem;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
}

#two{
    background-color: rgb(212, 166, 96);
    height:14rem;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
}

#three{
    background-color: rgb(212, 166, 96);
    height:14rem;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
}

#four{
    background-color: rgb(212, 166, 96);
    height:14rem;
    border-radius: 1rem;
    margin: 1.5rem 1rem;
}

.two{
    background-color: rgb(250, 153, 7);
}

footer{
    position:absolute;
    background-color: rgb(139, 223, 235);
    width: 100%;
    height:3rem;
}

Usuario anónimo

user•

muchas gracias! habia tardado tanto en hacerlo con cálculos y todo se solucionó con el float.

Usuario anónimo

user•

Campeón utilizando: main .one div { background-color: rgb(212, 166, 96); height:14rem; border-radius: 1rem; margin: 1.5rem 1rem; }

te ahorrarías muchas lineas de codigo

Usuario anónimo

user•

Hacer esto con display flex y grid es pan comido

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto layout1</title>
    <link rel="stylesheet" href="reto.css">
</head>
<body>
    <header class="header">
        <section class="header__section">Logo</section>
        <nav class="header__nav">
            <ul class="nav__ul">
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <aside class="aside">
        <section class="aside__section"></section>
        <section class="aside__section"></section>
        <section class="aside__section"></section>
        <section class="aside__section"></section>
    </aside>
    <main class="main">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, dolor id. Tenetur, enim corporis ab culpa velit odit autem nemo cupiditate pariatur perspiciatis blanditiis. Magnam tempore voluptatem rem ad quae.</p>
    </main>
    <footer class="footer">
        <a href="#">About us</a>
        <a href="#">Contact us</a>
    </footer>
</body>
</html>

Codigo CSS:

*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
    font-size: 62.5%;
    font-size: 1.3rem;
}

body{
    display: grid;
    grid-template-areas: "header header"
                        "aside main"
                        "footer footer";
}

.header{
    background-color: burlywood;
    width: 100vw;
    height: 10vh;
    grid-area: header;
    display: flex;
    justify-content: space-between;
}

.header__nav .nav__ul li{
    display: inline-block;
    padding-right: 25px;
}

.aside{
    background-color: coral;
    width: 25vw;
    height: 80vh;
    grid-area: aside;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aside .aside__section{
    background-color: blue;
    width: 80%;
    height: 20%;
    margin:10px;
    border-radius: 20px;
}

.main{
    background-color: crimson;
    width: 75vw;
    height: 80vh;
    grid-area: main;
}

.footer{
    background-color: dodgerblue;
    width: 100vw;
    height: 10vh;
    grid-area: footer;
    display: flex;
    justify-content: space-between;
}

.footer a{
    text-decoration: none;
}

Usuario anónimo

user•

Chévere, pero el desafío esta en hacerlo con lo que se ha aprendido hasta ahora.

Usuario anónimo

user•

Es que yo ya tomé cursos y tengo experiencia usando grid y flex :) es bueno sacar provecho de tu arsenal si puedes utilizarlo

Usuario anónimo

user•

Desafio Completado: Sin Flex!!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Layout example</title>
</head>
<body>
  <header>
    <figure>Logo</figure>
    <nav>
    <ul>
      <li>Inicio</li>
      <li>Cursos</li>
      <li>Blog</li>
      <li>Acerca de</li>
    </ul>
    </nav>
  </header>

  <main>
  <aside>
    <div>Elemento 1</div>
    <div>Element 2</div>
    <div>Elemento 3</div>
    <div>Elemento 4</div>
  </aside>
  <section>Area principal</section>
  </main>
  
  <footer> 
    <h2 class="footer-social" >
  Redes sociales
</h2>

<a class="footer-info"> Informacion</a>
  </footer>
</body>
</html>

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

html{
  font-size: 62.5%;
}

li{
  list-style: none;
}

body{
  font-size: 1.6rem;
  background-color: #f4f4f4;
  }

header{
  height: 10vh;
  background-color: #273b47;
  color: #fff;
}

main{
  height: 80vh;
}

footer{
  height: 10vh;
  background-color: #273b47;
  color: #fff;
}

figure, nav{
  display: inline-block;
  
}

figure{
  margin: 1rem;
  
}

li{
  display: inline-block;
  margin: 1rem;
}

nav{
  top: 1rem;
  position: absolute;
  right: 1.5rem;
}

aside,section{
  display: inline-block;
  height: 80vh;
  background-color: #f9f9f9;
}

aside{
  width: 20vw;
  }

aside div{
  height: 15vh;
  margin: 3vh;
  background-color: #fff;
  box-shadow: 1px 2px 4px 0 rgba(21,99,157,.16);

}

section{ 
  position: absolute;
  left: 20vw;
  width: 80vw;
  padding: 1rem;
  background-color: #e9e9e9;

}


.footer-social, .footer-info {
  display: inline-block;
  margin: 1rem;
}

.footer-info {
  position: absolute;
  right: 1.5rem;
}

Usuario anónimo

user•

muchas gracias por el aporte estaba trabado con el footer

Usuario anónimo

user•

me podrias ayudar, llegue hasta aqui pero no trabe en este desafio.. como supiste dar esos valores en css?

Usuario anónimo

user•

Mi desafio

Usuario anónimo

user•

Me encantó Muy bueno

Usuario anónimo

user•

Merge es un verbo, es unir o mezclar. Seguramente el término (sustantivo) que buscabas era merger, o directamente union o junction. Por otro lado, te quedó genial saludos.

Usuario anónimo

user•

Practicando se entiende mejor aún siento que me hace falta mucho, tengo muchas dudas.

HTML

<code> 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ejercicio Display</title>
        <link rel="stylesheet" href="./style.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,500&display=swap" rel="stylesheet">    
    </head>
    <body>
        <header>
            <nav class="nav">
                    <img src="./logo.png" class="nav__logo" alt="logo de la empresa">
                <ul class="nav__list">
                    <li><a href="#"></a>home</li>
                    <li><a href="#"></a>Inspiration</li>
                    <li><a href="#"></a>Find Work</li>
                    <li><a href="#"></a>Learn Design</li>
                </ul>
            </nav>
        </header>
        <aside class="aside">
            <!-- no se si usar div o section
            no se si sea necesario usar el figure o solo img-->

            <div class="card">
                <p class="card__texto">Lorem ipsum dolor sit amet, nummy nibh</p>
                <img src="./ico_services_1.png" class="card__imag" alt="imagen de la seccion uno">

                <button type="button" class="card1__btn">READ MORE</button>
            </div>
            <div class="card">
                <p class="card__texto">Lorem ipsum dolor sit amet, nummy nibh</p>
                <img src="./ico_services_2.png" class="card__imag" alt="imagen de la seccion dos">
                <button type="button" class="card2__btn">READ MORE</button>
            </div>
            <div class="card">
                <p class="card__texto">Lorem ipsum dolor sit amet, nummy nibh</p>
                <img src="./ico_services_3.png" class="card__imag" alt="imagen de la seccion tres">
                <button type="button" class="card3__btn">READ MORE</button>
            </div>
            <div class="card">
                <p class="card__texto">Lorem ipsum dolor sit amet, nummy nibh</p>
                <img src="./ico_services_4.png" class="card__imag" alt="imagen de la seccion cuatro">
                <button type="button" class="card4__btn">READ MORE</button>
            </div>
        </aside>
        <main class="main">
            <section class="main__description">
                <img src="./img_description.png" class="main_img" alt="imagen de la descripcion">
                <h3 class="main__title">Lorem ipsum<br>dolor sit amet</h4>
                <p class="main__parrafo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>

                <button type="button" class="main__btn">READ MORE</button>
            </section>
        </main>
    </body>
</html>

CSS

<code> 
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Poppins', sans-serif;
}
.nav{
    width: 100%;
    height: 80px;
    padding: 10px;
    background-color: #343552;
    border-bottom: 5px solid #1D1F3A;
}
.nav__logo{
    left:0px;
    margin-left: 50px;
    width: 100px;
    height: auto;
}
.nav__list{
    position: absolute;
    right:0px;
    display: inline-block;
    list-style: none;
    margin: 20px 50px;
}
.nav__list li{
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
    margin-right: 20px;
    color: #ffffff;
}
.aside{
    display: inline-block;
    height: auto;
    padding: 10px 40px;
    background-color: #D7DBE6; 
}
.card{
    display: block;
    width: 300px;
    height: auto;
    background-color: #ffffff;
    margin-bottom: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
    align-items: center;
}
.card__texto{
    display: inline-block;
    width: 120px;
    font-size: 15px;
    vertical-align: middle;
}
.card__imag{
    position: relative;
    left: 15px;
    width: 120px;
    height: auto;
    vertical-align: middle;
}
.card1__btn{
    display: block;
    position: absolute;
    background-color: #FF586B;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
    margin-left: 55px;   
}
.card2__btn{
    display: block;
    position: absolute;
    background-color: #00B7C4;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
    margin-left: 55px;   
}
.card3__btn{
    display: block;
    position: absolute;
    background-color: #35A194;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
    margin-left: 55px;   
}
.card4__btn{
    display: block;
    position: absolute;
    background-color: #734D9C;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
    margin-left: 55px;   
}
.main{
    width: auto;
    height: 800px;
    display: inline-block;
    position: absolute;
    background-color: #F5F5F5;
    padding: 80px 100px;
}
.main__description{
    display: block;
}
.main__title{
    font-size: 43px;
    font-weight: 700;
    color: #343552;
    margin: 20px 0;
}
.main__parrafo{
    font-size: 20px;
    margin-right: 750px;
    font-weight: 600;
    color: #212121;
}
.main__btn{
    margin-top: 30px;
    background-color: #734D9C;
    border: none;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 100px;
}

Usuario anónimo

user•

de mas!

Usuario anónimo

user•

Reto Completado 😃

Código HTML 👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="description" content="Tiene el reto de la clase de display"/>
    <meta name="robots" content="index,follow"/>
    <title>Reto Clase Display</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css" type="text/css">
  </head>
  <body>
    <header class="header">
      <figure class="headerLogo">
        <img 
        src="./img/logo_mario.png" 
        alt="Mario's logo"
        />
      </figure>
      <nav class="headerMenu">
        <ul>
          <li>Play</li>
          <li>Options</li>
          <li>Exit</li>
          <li>Credit</li>
        </ul>
      </nav>
    </header>
    <div class="pageCentralPart">
      <section>
        <div>
          <figure class="sectionImageContainer">
            <img 
            src="https://i.pinimg.com/236x/d2/bb/3c/d2bb3c58ee763691758450eaeb2c6554.jpg" 
            alt="Red Pocket Star"
            />
          </figure>
        </div>
        <div>
          <figure class="sectionImageContainer">
            <img 
            src="https://i.pinimg.com/236x/2b/ed/3b/2bed3b4c5d94a0dfc137c49a38f0db0a.jpg" 
            alt="Blue Pocket Power"
            />
          </figure>
        </div>
        <div>
          <figure class="sectionImageContainer">
            <img 
            src="https://i.pinimg.com/236x/00/28/4b/00284b481fe41b3e0a8fb801257bfe3a.jpg" 
            alt="Red Pocket Flower"
            />
          </figure>
        </div>
        <div>
          <figure class="sectionImageContainer">
            <img 
            src="https://i.pinimg.com/236x/c3/26/a6/c326a661e7009e3c5e51cbea0c62481a.jpg" 
            alt="Blue Pocket Star"
            />
          </figure>
        </div>
      </section>
      <main class="main">
        <div class="mainImageContainer">
          <div>
            <figure class="muroContainer">
              <img 
              src="./img/muro.png" 
              alt="muro"
              />
            </figure>
          </div>
          <div>
            <figure class="browserContainer">
              <img 
              src="./img/browser.png" 
              alt="browser"
              />
            </figure>
          </div>
          <div>
            <figure class="enemigo1Container">
              <img 
              src="./img/enemigo_1.png" 
              alt="enemigo_1"
              />
            </figure>
          </div>
          <div>
            <figure class="luiguiContainer">
              <img 
              src="./img/luigui.png" 
              alt="luigui"
              />
            </figure>
          </div>
          <div>
            <figure class="marioContainer">
              <img 
              src="./img/mario.png" 
              alt="mario"
              />
            </figure>
          </div>
          <div>
            <figure class="enemigo2Container">
              <img 
              src="./img/enemigo_2.png" 
              alt="enemigo_2"
              />
            </figure>
          </div>
          <div>
            <figure class="enemigo3Container">
              <img 
              src="./img/enemigo_3.png" 
              alt="enemigo_3"
              />
            </figure>
          </div>
        </div>
      </main>
    </div>
    <footer>
      <p>Hecho por: <strong>Fabiola Castro 😃</strong></p>
    </footer>
  </body>
</html>

Código CSS 👇

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
  font-family: 'Roboto Mono', monospace;;
}
.header{
  background-image: url('./img/fondo_1.png');
  background-size: 400px 65px;
  height: 10vh;
  width: 100vw;
}
.headerLogo{
  width: 15%;
  height: 60px;
  position: absolute;
  top: 0;
  margin-top: 2.5px;
  margin-left: 10px;
  background-color: #96A08E;
  border: 2px solid black;
  border-radius: 6px;
}
.headerLogo img{
  height: 58px;
  margin: 1px 20%;
  width: 60%;
}
.headerMenu{
  position: absolute;
  right: 0;
  top: 0;
  margin: 17px;
  width: 50%;
}
.headerMenu ul li{
  display: inline-block;
  list-style: none;
  padding: 5px;
  font-size: 1.6rem;
  border: 2px solid black;
  background-color: #96A08E;
  text-align: center;
  border-radius: 5px;
  width: 20%;
  margin: 0 12px;
}
.pageCentralPart{
  display: flex;
}
section{
  background-color:  #137EDE;
  height: 80vh;
  display: inline-block;
  width: 20vw;
}
section div{
  width: 90%;
  margin: 20px auto;
  height: 20%;
  border: 2px solid black;
  border-radius: 10px;
  background-color: #96A08E;
}
.sectionImageContainer{
  height: 100%;
  width: 100%;
}
.sectionImageContainer img{
  height: 95%;
  width: 95%;
  margin: 1.5% 2.5%;
  border-radius: 10px;
}
.main{
  background-image: url('./img/fondo_3.png');
  background-size: 500px 525px;
  height: 80vh;
  width: 80vw;
}
.mainImageContainer{
  display: flex;
}
.muroContainer, .browserContainer, .enemigo1Container, .luiguiContainer, .marioContainer, .enemigo2Container, .enemigo3Container{
  height: 100%;
  width: 5%;
}
.muroContainer img{
  height: 525px;
  position: relative;
  right: 10px;
}
.browserContainer img{
  height: 300px;
  position: relative;
  top: 120px;
}
.enemigo1Container img{
  height: 300px;
  position: relative;
  top: 240px;
  left: 650px;
}
.luiguiContainer img{
  height: 150px;
  position: relative;
  top: 220px;
  left: 60px;
}
.marioContainer img{
  height: 150px;
  position: relative;
  bottom: 20px;
  right: 30px;
}
.enemigo2Container img{
  height: 80px;
  position: relative;
  top: 130px;
  right: 100px;
}
.enemigo3Container img{
  height: 150px;
  position: relative;
  top: 375px;
  right: 250px;
}
footer{
  background-image: url('./img/fondo_2.png');
  background-size: 300px 65px;
  height: 10vh;
  width: 100vw;
}
footer p{
  position: absolute;
  bottom: 0;
  margin: 10px;
  width: 360px;
  height: 40px;
  padding: 5px;
  background-color: rgb(178,118,31);
  border-radius: 10px;
  font-size: 2rem;
}

Usuario anónimo

user•

Cumplí el reto, me costo pero algo es algo, les dejo el código puesto que me costo harto colocar el menu a la derecha y ordenar lo del medio, pero helo aquí. Deje el código con comentarios puesto que les pueden ayudar harto, por lo menos a mi me sirve para orientarme.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desafio1</title>
    <link rel="stylesheet" href="./style.css">

</head>
<body>
    <header class="header">
        <div class="logo">Logo</div>
        <nav class="nav">
            <ul>
                <li>Home</li>
                <li>Cursos</li>
                <li>Instrustores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main class="main">
        <div class="anuncios">
            <div class="anun"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
            <div class="anun"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
            <div class="anun"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
            <div class="anun"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
        </div>
        <div class="info-principal"><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam reiciendis quas unde doloremque omnis quo rem recusandae molestiae, ipsa minima maxime, assumenda aspernatur laudantium quidem aut explicabo dolor saepe culpa.</p></div>        
    </main>
    <footer>
        <div class="info"><p>Info de la empresa</p></div>
        <div class="rrss"><p>RRSS</p></div>
    </footer>
</body>
</html>

. CSS

/* Etiquetas globales */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

/* Etiquetas del header */
header {
    background-color: blueviolet;
}

.logo {
    display: inline-block;
    font-size: 2rem;
    margin: 10px;
}

.nav {
    display: inline-block;
    /* con esto logré ...*/
    position: absolute;
    right: 0;
    /*...que el menu quedase a la derecha */
    padding-top: 4px; /*para centrarlo verticalmentes*/
}

.nav li {
    font-size: 1.6rem;
    display: inline-block;
    list-style: none;
    margin: 10px 0;
    padding: 0 20px;
}

/* Etiquetas del main */
p {
    font-size: 1.6rem;
}

.main {
    height: 500px;
    background-color: burlywood;
}

.anuncios {
    display: inline-block;
    background-color: blue;
    height: 100%;
    width: 20%;
    max-width: 170px;
    padding: 10px;
}

.info-principal {
    display: inline-block;
    position: absolute;
    padding: 10px;
}

.anun {
    display: block; /* Esto es para que queden apilados*/
    margin: 10px;
    padding: 5px;
    background-color: cyan;
    border-radius: 10px;
}

/* Etiquetas del footer */

footer {
    background-color: yellow;
    height: 30px;
    padding: 0px 10px 0px 10px;
}

.info {
    display: inline-block;
    position: absolute;
    padding-top: 7px; /*Esto es para centrarlo al medio verticalmente */
}

.rrss {
    display: inline-block;
    position: absolute; /*Con estas ...*/
    right: 10px; /*... 2 lineas las rrss quedan a la derecha */
    padding-top: 7px;
}

Usuario anónimo

user•

Esta muy bien tu programación. Dentro de todos los que vi es el que más me gusta porque pones en practica lo aprendido hasta ahora y también lo demuestras explicándolo. cuando alguien explica tan bien como lo has hecho es porque en verdad lo has entendido bien. Felicidades

Usuario anónimo

user•

Hola! me sirvió mucho tu código para tener más claro todo, muchas gracias

Usuario anónimo

user•

ESte es mi desafio me costo trabajo ubicar el aside y el main pero al final pude los estilos si no es muy bonito que digamos

![](

Usuario anónimo

user•

Yo lo veo muy bien amigo! Para los conocimientos que llevamos hasta ahora vistos... Creo que esta mas que perfecto. No te preocupes, pronto aprenderás a hacer lo mismo pero mas rápido y le darás un toque mejor :)