Playlist UI for Rodeo 004

Developer
Tim Pietrusky
Size
6,848 Kb
Views
32,384
  1. Playlist UI for Rodeo 004 Previews
  2. Playlist UI for Rodeo 004 HTML Codes
  3. Playlist UI for Rodeo 004 CSS Codes
  4. Playlist UI for Rodeo 004 JS Codes

How do I make an playlist ui for rodeo 004?

My entry for the CodePen Pattern Rodeo 004: CSS Regions.I used CSS regions to split the playlist on "big" (>= 1023px width) screens. . What is a playlist ui for rodeo 004? How do you make a playlist ui for rodeo 004? This script and codes were developed by Tim Pietrusky on 12 October 2022, Wednesday.

Playlist UI for Rodeo 004 Previews
IQ Test

Playlist UI for Rodeo 004 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playlist UI for Rodeo 004</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700);
/************************************************************* * Mixins */
/* * Get the content from <CODE>$from</CODE> */
/* * Insert the content from <CODE>$from</CODE> * into <CODE>$into</CODE> */
/* * display: flex; */
/* * Mixin: flex: grow-factor; * The $width is for older implementations */
/* * Direction of flexbox e.g. * [row|row-reverse|column|column-reverse] */
/* * Re-order flex elements */
/* * Media queries */
/************************************************************* * Variables */
/************************************************************* * Code */
* { box-sizing: border-box;
}
body { margin: .5em; padding: 0; background: #000 url(https://subtlepatterns.com/patterns/dirty_old_shirt.png); color: #ccc; font: 1em/1.45em sans-serif; counter-reset: playlist;
}
@media (max-width: 1650px) { body { font-size: .9em; }
}
article { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 34em;
}
@media (max-width: 1650px) { article { height: 40em; }
}
@media (max-width: 1023px) { article { -webkit-box-direction: column; -moz-box-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
}
section { padding: 0 .85em; background: rgba(30, 30, 30, 0.8); overflow-x: hidden; -webkit-box-flex: 1; -moz-box-flex: 1; width: 25%; -webkit-flex: 1; -ms-flex: 1; flex: 1;
}
@media (max-width: 1023px) { section { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; -webkit-box-flex: 1; -moz-box-flex: 1; width: 100%; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
}
section.bigger { color: #fff; border-left: 0.35em solid #ff2441; border-right: 0.35em solid #ff2441; background: url(https://subtlepatterns.com/patterns/cartographer.png); -webkit-box-flex: 2; -moz-box-flex: 2; width: 50%; -webkit-flex: 2; -ms-flex: 2; flex: 2;
}
@media (max-width: 1023px) { section.bigger { -webkit-box-flex: 1; -moz-box-flex: 1; width: 100%; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; }
}
section.bigger .column { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: column; -moz-box-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
section.bigger .column h1 { font: 2em "Titillium Web", sans-serif; margin: .15em 0 1em 0; padding: 0 0 .35em 0; color: #ff2441; border-bottom: 0.2em solid #ff2441;
}
section.bigger .column iframe { margin: 2em 0 .5em 0;
}
section.bigger .column a { text-decoration: none; color: #ff2441; transition: border .25s ease-in-out; border-bottom: .1em solid transparent; padding-bottom: .25em;
}
section.bigger .column a:hover { border-bottom-color: #ff2441;
}
.region { -adobe-flow-from: myFlow; -webkit-flow-from: myFlow; flow-from: myFlow; overflow-y: auto; /* data-title */
}
.region:before { content: attr(data-title); background: #ff2441; padding: .35em .25em .35em 1.075em; width: 120%; margin-left: -1em; display: block; color: #fff; font: 1.35em "Titillium Web", sans-serif;
}
.playlist { -adobe-flow-into: myFlow; -webkit-flow-into: myFlow; flow-into: myFlow;
}
.playlist p { position: relative; margin: .45em 0; padding-left: 1.65em; transition: color .25s ease-in-out; counter-increment: playlist;
}
.playlist p:hover { color: #ff2441;
}
.playlist p:before { position: absolute; left: 0; content: counter(playlist) ". "; color: #ff2441;
}
.playlist p:after { position: absolute; z-index: -1; left: -1.25em; bottom: -.2em; height: .1em; width: 110%; content: ''; background: #222;
}
.playlist p:last-child:after { height: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <article> <section class="region" data-title="Playlist"></section> <section class="bigger"> <div class="column"> <h1>DJ Hype on Kiss - 10.01.2013</h1> <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F75290290&amp;color=ff2441&amp;auto_play=false&amp;show_artwork=false"></iframe> <p> <a href="https://soundcloud.com/realplayaz/dj-hype-kiss-10-01-2013" target="_blank">soundcloud.com/realplayaz/dj-hype-kiss-10-01-2013</a> </p> <p> DJ Hype brings you the latest upfront drum n bass tunes every Wednesday at midnight.
One of the UK’s best plays an hour of heavy jungle and drum & bass with the scene’s biggest DJs, producers and MCs passing through. </p> </div> </section> <section class="region" data-title="Playlist"></section>
</article> <div class="playlist"> <p>TC - Do You Rock [Vip]</p> <p>Placid - Light Years</p> <p>Curfew Steppas Ft.Nico D & Turbulence - Inna Mi Draw [Potential Bad Boy Rmx] - Lion Dub</p> <p>Dj Hype In The Mix</p> <p>Prolix N Coppa - Kick Off - Playaz Dub</p> <p>Lynx - Micro - Playaz Dub</p> <p>Raz - Warn Ya Bootleg - Dub</p> <p>Majistrate - Bomba - Dub</p> <p>Jah Cure - Never Find [Interface Rmx] - Lion Dub</p> <p>Incognito - Primative - Dub</p> <p>Decimal Bass - Grit Top - Dub</p> <p>Andy Pain And Z Connection - Outsider - Dub</p> <p>Rewind - Talk No More - Playaz Dub</p> <p>Bungle - Astral Travel - Soul R</p> <p>Hazard - Time Tripping - Playaz Dub</p> <p>Promenade - All Good [Nerve Aka Dp Rmx] - Dub</p> <p>D Side - Eradictive [Version Rmx] - Dub</p> <p>Artifice - Airlock - Dub</p> <p>Critical Impact - Frogsborn - Dub</p> <p>Chase N Status - Judgement - Ram</p> <p>Lynx - Midnight Funk - Playaz Dub</p> <p>Enei - Machines - Critical</p> <p>Ivy Lab - After Thought Ft. Frank Carter - Critical Dub</p> <p>End Track</p> <p>Optiv Btk - Drop The Funk - Playaz</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://raw.github.com/adobe-webplatform/css-regions-polyfill/master/cssregions.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playlist UI for Rodeo 004 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700);
/************************************************************* * Mixins */
/* * Get the content from $from */
/* * Insert the content from $from * into $into */
/* * display: flex; */
/* * Mixin: flex: grow-factor; * The $width is for older implementations */
/* * Direction of flexbox e.g. * [row|row-reverse|column|column-reverse] */
/* * Re-order flex elements */
/* * Media queries */
/************************************************************* * Variables */
/************************************************************* * Code */
* { box-sizing: border-box;
}
body { margin: .5em; padding: 0; background: #000 url(https://subtlepatterns.com/patterns/dirty_old_shirt.png); color: #ccc; font: 1em/1.45em sans-serif; counter-reset: playlist;
}
@media (max-width: 1650px) { body { font-size: .9em; }
}
article { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 34em;
}
@media (max-width: 1650px) { article { height: 40em; }
}
@media (max-width: 1023px) { article { -webkit-box-direction: column; -moz-box-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
}
section { padding: 0 .85em; background: rgba(30, 30, 30, 0.8); overflow-x: hidden; -webkit-box-flex: 1; -moz-box-flex: 1; width: 25%; -webkit-flex: 1; -ms-flex: 1; flex: 1;
}
@media (max-width: 1023px) { section { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; -webkit-box-flex: 1; -moz-box-flex: 1; width: 100%; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
}
section.bigger { color: #fff; border-left: 0.35em solid #ff2441; border-right: 0.35em solid #ff2441; background: url(https://subtlepatterns.com/patterns/cartographer.png); -webkit-box-flex: 2; -moz-box-flex: 2; width: 50%; -webkit-flex: 2; -ms-flex: 2; flex: 2;
}
@media (max-width: 1023px) { section.bigger { -webkit-box-flex: 1; -moz-box-flex: 1; width: 100%; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; }
}
section.bigger .column { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: column; -moz-box-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
section.bigger .column h1 { font: 2em "Titillium Web", sans-serif; margin: .15em 0 1em 0; padding: 0 0 .35em 0; color: #ff2441; border-bottom: 0.2em solid #ff2441;
}
section.bigger .column iframe { margin: 2em 0 .5em 0;
}
section.bigger .column a { text-decoration: none; color: #ff2441; transition: border .25s ease-in-out; border-bottom: .1em solid transparent; padding-bottom: .25em;
}
section.bigger .column a:hover { border-bottom-color: #ff2441;
}
.region { -adobe-flow-from: myFlow; -webkit-flow-from: myFlow; flow-from: myFlow; overflow-y: auto; /* data-title */
}
.region:before { content: attr(data-title); background: #ff2441; padding: .35em .25em .35em 1.075em; width: 120%; margin-left: -1em; display: block; color: #fff; font: 1.35em "Titillium Web", sans-serif;
}
.playlist { -adobe-flow-into: myFlow; -webkit-flow-into: myFlow; flow-into: myFlow;
}
.playlist p { position: relative; margin: .45em 0; padding-left: 1.65em; transition: color .25s ease-in-out; counter-increment: playlist;
}
.playlist p:hover { color: #ff2441;
}
.playlist p:before { position: absolute; left: 0; content: counter(playlist) ". "; color: #ff2441;
}
.playlist p:after { position: absolute; z-index: -1; left: -1.25em; bottom: -.2em; height: .1em; width: 110%; content: ''; background: #222;
}
.playlist p:last-child:after { height: 0;
}

Playlist UI for Rodeo 004 - Script Codes JS Codes

 /** Playlist UI for Rodeo 004 # What? # My entry for the CodePen Pattern Rodeo 004: CSS Regions I used CSS regions to split the playlist on "big" (>= 1023px width) screens. The columns are based on CSS flexbox. The playlist-numbers are based on CSS counter. # 2013 by Tim Pietrusky # timpietrusky.com
**/
Playlist UI for Rodeo 004 - Script Codes
Playlist UI for Rodeo 004 - Script Codes
Home Page Home
Developer Tim Pietrusky
Username TimPietrusky
Uploaded October 12, 2022
Rating 3.5
Size 6,848 Kb
Views 32,384
Do you need developer help for Playlist UI for Rodeo 004?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Pietrusky (TimPietrusky) Script Codes
Name
Kudos Please
Webs Pricing Table
Custom Dropdown
Icon Fonts - SocialCount meets Style
Liquid Loading
FlatUI Checkout concept
Off Canvas
Asdf
Gravatar URL Generator
Blurry Sweetness
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!