Ubicación y creación de elementos

Ya lo hice responsive 😄

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

David Ceja Zapata

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.

Danelia Sanchez Sanchez

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

Sabino Fernández

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 💚

Jonh Pertuz pertuz

no comprendo porque no escribe codigo

Gonzalo Ceron Denetro

Código

Sebastian Heredia Rojas

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

Kevin Jefferson Lopez De la O

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

Fernando Molano Castrillón

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

Screen Shot 2021-03-03 at 2.13.39 AM.png

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

Eduardo Reyes

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.

Paolo Joaquin Pinto Perez

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

Brandon James Huamán Mallcco

ya quedó xd!

music-player

Captura de pantalla 2021-08-13 202900.jpg

Patricio Manuel Ugarte

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:

https://blog.codepen.io/documentation/autocomplete/

Cesar Ochoa Bulbarela

hace 2 meses

💚

Screen Shot 2022-03-14 at 12.35.08 a.m..png

Aldo Juarez Virgen

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.

Brandon Argel Verdeja Dominguez

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 😄

Facundo Esteban Gasco

hace 3 meses

3hrs pero aca esta!

Hugo Felipe Riveros Fajardo

hace 3 meses

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

Hugo Herrera

hace 3 meses

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;
}

David Eduardo Perez Hernandez

hace 2 meses

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:

Ieesus Steve Chumpitaz Castillo

hace 2 meses

Juesgape

Ulises Leonel Roldán Matamoros

Mi resultado : )

Daniel Santiago Rodriguez Pineda

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;
    }
}```

Enrique Reyes

hace 5 meses

Finalizado!!

Juan Esteban Galvis

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

Daniel Felipe Celis Fernández

BENJAMIN ALLEN RAMIREZ HORNA

hace 4 días

Pero que profesora 😒

Sebastián Peña

hace 6 días

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

Diego Fabian Rico Castro

Reto cumplido.

Daniel Alejandro Castellanos Aroca

hace 4 meses

😄

Luis Gómez ojeda

hace 5 meses

Carlos Mendieta

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

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

Robbie Ernesto Vega Perez

Omar Barragán moreno

Captura de Pantalla 2021-11-15 a la(s) 9.09.37.png

<!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;
}

Sebastian Pedroza

Griger Ratia

hace 7 meses

Cristian Felix Iñiguez Porcel

Les muestro mi diseño
https://cristianiniguez.github.io/curso_diseno_web_css_grid_flexbox/

Jahiker Rojas

Asi quedo mi practica

Hugo Alberto Torrent Irrazabal

Reto.

Samuel Gustavo Pérez Flores

Ser emo fue más que una etapa.

Ivan Daniel Cuevas

https://jairyara.github.io/cssGridLayout/

Así quedo mi reto, cualquier feedback bienvenido

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

Jair Yara

hace 10 meses

Mi reto

Jonathan Edwin Gutiérrez Olvera

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 📖

Miguel Ángel Reyes Moreno

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;
}

Tatiana Giselle Ahumada Lobo

Santiago López Daza

Pruebenlo acáa

El código en github acá

Pedro Alexander Perez

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

stephano yparraguirre

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

Shuriko Alzate

Henry Agustín

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

Cristian Bécquer Bernardo Gutierrez

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

Javier Estuardo González Borja

Figma (No pude poner iconos aqui jaja)

Codigo

Mi github por si quieren revisar el codigo

Luis Angel Castro Duran

https://codepen.io/castrodurl/pen/abBRxyX

Naldo Duran

👌

AtochePascual

Neumorphismo excelente información brindada

Tonatiuh García Ríos

Comparto como va quedando el mío 😃

Jose Luis Bedoya

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

Alejandro Alberto Pachas Chavez

Bueno, así quedó el mío

Francisco86

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 !!

![](

Angel David Osorio Leyva

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

Alejandro Ruiz Melo

William Camilo Guzmán Espitia

Código en GitHub
Página del proyecto

Eduardo Rodríguez Prado

Reto completado!

Figma:

CSS:

Ana Karen Ruiz Barrios

Proyecto terminado 💚
github-pages

Fernando Molano Castrillón

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.

Fernando Juarez Baca

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

Alex Leonardo Rodriguez Carvajal