From 878dfaa064d4c8dc3bdb8ca7020245c0f358c0a5 Mon Sep 17 00:00:00 2001
From: Nathan King <nathanking3590@gmail.com>
Date: Mon, 16 Jan 2023 11:41:28 +0000
Subject: [PATCH] add talking duck html step 1, html

---
 02-talking-duck/index.html | 61 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
diff --git a/02-talking-duck/index.html b/02-talking-duck/index.html
index e69de29..ef761e5 100644
--- a/02-talking-duck/index.html
+++ b/02-talking-duck/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Webmanifest -->
+    <link rel="manifest" href="site.webmanifest" />
+
+    <!-- Icona -->
+    <link rel="icon" href="images/icon.png" />
+
+    <!-- Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
+
+    <!-- Style -->
+    <link rel="stylesheet" href="style.css" />
+
+    <!-- JavaScript -->
+    <script defer src="script.js"></script>
+
+    <title>Talking Duck</title>
+  </head>
+  <body>
+    <div>
+      <!-- Header -->
+      <header>
+        <img src="images/logo.png" alt="Logo Coding Week" />
+      </header>
+
+      <!-- Main element -->
+      <main>
+        <!-- Text input -->
+        <textarea placeholder="Write something..."></textarea>
+
+        <!-- Controls -->
+        <div>
+          <button>
+            <img src="images/play.png" alt="Play Button" />
+          </button>
+
+          <!-- Audio controls -->
+          <div>
+            <label>Pitch</label>
+            <input type="range" />
+          </div>
+        </div>
+
+        <!-- Duck -->
+        <figure>
+          <img src="images/talking-duck-static.png" alt="Static Duck" />
+          <img src="images/talking-duck-animated.gif" alt="Animated Duck" />
+        </figure>
+      </main>
+
+    </div>
+  </body>
+</html>
