Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
   
Konu: Html Player UI
#H4CK4L
*
avatar
#R00T
Durum: Çevrimdışı
Seviye Puanı: 42
Yaşam Puanı: 1,048 / 1,048
Deneyim: 95 / 100
Rep Sayısı: 1020
Mesaj Sayısı: 2983
Üyelik Tarihi: 04.05.2013
      
Yorum: #1
Html Player UI
22.12.2014 14:42
cyberizm

HTML:

PHP Kod:
<div class="app">
  <
nav>
    <
div class="menu-button"></div>
    <
ul class="playlist">
      <
li>Cyberizm Playlist</li>
      <
li class="active">Beggin' for Thread <span>Banks</span></li>
      <li>Brain <span>Banks</span></li>
      <li>Goddess <span>Banks</span></li>
      <li>Alibi <span>Banks</span></li>
      <li>Waiting Game <span>Banks</span></li>
    </ul>
  </nav>
  <div class="now-playing">
    <div class="overlay"></div>
    <div class="info">
      <div class="small">Now Playing</div>
      <h2>Beggin' 
for Thread</h2>
      <
h3><span>by</spanBanks</h3>
    </
div>
  </
div>
</
div

CSS
PHP Kod:
htmlbody
  background
-color#212121
  
color#ffffff
  
font-family'Raleway'sans-serif
.app
  position
relative
  margin
50px auto
  width
420px
  height
300px
  background
-color#ffffff
  
overflowhidden
  
&:hover .info
    opacity
1
    bottom
10px
  
&:hover .overlay
    opacity
1
nav
  position
relative
  z
-index10
  
&:hover .menu-button
    opacity
1
  
.menu-active
    opacity
!important
    
&:before, &:after
      transition
all .3s
    
&:before
      top
2px !important
      transform
rotate(45deg)
    &:
after
      top
2px !important
      transform
rotate(-45deg)
  .
menu-button
    position
absolute
    z
-index10
    top
20px
    left
20px
    width
30px
    height
20px
    cursor
pointer
    opacity
0.4
    transition
all .3s
    
&:before, &:after
      content
''
      
positionabsolute
      background
-color#ffffff
      
height4px
      width
30px
      transition
all .3s
    
&:before
      top
0
    
&:after
      top
10px
  ul
.playlist-active
    left
!important
  ul
.playlist
    position
absolute
    z
-index4
    top
0
    left
: -50%
    
width50%
    
height300px
    padding
60px 0 0 0
    box
-sizingborder-box
    transition
all .3s
    background
-colorrgba(#212121, 0.8)
    
li
      display
inline-block
      font
-size11px
      padding
10px 20px
      border
-bottom1px solid #323232
      
width100%
      
box-sizingborder-box
      
&:hover
        background
-colorrgba(#b6b6b6, 0.1)
      
&:first-child
        font
-weight600
        padding
10px
        
&:hover
          background
-colortransparent !important
      span
        
&:before
          content
'by'
          
padding-right3px
          font
-size10px
          color
#b6b6b6
    
li.active
      position
relative
      background
-colorrgba(#03a9f4, 0.3)
.now-playing-active
  background
-positionleft !important
.now-playing
  z
-index5
  position
absolute
  top
0
  left
0
  width
100%
  
height100%
  
background-color#727272
  
background-imageurl('http://dev.nuro.me/img/banks.jpg')
  
background-repeatno-repeat
  background
-sizecover
  background
-positioncenter
  transition
all .3s
  
.overlay, .info, .controls
    position
absolute
    transition
all .3s
  
.overlay
    z
-index3
    top
0
    left
0
    width
100%
    
height100%
    
opacity0.2
    background
-colorrgba(#212121,0.4)
  
.info
    z
-index5
    bottom
0
    right
0
    width
50%
    
padding10px 20px
    box
-sizingborder-box 
    opacity
0.1
    text
-alignright
    
.small
      font
-size10px
      color
#03a9f4
      
font-weight600
      text
-transformuppercase
    h2
      font
-size22px
      font
-weight600
      text
-transformuppercase
    h3
      font
-size16px
      text
-transformuppercase
      span
        font
-size12px 
JS
PHP Kod:
var menu = $('.menu-button'),
    
playlist = $('ul.playlist'),
    
current = $('.now-playing');

menu.on('click', function() {
  $(
this).toggleClass('menu-active');
  
playlist.toggleClass('playlist-active');
  
current.toggleClass('now-playing-active');
}) 

Çocukken her akşam yatmadan önce Tanrı'ya bana bir bisiklet vermesi için dua ederdim. Bir gün Tanrı'nın çalışma tarzının bu olmadığını anladım. Ertesi gün gittim kendime yeni bir bisiklet çaldım ve her akşam yatmadan önce Tanrı'ya günahlarımı affetmesi için dua ettim.
Alinti
Rep Verenler: #Ayar
KingSkrupellos
*
avatar
Hacktivist
Durum: Çevrimdışı
Seviye Puanı: 55
Yaşam Puanı: 1,363 / 1,363
Deneyim: 52 / 100
Rep Sayısı: 2721
Mesaj Sayısı: 6195
Üyelik Tarihi: 21.08.2013
     
Yorum: #2
Cvp: Html Player UI
22.12.2014 14:52
eline sağlık

We don't care what people think about us, we are proud of us, we not gonna change for anyone. I do not have own no website. No Contact. # KingSkrupellos # Cyberizm Digital Security Technological Turkish Moslem Army.

cyberizm

Alinti



1 Ziyaretçi
[-]
Sponsor Reklam