Reproduccion

se agrego pagina de reproduccion
andjrua · Mar 21, 2018 · 5ed8c00 · 5ed8c00
1 parent 614d582
commit 5ed8c00
Show file tree

Hide file tree

Showing 8 changed files with 4,072 additions and 2 deletions.
diff --git a/css/estilos.css b/css/estilos.css
diff --git a/fonts/icomoon.eot b/fonts/icomoon.eot
diff --git a/fonts/icomoon.svg b/fonts/icomoon.svg
diff --git a/fonts/icomoon.ttf b/fonts/icomoon.ttf
diff --git a/fonts/icomoon.woff b/fonts/icomoon.woff
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
 </head>
 <body>
     <header class="header relative border-bottom">
-        <a href="" class="button-menu">*</a>
+        <a href="" class="button-menu icon-menu"></a>
         <nav class="menu">
             <ul class="list">
                 <li class="ite">
@@ -38,6 +38,44 @@
             </span>
         </div>
     </header>
+    <section class="playing small center-block">
+        <figure class="image relative">
+            <img src="img/songs/equis.jpg" width="320" height="320" alt="X(Equis) Nicki Jam ft J. Balvin">
+            <div class="actions padding right-text">
+                <a href="" class="action icon-plus"></a>
+                <a href="" class="action icon-heart"></a>
+                <a href="" class="action icon-share"></a>
+            </div>
+        </figure>
+        <div class="padding">
+            <div class="progress">
+                <span class="min">1:12</span>
+                <div class="total">
+                    <div class="state">
+                        <div class="circle">
+
+                        </div>
+                    </div>
+                </div>
+                <span class="max">4:05</span>
+            </div>
+            <div class="description center-text border-bottom">
+                <p class="name">
+                    X (Equis)
+                </p>
+                <p class="author">
+                    Nicki Jam ft J. Balvin
+                </p>
+            </div>
+            <div class="play center-text padding-tb">
+                <a href="" class="action gray icon-backward"></a>
+                <a href="" class="action gray icon-play2"></a>
+                <a href="" class="action gray icon-forward2"></a>
+                <a href="" class="action gray icon-shuffle"></a>
+                <a href="" class="action gray icon-volume-low"></a>
+            </div>
+        </div>
+    </section>
     <section class="container">
         <article class="song">
             <figure class="image">

diff --git a/stylus/estilos.styl b/stylus/estilos.styl
@@ -1,6 +1,8 @@
 @import "normalize.styl"
+@import "fonts.styl"
 gris_oscuro = #333333
 gris_claro = #818181
+rojo = red
 
 a
     text-decoration none
@@ -14,6 +16,11 @@ figure
     top 50%
     margin-top -10px
     left 0.5rem
+    color gris_oscuro
+.center-block
+    margin 0 auto
+.center-text
+    text-align center
 .container
     padding 1.4rem
     font-size 0
@@ -47,3 +54,68 @@ figure
         margin-right 0
     p 
         margin 0.5rem 0
+.playing
+    &.small
+        width 20rem
+.padding-tb
+    padding 1rem 0
+.action
+    color white
+    margin-right .5rem
+    font-size 1.2rem
+    &:last-child
+        margin-right 0
+    &.gray
+        color gris_oscuro
+.actions
+    position absolute
+    background rgba(white,.3)
+    bottom 0
+    left 0
+    right 0
+.relative
+    position relative
+.padding
+    padding 1rem
+.right-text
+    text-align right
+img 
+    vertical-align top
+.progress
+    margin 1rem 0
+    position relative
+    .min
+    .max
+        font .8rem
+        top -5px
+        position absolute
+    .min
+        left 0
+    .max
+        right 0
+    .total
+        margin 0 auto
+        height 5px
+        background gris_claro
+        border-radius 5px
+        width 75%
+    .state
+        position relative
+        height 5px
+        background rojo
+        border-radius 5px
+        width 30%
+    .circle
+        position absolute
+        right 0
+        top -2px
+        width 10px
+        height 10px
+        border-radius 50%
+        background gris_oscuro
+.play
+    .action
+        font-size 1.7rem
+
+
+