Music Card 2

Developer
Perthz Weerawat Weera
Size
3,771 Kb
Views
2,024
  1. Music Card 2 Previews
  2. Music Card 2 HTML Codes
  3. Music Card 2 CSS Codes
  4. Music Card 2 JS Codes

How do I make an music card 2?

Evolved from my first pen, now in progress.. What is a music card 2? How do you make a music card 2? This script and codes were developed by Perthz Weerawat Weera on 31 January 2023, Tuesday.

Music Card 2 Previews
IQ Test

Music Card 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Music Card 2</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! */ #stop, #play { color: #f60;
}
#play { position: relative; width: 0; height: 0; top: 80px; margin-left: auto; margin-right: auto; border-top: 40px solid transparent; border-left: 60px solid #f60; border-bottom: 40px solid transparent;
}
#play:hover { border-top: 40px solid transparent; border-left: 60px solid #444; border-bottom: 40px solid transparent; transition: border-color 1s ease;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: default;
}
:before, :after { content: ''; display: block; position: absolute; box-sizing: border-box;
}
html, body { height: 100%;
}
body { font: 16px/1 'Lato', sans-serif; color: #555; background: #444;
}
.loader { float: left; position: relative; top: 10%; left: 5%; width: 240px; height: 240px; margin-left: 120px; margin-bottom: 25px; /*background:url(http://phz.me/yQC2+);*/ box-shadow: -20px 20px 15px #111; -webkit-transform: rotateX(45deg) rotateZ(-45deg);
}
.loader:before { top: 0; left: 0; width: 0; height: 0; border-top: 2px solid transparent; border-right: 2px solid transparent; animation: 40s 0.5s load1 linear forwards;
}
@keyframes load1 { 0% { border-color: #f60; } 50% { width: 100%; height: 0; } 100% { border-color: #f60; width: 100%; height: 100%; }
}
.loader:after { bottom: 0; right: 0; width: 0; height: 0; border-bottom: 2px solid transparent; border-left: 2px solid transparent; animation: 40s 40s load2 linear forwards;
}
@keyframes load2 { 0% { border-color: #f60; } 50% { width: 100%; height: 0; } 100% { border-color: #f60; width: 100%; height: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<a href="#" id="stop">Stop</a>
<div class="loader" style="background:url(http://phz.me/yQC2+);"> <div id="play"></div>
</div>
<div class="loader" style="background:url(http://phz.me/jq6A+);"> <div id="play"></div>
</div>
<div class="loader" style="background:url(http://phz.me/k3iu+);"> <div id="play"></div>
</div>
<div class="loader" style="background:url(http://phz.me/GuX0+);"> <div id="play"></div>
</div>
<audio id="demo" src="http://phz.groov.asia/music-player/gis-ost.mp3"></audio> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://connect.soundcloud.com/sdk.js'></script> <script src="js/index.js"></script>
</body>
</html>

Music Card 2 - Script Codes CSS Codes

#stop, #play { color: #f60;
}
#play { position: relative; width: 0; height: 0; top: 80px; margin-left: auto; margin-right: auto; border-top: 40px solid transparent; border-left: 60px solid #f60; border-bottom: 40px solid transparent;
}
#play:hover { border-top: 40px solid transparent; border-left: 60px solid #444; border-bottom: 40px solid transparent; transition: border-color 1s ease;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: default;
}
:before, :after { content: ''; display: block; position: absolute; box-sizing: border-box;
}
html, body { height: 100%;
}
body { font: 16px/1 'Lato', sans-serif; color: #555; background: #444;
}
.loader { float: left; position: relative; top: 10%; left: 5%; width: 240px; height: 240px; margin-left: 120px; margin-bottom: 25px; /*background:url(http://phz.me/yQC2+);*/ box-shadow: -20px 20px 15px #111; -webkit-transform: rotateX(45deg) rotateZ(-45deg);
}
.loader:before { top: 0; left: 0; width: 0; height: 0; border-top: 2px solid transparent; border-right: 2px solid transparent; animation: 40s 0.5s load1 linear forwards;
}
@keyframes load1 { 0% { border-color: #f60; } 50% { width: 100%; height: 0; } 100% { border-color: #f60; width: 100%; height: 100%; }
}
.loader:after { bottom: 0; right: 0; width: 0; height: 0; border-bottom: 2px solid transparent; border-left: 2px solid transparent; animation: 40s 40s load2 linear forwards;
}
@keyframes load2 { 0% { border-color: #f60; } 50% { width: 100%; height: 0; } 100% { border-color: #f60; width: 100%; height: 100%; }
}

Music Card 2 - Script Codes JS Codes

SC.initialize({ client_id: '8506fdf8e64b022991b19e2c337fe3d7'
});
$(document).ready(function() { SC.stream('/tracks/62578', function(sound){ $('#play').click(function(e) { e.preventDefault(); sound.start(); }); $('#stop').click(function(e) { e.preventDefault(); sound.stop(); }); });
});
Music Card 2 - Script Codes
Music Card 2 - Script Codes
Home Page Home
Developer Perthz Weerawat Weera
Username Perthz
Uploaded January 31, 2023
Rating 3.5
Size 3,771 Kb
Views 2,024
Do you need developer help for Music Card 2?

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!

Perthz Weerawat Weera (Perthz) Script Codes
Name
Product Module for Audio Intouch Website
Kanit Thai Font
JS For Loop Demo
Gradient on SCSS with Compass
Music Card
A Pen by Perthz Weerawat Weera
Typed Demo
Gradient Animator
Box Shadow
Square Loader
Create amazing love letters 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!