Introducción al curso
Presentación y bienvenida al curso de Frontend Developer
HTML y CSS: definición y usos
¿Qué son y para qué nos sirven HTML y CSS?
DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
5 tips para aprender CSS
Conceptos iniciales de HTML
Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos
Anatomía de un Documento HTML: DOCTYPE, html, head y body
Funciones de las etiquetas HTML más importantes
La importancia del código semántico
Tipos de errores en HTML, debugging y servicio de validación de etiquetas
Reto 1: Organiza el siguiente bloque de código de forma semántica
Conceptos iniciales de CSS
Anatomía de una declaración CSS: Selectores, Propiedades y Valores
Tipos de selectores, pseudo-clases y pseudo-elementos
Modelo de caja
Valores relativos y absolutos
Displays en CSS
Funciones de las propiedades CSS más usadas
Posicionamiento en CSS
Arquitectura CSS
¿Qué son y para qué nos sirven las arquitecturas CSS?
OOCSS, BEM, SMACSS, ITCSS y Atomic Design
Reto 2: Identifica el error de arquitectura del siguiente bloque de código
Construcción de componentes
¿Qué es un componente? Analicemos nuestros diseños
Estructura con HTML y BEM de un menú desplegable
Estilizando nuestro menú desplegable con CSS
Creación de un buscador
Creación de un carousel de imágenes con CSS: Estructura principal
Creación de un carousel de imágenes con CSS: Detalle de cada item
Maquetación y diseño responsivo
Flexbox
Nuestro nuevo sistema de layout: CSS Grid
Maquetación de la pantalla de login: Estructura HTML
Maquetación de la pantalla de login: Estilización con CSS
Estilización de inputs y footer en la pantalla de login
Media queries
Maquetación de la pantalla principal
Reto 3: Maquetación de la pantalla de Not Found
Preprocesadores
¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?
Instalación de SASS y configuración inicial
Hablemos de variables, herencia, anidamiento, operadores y más
Accesibilidad
La accesibilidad y nuestra responsabilidad como desarrolladores
Mejorando la accesibilidad de nuestra página de inicio
Conclusión
Conclusión del curso y paso siguiente
Bonus
Visualización de un botón usando storybook para HTML
Flexbox
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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
Logo user:
https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/user-icon.png
Logo play:
https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/play-icon.png
Logo plus:
https://raw.githubusercontent.com/teffcode/Platzi-Frontend-Dev/master/assets/plus-icon.png
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:
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;
}
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:
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
.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;
}
Acá dejo el código: https://github.com/behagoras/curso-frontend/blob/master/carousel-2.html
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:
<!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
/*/ 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:
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
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;
}
Hello guys, I just wanna share my carousel component so far.
https://github.com/borisbikes/platzi/blob/main/JSChallenge/frontend-developer/classes/clase27-carousel_videos-improved.html
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.
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
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.