Posicionamiento de Layout Básico en CSS
Contenido del curso
Usuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
UserUsuario anónimo
Userhola continuando con la temática de mi desafío anterior, les dejo aquí mi reto
Hola Mariana,esta muy chévere! como colocaste los textos (Equipación, moda, accesorios y ofertas) al lado de los logos? saludos.
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.
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; }
jajaja el mejor aporte de todos
He estado una tarde para conseguirlo, pero aquí está, gracias por la inspiración xD
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; }
Estaba muy atorado y tu post me ayudo mucho, ahora solo tengo que entenderlo. Gracias.
De nada
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; }
Buen trabajo!!
Lo has hecho ver tan simple, me maree bastante si usar display flex.
Cumpliendo reto
Muy bien
que belleza amigo, la opacidad, que lo vuelve casi trasparente lo hace super elegante.
Comparto este diseño que hice de SNK. Para que se inspiren en la estructura que da el profe.
Buaaj, está buenisimo
Muy cool!
mu bien!
Excelente bro buen trabajo
Que no se note el gusto por One Piece haha Muy buen trabajo! Felicidades :)
Genial!
Desafío completado. Este layout es parte de un diseño desechado de mi portafolio :D
Adoro tu logo, esta lindo el red panda, te quedo bien todo!
Muchas gracias 😊
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.
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.
Muchas gracias Felix, por compartir tu historia.
Saludos.
hola ,como estan?. Quisiera una opinion porfavor , en realidad dure bastante realizandolo con casi todo lo que e aprendido
super genial!
Me parece buenísimo!
Aquí dejo mi reto concluido Espero les agrade
Hola! te puedo preguntar como traes los iconos de las redes sociales? no entendi bien como los trajiste. Gracias.
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
<!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; }
muchas gracias! habia tardado tanto en hacerlo con cálculos y todo se solucionó con el float.
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
Hacer esto con display flex y grid es pan comido
<!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; }
Chévere, pero el desafío esta en hacerlo con lo que se ha aprendido hasta ahora.
Es que yo ya tomé cursos y tengo experiencia usando grid y flex :) es bueno sacar provecho de tu arsenal si puedes utilizarlo
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; }
muchas gracias por el aporte estaba trabado con el footer
me podrias ayudar, llegue hasta aqui pero no trabe en este desafio.. como supiste dar esos valores en css?
Mi desafio
Me encantó Muy bueno
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.
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; }
de mas!
Reto Completado 😃
<!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; }
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; }
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
Hola! me sirvió mucho tu código para tener más claro todo, muchas gracias
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
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 :)
