Creando la grilla con área

la profesora juega legue of legends con warwick???’’

Consejo: Agregar a los estilos del button:

cursor: pointer;

HTML

CSS

para no hacer calculos se puede usar el grid template areas y decirle como se van a repartir las grillas, dejo ejemplo

        <section class="dishes">
            
            <h2>Our Services</h2>
            <div class="dishes-grid">
                <img class="dishes-item dishes-item__big" src="images/video.png" alt="">

            <img class="dishes-item dish-1" src="images/dish1.png" alt="">
            <img class="dishes-item dish-2" src="images/dish2.png" alt="">
            <img class="dishes-item dish-3" src="images/dish3.png" alt="">
            <img class="dishes-item dish-4" src="images/dish4.png" alt="">
            </div>

        </section>

— CSS —

.dishes-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-template-areas: 
        "big big img1 img2"
        "big big img3 img4"
    ;
    gap: 26px;
}

.dishes-item__big{
    grid-area: big;
}

.dish-1{
    grid-area: img1;
}


.dish-2{
    grid-area: img2;
}

.dish-3{
    grid-area: img3;
}

.dish-4{
    grid-area: img4;
}

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

mobile:

ipad:

Aqui les dejo como va quedando

VISTA:

CODIGO:

listo

😄

Esta quedando muy bonito!

Como importar varias imágenes con nombres similares usando Emmet Abbreviation

img[src="./images/dish$.png"]*4+img[src="./images/video.png"]

Me encanta maquetar con CSS grid, aunque se me olvide mucho

Les comparto la guía de Mozilla, sobre imágenes.

• https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML

Esta fue mi decoracion

CSS GRID ES UNA BENDICION , lo que antes me costaba 40 minutos maquetar bien ahora simplemente en 7 lo realizo

COMPUTADORA:

TELEFONO:

El proyecto va quedando genial!
Les comparto mi resultado:

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

<section class="services">
      <h2>OUR SERVICES</h2>
      <div class="services__content">
        <div class="services__one">
          <img class="" src="./images/video.png" alt="A video of food plates">
        </div>
        <div class="services__two">
          <img src="./images/dish1.png" alt="A plate of food">
          <img src="./images/dish2.png" alt="A plate of food">
          <img src="./images/dish3.png" alt="A plate of food">
          <img src="./images/dish4.png" alt="A plate of food">
        </div>
      </div>
    </section>

.
Código CSS:

.services h2{
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
}
.services__content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 25px;
}
.services__one{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  grid-template-areas: 
  "img img"
  "img img";
}
.services__one img:nth-child(1){
  grid-area: img;
}
.services__two{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 15px;
}
.services img{
  height: 100%;
  object-fit: cover;
  width: 100%;
}

* {
    /* margin: 0; */
    /*padding: 0; */
    font-family: Roboto, sans-serif;
}

:root {
    --space-base: 30px;
}

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

.hero {
    display: grid;
    grid-template-columns: 2fr minmax(100px, 3fr);;
    max-height: 550px;
    grid-auto-rows: 400px;
    margin-left: 30px;
    margin-top: 10px;
    border-bottom: 1px solid #ddd;

}

.hero--image {
    width: 90%;
    display: grid;
    height: 90%;
    object-fit: contain;
}

.title
{
    font-size: 1.2rem;
    margin-bottom: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

h1 {
    font-size: 4.5rem;
    font-weight: 900px;
    line-height: 4.8rem;
  }
  
.p--info {
    margin: var(--space-base) 0;
    align-self: center;
    font-size: 1.5rem;
    border-bottom: 240px;
}
  
.button--info {
    padding: calc(var(--space-base) / 3) var(--space-base) ;
    font: inherit;
    color: white;
    background: linear-gradient(180deg, rgb(250, 172, 116) 25%, rgba(225,116,48,1) 100%);
    border: none;
    border-radius: var(--space-base);
    outline: inherit;
    cursor: pointer;
}
  

.services{
    display: grid;
    margin-top: 200px;
}

.services--title {
    color: #333;
    font-size: 3rem;
    font-weight: 400px;
    text-transform: uppercase;
    text-align: center;
    margin: 100px 0 50px 0;
  }
  
  .dishes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-template-rows: repeat(2, minmax(150px, 1fr));
    grid-gap: 50px;
  }
  
  .dishes--images {
    margin: 0;
  }
  
  .dishes--images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .dishes--images__big {
    grid-area: 1 / 1 / 3 / 3;
  }
  
  /* Third section - menu */
  
  .menu--title {
    color: #333;
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
    margin: 100px 0 50px 0;
  }
  
  .plates {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 100px;
  }
  
  .plates--images {
    margin: 0;
    background-color: #ffebee;
    padding: 20px;
    border-top-left-radius: 30px;
  }
  
  .plates--images img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

<!DOCTYPE html>
<html lang="en">
<link>
<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="grid4.css"></link>
    <title>Grid 4</title>
</head>
<body>
    <main>
        <section class="hero">
            <div class="title">
                <h1>Check the <br>best food</h1>
                <p class="p--info">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed quaerat voluptate assumenda. Veniam praesentium velit eveniet facilis inventore assumenda magni, voluptatem cupiditate, maxime itaque enim quo tempora veritatis esse minima?</p>
                <button class="button--info">Book a table</button>  
            </div>
            <figure class="hero--image">
                <img class="hero--image" src="./images/hero.png" alt="Pasta Dish with neapolitan sauce and vegetables">
            </figure>
        </section>
  
    <section class="services">
        <h2 class="services--title">Our services</h2>
        <div class="dishes">
            <figure class="dishes--images dishes--images__big">
                <img src="./images/video.png" alt="Pasta video">
            </figure>
            <figure class="dishes--images">
                <img src="./images/dish1.png" alt="A bowl of vegetables with rice and avocado">
            </figure>
            <figure class="dishes--images">
                <img src="./images/dish2.png" alt="Avocado and egg toast">
            </figure>
            <figure class="dishes--images">
               <img src="./images/dish3.png" alt="Asparagus with tomato and butter">
            </figure>
            <figure class="dishes--images">
                <img src="./images/dish4.png" alt="Eggs and guacamole toast ">
            </figure>
        </div>
    </section>
    <section class="menu">
        <h2 class="menu--title">Home menu</h2>
        <div class="plates">
            <figure class="plates--images">
                <img src="./images/plate1.png" alt="pasta with neapolitan sauce and vegetables">
            </figure>
            <figure class="plates--images">
                <img src="./images/plate2.png" alt="pasta with broccoli and carrot">
            </figure>
            <figure class="plates--images">
                <img src="./images/plate3.png" alt="pesto pasta">
            </figure>
            <figure class="plates--images">
                <img src="./images/plate4.png" alt="pasta with avocado and corn">
            </figure>
            <figure class="plates--images">
                <img src="./images/plate5.png" alt="bowl of chicken, tomato and carrots">
            </figure>
        </div>
    </section>
    </main>
</body>

Consejo para los colores usen variables, es un viaje de ida.

• Primero las declaran:
  ![](

  

• y luego las van llamando con var(‘nombre de la variable’)
  ![](

  
  Esto les va a permitir hacer cambios de manera más rápida a los colores si es que necesitan hacer algún cambio de esos.
  Espero les sirva!

segunda seccion con un poco de box-shadow

Mi aporte con SASS

me llegue a frustrar en un momento porque no me estaba quedando igual… pero era porque no había guardado 😑😑😑

Vamos bien, está quedando genial

Le agregue algunos detalles que vi en el template de inspiración.

Comparto mis resultados:

resultado de la clase:

😃 Este curso esta genial

Out services\

`

`

`

`

`

\

ahí va quedando 😋

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

https://willy23jaramillo.github.io/cssgrid-nuevo/
aqui les dejo mi maqueta

Esto juntandolo con responsive design cuesta un poco más e.e

Mi avance - sección 2

• Revisa mi repositorio en GitHub para ver el código fuente

• Mira directamente la demo
  Resultado:
  

  

Pongo mi aporte, lo estoy trabajando con SASS y cambios, solo un mixin para poder ahorrar condigo con las imagenes

      <article class="outServices">
        <h2 class="outServices__title">Our services</h2>
        <div class="outServices__content">
          <figure
            class="outServices__content--image outServices__content--image--big"
          >
            <img
              src="./images/video.png"
              alt="video of pasta dishes being served"
            />
          </figure>
          <figure class="outServices__content--image">
            <img
              src="./images/dish1.png"
              alt="bowl of vegetables with rice and avocado"
            />
          </figure>
          <figure class="outServices__content--image">
            <img src="./images/dish2.png" alt="Avocado and egg toast" />
          </figure>
          <figure class="outServices__content--image">
            <img
              src="./images/dish3.png"
              alt="asparagus with tomato and butter"
            />
          </figure>
          <figure class="outServices__content--image">
            <img src="./images/dish4.png" alt="eggs and guacamole toast " />
          </figure>
        </div>
      </article>

.outServices {

    &__title {
        @include subtitles();
    }

    &__content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);

        gap: 20px;

        &--image {
            img {
                @include imageContainer();
            }

            &--big {
                grid-area: 1/1/3/3;
            }
        }
    }
}

@mixin imageContainer {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Tengo de todos modos una confusión entre usar align-items o justify-content. Uno ve a la profe usar los elementos y todo va quedando chevere pero cuando le toca a uno solito no se sabe que escribir. Investigando en internet encontré este recurso por si a alguien le intereza empezar a salir de dudas
https://codepen.io/enxaneta/full/adLPwv/

NICE

HTML:

CSS:

Buenas noches profe Estefany, agradecerle su gran empeño en este curso, siento que fue un gran proyecto donde pudimos ver detalladamente la utilidad que le podemos dar a nuestros proximos proyectos personales, nuevamente muchas gracias.

No sé ustedes. Pero yo este lo hice fue con grid-templete-area

Así me quedo esta segunda parte 🍝

<section class="our-services">
  <h2>OUR SERVICES</h2>
  <div class="dishes">
    <img class="video-img" src="https://i.postimg.cc/k5qHRc5H/video.png" alt="Video de comida">
    <div class="dish dish1">
      <p>26$</p>
      <img class="dish-img" src="https://i.postimg.cc/qR0pRyfB/dish1.png" alt="">
    </div>
    <div class="dish dish2">
      <p>26$</p>
      <img class="dish-img" src="https://i.postimg.cc/Wp5sNd5j/dish2.png" alt="">
    </div>
    <div class="dish dish3">
      <p>26$</p>
      <img class="dish-img" src="https://i.postimg.cc/hPwgmHF5/dish3.png" alt="">
    </div>
    <div class="dish dish4">
      <p>26$</p>
      <img class="dish-img" src="https://i.postimg.cc/MG08hHnC/dish4.png" alt="">
    </div>
  </div>
</section>

.our-services h2 {
  margin-top: var(--space-base);
  font-weight: 500;
  text-align: center;
}

.dishes {
  margin: var(--space-base) 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 220px));
  grid-template-rows: 1fr;
  gap: calc(var(--space-base));
  justify-content: center;
}

.video-img,
.dish-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dishes .video-img {
  grid-area: 1/1/3/3;
}

.dish {
  position: relative;
}

.dishes p {
  position: absolute;
  left: 10px;
  bottom: 10px;

  font-size: 2.2rem;
  color: white;
  text-shadow: 1px 1px 2px #1b1b1b;
}

listo vamos por buen camino .

Los comentarios alterados por el fondo de escritorio de la profe jaja

.service__container {
    margin: 100px 0;
}

.service__title {
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-size: 2rem;
}

.service__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 200px));
    grid-auto-rows: 1fr;
    grid-template-areas: 
    "video video first second"
    "video video third fouth";
    justify-content: center;
    gap: 20px;
}

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

.service__video {
    grid-area: video;
}

.service__first-img {
    grid-area: first;
}

.service__second-img {
    grid-area: second;
}

.service__third-img {
    grid-area: third;
}

.service__fouth-img {
    grid-area: fourth;
}

pues ya, así quedó.
Nota: Es mejor si ya tienes tus imágenes en los tamaños correctos

HTML

CSS

Yo lo resolví con el grid-template-areas, me resulta mucho más fácil de ubicarme:

<CSS3>  
*{
    font-family: 'Roboto', sans-serif;
}

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

.hero{
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-auto-rows: 400px;
    border-bottom: 1px solid #ddd;
}

.hero-image{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.info{
    align-self: center;
}

.info-title{
    color: #333;
    font-size: 3rem;
    font-weight: bolder;
    margin-bottom: 24px;
}


.info-subtitle{
    color: #333;
    margin-bottom: 24px;
    font-size: 1.5rem;
}
.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;
}
.dishes-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 200px));
    grid-auto-rows: 1fr;
    grid-template-areas: 
    "header header main1 main3"
    "header header main2 main4";
    gap: 25px;
    justify-content: center;
}

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


.dishes-item__big{
    grid-area: header;
}

.dish-1{
    grid-area: main1;
}


.dish-2{
    grid-area: main2;
}

.dish-3{
    grid-area: main3;
}

.dish-4{
    grid-area: main4;
}

<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>
    <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 consectetur adipisicing elit. Ipsum maiores veritatis eum! Consectetur dicta repellendus delectus vitae, hic totam, qui, ratione dolore enim culpa accusantium perspiciatis accusamus atque dolor molestiae?</p>

            <button class="info-button">Book a table</button>
        </div>
        <img class="hero-image" src="./images/hero.png" alt="hero">
    </section>

    <section class="dishes">
        <h2 class="dishes-title"> Our Services</h2>
        <div class="dishes-grid">
        <img class="dishes-item dishes-item__big" src="./images/video.png" alt="video">

        <img class="dishes-item dish1" src="./images/dish1.png" alt="bowl de vegetales">

        <img class="dishes-item dish2" src="./images/dish2.png" alt="bowl de vegetales">

        <img class="dishes-item dish3" src="./images/dish3.png" alt="bowl de vegetales">

        <img class="dishes-item dish4" src="./images/dish4.png" alt="bowl de vegetales">
    </div>
    </section>
</body>
</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>
    <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>
        </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: .8rem
}

.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: .8rem 0 3rem 0;
    font-weight: bold;
    font-size: 5rem;
    text-align: center;
}