Armando el listado

Cometa, todo feedback es bienvenido

Ya casi terminamos el proyecto 🥳
Asi me va quedando:

.
Repositorio de GitHub: https://github.com/iJCode1/CSS_Grid_Basico-Platzi
.
Código HTML

<section class="home__menu">
      <h2>Home Menu</h2>
      <div class="home__menu--grid">
        <img src="./images/plate1.png" alt="A plate of food">
        <img src="./images/plate2.png" alt="A plate of food">
        <img src="./images/plate3.png" alt="A plate of food">
        <img src="./images/plate4.png" alt="A plate of food">
        <img src="./images/plate5.png" alt="A plate of food">
      </div>
    </section>

.
Código CSS:

.home__menu{
  margin-block-end: 100px;
}
.home__menu h2{
  color: #333;
  font-size: 2rem;
  margin-block-end: 30px;
  text-align: center;
}
.home__menu--grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.home__menu--grid img{
  display: grid;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  border-radius: 15px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.home__menu--grid img:hover{
  background-color: #FFCA03;
}

Así va quedando mi proyecto, he aprendido mucho en este curso, es muy claro como explica la profesora, y grid es excelente muy útil:

el código CSS:

.menu{
    display: flex;
    flex-direction: column;
}

.menu h2{
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    color: midnightblue;
}

.menu-grid{
    display: grid;
    place-content: center;
    grid-template-columns: repeat(5 , minmax(150px , 200px));
    margin: 50px 0;
    gap: 20px;
}

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

.menu-item-background{
    background-color: peachpuff;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
} 

HTML

CSS

Resultado Final

Mi menu

Una particularidad, que no se si solo me paso a mi, y es que cambie la etiqueta div por el figure y las img salen mas pequeñas he aqui una referencia, no me pregunten porque (si alguien sabe comentelo jeje) pero la diferencia es clara

Asi acabe el mio

Se puede usar transform para agrandar la imagen

.image :hover{
	transform: scale(1.3)
}

Cuando quieran poner el div con la clase “menu-grid” solamente pongan:

.menu-grid   

y le dan tabulador para que se forme el div con esa clase

El ultimo Emmet

section.menu>h2.menu-title+div.menu-grid>div.menu-grid-item*5>img

<section class="menu">
            <h2 class="menu-title"></h2>
            <div class="menu-grid">
                <div class="menu-grid-item"><img src="" alt=""></div>
                <div class="menu-grid-item"><img src="" alt=""></div>
                <div class="menu-grid-item"><img src="" alt=""></div>
                <div class="menu-grid-item"><img src="" alt=""></div>
                <div class="menu-grid-item"><img src="" alt=""></div>
            </div>
        </section>

Podemos agregar los corazones con el pseudo-elemento before y ubicarlos en la esquina superior derecha con position absolute:

.menu-container__dish-container::before {
  content: "🩵";
  position: absolute;
  right: 4px;
  top: 4px;
}

.menu-container__dish-container--orange-heart::before {
  content: "🧡";
}

ultima seccion

HTML

CSS

Ipad:

Mobile:

Mi avance - sección 3 final

• Revisa el código en mi repositorio de GitHub

• Mira directamente la demo

Resultado:

🍝 Así quedó esta parte, le agregué los corazones, como en la imagen de referencia, con Font Awesome 💚.

<section class="home-menu">
  <h2>Home Menu</h2>
  <div class="menus">
	<div class="menu menu1">
	  <i class="fa fa-heart fa-lg"></i>
	  <img class="menu-img" src="https://i.postimg.cc/15g1yJgc/plate1.png" alt="Pasta with Neapolitan sauce and vegetables">
	</div>
	<div class="menu menu2">
	  <i class="fa fa-heart fa-lg orange"></i>
	  <img class="menu-img" src="https://i.postimg.cc/cH1P2my3/plate2.png" alt="Pasta with broccoli and carrot">
	</div>
	<div class="menu menu3">
	  <i class="fa fa-heart fa-lg"></i>
	  <img class="menu-img" src="https://i.postimg.cc/rs3bd2dG/plate3.png" alt="Pesto pasta">
	</div>
	<div class="menu menu4">
	  <i class="fa fa-heart fa-lg"></i>
	  <img class="menu-img" src="https://i.postimg.cc/Fsk8MzqT/plate4.png" alt="Pasta with avocado and corn">
	</div>
	<div class="menu menu5">
	  <i class="fa fa-heart fa-lg"></i>
	  <img class="menu-img" src="https://i.postimg.cc/rw63Mc2M/plate5.png" alt="Bowl of chicken, tomato and carrots">
	</div>
  </div>
</section>

.home-menu h2 {
  padding-top: var(--space-base);
  color: var(--dark-blue);
  font-weight: 500;
  text-align: center;
}

.menus {
  margin: var(--space-base) 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(50px, 200px));
  gap: var(--space-base);
  justify-content: center;
}

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

.menu {
  position: relative;
  padding: calc(var(--space-base) / 2);
  background-color: var(--light-orange);
  border-radius: var(--space-base) 5px 5px 5px;
}

.fa-heart {
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--green);
  cursor: pointer;
}

.orange {
  color: var(--orange);
}

Tomando como referencia el aporte de otro compañero, el efecto hover que apliqué fue el siguiente

.menu__grid-item:hover {
    box-shadow: 8px 5px 3px #ffae6c, -8px -5px 3px burlywood;
}

Home menu\

`

`

\

`

`

\

`

`

\

`

`

\

`

`

\

\

Hola! comparto mi proyecto finalizado 😄

Aquí

https://iecgerman.github.io/pastas/

después de la sección anterior, esta fue fácil 😄

Le añadi un poco de efecto al pasar el mouse por encima, ademas tambien se lo agregue al boton del hero, dejo el codigo abajo

Mi menu, trate de hacerlo lo mas parecido posible al ejemplo:

NICE x2

es un track

por mejores prácticas recomendaría no colocar la imagen dentro de un div, sino dentro de un figure.

Al fin completé la claseeee

un poco de Neumorphism

!

code8.png

resultado de la clase:

No pude usar la clase que la profesora sugiere de menu-grid. Sole use menu-grid-items y funciono perfecto.

EXCELENTE PROYECTO

Para agrandar la imagen le modifique a la clase .hero-image el object-fit: contain; a object-fit: cover;

Dejo el proyecto terminado

<!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>
    <div class="main">
        <header class="header-container">
            <div class="information">
                <h1>Check the <br> best food</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, similique, sequi perspiciatis labore qui culpa quisquam deserunt asperiores eos vel pariatur sed corporis nesciunt? Repellendus, voluptate fugiat. Cupiditate, veritatis nulla voluptas culpa placeat voluptatibus! Error voluptas dolor doloribus perferendis nam.</p>
                <button class="primary-button">Book a Table</button>
            </div>
            <div class="logo">
                <img src="/imagenes/hero.png" alt="logo">
            </div>
        </header>

        <main class="dishes-container">
            <h1 class="dishes-title">Our services</h1>
            <div class="dishes">
                <img class="dish-item dish-item_1" src="/imagenes/video.png">
                <img class="dish-item dish-item_2" src="/imagenes/dish1.png">
                <img class="dish-item dish-item_3" src="/imagenes/dish2.png">
                <img class="dish-item dish-item_4" src="/imagenes/dish3.png">
                <img class="dish-item dish-item_5" src="/imagenes/dish4.png">
            </div>

            <section class="menu">
                <h1 class="menu-title">Home Menu</h1>
                <div class="menu-grid">
                    <div class="menu-grid-items grid-item_1">
                        <img src="/imagenes/plate1.png">
                    </div>
                    <div class="menu-grid-items grid-item_2">
                        <img src="/imagenes/plate2.png">
                    </div>
                    <div class="menu-grid-items grid-item_3">
                        <img src="/imagenes/plate3.png">
                    </div>
                    <div class="menu-grid-items grid-item_4">
                        <img src="/imagenes/plate4.png">
                    </div>
                    <div class="menu-grid-items grid-item_5">
                        <img src="/imagenes/plate5.png">
                    </div>
                </div>
            </section>
        </main>
    </div>
</body>
</html>

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto' , sans-serif;
}

.main {
    max-width: 120rem;
    margin: 0 auto;
}

.header-container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    max-height: 50rem;
    border-bottom: .1rem solid goldenrod;
}

.logo img {
    width: 100%;
    height: 50rem;
    object-fit: contain;
}

.information {
    place-self: center;
}

.information h1 {
    font-weight: bold;
    font-size: 5rem;
    margin-bottom: .8rem;
}

.information p {
    font-size: 1.6rem;
    margin-bottom: 4rem;
}

.primary-button {
    padding: 1.2rem .8rem;
    border: none;
    border-radius: 2rem;
    background: #fb8c00;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
}

.dishes {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    gap: 1.6rem
}

.dish-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.6rem;
    border: .3rem solid green;
}

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

.dishes-title {
    margin: 3rem 0 3rem 0;
    font-weight: bold;
    font-size: 5rem;
    text-align: center;
}

.menu-title {
    margin: 5rem 0 3rem 0;
    font-weight: bold;
    font-size: 5rem;
    text-align: center;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(5 , minmax(10rem , 25rem));
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 10rem;
}

.menu-grid-items img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menu-grid-items {
    background-color: coral;
    padding: 2rem;
    border-bottom-right-radius: 5rem;
    border-top-left-radius: 5rem;
}

Ya voy entendiendo por que tantos desarrolladores aman grid css, Genial muy sencillo estilar nuestro sitio

Aqui el reto casi completo!

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">
  <title>Proyecto de la clase</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <main>
    <section class="hero">
      <div class="info">
        <h1 class="info-title">Check the <br> best food</h1>
        <p class="info-subtitle">Lorem ipsum, dolor sit amet </p>
        <button class="info-button">Book a table</button>
      </div>
      <img class="hero-image" src="./imagenes/hero.png" alt="Plato de pasta con vegetales">
    </section>

    <section class="dishes">
      <h2 class="dishes-title">Our Services</h2>
      <div class="dishes-grid">
        <img class="dishes-item dishes-item__big" src="./imagenes/video.png" alt="video sobre la comida">
        <img class="dishes-item" src="./imagenes/dish1.png" alt="">
        <img class="dishes-item" src="./imagenes/dish2.png" alt="">
        <img class="dishes-item" src="./imagenes/dish3.png" alt="">
        <img class="dishes-item" src="./imagenes/dish4.png" alt="">
      </div>
    </section>

    <section class="menu">
      <h2 class="menu-title">Home menu</h2>
      <div class="menu-grid">
        <div class="menu-grid-item">
          <img src="./imagenes/plate1.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate2.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate3.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate4.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate5.png" alt="">
        </div>
      </div>
    </section>
  </main>
</body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
main { 
  max-width: 1200px;
  margin: 0 auto;
}
.hero { 
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-auto-rows: 550px;/* ALTURA del contenedor */
  border-bottom: 1px solid #ddd;
}
.hero .hero-image { 
  width: 100%;
  height: 100%; /* ALTURA del contenedor */
  object-fit: contain; /* La imagen se ajuste al espacio donde esta */
}
.info { 
  align-self: center; /* Alineamos el contenido del div.info */
}
.info-title { 
  color: #333;
  font-size: 3rem;
  font-weight: bolder;
  margin-bottom: 24px;
}
.info-subtitle {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 24px;
} 
.info-button { 
  border: none;
  border-radius: 20px;
  color: #333;
  background-color: #fb8c00;
  font-weight: bolder;
  padding: 12px 24px;
}
.dishes { 
  margin: 100px 0;
}
.dishes-title { 
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
  font-size: 2rem;
}
.dishes-grid { 
  display: grid;
  place-content: center;
  grid-template-columns: repeat(4, minmax(150px, 200px)); /* REDUCIMOS el tamaño del grid */
  grid-auto-rows: 1fr;
  gap: 24px;
}
.dishes-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dishes-item__big { 
  grid-area: 1 / 1 / 3 / 3;/* INICIA EN fila 1 y columna 1 / TERMINA EN fila 3 columna 3  */
}
.menu { 
  margin-bottom: 200px;
}
.menu-title { 
  font-size: 2rem;
  color: #333;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 50px;
}
.menu-grid { 
  display: grid;
  gap: 24px;
  justify-content: center;
  grid-template-columns: repeat(5, minmax(100px, 250px));
}
.menu-grid-item { 
  background-color: lightpink;
  padding: 12px;
  border-top-left-radius: 40px;
}
.menu-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}