No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
2H
50M
11S

Proyecto

8/13
Recursos

Crear proyectos es de hecho la parte m谩s importante de tu aprendizaje, ya que al crear algo real fortaleces tu conocimiento en gran medida.

Proyecto de creaci贸n del curso

Demos un vistazo al template final que vamos a construir:
image.png

Bien, el primer paso es imaginar c贸mo est谩n divididas nuestras secciones:
image.png

La celda es la unidad m铆nima de nuestra grilla, por lo que debemos prestarle mucha atenci贸n. En la secci贸n de la mitad, observamos que las cuatro celdas peque帽as de la derecha nos indican que la secci贸n tendr谩 cuatro columnas y dos filas.

Maquetaci贸n Inicial

Primero, creamos una estructura simple con un main dentro.

<body>
    <main>
        
    </main>
</body>
  • En los estilos, seteamos todo la hoja para usar la fuente Roboto.
  • Le damos un ancho m谩ximo de 1200px al proyecto.
  • Centramos todo el contenido con margin: 0 auto.
* {
    font-family: "Roboto", sans-serif;
}

main {
    max-width: 1200px;
    margin: 0 auto;
}

Como te diste cuenta usaremos varias im谩genes como parte de la p谩gina. Puedes descargar todas desde este enlace.

Genial, 隆ahora estamos listos para empezar a crear los contenedores!

Contribuci贸n creada por: Jos茅 Miguel Ventimilla (Platzi Contributor) con aportes de C茅sar Palma.

Aportes 32

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Vamos por buen camino, has avanzado, espero no te detengas, el camino es largo pero satisfactorio y cuando lleguemos arriba, hincharemos el pecho con orgullo diciendo, SI PUDE.

Tip de maquetaci贸n con grid:
En una posible grilla ver cual es el elemento m谩s peque帽o que tiene que estar en la grilla.
A partir del elemento m谩s peque帽o determinar el n煤mero de filas y columnas a necesitar para maquetar todos los elementos de dicha secci贸n de la web.

Puse todas las im谩genes en una carpeta para que sea mas f谩cil usarlas
https://drive.google.com/drive/folders/1PR4d5rzgdQzdjT2cyWGz2DIWSlDMj27L?usp=sharing
comparto el link de google drive

Me rete a mi misma e hice el proyecto sin ver los videos de este m贸dulo. Lo hice a 320px ya que estoy manteniendo lo aprendido en el curso de Responsive Design: Mobile First. He aqu铆 el resultado:

HTML


CSS



El proyecto se me muy interesante, siento que tenemos todo el conocimiento para desarrollarlo. Muchas gracias por las practicas que nos dejo en cada clase, sin duda fue el diferenciador para absorber mejor cada concepto. Vamos con todo! 馃槑

Yo lo hice sin ver el resto de clases solo para ver como me quedaba XD

HTML

<!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">
    <link rel="stylesheet" href="./estilos.css">
    <title>Grid layout</title>
</head>
<body>
    <div class="container">
        <div class="item-1">
            <h1>Ckeck the best food</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <button>See more details</button>
        </div>
        <figure class="item-2">
            <img src="https://i.postimg.cc/zD21m9fG/hero.png" alt="plato de comida">
        </figure>
    </div>
    <h1 class="services">Our services</h1>
    <div class="container-services">
        <img src="https://i.postimg.cc/k5qHRc5H/video.png" alt="video de nuestros platos" class="plate-1">
        <img src="https://i.postimg.cc/qR0pRyfB/dish1.png" alt="plato 1" class="plate-2">
        <img src="https://i.postimg.cc/Wp5sNd5j/dish2.png" alt="plato 2" class="plate-3">
        <img src="https://i.postimg.cc/hPwgmHF5/dish3.png" alt="plato 3" class="plate-4">
        <img src="https://i.postimg.cc/MG08hHnC/dish4.png" alt="plato 4" class="plate-5">
    </div>
    <h3 class="menu">Home menu</h3>
    <div class="menu-container">
        <img src="https://i.postimg.cc/15g1yJgc/plate1.png" alt="plato 1">
        <img src="https://i.postimg.cc/cH1P2my3/plate2.png" alt="plato 2">
        <img src="https://i.postimg.cc/rs3bd2dG/plate3.png" alt="plato 3">
        <img src="https://i.postimg.cc/Fsk8MzqT/plate4.png" alt="plato 4">
        <img src="https://i.postimg.cc/rw63Mc2M/plate5.png" alt="plato 5">
    </div>
</body>
</html>

CSS

html {
    font-size: 62.5%;
}

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

:root {
    --white: #fff;
    --main-black: #17202A;
    --gray-text: #515A5A;
    --main-orange: #F39C12;
    --xs: 1.2rem;
    --s: 1.4rem;
    --m: 1.6rem;
    --l: 1.8rem;
    --xl: 2rem;
    --xxl: 2.4rem;
}

body {
    background: linear-gradient(225deg, #ffffff, #e6e5e5);
}

.container {
    background-color: #ffffff;
    display: grid;
    margin: 16px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    padding: 8px;
    gap: 4px;
    place-content: center;
}

.item-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 4px;
}

.item-1 h1 {
    color: var(--main-black);
    font-size: var(--l);
    text-align: start;
}

.item-1 p {
    color: var(--gray-text);
    text-align: start;
    margin: 12px 16px 18px;
    font-size: var(--s);
}

.item-1 button {
    color: var(--white);
    padding: 8px 16px;
    background-color: var(--main-orange);
    border: none;
    border-radius: 8px;
    font-weight: bold;
}

.item-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services {
    text-align: center;
    color: var(--gray-text);
    margin: 32px 0;
}

.container-services {
    margin: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2,1fr);
}

.container-services > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.plate-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.menu {
    color: var(--main-black);
    font-size: var(--m);
    text-align: center;
    margin: 32px 0;
}

.menu-container {
    margin: 16px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.menu-container > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Trate de hacer el proyecto antes de ver las clases, este es mi resultado.

Se ve muy interesante el proyecto, perfecto para el portafolio. Vamo a darle

agradecida con el de arriba.
XD

Mi intento se hacer el proyecto antes de ver las clases:
Mobile:

Desktop:


Aqu铆 mi primer intento antes de ver el video de como construirlo
si alguien quiere echarle un vistazo pueden verlo en mi github

Aqu铆 mi resultado

Maquetaci贸n

_

vamos a por este proyecto les dejo el repositorio en github al final del curso

Ac谩 intentando antes de ver como lo hace la profe a ver que sale 馃槃

鈫 Ver d贸nde ir谩n las grillas
鈫 Empezar desde las celdas

En los recursos de la clase encontrar谩s el link para descargar las im谩genes que se usar谩n. De igual manera a continuaci贸n comparto el enlace: drive

Nunca he armado componentes con grillas, s贸lo con flexbox, cambia un poco el paradigma, pero le veo m谩s ventajas en responsive pensar en grid.

Les comparto el reto, lo he iniciado antes de ver los videos, como se ha comentado en el foro, afrontar estos retos nos ayudan a encontrar las mejoras formas para aprender. Nunca paremos de aprender.

Pantalla:



HTML:

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <section>
            <div class="section-1">
                <div class="item-section-1">
                    <h1>Check The Best food</h1>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita incidunt veniam nostrum nihil voluptates similique ipsa voluptatibus inventore impedit ut, autem doloribus eum quam atque ab obcaecati magni dolores adipisci?</p>
                    <button>Ingresar</button>
                </div>
                <div class="item-section-1">
                    <img src="./hero.png" alt="food">
                </div>
            </div>
        </section>
        <section>
            <div class="title-2">
                <h2>OUR SERVICES</h2>
            </div>
            <div class="section-2">
                <div class="item-section-2 item-1"></div>
                <div class="item-section-2 item-2"></div>
                <div class="item-section-2 item-3"></div>
                <div class="item-section-2 item-4"></div>
                <div class="item-section-2 item-5"></div>
            </div>
        </section>
        <section>
            <div class="title-2">
                <h2>Home Men煤</h2>
            </div>
            <div class="section-3">
                <div class="item-section-3 item-6"></div>
                <div class="item-section-3 item-7"></div>
                <div class="item-section-3 item-8"></div>
                <div class="item-section-3 item-9"></div>
                <div class="item-section-3 item-0"></div>
            </div>
        </section>
    </main>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    color: #333;
}

button{
    border: 1px solid #82CD47;
    border-radius: 5px;
    color: #82CD47;
    font-size: 25px;
    font-weight: bold;
    padding: 5px 24px;
    background-color: white;
}

main{
    max-width: 1200px;
    margin: 0 auto;
}

.section-1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
    justify-content: center;
    align-items: center;
}

.item-section-1{
    padding: 0 20px;
    
}

.item-section-1 h1{
    font-size: 42px;
    margin: 15px 0;
    color: #82CD47;
}

.item-section-1 p{
    font-size: 16px;
    margin-bottom: 15px;
}

.item-section-1 img{
    width: 100%;
}

.title-2{
    text-align: center;
    margin: 50px 0;
}

.title-2 h2{
    font-size: 32px;
}

.section-2{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "img-principal img-principal img-secundaria img-terciaria"
    "img-principal img-principal img-cuarta img-quinta";
    gap: 5px;
}
.item-section-2{
    min-height: 200px;
}

.item-1{
    background-image: url(./video.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-principal;
}
.item-2{
    background-image: url(./dish2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-secundaria;
}
.item-3{
    background-image: url(./dish3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-terciaria;
}
.item-4{
    background-image: url(./dish4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-cuarta;
}
.item-5{
    background-image: url(./dish1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-quinta;
}

.section-3 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-bottom: 25px;
}

.item-section-3{
    min-height: 150px;
}

.item-6{
    background-image: url(./plate1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    
}
.item-7{
    background-image: url(./plate2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
   
}
.item-8{
    background-image: url(./plate3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    
}
.item-9{
    background-image: url(./plate5.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    
}
.item-0{
    background-image: url(./plate4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
   
}

Intent茅 hacer el proyecto primero y este es mi resultado.

Va queriendo:

Me faltan un par de estilos, como el borde inferior del hero, para que llegue a los bordes laterales.

Bueno, como quizas la mayoria aqui, me le medi a hacerlo antes de ver las clases xD. no quedo tan mal, pero obvio se puede mejorar resto. aun asi, fue divertido :3

Mobile First

Me qued贸 as铆鈥 馃槂

<!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>Proyecto: Check the best Food</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <section class="header__container">
            <h1 class="header__title">Check The Best Food</h1>
            <p class="header__description">Lorem ipsum dolor sit amet adipisicing elit. Cupiditate itaque necessitatibus minima qui temporibus quas.</p>
            <button><a href="#">See more details</a></button>
        </section>
        <section class="header__img">
            
        </section>
    </header>
    <main class="main__container">
        <section class="main__title">
            <h2>OUR SERVICES</h2>
        </section>
        <section class="main__img1"></section>
        <section class="main__img2"></section>
        <section class="main__img3"></section>
        <section class="main__img4"></section>
        <section class="main__img5"></section>
    </main>
    <footer class="footer__container">
        <section class="footer__title">
            <h2>Home Menu</h2>
        </section>
        <section class="footer__img1"></section>
        <section class="footer__img2"></section>
        <section class="footer__img3"></section>
        <section class="footer__img4"></section>
        <section class="footer__img5"></section>
    </footer>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

header {
    display: grid;
    grid-template-columns: repeat(2, 160px);
    grid-template-rows: repeat(1, 160px);
    place-content: center;
    place-items: center;

    margin: 20px;
}

header .header__container .header__title {
    margin-bottom: 10px;
    font-size: 2.2rem;

    color: darkslateblue;
}

header .header__container .header__description {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

header .header__container button {
    width: 80px;
    height: 35px;

    background-color: orangered;
    border-radius: 15px;
}

.header__container button a {
    text-decoration: none;
    color: darkslateblue;
}

header .header__img {
    width: 160px;
    height: 160px;
    background-image: url('https://i.postimg.cc/QCrLX0Cn/8-hero.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

main {
    display: grid;
    grid-template-columns: repeat(4, 80px);
    grid-template-rows: repeat(3, 80px);

    place-content: center;
    margin-bottom: 20px;

    gap: 10px;
}

.main__container .main__title {
    grid-column-start: 1;
    grid-column-end: 5;
    place-self: center;

    height: 20px;
}

.main__container .main__img1 {
    grid-area: 2 / 1 / 4 / 3;
    width: 160px;
    height: 170px;
    background-image: url('https://i.postimg.cc/7Pg8B8Qv/8-video.png');
    background-position: start;
    background-repeat: no-repeat;
    background-size: contain;

    justify-content: flex-start;
}

.main__container .main__img2 {
    width: 80px;
    height: 80px;
    background-image: url('https://i.postimg.cc/Gm3C87QW/8-dish1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.main__container .main__img3 {
    width: 80px;
    height: 80px;
    background-image: url('https://i.postimg.cc/nhdtv4SC/8-dish2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.main__container .main__img4 {
    width: 80px;
    height: 80px;
    background-image: url('https://i.postimg.cc/DyTFFyby/8-dish3.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.main__container .main__img5 {
    width: 80px;
    height: 80px;
    background-image: url('https://i.postimg.cc/QxJDMGpg/8-dish4.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

footer {
    display: grid;
    grid-template-columns: repeat(5, 64px);
    grid-template-rows: repeat(2, 53px);

    place-content: center;
    place-items: center;
    margin-bottom: 20px;
}

footer .footer__title {
    grid-column-start: 1;
    grid-column-end: 6;
}

footer .footer__img1 {
    width: 64px;
    height: 54px;
    background-image: url('https://i.postimg.cc/vTRy4Gqh/8-plate1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer__img2 {
    width: 64px;
    height: 53px;
    background-image: url('https://i.postimg.cc/rsSkW77k/8-plate2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer__img3 {
    width: 64px;
    height: 53px;
    background-image: url('https://i.postimg.cc/3rp7PDNc/8-plate3.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer__img4 {
    width: 64px;
    height: 53px;
    background-image: url('https://i.postimg.cc/N05vbKZb/8-plate4.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer__img5 {
    width: 64px;
    height: 53px;
    background-image: url('https://i.postimg.cc/xdhDZ02Q/8-plate5.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Asumi el reto de terminar el proyecto antes, ahora si vere como lo hace la profe y ver si puede optimizar o mejorar mi codigo.
Les recomiendo siempre hacerlo de esta manera, pienso que se aprende mas.

Ac谩 esta mi versi贸n para tablets antes de ver como lo desarrolla la profe.

HTML

<!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">
    <link rel="stylesheet" href="./style.css">
    <title>BestFood</title>
</head>
<body>
   <header>
        <div class="header item">
            <div class="header__content">
                <h1>Check the <br> best food<br></h1>
                <p>Lorem ipsum dolor sit amet fd fdsjkb adipisicing elit. Magni vero, dolorsvsf  jncjdcbdjhid ancja shcusnamorb.</p>
                <button class="button">See More</button> 
            </div>
        </div>
        <div class="header__picture item"> </div>
   </header>
   <div class="Main__title">
    <p>OUR SERVICES</p>
   </div>
   <main>
    <div class="main__container">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
        <div class="item-4"></div>
        <div class="item-5"></div>
    </div>
   </main>
   <div class="footer__title">
    <p>Home Menu</p>
   </div>
   <footer>
        <div class="footer__container">
         <div class="item--1"></div>
         <div class="item--2"></div>
         <div class="item--3"></div>
         <div class="item--4"></div>
         <div class="item--5"></div>
        </div>
   </footer>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    display: grid;
    grid-template-columns: 410px 410px;
    grid-template-rows: repeat(1, auto);
    
}
    

.header__picture {
  background-image: url("https://i.postimg.cc/zD21m9fG/hero.png");
  width: 400px;
  height: 410px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
}
.header__content {
    display: grid;
    align-content: center;
    height: 400px;
    margin-right: 40px;
    margin-left: 50px;
}
.button {
    margin-top: 14px;
    width: 132px;
    height: 30px;
    color: white;
    border-radius: 10px;
    background-color: #F7931A;
    border: none;
}
header .header__content h1 {
    font-weight: bold;
    font-size: 50px;
}
.header__content p {
    font-size: 16px;
    margin-top: 16px;
}

.Main__title {
    font-size: 26px;
    color: rgb(165, 163, 170);
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: center;
}
.main__container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, 200px);
    gap: 18px;
}


.item-1 {
    grid-area: 1 / 1 / 3 / 3;
    background-image: url("https://i.postimg.cc/k5qHRc5H/video.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}
.item-2 {
    background-image: url("https://i.postimg.cc/qR0pRyfB/dish1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}
.item-3 {
    background-image: url("https://i.postimg.cc/Wp5sNd5j/dish2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}
.item-4 {
    background-image: url("https://i.postimg.cc/hPwgmHF5/dish3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}
.item-5 {
    background-image: url("https://i.postimg.cc/MG08hHnC/dish4.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}


.footer__title {
    font-size: 26px;
    color: rgb(165, 163, 170);
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: center;
}
.footer__container {
    display: grid;
    grid-template-columns: repeat(5, 140px);
    grid-template-rows: repeat(1, 140px);
    gap: 18px;
}
.item--1 {
    background-image: url("https://i.postimg.cc/15g1yJgc/plate1.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--2 {
    background-image: url("https://i.postimg.cc/cH1P2my3/plate2.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--2 {
    background-image: url("https://i.postimg.cc/cH1P2my3/plate2.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--3 {
    background-image: url("https://i.postimg.cc/Fsk8MzqT/plate4.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--4 {
    background-image: url("https://i.postimg.cc/rs3bd2dG/plate3.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--5 {
    background-image: url("https://i.postimg.cc/rw63Mc2M/plate5.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
} 

Intent茅 hacerlo antes de ver las otras clases y este fue el resultado 馃槃
https://papitapapita.github.io/grid_exercises/

Emocionado con el Proyecto

Se ve 茅pico el proyecto!

Genial, manos a la obra