diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..0579ba6
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>It's My Birthday!</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <h1>It's My Birthday!</h1>
+  <h2>On the 12th May</h2>
+
+  <img src="https://raw.githubusercontent.com/appbrewery/webdev/main/birthday-cake3.4.jpeg"
+    alt="purple birthday cake with candles" />
+
+  <h3>What to bring:</h3>
+  <ul>
+    <li>Balloons (I love balloons)</li>
+    <li>Cake (I'm really good at eating)</li>
+    <li>An appetite (There will be lots of food)</li>
+  </ul>
+
+  <h3>This is where you need to go:</h3>
+  <a
+    href="https://www.google.com/maps/@35.7040744,139.5577317,3a,75y,289.6h,87.01t,0.72r/data=!3m6!1e1!3m4!1sgT28ssf0BB2LxZ63JNcL1w!2e0!7i13312!8i6656">Google
+    map link</a>
+</body>
+
+</html>
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..4707685
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,43 @@
+:root {
+  --bg: #ffeb3b;
+  --ink: #3a0ca3;
+  --accent: #f72585;
+  --link: #0000ee;
+}
+
+body {
+  max-width: 40rem;
+  margin: 0 auto;
+  padding: 1rem;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: "Comic Sans MS", "Comic Sans", cursive;
+  text-align: center;
+}
+
+h1 {
+  color: var(--accent);
+  font-size: 3rem;
+  text-shadow: 3px 3px 0 var(--ink);
+}
+
+h3 {
+  margin-top: 2rem;
+  text-decoration: underline wavy var(--accent);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border: 6px ridge var(--accent);
+}
+
+ul {
+  display: inline-block;
+  text-align: left;
+}
+
+a {
+  color: var(--link);
+  font-weight: bold;
+}