lo quiero aquí.
https://i.ibb.co/1bmy1yr/2013-05-25-copia.jpg
Código
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/index.css"> </head> <body> <header class="cabecera text-aling"> <div class="caja izquierda"> </div> <div class="caja derecha"> </div> </header> <nav> </nav> <main> <section class="flex"> <div class="izquierda"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem asperiores, iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel sapiente reiciendis nihil enim.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem asperiores, iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel sapiente reiciendis nihil enim.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem asperiores, iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel sapiente reiciendis nihil enim.</p> </div> </section> <section class="flex text-align"> <div class="columna"> <hr> <hr> </div> <div class="columna"> <hr> <hr> </div> <div class="columna"> <hr> <hr> </div> </section> </main> <aside class="side"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore alias qui distinctio vero repudiandae aliquam mollitia obcaecati cum, quis voluptatibus deleniti quia inventore, eius totam unde! Ad corrupti voluptatem maiores!</p> </aside> <footer> <ul> </ul> </footer> </body> </html>
Creo que estoy maquetando mal
Código
p { margin: 0px auto; } .ancla { text-decoration: none; } .logo { font-size: 80px; color: lightseagreen; font-family: 'Baloo Thambi 2', cursive; } .titulo { font-size: 40px; color: lightseagreen; font-family: 'Baloo Thambi 2', cursive; } .cabecera { margin: 10px auto; padding: 10px; width: 90%; padding-bottom: 180px; } .side{ margin: 0 auto; float: right; width: 24%; } .flex { display: flex; width: 70%; } .text-align { text-align: center; } .caja { margin: 10px auto; padding: 10px; width: 23%; } .izquierda { float: left; } .derecha { float: right; } .contratar { background: rgb(85, 85, 247); border-radius: 8px; color: white; text-align: center; font-size: 26px; margin: 10px auto; } .emergencias { background: salmon; border-radius: 8px; color: white; text-align: center; font-size: 26px; margin: 10px auto; } .columna { background: rgb(238, 238, 238); color: #333; border: 1px solid #333; margin: 10px auto; padding: 10px; border-radius: 5px; box-shadow: 5px 5px; width: 23%; box-sizing: border-box; display: inline-block; } .precio { font-size: 50px; color: lightseagreen; } .btn-comprar { background: salmon; display: block; padding: 10px; color: seashell; text-decoration: none; border-radius: 4px; } .btn-comprar:hover{ background: rgb(97, 97, 248); } nav { padding: 10px; display: flex; justify-content: space-around; } .nav-enlace { color: whitesmoke; background-color: rgb(80, 80, 241); padding: 10px 40px; display: inline-block; text-decoration: none; font-size: 20px; border-radius: 6px; } .nav-enlace:hover{ color: whitesmoke; background-color: rgb(240, 143, 159); padding: 10px 40px; display: inline-block; text-decoration: none; font-size: 20px; border-radius: 6px; } @media (max-width: 900px) { .columna { width: 46%; } } @media (max-width: 600px) { .columna { width: 92%; } }