📦 Kumpulan Coding HTML dan PHP CSS

▶ Coding HTML PHP Login Website 
<form method="post" action="login.php">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Login</button>
</form>
▶ Coding HTML Pendaftaran Siswa Baru 
<form method="post" action="simpan.php">
  <input type="text" name="nama" placeholder="Nama Lengkap">
  <input type="text" name="kelas" placeholder="Kelas">
  <input type="text" name="alamat" placeholder="Alamat">
  <button type="submit">Daftar</button>
</form>
▶ Coding HTML PHP CSS Menampilkan VIDEO 

<style>
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.video-item iframe {
  width: 100%;
  height: 220px;
  border-radius: 10px;
}

/* Responsive HP */
@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
</style>

<div class="video-grid">
  <div class="video-item">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID1" allowfullscreen></iframe>
  </div>
  <div class="video-item">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID2" allowfullscreen></iframe>
  </div>
  <div class="video-item">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID3" allowfullscreen></iframe>
  </div>
  <div class="video-item">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID4" allowfullscreen></iframe>
  </div>
  <div class="video-item">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID5" allowfullscreen></iframe>
  </div>
  <div class="video-item">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID6" allowfullscreen></iframe>
  </div>
</div>
▶ Coding HTML PHP CSS Simulasi Shopee Food 

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🔥 20 Promo ShopeeFood Hari Ini</title>

<style>
body{
  margin:0;
  font-family:'Segoe UI',sans-serif;
  background:#fafafa;
}
header{
  background:linear-gradient(135deg,#ff6a00,#ff9a00);
  color:white;
  padding:35px 20px;
  text-align:center;
}
header h1{margin:0;font-size:30px;}
header p{opacity:.95;margin-top:10px;}

.container{
  max-width:1200px;
  margin:auto;
  padding:25px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}
.card{
  background:white;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:.3s;
}
.card:hover{transform:translateY(-6px);}
.card img{
  width:100%;
  height:160px;
  object-fit:cover;
}
.card-body{padding:14px;}
.badge{
  background:#ff3b3b;
  color:white;
  font-size:12px;
  padding:4px 10px;
  border-radius:20px;
}
.title{
  font-size:16px;
  font-weight:bold;
  margin:6px 0;
}
.price del{color:#999;font-size:13px;}
.price span{
  color:#ff6a00;
  font-size:18px;
  font-weight:bold;
}
.btn{
  display:block;
  background:#ff6a00;
  color:white;
  text-align:center;
  padding:10px;
  border-radius:25px;
  text-decoration:none;
  font-weight:bold;
  margin-top:10px;
}
.btn:hover{background:#e65c00;}
</style>
</head>

<body>

<header>
  <h1>🔥 20 Promo ShopeeFood Hari Ini</h1>
  <p>Diskon besar • Gratis ongkir • Harga mulai 10RB 😍</p>
</header>

<div class="container">
<div class="grid">

<div class="card">
<img src="https://images.unsplash.com/photo-1550547660-d9450f859349">
<div class="card-body">
<span class="badge">50%</span>
<div class="title">Burger Jumbo</div>
<div class="price"><del>40.000</del><br><span>20.000</span></div>
<a class="btn" href="LINK_AFFILIATE_SHOPEEFOOD_KAMU">Pesan</a>
</div>
</div>

</div>
</div>

</body>
</html>
▶ Coding HTML CSS Menampilkan WHatsapp 

<!-- WHATSAPP FLOATING ANIMASI KEREN -->
<a href="https://wa.me/6281234567890?text=Halo%20saya%20tertarik%20info%20nya"
   target="_blank"
   class="wa-float">

  <span class="wa-emoji">💬</span>
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg">
</a>

<style>
.wa-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 0 25px rgba(37,211,102,0.7);
  animation: floatWa 3s ease-in-out infinite;
}

.wa-float img {
  width: 40px;
}

.wa-emoji {
  position: absolute;
  top: -20px;
  font-size: 22px;
  animation: emojiBounce 1.5s infinite;
}

@keyframes floatWa {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes emojiBounce {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.5; }
}
</style>
▶ Coding HTML CSS Slider Banner Bergeser 

<!-- SLIDER BANNER 3 ITEM -->
<div class="slider-container">
  <div class="slider">
    <div class="slide">
      <img src="https://via.placeholder.com/900x300/ff6a00/ffffff?text=BANNER+PROMO+1">
    </div>
    <div class="slide">
      <img src="https://via.placeholder.com/900x300/25D366/ffffff?text=BANNER+PROMO+2">
    </div>
    <div class="slide">
      <img src="https://via.placeholder.com/900x300/1e90ff/ffffff?text=BANNER+PROMO+3">
    </div>
  </div>
</div>

<style>
.slider-container {
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.slider {
  display: flex;
  width: 300%;
  animation: slide 9s infinite;
}

.slide {
  width: 100%;
}

.slide img {
  width: 100%;
  display: block;
}

@keyframes slide {
  0%   { transform: translateX(0); }
  33%  { transform: translateX(0); }
  38%  { transform: translateX(-100%); }
  66%  { transform: translateX(-100%); }
  71%  { transform: translateX(-200%); }
  100% { transform: translateX(-200%); }
}
</style>
▶ Coding HTML CSS Pencarian Atau Search Bar 

<!-- SEARCH BAR KEREN -->
<div class="search-box">
  <form action="https://www.google.com/search" method="get" target="_blank">
    <input type="text" name="q" placeholder="Cari sesuatu..." required>
    <button type="submit">🔍</button>
  </form>
</div>

<style>
.search-box {
  width: 100%;
  max-width: 400px;
  margin: 30px auto;
}

.search-box form {
  display: flex;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.search-box input {
  flex: 1;
  border: none;
  padding: 14px 20px;
  font-size: 16px;
  outline: none;
}

.search-box button {
  background: #ff6a00;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 0 20px;
  cursor: pointer;
  transition: 0.3s;
}

.search-box button:hover {
  background: #ff4500;
}
</style>
▶ Coding HTML CSS Menampilkan Musik Player 

<!-- MUSIK PLAYER -->
<div class="music-box">
  <div class="music-icon">🎧</div>

  <audio id="music" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>

  <button onclick="toggleMusic()">▶️ / ⏸️</button>
</div>

<style>
.music-box {
  width: 260px;
  margin: 40px auto;
  padding: 20px;
  text-align: center;
  background: linear-gradient(135deg,#1e90ff,#00c6ff);
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  color: white;
}

.music-icon {
  font-size: 40px;
  animation: bounce 1.5s infinite;
}

.music-box button {
  margin-top: 15px;
  padding: 10px 25px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  cursor: pointer;
}

@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
</style>

<script>
function toggleMusic() {
  var music = document.getElementById("music");
  if (music.paused) {
    music.play();
  } else {
    music.pause();
  }
}
</script>
▶ Coding HTML CSS Menampilkan Video Youtube Autoplay 

<!-- YOUTUBE AUTOPLAY -->
<div class="yt-box">
  <iframe
    src="https://www.youtube.com/embed/Ko72f6MtbYs?autoplay=1&mute=1&loop=1&playlist=Ko72f6MtbYs"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen>
  </iframe>
</div>

<style>
.yt-box {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.yt-box iframe {
  width: 100%;
  height: 100%;
}
</style>
▶ Coding HTML CSS Pilihan Metode Pembayaran 

<!-- PILIHAN METODE PEMBAYARAN -->
<div class="payment-box">
  <h2>💰 Pilih Metode Pembayaran</h2>

  <div class="payment-list">

    <label class="payment-item">
      <input type="radio" name="payment" value="DANA">
      <span>📱 DANA</span>
    </label>

    <label class="payment-item">
      <input type="radio" name="payment" value="OVO">
      <span>💜 OVO</span>
    </label>

    <label class="payment-item">
      <input type="radio" name="payment" value="GOPAY">
      <span>💚 GoPay</span>
    </label>

    <label class="payment-item">
      <input type="radio" name="payment" value="TRANSFER">
      <span>🏦 Transfer Bank</span>
    </label>

    <label class="payment-item">
      <input type="radio" name="payment" value="PAYPAL">
      <span>🌍 PayPal</span>
    </label>

    <label class="payment-item">
      <input type="radio" name="payment" value="QRIS">
      <span>📷 QRIS</span>
    </label>

  </div>

  <button onclick="pilihMetode()">Lanjutkan Pembayaran ➜</button>

  <p id="hasil"></p>
</div>

<style>
.payment-box {
  max-width: 400px;
  margin: 30px auto;
  padding: 25px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

.payment-box h2 {
  margin-bottom: 20px;
}

.payment-list {
  display: grid;
  gap: 12px;
}

.payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 15px;
  border: 2px solid #eee;
  cursor: pointer;
  transition: 0.3s;
}

.payment-item span {
  font-size: 16px;
}

.payment-item:hover {
  border-color: #1e90ff;
  background: #f0f8ff;
}

.payment-item input {
  transform: scale(1.3);
}

.payment-box button {
  margin-top: 20px;
  padding: 12px 25px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg,#1e90ff,#00c6ff);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

#hasil {
  margin-top: 15px;
  font-weight: bold;
}
</style>

<script>
function pilihMetode() {
  let metode = document.querySelector('input[name="payment"]:checked');
  let hasil = document.getElementById("hasil");

  if (!metode) {
    hasil.innerHTML = "⚠️ Silakan pilih metode pembayaran";
    hasil.style.color = "red";
  } else {
    hasil.innerHTML = "✅ Metode dipilih: " + metode.value;
    hasil.style.color = "green";
  }
}
</script>

Post a Comment

Donasi Ilmu

📚 DONASI ILMU

☕ Dukung Tutorial & Edukasi