Coding Audio Mp3 lagu NAFAS CINTA AMY SEARCH INKA CHRISTIE HTML CSS JavaScript

AUDIO CODING
HTML CSS JavaScript
NAFAS CINTA AMY SEARCH INKA CHRISTIE

HTML EDITOR LIVE

▶HTML EDITOR 2 || WARNA

<!--code lagu--> <h3 id="heading">Cara Memasang Audio/Mp3/Lagu Mp3 Online </h3> <br><br> <h6 style="color:gray;text-align:center;"> NAFAS CINTA AMY SEARCH INKA CHRISTIE </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/nafas-cinta/Nafas%20Cinta.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 -->

LIRIK

Sesaknya nafas di dadaku
Mengenang percintaan kita
Dapatkah kita meneruskan
Impian dan harapan cinta?

Di hatiku masih luka
Namunku tetap bersabar
Kumengerti perasaanmu
Duhai, wou-wo sayang

Rindu bergelora
Resah gelisah nafas cinta
Biarpun seribu luka
Tak bisa menghapus cinta

Entah mengapa aku
Makin sayang padamu
Karna engkau adalah
Kekasihku
Nafas cinta
Ho-wo-oo

Di hatiku masih luka
Namunku tetap bersabar
Kumengerti perasaanmu
Duhai, o-wow sayang

Rindu bergelora
Resah gelisah nafas cinta
Biarpun seribu luka
Tak bisa menghapus cinta

Oh Tuhan, tunjukkan jalan
Hadapi segala cobaan
Semoga kita bahagia
Untuk selama-lamanya

Rindu bergelora
Resah gelisah nafas cinta

---

TAG:
nafas cinta Amy Search Inka Christie 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.