Vamos a crear una página web básica utilizando Grid css con repeat(auto-fit,minmax(20rem,1fr)) para que las columnas sean responsive design sin utilizar media queries.
<!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>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <img src="image/logo.png" alt=""> <div class="derecha"> <a href="" class="btnPhone"> LLAMAR </a> </div> </header> <section class="banner"> <div class="containerB"> <div class="boxB col1"> <img src="image/foto.svg" class="imgBanner" alt=""> </div> <div class="boxB col2"> <h1>Alcanza tus Objetivos de Negocios</h1> <p id="txtBanner"> Recuerda que los seres mas inocentes y de corazón puro son los animales, por favor no los trates mal, recuerda que ellos también sufren y sienten dolor al igual que tu. </p> <div> <a href="" class="btnBanner">VER SERVICIOS</a> </div> </div> </div> </section> <section class="services"> <div class="subServices"> <h2>Nuestros servicios</h2> <br> <p>Asesoría y Capacitación en Negocios, Marketing y tecnología <br> Crecemos e innovamos contigo </p> </div> <div class="containerS"> <div class="boxS"> <img src="image/icon1.png" alt=""> <h3>Marketing Estratégico</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div> <div class="boxS"> <img src="image/icon1.png" alt=""> <h3>Marketing Estratégico</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div> <div class="boxS"> <img src="image/icon1.png" alt=""> <h3>Marketing Estratégico</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div> </div> </section> </body> </html>
style.css
*{ margin:0; padding: 0; box-sizing: border-box; } header{ width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .derecha{ text-align: right; } .btnPhone{ background: #393939; color: #fefefe; text-decoration: none; border-radius: 25px; padding: 10px 15px; } section.banner{ background: linear-gradient(to left, rgb(255 255 255), rgb(234 243 240)); padding: 3rem 0; } .containerB{ width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(20rem,1fr)); grid-gap: 2rem; } .col1{ display: flex; align-items: center; justify-content: center; } .imgBanner{ width: 70%; } .col2{ padding: 1rem 2rem; display: flex; justify-content: center; flex-direction: column; } h1{ font-size: 2rem; color: #21a6cb; } #txtBanner{ margin: 2rem 0; font-size: 1.3rem; line-height: 2rem; } .btnBanner{ background: #4cb1d5; color: #fff; padding: 10px 20px; border-radius: 25px; text-decoration: none; } /*SERVICIOS*/ .services{ padding: 3rem 0; } .subServices{ text-align: center; padding-bottom: 2rem; color: #4c4c4c; } .containerS{ width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(18rem,1fr)); grid-gap: 1.2rem; } .boxS{ padding: 2rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0px 0px 55px 5px rgb(0 0 0 / 6%); } .boxS img{ width: 100px; } h3{ color: #4c4c4c; margin: 10px 0; } .boxS p{ text-align: center; }