Web Developer Lagu Cinta Kenangan silam xpdc - Coding Music

BELAJAR CODING LAGU DAN LIRIK
CT CINTA KENANGAN SILAM - XPDC

HTML EDITOR LIVE

▶HTML EDITOR 2

<!-- Example code --> <h1 id="heading">belajar coding lagu / cara menambahkan audio di halaman web/blog</h1> <br><br> <h1 style="color:gray;text-align:center;"> CT Cinta Kenangan Silam - XPDC (E15) </h1> <!----- ▶️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 -->

klik textarea, copy & paste pada HTML EDITOR

Lirik

C - Cintaku yang satu I - Impian kan nyata N - Nikmat yang berbeda T - Tanpa pengertian A - Antara kau aku

T - Takkan musnah impian yang kuharapkan Aku mengerti siapa diri ini Kekayaan tiada dalam diri Entah mengapa jadi begini Nasib demikian rupa Angkara dunia

C - Cuba kau pejamkan matamu yang ayu Inginku nyatakan ke dalam hatimu Noktah cinta kita sampainya di sini

T - Takkan musnah impian yang kuharapkan Aku mengerti siapa diri ini Kekayaan tiada dalam diri

Entah mengapa jadi begini Nasib demikian rupa Angkara dunia

Namun langkahku tak akan berhenti di sini Gerhana itu pengubat hatiku

Aku tersentuh dalam janjimu dulu Nyata kau membisu Sehingga pudar terang ingatan ini Lalu ku menyepi Apakah ini semua sudah biasa Mainan hidupmu

Cinta kenangan silam Cinta kenangan silam

C - Cuba kau pejamkan matamu yang ayu Inginku nyatakan ke dalam hatimu Noktah cinta kita sampainya di sini T - Takkan musnah impian yang kuharapkan Aku mengerti siapa diri ini Kekayaan tiada dalam diri Entah mengapa jadi begini Nasib demikian rupa Angkara dunia

Namun langkahku tak akan berhenti di sini Gerhana itu pengubat hatiku

Aku tersentuh dalam janjimu dulu Nyata kau membisu Sehingga pudar terang ingatan ini Lalu ku menyepi Apakah ini semua sudah biasa Mainan hidupmu

Cinta kenangan silam Cinta kenangan silam Cinta kenangan silam

Cinta kenangan silam ho Cinta kenangan silam ho Cinta kenangan silam ho Cinta kenangan silam ho Cinta kenangan silam ho

---

TAG:
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.