HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!DOCTYPE html>
<html lang="en" oncontextmenu="return false;">
<!-- HTML5 tool for Audio Blind Testing
written by Sound Spinning | https://soundspinning.tumblr.com/ -->
<!-- body info starts here ... -->
<body class="container px-2" >
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div class="container outer m-0 pt-3 pb-1">
<div class="row">
<a class="col-3 pl-3 pl-sm-4 pr-0 justify-content-center" href="https://sweetjonny.co.uk/" target="_blank">
<img class="img-fluid alb-art" src="https://sweetjonny.co.uk/assets/SJ-Logo2018-badge.png">
</a>
<span class="navbar-txt col-9 col-sm-8 pl-3 pl-sm-0">
<a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank"><h1 class="mb-0">Sweet Jonny</h1></a>
<p class="mb-0 pt-1">Garage Rock Band<br>info@sweetjonny.co.uk</p>
</span>
</div>
<h2 class="text-sm-left ml-3 d-flex justify-content-between">Music Badge
<span data-toggle="tooltip" title="Info" data-placement="left" data-delay="300"><button type="button" class="oi oi-question-mark btn btn-secondary btn-info mr-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-Info" data-whatever="Info" data-dismiss="modal" aria-hidden="true"></button></span>
</h2>
<!-- accordion panel -->
<div class="accordion" id="accordionExample">
<div class="card mb-2 p-1">
<div class="card-header px-0 pb-2 pt-1" id="headingOne" style="background-color: white;">
<h3 class="card-tit mb-0">
<button class="btn btn-link py-1 px-2 mx-2" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">TRACKS</button>
</h3>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<!-- Track 1 -->
<span class=" d-flex justify-content-between">
<span class="oi oi-audio-spectrum pt-1"></span>
<h6 class="pt-1">Crack Of the Whip</h6>
<span data-toggle="tooltip" title="Lyrics" data-placement="top" data-delay="300">
<button type="button" class="oi oi-copywriting btn btn-secondary btn-info mb-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-T1" data-whatever="Lyrics" data-dismiss="modal" aria-hidden="true"></button>
</span>
</span>
<audio class="w-100" controls preload="metadata">
<source src="https://www.dropbox.com/s/fiswqrevd8r8s5a/Crack-Of-The-Whip.mp3?dl=1" type="audio/mpeg">
Your browser does not support the audio tag.</audio>
<br>
<!-- Track 2 -->
<span class=" d-flex justify-content-between">
<span class="oi oi-audio-spectrum pt-1"></span>
<h6 class="pt-1">American Psycho</h6>
<span data-toggle="tooltip" title="Lyrics" data-placement="top" data-delay="300">
<button type="button" class="oi oi-copywriting btn btn-secondary btn-info mb-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-T2" data-whatever="Lyrics" data-dismiss="modal" aria-hidden="true"></button>
</span>
</span>
<audio class="w-100" controls preload="metadata">
<source src="https://www.dropbox.com/s/p0v6q3o4lgh1w2w/American-Psycho.mp3?dl=1" type="audio/mpeg">
Your browser does not support the audio tag.</audio>
<br>
<!-- Track 3 -->
<span class=" d-flex justify-content-between">
<span class="oi oi-audio-spectrum pt-1"></span>
<h6 class="pt-1">Judas Tree</h6>
<span data-toggle="tooltip" title="Lyrics" data-placement="top" data-delay="300">
<button type="button" class="oi oi-copywriting btn btn-secondary btn-info mb-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-T3" data-whatever="Lyrics" data-dismiss="modal" aria-hidden="true"></button>
</span>
</span>
<audio class="w-100" controls preload="metadata">
<source src="https://www.dropbox.com/s/acs3nmamr5g3ov4/JUDAS-TREE.mp3?dl=1" type="audio/mpeg">
Your browser does not support the audio tag.</audio>
<br>
<!-- Track 4 -->
<span class=" d-flex justify-content-between">
<span class="oi oi-audio-spectrum pt-1"></span>
<h6 class="pt-1">Mr Know It All</h6>
<span data-toggle="tooltip" title="Lyrics" data-placement="top" data-delay="300">
<button type="button" class="oi oi-copywriting btn btn-secondary btn-info mb-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-T4" data-whatever="Lyrics" data-dismiss="modal" aria-hidden="true"></button>
</span>
</span>
<audio class="w-100" controls preload="metadata">
<source src="https://www.dropbox.com/s/a6oz5km46rh0xnb/Mr-Know-It-All.mp3?dl=1" type="audio/mpeg">
Your browser does not support the audio tag.</audio>
</div>
</div>
</div>
<!-- modal dialogues -->
<div class="modal fade" id="modal-Info" tabindex="-1" role="dialog" aria-labelledby="modal-Info" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-0 pt-3 pb-1 px-1 d-block">
<h4 class="modal-title mb-1 pl-2">Sweet Jonny</h4>
<div class="modal-body m-1 pt-1 pb-0">
A gutter garage rock band. From a do nothing town, to your new nightmare neighbours.
<br>
<p class="mt-1"><span class="oi oi-globe p-0 my-0" data-title="globe" aria-hidden="true"></span><a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank"> www.sweetjonny.co.uk</a></p>
<p><span class="oi oi-phone p-0 my-0" data-title="phone" aria-hidden="true"></span> Tel: +44 07969 175388</p>
<p><span class="oi oi-envelope-closed p-0 my-0" data-title="envelope-closed" aria-hidden="true"></span> Email: info@sweetjonny.co.uk</p>
<!-- Free SVG icons for popular brands from https://simpleicons.org/ -->
<p class="social-icons m-0">
<span class="mr-2"><a href="http://facebook.com/sweeetjonny" target="_blank" data-toggle="tooltip" title="Go to our FB page"><img src="https://sweetjonny.co.uk/fonts/facebook.svg"/></a></span>
<span class="mr-2"><a href="http://www.twitter.com/SweeetJonny" target="_blank" data-toggle="tooltip" title="Go to our Twitter page"><img src="https://sweetjonny.co.uk/fonts/twitter.svg"/></a></span>
<span class="mr-2"><a href="http://www.youtube.com/user/sweeetjonny" target="_blank" data-toggle="tooltip" title="Visit our YouTube Channel"><img src="https://sweetjonny.co.uk/fonts/youtube.svg"/></a></span>
<span class="mr-2"><a href="https://open.spotify.com/artist/0ZYQubU5LJ8rn9RAnrPS7r" target="_blank" data-toggle="tooltip" title="Visit our Spotify channel"><img src="https://sweetjonny.co.uk/fonts/spotify.svg"/></a></span>
<span class="mr-2"><a href="https://www.instagram.com/sweeetjonny/" target="_blank" data-toggle="tooltip" title="Visit our Instagram"><img src="https://sweetjonny.co.uk/fonts/instagram.svg"/></a></span>
<span class="mr-2"><a href="https://plus.google.com/100067772317415101334" target="_blank" data-toggle="tooltip" title="Visit our Google+ page"><img src="https://sweetjonny.co.uk/fonts/googleplus.svg"/></a></span>
</p>
</div>
<p class="m-0 pt-0 pl-1" style="color: grey;">MB <small>V0.1 06Oct2018 © <a class="btn-link" href="http://soundspinning.tumblr.com" target="_blank">Sound Spinning</a></small></p>
<button type="button" class="oi oi-x btn btn-secondary btn-minus px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="modal-T1" tabindex="-1" role="dialog" aria-labelledby="modal-T1Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header d-block">
<h4 class="modal-title pl-1">Crack Of the Whip</h4>
<div class="modal-body col-12 m-0 p-1">
<p class="m-0 p-1">
He said would you a like a lift in his car?<br>
His name's graffiti-ed on the wall of the bathroom stall like a scar.<br>
<br>
Yeah I heard about your wife and how you still carry the ring.<br>
I heard it was just hearsay what you're insinuating.<br>
They let him out on Sundays and he drives about the park.<br>
But give him a fair crack of the whip.<br>
A crack of the whip.<br>
<br>
Jeffery said would you like a lift in his car?<br>
Sweat drips from his lips and you're stuck to the road like tar.<br>
Yeah we heard about your wife and how you still carry the ring.<br>
We heard it was just hearsay what you're insinuating.<br>
They let him out on Sundays and he's found in kiddies parks.<br>
But give him a fair crack of the whip.<br>
A crack of the whip.<br>
<br>
I said have you heard what they found in Jeff's car?<br>
Police men about 10 broke it open with a new crow bar.<br>
They heard about your wife and how you still carry the ring.<br>
They said it wasn't hearsay what they're insinuating.<br>
They let him out on Sunday and they haven't got him back.<br>
But give him a fair crack of the whip.<br>
A crack of the whip.
</p>
</div>
<button type="button" class="oi oi-x btn btn-secondary btn-minus mr-1 px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
</div>
<p class="m-0 pl-1" style="color: grey;"><small>© <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank">Sweet Jonny</a></small></p>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="modal-T2" tabindex="-1" role="dialog" aria-labelledby="modal-T2Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header d-block">
<h4 class="modal-title pl-1">American Psycho</h4>
<div class="modal-body col-12 m-0 p-1">
<p class="m-0 p-1">
I'm the epitome of Yankee dreams I'm vanity fair.<br>
Behind a carefully constructed facade I am not here.<br>
She gasps disgusted babe you truly are cramping my style.<br>
<br>
I try to quench it, satisfy it don't we have to fit in.<br>
My pain is constant and it's sharp, it's sharp, it's sharp like the knife.<br>
I'm flesh, blood, skin, hair and you can shake my hand.<br>
I think I'm losing it.<br>
<br>
A straight J&B to the next white line.<br>
She throws up later twice back at mine.<br>
I take two Xanax then I'm feeling fine.<br>
<br>
There's nothing inside me put simply I am simply not there.<br>
It thrives concealed, you can't recoil as it's starting to tear.<br>
Currently out of my mind before I have to blend in.<br>
<br>
American psycho.<br>
This is not.<br>
This is not.<br>
This is not.<br>
An exit here.<br>
<br>
My most attractive quality, I'm emphatically void.<br>
Your lack of taste disgusts me baby, honey, light of my eye.<br>
Sedated eyes do realise too late the lock and it snaps.<br>
<br>
The television frequently will tell me what to do next.<br>
My lusts unmentionable, my acts are absolutely mad.<br>
I'm bloody, flesh, skin, hair and you can shake my hand.<br>
I think I'm losing it.<br>
<br>
A straight J&B to the next white line.<br>
She throws up later twice back at mine.<br>
I take two Xanax then I'm feeling fine.<br>
<br>
There's nothing inside me put simply I am simply not there.<br>
It thrives concealed, you can't recoil as it's starting to tear.<br>
Currently out of my mind before I have to blend in.<br>
<br>
Chorus
</p>
</div>
<button type="button" class="oi oi-x btn btn-secondary btn-minus mr-1 px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
</div>
<p class="m-0 pl-1" style="color: grey;"><small>© <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank">Sweet Jonny</a></small></p>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="modal-T3" tabindex="-1" role="dialog" aria-labelledby="modal-T3Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header d-block">
<h4 class="modal-title pl-1">Judas Tree</h4>
<div class="modal-body col-12 m-0 p-1">
<p class="m-0 p-1">
Oh heavens above. As fickle as love,<br>
as thick as our blood, now please that's enough.<br>
Does it hurt to forget? Well I'll help you remember,
your son's birthday's September. Just so you know.<br>
Say that you did. Say that you don't.<br>
Say the things you did, you didn't do the family tapes, lied it's true.<br>
Blame the drink. It must be the wine. Oh poor baby.<br>
The mother, the father, the sister, the brother, the house and the pets and the wife and her lover.<br>
<br>
Some secrets best kept, but rumors they spread.<br>
Do you live in regret? Sure you loved them I guess.<br>
So quick tell them all. Tell your friends how you treat them,<br>
how you never have beat them, how you'd love still to see them.<br>
Your lies were the best. You cried you're depressed.<br>
I'm afraid our happy little family, is not all it appears to be.<br>
Blame the drink. Have the lot. Poor baby.<br>
The mother, the father, the sister, the brother, the house and the pets, and the wife and her lover.<br>
<br>
Lucky you. Loving me. Lucky me. Loving you.<br>
Lucky me. Lucky you. Loving me.<br>
<br>
Memories I can't remember. First born precious youth offender.<br>
I won't hurt you accidentally. Judas trees branches hang softly.<br>
<br>
All my sympathies bleeds, for your heart oh my baby,
such a burden it's clearly something hard to forget.<br>
Pull the wool over them, your lies don't deceive me,<br>
she said policemen believe me. How low shall we go.<br>
I'm vicious, I'm sick. Have a slap and a kick.<br>
Because the hand that rocks the cradle is the hand that won't get bit.<br>
Masquerades as a hand. Would you believe it's a fist? You coward.<br>
The mother, the father, the sister, the brother, the house and the pets, and the wife and her lover.<br>
<br>
Memories I can't remember. First born precious youth offender.<br>
I won't hurt you accidentally. Judas trees branches hang softly.
</p>
</div>
<button type="button" class="oi oi-x btn btn-secondary btn-minus mr-1 px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
</div>
<p class="m-0 pl-1" style="color: grey;"><small>© <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank">Sweet Jonny</a></small></p>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="modal-T4" tabindex="-1" role="dialog" aria-labelledby="modal-T4Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header d-block">
<h4 class="modal-title pl-1">Mr Know It All</h4>
<div class="modal-body col-12 m-0 p-1">
<p class="m-0 p-1">
Good, good old grief, good old me.<br>
Drained and wracked how'd you sleep.<br>
I've taken forms, forms of many men.<br>
This bitterness that you taught me.<br>
<br>
Well doesn't it just and didn't it always but then you knew I suppose.<br>
Mr know it all.<br>
As I watched you as you said it, would you like to grin and bear it Mr know it all.<br>
But you knew then I suppose.<br>
<br>
Good, good old grief, good old me.<br>
Stink, concede, seeth and stew.<br>
Greatest advice, to the sweetest end.<br>
Resentment, loathing then defeat.<br>
<br>
Chorus.<br>
<br>
My time, my time was all too short.<br> My legacy of guilt.<br>
The bargaining the fault.<br> Of my failure last resort.<br>
Amongst the nothingness that you taught me.<br>
A haunted melody.<br> The bitter ghosts I've seen.<br>
To stalk and capture me.<br>
And me I could have had it all.<br> But then I died so long ago.<br>
Alone and lost along the road.<br>
And mr know it all knew all.
</p>
</div>
<button type="button" class="oi oi-x btn btn-secondary btn-minus mr-1 px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
</div>
<p class="m-0 pl-1" style="color: grey;"><small>© <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank">Sweet Jonny</a></small></p>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<p class="m-0 pt-1 pl-1" style="color: grey;"><small>Made by © <a class="btn-link" href="http://soundspinning.tumblr.com" target="_blank">Sound Spinning</a></small></p>
</div>
<!-- Scripts -->
<!-- Bootstrap CDNs -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- CUSTOM JS -->
<script src="js/audio.js"></script>
</body>
<!-- body ends here ... -->
</html>
/**/
/* CSS for Audio Blind Test app */
/**/
body {
padding-top: 2vh;
max-width: 575px !important;
font-family: 'Rubik', sans-serif;
/*font-family: 'Roboto', sans-serif;*/
}
.navbar-txt {
color: #C0C0C0;
text-align:center;
}
.navbar-txt span {
font-size: 0.9rem;
}
.alb-art {
border-radius: 0%;
min-width: 85px;
}
.outer {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid rgba(255, 128, 0, 0.95);
border-radius: 10px;
}
h1 {
font-size: 1.7rem;
}
h2 {
color: white;
text-align:center;
font-size: 1.5rem;
}
h6 {
font-family: 'Rubik', sans-serif;
font-size: 1.1rem;
}
.card {
background-color: rgba(255, 128, 0, 0.95);
border: 1px solid white !important;
border-radius: 4px !important;
}
.card-tit * {
color: white;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px;
padding: 3px 0 3px 10px;
}
.card-tit:hover * {
background-color: rgba(0, 0, 0, 0.8);
text-decoration: none;
color: rgba(255, 128, 0, 1.0);
}
.btn-link {
color: #C0C0C0;
}
.btn-link:hover, .btn-link:active, .btn-link:focus {
text-decoration: none;
color: rgba(255, 128, 0, 1.0);
}
.btn-link, .btn-secondary {
-webkit-transition: transform 0.3s cubic-bezier(1,1,.43,1.23);
transition: transform 0.3s cubic-bezier(1,1,.43,1.23);
}
.btn-link:active, .btn-secondary:active {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
.modal.fade {
-webkit-transition: all 0.7s cubic-bezier(1,1,.43,1.23);
transition: all 0.7s cubic-bezier(1,1,.43,1.23);
}
.modal-header {
color: white;
background-color: rgba(0, 0, 0, 0.75);
}
.modal-title {
font-size: 1.2rem;
}
.modal-body {
background-color: rgba(0, 0, 0, 0.5);
}
.btn-minus {
position: absolute;
top: 10px;
right: 10px;
background-color: transparent;
font-size: 0.8em;
border-radius: 10%;
-webkit-transition: transform 0.3s cubic-bezier(0,.29,0,.29);
transition: transform 0.3s cubic-bezier(0,.29,0,.29);
}
.btn-minus:hover {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.btn-info {
-webkit-transition: transform 0.3s cubic-bezier(0,.29,0,.29);
transition: transform 0.3s cubic-bezier(0,.29,0,.29);
}
.btn-info:hover {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.browserupgrade {
background-color: white;
margin-top: 1rem;
padding: 1rem;
z-index: 1000;
}
.social-icons * {
padding: 0;
}
.social-icons img {
width: 25px;
height: 25px;
background-color: white;
border-radius: 15%;
margin-bottom: 0.5rem;
}
/* =================================================
= Bootstrap 4.0 Media Queries =
================================================= */
/* ------------ Mobile First Method ------------ */
/*
/* Extra small devices (portrait phones, less than 576px) */
@media screen and (max-width : 576px) {
.list-tit {
font-size: 1.2rem;
}
.navbar-txt {
font-size: 0.75rem;
}
}
/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width : 576px) {
.list-tit {
font-size: 1.75rem;
}
}
/**/
/* JScript for Audio Blind Test app */
/**/
// Initialize Tooltip
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});
});
//
// Play/Pause tracks with single play click
// Note: it works on iOS devices
window.onload = init;
function init() {
document.addEventListener('play', function (e) {
var allTracks = document.getElementsByTagName('audio');
for (var i = 0, len = allTracks.length; i < len; i++) {
if (allTracks[i] != e.target) {
allTracks[i].pause(); // stop All Sounds except play one
}
}
// this moves onto next track when current one ends
e.target.addEventListener('ended', function(){
var indexT = Array.prototype.indexOf.call(allTracks, e.target);
if (indexT != null) {
if (indexT == allTracks.length-1) {
indexT = -1;
}
allTracks[indexT+1].play();
}
});
}, true);
}
Also see: Tab Triggers