API tools faq
paste
Advertisement
altraviolence

page 06 - press play (playlist page ; v2 - dropdown)

altraviolence
Aug 29th, 2017
1,182
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.25 KB | None | 1 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!--
  4.  
  5. PRESS PLAY playlist page (06) by PEACHTHMS | peachthms.tumblr.com
  6. V1.0
  7. Version 2 - dropdown playlists and small album icon
  8.  
  9. - do not claim this page or any of the code as your own
  10. - do not redistribute this page or any of the code as your own
  11. - do not mix my code with another theme maker's code
  12. - do not remove or edit the credit in anyway; it must remain visible in the code and on the page
  13.  
  14. -->
  15.  
  16. <head>
  17.  
  18. <title>press play</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <meta charset="UTF-8">
  23. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  24.  
  25. <script src="https://use.fontawesome.com/976063c1b7.js"></script>
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600|Open+Sans" rel="stylesheet">
  28.  
  29. <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  30.  
  31. <style type="text/css">
  32.  
  33. * {
  34.     margin: 0;
  35.     padding: 0;
  36.     -webkit-font-smoothing: antialiased;
  37.     -moz-osx-font-smoothing: grayscale;
  38. }
  39.  
  40. body {
  41.     font-family: 'Montserrat', Helvetica, sans-serif;
  42.     color: #5d5d5d; /** change text colour **/
  43.     /** gradient background | change it to your own or delete if you don't want it **/
  44.     background: #f5c9ca; /** fallback background colour for older browsers **/
  45.     background: -moz-linear-gradient(top, #f5c9ca 0%, #a5abcd 100%); /* FF3.6-15 */
  46.     background: -webkit-linear-gradient(top, #f5c9ca 0%,#a5abcd 100%); /* Chrome10-25,Safari5.1-6 */
  47.     background: linear-gradient(to bottom, #f5c9ca 0%,#a5abcd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  48.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c9ca', endColorstr='#a5abcd',GradientType=0 ); /* IE6-9 */
  49.     line-height: 1.4em;
  50. }
  51.  
  52. a {
  53.     text-decoration: none;
  54.     color: #ffffff;
  55. }
  56.  
  57. a:hover {
  58.     color: #5d5d5d;
  59.     transition-duration: 0.5s;
  60.     -moz-transition-duration: 0.5s;
  61.     -webkit-transition-duration: 0.5s;
  62. }
  63.  
  64. header {
  65.     width: calc(100% - 20px);
  66.     padding: 10px;
  67.     text-align: center;
  68. }
  69.  
  70. header a {
  71.     font-size: 10px;
  72.     text-transform: uppercase;
  73.     margin: 0 10px;
  74. }
  75.  
  76. header h1 {
  77.     color: #ffffff;
  78.     line-height: 2em;
  79. }
  80.  
  81. section {
  82.     margin: 0 auto;
  83. }
  84.  
  85. article {
  86.     width: 400px;
  87.     margin: 150px auto;
  88.     padding: 30px;
  89.     display: flex;
  90.     justify-content: space-between;
  91. }
  92.  
  93. .side {
  94.     width: 100px;
  95.     text-align: center;
  96. }
  97.  
  98. .side img {
  99.     width: 75px;
  100. }
  101.  
  102. .side b, .side span  {
  103.     display: block;
  104.     margin: 25px 0;
  105. }
  106.  
  107. .side a {
  108.     padding: 10px 15px 10px 15px;
  109.     background-color: #f5c9ca; /** change play button background colour here **/
  110.     color: #ffffff; /** change play button text colour here **/
  111.     font-size: 11px;
  112.     font-weight: bold;
  113.     text-transform: uppercase;
  114.     letter-spacing: 0.1em;
  115.     border-radius: 28px;
  116.     -moz-border-radius: 28px;
  117.     -webkit-border-radius: 28px;
  118. }
  119.  
  120. .side a:hover {
  121.     background-color: #ffffff; /** change hover play button background colour here **/
  122.     color: #f5c9ca; /** change hover play button text colour here **/
  123. }
  124.  
  125. .box {
  126.     width: 250px;
  127.     padding: 10px;
  128.     font-size: 15px;
  129. }
  130.  
  131. .box b:hover {
  132.     cursor: help;
  133. }
  134.  
  135. .box ol {
  136.     display: none;
  137. }
  138.  
  139. .box li {
  140.     margin-bottom: 10px;
  141.     padding-left: 10px;
  142. }
  143.  
  144. .box li:hover {
  145.     list-style: none;
  146. }
  147.  
  148. .box li:hover:before {
  149.     content: '\f028';
  150.     font-family: FontAwesome;
  151.     margin-left: -25px;
  152.     padding-right: 25px;
  153. }
  154.  
  155. .box li:last-of-type {
  156.     margin-bottom: 0px;
  157. }
  158.  
  159. .box span {
  160.     display: block;
  161.     font-size: 13px;
  162.     font-family: 'Open Sans', sans-serif;
  163. }
  164.  
  165. .credit {
  166.         position: fixed;
  167.         bottom: 15px;
  168.         right: 15px;
  169.         font-size: 8px;
  170. }
  171.  
  172. .credit a {
  173.     color: #5d5d5d;
  174. }
  175.  
  176. </style>
  177.  
  178. </head>
  179.  
  180. <body>
  181.  
  182. <div class="credit"><a href="http://peachthms.tumblr.com" title="theme by peachthms">< / ></a></div>
  183.  
  184. <header>
  185.     <h1>press play</h1> <!-- change title here -->
  186.     <a href="#">home</a>
  187.     <a href="#">ask</a>
  188.     <a href="#">link</a>
  189. </header>
  190.  
  191.  
  192. <section>
  193.  
  194.     <article>
  195.         <div class="side">
  196.             <img src="http://placehold.it/200x200">
  197.             <span><a href="#">play</a></span> <!-- link your playlist -->
  198.         </div>
  199.  
  200.         <div class="box">
  201.             <b>playlist name</b>
  202.             <ol>
  203.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  204.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  205.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  206.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  207.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  208.             </ol>
  209.         </div>
  210.     </article>
  211.  
  212.     <article>
  213.         <div class="side">
  214.             <img src="http://placehold.it/200x200">
  215.             <span><a href="#">play</a></span> <!-- link your playlist -->
  216.         </div>
  217.  
  218.         <div class="box">
  219.             <b>playlist name</b>
  220.             <ol>
  221.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  222.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  223.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  224.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  225.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  226.             </ol>
  227.         </div>
  228.     </article>
  229.  
  230.     <article>
  231.         <div class="side">
  232.             <img src="http://placehold.it/200x200">
  233.             <span><a href="#">play</a></span> <!-- link your playlist -->
  234.         </div>
  235.  
  236.         <div class="box">
  237.             <b>playlist name</b>
  238.             <ol>
  239.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  240.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  241.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  242.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  243.                 <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  244.             </ol>
  245.         </div>
  246.     </article>
  247.  
  248.     <!-- to add more playlists
  249.  
  250.    copy and paste above </section>
  251.  
  252.    <article>
  253.        <div class="side">
  254.            <img src="http://placehold.it/200x200">
  255.            <span><a href="#">play</a></span>
  256.        </div>
  257.  
  258.        <div class="box">
  259.            <b>playlist name</b>
  260.            <ol>
  261.                <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  262.                <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  263.                <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  264.                <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  265.                <li><b>song name</b> <span>artist name &mdash; ablum name</span></li>
  266.            </ol>
  267.        </div>
  268.    </article>
  269.  
  270.    -->
  271.  
  272. </section>
  273. <script src="http://static.tumblr.com/cqvi50o/tR8ovfiy4/pl.js"></script>
  274. </body>
  275.  
  276. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!