Scan to open on your phone
Point a camera at the QR code - it opens this exact paste, no app needed.
https://codepastes.com/zzgt1zx3mkvz156muntitledPlain Text
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Revamp — Find your next favorite song">
<title>Revamp — Find your next favorite song</title>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet"
>
<style>
:root {
color-scheme: dark;
--bg: #211c17;
--surface: #342c23;
--cream: #f8f0df;
--sand: #d9c9ad;
--muted: #cabb9f;
--ochre: #d9a454;
--accent-red: #b95e42;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}
body {
margin: 0;
width: 100%;
min-height: 100vh;
font-family: "Raleway", sans-serif;
color: var(--cream);
background: var(--bg);
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
img {
display: block;
max-width: 100%;
}
:focus-visible {
outline: 3px solid var(--ochre);
outline-offset: 4px;
}
.wrap {
width: min(calc(100% - 40px), 1200px);
margin-inline: auto;
}
/* Header */
.header {
position: sticky;
top: 0;
z-index: 40;
width: 100%;
background: rgba(33, 28, 23, 0.95);
border-bottom: 1px solid rgba(217, 201, 173, 0.22);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.nav {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.wordmark {
flex-shrink: 0;
color: var(--cream);
font-size: 23px;
font-weight: 800;
letter-spacing: -0.04em;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-link {
color: var(--sand);
font-size: 16px;
font-weight: 600;
}
.nav-link:hover {
text-decoration: underline;
}
/* Buttons */
.primary {
border: 0;
background: linear-gradient(110deg, #e4b66d, #c98255);
color: var(--bg);
box-shadow: 0 9px 32px rgba(140, 75, 43, 0.28);
transition:
transform 0.2s ease,
filter 0.2s ease;
cursor: pointer;
}
.primary:hover {
transform: translateY(-3px);
filter: brightness(1.09);
}
.secondary {
border: 1px solid #a89578;
background: rgba(217, 201, 173, 0.07);
color: var(--cream);
transition: background 0.2s ease;
cursor: pointer;
}
.secondary:hover {
background: rgba(217, 201, 173, 0.17);
}
.rounded {
border-radius: 999px;
}
.nav-cta {
padding: 12px 16px;
font-weight: 800;
}
/* Hero */
.hero {
overflow: hidden;
background:
radial-gradient(
ellipse 48% 70% at 78% 48%,
rgba(185, 94, 66, 0.21),
transparent 85%
),
radial-gradient(
ellipse 40% 60% at 0% 0%,
rgba(182, 194, 154, 0.1),
transparent 90%
);
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 32px;
padding-block: 96px;
}
.fade-in {
animation: rise 0.65s both;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.eyebrow {
margin: 0;
color: var(--ochre);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.2em;
line-height: 1.2;
text-transform: uppercase;
}
.hero-kicker {
margin-bottom: 20px;
}
.display {
max-width: 700px;
margin: 0;
color: var(--cream);
font-size: clamp(3.1rem, 6.5vw, 6.4rem);
font-weight: 900;
line-height: 1.04;
letter-spacing: -0.07em;
}
.hero-description {
max-width: 560px;
margin: 28px 0 0;
color: var(--muted);
font-size: 20px;
line-height: 1.65;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 36px;
}
.hero-button {
padding: 16px 28px;
font-weight: 800;
}
/* Hero artwork */
.hero-visual {
position: relative;
width: 100%;
height: 530px;
}
.hero-glow {
position: absolute;
inset: 12% 5%;
border-radius: 50%;
background: rgba(185, 94, 66, 0.2);
filter: blur(75px);
}
.hero-card {
position: absolute;
width: 61%;
max-width: 310px;
aspect-ratio: 0.83;
padding: 12px;
border: 1px solid rgba(217, 201, 173, 0.26);
border-radius: 25px;
background: #403429;
box-shadow: 0 28px 65px rgba(16, 12, 8, 0.55);
}
.hero-card img {
width: 100%;
height: 78%;
object-fit: cover;
border-radius: 16px;
}
.hero-card-info {
padding: 16px 8px 0;
}
.hero-track {
margin: 0;
color: var(--cream);
font-size: 16px;
font-weight: 800;
}
.hero-artist {
margin: 4px 0 0;
color: var(--sand);
font-size: 12px;
}
.hero-back {
left: 6%;
top: 16%;
transform: rotate(-15deg);
opacity: 0.75;
}
.hero-front {
left: 33%;
top: 8%;
transform: rotate(9deg);
}
/* Mood section */
.mood-section {
padding-block: 80px;
}
.section-title {
margin: 0 0 36px;
color: var(--cream);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.055em;
}
.mood-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.tile {
display: block;
padding: 12px;
border: 1px solid rgba(217, 201, 173, 0.2);
border-radius: 24px;
background: var(--surface);
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.tile:hover {
transform: translateY(-5px);
border-color: var(--ochre);
box-shadow: 0 18px 44px rgba(19, 14, 10, 0.38);
}
.track-cover {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 17px;
}
.tile-info {
padding: 20px 8px;
}
.tile-mood {
margin-bottom: 8px;
}
.tile-title {
margin: 0;
color: var(--cream);
font-size: 19px;
font-weight: 800;
line-height: 1.25;
}
.tile-artist {
margin: 8px 0 0;
color: var(--muted);
font-size: 14px;
}
/* Recommendation */
.recommendation {
display: none;
padding-bottom: 80px;
scroll-margin-top: 110px;
}
.recommendation.visible {
display: block;
}
.recommendation-panel {
padding: 24px;
border: 1px solid rgba(217, 164, 84, 0.5);
border-radius: 26px;
background: #382e25;
}
.recommendation-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.close-button {
padding: 8px 16px;
font-size: 16px;
font-weight: 700;
}
.recommendation-content {
margin-top: 20px;
}
.recommendation-content.hidden {
display: none;
}
.recommendation-title {
margin: 0;
color: var(--cream);
font-size: 24px;
font-weight: 800;
line-height: 1.3;
}
.recommendation-detail {
margin: 8px 0 0;
color: var(--muted);
font-size: 16px;
line-height: 1.6;
}
.spotify-button {
display: inline-block;
margin-top: 20px;
padding: 12px 24px;
font-weight: 700;
}
/* Responsive */
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
padding-block: 70px;
}
.hero-visual {
height: 500px;
}
.mood-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.wrap {
width: min(calc(100% - 32px), 1200px);
}
.nav {
min-height: 68px;
}
.nav-links {
gap: 12px;
}
.nav-link {
display: none;
}
.hero-grid {
padding-block: 56px;
}
.display {
font-size: clamp(3rem, 15vw, 4.8rem);
}
.hero-description {
font-size: 18px;
}
.hero-visual {
height: 390px;
}
.hero-card {
width: 62%;
}
.mood-section {
padding-block: 64px;
}
.mood-grid {
grid-template-columns: 1fr;
}
.recommendation-panel {
padding: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="wrap nav" aria-label="Main navigation">
<a href="#top" class="wordmark">Revamp</a>
<div class="nav-links">
<a href="#discover" class="nav-link">Discover</a>
<a href="#for-you" class="nav-link">For You</a>
<button
type="button"
class="primary rounded nav-cta"
data-open-chooser
>
Find a song
</button>
</div>
</nav>
</header>
<main id="top">
<!-- Hero -->
<section id="discover" class="hero">
<div class="wrap hero-grid">
<div class="fade-in">
<p class="eyebrow hero-kicker">A NEW WAY TO LISTEN</p>
<h1 class="display">
Find what's in your head.
</h1>
<p class="hero-description">
Music recommendations made just for you.
</p>
<div class="hero-actions">
<button
type="button"
class="primary rounded hero-button"
data-open-chooser
>
Start discovering <span aria-hidden="true">↗</span>
</button>
</div>
</div>
<!-- Hero artwork -->
<div class="hero-visual fade-in" aria-label="Featured music artwork">
<div class="hero-glow" aria-hidden="true"></div>
<div class="hero-card hero-back">
<img
src="https://images.pexels.com/photos/16113173/pexels-photo-16113173.jpeg"
alt="Black and white portrait used as featured music artwork"
loading="lazy"
>
<div class="hero-card-info">
<p class="hero-track">Dior</p>
<p class="hero-artist">Pop Smoke</p>
</div>
</div>
<div class="hero-card hero-front">
<img
src="https://images.pexels.com/photos/16482903/pexels-photo-16482903.jpeg"
alt="Abstract album artwork representing Clarity"
loading="lazy"
>
<div class="hero-card-info">
<p class="hero-track">Clarity</p>
<p class="hero-artist">Zedd</p>
</div>
</div>
</div>
</div>
</section>
<!-- Mood recommendations -->
<section id="for-you" class="wrap mood-section">
<p class="eyebrow">TUNE INTO YOU</p>
<h2 class="section-title">
Made for your mood.
</h2>
<div class="mood-grid">
<a
href="https://open.spotify.com/track/08c3tqCZN3PQcLA5VNkXt9"
target="_blank"
rel="noopener noreferrer"
class="tile"
>
<img
class="track-cover"
src="https://images.unsplash.com/photo-1524368535928-5b5e00ddc76b?auto=format&fit=crop&w=900&q=85"
alt="Artwork for ミスター by YOASOBI"
loading="lazy"
>
<div class="tile-info">
<p class="eyebrow tile-mood">Focus</p>
<h3 class="tile-title">ミスター</h3>
<p class="tile-artist">YOASOBI</p>
</div>
</a>
<a
href="https://open.spotify.com/track/3q1qGC38DEGXtYtm6LFecd"
target="_blank"
rel="noopener noreferrer"
class="tile"
>
<img
class="track-cover"
src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=900&q=85"
alt="Artwork for Luv (sic) by Nujabes"
loading="lazy"
>
<div class="tile-info">
<p class="eyebrow tile-mood">Late Night</p>
<h3 class="tile-title">Luv (sic)</h3>
<p class="tile-artist">Nujabes</p>
</div>
</a>
<a
href="https://open.spotify.com/track/4ecdsGz3Hg6TKPwQ0ZOdJz"
target="_blank"
rel="noopener noreferrer"
class="tile"
>
<img
class="track-cover"
src="https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=900&q=85"
alt="Artwork for FaSHioN by CORTIS"
loading="lazy"
>
<div class="tile-info">
<p class="eyebrow tile-mood">Feel Good</p>
<h3 class="tile-title">FaSHioN</h3>
<p class="tile-artist">CORTIS</p>
</div>
</a>
<a
href="https://open.spotify.com/track/28487fkXVQa2e6F2z73CBO"
target="_blank"
rel="noopener noreferrer"
class="tile"
>
<img
class="track-cover"
src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=900&q=85"
alt="Artwork for Dynasties & Dystopia"
loading="lazy"
>
<div class="tile-info">
<p class="eyebrow tile-mood">Energy</p>
<h3 class="tile-title">Dynasties & Dystopia</h3>
<p class="tile-artist">
Denzel Curry, Gizzle, Brenjoy
</p>
</div>
</a>
</div>
</section>
<!-- Recommendation -->
<section
id="recommendation"
class="wrap recommendation"
aria-live="polite"
tabindex="-1"
>
<div class="recommendation-panel">
<div class="recommendation-header">
<p class="eyebrow">YOUR NEXT LISTEN</p>
<button
id="recommendation-close"
type="button"
class="secondary rounded close-button"
>
Close
</button>
</div>
<!-- Focus -->
<div
class="recommendation-content hidden"
data-recommendation="focus"
>
<h2 class="recommendation-title">
ミスター — YOASOBI
</h2>
<p class="recommendation-detail">
For a focused listening session.
</p>
<a
href="https://open.spotify.com/track/08c3tqCZN3PQcLA5VNkXt9"
target="_blank"
rel="noopener noreferrer"
class="primary rounded spotify-button"
>
Open on Spotify ↗
</a>
</div>
<!-- Chill -->
<div
class="recommendation-content hidden"
data-recommendation="chill"
>
<h2 class="recommendation-title">
Luv (sic) — Nujabes
</h2>
<p class="recommendation-detail">
Something mellow for a late night.
</p>
<a
href="https://open.spotify.com/track/3q1qGC38DEGXtYtm6LFecd"
target="_blank"
rel="noopener noreferrer"
class="primary rounded spotify-button"
>
Open on Spotify ↗
</a>
</div>
<!-- Energy -->
<div
class="recommendation-content hidden"
data-recommendation="energy"
>
<h2 class="recommendation-title">
Dynasties & Dystopia — Denzel Curry, Gizzle, Brenjoy
</h2>
<p class="recommendation-detail">
Turn up the momentum.
</p>
<a
href="https://open.spotify.com/track/28487fkXVQa2e6F2z73CBO"
target="_blank"
rel="noopener noreferrer"
class="primary rounded spotify-button"
>
Open on Spotify ↗
</a>
</div>
<!-- Surprise -->
<div
class="recommendation-content"
data-recommendation="surprise"
>
<h2 class="recommendation-title">
FaSHioN — CORTIS
</h2>
<p class="recommendation-detail">
A feel-good pick to shake things up.
</p>
<a
href="https://open.spotify.com/track/4ecdsGz3Hg6TKPwQ0ZOdJz"
target="_blank"
rel="noopener noreferrer"
class="primary rounded spotify-button"
>
Open on Spotify ↗
</a>
</div>
</div>
</section>
</main>
<script>
const recommendation = document.getElementById("recommendation");
const recommendationPanels =
document.querySelectorAll("[data-recommendation]");
const closeButton =
document.getElementById("recommendation-close");
function showRecommendation(type = "surprise") {
recommendationPanels.forEach((panel) => {
panel.classList.toggle(
"hidden",
panel.dataset.recommendation !== type
);
});
recommendation.classList.add("visible");
const reducedMotion = window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches;
recommendation.scrollIntoView({
behavior: reducedMotion ? "auto" : "smooth",
block: "center"
});
recommendation.focus({ preventScroll: true });
}
document
.querySelectorAll("[data-open-chooser]")
.forEach((button) => {
button.addEventListener("click", () => {
// Currently returns the surprise recommendation.
// Change "surprise" to "focus", "chill", or "energy"
// if you want the button to show a specific recommendation.
showRecommendation("surprise");
});
});
closeButton.addEventListener("click", () => {
recommendation.classList.remove("visible");
});
</script>
</body>
</html>
18,836 chars · codepastes.com