No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Mi orden: HTML

15/22
Recursos

Aportes 22

Preguntas 10

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Maqueta HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <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="./styles.css">
    <title>My order | Platzi Yard Sale</title>
</head>
<body>
    <header>

    </header>
    <main>
        <div class="my-order">
            <div class="my-order-container">
                <h1 class="title-order">
                    My order
                </h1>
                <div class="my-order-content">
                    <div class="order">
                        <div>
                            <p>
                                <span>
                                    10.03.2021
                                </span>
                                <span>
                                    6 articles
                                </span>
                            </p>
                        </div>
                        <p>
                            $560.00
                        </p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                    <div class="shopping-cart">
                        <figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>
                        <p>Bike</p>
                        <p>$30,00</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

empecé el curso esta mañana a las 10, llevo casi 5 horas y lo terminare probablemente esta noche, un curso muy bueno enseñanza rápida y efectiva, aunque opino que deberían seguir con las reglas que nos dieron en otros cursos, menos divs y un css en su propia hoja.

Quitando esos 2 pequeños factores un aprofesora de 10 😃

Como amo a Estefany, me he comido el curso en un día , espero terminarlo para la noche.

  • Toda la estructura en una linea de códig:

.my-order>(.my-order-container>.my-order-content>(p>span2)+p{560.00})+.shopping-cart>figure>img+p2

  • Borrar el ultimo carácter y volverlo a escribir

Justo en el minuto 2:32 dentro del div escriban esto y completen con Emmet (Tab o Enter):

div.my-order-content>p>span{04.25.21}+span{6 articles}^p{$560.00}

Muy util para escribir HTML velozmente:

https://coderslink.com/talento/blog/ahorra-tiempo-al-escribir-codigo-html-en-visual-studio-code-utilizando-emmet/

Estaría excelente que pudieran dar las respuestas a los retos propuestos

Sabes que entendiste cuando empiezas a ver diferentes formas de hacer el mismo diseño.

Quizá estas últimas clases se podrían haber propuesto como reto, es todo el rato hacer lo mismo

el shopping-cart div va dentro de div container DE NADA

Me adelante un poquito con esta pantalla
🌐 Les comparto el código en GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Vista desktop:

.
Vista móvil:

Mis avances !!!

Para esta clase debes tener en cuenta que la estructura será la siguiente:
Div My order
My order container
titulo
My order content
(TEXTO)
Shopping cart
Figura
parrafo
parrafo
parrafo

All

<!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">
    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Yard Sale | View 9 - My order: HTML</title>
    <style>
        /* Se agregan los estilos para la pantalla de "New Password" */
        :root{
        --white: #FFFFFF;
        --black: #000000;
        --very-light-pink: #605C5C;
        --text-input-field: #ECECEC;
        --hospital-green: #72a178;
        /* FONT SIZE */
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
        }
        body{
            font-family: 'Quicksand', sans-serif;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="my-order">
        <div class="my-order-container">
            <div class="my-order-content">
                <p>
                    <span>04.25.21</span>
                    <span>6 articles</span>
                </p>
                <p>$560.00</p>
            </div>
        </div>

        <!-- CARDS -->
        <div class="shopping-card">
            <figure>
                <img src="https://images.pexels.com/photos/7671233/pexels-photo-7671233.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
            </figure>
            <p>Table</p>
            <p>$30,00</p>
        </div>

        <div class="shopping-card">
            <figure>
                <img src="https://images.pexels.com/photos/1866149/pexels-photo-1866149.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
            </figure>
            <p>Table</p>
            <p>$30,00</p>
        </div>

        <div class="shopping-card">
            <figure>
                <img src="https://images.pexels.com/photos/3797991/pexels-photo-3797991.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
            </figure>
            <p>Table</p>
            <p>$30,00</p>
        </div>

        <div class="shopping-card">
            <figure>
                <img src="https://images.pexels.com/photos/6492397/pexels-photo-6492397.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
            </figure>
            <p>Table</p>
            <p>$30,00</p>
        </div>
    </div>
</body>
</html>

Por si no tienen el link a la mano

<figure>
                            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
                        </figure>

Mi codigo…

<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        :root {
             --white: #FFFFFF;
             --black: #000000;
             --very-light-pink: #C7C7C7;
             --text-input-field: #F7F7F7;
             --hospital-green: #ACD9B2;
             --sm: 14px;
             --md: 16px;
             --lg: 18px;
              }
               body{
                   margin: 0;
                   font-family:'Quicksand',sans-serif;
               }
               </style>
</head>
<body>

<div  class="my-order">
    <div class="my-order-container">
        <div class="my-order-content">
            <p>
                <span>
                 03.25.21
                </span>
                <span>
                    6 articles
                </span>
            </p>
            <p>
                $560.00
            </p>


        </div>
    </div>
    <div class="shopping-cart">
        <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30.00</p>

    </div>
    <div class="shopping-cart">
        <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30.00</p>
           
    </div>

</div>    
</body>
</html>

va saliendo, me gusta como vamos practicando!

Asi resolvi el reto de separar las lista de abajo

.mobile-menu ul:nth-child(2){
margin-bottom: 100px;

}

Me gusta mucho este curso es muy practico 👍✨ si desean la imagen tal como esta en el diseño original 👉img👈

<div class="my-order">
        <div class="my-order-container">
            <div class="my-order-content">
                <p>
                    <span>03.25.21</span>
                    <span>6 articles</span>
                </p>
                <p>$560.00</p>
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>

            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?cs=srgb&dl=pexels-pixabay-276517.jpg&fm=jpg"" alt="bike">
                </figure>
                <p>bike</p>
                <p>$30.00</p>
            </div>
        </div>
    </div>

Esta es la forma que trato de seguir (no estoy segura de que este del todo bien)
.

Secciones nuevas etiqueta -> Section
Caja contenedora de textos -> Article
Caja contenedora que puede tener imágenes o texto
-> Div
.
El HTML de la clase me quedó así

<section class="my-order">
        <div class="my-order-container">

            <article class="my-order-content">
                <p>
                    <span>03.24.22</span>
                    <span> 6 articles</span>
                </p>
                <p>$560.00</p>
            </article>

            <div class="shoppin-card">
                <figure>
                    <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="cat">
                </figure>
                <p>Michi</p>
                <p>$130.00</p>
            </div>

        </div>
    </section>