Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Dinámica: ¿Qué usarías? (Parte 1)

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Ubicación y creación de elementos

23/28
Recursos

Aportes 68

Preguntas 2

Ordenar por:

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

Ya lo hice responsive 😄

Link al código en github del reproductor
Link al proyecto en github pages 😃

Les recomiendo estas propiedades de css que se vieron en el curso de Responsive Design: mobile first. Con estas propiedades vamos a lograr tener un scroll horizontal con nuestras cards.

Propiedades para el padre:

overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;

Propiedad para el hijo:

scroll-snap-align: center;

Pueden colocar un margin a las cards para reflejar un espacio entre ellas. Algo que también me ayudo es establecer un mínino widht y height para que las cards no se contraigan.

Si quieres experimentar con las sombras, puedes hacerlo en el inspector de elementos abriendo el editor de sombras:

Jejeje, bueno, me demoré un poco haciendo mi reproductor, pero la práctica da la habilidad. Les dejo una imagen del reproductor terminado:

Aquí tienen el código: https://codepen.io/sxbino/pen/jOVXWzw

Y aquí un gif del diseño

Me gustó bastante el diseño que mostró la profesora y quise recrearlo para ver si era capaz de hacerlo, y lo logré 😁 #NuncaParesDeAprender 💚

no comprendo porque no escribe codigo

Para los que se pregunten que es el blur es la propiedad encargada de difuminar o desenfocar.

Para los que recien estamos aprendiendo, sin duda nos costo algo de tiempo!! Pero bueno, lo importante es practicar y aprender 😃

Les adjunto el link del repositorio

Este es mi avance con el diseño llevado a código. Aún faltan muchos detalles pero ahí vamos. Bienvenido los comentarios constructivos.


__

Codepen: https://codepen.io/fermolanoc/pen/yLVEJNp

Así quedó mi proyecto terminado.

Les dejo mi repositorio y un live view por si necesitan ver un poco cómo lo hice.
Además les quiero dejar dos extensiones para Visual Studio Code que me ayudan a de vez en cuando. CSS Flexbox Cheetset, te da una pequeña ayudar cada vez que usas alguna propiedad de flex.

Reto completado:
(Me gustaria obterner feedback. )
**Codigo: **https://codepen.io/paolojoaquin/pen/GRNGpVv

ya quedó xd!

music-player

No sabía que se podía activar el autocompletado en CodePen. Lo estaba necesitando, ya estaba cansado de escribir todo a mano. Dejo la documentación por si quieren activarlo también:

💚

Es el resultado de mi reproductor. Tan sólo el tener en cuenta la perspectiva de la luz y que las sombras y reflejos se ven afectados por ella, cambia demasiado el resultado.

Algunas cosas quedaron mejor que como las había planeado en figma, otras no las supe hacer como quería, pero estoy contento con el resultado 😄

3hrs pero aca esta!

El resultado de mi proyecto, figma fue una herramienta de gran utilidad🎨

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">
    <title>Document</title>
    <link rel="stylesheet" href="./clase23.css">
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <p>Playing now</p>
        </header>
        
        <section class="cards">
            <div></div>
        </section>
        
        <section class="progress-bar">
            <div class="bar_title">
                <h3>Safe and Sound</h3>
                <p>Capital Cities</p>
            </div>
            <div class="bar_container">
                <div class="bar_song"></div>
            </div>
            <div class="time">
                <p>2.33</p>
                <p>-1.21</p>
            </div>
        </section>
        
        <footer class="buttons">
            <div class="buttons-container">
                <div class="start"></div>
                <div class="back"></div>
                <div class="play"></div>
                <div class="next"></div>
                <div class="end"></div>
            </div>
        </footer>
    </div>
</body>
</html>

Css:

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap');

:root {
  --blue: #EAF0F8;
}
body{
    margin: 0;
    background:var(--blue) ;
    font-family: 'Roboto', sans-serif;
    color: #000;
    background-color: #48A1AF;
    letter-spacing: 1px;
    font-weight: 700;
}

.wrapper{
    display: grid;
    grid-template-rows: 80px 300px 150px 100px;
    height: 100vh;
    justify-content: center;
    align-content: start;
}
.header{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.header p{
    font-size: 1.2rem;
    margin: 0;
    margin-bottom: 4px;
}
.cards{
    display: flex;
    justify-content: center;
    align-items: center;
}
.cards div{
    width: 250px;
    height: 250px;
    border-radius: 20px;
    background-image: url('https://i1.sndcdn.com/artworks-000415518798-cvh6bg-t500x500.jpg');
    background-position: center;
    background-repeat: none;
    background-size: contain;
    box-shadow: 10px 10px 15px #000,-10px -10px 15px #fff;
}
.progress-bar{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bar_title{
    text-align: center;
}
.bar_title h3{
    font-size: 1.5rem;
    margin-bottom: 4px;
}
.bar_title p{
    font-size: 1rem;
    margin-top: 4px;
}
.bar_container{
    width: 298px;
    height: 6px;
    background-color: #c4c4c4;
    border-radius: 2px;
    position: relative;
    margin-top: 16px;
}
.bar_song{
    width: 180px;
    height: 6px;
    background-color: #11ffb8;
    border-radius: 2px;
    position: absolute;
}
.time{
    width: 298px;
    display: flex;
    justify-content: space-between;
}
.time p{
    margin-top: 4px;
    font-size: 0.6rem;
}
.buttons{
    display: flex;
    justify-content: center;
    align-items: center;
}
.buttons-container{
    width: 298px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.buttons .play{
    width: 62px;
    height: 62px;
    background-image: url('https://img.icons8.com/flat-round/344/play--v1.pnghttps://img.icons8.com/flat-round/344/play--v1.png');
    background-position: center;
    background-repeat: none;
    background-size: cover;
}
.buttons .back{
    width:  44px;
    height: 44px;
    background-image: url('https://img.icons8.com/flat-round/344/rewind--v1.png');
    background-position: center;
    background-repeat: none;
    background-size: cover;
}
.buttons .next{
    width: 44px;
    height: 44px;
    background-image: url('https://img.icons8.com/flat-round/344/fast-forward--v1.png');
    background-position: center;
    background-repeat: none;
    background-size: cover;
}
.buttons .start{
    width: 44px;
    height: 44px;
    background-image: url('https://img.icons8.com/flat-round/344/skip-to-start.png');
    background-position: center;
    background-repeat: none;
    background-size: cover;
}
.buttons .end{
    width: 44px;
    height: 44px;
    background-image: url('https://img.icons8.com/flat-round/344/end--v1.png');
    background-position: center;
    background-repeat: none;
    background-size: cover;
}

No me gusto el que hice antes asi que hice otro :3 que genial que se puedan aplicar efectos sobre los svg en figma C:

Mi resultado : )

Codigo

<body>
    <div class="main-app-container">
        <header class="header-container">
            <div class="header-container-content">
                <a href="#" class="header-container-content__return-icon">
                    <span class="material-icons">
                        &#xE2EA;
                    </span>
                </a>
                <p>Player</p>
                <a href="#" class="header-container-content__favorite-icon">
                    <span class="material-icons">
                        &#xE87D;
                    </span>
                </a>
            </div>
        </header>
        <main class="main-container">
            <p class="main-container-title">Listening to</p>
            <div class="image-music-container">
                <figure>
                    <img src="https://www.lollapaloozamania.com/wp-content/uploads/2018/11/twenty-one-pilots-blurryface-1021x1024.jpg" alt="img-song">
                </figure>
            </div>
            <div class="song-information">
                <p class="song-name">Panicking</p>
                <p class="song-authors">French Monton and Fivio Foreign</p>
            </div>
            <div class="time-song">
                <div class="time"></div>
                <div class="minutes">
                    <p>2:43</p>
                    <p>0.25</p>
                </div>
            </div>
            <div class="play-buttons">
                <div class="list">
                    <span class="material-icons">
                        &#xE03B;
                    </span>
                </div>
                <div class="previous">
                    <span class="material-icons">
                        &#xE045;
                    </span>
                </div>
                <div class="play">
                    <span class="material-icons">
                        &#xE037;
                    </span>
                </div>
                <div class="next">
                    <span class="material-icons">
                        &#xE044;
                    </span>
                </div>
                <div class="again">
                    <span class="material-icons">
                        &#xE043;
                    </span>
                </div>
            </div>
        </main>
        <div class="other-songs">
            <div class="other-songs-title">
                <p class="main-title">Recommendations</p>
                <p>Show more</p>
            </div>
                <div class="songs-container">
                    <article class="card-song">
                        <div class="card-song__title">
                            <div class="card-song-information">
                                <p>Oasis</p>
                                <p>JBalvin ft Bad Bunny</p>
                            </div>
                            <div class="play">
                                <span class="material-icons">
                                    &#xE037;
                                </span>
                            </div>
                        </div>
                    </article>
                    <article class="card-song">
                        <div class="card-song__title">
                            <div class="card-song-information">
                                <p>Oasis</p>
                                <p>JBalvin ft Bad Bunny</p>
                            </div>
                            <div class="play">
                                <span class="material-icons">
                                    &#xE037;
                                </span>
                            </div>
                        </div>
                    </article>
                    <article class="card-song">
                        <div class="card-song__title">
                            <div class="card-song-information">
                                <p>Oasis</p>
                                <p>JBalvin ft Bad Bunny</p>
                            </div>
                            <div class="play">
                                <span class="material-icons">
                                    &#xE037;
                                </span>
                            </div>
                        </div>
                    </article>
                    <article class="card-song">
                        <div class="card-song__title">
                            <div class="card-song-information">
                                <p>Oasis</p>
                                <p>JBalvin ft Bad Bunny</p>
                            </div>
                            <div class="play">
                                <span class="material-icons">
                                    &#xE037;
                                </span>
                            </div>
                        </div>
                    </article>
                    <article class="card-song">
                        <div class="card-song__title">
                            <div class="card-song-information">
                                <p>Oasis</p>
                                <p>JBalvin ft Bad Bunny</p>
                            </div>
                            <div class="play">
                                <span class="material-icons">
                                    &#xE037;
                                </span>
                            </div>
                        </div>
                    </article>
                    <article class="card-song">
                        <div class="card-song__title">
                            <div class="card-song-information">
                                <p>Oasis</p>
                                <p>JBalvin ft Bad Bunny</p>
                            </div>
                            <div class="play">
                                <span class="material-icons">
                                    &#xE037;
                                </span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
        <footer class="footer-container">
            <div class="footer-options">
                <span class="material-icons">
                    &#xE866;
                </span>
            </div>
            <div class="footer-options">
                <span class="material-icons">
                    &#xE2C6;
                </span>
            </div>
            <div class="footer-options">
                <span class="material-icons">
                    &#xE8B6;
                </span>
            </div>
        </footer>
    </div>
</body>
:root{
    --primary-color:#955ab9;
    --secondary-color:#b79bcb;
    --black:#292929;
    --grey:#b5b4b4;
    --white:#ffffff;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html{
    font-size: 62.5%;
    font-family: 'Poppins', sans-serif;
}
.main-app-container{
    display: grid;
    grid-template-rows: max-content min-content auto min-content;
    height: 100vh;
}
.header-container{
    padding: 20px 20px;
    height: 100px; 
}
.header-container-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    
}
.header-container-content p{
    font-size: 1.6rem;
    font-weight: bold;
}
.header-container-content__favorite-icon,
.header-container-content__return-icon{
    border-radius: 5px;
    background-color: #d7d6d6;
    width: 30px;
    height: 30px;
    background: #ededed;
    box-shadow:  3px 3px 5px #c0c0c0,
    -3px -3px 5px #ffffff;
}
.header-container-content__favorite-icon span{
    color: rgb(255, 0, 0);
    padding: .4rem;
}
.header-container-content__return-icon span{
    color: var(--black);
    padding: .4rem;
}

/*---------------------------------*/
.main-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    place-items: center;

    text-align: center;
    padding: 10px 0 30px 0;
    border-radius: 50px 50px 0 0;
    background: #f5f5f5;
    box-shadow:  6px -6px 15px #e4e4e4,
                 -6px 6px 15px #ffffff;
}
.main-container-title{
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--black);
}
.image-music-container{
    width: 250px;
}
.image-music-container img{
    border-radius: 20px;
    max-width: 100%;
    object-fit: cover;
}
.song-information .song-name{
    margin-bottom: 4px;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--black);
}
.song-information .song-authors{
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: var(--grey);
}
.time-song{
    width: 85%;
}
.time-song .time{
    position: relative;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 20px;
    margin-bottom: 4px;
}
.time-song .time::before{
    position: absolute;
    top: calc(-50% - 4px);
    left: calc(50%);
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 4px solid var(--white);
    background-color: var(--primary-color);
    z-index: 100;
}
.time-song .time::after{
    position: absolute;
    right: 0;
    content: "";
    width: calc(50%);
    height: 4px;
    border-radius: 20px;
    background-color: var(--grey);
}
.minutes{
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: var(--grey);
}
.play-buttons{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 85%;
    max-width: 800px;
    min-width: 300px;
    margin-top: 20px;
}
.play-buttons div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #e8e8e8;
    box-shadow:  5px 5px 11px #c5c5c5,
             -5px -5px 11px #ffffff;
    color: var(--black);
}
.play-buttons span{
    font-size: 2.4rem;

}
.play-buttons .play{
    color: var(--primary-color);
}
/********************/
.other-songs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;   
    width: 100%;
    overflow: hidden;
    margin-bottom: 50px;
}
.other-songs-title{
    width: 85%;
    display: flex;
    justify-content: space-between;
}
.other-songs-title .main-title{
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.songs-container{
    max-width: 85%;
    display: flex;
    flex-direction: row;
    overflow: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: proximity;
    gap: 20px;
    
}
.title-other-songs{
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
.title-other-songs .main-title{
    font-size: 1.2rem;
    font-weight: bold;
}
.card-song{
    position: relative;
    width: 130px;
    height: 150px;
    flex-shrink: 0;
    background-image: url("https://www.lahiguera.net/musicalia/artistas/j_balvin/disco/9986/j_balvin_oasis___con_bad_bunny-portada.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
}
.card-song .card-song__title{
    position: absolute;
    bottom: 10px;
    display: flex;
    width: 100%;
    background: rgba( 255, 255, 255, 0.3 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    padding: 0 4px;
    color: var(--white);
    font-size: 1.2rem;
    line-height: 14px;
}
.card-song__title .play{
    display: flex;
    flex-shrink: 0;
    align-self: center;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--primary-color);
}
/*******************/
.footer-container{
    position: fixed;
    bottom: 0;
    justify-self: center;
    width: 100%;
    height:50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 50px 50px 0 0;
    background: #f5f5f5;
    box-shadow:  6px -6px 15px #e4e4e4,
             -6px 6px 15px #ffffff;
}
.footer-container span{
    color: var(--secondary-color);
}

@media (min-width:700px) {
    .play-buttons{
        max-width: 700px;
    }
}
@media (min-width:1050px) {
    .songs-container{
        overflow: auto;
    }
    .other-songs-title{
        max-width: 900px;
    }
}```

Finalizado!!

Sitio para crear el Neumorphism : https://neumorphism.io/#e0e0e0

Pero que profesora 😒

aca mi resultado, me fui por lo simple pero he quedado bastante satisfecho:

Reto cumplido.

😄

Tarde medio día pero lo logré. Jajaja
Adjunto imagen y códigos.

https://github.com/chuckiemaru/play_player/tree/master

!

<!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">
    <title>Reproductor de musica</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="table.css" media="(min-widht: 330px)">
</head>
<body>
    <div class="wrapper">
        <header class="header">
          <p>Playing now</p>
        </header>
      
        <section class="cards">
            <figure class="cards-album">
                <img src="./imagens/50cent.jpeg" alt="Album">
            </figure>
        </section>
      
        <section class="progress-bar">
            <div class="bar"></div>
        </section>

        <section class="progress-number">
            <p class="numbers">03:19</p>
            <p class="numbers">-4:21</p>   
        </section>

        <section class="text-info">
            <p class="text">Disco inferno</p>
            <figure class="icons-control">
                <img src="./icons/Shuffle-play.svg" alt="shuffle">
                <img src="./icons/Repeat-play.svg" alt="repeat">
                <img src="./icons/Heart.svg" alt="heart">
            </figure>
        </section>
        <section class="text-song">
                <p class="text-artist">50 Cent</p>
        </section>
        <footer class="buttons">
           <article class="circles-container">
               <div class="circle-container-small"></div>
           </article>
           <article class="circles-container-big">
            <div class="circle-container-big"></div>
        </article>
        <article class="circles-container-medium">
            <div class="circle-container-medium"></div>
        </article>
        </footer>
      </div>
      
</body>
</html>
:root {
    --blue: #13202c;
    --grey: rgb(138, 136, 136);
    --white: white;
  }

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

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


.wrapper {
    background-color: var(--blue);
    display: grid;
    grid-template-rows: 60px 300px 20px 20px 35px 20px 105px;
    height: 100vh;
  }
  
  .header {
    background-color: var(--blue);
    min-width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header p{
     max-width: 900px;
     color: var(--white);
     font-size: 1.3rem;
     font-weight: 100;
     
  }
  
  .cards{
    background-color: var(--blue);
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

   .cards-album img{
      width: 250px;
      height: 250px;
      border-radius: 20px;
      box-shadow:  10px 10px 15px #000;
  }

  .progress-bar{
      background-color: var(--blue);
      width: 100%;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      
  }

  .bar{
      background: linear-gradient(to right, rgb(247, 248, 247) 0%, rgb(250, 252, 250) 50%, rgb(138, 136, 136) 8%, rgb(138, 136, 136) 100%);
      width: 280px;
      height: 6px;
      border-radius: 20px;
      box-shadow: 2px 3px 4px rgb(7, 7, 7);
      
  }

.progress-number{
    background-color: var(--blue);
    width: 87%;
    display: flex;
    justify-content: space-between;
    margin-left: 21px;
}


.numbers{
    
    color: var(--white);
    display: flex;
    font-size: 1.0rem;
    font-weight: 100;
}

.text-info{
  background-color: var(--blue);
  width: 88%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-left: 21px;
  align-items: center;
}

.text{
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 600;
}

.icons-control img{
  width: 20px;
  height: 20px;
  margin: 5px;
}

.text-song{
  background-color: var(--blue);
  width: 88%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  margin-left: 21px;
}

.text-song p{
  color: var(--grey);
}

.buttons{
  background-color: var(--blue);
  width: 100%;
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.buttons .circles-container{
  background-color: rgb(56, 55, 55);
  width: 40px;
  height: 40px;
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 4px rgb(7, 7, 7);
}

.circles-container .circle-container-small{
  width: 50px;
  height: 50px;
  background-image: url('./icons/Prev.svg');
  background-repeat: no-repeat;
  margin-left: 9px;
  margin-top: 27px;
}

.buttons .circles-container-big{
  background-color: rgb(173, 170, 170);
  width: 70px;
  height: 70px;
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 4px 3px 4px rgb(7, 7, 7);
}

.circles-container-big .circle-container-big{
  width: 80px;
  height: 80px;
  background-image: url('./icons/Pause.svg');
  background-repeat: no-repeat;
  margin-left: 18px;
  margin-top: 41px;
}

.buttons .circles-container-medium{
  background-color: rgb(56, 55, 55);
  width: 40px;
  height: 40px;
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 4px rgb(7, 7, 7);
}

.circles-container-medium .circle-container-medium{
  width: 50px;
  height: 50px;
  background-image: url('./icons/Next.svg');
  background-repeat: no-repeat;
  margin-left: 11px;
  margin-top: 26px;
}







Asi quedo mi practica

Reto.

Ser emo fue más que una etapa.

Así quedo mi reto, cualquier feedback bienvenido

Repositorio: https://github.com/dcuevas24/Music_Player
Web: https://dcuevas24.github.io/Music_Player/

Aquí el resultado de mi proyecto, aun le faltan algunas cosas por pulir y pienso hacerlo en un futuro. 😁
Cualquier critica es bienvenida. 🤗
.

.
GHPages 📄
Repositorio 📖

Bueno, yo quise hacer algo diferente 😃

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">
  <title>iPod</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="main">
    <section class="display">
      <header class="header">
        <p>Now playing</p>
        <img src="smartphone-charger.svg" alt="Battery icon">
      </header>
      <div class="info">
        <div><img src="guns-appetite-for-destruction.jpg" alt="Rocket Queen cover"></div>
        <div class="song_info">
          <h2>Rocket Queen</h2>
          <h3>Guns N' Roses</h3>
        </div>
      </div>
      <div class="musicTime">
        <p>00:00</p>
        <figure class="rectangle"></figure>
        <p>06:14</p>
      </div>
    </section>
    <section class="buttons">
      <p class="top">Menu</p>
      <button class="left"></button>
      <div class="circle"></div>
      <button class="right"></button>
      <button class="bottom"></button>
    </section>
  </main>
</body>
</html>
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /*display: grid;
  place-items: center;*/
}

.main {
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 480px;
  height: 700px;
  background-color: #787878;
  border-radius: 20px;
  place-items: center;
}

.main .display {
  border: 5px solid black;
  width: 90%;
  height: 70%;
  border-radius: 5px;
  background-color: white;
  display: grid;
  grid-template-rows: 10% 75% 15%;
}

.main .display .header {
  background-color: #e1e1e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main .display .header p {
  width: fit-content;
  margin-inline-start: 5px;
}

.main .display .header img {
  width: 28px;
  margin-inline-end: 5px;
}

.main .display .info {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.main .display .info img {
  width: 140px;
}

.main .display .musicTime {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.main .display .musicTime .rectangle {
  width: 55%;
  height: 40%;
  background-color: #829ed3;
  box-shadow: 0px 2px 5px 1px #5d97d2;
}

.main .buttons {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #2c2c2c;
  display: grid;
  place-items: center;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
  ". top ."
  "left circle right"
  ". bottom .";
}

.main .buttons .top {
  grid-area: top;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

.main .buttons .left,
.main .buttons .right,
.main .buttons .bottom {
  background-color: transparent;
  border: none;
  font-size: 3rem;
}

.main .buttons .circle {
  grid-area: circle;
  background-color: #4c4c4c;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.main .buttons .left {
  grid-area: left;
}

.main .buttons .right {
  grid-area: right;
}

.main .buttons .bottom {
  grid-area: bottom;
}


Pruebenlo acáa

El código en github acá

Y seguimos aprendiendo y practicando. Gracias Platzi!!! 💚💚

reto completado:
------------------codigo
l)

Este es mi reto completado, aún hay muchas cosas por mejorar pero es un avance para mi aprendizaje

les comparto como me esta quedando y ademas les dejo una herramienta nueva para que puedan codear en la nube similar a visual estudio code ademas lo pueden hacer desde una tableta
https://codesandbox.io/s/boring-edison-g29g9?file=/estilos.css

Figma (No pude poner iconos aqui jaja)

Codigo

Mi github por si quieren revisar el codigo

👌

Neumorphismo excelente información brindada

Comparto como va quedando el mío 😃

El audio al final de la clase se rompe un poco : (

Bueno, así quedó el mío

He conseguido terminar el reto !! Pero aún no he estudiado Java Script, así que me tocará esperar para poder hacer que mi reproductor funcione. Me ha gustado mucho que se nos rete a terminar el trabajo. De hecho me he dado cuenta de cosas que en el código puedo mejorar y ahorrarme ciertos pasos, según he ido avanzando y leyendo de nuevo lo que he creado. Enhorabuena por el curso y por retarnos a conocer el Neomoprhism !!

![](

Les comparto mi resultado
Pueden verlo en vivo aquí.
Y el código lo pueden encontrar aquí.

Código en GitHub
Página del proyecto

Reto completado!

Figma:

CSS:

Proyecto terminado 💚
github-pages

Lo que ustedes diseñen lo pueden llevar a código directamente desde Figma. Simplemente seleccionan el elemento (por ejemplo una Card) y en el panel derecho hacia la parte de arriba seleccionan la opción “Inspect” -> allí encontrarán el código css generado según los estilos que ustedes hayan definido.

En el ejemplo de esta clase, no necesitan un sitio web adicional pues no tendría sentido entonces diseñar nada en Figma si no vamos a poder usarlo fácilmente.
Solo copian ese código CSS generado en Figma y lo llevan a su proyecto y listo.

Aquí está mi reto, aún siento que me falta avanzar mucho en la parte del diseño pero sigo practicando para mejorar

Cuando quieran probar codigo fuera de su editor y quieran instalar alguna libreria solo para “jugar con ella” antes de usarla al 100% les recomeindo Codesandbox => {

https://codesandbox.io/

}

💚