Skip to content

Commit e939f73

Browse files
agneloobrunoagneloobruno
committed
Refatorar seção "Nossas Músicas" com nova estrutura de cards e integração do Spotify
1 parent 2f797d8 commit e939f73

2 files changed

Lines changed: 64 additions & 111 deletions

File tree

‎css/main.css‎

Lines changed: 50 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -556,84 +556,68 @@ button:focus {
556556
line-height: 1.65;
557557
}
558558

559-
#nossas-musicas h2 {
560-
margin-top: 2.8rem;
561-
margin-bottom: 1.2rem;
562-
color: var(--vinho-escuro);
559+
#nossas-musicas {
560+
display: grid;
561+
gap: 2.2rem;
563562
}
564563

565-
.songs-grid {
566-
margin-top: 2.4rem;
567-
display: grid;
568-
grid-template-columns: repeat(2, minmax(0, 1fr));
569-
gap: 2rem;
564+
#nossas-musicas #divisor {
565+
margin: 0;
570566
}
571567

572-
.song-card {
573-
display: flex;
574-
flex-direction: column;
575-
align-items: flex-start;
576-
justify-content: flex-start;
577-
min-height: 220px;
578-
padding: 2.2rem 2rem;
579-
border-radius: 16px;
580-
border: 1px solid rgba(201, 169, 110, 0.45);
581-
background: #FFF5F0;
582-
box-shadow: 0 10px 22px rgba(139, 26, 74, 0.12);
583-
transition: transform 0.25s ease, box-shadow 0.25s ease;
568+
.music-main-card {
569+
background: #8B1A4A;
570+
border-radius: 20px;
571+
padding: 2.4rem;
572+
box-shadow: 0 20px 34px rgba(95, 17, 50, 0.3);
573+
color: #FFF5F0;
584574
}
585575

586-
.song-thumb {
587-
display: block;
588-
width: 100%;
589-
aspect-ratio: 16 / 9;
590-
object-fit: cover;
591-
border-radius: 12px;
592-
border: 1px solid rgba(201, 169, 110, 0.45);
593-
margin-bottom: 1.4rem;
576+
.music-main-card .fa-heart {
577+
font-size: 2rem;
578+
margin-bottom: 1rem;
579+
color: #FFF5F0;
594580
}
595581

596-
.song-card:hover {
597-
transform: translateY(-3px);
598-
box-shadow: 0 16px 28px rgba(139, 26, 74, 0.2);
582+
.music-main-title {
583+
margin: 0;
584+
color: #FFF5F0;
585+
font-family: "Playfair Display", serif;
586+
font-size: clamp(2.3rem, 2.8vw, 3.2rem);
599587
}
600588

601-
.song-card .fa-music {
602-
font-size: 2.2rem;
603-
color: var(--vinho);
604-
margin-bottom: 1.2rem;
589+
.music-main-artist {
590+
margin: 0.8rem 0 1.8rem;
591+
color: rgba(255, 245, 240, 0.9);
592+
font-size: 1.6rem;
593+
letter-spacing: 0.03em;
605594
}
606595

607-
.song-title {
608-
margin: 0 0 0.6rem;
609-
color: var(--vinho);
610-
font-size: clamp(2rem, 2.2vw, 2.7rem);
596+
.music-playlist-card {
597+
background: #fff;
598+
border: 1px solid rgba(201, 169, 110, 0.4);
599+
border-radius: 20px;
600+
padding: 1.6rem;
601+
box-shadow: 0 12px 24px rgba(139, 26, 74, 0.14);
611602
}
612603

613-
.song-artist {
614-
margin: 0 0 1.6rem;
615-
color: var(--texto-suave);
616-
font-size: 1.6rem;
604+
.spotify-embed-wrap {
605+
overflow: hidden;
606+
border-radius: 12px;
617607
}
618608

619-
.song-link {
620-
display: inline-flex;
621-
align-items: center;
622-
justify-content: center;
623-
margin-top: auto;
624-
min-height: 4.2rem;
625-
padding: 0 1.8rem;
626-
border-radius: 999px;
627-
border: 1px solid var(--dourado);
628-
background: linear-gradient(120deg, rgba(201, 169, 110, 0.98), rgba(232, 160, 191, 0.95));
629-
color: var(--vinho-escuro) !important;
630-
font-weight: 700;
631-
letter-spacing: 0.02em;
609+
.spotify-embed-wrap iframe {
610+
display: block;
611+
width: 100%;
612+
border: 0;
632613
}
633614

634-
.song-link:hover,
635-
.song-link:focus {
636-
color: var(--vinho) !important;
615+
.music-outro {
616+
margin: 0;
617+
text-align: center;
618+
color: var(--vinho);
619+
font-size: 1.7rem;
620+
line-height: 1.7;
637621
}
638622

639623
#mensagem-especial {
@@ -1018,8 +1002,12 @@ button:focus {
10181002
grid-template-columns: repeat(2, minmax(0, 1fr));
10191003
}
10201004

1021-
.songs-grid {
1022-
grid-template-columns: 1fr;
1005+
.music-main-card {
1006+
padding: 2rem 1.6rem;
1007+
}
1008+
1009+
.music-playlist-card {
1010+
padding: 1.2rem;
10231011
}
10241012

10251013
.timeline::before {

‎index.html‎

Lines changed: 14 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -261,57 +261,22 @@ <h3>Amor que vale a pena</h3>
261261
</div>
262262
</section>
263263
<section id="nossas-musicas">
264-
<h1 id="divisor">Nossas Músicas</h1>
265-
<div class="songs-grid">
266-
<article class="song-card" data-aos="fade-up">
267-
<img class="song-thumb" src="https://i.ytimg.com/vi/J7N2KNXwtfA/hqdefault.jpg" alt="Capa da musica Eva">
268-
<i class="fa fa-music" aria-hidden="true"></i>
269-
<h2 class="song-title">Eva</h2>
270-
<p class="song-artist">Radio Taxi</p>
271-
<a class="song-link" href="https://www.youtube.com/watch?v=J7N2KNXwtfA" target="_blank" rel="noopener noreferrer">Ouvir ♪</a>
272-
</article>
273-
274-
<article class="song-card" data-aos="fade-up" data-aos-delay="80">
275-
<img class="song-thumb" src="https://i.ytimg.com/vi/JdKDGAZaO9Y/hqdefault.jpg" alt="Capa da musica Essa Eu Fiz Pro Nosso Amor">
276-
<i class="fa fa-music" aria-hidden="true"></i>
277-
<h2 class="song-title">Essa Eu Fiz Pro Nosso Amor</h2>
278-
<p class="song-artist">Jao</p>
279-
<a class="song-link" href="https://www.youtube.com/watch?v=JdKDGAZaO9Y" target="_blank" rel="noopener noreferrer">Ouvir ♪</a>
280-
</article>
281-
282-
<article class="song-card" data-aos="fade-up" data-aos-delay="140">
283-
<img class="song-thumb" src="https://i.ytimg.com/vi/O8qxqag_wgQ/hqdefault.jpg" alt="Capa da musica Incerteza - Na Praia Ao Vivo">
284-
<i class="fa fa-music" aria-hidden="true"></i>
285-
<h2 class="song-title">Incerteza - Na Praia Ao Vivo</h2>
286-
<p class="song-artist">Matheus e Kauan</p>
287-
<a class="song-link" href="https://www.youtube.com/watch?v=O8qxqag_wgQ" target="_blank" rel="noopener noreferrer">Ouvir ♪</a>
288-
</article>
289-
290-
<article class="song-card" data-aos="fade-up" data-aos-delay="200">
291-
<img class="song-thumb" src="https://i.ytimg.com/vi/AtpVvbl5uNE/hqdefault.jpg" alt="Capa da musica Dengo">
292-
<i class="fa fa-music" aria-hidden="true"></i>
293-
<h2 class="song-title">Dengo (Audio)</h2>
294-
<p class="song-artist">ANAVITORIA</p>
295-
<a class="song-link" href="https://www.youtube.com/watch?v=AtpVvbl5uNE" target="_blank" rel="noopener noreferrer">Ouvir ♪</a>
296-
</article>
297-
298-
<article class="song-card" data-aos="fade-up" data-aos-delay="260">
299-
<img class="song-thumb" src="https://i.ytimg.com/vi/mL2Evq3ge5A/hqdefault.jpg" alt="Capa da musica Por Onde Andei">
300-
<i class="fa fa-music" aria-hidden="true"></i>
301-
<h2 class="song-title">Por Onde Andei</h2>
302-
<p class="song-artist">Nando Reis</p>
303-
<a class="song-link" href="https://www.youtube.com/watch?v=mL2Evq3ge5A" target="_blank" rel="noopener noreferrer">Ouvir ♪</a>
304-
</article>
264+
<div class="music-main-card" data-aos="fade-up">
265+
<i class="fa fa-heart" aria-hidden="true"></i>
266+
<h2 class="music-main-title">Nossa música principal</h2>
267+
<p class="music-main-artist">Eva • Radio Taxi</p>
268+
<div class="spotify-embed-wrap">
269+
<iframe data-testid="embed-iframe" title="Player Spotify - nossa música principal" src="https://open.spotify.com/embed/track/7mZZZ7uLhi8df4xinKOu0Q?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
270+
</div>
271+
</div>
305272

306-
<article class="song-card" data-aos="fade-up" data-aos-delay="320">
307-
<img class="song-thumb" src="https://i.ytimg.com/vi/uzj5VHxHi7M/hqdefault.jpg" alt="Capa da musica Careless Whisper">
308-
<i class="fa fa-music" aria-hidden="true"></i>
309-
<h2 class="song-title">Careless Whisper</h2>
310-
<p class="song-artist">George Michael</p>
311-
<a class="song-link" href="https://www.youtube.com/watch?v=uzj5VHxHi7M" target="_blank" rel="noopener noreferrer">Ouvir ♪</a>
312-
</article>
273+
<h1 id="divisor" data-aos="fade-up">Nossas Músicas</h1>
274+
<div class="music-playlist-card" data-aos="fade-up" data-aos-delay="80">
275+
<div class="spotify-embed-wrap">
276+
<iframe data-testid="embed-iframe" title="Player Spotify - playlist do casal" src="https://open.spotify.com/embed/playlist/4Dpu8rwQ2bu9VrtG5zapET?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
277+
</div>
313278
</div>
314-
<p>Essas musicas nao sao nem a metade das nossas musicas, mas trazem as memorias boas que vivem em mim.</p>
279+
<p class="music-outro">Essas músicas não são nem a metade das nossas músicas, mas com certeza nos trazem as melhores memórias. 💕</p>
315280
<p id="divisor"></p>
316281
</section>
317282

0 commit comments

Comments
 (0)