Spotify Discover Panel
How do I make an spotify discover panel?
What is a spotify discover panel? How do you make a spotify discover panel? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.
Spotify Discover Panel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spotify Discover Panel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="panel"> <a class="open" href="http://open.spotify.com/album/3QFf8E0uJhGS4w2Fcl2G6b"> <img src="http://ecx.images-amazon.com/images/I/51TYYIubutL._SL500_AA280_.jpg" /> </a> <a class="play" href="http://open.spotify.com/track/1HA1rJh9jclMrIJ1zsgSD5"></a>
</div>
</body>
</html>
Spotify Discover Panel - Script Codes CSS Codes
body{ background-color: #121212; text-align: center;}
.panel{ position: relative; background: limegreen; width: 280px; height: 280px; margin: 0 auto;
}
.panel:hover:after{ content:""; position: absolute; display: block; width: 100%; height: 100%; top: 0; background: rgba(0,0,0,0.75); z-index: 0; pointer-events: none;
}
.panel a.open { position: absolute; left: 0; width: 100%; height: 100%; background: red;
}
a.play{ font-family: Open sans, Helvetica; font-size: 14px; font-weight: lighter; color: transparent; background-color: transparent; border: 1px solid white; border-radius: 52px; line-height: 52px; width: 52px; height: 52px; display: block; cursor: pointer; z-index: 1; margin: 0 auto; top: 114px; position: relative;
}
a.play:after{ content:""; display: block; position: absolute; top: 13px; left: 19px; width: 0px; height: 0px; border-style: solid; border-width: 13px 0 13px 20px; border-color: transparent transparent transparent #fff;
}
a.play:hover{ background: rgba(0,0,0,0.25);
}
/*transition: background-color 0.5s ease;*/
Developer | Charlie Walter |
Username | cjonasw |
Uploaded | January 11, 2023 |
Rating | 3 |
Size | 1,920 Kb |
Views | 6,072 |
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!
Name | Size |
Animating Scrolling | 3,221 Kb |
Spotify Discover Panel | 1,920 Kb |
Angry Birds Catapult with Divs | 4,366 Kb |
MMORPG UI | 7,869 Kb |
Ninja Flash CC Animation Canvas | 10,914 Kb |
Slanty goodness | 2,707 Kb |
Projection - Tank Three.js | 3,182 Kb |
JQuery countdown | 4,386 Kb |
Growing Root - Scroll control - CANVAS | 2,342 Kb |
3D PONG | 3,601 Kb |
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!
Name | Username | Size |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
React Template | Isac | 1,241 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
404 Error Page | WebSonick | 3,203 Kb |
NAV WPMANAGER | Mstoic | 1,991 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!