-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (62 loc) · 11.6 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotify</title>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="src/css/style.css">
</head>
<body>
<header>
<nav>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADvUlEQVR4nO2az0tUURTHb2hqGOVo/qBVLUWx/onKfojVTqudoht/YG3V1tUqEPo7ioqKkqAiy7SJKG1sVbmIapcpGp84dh5d8s28X3ecV/iFgWHufed+z7vn3Ht+jDFb+E8B1AIngcvATWAO+Aas6Ee+v9UxmdMJZEwaAFQB54C7wE+iYw24A5wFKkuhwA7gPLBokVoGHgCjujPN8saB7frJ6G8yNgZM6jMePgEj8nI2S4njwHuLwHOgB9gdQ1YN0AtMW/IWgKPFNqNr1oIvgMMO5bcDs5b8Cee7AzQpccF3YAAoc7rI73XKgCFgydrtRlfC9+t2o6dOqxPBhddsA+Z1zZxwSCqw3hL4DNjjjG3w2hngka4tPtmUxCc8c3oCVDtnG8yhGnhqmVl0n7EcW8yptihMw/Gos6xiIs4R6zl20X0ipM8sKaf2KJedd08MmJQAGLacP9jEgAvWPeH8iI0LoBx4qdyGgyZXaqggOGRSBuCYclssuCsavK2fECaFALZZJ2l3oYn3dFKPSSmAPuV4u1A+saYRaeQAcJMvyhVg1ZcncEo1vW9SDuChcu3wG7yig6Mm5QAuKtdLfoOSggo6QwqbAV7FjoE2RtdZYCrkfM96bvgNvtPB5pDCslYI05RQCZEhmA35TIvOn/Mb/KqDoeIqoAF4rc9ILLQ3hhKNlgwpVoSSIVG4PvPZb1BOAkFFBCKxlYmrhHVxC5aNC0XiKpNEiTCKRDKtuMokVcJK+PKaViRnD3Ba3wMgzBwXzh7p+I26My52wgNwWuVcL3QhjpkE8HvrrnYi7IUoFUDBpEkIH+LOlAgTomSsoLHGuFXGpRK1VtC4K98kKSgLepMu+FfokXWhhADoV463TD4AZ3TStElvYjWjHLuCLpqPOvGISRmAE8rtQ2AbQkv7qOZpKz5kldtg2AqjV+sdMikBf17wfOimkPQn9CEpirUVnWUwn4PAD+UUrZWh/QnvDdQVjWW4uCqnXK7GEVClhWO0kFyKIvZOyRqVw1TsPqO+DYmLvLZCvXO2hS++x7r2QuKGjzZ6cpaZHXDGtrBP5HRNicr3uRLcaJnZkhaUy50I33jEjliOLebU4HqRKusAQAvKRx3e2NLK8O6Jdccuau9du6/etqO12L44/2JQP+i3wg7PlJx1i8PszrAVzqARqYTX41p3atFuU4V+5HurJkXjOterE3hhx2Cp/gEhsVm3FJQ1BYiKVc1Mu0qigB+koCyJjmRtUgHU/OOL9aca+f5G0lOd05E3n9iC+ffxC40bty9R0AgGAAAAAElFTkSuQmCC">
<div class="playlist-info">
<p>TOCANDO DA PLAYLIST</p>
<p></p><strong>This is Two Door Cinema Club</strong></p>
</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAZUlEQVR4nO2TMQ6AMAwDM/F1wj9peYVjVIkF1IElYcAndelyUuQzE+IByYXARqATaAR8/Fk2HKII3h7gFeI+ER8V4jYR71+deq0al1/DqhvX/6A6DnWcBNVxFVTHoY6ToDoW9o4T5h2UBT3xujQAAAAASUVORK5CYII=">
</nav>
</header>
<main>
<article class="album">
<img src="https://i.scdn.co/image/ab67616d0000b273585f3d70dce678a5978a0941" alt="album"><!-- capa do album -->
</article>
<article class="music_details">
<!-- detalhes da musica -->
<div class="name">
<h1>Something Good Can Work</h1>
<p>Two Door Cinema Club</p>
</div>
<div class="mais_menos">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADY0lEQVR4nO2aTU8UQRCG24CAwSgfIhz1SCDon1BBQdAbqDcIXPgIegU8qycTEn+Hhhg1YkzUiOLXRUHwpHIw4k2EgHlMwTuhE5eZ3WWWnSW8ySSTrd7qt7uruqurxrk97FIAVUAHcBOYAGaAX8CKHnv/JJm1aQcqXRIAlAFXgIfAXzLHGvAAuAyU5mMAB4CrwIJHahmYBEa0MvU248B+PZX6zWSjwBP9J8B3YNgmZ6cGcQ744hF4DXQDh7PQVQH0ANOevnmgJddmdMfr8A1wOkb9zcA7T/947KsD1Im44TfQDxTF2slGP0XAILDkrXZtXMqPa7nRrtMYi+LwPpuAWfU5Zxy2q7DGU/gKOBIb2+i+K4Fn6tt8sm47PhGY0wugPHa20RzKgZeemWXuM55jmzlV5YRpejyqPasYz2aLDRw75z6Rps8siVNzJoddcE70u4QAGPKcP9rEgGveORH7FpstgGLgvbgNRTUuVahgOOUSBuCsuC2EroqCt/UdwiUQwD5vJ+0Ka/hIjbpdQgH0iuP9sPvEmiLSjAPAHT4oV4DVlDyBCxrpY5dwAE/FtS2V8JaEIy7hAK6L641UQruCGs67hINN67mbSvhZwnqXcAAN4jqTSrgoYd7iqnRhUbi4/kgltJ3AUJKGopzCRfdvB7dheVcPZLGATKsmzLR2jbNPSNjuEg7gYtj2GxyIo67AD8QOCSdd4YQorVsFY0HQWOESCjaC2yBoPLRVI0soG3pcQgH0ieNEWKNLajTtknuxeiuOnVEHzTc1POMSBqBV3L5GliGU2kcjT1ry4YO4DaSbYQxyvYMuIWBzgmfTLgpZfUJ/sqRYU85ZRvM5CfwRp8xKGapPBDNQnTOW6cVVc+JyOxsFZUoco0RyPpLYB4EpcZjKus6o2bDqbFBWqImdbfjB91x9z2+74KNCz5xnZidiYxvuE3Pq06LyY3EprvXMbEkJ5eJYlP+/xQ57jm3mdDTuTsq8DQAllFtiPLGtlBGcE+uOndPau6qvwbKjXGxvNl8xyA/6vLAjMKXYqsXprM6QF86giNTC6zHlnRpUbSrRY++NuhSNqW2QJwjCjoF8fQFhsVmXJZR1BcgUq7qZduZlAKlgCWXLxdqtDbin2uNP76Mae/9o11O1advyPrEHV/j4Bw3vCXIuTY0GAAAAAElFTkSuQmCC">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADaklEQVR4nO2aS09UQRCFrwEBg1GGh7DUJYGgf0IFBQF3oO4gsOERdAu4VlcmJP4ODTFqxJioEcXXRsHBlcrCiDsRA+YzBecmHR3uPOhh7hBOcpPJdM+pqttV3dVVEwR72KUAqoEu4DowDcwDP4DfeuzzB43ZnE4gEcQBQAVwCbgP/CF7rAP3gItAeSEMOABcBpYcpVaBGWBcK9NobxzYryeh72xsAnik34T4CozZy9kpI84CnxwFXgJ9wOEcuKqAfmDO4VsE2vLtRrccga+AUx75W4E3Dv+U99UBGqS44ScwBJR4FbIppwQYAVac1a73RX5My412nWYvxNEyW4AFyUyaDtslrHMIXwC13rRNLzsBPJFsi8mG7cRE6E7PgErv2qbXoRJ47rhZ9jHjBLa5U3VeNM1MjxrHK6Zy2WLDwM57TGQYMyvSqTWbwy48J4Y8KLEBDzyjTvCndzHginNOlMTIkFLgrehG000uV6pgOLld4T4NMQBnRLcUuSpK3jZ2iMATPBuyz9lJe6MmPtCkPh+CfRtiAAZEeTeIuE+sKyPNOgHcQUMSut+spdQT6JbMh76E5sMQA/BYtB3BvwBuaHA8iL8hV0V7LdWgXUEN54rAkG7R3k41+FGDjUVgSJNo51MNLmuwuggMqRXtt1SDthMYyjJVLl8I0su3g9uwuqsNWS4i16qLcq1dE+zTGuwsAkPOR22/4YE4UewHYpcGZ4ooRWnfKhkLk8aquBrCZnIbJo2HtppkBWVDf4wNGRTldNSkC5o0F+OL1WtR9qQ7aL5o4ukYGtIuus9p2xAq7SPL41Z8eCe64UwrjGGtdyRGhoyJaiHjppD1J/QjK4q1BAUGcAL4JZ2ya2WoPxG+gZq8aZlZXpWULjdzIahQ4RgVkgtRxD4IzEqH2Zz7jHob1p0N2wp13rWNPvieSvbiths+avQkHTc77k3b6JhISqZl5Ud9Edc7braignKpF/L/t9gxJ7DNnY74FlLhbACooNzm8cS2VkZ4TmwEdl577+q+hsuOarEDufyLQXEw6KQdoSt56xZnsjqjTjqDMlJLrydVd2pSt6lMj31u1qVoUnPDOkGYdgwX6h8Qlpv1WkFZV4BssaabaU9BDEgFKyhbLdZubcAd9R6/O3+qsc/v7XqqOR1b3if2EBQ//gII7bjCd5MRxAAAAABJRU5ErkJggg==">
</div>
</article>
<article >
<audio src="#" ></audio><!-- tempo da musica -->
<div class="player">
<span id="currentTime">0:00</span>
<input type="range" id="progressBar" value="0" max="100">
<span id="duration">3:00</span>
</div>
</article>
<article class="set_song">
<img style="height: 30px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACgUlEQVR4nO2aMU8UQRTHH4qojTGxsbFBjAmdNFgYNaImECu9C0GhM+EjoJ21rUYaeokxVBYGNMHQGDXR0OjJB4DSWCgK+DOTG5Lh7dxxu97uzpj9VXfz5t6+f3Zn9u1/T6SioiI6gEGJHeABsA3clshF7BKnGHM5AVvsxXyvSWwAt4DfSkx3zgyt+QU0gCfAQIa8A/a3DZurHebM1PMS4rIJTKbIWQd+kI5tYCpvIYY/wKUO8l22c9OyBUwUIcTwFehtk6vXzskiop5ZxD4C+8wi9Ow0d9r8ZtJToMlxyMZrpe1cwKw68CegxzOvB1hVc2eD2X6Bfk8Bo555NzyLd89uB8yoePY1kVHMvCpy2TNnRc152iLXTCki7MGHSDLsxC944ueCbBqBRVXoghN7oWIvJVSAEVXsDnAWOOG5b1yRkAHeqoLn7PiSM/ZOQodm6+FiGsBTwFVn7KaEDnDQc+d+aGPvbYN4QGIAmFZCvgPH7dm6K7EAHAHWlZj79mwdlpgA7ikhG8BRiQ3gGPBNiZmWmMAuZrPIlZA1c3lJLADjwHXgJPBTicnnmSIPgA/Aa/t5Tgn56GvxgwO45hR93rYoplVxGZHQAV45BT+3YwtKyKKEDMlWfsc2jMMkGdon12BxlScP/kwV+8aJLavYfJDeL83HXXNwlzEnPqpiZu6ZFiJ2KV6Mx4BYdXcnazwYU8JrPJRuPtC0hKY8BSRcR2MTeYo0Y33OnFpuYkhPw2fS/YM5V6j36+5UF3OwSwu1TDc7WZz28klrYOduYpvXAZ+BR2bnSpHzNPAY+NLBK4V8vd+CX/RMSCyU7v12E8r2frsJZXq/3Yb/4Q8DFRUSFn8Bc5cq81c6edUAAAAASUVORK5CYII="><!-- icone aleatorio -->
<img style="height: 40px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABCklEQVR4nO3ZMTIFQRCA4REpkZIJVbkEgQvIXcEd5FRJhQ7hAhKnEEiFikQiwadUvUDAW+zM23n9+s+nZ/7prZ2enlKSJEmSJBhYx1mr4HOpOM8+bmvGXKgINnCO19qbszARHOCuVZabi2ATl3hv+bk2FcEh7ltlubkItmZZUCvmn6gxKY7w8BuJT7oTwTauhmJ0LTLLwtPQ+G5FsIPr/wh0IYI1HON5aEy3ItjFzViBSUVwghcVKROJVKekyBwyIyMoLRizoBRpwcr8fkuUA7FEKlFCFY0/lPGPSy8S5mIV6qobrvkQqh30TYPuAm9LLRKmZRquif0V7DV9Vpjgoed06nUkSZIkq8MHFejeyYlG210AAAAASUVORK5CYII="><!-- icone voltar -->
<img style="height: 70px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACaElEQVR4nO2av08UURDHFwoBEwkQBWKDBX8A/wAdkRA1WoIk/AcEYmVpK1BAMBJaS0uEgK3VxZhQKcdBhdAQsLEQlPAhk7zAy2V33X0/dt9d+CSXbHK3M/u9Nzs7M2+j6JYmBegGXgDzwAZQBX4B5+ojxzvqO/nNc6ArCgGgDZgEPgMX5EfO2QReiq2oBAEdwCvgCHccArNAe1EixoB9/LEHjPoOoyWK44OsvGsRfcA3iucr0OtKxCO13GVRk2uwFfFApdGy2Qf6TUW0lxROaWGWP0UDK4THskmKDZXHedLsLuGyl+mhqZ7YoTOTZTWkVDBlBPiOf36m3viqADRG+zNeA7/xy0SaEKlijamz9VCVGZf4YSOtnzApxa9JsDsMbOOef0BnnENpiqxIWelWYAo4xi1P45wt2FpNjNkbHz3Ae9uV15iLcyItqFchmq8h4IutP2AtznitKCHKX4tqcW3SfTXO8GmRQjS/d4E3wB8Dl8dxBs/LEKL5HwQ+5nR5FqqQTy6ENE1o7Tbgzb7T1Ol3vgEfiG+bukTparCi8W9s0aicbtlYLriMX0+LYckixhTcWI37bHWfuKjZMnAA3EkUosTIaD90plNFaKsSwpg0iVrmiaPsTxAmlzKpySRCE/OO8FjMJUILMRkch0Llvzd4ipj7AW0r9BmJqNvoKSKlJiFV+YCVCE1Mb0lhVpHNJiciYjZDfZUc9ax63XuX/QnPoVbNnWItV2dGTcVdlh3TZb0BIYImVHcps9i8yDnrUgAap1bXSG8APJMxppqGyAs0J9pLNXL8Q9pT6eykKQLuOb+QW6IwuAIQyG1DTYpTSQAAAABJRU5ErkJggg=="><!-- icone play -->
<img style="height: 40px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA70lEQVR4nO3ZsQ2CUBDG8WcsbKxMLC0t3MLCCRzCFYwDMIQr0DMAjUtQUNIRGmLH37yYl0AhIfGhucv9Bjj4cgncu+ecMcYY8yNAAqycdLwVwDFyzY/cHHr1O+AOrKUHCUrgFLnmQLy3n/bQFNhoCOJVwFlDkH53thqCeDVw0RAkyICdhiBe47sDLKQHCXJgryGI1wJXYCk9SPAADhqCeE/ghoIgkzgLMoI/cHOwIF9w1pERxKXi8/uQ/kNsNYwoufShsdEwxmfSD1a1hqNuKn35UGlYB6XSF3Sl9JVpp2GJXWi4VkhUXPQYY4wxbugFnZDmaWV0VXMAAAAASUVORK5CYII="><!-- icone avancar -->
<img style="height: 30px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABTUlEQVR4nO2ZTU7DMBSEfQqoaNkBl6MXqypWlJugAnegEmU/+ZATJ0JdxX8hQe+Tomzi5zfxyEkmzhmGYdQEWAGPbvEipDeaBmDrlghwjfTaipDegRu3NDARBQA2SHuk79YOEcevGldIx9jx+DmlJ+C+hIhTdAOlhDSDoBOwThfiV6Ir9JxV6HKn8mdYjRizRjqEMbv0yXs7ZYrIFHMbrv9Kn/jCIiUINuu3348x2y+5fdQQkvJAZK5CYl9RmLOQSfvAhJQFW5GAWaswmLUCZq3CYNYKmLUKg1krYNYqDGathDvhP5LGfIPPekWAbUygUKuPEkKiA4VphUjnEBBsakQ9o3qgRBzk48quyOEvxNAlnS+h3j6n0APSZ0bUefS2G+rlRaZ3OTeljy13g82mFCKd29g2V0SCaPuJMwv4DysxxQNxUmq+ohiGYbieHw7f671SD7LUAAAAAElFTkSuQmCC"><!-- icone repetir -->
</article>
</main>
<footer>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABxklEQVR4nO2aT07CQBhHZ8XGasR4B+AKBPm3kngN9AomxLXgbQi6ESFRT4EaNwh4jGcmGZOGtLQD03YmmZd0M5n50cdHm+lXhPB4igMoAQ/AhvxYAyP52SZFZGBRDE2K5FmJbTYmRQpFZChSBxoZnHM9KjdLEflhFwknNQZawJE62sAkYU0jKjdLkSRud2QNdMNEQSLjFHmPLoi0QuuugBXwA/RC4x0XRILQOinwzzI0fuxFcqxIO7Sup6qyBC5D410XKjJJkffkgohksCPrDk1EgSKoW6y8OwXq6OpWwhYRYwgvsoWviCGEKUydkBcxxR7f5DPQByqh55EqcA1MXRBZyAejFHlN4MNWkVfgVCOzDLzZJrLQkdiS+bRJpH1AdtMWkamB/JkNIv0Ubdad7U/gxgaRikabdRQzt2qDSKDRZv2NmRvYLLKOmLuKmXvi2k9rGDO3ZvvFPlKVceJifzGQP7dBRNI5IFs2urFF5Bs43yP3DPiySQS1ASxrSryTApGzCGoDmLjvUm2ixErY8MZqpu5EtVBfq6bG5q69sdqHhm1vrIwiDIpEbTfyYmVSZFigyL1JkZKSybMyKylh9C8cHo/Q5g/bfhb5OFvXRAAAAABJRU5ErkJggg==">
<div class="footer_right">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACcUlEQVR4nO2ZO08UURSADxFC2AIrFMUETVi1UKNSoJVgpxbaaeMPkEaJjcTeGBtq0MqYsLbGwie/QH6CJj6wEBItBAofnznJnXhymHF3Zdzcwfslk03mnr3nnLn3POaOSCKRSCT+Z4BeYD+wD+iRqgEcBB4Ca/zmC3AX2CNVALgArFLMMnBSYgY4Bqw7w78BP3OcGZJYAZ47Yy8CNaAfuOJWak5iBBgEfhhDz+TITJrxz0C3xAZw2q5GgUy/c3avxAZwyhi4VCBTA74buRGJdGtZTuTIXDLjGi+9EiPAC2PoG+sMcA5YMePzEivALTby0TmgfNWKX6biLqCuBSq0El2bmGsi1IxmrAHny3KgB7gOvHdKPgBTwLY25xsGPpl53oZtZguhZqunwJGynNDM8bLJU1OFfS3O1wcsuid+PIztAsbDtbMUB4ziBzmGaxX23Gtxvvvuf5dLNTgPYNQt93z2pPQXaJgxlTvcZL5rzokZ6QTAHaP0lY8FbRnC/YwF4HbBNeOCe6FjLQfw2Ci+USAzTftocA90xAkFeGSUT0sOwM2/dGSHdAo2bq3unK21WIWtNeqCXYN70PRKDZf3D0UZ7AXpsij9zkWbfk1BtM1dHk9KKohDoXUZz1a+VEIsTIUgtbwDrv7DFuUZcLR0h4IRI6FprG9ynlabxvXSmsYOt/FLOW28vlQdkFhxsfcaGDNjZ11SaUiMhE7XMlbJV1220OHDhDFwpUBmuzsOGpbY2DIHdEqoExnLISZq4WBu0h2ZzkqsaLFr4xB7t8SMFrvKf1bI0GIXOmnrkMbEbPQr8YdPb3U9rI42sBOJRCIhjl9X4+fVJYFa/QAAAABJRU5ErkJggg==">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYUlEQVR4nO3WwQ2AMBTDUO8/FhVzhQW4VuQXvw0iXwKSpC8luTPPehsyEg4pg0XKYJEyWKQMxxZRmwyFQ8pgkTJYpAwWKYPaZSgcUgaLlMEiZbBIGU4usjLPtfnwSJJ+4gEb7zIUv7M2UAAAAABJRU5ErkJggg==">
</div>
</footer>
</body>
</html>