-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (133 loc) · 5.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
rel="stylesheet"
/>
<link rel="icon" type="image/x-icon" href="./assets/img/favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="./scripts/tailwindConfig.js" type="module"></script>
<script src="./scripts/index.js" type="module"></script>
<script
src="https://kit.fontawesome.com/ca2692ca00.js"
crossorigin="anonymous"
></script>
<title>Practicing Tailwind & FontAwesome!</title>
</head>
<body class="bg-gray-900">
<main class="h-screen flex justify-center items-center">
<div
class="main__content relative bg-gray-800 w-[25.8125rem] h-[412px] px-[1.5rem] py-[0.75rem] rounded flex flex-col justify-center items-center gap-6"
>
<div class="card__header relative w-full h-2/5 flex items-center gap-4">
<img
class="profile__img absolute top-[-60px] left-[-60px] w-40 h-40 rounded-full border-solid border-pink-500 border-4 border-opacity-40"
src="./assets/img/paramore.jpg"
alt=""
/>
<div
class="text__content absolute flex flex-col gap-2 leading-[150%]"
>
<p
class="song__name relative left-[120px] text-4xl font-semibold text-gray-50"
>
You First
</p>
<p
class="song__performer relative left-[100px] text-xs font-normal text-gray-400"
>
<span>performed by </span>Paramore
</p>
<p
class="song__writer relative left-[80px] text-xs font-normal text-gray-400"
>
<span>written by </span>Hayley Williams, Taylor York and Zac Farro
</p>
</div>
</div>
<div class="card__content relative py-10 w-full flex flex-col gap-6">
<i
class="left-quote fa-solid fa-quote-left absolute top-0 left-0 h-2/5 opacity-50 text-2xl text-gray-900"
></i>
<div
class="song__lyrics text-sm font-normal text-gray-300 text-center leading-[150%]"
>
<p>Turns out I'm livin' in a horror film</p>
<p>Where I'm both the killer and the final girl</p>
<p>So who, who are you?</p>
</div>
<i
class="right-quote fa-solid fa-quote-right absolute right-0 bottom-[0] opacity-50 text-2xl text-gray-900"
></i>
</div>
<div class="card__buttons w-full h-1/5 flex justify-between">
<div class="buttons__actions flex gap-2">
<button
class="button__listen h-[41px] px-5 py-[6px] font-semibold text-gray-50 bg-pink-500 hover:bg-gray-800 rounded"
>
Listen
</button>
<button
class="button__watch h-[41px] px-5 py-[6px] font-semibold text-gray-50 bg-gray-700 hover:bg-gray-800 rounded"
>
Watch
</button>
</div>
<button
class="button__like h-[41px] px-3 py-[5px] text-gray-50 bg-gray-700 hover:bg-gray-800 rounded"
>
<i class="fa-solid fa-heart"></i>
</button>
</div>
</div>
</main>
<dialog
class="listen-modal__controller p-1 bg-pink-500 bg-opacity-0 border-opacity-0 rounded-2xl shadow-xl backdrop:bg-gray-800 backdrop:opacity-80"
>
<div class="listen-modal__containerrelative">
<button
class="listen-modal__button--close absolute top-[10px] left-[10px] text-3xl text-pink-500"
>
<i class="fa-solid fa-circle-xmark"></i>
</button>
<iframe
class="rounded-xl shadow-xl"
style="border-radius: 12px"
src="https://open.spotify.com/embed/track/2ZMkAWKrNDXrQuF0N9Q9Xj?utm_source=generator"
width="100%"
height="352"
frameborder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
></iframe>
</div>
</dialog>
<dialog
class="watch-modal__controller p-1 bg-pink-500 bg-opacity-0 border-opacity-0 rounded-2xl shadow-xl backdrop:bg-gray-800 backdrop:opacity-80"
>
<div class="watch-modal__container relative">
<button
class="watch-modal__button--close absolute top-[10px] right-[10px] text-3xl text-pink-500"
>
<i class="fa-solid fa-circle-xmark"></i>
</button>
<iframe
class="rounded-xl shadow-xl"
width="560"
height="315"
src="https://www.youtube.com/embed/_Yr_O1N7ky4"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
</dialog>
</body>
</html>