<!-- index.html -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chicken Cartoon World</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>

<header>
  <h1>🐔 Chicken Cartoon World</h1>
  <p>Dunia ayam lucu dan penuh keceriaan!</p>
</header>

<nav>
  <a href="#">Beranda</a>
  <a href="#">Karakter</a>
  <a href="#">Galeri</a>
  <a href="#">Kontak</a>
</nav>

<div class="container">
  <div class="card">
    <div class="chicken">
      <div class="body"></div>
      <div class="eye"></div>
      <div class="beak"></div>
      <div class="comb"></div>
    </div>
    <h2>Ciko</h2>
    <p>Ayam ceria yang suka berkokok di pagi hari.</p>
  </div>

  <div class="card">
    <div class="chicken">
      <div class="body"></div>
      <div class="eye"></div>
      <div class="beak"></div>
      <div class="comb"></div>
    </div>
    <h2>Lili</h2>
    <p>Ayam imut yang suka bermain di taman.</p>
  </div>

  <div class="card">
    <div class="chicken">
      <div class="body"></div>
      <div class="eye"></div>
      <div class="beak"></div>
      <div class="comb"></div>
    </div>
    <h2>Koko</h2>
    <p>Ayam lucu yang selalu membuat teman-temannya tertawa.</p>
  </div>

  <button onclick="cluck()">Klik untuk Suara Ayam</button>
</div>

<footer>
  <p>© 2026 Chicken Cartoon World 🐣</p>
</footer>

<audio id="sound">
  <source src="https://www.fesliyanstudios.com/play-mp3/6677" type="audio/mpeg">
</audio>

<script>
function cluck(){
  document.getElementById("sound").play();
  alert("Kukuruyukkk! 🐔");
}
</script>

</body>
</html>


/* style.css */
body {
  margin: 0;
  font-family: 'Fredoka', sans-serif;
  background: linear-gradient(to bottom, #fff7cc, #ffe4a1);
  text-align: center;
}

header {
  padding: 50px;
  background: #ffcc00;
  color: #5a3e00;
}

nav {
  background: #ffb703;
  padding: 10px;
}

nav a {
  margin: 0 15px;
  text-decoration: none;
  color: #5a3e00;
  font-weight: bold;
}

.container {
  padding: 30px;
}

.card {
  display: inline-block;
  width: 250px;
  margin: 15px;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: 0.3s;
}

.card:hover {
  transform: scale(1.05);
}

/* ayam kartun */
.chicken {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.body {
  width: 80px;
  height: 80px;
  background: yellow;
  border-radius: 50%;
}

.eye {
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 25px;
  left: 25px;
}

.beak {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid orange;
  position: absolute;
  top: 40px;
  left: 30px;
}

.comb {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: 30px;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  background: orange;
  border: none;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  background: darkorange;
}

footer {
  margin-top: 30px;
  padding: 15px;
  background: #ffcc00;
}
