Forked from Chris Nwamba's Pen Scotch Player.
Forked from Chris Nwamba's Pen Scotch Player.
A Pen by TimothyMwangi on CodePen.
Created
April 27, 2016 20:54
-
-
Save TimothyMwangi/4224debe5178af346400f44e87f01aee to your computer and use it in GitHub Desktop.
Scotch Player
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="public/css/global.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Exo+2:500' rel='stylesheet' type='text/css'> | |
| <title>Scotch Player</title> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://od.lk/s/ODFfNjQ3MDA2NF8/bundle.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| } | |
| body{ | |
| margin: 0; | |
| font-family: 'Exo 2', sans-serif; | |
| } | |
| .scotch_music{ | |
| position: relative; | |
| margin: 0 auto; | |
| margin-top: 20px; | |
| } | |
| .search div, .search input { | |
| width: 100%; | |
| } | |
| .search input { | |
| border: none; | |
| border-bottom: 2px solid rgb(243, 139, 114); | |
| outline: none; | |
| background: rgba(255, 255, 255, 0.8); | |
| padding: 5px; | |
| } | |
| .details h3{ | |
| text-align: center; | |
| padding: 50px 10px; | |
| margin: 0; | |
| color: white; | |
| } | |
| .player{ | |
| text-align: center; | |
| margin-top: 60px; | |
| } | |
| .player div{ | |
| display: inline-block; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| .player .player__backward button, .player .player__forward button{ | |
| background: transparent; | |
| border: 1px solid rgb(243, 139, 114); | |
| color: rgb(243, 139, 114); | |
| width: 75px; | |
| height: 75px; | |
| border-radius: 100%; | |
| font-size: 35px; | |
| outline: none; | |
| } | |
| .player .player__backward button{ | |
| border-left: none; | |
| } | |
| .player .player__forward button{ | |
| border-right: none; | |
| } | |
| .player .player__main button:hover, .player .player__backward button:hover, .player .player__forward button:hover{ | |
| color: rgba(243, 139, 114, 0.7); | |
| border: 1px solid rgba(243, 139, 114, 0.7); | |
| } | |
| .player .player__main { | |
| border: 1px solid rgb(243, 139, 114); | |
| } | |
| .player .player__main button { | |
| color: rgb(243, 139, 114); | |
| background: transparent; | |
| width: 75px; | |
| height: 75px; | |
| border: none; | |
| font-size: 35px; | |
| outline: none; | |
| } | |
| .progress{ | |
| text-align: center; | |
| margin-top: 100px; | |
| color: white; | |
| } | |
| .progress progress[value] { | |
| /* Reset the default appearance */ | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 390px; | |
| height: 20px; | |
| margin-left: 4px; | |
| margin-right: 4px; | |
| } | |
| .progress progress[value]::-webkit-progress-bar { | |
| background-color: #eee; | |
| border-radius: 2px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; | |
| } | |
| .progress progress[value]::-webkit-progress-value { | |
| background-color: rgb(243, 139, 114); | |
| border-radius: 2px; | |
| background-size: 35px 20px, 100% 100%, 100% 100%; | |
| } | |
| .footer{ | |
| color: white; | |
| position: absolute; | |
| bottom: 0px; | |
| width: 100%; | |
| background: #524C4C; | |
| } | |
| .footer p{ | |
| text-align: center; | |
| } | |
| .footer .logo{ | |
| height: 25px; | |
| width: auto; | |
| } | |
| .footer .soundcloud{ | |
| height: 25px; | |
| width: auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment