Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Proyecto

8/13
Recursos

Aportes 15

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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.

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.

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

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! 😎

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



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

agradecida con el de arriba.
XD

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%;
}

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

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

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