Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Layout shifter CSS

47/55
Recursos

Aportes 328

Preguntas 63

Ordenar por:

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

Reto completado
Mobile

Tablet

Desktop

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout with Flex</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/tablet.css" media="only screen and (min-width:768px)">
    <link rel="stylesheet" href="./css/desktop.css" media="only screen and (min-width:1024px)">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];700&display=swap" rel="stylesheet">
  </head>
  <body>
    <header class="header">
      <figure class="logo">
        <img src="./images/logo.webp" alt="Logo Platzi">
        <strong>Platzi</strong>
      </figure>
      <nav class="navbar">
        <ul class="menu">
          <li>
            <a href="">Home</a>
          </li>
          <li>
            <a href="">Courses</a>
          </li>
          <li>
            <a href="">Teachers</a>
          </li>
          <li>
            <a href="">Blog</a>
          </li>
        </ul>
      </nav>
    </header>
    <main class="main">
      <section class="content">
        <figure class="platzi-team">
          <img src="./images/platzi.jpeg" alt="Platzi team">
        </figure>
        <p>Aprende desde cero a crear el futuro web con nuestros Cursos Online Profesionales de Tecnología. 🚀¡Cursos de Desarrollo, Diseño, Marketing y Negocios!</p>
      </section>
      <aside class="routes">
        <h2>Pogreso</h2>
        <figure class="routes-images">
          <img src="./images/route_1.png" alt="Route">
          <img src="./images/route_2.png" alt="Route">
          <img src="./images/route_3.png" alt="Route">
          <img src="./images/route_4.png" alt="Route">
        </figure>
      </aside>
    </main>
    <footer class="footer">
      <p>Made with ❤️ in Platzi</p>
    </footer>
  </body>
</html>

CSS
Main (mobile first)

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #003049;
}
html {
  font-size: 62.5%;
}
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem;
}
.header {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid steelblue;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.logo strong {
  margin-left: 5px;
  font-size: 3rem;
}
.menu {
  display: flex;
  list-style: none;
}
.menu li {
  margin: 0 5px;
}
.menu li a {
  font-weight: 700;
  text-decoration: none;
}
.content {
  width: 100%;
  padding: 20px 10px;
  border: 1px solid greenyellow;
  text-align: center;
}
.platzi-team {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 15px;
}
.platzi-team img {
  width: 100%;
}
.routes {
  padding: 20px 10px;
  border: 1px solid greenyellow;
}
.routes h2 {
  margin-bottom: 15px;
  font-size: 1.8rem;
}
.routes-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
}
.routes-images img {
  width: 100%;
  max-width: 298px;
  height: 82px;
}
.footer {
  display: flex;
  height: 50px;
  padding: 10px;
  border: 1px solid orange;
  justify-content: center;
  align-items: center;
}
.footer p {
  font-weight: 700;
}

Tablet

.header {
  flex-direction: row;
  justify-content: space-between;
}
.logo {
  margin-bottom: 0;
}
.content p {
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
}

Desktop

.main {
  display: flex;
  flex-direction: row-reverse;
}
.routes-images {
  width: 300px;
}

Aquí mi proyecto.

Desktop

Tablet.

hago scroll hacia abajo

y en móvil

y acá les dejo el link del repositorio en gitlab por si quieren ver
las barbaridades que hice jajjaja

https://gitlab.com/diegoskr9/retolandingpageburgerresponsive

Listo!! Me dio dolores de cabeza pero aqui esta. 💜

Mobile

Tablet

Desktop

Codigo HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cats</title>
    <link rel="stylesheet" href="./style.css"/>
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)"/>
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)"/>
</head>
<body>
    <header>
        <div class="header-container">
            <figure class="header-img-container">
                <img src="./imgcats/logo.png" alt="logo">
            </figure>
            <nav class="header-nav">
                <ul class="header-nav-list">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Contactos</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <main class="main-container">
        <section class="main-section">
            <article class="main-article bg-color-1">
                <div class="main-article-content">
                    <h1>
                        Gato 1
                    </h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quaerat officiis eveniet repellat minus, magnam, totam quas sit incidunt rerum repellendus laborum alias veritatis similique autem distinctio non nostrum voluptate!</p>
                </div>
                <figure class="main-aticle-image">
                    <img src="./imgcats/tumblr_f941f5998d17feac41160ded93dacfc2_b3f0c1af_640.jpg" alt="imagen-gato">
                </figure>
            </article>
        </section>
        <section class="main-section">
            <article class="main-article bg-color-2">
                <div class="main-article-content">
                    <h1>
                        Gato 2
                    </h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quaerat officiis eveniet repellat minus, magnam, totam quas sit incidunt rerum repellendus laborum alias veritatis similique autem distinctio non nostrum voluptate!</p>
                </div>
                <figure class="main-aticle-image">
                    <img src="./imgcats/tumblr_msewk1cdAQ1sh2k30o1_400.jpg" alt="imagen-gato">
                </figure>
            </article>
        </section>
        <section class="main-section">
            <article class="main-article bg-color-3">
                <div class="main-article-content">
                    <h1>
                        Gato 3
                    </h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quaerat officiis eveniet repellat minus, magnam, totam quas sit incidunt rerum repellendus laborum alias veritatis similique autem distinctio non nostrum voluptate!</p>
                </div>
                <figure class="main-aticle-image">
                    <img src="./imgcats/17dfc2c624df1c814564573ece3bf48b.jpg" alt="imagen-gato">
                </figure>
            </article>
        </section>
        <section class="main-section">
            <article class="main-article bg-color-4">
                <div class="main-article-content">
                    <h1>
                        Gato 4
                    </h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quaerat officiis eveniet repellat minus, magnam, totam quas sit incidunt rerum repellendus laborum alias veritatis similique autem distinctio non nostrum voluptate!</p>
                </div>
                <figure class="main-aticle-image">
                    <img src="./imgcats/Esc_W18_1263_e713-tumblr-p3jbrwsl9a1qh66wqo1-1280.jpg" alt="imagen-gato">
                </figure>
            </article>
        </section>
    </main>
    <footer>
        <div class="footer-container">
            <figure class="footer-container-image">
                <img src="./imgcats/logo.png" alt="logo">
            </figure>
            <div>
                <h5>Copyright Jennifer Fernandez 2020</h5>
            </div>
        </div>
    </footer>
</body>
</html>

Codigo CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
    font-family: cursive;
}
.header-container {
    display: flex;
    justify-content: space-between;
    background-color: lightpink;
}
.header-nav-list {
    display: flex;
    list-style: none;
}
.header-nav {
    display: flex;
    align-items: center;
}
.header-nav-list a {
    text-decoration: none;
    color: rgb(44, 70, 68);
}
.header-nav-list li {
    margin-right: 2rem;
}
.header-img-container {
    padding-left: 2rem;
}
.header-img-container img{
    width: 8rem;
}
.main-container {
    display: flex;
    flex-wrap: wrap;
    background-color: mediumslateblue; 
    width: 100%;
}
.main-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    display: flex;
    flex-wrap: wrap;
     justify-content: center;
}
.main-article {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-radius: 1rem;
    align-items: center;
    width: 80%;
}
.bg-color-1 {
    background-color: rgb(123, 231, 233);
}
.bg-color-2 {
    background-color: rgb(210, 126, 247);
}
.bg-color-3 {
    background-color: rgb(228, 120, 156);
}.bg-color-4 {
    background-color: rgb(220, 224, 155); 
}
.main-article-content {
    width: 90%;
    padding: 2rem;
}
.main-article-content h1 {
    text-align: center;
    margin-bottom: 3rem;
}
.main-aticle-image {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
}
.main-aticle-image img {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
}
.footer-container {
    background-color: lightseagreen;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1.5rem;
}
.footer-container-image img {
    width: 10rem;
}

Tablet

.main-aticle-image img {
    width: 15rem;
    height: 15rem;
   
}

Desktop

.main-section {
   width: 50%;
}

.main-aticle-image img {
    width: 20rem;
    height: 20rem;
}

Bueno pues aquí esta mi intento jeje
Aquí puedes verlo Online y mejor pongo el Repositorio para no llenar esto de código.

Modo Mobile

Modo Tablet

Moto Desktop

Desktop

Tablet

Mobile



HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./laptop.css" media="screen and (min-width: 800px)">
    <title>Document</title>
</head>
<body>
    <main class="container">
        <div class="c c1"></div>
        <div class="c c2">
            <div class="c c3"></div>
            <div class="c c4"></div>
        </div>
        <div class="c c5"></div>
    </main>
</body>
</html>

style.css

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html
{
    font-size: 62.5%;
}

.container
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1300px;
    height: 100vh;
    padding: 3rem;
    margin: 0 auto;
}

.c
{
    width: 100%;
    /* min-width: 1500px; */
    height: calc(22vh - 1rem);
    margin-bottom: 3rem;
    border-radius: 10px;
}

.c1
{
    background-color: #c72929;
}

.c2
{
    height: auto;
    margin: 0;
    border-radius: 0;
}

.c3
{
    background-color: #df6060;
}

.c4
{
    background-color: #e4b342;
}

.c5
{
    background-color: #a0db32;
    margin: 0;
}

tablet.css

.c1
{
    width: 23%;
    height: calc(47vh - 1rem);
}

.c2
{
    width: 73%;
}

.c3, .c4
{
    width: 100%;
    height: calc((47vh - 4rem) /2);
}

.c5
{
    height: calc(47vh - 1rem);
}

laptop.css

.container
{
    flex-direction: row-reverse;
}

.c
{
    margin: 0;
}

.c1, .c2
{
    width: 28%;
    height: calc(97vh - 4rem);
}

.c3, .c4
{
    height: calc((96vh - 5rem) /2);
}

.c3
{
    margin-bottom: 2rem;
}

.c5
{
    width: 40%;
    height: calc(97vh - 4rem);
}

Buenas noches! dejo mi reto a continuación:

Mobile:

Desktop/tablet:

Atenta a sus comentarios!

Aquí está mi reto 😄.
Mobile:

Tablet:

Desktop:

Reto completado - Decidí hacer una réplica de la web de Disney+
El código lo pueden encontrar en mi github: https://github.com/brunoocal/ResponsiveChallengePlatzi-DisneyPlus
Versión móvil - width: 375px-768px

Versión tablet - width: 768px-1024px

Versión desktop - width: 1024px - ~px

Versión Móvil de un cuaderno virtual

Versión de Tablet

Versión Desktop

Layout shifter es cambiar tu layout completamente para diferentes pantallas, lo que hace que en cada pantalla parezca un proyecto totalmente diferente.

Reto terminado!!
Me llevo 3 días pero he aquí jaja
Acepto criticas

MOVILE

TABLET

LAPTOP

INDEX.HTML


<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Desafio layout shifter</title>
        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)" />
        <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)" />
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
    </head>
    <body>
        <header class="header">
            <div class="header-container">
                <div class="header-logo">
                    <figure>
                        <img class="header-logo_imagen" src="./pics/logo.png" alt="logo">
                    </figure>
                    <div>
                        <h1 class="header-logo_texto">Costumbres Argentinas</h1>
                    </div>
                </div>
                <nav class="header-nav">
                    <ul class="header-nav_list">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">Productos</a>
                        </li>
                        <li>
                            <a href="#">Contacto</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <main class="main">
            <h1 class="section-one_title">NOSOTROS</h1>
            <section class="section-one">
                <div class="section-one_content">                                 
                    <article class="content1-article article-one">
                        <h2 class="content1-article_title title-one">CLIENTES SATISFECHOS</h2>
                        <h3 class="content1-article_subtitle">LA ÚNICA FORMA DE HACER NEGOCIO</h3>
                        <p class="content1-article_text">
                            El valor de nuestra marca es conocer la tradición y costumbre de nuestra gente. Sabemos que es costumbre argentina buscar la mejor calidad al menor precio. Estudiamos el negocio, analizamos a los consumidores y creamos un producto en función de estas necesidades. Queremos ofrecer el mejor producto, con el mejor servicio en el mejor lugar.¡Sale como pan caliente!Nuestra propuesta abarca productos de panificados, facturería, pastelería seca, pastelería fresca, pizzas, sandwichs y empanadas. El concepto “producto caliente” es un sistema que ofrece durante todo el horario -desde la apertura al cierre de la tienda- medialunas y pan recién horneados
                        </p>
                    </article>
                       <article class="content1-article">
                        <h2 class="content1-article_title">NUESTROS LOCALES</h2>
                        <h3 class="content1-article_subtitle">AUTONOMÍA Y COMODIDAD DEL SELFSERVICE</h3>
                        <p class="content1-article_text">
                            Con un diseño moderno, funcional y práctico, nuestros locales son un paseo para los compradores. Los clientes disponen de la comodidad y autonomías del método self-service: el usuario capta, en pocos segundos, la dinámica y disposición de la compra. ¡Cada uno elige y se lleva lo que quiere!
                        </p>
                    </article>
                </article>
                <article class="content1-article">
                 <h2 class="content1-article_title">LOS FRANQUICIADOS</h2>
                 <h3 class="content1-article_subtitle">CUIDAMOS Y PROTEGEMOS SU INVERSIÓN</h3>
                 <p class="content1-article_text">
                    Realizamos acuerdos comerciales con los principales proveedores para lograr el mejor emplazamiento de nuestros locales. Transmitimos seguridad y confianza a cada uno de nuestros franquiciados, protegemos su inversión; resguardada en materiales sólidos y durables.
                 </p>
             </article>
                </div>
                <div class="section-one_image">
                    <figure>
                        <img class="section1-image_1" src="./pics/imagenPrincipalMovil.png" alt="imagen movil">
                    </figure>
                    <figcaption><a class="link-franquicia" href="#">Franquicia 1</a></figcaption>
                    <figure>
                        <img class="section1-image_2" src="./pics/imagenPrincipalDesktop.png" alt="imagen desktop">
                    </figure>
                    <figcaption><a class="link-franquicia" href="#">Franquicia 2</a></figcaption>
                </div>        
            </section>
            <h1 class="section-two_title">PRODUCTOS</h1>
            <section class="section-two">
                <div class="section-two_products">
                    <div class="products">
                        <figure class="products-figure">
                            <img src="./pics/criollitos.png" alt="criollitos">
                        </figure>
                        <div class="product-content">
                            <h1 class="products-name">CRIOLLITOS</h1>
                            <h1 class="products-price">$50</h1>
                            <button class="products-button">COMPRAR</button>
                        </div>
                    </div>
                    <div class="products">
                        <figure class="products-figure">
                            <img src="./pics/medialunas.png" alt="medialunas">
                        </figure>
                        <div class="product-content">
                            <h1 class="products-name">MEDIALUNAS</h1>
                            <h1 class="products-price">$130</h1>
                            <button class="products-button">COMPRAR</button>
                        </div>
                    </div>
                    <div class="products">
                        <figure class="products-figure">
                            <img src="./pics/baguette.png" alt="baguette">
                        </figure>
                        <div class="product-content">
                            <h1 class="products-name">BAGUETTE</h1>
                            <h1 class="products-price">$200</h1>
                            <button class="products-button  ">COMPRAR</button>
                        </div>
                    </div>
                    <div class="products">
                        <figure class="products-figure">
                            <img src="./pics/pastafrola.png" alt="pastafrola">
                        </figure>
                        <div class="product-content">
                            <h1 class="products-name">PASTAFROLA</h1>
                            <h1 class="products-price">$300</h1>
                            <button class="products-button">COMPRAR</button>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer class="footer">
            <h1>THIS THE END</h1>
        </footer>
    </body>
</html>

STYLE.CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Yusei Magic', sans-serif;
}

html {
    font-size: 62.5%;
}


.header {
    background-color: #ffcd00;
    height: 9rem;
    min-width: 380px;
    border: 3px solid #372626;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom: 0px;
}

.header-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
   
}

.header-logo {
    width: 100%;
    min-width: 380px;
    height: 65%;
    display: flex; 
    justify-content: center;
}

.header-logo figure, .header-logo div {
    margin: auto 10px;
}

.header-logo_texto {
    font-size: 2.6rem;
    font-weight: bold;
    min-width: 280px;
}

.header-logo_imagen {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.header-nav {
    height: 35%;
    display: flex;
    align-items: center;
}

.header-nav_list {
    margin: 0 auto;
    padding-bottom: 5px;
    width: 70%;
    max-width: 300px;
    display: flex;
    justify-content: space-evenly;
    list-style: none;
}

.header-nav_list li a {
    color:#372626;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.6rem;
    border-bottom: 2px solid #372626 ;
}

.header-nav_list li a:hover {
    color: #a82f2f;
}

.section-one_title, .section-one_content {
    color: white;
}

.content1-article_title, .content1-article_subtitle {
    color:  #ffcd00;
}

.main {
    background-color: #372626;
    display: flex;
    flex-direction: column;
    min-width: 380px;
}

.section-one_title {
    text-align: center;
    padding-top: 15px;
    font-size: 2.6rem;
    min-width: 380px;
}

.section-one {
    width: 100%;
    min-width: 380px;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-one_image {
    order: 2;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2%;

}

.section1-image_1 {
    width: 100%;
    max-width: 800px;
    min-width: 260px;
    border: 3px solid #ffcd00;
    border-radius: 15px;
}

.section1-image_2 {
    width: 100%;
    max-width: 800px;
    min-width: 260px;
    border: 3px solid #ffcd00;
    border-radius: 15px;
    visibility: hidden;
    display: none;
}

.link-franquicia {
    color: #ffcd00;
    font-size: 1.6rem;
    text-decoration: none;
    margin-bottom: 10px;
    visibility: hidden;
    display: none;
}

.section-one_image figcaption {
    margin-bottom: 15px;
}

.section-one_content {
    order: 3;
}

.content1-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
    padding: 0 25px;
    min-width: 380px;
}

.article-one {
    margin-top: 0;
}

.content1-article_title, .content1-article_subtitle, .content1-article_text {
    margin: 0 auto;
    margin-top: 8px;
}

.section-two_title {

    font-size: 2.6rem;
    color: white;
    border-top: 2px solid black;
    margin-top: 30px;
    margin-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    min-width: 380px;
}

.section-two {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-two_products {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-bottom: 25px;
}

.products {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 280px;
    background-color: #611313;
    margin: 5px;
    border: 2px solid #ffcd00;
    border-radius: 30px;
}

.products-figure {
    height: 70%;
}

.products-figure img {
    width: 90%;
    height: 90%;
    max-width: 260px;
    max-height: 200px;
}

.product-content {
    margin-top: 20px;
    border-top: 3px solid black;
    border-radius: 4px;
    height: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.products-name, .products-price, .products-button {
    font-size: 1.8rem;
}

.products-name, .products-price {
    color: white;
    margin-right: 15px;

}

.products-button {
    background-color: #ffcd00;
    border-radius: 5px;
    border: 2px solid black;
}

.footer {
    width: 100%;
    min-width: 380px;
    height: 40px;
    background-color: #ffcd00;
    border: 3px solid #372626;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top: 0px;
    text-align: center;
    padding-top: 5px;
}

TABLET.CSS

.header {
    height: 7rem;
}

.header-container {
    flex-direction: row;
}

.header-logo {
    justify-content: flex-start;
    height: auto;
    width: 50%;
}

.header-nav {
    height: auto;
    width: 50%;
    justify-content: flex-end;
}

.header-nav_list {
    justify-content: flex-end;
    margin: 0;
}

.header-nav_list li {
    margin-right: 15px;
}

.section-one_title {
    border-bottom: 2px solid black;
    padding: 15px;
}

.section-one {
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-evenly;
} 

.section-one_image {
    width: 40%;
    justify-content: flex-end;
    height: 100%;
}

.section1-image_1 {
    min-width: 0px;
}

.section1-image_2 {
    min-width: 0px;
    visibility: visible;
    display: inline;
}

.link-franquicia {
    visibility: visible;
    display: inline;
}

.section-one_content {
    width: 50%;
}

.article-one {
    margin-top: 0;
}

.title-one {
    margin-top: 2%;
}

.content1-article {
    min-width: 0px;
}

DESKTOP.CSS

.main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.section-one {
    order: 3;
    width: 57%;
}

.section-one_title {
    order: 1;
    width: 57%;
    border-bottom: 0;
    padding-bottom: 30px;
    border-bottom: 0;
    margin: 0;
}   

.section-two {
    order: 4;
    border: 0;
    width: 43%;
    padding: 10px;
    border-left: 2px solid #ffcd00;
}

.section-two_title {
    order: 2;
    margin: 0 auto;
    width: 43%;
    min-width: 0;
    border: 0;
    padding: 15px;
    padding-bottom: 30px;
    margin: 0;
    border-left: 2px solid #ffcd00;
}

.products {
    width:90%;
    max-width: 250px;   
}

PICS
LOGO

FRANQUICIAS

PRODUCTS

Desafio hecho!!
Version movil

Version para tablet

Version de escritorio

Estos son los resultados que obtuve de este reto, haber que tal les parece y todos sus comentarios son bien recibidos

Mobile

Tablet

Para ver cuando se hace scroll

Desktop

una vez tengas más práctica, este tipo de problemas se solucionan fácilmente con CSS Grid Layout.

Comento de nuevo porque el anterior no se subió el GIF (Espero que en este si)
repositorio
https://media.giphy.com/media/ezDFDwGt8FMLAVErGe/giphy.gif

Reto cumplido, mi aporte

Reto cumplido: algo rapidito
Full Desktop:

tablet 600px:

Mobile:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reto LayOut Shifter</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>Soy el header</header>
    <main>
      <div class="sidebar">Soy el sidebar</div>
      <div class="content">soy el contentenido</div>
    </main>
    <footer>Soy el footer</footer>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  font-size: 2rem;
}

header {
  height: 80px;
  background: green;
  color: white;
  padding: 0 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

main {
  height: 450px;
  display: flex;
  justify-content: stretch;
  flex-direction: column;
}

.sidebar {
  background-color: wheat;
  order: 2;
  height: 30%;
  padding: 0 50px;
  display: inherit;
  align-items: center;
}

.content {
  background-color: thistle;
  order: 1;
  height: 70%;
  padding: 0 50px;
  display: inherit;
  align-items: center;
}

footer {
  height: 80px;
  background: blue;
  color: white;
  padding: 0 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Media Queries */

@media (min-width: 600px) {
  main {
    display: flex;
    flex-direction: row;
  }
  .sidebar {
    height: 100%;
    order: 1;
    width: 30%;
  }
  .content {
    height: 100%;
    width: 70%;
  }
}

@media (min-width: 800px) {
  main {
    display: flex;
    flex-direction: row;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: space-evenly;
  }
  .sidebar {
    height: 100%;
    order: 1;
    width: 250px;
  }
  .content {
    height: 100%;
    min-width: 550px;
    max-width: 650px;
  }
}

![](

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RetoShifter</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="encabezado">
        <div class="logo"></div>
        <div class="nav"></div>
    </header>
    <main class="container">
        <div class="d d1"></div>
        <div class="d d2"></div>
        <div class="d d3"></div>
        <div class="d d4"></div>
    </main>
    <footer></footer>
</body>
</html>```


*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{font-size: 41.68%;
}
.encabezado{
width: 100%;
height: 50px;
min-width: 150px;
background-color: #7B4B94;
margin-left: auto;
margin-right: auto;
direction: rtl;
padding-top: 5px;
}

.logo{background-color: #003459 ;
width: 40px;
height: 40px;
float: left;
margin-left: 5px;
border: 2px solid black;
border-radius: 10px;
}
.nav{background-color:#3E4077;
width: 300px;
height: 40px;
margin-right: 5px;
border: 2px solid black;
border-radius: 10px;
}

.container{display: flex;
flex-wrap: wrap;
}

.d1, .d2, .d3, .d4{
width: 100%;
min-width: 150px;
height: 150px;
border: 2px solid black;
border-radius: 10px;
margin: 1%;
}

.d1{background-color: #0FA3B1;}
.d2{background-color: #B5E2FA;}
.d3{background-color: #F6F1E0;}
.d4{background-color: #FF686B;}
footer{width: 100%;
height: 150px;
min-height: 100vh;
min-width: 150px;
background-color: #00171F;
}

@media (min-width:600px){
.encabezado{
width: 600px;
margin-right: auto;
margin-left: auto;
}
.container{
width: 600px;
margin-left: auto;
margin-right: auto;
}
.d1{width: 22%;
order: 1;

}
.d4{width: 71%;
    order: 2;

   }
.d3{width: 100%;
order: 3;}
footer{
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

}

@media (min-width: 800px)
{
.encabezado{
width: 800px;
margin-right: auto;
margin-left: auto;
}
.container{
width: 800px;
margin-left: auto;
margin-right: auto;
height: 620px;
}

.d1{width: 52%;
    order: 2;
    height: 290px;
}

.d2{width: 52%;
    order: 4;
    height: 290px;
    position: relative;
    left: 182px;
    bottom: 306px;
}
.d3{width: 21%;
    height: 600px;
    order: 3;
    }

.d4{ width: 21%;
    height: 600px;
    order: 1;
}

footer{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

}```

Reto completado

mobile

tablet

desktop

Reto terminado 😄
Al principio me costo bastante, me estaba enredando y confundiendo conceptos, los volví a repasar, empecé de nuevo y este es el resultado.

Mobile

Tablet

Desktop

La mejor serie del mundo

Tablet

Celular

Reto completado
vista Mobile

Tablet

Desktop

Repositorio: https://github.com/JohnDeev/FastFood

Github Page:https://johndeev.github.io/FastFood/

#NuncaParesDeAprender

mobile

tablets

desktop

Layout shifter
El patrón Layout shifter es el más adaptable, ya que posee varios puntos de interrupción en diferentes anchos de pantalla.

La clave para este diseño es el desplazamiento del contenido, en lugar de su reprocesamiento y colocación debajo de otras columnas. Debido a las diferencias significativas entre cada punto de interrupción principal, es más complejo de mantener, y es posible que se deban realizar cambios dentro de los elementos, no solo en el diseño de contenido general.

En este ejemplo simplificado, se muestra el patrón Layout shifter. En las pantallas más pequeñas, el contenido se apila verticalmente, pero cambia considerablemente a medida que se agranda la pantalla, con un diva la izquierda y dos div apilados a la derecha.

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Ya aprobé el curso pero no quiero irme sin terminar este reto…Hice lo que pude 😦 al rotar la pantalla en mi celular se ve feito uu les dejo el código lo subi en Github por aqui: https://github.com/brayangc1/MCR
y para verlo online aqui: https://brayangc1.github.io/MCR/index

MOVIL

TABLET

DESKTOP

Listo mi reto, me tomó unas 3 horas aprox. Saludos. 😁
Móvil:

Tablet:

PC:

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desafío: Layout Shifter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <img src="/img/logo.png" class="logo" alt="">
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Clases</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Foro</a></li>
            </ul>
        </nav>
    </header>
    <div class="container">
        <aside>
            <div class="block block1">
                <h1>Curso 1</h1>
                <p>Breve descripción del curso</p>
            </div>
            <div class="block block2">
                <h1>Curso 2</h1>
                <p>Breve descripción del curso</p>
            </div>
            <div class="block block3">
                <h1>Curso 3</h1>
                <p>Breve descripción del curso</p>
            </div>
        </aside>
        <main>
            <img src="./img/bf.png" alt="Platzi Black Friday">
            <p>
                En Platzi buscamos día a día seguir creciendo y continuar siendo la herramienta de aprendizaje efectivo en línea <em>#1</em> de Latinoamérica.
            </p>
        </main>
    </div>
    <footer>
        <p>Desarrollado por: <strong>Alejandro Sánchez</strong></p>
    </footer>
</body>
</html>

Código CSS (Primera vez que desarrollo algo en Mobile First):

:root {
    --background-dark-green: #264355;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: arial;
}
body {
    background: #e2e2e2;
}

header {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--background-dark-green);
    padding: 10px 0;
}
header nav img {
    padding-bottom: 5px
}
header nav ul {
    margin: 0 auto;
}
header nav ul li{
    display: inline-block;
}
header nav ul li a{
    text-decoration: none;
    color: white;
    margin-left: 15px;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container aside {
    order: 2;
    width: 100%;
    text-align: center;
}
.container aside .block {
    color: white;
    padding: 20px 0;
}
.container aside .block h1 {
    font-size: 2.5rem;        
    margin-bottom: 5px;
}
.container aside .block1 {
    background: #2E5266;
}
.container aside .block2 {
    background: #6E8898;
}
.container aside .block3 {
    background: #9FB1BC;
}
.container main {
    order: 1;
    padding: 20px 15px 10px 15px;
    text-align: center;
}
.container main img {
    width: 100%;
    margin-bottom: 5px;
}
.container main p {
    color: #2E5266;;
    text-align: justify;
}
footer {
    order: 3;
    width: 100%;
    background: #253D5B;
    color: white;
    text-align: center;
}
footer p {
    padding: 10px 0;
}

@media (min-width: 500px){
    header {
        background: var(--background-dark-green);
        width: 100%;
    }
    header nav {
        padding: 5px 0;
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
    }
    
    header nav ul {
        margin: 0;
    }
    header nav ul li {
        display: inline-block;
    }
    header nav ul li a {
        color: white;
        text-transform: none;
        text-decoration: none;
        margin-left: 5px;
    }
    .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .container aside {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        order: 1;
    }
    .container aside .block{
        color: white;
        padding: 20px 0;
    }
    .container aside .block1 {
        background: #2E5266;
        width: 50%;
    }
    .container aside .block2 {
        background: #6E8898;
        width: 50%;
    }
    .container aside .block3 {
        background: #9FB1BC;
        width: 100%;
    }
    .container main {
        order: 2;
    }
    .container main img {
        width: 90%;
    }
    footer {
        order: 3;
    }
}

@media (min-width: 1023px){
    header {
        max-width: 1000px;
        margin: 0 auto;
    }
    header nav{
        max-width: 1000px;
    }
    header nav ul li{
        font-size: 1.2rem;
    }
    .container {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .container aside {
        order: 1;
        width: 30%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .container aside .block {
        width: 100%;
    }
    .container main{
        order: 2;
        width: 70%;
        padding: 0 10px;
    }
    .container main img{
        max-width: 70%;
    }
    footer {
        max-width: 1000px;
        margin: 0 auto;
    }   
}

RETO COMPLETADO

Mobile

Table

Desktop

Reto completado

Mobile


Tablet

Desktop

Notas de la clase

** Los poderes oscuros de auto **…en la case en el minuto 3:07 el recueado de azul oscuro no logra rellenar todo, solo llega a la mitad para poder llenarno todo, usamos la propiedad auto…

Movil

Tablet

Desktop

HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reto 6: Layout shifter</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="./tablet.css"
      media="screen and (min-width: 768px)"
    />
    <link
      rel="stylesheet"
      href="./desktop.css"
      media="screen and (min-width: 1200px)"
    />
  </head>
  <body>
    <main class="container">
      <section class="c0">
        <article class="c c1"></article>
        <div class="c c2"></div>
        <div class="c c3"></div>
      </section>
      <section class="c c4"></section>
    </main>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: wrap column;
  padding: 0 30px;
}
.c0, .c4 {
  width: 100%;
  display: flex;
  flex-flow: wrap column;
  justify-content: space-evenly;
}
.c0 {
  height: 76%;
}
.c {
  width: 100%;
  height: 20vh;
  border: 2px rgb(26, 26, 150) solid;
  border-radius: 10px;
}
.c1 {
  background-color: rgb(26, 26, 150);
}
.c2 {
  background-color: white;
}
.c3 {
  background-color: lightskyblue;
}
.c4 {
  background-color: lightgreen;
}

CSS Tablet

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: wrap column;
  padding: 0 30px;
}
.c0, .c4 {
  width: 100%;
  display: flex;
  flex-flow: wrap column;
  justify-content: space-evenly;
}
.c0 {
  height: 76%;
}
.c {
  width: 100%;
  height: 20vh;
  border: 2px rgb(26, 26, 150) solid;
  border-radius: 10px;
}
.c1 {
  background-color: rgb(26, 26, 150);
}
.c2 {
  background-color: white;
}
.c3 {
  background-color: lightskyblue;
}
.c4 {
  background-color: lightgreen;
}

CSS Desktop

.container {
  flex-flow: row-reverse wrap;
  justify-content: space-between;
  align-items: center;
}
.c0 {
  width: 66%;
  height: 100vh;
}
.c4, .c1 {
  height: 87%;
}
.c1 {
  order: 1;
}
.c1, .c2, .c3, .c4 {
  width: 29vw;
}

Estructura con emmet

main.container>div.c1+(div.c4>div[email protected]2*2)+div.c5

Finalmente, después de unas horas rompiéndome el coco y entendiendo mejor el position y el display lo he logrado!
Les comparto mi reto de Layout, se que puede mejorar pero me siento feliz de haberlo logrado 😄
Mobile:

Tablet:

Escritorio:

Mobile:

Tablet:

Desktop:

Esto es algo que hice con Flexbox y Mobile first

Mobile

Tablets, Laptops y Desktop

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],300;1,500&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <h1>LOGO</h1>
        <ul class="menu">
            <li>HOME</li>
            <li>COLECCION</li>
            <li>CATEGORIAS</li>
            <li>CUENTA</li>
        </ul>
    </header>
    <main class="container">
        <section class="container--section1">
            <img src="https://i.imgur.com/MIcYfhh.jpeg" alt="">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam ipsum quod aliquam cum, ipsam sit! Culpa, quae. Magnam commodi quos eveniet dolorem velit vero atque, ullam ad corporis aut minus.</p>
        </section>
        <section class="container--section2">
            <img src="https://i.imgur.com/MIcYfhh.jpeg" alt="">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam ipsum quod aliquam cum, ipsam sit! Culpa, quae. Magnam commodi quos eveniet dolorem velit vero atque, ullam ad corporis aut minus.</p>
        </section>
    </main>
    <footer class="footer">
        <h1>ECHO CON &#x1F499; EN EL CURSO DEFINITIVO DE HTML Y CSS DE PLATZI</h1>
    </footer>
    
</body>
</html>

STYLE.CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    font-size: 62.5%;
}

body {
    display: flex;
    flex-wrap: wrap;
}

.header {
    background-color: #5e6472;
    width: 100%;
    min-width: 150px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.header h1 {
    font-size: 4rem;
    font-family: 'Roboto', sans-serif;;
}
.header ul {
    list-style: none;
    color: white;
    display: inherit;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    font-size: 1.8rem;
    
}
.header li {
    width: 45.5%;
    margin-left: 2.5px;
    border: white 1px solid;
    font-family: 'Roboto', sans-serif;;
}

.container {
    width: 100%;
    min-width: 150px;
    height: auto;
    margin: 10px;
}
.container--section1, .container--section2 {
    background-color: #faf3dd;
    width: 100%;
    min-width: 150px;
    height: auto;
    border: 1px solid white;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.container--section1 img, .container--section2 img {
    width: 45%;
    min-width: 60px;
    
    height: 140px;
    border-radius: 5px;
    margin: 5px 0;
}
.container--section1 p, .container--section2 p {
    width: 80%;
    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 300 italic;
    margin: 5px 0;
}

.footer {
    background-color: #6c757d;
    width: 100%;
    min-width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer h1 {
    color: white;
}

TABLET.CSS

.header {
    width: 48%;
    height: auto;
    justify-content: flex-start;
    

}
.header h1{
    margin: 20px 0;
}
.header ul {
    flex-direction: column;
    width: 37vh;
}
.header li {
    width: 90%;
    border: 0;
    border-bottom: 2px solid white;
    margin-bottom: 20px;
}

.container {
    width: 48%;
    align-items: center;

}
.container--section1, .container--section2 {
    height: 44vh;
}

DESKTOP.CSS

body {
    width: 80vw;
    margin: 0 auto;
    
}
.header {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
}
.header ul {
    flex-direction: row;
    width: 70vh;
    align-items: flex-end;
}
.header li {
    width:  20%;
}
.container {
    width: 100%;
}
.container--section1, .container--section2 {
    height: 325px;
    flex-direction: row;
    justify-content: space-evenly;
}
.container--section1 img, .container--section2 img {
    width: 34%;
    height: 200px;
}
.container--section1 p, .container--section2 p {
    width: 28%;
}

Buenas a todos!
Acá mi desarrollo del reto con todo o aprendido hasta ahora 😃


Mobile


Tablet


Desktop

Algo sencillo en diseño, pero se logro el objetivo.

Desktop.

Tablet.

Mobile.

Aquí les dejo como resolví el desafío

Movile:

Tablet:

Desktop:

Aqui les dejo el 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="stylesheet" href="./style.css" />

    <title>Document</title>
  </head>
  <body>
    <main class="container">
      <div class="c1">
        <img src="./assets/nike-logo.png" alt="" />
        <p>Nike</p>
      </div>
      <div class="c2">
        <img src="./assets/logo-nike-2.jpg" alt="" />
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste quod
          quisquam quidem ad, exercitationem, voluptatem officiis vitae nesciunt
          laboriosam expedita doloremque illo molestias id odio iusto!
          Voluptatum fuga perferendis accusamus?
        </p>
      </div>
      <div class="c3">
        <div class="c4">
          <img src="./assets/zapatos-2.jpg" alt="" />
          <p>Product</p>
          <p>100$</p>
        </div>
        <div class="c5">
          <img src="./assets/zapatos-3.jpg" alt="" />
          <p>Product</p>
          <p>100$</p>
        </div>
      </div>
    </main>
  </body>
</html>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

img {
  max-height: 100%;
  max-width: 100%;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.c1,
.c2,
.c3,
.c4,
.c5 {
  width: 100%;
  min-width: 150px;
  height: 150px;
}

.c1 {
  background-color: aquamarine;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-evenly;
  font-size: 1.5rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.c1 img {
  max-height: 50%;
  max-width: 50%;
}

.c2 {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c2 img {
  max-height: 75%;
  max-width: 50%;
}
.c2 p {
  padding: 0 20px;
}
.c3 {
  display: flex;
  flex-wrap: wrap;
  height: auto;
}
.c3 img {
  max-width: 80%;
  max-height: 80%;
}
.c4,
.c5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 600px) {
  .c3 {
    flex-direction: row;
    justify-content: center;
  }
  .c4,
  .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
  .c2 {
    order: 3;
    width: 70%;
  }
  .c3 {
    order: 2;
    width: 30%;
    flex-direction: column;
  }
  .c3 img {
    max-width: 100%;
    max-height: 100%;
  }
}



Aquí mi proyecto!
Mobile

Tablet

Desktop

Dejo mi propuesta, por falta de tiempo hice solamente la maqueta, les dejo el codigo por si alguno quiere revisarlo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile First - Layout Shifter</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main class="container">
      <div class="c1 box">C1</div>
      <div class="c4">
        <div class="c2 box">C2</div>
        <div class="c3 box">C3</div>
        <div class="c6 box">C6</div>
      </div>
      <div class="c5 box">C5</div>
      <div class="c7 box">C7</div>
    </main>
  </body>
</html>

CSS

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 62.5%;
	color: white;
}
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.c1,
.c2,
.c3,
.c4,
.c5,
.c6 {
	width: 100%;
	min-width: 150px;
	height: 150px;
}
.box {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 5rem;
}
.c7 {
	display: none;
}
.c4 {
	height: auto;
}
.c1 {
	background-color: #003476;
}
.c2 {
	background-color: #0062d2;
}
.c3 {
	background-color: #799edb;
}
.c4 {
	background-color: #95a8cf;
}
.c5 {
	background-color: #2a67b3;
}
.c6 {
	background-color: #1f5aa7;
}

@media (min-width: 600px) {
	.c1 {
		width: 100%;
		order: 3;
	}
	.c6 {
		width: 33.3%;
		order: 4;
	}
	.c3 {
		width: 33.3%;
		order: 5;
	}
	.c2 {
		width: 33.3%;
		order: 1;
	}

	.c4 {
		display: flex;
		width: 100%;
		order: 6;
	}
	.c5 {
		width: 100%;
		order: 2;
	}
	.c7 {
		display: flex;
		order: 7;
		width: 100%;
		height: 100vh;
		max-height: 300px;
		background-color: #2a67b6;
	}
}
@media (min-width: 800px) {
	.container {
		width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
	.c1 {
		width: 50%;
		order: 1;
	}
	.c4 {
		width: 100%;
	}
	.c5 {
		width: 50%;
		order: 2;
	}
	.c7 {
		max-height: 500px;
	}
}

  • Layout Shifter

Les comparto my proyecto



¡Proyecto completado!
Intenté hacerlo lo más parecido posible a la interfaz de perfil en Platzi. 😄

Por si gustan interactuar con el proyecto: https://angelnewgate.github.io/platziProfile-responsiveClon/
Respositorio: https://github.com/angelNewgate/platziProfile-responsiveClon

Me costo mucho y aún debo corregir algunos detalles, pero les compar!!

en el minuto 4:44, al decir pixeles, realmente se refiere porcentaje, 25% y 75%.

Yo también prefiero css grid es mucho menos código también es muy sencillo de usar.

Ejemplo de un sitio web que utiliza Layout Shifter -> https://alistapart.com/d/responsive-web-design/ex/ex-site-FINALhtml

Reto completado.
Movil:

Tabled:

Desktop (zoom al 40% para poder ver la página completa):

Mobile

Tablet

Desktop

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">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)">
    <title>Reto Responsive</title>
</head>
<body>
    <header class="container header">
        <nav class="nav">
            <h1>Responsive</h1>
        </nav>
    </header>
    <main class="maintext">
            <p class="parrafo pr1">lorem001</p>
            <p class="parrafo pr2">lorem002</p>
            <p class="parrafo pr3">lorem003</p>
            <p class="parrafo pr4">lorem004</p>
            <p class="parrafo pr5">lorem005</p>
    </main>
</body>
</html>

Mobile Css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

.container {
    display: flex;
    flex-wrap: wrap;
    border-radius: 5px;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    background-color:green;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-grow: 1;
    margin: 0.1rem;
}

h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 3rem;
    color: transparent;
    background: url(https://media0.giphy.com/media/YkGhkJHGEjR6EYFtXa/giphy.gif?cid=ecf05e472b94740078435bf06de7939253fc0ec81c11734e&rid=giphy.gif);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    text-align: center;
    display: flex;
    margin: 0.5rem auto;
    padding: 1rem;
}

.maintext {
    display: flex;
    flex-wrap: wrap;
    margin: 0.5rem;
}

.parrafo {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
    font-size: 1.6rem;
    border-radius: 5px;
    width: 100%;
    min-width: 150px;
    height: 150px;
    margin: 0.1rem auto;
    padding: 0.5rem;
    display: flex;
    justify-content: space-evenly;
}

.pr1 {
    background-color: brown;
}
.pr2 {
    background-color: chartreuse;
}
.pr3 {
    background-color: chocolate;
}
.pr4 {
    background-color: coral;
}
.pr5 {
    background-color: darkblue;
}

Tablet Css

@media (min-width: 600px) {
    h1 {
        font-size: 4rem;
    }
    .parrafo {
        width: 50%;
    }
}

Desktop css

@media (min-width: 800px) {
    h1 {
        font-size: 6rem;
        margin: 1rem auto;
    }
    .maintext {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .parrafo {
        width: 25%;
        margin: 0.1rem 0.2rem;
        display: flex;
        justify-content: space-around;
    }
    .pr5 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

Estuve bastante tiempo probando, agregando algunas cosas nuevas y modificando de a poco. Fue un buen ejercicio, pero me falta bastante.

Después de un arduo trabajo, aquí esta mi desafio 😄

Movil:

Tablet:

Desktop:

Hola señora y señores, reto completamente realizado, se que aún puedo mejorar más pero le pongo amor a cada ejercicio que hago, y en vez de llenar de código esto más adelante subiré mis ejercicios a github en orden cronológico del primero al último de este curso por si quieren checar el código ♥

MOBILE

TABLET

DESKTOP MIN AND MAX WIDTH

comparto mi avance:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Cyphers</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)"/>
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)"/>
</head>
<body>

    <header class="cabecera">
        <figure class="logo box">
            <img src="imagenes/logo-fondo.png" alt="logo">
        </figure>
        <nav class="nav box">
            <ul class="nav__barra">
                <li><a href="#">home</a></li>
                <li><a href="#">cyphers</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">loggin</a></li>
                <li><a href="#">regiter</a></li>
            </ul>
        </nav> 
    </header>

    <main class="cuerpo">
        
        <section class="articulo pri">
            <article class="video">
                <h1><strong>the matrix</strong></h1>
                <video class="video__principal" controls preload="auto">
                    <source src="imagenes/propaganda.mp4"/>
                </video>
                <p>The Matrix, the huge featuring djs and freshman rappers, Check out the most awezome performance on a stage, this year 2021 <strong>cyphers</strong> present a new stream platform, watch the free stylers, getting their best on the stage or studio, and let the phryme and flow envold your mind and make it blow up, with a huge comtibution by our best djs on top, making presets and live preformace mix to the cyphers. don´t lose this great presentation on streaming platfomr, to purchise you ticket click on this link <a href="#">store</a>. and get previus access on <a href="#">www.cyphers.com/2021-perform</a> and shut up a real rappers freestyle of the season</p>
            </article>
        </section>
        <aside class="lado pri">
            <figure class="barra" >
                <img src="imagenes/retador1.png" alt="Retador1"/>
            </figure>
            <figure class="barra">
                <img src="imagenes/retador2.png" alt="Retador2"/>
            </figure>
            <figure class="barra">
                <img src="imagenes/retador3.png" alt="Retador3"/>
            </figure>
            <figure class="barra">
                <img src="imagenes/retador4.png" alt="Retador4"/>
            </figure>
        </aside>
    </main>
    <div class="pie">
        <footer class="red fin">
            <figure class="red__img">
                <img src="./imagenes/facebook.png" alt="facebook">
            </figure>
            <figure class="red__img">
                <img src="./imagenes/instagram.png" alt="instagram">
            </figure>
            <figure class="red__img">
                <img src="./imagenes/twitter.png" alt="twitter">
            </figure>
            <p>Derechos reservados a <a href="#">Platzi</a></p>
        </footer>
    </div>

</body>
</html>

CSS movil first

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    background-image: url(./imagenes/fondo.png);
    background-attachment:fixed;
    background-position: center;
    background-size: 100%;

}
/*------head------*/
.cabecera, .cuerpo, .pie{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 130rem;
    padding: 1rem;
    margin: 0 auto;
}
.box, .pri, .fin{
    text-align: center;
    min-width: 15rem;
    margin: 0 auto;
    background-color: rgb(130, 130, 130, 0.8);
}
/*------logo------*/
.logo{
    width: 100%;
    height: calc(100vh/2 - 2rem);
    padding-top: 10rem;
    border-radius: 1rem 1rem 0 0;
    background-image: url(./imagenes/wave.jpg);
    background-position: center;
}
.logo img{
    width: 100%;
    min-width: 8rem;
    max-width: 11rem;
    margin: 0 auto;
}
/*----barra nav-----*/
.nav{
    width: 100%;
    height: calc(15vh - 1rem);
    border-radius: 0 0 1rem 1rem;
}
.nav li{
    font-size: 1.2rem;
}
.nav__barra{
    padding-top: 4%;
    list-style: none;
    text-align: center;
}
.nav__barra li{
    display: inline-block;

}
.nav__barra li a{
    text-transform: capitalize;
    text-decoration: none;
    color: rgb(255,255,255);
    margin: 0 0.5rem;
}
.nav__barra a:hover{
    color: rgba(21, 151, 226, 0.8);
}
.nav__barra a:active{
    color:rgb(82, 8, 151)
}
/*------main------*/
/*------video------*/
.articulo{
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;
}
.video h1{
    font-size: 1.8rem;
    text-transform: capitalize;
    color: rgb(255,255,255);
    padding-bottom: 2rem;
}

.video__principal{
    width: 100%;
    min-width: 5rem;
    margin: 0 auto;
}
.video p{
    width: 100%;
    min-width: 5rem;
    text-align: justify;
    font-size: 1.4rem;
    color: rgb(255,255,255);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 1rem;
    background-color: rgb(0, 0, 0, 0.6);
}
.video p a{
    text-decoration: none;
    color: rgb(255,255,255);
    margin: 0 0.5rem;
}
.video p a:hover{
    color: rgba(21, 151, 226, 0.8);
}
.video p a:active{
    color:rgb(82, 8, 151)
}
/*------barra------*/
.lado{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0 0 1rem 1rem;
    padding: 0 2rem 2rem 2rem;
}
.barra{
    width: 100%;
    min-width: 10rem;
    max-width: 27rem;
    justify-content: space-around;
    margin: 0.5rem auto;
    border-radius: 1rem;
    background-image: url(./imagenes/rappers.jpg);
    background-size: 40rem;
    background-position: center;
}
.barra img{
    width: 100%;
    min-width: 5rem;
    max-width: 15rem;
    margin: 0 auto;
}
/*------footer------*/
.pie{
    padding: 1rem;
    font-size: 1.4rem;
    color: rgb(255,255,255);
}
.red{
    padding-top: 2rem;
    width: 100%;
    border-radius: 1rem;
}
.red__img{
    display: inline-block;
}
.red__img img{
    width: 100%;
    min-width: 1rem;
    max-width: 2rem;
    margin: 0 auto;
}
.red p{
    padding-bottom: 2rem;
}
.red a{
    text-decoration: none;
    color: rgb(255,255,255);
    margin: 0 0.5rem;
}
.red a:hover{
    color: rgba(21, 151, 226, 0.8);
}
.red a:active{
    color:rgb(82, 8, 151)
}

CSS Tablet

@media(min-width:700px){
    .barra{
        max-width: 32rem;
    }
}

CSS Desktop

.cabecera{
    display: flex;
    flex-direction: row;
}
.logo{
    width: 25%;
    padding-top: 2rem ;
    height: calc(50vh/2 - 1rem);
    border-radius: 1rem 0 0 1rem ;
}
.nav{
    width: 75%;
    padding-top: 3rem ;
    height: calc(50vh/2 - 1rem);
    border-radius: 0 1rem 1rem 0;
}
.nav li{
    font-size: 1.8rem;
}
.cuerpo {
    display: flex;
}
.articulo{
    order: 1;
    width: 70%;
    border-radius: 0 1rem 1rem 0;
}
.lado{
    width: 30%;
    padding-top: 2rem;
    border-radius: 1rem 0 0 1rem ;
}
.barra{
    padding-top: 2rem;
    height: calc(100vh/4 - 3rem);
}
.barra img{
    max-width: 10rem;
}
@media(min-width: 900px){
    .barra{
        height: calc(100vh/4 - 2%);
    }
}
@media(min-width:100vh){
    .lado{
        padding-top: 4rem;
    }
}

Excelente tema, dejo mi avance

Acá mi reto:

No es mucho pero es honesto.

Aqui les va un aporte. He rediseñado la wiki de fallout. Perdon, tenia un comentario anterior es que no sabia como subir imagenes.









Mi proyecto fue algo básico, pero me costó mucho tiempo, intenté copiar la Navbar de Platzi!

Pero no supe cómo agregar la imagen jeje

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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=Roboto:[email protected];300;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="tablet.css" media="screen and (min-width: 800px)">
    <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1200px)">
    <script src="https://kit.fontawesome.com/c764c0ee10.js" crossorigin="anonymous"></script>
    <title>Reto 5</title>


</head>

<body>
    <header class="navbar">
        <div class="navbar--logo">
            <img src="https://d9hhrg4mnvzow.cloudfront.net/unete.platzi.com/granadacfsponsor/555cb8e7-35af405a-logo-platzi-b.svg"
                alt="Platzi">
            <!-- <h1>Platzi</h1> -->
        </div>

        <div class="navbar--profile">

            <div class="navbar--search">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" name="search-field" id="search-field" class="navbar--search-field"
                    placeholder="¿Qué quieres aprender?">
            </div>
            <ul class="navbar--options">
                <li>Curso</li>
                <li>Blog</li>
                <li>Foro</li>
                <li>Agenda</li>
                <li>Tv</li>
                <li>Planes</li>
            </ul>
            <div class="navbar--profile-info">
                <i class="fa-solid fa-bell"></i>
                <i class="fa-solid fa-user-astronaut"></i>
                <span>1.840</span>
                <i class="fa-solid fa-angle-down"></i>
                <i class="fa-solid fa-bars"></i>

            </div>
        </div>

    </header>
    <main class="container">

    </main>

</body>

</html>

style.css

:root{
  --navbar__background:#121f3d;
  --aside__background:#24385b;
  --text__color:#fdfdfd;
  --elements__hover:#1b4773; 
  --text__input:#03091e;
  --border__color:#97c93f;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
}
ul{
  list-style: none;
}

/* Barra de navegación */
.navbar{
  background-color: var(--navbar__background);
  width: 100%;
  padding: 0px 12px;
  height: 50px;
  display:flex;
  align-items: center;
  box-shadow:0px 5px 5px var(--aside__background);
  margin-bottom: 3px;
  color: var(--text__color);
}
.navbar--logo{
  display: flex;
  height: 100%;
  width: 55%;
}
.navbar--logo img{
  height: 70%;
  margin: auto 0;
    object-fit: cover;
}
.navbar--search-field{
  display: none;
}
.navbar--profile{
  width: 45%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.navbar--profile-info{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-grow: 1;
}
.fa-magnifying-glass{
  padding: 4px;
  border: solid 1px var(--border__color);
  border-radius: 5px;
}
.navbar--options{
  display: none;
}

/* Barra de navegación */ 

tablet.css

.navbar--profile{
    gap:12px;
}
.navbar--search{
    display: flex;
    border: solid 1px var(--border__color);
    border-radius: 5px;
    background-color: var(--text__input);
    padding: 8px;
    width: 60%;
}
.navbar--profile-info{
    width: 40%;

}

.navbar--search-field{
    display: flex;
    background-color: transparent;
    border: none;
    padding: 0 4px;
}
.fa-magnifying-glass{
    padding: 0;
    border: none;
    color: var(--border__color);
    border-radius: 5px;
} 

desktop.css

.navbar--logo{
    width: 35%;
}
.navbar--profile{
    width:65%;
}
.navbar--options{
    width:40%;
    display: flex;
    justify-content: space-around;
    font-weight: bold;
}
.navbar--search{
    width: 40%;
}
.navbar--profile-info{
    width: 20%;
}

La clase está mal explicada, en ningún momento explican bien que es layaut shifter

Mobile

Tablet

PC

Un leyaut similar al que existe en facebook, en el que las barras laterales se separen del contenido principal del centro

Asi vamos…

Les comparto el reto:
Mobile:

Desktop:

Comparto Mi Reto:
Celular

Tablet

Desktop

Tarde un poco pero lo logre!!!
Aqui el repositorio
Mobile

Tablet

Desktop

Aquí está mi reto, me costó porque es la primera vez que hago un diseño responsivo. Estoy satisfecho aunque sé que falta mucho por aprender.

Desktop

Tablet

Mobile

Mi página de seducción hecha en wordpress la pase a HTML y CSS:

Desktop:

Tablet:

Mobile:

El código en 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>Document</title>
    <link rel="stylesheet" href="./style4.css">
</head>
<body>
    <header>
        <nav class="menu">
            <figure class="menu__logo">
                <img src="https://vidaseductora.com/wp-content/uploads/2021/06/Logo-sin-letras-sin-fondo-pequeno.png" alt="logo">
            </figure>
            <div class="paginas-del-menu">
                <li class="menu__item">Home</li>
                <li class="menu__item">¿Quiénes somos?</li>
                <li class="menu__item">Entrenamientos</li>
                <li class="menu__item">Blog</li>
                <li class="menu__item">Contacto</li>
            </div>
        </nav>
    </header>
    <main class="portada">
        <div class="portada__left">
            <h1>Vida Seductora</h1>
            <h2>Ser atractivo es un viaje que empieza desde tu interior</h2>
            <p>Aprende los temas que te ayudarán a potencializar los resultados con las mujeres, desarrollando tu mejor versión</p>
            <button>Comienza Ahora</button>
        </div>
        <div class="portada__right">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ypcxam6-9pg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </main>
</body>
</html>

El código en CSS:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    font-family: poppins;
}
.menu{
    display: flex;
    justify-content: center;
    background-color: black;
    height: 60px;
}
.menu__logo{
    height: 60px;
    display: flex;
    align-items: center;
    margin: 0 40px;
}
.menu__logo img{
    width: 50px;
    cursor: pointer;
}
.paginas-del-menu{
    height: 60px;
    display: flex;
    align-items: center;
}
.menu__item{
    list-style-type: none;
    font-size: 1.4rem;
    margin: 0 50px;
    color: #b4b4b4;
    cursor: pointer;
}
.menu__item:hover{
    color: white;
}
.menu__item:last-child{
    margin-right: 32px;
}

.portada{
    background-image: url(https://static.vecteezy.com/system/resources/previews/000/696/278/non_2x/textured-black-background-vector.jpg);
    display: flex;
    justify-content: space-between;
    min-height: calc(100vh - 60px);
}
.portada__left{
    margin-left: 72px;
    margin-right: 22px;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 35%;
}
h1{
    color: white;
    font-family: poppins light;
    font-size: 7rem;
}
h2{
    color: white;
    font-family: poppins light;
    font-size: 2.6rem;
    margin-bottom: 32px;
}
p{
    color: #abb8c3;
    font-family: poppins light;
    font-size: 2.2rem;
    margin-bottom: 40px;
}
button{
    font-size: 2rem;
    text-transform: uppercase;
    padding: 22px;
    border-radius: 44px;
    width: 320px;
    background-color: rgba(255, 255, 255, 0.69);
    cursor: pointer;
}
button:hover{
    background-color: white;
    transition: 300ms;
}
.portada__right{
    width: 65%;
    height: calc(100vh - 60px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
iframe{
    width: 100%;
    height: 720px;
}

@media(max-width:1240px) {
    .menu{
        height: auto;
    }
    .menu__item{
        margin: 0 20px;
    }
    .portada{
        flex-direction: column;
        align-items: center;
    }
    .portada__left{
        margin-top: 50px;
        margin-left: 16px;
        margin-right: 16px;
        width: 75%;
        height: auto;
        align-items: center;
    }
    h1{
        text-align: center;
    }
    h2{
        text-align: center;
    }
    p{
        text-align: center;
    }
    .portada__right{
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: flex-start;
    }
    iframe{
        width: 75%;
        height: 400px;
        margin-bottom: 50px;
    }
    h1{
        font-size: 4rem;
    }
    h2{
        font-size: 2rem;
    }
    p{
        font-size: 1.8rem;
    }
@media(max-width:720px) {
    .menu{
        flex-direction: column;
        align-items: center;
        height: auto;
    }
    .paginas-del-menu{
        flex-wrap: wrap;
        justify-items: center;
        align-self: center;
        flex-grow: 1;
        display: none;
    }
    .portada{
        flex-direction: column-reverse;
        align-items: center;
    }
    .portada__left{
        margin-top: 0px;
        width: 95%;
        justify-content: center;
    }
    .portada__right{
        margin-bottom: 0;
    }
    button{
        width: 95%;
        margin-bottom: 50px;
    }
    iframe{
        width: 100%;
        margin-bottom: 0;
    }
}

no es mucho pero es trabajo honesto

Reto cumplido.
Mobile.


tablet y desktop

<!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>Reto 1</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)">
</head>
<body>
    <header class="container-header">
        <figure class="container-header__picture">
            <img src="./pics/logoStarWars.png" alt="logostarWars">
        </figure>
        <nav class="container-header__navbar">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Categorías</a></li>
                <li><a href="">Personajes</a></li>
                <li><a href="">Acerca de</a></li>
                <li><a href="">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main class="container-main">
        <section class="container-main__section">
            <article class="container-main__art inicio">
                <h1>
                    Bienvenida a la página
                </h1>
                <figure class="container-main__art--item">
                    <img src="./pics/logoStarWars.png" alt="inicio">
                </figure>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                </p>
            </article>
            <article class="container-main__art a1">
                <h3>
                    Actores
                </h3>
                <figure class="container-main__art--item">
                    <img src="./pics/actoresStarWars.jpg" alt="actores">
                </figure>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beata.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                </p>
            </article>
            <article class="container-main__art a2">
                <h3>
                    Planetas
                </h3>
                <figure class="container-main__art--item">
                    <img src="./pics/planetasStarWars.jfif" alt="planeta">
                </figure>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                </p>
            </article>
            <article class="container-main__art a3">
                <h3>
                    Personajes
                </h3>
                <figure class="container-main__art--item">
                    <img src="./pics/personajesStarWars.jpg" alt="personajes">
                </figure>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                </p>
            </article>
            <article class="container-main__art a4">
                <h3>
                    Armas
                </h3>
                <figure class="container-main__art--item">
                    <img src="./pics/armasStarWars.jpg" alt="armas">
                </figure>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                </p>
            </article>
            <article class="container-main__art a5">
                <h3>
                    Criaturas
                </h3>
                <figure class="container-main__art--item">
                    <img src="./pics/animalesStarWars.png" alt="criaturas">
                </figure>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                </p>
            </article>
            <article class="container-main__art a6">
                <h3>
                    Eventos Importantes
                </h3>
                <figure class="container-main__art--item">
                    <img src="./pics/eventStarWars.jpg" alt="eventos">
                </figure>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis nostrum ipsam quis ratione aliquid, magnam possimus molestiae vel eum labore, illum qui corrupti repellat neque amet ipsa exercitationem beatae?
                </p>
            </article>
        </section>
    </main>
    <footer class="container-footer">
        <address>Joserph Camacho</address>
        <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam et ducimus debitis nulla autem iusto, quisquam reiciendis! Cupiditate quibusdam exercitationem impedit fugiat aut libero quisquam ullam qui consectetur architecto!</small>
    </footer>
</body>
</html>


:root {
    --height-container: 150px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    background-color: black;
    color: white;
}

.container-header {
    display: flex;
    flex-wrap: wrap;
    height: var(--height-container);
    border-bottom:5px dotted white;
    justify-content: center;
}

.container-header__navbar {
    display: flex;
}

.container-header__navbar ul{
    margin: 0 auto;
}

.container-header__navbar ul li{
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    font-size: 1.50rem;
}

.container-header__navbar ul li a{
    text-decoration: none;
    color: white;
}

.container-header__navbar ul li a::before{
    content: " | ";
}

.container-header__picture {
    display: flex;
    width: 100vw;
    height: 25wh;
    justify-content: center;
}

.container-header__picture img{
    width: 200px;
    height: 100px;

}

.container-main {
    display: flex;
    flex-wrap: wrap;
}

.container-footer {
    display: flex;
    flex-wrap: wrap;
    height: 75px;

}

.container-main__art {
    width: 100%;
    min-width: 150px;
    height: auto;
    border-bottom: 5px solid white;
    text-align: center;
}

.container-main__art h1,
.container-main__art h3 {
    margin: 5px 5px 5px 5px;
}

.container-main__art p {
    margin: 5px 5px 5px 5px;
}

.container-main__art--item {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.container-main__art--item img{
    width: 100%;
    height: 100%;
}

.container-main__section{
    width: 100vw;
    height: auto;
}
.container-main__section{
    padding-left: auto;
    padding-right: auto;
}

.container-main__art.inicio {
    width: 100%;
    order: 1;
}

.a1,
.a2,
.a3,
.a4,
.a5,
.a6
 {  
    display: inline-block;
    width: 30%;
    margin: 0 1.1% 0 1.1%;
    order: 2;
}

Les comparto [mi página]. Saludos!(https://mgasperini.github.io/primeros_pasos/)

Les comparto mi práctica:
Repositorio
.
Mobile:

Tablet:

Desktop:



Jajajajaja; como Diego De Granda es Mexicano, cada que dice “contenedor padre” pienso que dice “contenedor cool”

Reto Completado
**Mobile: **

**Tablet: **

**Desktop: **

Bueno termine mi reto en 5h

Desktop
![](

Tablet

mobile

Ahora practicar que maravilla como explica el profesor Diego

Por acá dejo el desafío, que aproveché para ir creando mi web de portafolio. Me tomó bastante tiempo, unos 6 horas desarrollarlo; sin embargo, me sirvió mucho para terminar de comprender lo que hasta aquí hemos visto.

Acepto sugerencias.

MÓVIL

TABLET

LAPTOD

Les comparto mi proyecto, me costó mucho y debe tener mil errores jaja pero me gustó bastante

Github pages: https://drodelo98.github.io/mipagina

PC MEDIANO:

PC GRANDE

TABLET

TELEFONO

**mobile **

Tablet

Desktop

Mobile

Tablet

Desktop

Reto :

Phone:

Tablet:

Desktop:

RESUMEN CLASE 47:
LAYOUT SHIFTER CSS

Layout Shifter

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>Layout shifter</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <main class="container">
        <div class="c1"></div>
        <div class="c4">
            <div class="c2"></div>
            <div class="c3"></div>
        </div>
        <div class="c5"></div>
    </main>
</body>

</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.c1,
.c2,
.c3,
.c4,
.c5 {
    width: 100%;
    min-width: 150px;
    height: 150px;
}

.c4 {
    height: auto;
}

.c1 {
    background-color: #003476;
}

.c2 {
    background-color: #0062d2;
}

.c3 {
    background-color: #b4d2f7;
}

.c4 {
    background-color: #d5dfef;
}

.c5 {
    background-color: #dfe1e5;
}

@media (min-width: 600px) {
    .c1 {
        width: 25%;
    }

    .c4 {
        width: 75%;
    }

    .c5 {
        width: 100%;
    }
}

@media (min-width: 800px) {
    .container {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .c1 {
        width: 50%;
        order: 1;
    }

    .c4 {
        width: 100%;
    }

    .c5 {
        width: 50%;
        order: 2;
    }
}

y he aquí el reto de la clase… se logro banda
post data: hasta que no termine no me fui a dormir

Desktop:

Tableta:

movil:

<!DOCTYPE html>
<html lang="es">
    <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Ver Películas Completas Online en Latino, Castellano o Subtitulado, Películas Gratis en HD completas para ver online y estrenos gratis." />
    <meta name="robots" content="index, follow" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RePelisHD.TV - Ver Peliculas HD, Series Online | Películas Completas | Estrenos</title>
    <link rel="stylesheet" href="css/style_20.css" />
    <link rel="stylesheet" media="(min-width: 770px)" href="css/tablet_reto.css" />
    <link rel="stylesheet" media="(min-width: 1230px)" href="css/desktop_reto.css" />
    <link href="assets/fontawesome/css/all.min.css" rel="stylesheet" />
    <link href="assets/fontawesome/css/fontawesome.min.css" rel="stylesheet" />
    <link href="assets/fontawesome/css/brands.min.css" rel="stylesheet" />
    <link href="assets/fontawesome/css/solid.min.css" rel="stylesheet" />
    <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=Roboto&display=swap" rel="stylesheet" />
    <link rel="shortcut icon" href="img/hd_icono.png" type="image/x-icon" />

    </head>
    <body>
        <main class="main-container">
            <header class="main-header">
                    <div class="header-menu">
                        <a href="#"><i class="fa-solid fa-bars"></i></a>
                    </div>
                    <h1>PELIS.PLUS</h1>
                    <div class="header-busqueda">
                        <a href="#"><i class="fas fa-search"></i></a>
                    </div>
                    <nav class="header-nav">
                        <ul>
                            <li><a href="#">Peliculas <i class="fa-solid fa-caret-down"></i></a></li>
                            <li><a href="#">Series <i class="fa-solid fa-caret-down"></i></a></li>
                            <li><a href="#">Generos <i class="fa-solid fa-caret-down"></i></a></li>
                            <li><a href="#">Estrenos HD <i class="fa-solid fa-caret-down"></i></a></li>
                            <li><a href="#">Idiomas <i class="fa-solid fa-caret-down"></i></a></li>
                            <li><a href="#">Episodios <i class="fa-solid fa-caret-down"></i></a></li>
                        </ul>
                    </nav>
                    <form action="" class="header-form">
                        <label for="busqueda">
                            <input type="search" id="busqueda" name="busqueda" placeholder="Buscar..." />
                            <span class="label-icono"><i class="fas fa-search"></i></span>
                        </label>
                    </form>
            </header>
            <section class="main-alfabeto">
                <p>#</p>
                <p>A</p>
                <p>B</p>
                <p>C</p>
                <p>D</p>
                <p>E</p>
                <p>F</p>
                <p>G</p>
                <p>H</p>
                <p>I</p>
                <p class="alfabeto-indice_j">J</p>
                <p class="alfabeto-indice_k">K</p>
                <p class="alfabeto-indice_l">L</p>
                <p class="alfabeto-indice_m">M</p>
                <p class="alfabeto-indice_n">N</p>
                <p class="alfabeto-indice_o">O</p>
                <p class="alfabeto-indice_p">P</p>
                <p class="alfabeto-indice_q">Q</p>
                <p class="alfabeto-indice_r">R</p>
                <p class="alfabeto-indice_s">S</p>
                <p class="alfabeto-indice_t">T</p>
                <p class="alfabeto-indice_u">U</p>
                <p class="alfabeto-indice_v">V</p>
                <p class="alfabeto-indice_w">W</p>
                <p class="alfabeto-indice_x">X</p>
                <p class="alfabeto-indice_y">Y</p>
                <p class="alfabeto-indice_z">Z</p>
            </section>
            <section class="main-estrenos">
                <div class="section-slide">
                    <h3>Estrenos en HD / Actualizadas</h3>
                    <div class="slide-arrows">
                        <span><i class="fa-solid fa-caret-left"></i></span>
                        <span><i class="fa-solid fa-caret-right"></i></span>
                    </div>
                </div>
                <div class="section-pelicula_estreno">
                    <div class="section-pelicula_1">
                        <figure>
                            <img src="img/pelicula_1.jpg" alt="Animales Fantasticos: Los Secretos de Dumbledore"/>
                        </figure>
                        <div class="section-pie">
                            <h4>Animales Fantasticos: Los...</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_2">
                        <figure>
                            <img src="img/pelicula_2.jpg" alt="La Ciudad Perdida"/>
                        </figure>
                        <div class="section-pie">
                            <h4>La Ciudad Perdida</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_3">
                        <figure>
                            <img src="img/pelicula_3.jpg" alt="Morbius"/>
                        </figure>
                        <div class="section-pie">
                            <h4>Morbius</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_4">
                        <figure>
                            <img src="img/pelicula_4.jpg" alt="El Hombre del Norte"/>
                        </figure>
                        <div class="section-pie">
                            <h4>El Hombre del Norte</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_5">
                        <figure>
                            <img src="img/pelicula_5.jpg" alt="Sonic: 2 La Pelicula"/>
                        </figure>
                        <div class="section-pie">
                            <h4>Sonic: 2La Pelicula</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_6">
                        <figure>
                            <img src="img/pelicula_6.jpg" alt="Dog. Un viaje Salvaje"/>
                        </figure>
                        <div class="section-pie">
                            <h4>Dog. Un Viaje Salvaje</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_7">
                        <figure>
                            <img src="img/pelicula_7.jpg" alt="Ambulance: Plan de Huida"/>
                        </figure>
                        <div class="section-pie">
                            <h4>Ambulance: Plan de...</h4>
                            <p>2022</p>
                        </div>
                    </div>
                </div>
            </section>
            <section class="main-destacadas">
                <div class="section-slide">
                    <h3>Peliculas + Recomendadas</h3>
                    <div class="slide-arrows">
                        <span><i class="fa-solid fa-caret-left"></i></span>
                        <span><i class="fa-solid fa-caret-right"></i></span>
                    </div>
                </div>
                <div class="section-pelicula_destacada">
                    <div class="section-pelicula_8">
                        <figure>
                            <img src="img/pelicula_8.jpg" alt="Fatima: La Pelicula" />
                        </figure>
                        <div class="section-pie">
                            <h4>Fatimaz: La Pelicula</h4>
                            <p>2020</p>
                        </div>
                    </div>
                    <div class="section-pelicula_9">
                        <figure>
                            <img src="img/pelicula_9.jpg" alt="Los Tipos Malos" />
                        </figure>
                        <div class="section-pie">
                            <h4>Los Tipos Malos</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_10">
                        <figure>
                            <img src="img/pelicula_10.jpg" alt="Uncharted" />
                        </figure>
                        <div class="section-pie">
                            <h4>Uncharted</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_11">
                        <figure>
                            <img src="img/pelicula_11.jpg" alt="The Batman" />
                        </figure>
                        <div class="section-pie">
                            <h4>The Batman</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_12">
                        <figure>
                            <img src="img/pelicula_12.jpg" alt="A Day to Die" />
                        </figure>
                        <div class="section-pie">
                            <h4>A Day to Die</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-pelicula_13">
                        <figure>
                            <img src="img/pelicula_13.jpg" alt="One Shot" />
                        </figure>
                        <div class="section-pie">
                            <h4>One Shot</h4>
                            <p>2021</p>
                        </div>
                    </div>
                    <div class="section-pelicula_14">
                        <figure>
                            <img src="img/pelicula_14.jpg" alt="The Medium" />
                        </figure>
                        <div class="section-pie">
                            <h4>Ambulance: Plan de...</h4>
                            <p>2021</p>
                        </div>
                    </div>
                </div>
            </section>
            <section class="main-series">
                <div class="section-slide">
                    <h3>Ultimas Series agregadas / Actualizadas</h3>
                    <div class="slide-arrows">
                        <span><i class="fa-solid fa-caret-left"></i></span>
                        <span><i class="fa-solid fa-caret-right"></i></span>
                    </div>
                </div>
                <div class="section-serie_destacada">
                    <div class="section-serie_1">
                        <figure>
                            <img src="img/serie_1.jpg" alt="Planeta Prehistorico" />
                        </figure>
                        <div class="section-pie">
                            <h4>Planeta Prehistorico</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-serie_2">
                        <figure>
                            <img src="img/serie_2.jpg" alt="Love, Death and Robots" />
                        </figure>
                        <div class="section-pie">
                            <h4>Love, Death and Robots</h4>
                            <p>2019</p>
                        </div>
                    </div>
                    <div class="section-serie_3">
                        <figure>
                            <img src="img/serie_3.jpg" alt="Cielo Nocturno" />
                        </figure>
                        <div class="section-pie">
                            <h4>Cielo Nocturno</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-serie_4">
                        <figure>
                            <img src="img/serie_4.jpg" alt="Las Bravas FC" />
                        </figure>
                        <div class="section-pie">
                            <h4>Las Bravas FC</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-serie_5">
                        <figure>
                            <img src="img/serie_5.jpg" alt="The G Word" />
                        </figure>
                        <div class="section-pie">
                            <h4>The G Word</h4>
                            <p>2022</p>
                        </div>
                    </div>
                    <div class="section-serie_6">
                        <figure>
                            <img src="img/serie_6.jpg" alt="Arcane" />
                        </figure>
                        <div class="section-pie">
                            <h4>Arcane</h4>
                            <p>2021</p>
                        </div>
                    </div>
                    <div class="section-serie_7">
                        <figure>
                            <img src="img/serie_7.jpg" alt="Record of Ragnarok" />
                        </figure>
                        <div class="section-pie">
                            <h4>Record of Ragnarok</h4>
                            <p>2021</p>
                        </div>
                    </div>
                </div>
            </section>
            <section class="main-tops">
                <div class="tops-movies">
                    <div class="section-slide">
                        <h3>Top Movies</h3>
                        <div class="slide-ver">
                            <button type="submit">Ver Todo</button>
                        </div>
                    </div>
                    <div class="tops-ranking">
                        <div class="ranking-movie_1">
                            <figure>
                                <img src="img/spiderman.jpg" alt="Spiderman No Way Home" />
                            </figure>
                            <p class="movie-posicion">1</p>
                            <p>8.7 Spiderman: No Way Home</p>
                        </div>
                        <div class="ranking-movie_1">
                            <figure>
                                <img src="img/friends.jpg" alt="Friends: La Reunion" />
                            </figure>
                            <p class="movie-posicion">2</p>
                            <p>8.3 Friends: la Reunion</p>
                        </div>
                        <div class="ranking-movie_1">
                            <figure>
                                <img src="img/batman.jpg" alt="The Batman" />
                            </figure>
                            <p class="movie-posicion">3</p>
                            <p>8.3 The Batman</p>
                        </div>
                        <div class="ranking-movie_1">
                            <figure>
                                <img src="img/karman.jpg" alt="Karnan" />
                            </figure>
                            <p class="movie-posicion">4</p>
                            <p>8.2 Karnan</p>
                        </div>
                        <div class="ranking-movie_1" id="end"> 
                            <figure>
                                <img src="img/dune.jpg" alt="Dune" />
                            </figure>
                            <p class="movie-posicion">5</p>
                            <p>8.0 Dune</p>
                        </div>
                    </div>
                </div>
                <div class="tops-series">
                    <div class="section-slide">
                        <h3>Top Series</h3>
                        <div class="slide-ver">
                            <button type="submit">Ver Todo</button>
                        </div>
                    </div>
                    <div class="tops-ranking">
                        <div class="ranking-movie_1">
                            <figure>
                                <img src="img/arcane.jpg" alt="Arcane" />
                            </figure>
                            <p class="movie-posicion">1</p>
                            <p>9.3 Arcane</p>
                        </div>
                        <div class="ranking-movie_1">
                            <figure>
                                <img src="img/ragnarok.jpg" alt="Record of Ragnarok" />
                            </figure>
                            <p class="movie-posicion">2</p>
                            <p>9.0 Record of Ragnarok</p>
                        </div>
                        <div class="ranking-movie_1">
                            <figure>
                                <img src="img/rick_morty.jpg" alt="Rick y Morty" />
                            </figure>
                            <p class="movie-posicion">3</p>
                            <p>8.8 Rick y Morty</p>
                        </div>
                        <div class="ranking-movie_1">
                            <figure>
                                <img src="img/tokyo_revengers.jpg" alt="Tokyo Revengers" />
                            </figure>
                            <p class="movie-posicion">4</p>
                            <p>8.5 Tokyo Revengers</p>
                        </div>
                        <div class="ranking-movie_1" id="end"> 
                            <figure>
                                <img src="img/myhero.jpg" alt="My Hero Academy" />
                            </figure>
                            <p class="movie-posicion">5</p>
                            <p>8.3 My Hero Academy</p>
                        </div>
                    </div>
                </div>
            </section>
            <footer class="main-footer">
                <p>
                    © 2021 FocusDeveloper / Pelis.Plus | Ver Películas en HD y Series Gratis. Todos los derechos reservados.
                </p>
            </footer>
        </main>
    </body>
</html>

**RETO COMPLETADO CON 3 DIFERENTES VIEW PORT **

Información resumida de esta clase
#EstudiantesDePlatzi

  • Layout shifter es otra manera de crear responsive desing iniciando con mobile first

  • Esta manera de hacerlo funciona teniendo ciertos contenedores padres con algunos contenedores hijos adentro y haciendo que todo esto se acomode

  • Cuando trabajamos con flex debemos tener un contenedor principal para aplicar esta propiedad

Mobile
Tablet

Desktop

WEB DE INTERES PARA PROFUNDIZAR EN LAYOUT
https://web.dev/learn/design/media-queries/

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 10%;
}
body {
	font-size: 15px;
	word-wrap: break-word;
}

.contect {
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	height: 100vh;
}

.login {
	width: 10%;
	height: 100%;
	background-color: white;
	text-align: left;
}

.padre {
	background-color: #fdcae1;
	width: 100%;
	height: 10%;
    display: flex;
    flex-direction: row;
}

.hijo {
	display: flex;
	justify-content: center;
	width: 100%;
	font-size: 10rem;
}

.li {
	display: inline-table;
	font-family: arial;
	margin: 10px 0;
	padding-top: 10px;
	padding-bottom: 10px
	padding-right: 10px; 
	padding-left: 10px;
}
.present {
	background-color: #84b6f4;
	width: 100%;
	height: 90%;
	text-align: center;
	display: flex;
	justify-content: space-around;
}
.present-hijo {
	background-color: #84b6f4;
	width: 30%;
	height: 100%;
}
.ret {
	background-color: #84b6f4;
	width: 90%;
	height: 100%;
	display: flex;
	align-items: center;
	font-family: fantasy;
	font-style: italic;
	text-align: center;
	font-size: 15rem;
}
.hija {
	background-color: #84b6f4;
	display: flex;
	align-items: center;
	width: 80%;
	height: 100%;
}

.present-img {
	display: flex;
	justify-content: center;
}

.nav {
	background-color: #84b6f4;
	display: flex;
	justify-content: flex-end;
	align-items: end;  	
}

@media (max-width: 600px) {
	.present {
		flex-direction: column;
		align-items: center; 

	}
	.imag-1 {
		width: 100px;
	}
	
	.imag-2 {
		width: 60px;
		justify-content: center;
	}
	.padre {
		height: 300px;
		background-color: #fdcae1;
		flex-direction: column;
	}
	.hijo {
		background-color: #fdcae1;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.login {
		display: flex;
		justify-content: center;
		height: 100px;
		background-color: #84b6f4;
		width: 100%;
	}
	.imag-3 {
		border-radius: 50%;
	}
}

Hice un diseño a lo One Piece 🏴‍☠️

  • CELLPHONE
  • TABLET
  • DESKTOP

Desktop

Tablet

Mobile

así me quedo!