Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

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

Creación de un carousel de imágenes con CSS: Detalle de cada item

27/43
Recursos

El selector ~ de CSS nos permite dar estilos a todos que cumplan los requisitos y sean “hermanos directos”, es decir, que tengan el mismo elemento padre.
Por ejemplo:

.PrimerTitulo ~ h2 {
  background-color: red;
}
<article class="ContenedorPadre">
  <h2 class="PrimerTitulo">Este es el primer elemento H2</h2>
  <!-- Este título tendrá color de fondo rojo -->
  <h2>Este es el segundo elemento H2</h2>
  <div class="ElementoPadreDiferente">
      <!-- Este título NO tendrá color de fondo rojo porque su padre es diferente -->
    <h2>Este es el tercer elemento H2</h2>
  </div>
  <!-- Este título también tendrá color de fondo rojo -->
  <h2>Este es el cuarto elemento H2</h2>
</article>

También existe el selector +. Solo aplica los estilos al primer hermano directo de nuestros elementos.
Por ejemplo:

.PrimerTitulo + h2 {
  background-color: blue;
}
<article class="ContenedorPadre">
  <h2 class="PrimerTitulo">Este es el primer elemento H2</h2>
  <!-- Este título SÍ tendrá color de fondo azul -->
  <h2>Este es el segundo elemento H2</h2>
  <div class="ElementoPadreDiferente">
      <!-- Este título NO tendrá color de fondo azul -->
    <h2>Este es el tercer elemento H2</h2>
  </div>
  <!-- Este título no tendrá color de fondo azul -->
  <h2>Este es el cuarto elemento H2</h2>
</article>

Aportes 445

Preguntas 70

Ordenar por:

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

Si alguien necesita poner imágenes sin descargarlas puede usar la unsplash, dejo la documentación de su API y un ejemplo, es muy simple de usar:

Unsplash Source

https://source.unsplash.com/random

Y si quieren diferentes que cada una pueden pasarle un parametro como término de busqueda

https://source.unsplash.com/random?movie
https://source.unsplash.com/random?people
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carrusel 1</title>
</head>

<style>
    body {
        margin: 0px;
    }

    .carousel {
        width: 100%;
        overflow: scroll;
        padding: 30px;
        position: relative;
    }

    .carousel__container {
        white-space: nowrap;
        margin: 70px 0px;
        padding-bottom: 10px;

    }

    .carousel-item {
        background-color: palevioletred;
        width: 200px;
        height: 250px;
        border-radius: 20px;
        overflow: hidden;
        margin-right: 10px;
        display: inline-block;
        cursor: pointer;
        transition: 450ms all;
        transform-origin: center left;
        position: relative;

    }

    .carousel-item:hover~.carousel-item {
        transform: translate3d(100px, 0, 0);
    }

    .carousel__container:hover .carousel-item {
        opacity: 0.3;
    }

    .carousel__container:hover .carousel-item:hover {
        transform: scale(1.5);
        opacity: 1;
    }

    .carousel-item__img {
        width: 200px;
        height: 250px;
        object-fit: cover;
    }

    .carousel-item__details {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9)0%, rgba(0, 0, 0, 0)100%);
        font-size: 10px;
        opacity: 0;
        transition: 450ms opacity;
        padding: 10px 10px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        display: flex;
        justify-content: flex-end;
        flex-direction: column;

    }
.carousel-item__details img{
    height: 15px;
}
.carousel-item__details p{
        margin: 0px;
    }

    .carousel-item__details:hover {
        opacity: 1;
        color: white;


    }

</style>

<body>
    <section class="carousel">
        <div class="carousel__container">
            <div class="carousel-item">
                <img class="carousel-item__img"
                    src="https://images.pexels.com/photos/3664632/pexels-photo-3664632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
                    alt="">
                <div class="carousel-item__details">
                    <div>
                        <img src="./img/play.png" alt="play">
                        <img src="./img/plus.png" alt="plus">
                    </div>
                    <p class="carousel-item__details--titile">Titulo descriptivo</p>
                    <p class="carousel-item__details--subtitle">2019 16+ 114 min</p>

                </div>
            </div>
            <div class="carousel-item">
                <img class="carousel-item__img"
                    src="https://images.pexels.com/photos/3664632/pexels-photo-3664632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
                    alt="">
                <div class="carousel-item__details">
                    <div>
                        <img src="./img/play.png" alt="play">
                        <img src="./img/plus.png" alt="plus">
                    </div>
                    <p class="carousel-item__details--titile">Titulo descriptivo</p>
                    <p class="carousel-item__details--subtitle">2019 16+ 114 min</p>

                </div>
            </div>
        </div>
    </section>

</body>

</html>

Solución:

.carousel-item__details {
    background-color: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    font-size: 10px;
    opacity: 0;
    transition: 450ms opacity;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
}

.carousel-item__details:hover {
    opacity: 1;
}

.carousel-item__details--icon {
    width: 25px;
    height: 25px;
}

.carousel-item__details--title, .carousel-item__details--subtitle  {
    color: #ffffff;
}

Comparto mi proyecto

aqui dejo el codigo:

https://github.com/fulit103/FrontendDeveloper

Asi voy:

Listo !

Para seguir con BEM yo aplicaria algo como esto:

class="carousel"
	class="carousel-container"
	class="card"
		class="card__img"
		class="card__buttons"
			class="card__buttons__play"
			class="card__buttons__add"
		class="card__details"
			class="card__details__title"
			class="card__details__data"

Bem es flexible en cuanto a que nivel de detalle podemos tener en los elementos, si bien podemos ir al pie, al final terminariamos con clases demaciado grandes, es mejor segmentar pero mantener la premisa, que un:

BLOQUE: Por si solo debe tener “vida” en cualquier parte en este caso carousel, carousel-container y card por si solos pueden vivir fuera sin problema.

ELEMENTO: necesitan a un padre para poder existir, en este caso los elementos internos de la tarjeta, los botones y el texto.

MODIFICADOR: En este ejemplo no hay un modificador claro, si mas adelante se pusiera un boton de eliminar podria ser entonces un modificador de agregar, quiza colocando color rojo.

De nuevo, hay diferentes acercamientos a la metodologia BEM, mientras todos los miembros del equipo esten en el mismo canal se pueden implementar variaciones.

Ahora que es el #jschallenge https://platzi.com/blog/jschallenge/
He creado mi aportación!!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Carrousel 1</title>
    </head>

    <style>
        body {
            margin: 0px;
        }

        .carousel {
            width: 100%;
            overflow: scroll; /* Permite agregar un scroll a esta clase  https://developer.mozilla.org/es/docs/Web/CSS/overflow-y*/
            padding: 30px;
            position: relative; /* El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a sí mismo*/
        }

        .carousel__container {
            white-space: nowrap; /* Permite que nuestro contenido se vaya todo a la derecha, recordemos que por defult se alinea un rengon abajo cuando se llega al dinal de la pagina. https://developer.mozilla.org/es/docs/Web/CSS/white-space */
            margin: 70px 0px;
            padding-bottom: 10px;
        }

        .carousel-item {
            background-color: pink;
            width: 200px;
            height: 250px;
            border-radius: 20px;
            overflow: hidden;
            margin-right: 10px;
            display: inline-block;
            cursor: pointer; /* Con este cursor se mostrara una manita al pasar por encima del Item */
            transition: 450ms; /* Permite agregar los milisegundos que tarda nuestra transicion */
            transform-origin: center left; /* Permite alinear la transicion */
            position: relative;
        }

        .carousel-item:hover ~ .carousel-item {  /* La virgulilla se obtiene presionando ALT+126 */ /* La virgulilla sirve para indicar que estos estilos se agreguen a mas de un selector */
            transform: translate3d(100px, 0, 0); /* Con esto, cada que hagamos hover todos nuestros elementos se desplazaran a la derecha */
        }

        .carousel__container:hover .carousel-item { /* Aqui indicamos que cuando pasemos por encima del container, el ITEM tendran una opacidad menor*/
            opacity: 0.3;
        }

        .carousel__container:hover .carousel-item:hover { /* Cuando el containet y el item esten en hover, la escala sera mayor */
            transform: scale(1.5); /* Con esto aumentamos el tamaño escala de nuestro item */
            opacity: 1;
        }

        .carousel-item__img {
            width: 200px;
            height: 250px;
            object-fit: cover; /* Con esta propiedad haces que la imagen no se deforme ya que respetas su tamaño original*/
        }

        .carousel-item__details {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); /* Con este valor se pueden realizar degradados o desvanecidos */
            font-size: 10px;
            opacity: 0;
            transition: 450ms opacity;
            padding: 10px;
            position: absolute;
            top: 180px;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .carousel-item__details:hover {
            opacity: 1;
        }

        .carousel-item__details img {
            width: 20px;
        }

        .carousel-item__details--title {
            font-size: 10px;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 0; /* Espacio entre renglones */
        }

        .carousel-item__details--subtitle {
            font-size: 7px;
            color: #FFFFFF;
        }

    </style>
    
    <body>
        <section class="carousel">
            <div class="carousel__container"> <!-- Aqui se tienen todos los ITEMS -->
                <div class="carousel-item"> <!-- Esto es para un solo ITEM -->
                    <img class="carousel-item__img" src="https://images.pexels.com/photos/1114425/pexels-photo-1114425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Imagen Edificio">
                    <div class="carousel-item__details"> <!-- Este div encerrara todos los detalles de nuestro item como botones o titulo -->
                        <div> <!-- Este div de agrega porque queremos que las dos imagenes de abajo vaya una seguida de la otra, es decir, esten alineadas a de forma horizontal -->
                            <img src="./play.png" alt="Play">
                            <img src="./plus.png" alt="Plus">
                        </div>
                        <p class="carousel-item__details--title">Titulo Descriptivo</p>
                        <p class="carousel-item__details--subtitle">2019 16+ 114 minutos</p>
                    </div> 
                </div>
            </div>
        </section>
    </body>
</html>
icono de add
<img src="https://img.icons8.com/flat_round/64/000000/plus.png">

icono de play
<img src="https://img.icons8.com/flat_round/64/000000/play--v1.png">

Les invito a ver el resultado que logré. A seguir aprendiendo

https://codepen.io/angelcabrera/full/YzKRrwb

Haré mi propia página de anime solo para mí haha

Así me está quedando:

Quemar (Hard coding): Escribir un texto que no sea modificable.

En mi caso bajo los carroussel en el navegador me aparecía una barra de scroll por defecto, y para quitarla tuve que poner Overflow-x:hidden; en el contenedor .carrousel
Por si a alguien le pasa 😃

Reto terminado 😄.

Si alguno se quedó con la duda de como estilizar el scroll para que quede mucho mas estético, lo pueden hacer usando la pseudoclase “-webkit-scrollbar” abajo está el ejemplo, sin embargo pueden ver este vídeo donde lo explican super bien además es muy sencillo.
https://www.youtube.com/watch?v=E-Npbuksob0
Espero les sirva, para mi fue de gran utilidad.

.carousel::-webkit-scrollbar {
  width: 10px;
  background-color: #8f57fd;
}

.carousel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border: 2px solid #8f57fd;
}

tarea

  • agregue estos estilos
    hover:
.carousel-item:hover .carousel-item__details{
      opacity: 1;
   }

y en .carousel-item__details volvi el opacity a 0

para los demas elementos del item

/*iconos mejor dimensionados*/
.carousel-item__details img{
      width: 25px;
      height: 25px;
   }
/*Color en el texto*/
   .carousel-item__details p{
      color: white;
      font-weight: bold;
   }
/*tamaño apropiado para los textos*/
   .carousel-item__details--title{
      font-size: 16px;
   }

   .carousel-item__details--subtitle{
      font-size: 10px;
   }

Pase todo el css a otro archivo aparte y le coloque lo visto en las clases anteriores

La siguiente url es una pagina para obtener distintos iconos de manera gratuita para nuestra pagina web.
https://fontawesome.com/

En vez de usar en carousel-item__details

top: 0;
left: 0;
right: 0;
bottom: 0;

se puede emplear la propiedad inset que realiza lo mismo pero en una sola línea

inset: 0 0 0 0;

o más simplificado

inset: 0;

su estructura es la siguiente

inset: top right bottom left;

ya pude alinear el texto en el lugar donde debe estar.

.carousel-item__details {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
        font-size: 10px;
        opacity: 0;
        transition: 450ms opacity;
        padding: 10px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .carousel-item__details:hover {
        opacity: 1;
    }
    .carousel-item__details--title {
        color: white;
        font-size: 10px;
        font-weight: bolder;
    }
    .carousel-item__details--subtitle {
        color: white;
        font-size: 8px;
    }
    .carousel-item__details--icons img{
        width: 30px;
        height: 30px;
    }```

me gusta!!!

Asi me quedo a mi

El codigo se los comparto por GITHUB
https://github.com/guzmandiegoandres12/Platzi-ExerciseCSS_HTML

El reto de esta clase, consiste en incluir en nuestros estilos la clave:

.carousel-item__details:hover{
	opacity:1;
}```

Me ha costado bastante seguir el ritmo este capítulo, supongo que es mi inexperiencia pero no entendía el porque de muchos parametros.

También me gustaría saber el por qué de esta sintaxis: .carrousel-item:hover ~ .carrousel-item

Creo que la tarea se podría resolver agregando las siguientes líneas:
.carousel-item__details:hover { opacity: 0.5; }

Espero ayudar a alguien, así me quedó combinando algunas soluciones que encontré en los comentarios 😀:

Aquí lo añadido al código:

  • Subí los textos dentro del div anterior
  • Por lo tanto añadí el color blanco a .carousel-item__details
  • Ahí mismo cambié el background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0,0.1)); porque no lo estaba respetando
  • Asigné de forma general a los textos fuente y margen
  • Personalicé el título y subtítulo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        body {
            margin: 0px;
        }
        .carousel {
            width: 100%;
            overflow: scroll;
            padding: 30px;
            position: relative;
        }
        .carousel__container {
            white-space: nowrap;
            margin: 70px 0px;
            padding-bottom: 10px;
        }
        .carousel-item {
            background-color: turquoise;
            width: 200px;
            height: 250px;
            border-radius: 20px;
            overflow: hidden;
            margin-right: 10px;
            display: inline-block;
            cursor: pointer;
            transition: 450ms all;
            transform-origin: center left;
            position: relative;
        }
        .carousel-item:hover ~ .carousel-item {
            transform: translate3d(100px, 0, 0);
        }
        .carousel__container:hover .carousel-item {
            opacity: 0.3;
        }
        .carousel__container:hover .carousel-item:hover {
            transform: scale(1.5);
            opacity: 1;
        }
        .carousel-item__img {
            object-fit: cover;
            height: 250px;
            width: 200px;
        }
        .carousel-item__details {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0,0.1));
            bottom: 0;
            color: white;
            font-size: 10px;
            left: 0;
            padding: 10px;
            position: absolute;
            opacity: 0;
            top: 0;
            transition: 450ms opacity;
            right: 0;

            display: flex;
            justify-content: flex-end;
            flex-direction: column;
        }
        .carousel-item__details:hover {
            opacity: 1;
        }
        .carousel-item__details--img {
            background: white;
            border-radius: 250px;
            height: 20px;
        }
        .carousel-item__details p {
            font-family: 'Raleway', sans-serif;
            margin: 5px 0px;
        }
        .carousel-item__details--title {
            font-weight: bold;
            letter-spacing: 1px;
        }
        .carousel-item__details--subtitle {
            font-size: 9px;
        }
    </style>
</head>
<body>
    <section class="carousel">
        <div class="carousel__container">
            <div class="carousel-item">
               <img class="carousel-item__img" src="https://source.unsplash.com/random?coffee" alt="Coffee"> 
               <div class="carousel-item__details">
                   <div>
                        <img class="carousel-item__details--img" src="/icons/icon-play.png" alt="Play">
                        <img class="carousel-item__details--img" src="/icons/icon-plus.png" alt="More">
                        <p class="carousel-item__details--title">Título descriptivo</p>
                        <p class="carousel-item__details--subtitle">2019 16+ 114 minutos</p>
                    </div>
               </div>
            </div>
            <div class="carousel-item">
                <img class="carousel-item__img" src="https://source.unsplash.com/random?working-online" alt="Marketing Online"> 
               <div class="carousel-item__details">
                   <div>
                        <img class="carousel-item__details--img" src="/icons/icon-play.png" alt="Play">
                        <img class="carousel-item__details--img" src="/icons/icon-plus.png" alt="More">
                        <p class="carousel-item__details--title">Título descriptivo</p>
                        <p class="carousel-item__details--subtitle">2019 16+ 114 minutos</p>
                    </div>
               </div>
            </div>
        </div>
    </section>
</body>
</html>

hola me funciona perfecto el carrousel pero anda muy lento , alguien me puede decir cual es el error? gracias.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Carrousel 1</title>
</head>
<style>
    body{
        margin: 0px;
    }
    .carrousel{
        width: 100%;
        overflow: scroll;
        padding: 30px;
        position: relative;
    }
    .carrousel__conteiner{  
        white-space: nowrap;
        margin: 70px 0px;
        padding-bottom: 10px;
    }
    .carrousel-item{
        background-color: black;
        width: 200px;
        height: 250px;
        border-radius: 20px;
        overflow: hidden;
        margin-right: 10px;
        display: inline-block;
        cursor: pointer;
        transition: 450ms all;
        transform-origin: center left;
        position: relative;
    }
    .carrousel-item:hover ~ .carrousel-item{
        transform: translate3d(100px, 0, 0);
    }
        
    .carrousel__conteiner:hover .carrousel-item{
        opacity: 0.3;
    }
    .carrousel__conteiner:hover .carrousel-item:hover{
        transform: scale(1.5);
        opacity: 1;
    }
    .carrousel-item__img{
        width: 200px;
        height: 250px;
        object-fit: cover;
        
    }
    .carrousel-item__details{
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
        font-size: 10px;
        opacity: 1;
        transition: 450ms opacity;
        padding: 10px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
       
    }
    
        .carrousel-item__details--titulo{
        position: absolute;
        bottom: 6%;
        color: white;
        margin-left: 2px;
        font-size: 20px;
        }
    .carrousel-item__details--subtitulo{
        position: absolute;
        bottom: 0%;
        color: white;
        margin-left: 2px;
        font-size: 15px;
    }
    
    .carrousel-item__details--play{
        margin-top: 150px;
        height: 30px;
    }
    .carrousel-item__details--suma{
        margin-top: 150px;
        height: 30px;
    }
    .carrousel-item__img2{
        width: 200px;
        height: 250px;
        object-fit: cover;
    }
    .carrousel-item__img3{
        width: 200px;
        height: 250px;
        object-fit: cover;

    }
    .carrousel-item__img4{
        width: 200px;
        height: 250px;
        object-fit: cover;
    }
    .carrousel-item__img5{
        width: 200px;
        height: 250px;
        object-fit: cover;
        
    }
    
</style>
<body>
    <section class="carrousel">
     <div class="carrousel__conteiner">
       <div class="carrousel-item">
           <img class="carrousel-item__img" src="file:///C:/Users/inter/Downloads/pexels-photo-3937174.jpeg" alt="pc">
            <div class="carrousel-item__details">
               <div class="carrousel-item__details-img">
                <img class="carrousel-item__details--play" src="https://img.icons8.com/flat_round/64/000000/play--v1.png"/>
                <img class="carrousel-item__details--suma" src="https://img.icons8.com/flat_round/64/000000/plus.png"/>
             </div> 
            <p class="carrousel-item__details--titulo">Titulo descriptivo</p>
            <p class="carrousel-item__details--subtitulo">2019 16+ 114 minutos</p>
        </div>
        </div>
       <div class="carrousel-item">
           <img class="carrousel-item__img2" src="file:///C:/Users/inter/Downloads/photo-of-woman-lying-on-bed-while-using-laptop-4066041.jpg" alt="">
        </div>
        <div class="carrousel-item">
            <img class="carrousel-item__img3" src="file:///C:/Users/inter/Downloads/aircraft-wing-682406.jpg" alt="">
        </div>
        <div class="carrousel-item">
            <img class="carrousel-item__img4" src="file:///C:/Users/inter/Downloads/gray-asphalt-road-on-cliff-972391.jpg" alt="">
        </div>
        <div class="carrousel-item">
            <img class="carrousel-item__img5" src="file:///C:/Users/inter/Downloads/green-mountain-with-river-in-the-middle-4064432.jpg" alt="">
        </div>
     </div>
    </section>
</body>
</html>```

**<code> **```

así va mi carrusel después de muchas equivocaciones, me pasa que me enredo mucho por las clases , y que no sabia como modificar todas las imágenes a la vez y los iconos, pero lo resolví, lo único que no he logrado hacer es que funcione la opacidad
![](

Me costo algo de tiempo poder poner las imágenes en el medio y darles posicion

Todo super bien:

Para alguna duda o sugerencia les dejo mis avances en github con sus respectivos commits

https://codi-go.github.io/2_Frontend_Developer/
https://github.com/codi-go/2_Frontend_Developer/commits/master

les comparto el codigo y la parte visual de como me quedo mi proyecto :v…

/*/ AQUI ESTA SOLO LA PARTE QUE FALTO HACER EN CLASES /*/

 ------ -----------------------------------------------------
    .carrousel-item:hover ~ .carrousel-item {
        transform: translate3d(100px, 0, 0);
    }

    .carrousel__contenedor:hover .carrousel-item {
        opacity: 0.5;
    }    

    .carrousel__contenedor:hover .carrousel-item:hover {
        transform: scale(1.5);
        opacity: 1;
    }

    .carrousel-item__img {
        width: 200px;
        height: 250px;
        object-fit: cover;
    }
    .carrousel-item__detalles {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
        font-size: 10px;
        opacity: 0;
        transition: 550ms opacity;
        padding: 10px;
        position: absolute;
        top: 165px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .carrousel-item__detalles:hover {
        opacity: 1;
    }
    
    .carrousel-item__detalles img {
        width: 22px;
        height: 22px;
        
    }
    .carrousel-item__detalles--titulo {
        font-size: 12px;
        color: white;
        height: 5px;
    }
    .carrousel-item__detalles--subtitulo {
        font-size: 10px;
        color: white;
    }```

Reto cumplido:

Siento que tengo que aprender mucho más el tema de las propiedades en CSS, hay momentos en que me he perdido realmente 😦

Les dejo una página (descarga gratis)
https://unsplash.com/

Aquí, ya te cobran por imagen. Además, tienen más contenido audiovisual.
https://envato.com

hola! yo use esta… la dejo compartida:

https://picsum.photos/

Logre que se viera así. No pensé que fuera tan sencillo hacer que una plataforma se viera asi.

Creo que la profesora coloco un reto algo dificil y ps para los que no entendiamos flex ps es mas dificil y no sabemos si hacerlo o so por que ella dijo que lo iba a explicar en otras clases igual se hizo pero me toco basarme en los aportes de mis compañeros.

Complemento un post similar, donde utilicé una source de Unsplash para cargar imágenes random, si no deseas definir una imagen en específico o evites buscarla:

<img src="https://source.unsplash.com/featured/?people,dog,car" alt="">

Después del ? indicas el tema de búsqueda que deseas que aparezca de forma “random”.

El link del source es:
https://source.unsplash.com/
Donde encontrarán más ejemplos.

Alguien sabe porque se me sombrea solo la mitad

.carousel {
    width: 100%;
    overflow: scroll;
    padding: 30px;
    position: relative;
}
.carousel__container {
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;
}
.carousel-item {
    background-color: palevioletred;
    width: 200px;   
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
    transition: 450ms all;
    transform-origin: center left;
    position: relative;
}
.carousel-item:hover ~ .carousel-item {
    transform: translate3d(100px, 0, 0);
}
.carousel__container:hover .carousel-item {
    opacity: 0.3;
}
.carousel__container:hover .carousel-item:hover {
    transform: scale(1.5);
    opacity: 1; 
}
.carousel-item__img {
    width: 200px;
    height: 250px;
    object-fit: cover;
}
.carousel-item__details {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    font-size: 10px;
    opacity: 1;
    transition: 450ms opacity;
    padding: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;    
}
.carousel-item__details img {
    height: 20px;
}
.carousel-item__details p{
    margin: 0px;
    color: white;
}
.carousel-item__details:hover {
    opacity: 1;
    color: white;
}
<code>

estuvo entretenido la clase , me guie por los portes de la clase,aunque me quedaron dudas.

<code> <!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">

    <title> carrouse 1</title>
  </head>
  <style >
  body {
    margin: 0px;
    font-family: 'Muli', sans-serif;
    background-color: #8F57FD;
  }
  .header {
    background-color: #8F57FD;
    width: 100%;
    height: 80px;
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .header__img {
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .header__menu {
    margin-right: 30px;
  }
  .header__menu ul {
    display: none;
    list-style: none;
    padding:0px;
    position: absolute;
    width: 100px;
    text-align: right;
    margin: 0px 0px 0px -14px;
  }
  .header__menu:hover ul, ul:hover {
    display: block;
  }
  .header__menu li {
    margin: 10px 0px;
  }
  .header__menu li a {
    color: white;
    text-decoration: none;
  }
  .header__menu li a:hover {
    text-decoration: underline;
  }
  .header__menu--profile {
    margin-right: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .header__menu--profile img {
    margin-right: 8px;
    width: 40px;
  }
  .header__menu--profile p{
    margin: 0px;
    color: white;
  }
  .main{
    height: :300px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  .main__title{
    color: white;
    font-size: 25px;
  }
  .input{
    background-color: rgba(255,255,255,0.1);
    border: 2px solid white;
    border-radius:25px;
    color:white;
    font-family: 'Muli', sans-serif;
    font-size:20px;
    height:50px;
    padding: :0px 20px;
    width:70%;
    outline:none;

  }
  ::placeholder{
    color:white;
  }


    .carousel{
      width:100%;
      overflow:scroll;
      padding:30PX;
      position:relative;
    }
    .carousel__container{
      white-space:nowrap;
      margin:70px 0px;
      padding:10px;

    }
    .carousel-item{  /* estilizar cada uno de los aire*/
      background-color:none;
      width:200px;
      height:250px;
      border-radius:20px;
      overflow: hidden;
      margin-right:10px;
      display:inline-block;
      cursor:pointer;
      transition:450ms all ;
      transform-origin:center left;
      position:relative;

    }
  .carousel-item:hover ~ .carousel-item{
      transform:translate3d(100px,0,0);
    }   /*seudo class*/
    .carousel__container:hover.carousel-item{
      opacity:0.3;

    }
    .carousel__container:hover .carousel-item:hover {
      transform:scale(1.5);
      opacity: 1;
    }
    .carousel-item__img{
      width:200px;
      height:250px;
      object-fit:cover;
    }
    .carousel-item__details{
      background:linear-gradient(to top,rgba(0,0,0,0.9)0%,rgba(0,0,0,0)100%);
      font-size:10px;
      opacity:1;
      transition: 450ms opacity;
      padding:10px;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      display:flex;
      justify-content:flex-end;
      flex-direction:column;

    }
  .carousel-item__details img{
    height: 15px;

  }
  .carousel-item__details p{
    margin:0px;
    color:white;
  }
  carousel-item__details:hover{
    opacity:1;
    color:white;
  }
  .carousel__title{
    color: white;
    font-size: 25px;
  }
  </style>
  <body>
    <header class="header">
      <img class="header__img" src="file:///C:/Users/Usuario/Documents/curso%20de%20%20fronted%20developer/logo-platzi-video-BW2.png" alt="">
      <div class="header__menu">
        <div class="header__menu--profile">
          <img src="file:///C:/Users/Usuario/Downloads/icons8-usuario-masculino-en-c%C3%ADrculo-50.png">
          <p>Perfil</p>
        </div>
        <ul>
          <li><a href="/">Cuenta</a></li>
          <li><a href="/">Cerrar Sesión</a></li>
        </ul>
      </div>
    </header>
    <section class="main">
      <h2 class="main__title">¿ que quieres escuchar hoy?</h2>
      <input class="input" type="text" placeholder="Buscar...">
    </section>

      <section class="carousel">
        <h2 class="carousel__title">Mi lista</h2>
        <div class="carousel__container">


          <div class="carousel-item">
            <img class="carousel-item__img" src="file:///C:/Users/Usuario/Downloads/pexels-aleksandar-pasaric-2341830.jpg" alt="">
            <div class="carousel-item__details">
              <div >
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/play-icon.png" alt="play">
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus">
          </div>
          <p class="carousel-item__details--titile"> titulo descriptivo</p>
          <p class="carousel-item__details--subtitle"> 2019 16+ 50 min</p>
        </div>
      </div>
          <div class="carousel-item">
            <img class="carousel-item__img" src="file:///C:/Users/Usuario/Downloads/pexels-ekaterina-3525419.jpg" alt="">
            <div class="carousel-item__details">
              <div class="">
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/play-icon.png" alt="play">
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus">
          </div>
          <p class="carousel-item__details--titile"> titulo descriptivo</p>
          <p class="carousel-item__details--subtitle"> 2019 16+ 50 min</p>
        </div>
          </div>
          <div class="carousel-item">
            <img class="carousel-item__img" src="file:///C:/Users/Usuario/Downloads/pexels-furknsaglam-3109671.jpg" alt="">
            <div class="carousel-item__details">
              <div>
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/play-icon.png" alt="play">
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus">
          </div>
          <p class="carousel-item__details--titile"> titulo descriptivo</p>
          <p class="carousel-item__details--subtitle"> 2019 16+ 50 min</p>
          </div>
          </div>
          <div class="carousel-item">
            <img class="carousel-item__img" src="file:///C:/Users/Usuario/Downloads/pexels-kira-schwarz-7763538.jpg" alt="">
            <div class="carousel-item__details">
              <div>
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/play-icon.png" alt="play">
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus">
            </div>
            <p class="carousel-item__details--titile"> titulo descriptivo</p>
            <p class="carousel-item__details--subtitle"> 2019 16+ 50 min</p>
          </div>
          </div>
          <div class="carousel-item">
            <img class="carousel-item__img" src="file:///C:/Users/Usuario/Documents/curso%20de%20%20fronted%20developer/images.jpg" alt="">
            <div class="carousel-item__details">
              <div>
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/play-icon.png" alt="play">
              <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus">
            </div>
            <p class="carousel-item__details--titile"> titulo descriptivo</p>
            <p class="carousel-item__details--subtitle"> 2019 16+ 50 min</p>
          </div>
          </div>
            <div class="carousel-item">
              <img  class= "carousel-item__img" src="file:///C:/Users/Usuario/Downloads/pexels-brady-knoll-6108427.jpg" alt="people">
              <div class="carousel-item__details">
                <div >
                  <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/play-icon.png" alt="play">
                  <img src="https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png" alt="plus">
                </div>
                <p class="carousel-item__details--titile"> titulo descriptivo</p>
                <p class="carousel-item__details--subtitle"> 2019 16+ 50 min</p>
              </div>
            </div>
          </div>
    </section>
  </body>
</html>


Esponja enloqueciste! jajajaokno

Usando una API de imagenes random con tamaño personalizado

                <article class="carrousel__item">
                    <img src="https://picsum.photos/200/250?random=1">
                </article>
                <article class="carrousel__item">
                    <img src="https://picsum.photos/200/250?random=2">
                </article>
                <article class="carrousel__item">
                    <img src="https://picsum.photos/200/250?random=3">
                </article>

Listo!

Algo que distingue a Platzi de otras plataformas es el aporte de los alumnos en los comentarios de cada módulo!

<section class="main">
      <h2 class="main__title">¿Qué quieres ver hoy?</h2>
      <input type="text" class="main__input" placeholder="Buscar..."/>
    </section>
    <section class="carousel">    
      <div class="carousel__container">

Alguien puede ayudarme?
Trato de unir el carrusel al archivo donde tengo el menu que hicimos anteriormente
pero cuando lo hago el input para buscar se deshabilita
revisando y probando me di cuenta que se debe a la seccion del carrusel con clase “carousel”, si la quito el buscador funciona en cambio si pongo ya sea un div o una seccion con esa clase se deshabilita

por aqui voy 😊

Otro recurso para Iconos: Flaticon

Me quedo de la siguiente forma 😃

Hola gente, me costó una tarde entera, pero hice funcionar el carousel, les dejo algunas imágenes y el código
por si a alguien le sirve.

import { FuncionesGenerales } from './funcionesGenerales.js'
const funciones = new FuncionesGenerales()


const carousel = class Carousel {
    constructor() {
        // this.carousel = document.querySelectorAll('.carousel')
        this.buttonsLeft = document.querySelectorAll('.caruosel__btn-left')
        this.buttonsRight = document.querySelectorAll('.caruosel__btn-right')
        this.items = document.querySelectorAll('.carousel__container')
        const that = this
        this.screenWidth = document.body.clientWidth

        window.addEventListener('resize', () => {
            that.screenWidth = document.body.clientWidth
        })
        this.listenButtons(this.buttonsLeft, this.buttonsRight)

    }
    //13

    listenButtons(buttonsL, buttonsR) {
        for (let i = 0; i < this.items.length; i++) {
            const items = this.items[i].childNodes
            const itemSize = 210
            const margenLateral = .10
            let carouselLimit = 0
            let position = 0

            funciones.elimindarNodosText(items)

            buttonsL[i].addEventListener('click', () => {
                const itemsEnPantalla = this.itemsEnPantlla(this.screenWidth - (this.screenWidth * margenLateral), itemSize)
                const desplazamiento = itemsEnPantalla * itemSize


                if (carouselLimit > 0) {
                    carouselLimit -= itemsEnPantalla
                    console.log(carouselLimit);
                    console.log(this.items[i].childNodes.length);
                    position += desplazamiento
                }

                this.moverItems(items, position)
            })

            buttonsR[i].addEventListener('click', () => {
                const itemsEnPantalla = this.itemsEnPantlla(this.screenWidth - (this.screenWidth * margenLateral), itemSize)
                const desplazamiento = itemsEnPantalla * itemSize


                if (carouselLimit < this.items[i].childNodes.length - itemsEnPantalla) {
                    carouselLimit += itemsEnPantalla
                    console.log(carouselLimit);
                    console.log(this.items[i].childNodes.length);
                    position -= desplazamiento
                }

                this.moverItems(items, position)
            })
        }
    }

    moverItems(items, position) {
        for (const item of items) {
            item.style.transform = `translate(${position}px, 0)`
        }
    }

    limiteCarousel(noItems, itemWidth) {
        return noItems * itemWidth
    }

    itemsEnPantlla(carouselVisible, itemWidth) {
        let itemsEnPantalla = carouselVisible / itemWidth
        let decimal = itemsEnPantalla
        decimal = decimal.toString()
        decimal = decimal.substr(2, 2)
        decimal = parseInt(decimal)

        if (decimal < 64) {
            itemsEnPantalla = Math.floor(itemsEnPantalla)
        }
        else {
            itemsEnPantalla = Math.ceil(itemsEnPantalla)
        }
        return Math.floor(itemsEnPantalla)
    }
}


new carousel()
export const FuncionesGenerales = class funciones {
    constructor() {
        
    }

    elimindarNodosText(node) {
        node.forEach((element) => {
            if (element.nodeType === 3 && !/\S/.test(element.nodeValue)) {
                element.parentNode.removeChild(element);
            }
        })
    }
}



<code>


Logré acomodar los botones aplicando flex

Les dejo amigos el Link del proyecto!

Saludos Totales!

Para cambiar la opacidad al ubicar el mouse en la imagen lo hice así:

  .carousel-item__details{
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
        font-size: 10px;
        opacity: 0;
        transition: 450ms opacity;
        padding: 10px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .carousel-item__details:hover{
        opacity: 1;
    }

Ya que el tamaño de la imagen a usar es el mismo de carousel-item es posible usar propiedades heredadas así:

.carousel-item__img{
	width: inherit;
}

Este es mi archivo CSS 😄

body {
    margin: 0px;
}
.carousel {
    width: 100%;
    overflow: scroll;
    padding: 30px;
    position: relative;
}

.carousel__container {
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;
}

.carousel-item {
    background-color: #8ecae6;
    width: 200px;
    height: 250px;
    border-radius: 25px;
    overflow: hidden;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
    transition: 450ms all;
    transform-origin: center left;
    position: relative;
}
.carousel-item:hover ~ .carousel-item {
    transform: translate3d(100px, 0, 0);
}

.carousel-container:hover .carousel-item {
    opacity: 0.3;
}

.carousel__container:hover .carousel-item:hover {
    transform: scale(1.5);
    opacity: 1;
}

.carousel-item__img {  
    width: 200px;
    height: 250px;
    object-fit: cover;
}

.carousel-item__details {
    background: linear-gradient(to top, rgba(0,0,0,0.9)0%, rgba(0,0,0,0)100%);
    font-size: 10px;
    opacity: 1;
    transition: 450ms opacity;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.carousel-item__details img{
    height: 15px;
}

.carousel-item__details p{
    margin: 0px;
}

.carousel-item__details:hover {
    opacity: 1;
    color: white;
    font-family: 'Open Sans', sans-serif;
}

.carousel-item__details img {
    width: 25px;
    height: 25px;
}

Mil gracias PLATZI he aprendido en cada clase, se que solo es cuestión de práctica y perseverancia el poder dominarlos, ya vemos avances. 😃

Ya está cogiendo forma 🚀

Les comparto mi solución y mi indentación por orden alfábetico.

Código HTML

<!DOCTYPE html>
<html lang=“es”>

<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">
<meta name="author" content="Cesar Paulino">
<title>Platzi Video</title>
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="css/platzi.css">
<link href="https://fonts.googleapis.com/css2?family=Muli&display=swap" rel="stylesheet">

</head>

<body>

<header class="header">
    <img class="header__img" src="images/logo-platzi-video.png" alt="Platzi Video">
    <div class="header__menu">
        <div class="header__menu--profile">
            <img src="images/user-mascarasteatro.png" alt="User">
            <p>Perfil</p>
        </div>
        <ul>
            <li><a href="#">Cuenta</a></li>
            <li><a href="#">Cerrar Sesión</a></li>
        </ul>
    </div>
</header>

<section class="main">
    <h2 class="main__title">¿Qué se te apetece disfrutar hoy?</h2>
    <input class="input" type="text" placeholder="Buscar....">
</section>

<section class="carousel">
    <h3>Mi lista</h3>
    <div class="carousel__container">
        <div class="carousel-item">
            <img class="carousel-item__img" src="/images/red.jpeg" alt="Conspiracion_Red">
            <div class="carousel-item__details">
                <div>
                    <img src="/images/play-icon.png" width="30" alt="Play">
                    <img src="/images/plus-icon.png" width="30" alt="Plus">
                </div>
                <p class="carousel__item__details--titlte">Antitrust</p>
                <p class="carousel__item__details--subtitules"> Conspiracion en la red: Hackers 3 </p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="carousel-item__img" src="/images/swordfish.jpeg" alt="Accesso_Autorizado">
            <div class="carousel-item__details">
                <div>
                    <img src="/images/play-icon.png" width="30" alt="Play">
                    <img src="/images/plus-icon.png" width="30" alt="Plus">
                </div>
                <p class="carousel__item__details--titlte">Swordfish</p>
                <p class="carousel__item__details--subtitules">Acesso Autorizado</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="carousel-item__img" src="/images/hacker1.jpg" alt="Hacker1">
            <div class="carousel-item__details">
                <div>
                    <img src="/images/play-icon.png" width="30" alt="Play">
                    <img src="/images/plus-icon.png" width="30" alt="Plus">
                </div>
                <p class="carousel__item__details--titlte">Hackers</p>
                <p class="carousel__item__details--subtitules">Piratas de la informática</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="carousel-item__img" src="/images/hacker_ame.jpeg" alt="Hackers">
            <div class="carousel-item__details">
                <div>
                    <img src="/images/play-icon.png" width="30" alt="Play">
                    <img src="/images/plus-icon.png" width="30" alt="Plus">
                </div>
                <p class="carousel__item__details--titlte">Hackers</p>
                <p class="carousel__item__details--subtitules">Amenaza en la Red</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="carousel-item__img" src="/images/piratas.jpeg" alt="Pirates of Silicon Valley">
            <div class="carousel-item__details">
                <div>
                    <img src="/images/play-icon.png" width="30" alt="Play">
                    <img src="/images/plus-icon.png" width="30" alt="Plus">
                </div>
                <p class="carousel__item__details--titlte">Pirates of Silicon Valley</p>
                <p class="carousel__item__details--subtitules">Los piratas de Silicon Valley</p>
            </div>
        </div>

    </div>

</section>

</body>

</html>

Código CSS

body {
background-color: #8f57fd;
font-family: ‘Muli’, sans-serif;
margin: 0px;
}

.header {
align-items: center;
display: flex;
justify-content: space-between;
height: 80px;
width: 100%;
}

.header__img {
margin-top: 10px;
margin-left: 10px;
width: 200px;
}

.header__menu {
margin-right: 30px;
}

.header__menu ul {
display: none;
list-style: none;
margin: 0px 0px 0px -14px;
padding: 0px;
position: absolute;
text-align: right;
width: 100px;
}

.header__menu:hover ul, ul:hover {
display: block;
}

.header__menu li{
margin: 10px, 0px;
}

.header__menu li a{
color: white;
text-decoration: none;
}

.header__menu li a:hover{
text-decoration: underline;
}

.header__menu–profile {
align-items: center;
cursor: pointer;
display: flex;
margin-right: 8px;
}

.header__menu–profile img {
margin-right: 8px;
width: 40px;
}

.header__menu–profile p {
color: white;
margin: 0px;

}

.main {
align-content: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
height:240px;
}

.main__title {
color: white;
font-size: 25px;
}

.input {
background-color: rgba(255, 255,255, 0.1);
border: 2px solid white;
border-radius: 35px;
color: white;
font-family: ‘Muli’, sans-serif;
font-size: 16px;
height: 40px;
outline: none;
padding: 0px 20px;
width: 70%;
}

::placeholder {
color: white;
}

.carousel {
overflow: scroll;
padding: 30px;
position: relative;
width: 100%;
}
.carousel, h3{
color: white;
}

.carousel__container {
margin: 70px 0px;
padding-bottom: 10px;
white-space: nowrap;
}

.carousel-item {
background-color: aqua;
border-radius: 20px;
display: inline-block;
cursor: pointer;
height: 310px;
margin-right: 10px;
overflow: hidden;
position: relative;
transition: 450ms all;
transform-origin: center left;
width: 190px;
}

.carousel-item:hover ~ .carousel-item {
transform: translate3d(100px, 0, 0);
}

.carousel__container:hover .carousel-item {
opacity: 0.3;
}

.carousel__container:hover .carousel-item:hover {
transform: scale(1.5);
opacity: 1;
}

.carousel-item__img{
height: 310px;
width: 190px;
object-fit: cover;
}

.carousel-item__details {
align-items:baseline;
bottom: 0px;
background: linear-gradient(to top,rgba(0, 0, 0, 0.9,) 0%, rgba(0, 0, 0, 0) 100%);
display: flex;
font-size: 10px;
flex-flow: column;
justify-content: flex-end;
opacity: 0;
transition: 450ms opacity;
padding: 10px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
color: white;
}

.carousel-item__details:hover {
opacity: 1;
}

.carousel-item__details p {
margin:2px 0px;
}

.carousel-item__details–title {
font-size: 12px;
}

De a poco va quedando.

Aquí dejo mi imagen, me costo trabajo hacer este ejercicio pero ya quedo sobre todo aplicando hover, no me percate de un error de sintaxis jejeje.

Es un poco frustrante la verdad , no se nada de programación y entre a la escuela de javascrip topándome con este curso que es el tercero, muchas de las cosas que explica la profesora pues no las entiendo y básicamente solo copio y pego, trato de modificar cosas por mi cuenta y ver como funcionan pero siento que esto va muy avanzado para ser el tercer curso de la escuela de javascrip.

No entendi esta parte

background: linear-gradient(to top rgba(0, 0, 0, 0.9)0%, rgba(0, 0, 0, 0)100%);

Asi va quedando

El cambio de la opacidad:

        .carousel-item__details:hover{
            opacity: 1;
        }

¡Tarea resuleta!

.carousel-item__details:hover {
    opacity: 1;
}

se supone que el – de BEM se utiliza para agregar un modificador y no un elemento. --title y --subtitle no son modificadores, creeria que son elementos diferentes. Modificadores como: prendido, apagado, activo, inactivo

        .carousel-item:hover .carousel-item__details {
            opacity: 1;
        }```

Hay otra página de iconos que es muy buena, se llama Flaticon, para que tengan más opciones

que cosa mas bonita por dios… Como no sabia que se podia hacer este tipo de cosas !!❣️❣️❣️❣️

Hola a todos
Por favor, podrían agregar el archivo completo incluyendo lo que dejaron de tarea?
Muchas gracias

En lo personal, considero que, me falta concatenar más mi código.

Es buena práctica que descarguen la imagen del tamaño mas cercano al que van a utilizar ya que si definimos un tamaño pequeño a una imagen muy grande el navegador tiene que descargar el total de esta y el rendimiento se puede ver afectado.

  • con la propiedad background-size: cover; la imagen se posiciona perfectamente independientemente de si le indicamos un tamaño o no.

Pillenlo pues

Otra página de iconos gratis muy buena es icomoon.io

Se ve genial!!

Así quedó mi Platzi Video
https://ibb.co/YDtZBTG

Que buena es la sensación de que el código va adaptando una forma muy bien visualmente hablando.
Supongo que para los pros en maquetado esta sensación es nula pues ya saben tal cuál quedará el resultado 😁🤣

Con esta página pueden generar imágenes aleatorias https://placeimg.com/

¡Hola!
Así va el carousel

Más o menos aunque puede mejorarse. Me ayudaron mucho los anteriores comentarios:

.carousel-item__img {
width: 200px;
height: 250px;
object-fit: cover;
}
.carousel-item__details {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
font-size: 10px;
font-family: ‘Muli’;
color: whitesmoke;
opacity: 0;
transition: 450ms opacity;
padding: 10px;
position: absolute;
top: 170px;
left: 0;
right: 0;
bottom: 0;
}
.carousel-item__details:hover {
opacity: 1;
}
.carousel-item__details img {
width: 20px;
height: 20px;
}
.carousel-item__details–title {
margin-block-start: 1px;
width: 180px;
height: 16px;
margin-bottom: 0px;
color: white;
font-size: 11px;
font-family: ‘Muli’, sans-serif;
}
.carousel-item__details–subtitle {
margin-block-start: 0px;
width: 180px;
height: 16px;
margin-bottom: 0px;
color: white;
font-size: 11px;
font-family: ‘Muli’, sans-serif;
}

😁😁

para la opacidad:

.carrousel-item__details:hover {
	opacity: 1;
}

Acá mi resultado, las imágenes utilizadas para el carrusel son de algunos de mis renders.
solo faltan centrar algunos elementos.

No me funciona la transición de la opacidad