Proyecto

Hola amigos de Platzi!

Darwing Steven Sánchez Londoño

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.

César Palma

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.

Jerremi Aron Chancan Labajos

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

Leal Brigitte

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

Joel Dominguez Merino

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

Andrés Esteban Rodríguez Jiménez

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

Antonio Mora

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

Christian Andres Moreno Ceballos

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

Paula Andrea Hayle

agradecida con el de arriba.
XD

Remix Zapata

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

Screenshot 2022-05-29 at 23-02-41 Restaurant Ratatouile.png

Desktop:

marco antonio

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

Juan Camilo Salazar Rojas

Aquí mi resultado

Raúl Adolfo Sánchez Rodríguez

hace 6 meses

Maquetación

Santiago Rodriguez Chaves

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

Genaro Flores Bustos

hace 2 meses

Acá intentando antes de ver como lo hace la profe a ver que sale 😄

Jessica Silvia Payano Castro

hace 5 meses

screencapture-127-0-0-1-5500-index-html-2023-04-25-18_27_21.png

Raymondi Alejandro Ramos Vásquez

hace 6 meses

→ Ver dónde irán las grillas
→ Empezar desde las celdas

pablins6101

hace 8 meses

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

Rafael Soriano Ramírez

hace 8 meses

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.

Luis Alberto Escobar Martinez

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.

Captura de pantalla 2022-12-02 a la(s) 20.48.10.png

Matias Arevalo

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

Brayan Cristancho

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

Agu Damonte

Va queriendo:

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

Diego Fernando Mera Largo

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

Henry Alexander Velásquez Rosas

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

Orlando Rodriguez

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.

andres gonzalez