Lagu dan Lirik Curahan rasa Xpdc | Belajar Coding Audio Lagu

AUDIO CODING
HTML CSS JavaScript
CURAHAN RASA - XPDC

HTML EDITOR LIVE

▶HTML EDITOR 2 || WARNA

<!-- Example code --> <h3 id="heading">Cara Memasang Audio/Mp3/Lagu Mp3 Online </h3> <br><br> <h6 style="color:gray;text-align:center;"> CURAHAN RASA - XPDC (E16) </h6> <!----- ▶️GITAR -----> <style>body { --text-color: #fdc100; --bg-color: #764000; --transition: all 0.55s cubic-bezier(0.68, -0.55, 0.265, 1.55); --yellow-bg: transparent linear-gradient(114deg, #fdc100 0%, #dd7d00 100%) 0% 0% no-repeat padding-box; color: white; margin: 0; background: black; display: flex; justify-content: center; flex-direction: column; align-items: center; margin: 0; height: 100vh; } #guitar { width: 100%; height: 70vh; object-fit: contain; border: 1px solid black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .cta { position: relative; padding: 12px 18px; transition: all 0.2s ease; border: none; cursor: pointer; background: none; } .cta:before { content: ""; position: absolute; top: 0; left: 0; display: block; border-radius: 50px; background: var(--bg-color); width: 45px; height: 45px; transition: all 0.3s ease; } .cta span { position: relative; font-family: "Ubuntu", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-color); } .cta svg { position: relative; top: 0; margin-left: 10px; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: var(--text-color); stroke-width: 2; transform: translateX(-5px); transition: all 0.3s ease; } .cta:hover:before { width: 100%; background: var(--bg-color); } .cta:hover svg { transform: translateX(0); } .cta:active { transform: scale(0.95); } .btn { border-radius: 23px; letter-spacing: 0.8px; font-size: 14px; font-weight: 300; color: var(--bg-color); white-space: nowrap; margin: 20px auto; width: 166px; height: 45px; cursor: pointer; position: relative; border: 1px solid #dd7d00; background: transparent; } .btn::before { -webkit-transition: var(--transition); transition: var(--transition); content: ""; width: 50%; height: 100%; background: black; position: absolute; top: 0; right: 0; } .btn:hover::before { width: 100%; } .btn.btn-hover { border-radius: 50px; position: relative; } .btn.btn-hover .btn-text { color: white; -webkit-transition: var(--transition); transition: var(--transition); mix-blend-mode: lighten; } .btn.btn-hover::before { border-radius: 50px; width: 100%; background: conic-gradient( transparent 240deg, #ac633697 240deg, #fff2af6a 300deg, transparent 300deg ) 100% / 64% no-repeat, var(--yellow-bg); } .btn.btn-hover:hover .btn-text { margin-right: 30px; } .btn.btn-hover:hover::before { background-position: right; border-radius: 23px; width: 25%; } </style> <img src="https://assets.codepen.io/72787/Bass+Gitar+red.png" alt="Bass Guitar" id="guitar"> <button id="color-button" class="cta"> <span>Tukar Warna</span> <svg viewBox="0 0 13 10" height="10px" width="15px"> <path d="M1,5 L11,5"></path> <polyline points="8 1 12 5 8 9"></polyline> </svg> </button> <audio id="bg-music" src="https://archive.org/download/xpdc_20210917/E15.mp3" autoplay loop></audio> <div class="body"> <button class="btn btn-hover" onclick="toggleMusic()"> <span class="btn-text">Play/Pause</span> </button> </div> <script> // Hi! how are you? // itaycode.com // twitter.com/itaycode const button = document.getElementById("color-button"); const guitar = document.getElementById("guitar"); button.addEventListener("click", function () { const hue = Math.floor(Math.random() * 360); guitar.style.filter = `hue-rotate(${hue}deg)`; console.log(hue); }); function toggleMusic() { const audio = document.getElementById("bg-music"); if (audio.paused) { audio.play(); } else { audio.pause(); } } </script> <p data-height="265" data-theme-id="0" data-slug-hash="ExOPqOz" data-default-tab="css,result" data-user="blonfu" data-embed-version="2" class="codepen"> <!--↗ See the Pen <a href="http://codepen.io/blonfu/pen/vGNKNj/">Modificar color de texto según fondo (stylus)</a> by blonfu (<a href="http://codepen.io/blonfu">@blonfu</a>) on <a href="http://codepen.io">CodePen</a>.</p>↙--> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> <!--↗↙--> <!-- code END -->

Copy & Paste in HTML EDITOR

LIRIK

Tika begini Aku juga mengerti

Perasaanku terganggu Malam penuh dengan bintang Indah khabar rupamu Menawan setiap waktu

Apa lagi yang dinantikan Bukan bertepuk sebelah tangan Cintaku tidak Aku pastikan sampai tujuan

Berarak mendung hitam Berlagu sepi semalam Aku hanya seorang insan Tak mampu keajaiban

Jika perlu engkau tinggalkan Demi relakan kemanusiaan Sejernih kasih Selembut sinar mutiara

Jika perlu engkau tinggalkan Demi relakan kemanusiaan Sejernih kasih Selembut sinar mutiara

Belaian kau yang lembut Tak dapat aku melupakan Sentuhan kasih Irama merdu dalam dakapan

Suara yang membisik Bagai gelora menghempas pantai Sejernih kasih Selembut sinar mutiara

Belaian kau yang lembut Tak dapat aku melupakan Sentuhan kasih Irama merdu dalam dakapan

Belaian kau yang lembut Tak dapat aku melupakan Sentuhan kasih Irama merdu dalam dakapan

Suara yang membisik Bagai gelora menghempas pantai Aku hanya seorang insan Tak mampu keajaiban Jika perlu engkau tinggalkan Demi relakan kemanusiaan

---

TAG:
curahan rasa xpdc web Developer music web developer music industry web developer musicians web design music web development music web design music artist web developer song web developer audio website designer music artist Discover music web developer jobs web developer examples web developer que es web developer termsfh web developer abbreviation music software developer salary music web developer music web developer jobs music app developer musickit developer token music coding music coding music download coding music website coding music software Coding Music 2023 Album by Coding Music coding music spotify coding music reddit coding music plugins audio Coding audio coding jobs audio coding 3 audio coding in html audio coding techniques Internet Archive: Digital Library of Free

DISCLAIMER : Pelbagai bentuk gambar, artikel, video dan pautan yang terkandung dalam blog ini diambil dari sumber - sumber lain yang bertebaran di internet. Oleh yang demikian HAK CIPTA / COPYRIGHT dimiliki sepenuhnya oleh pemilik sumber.