diff --git a/Web Development Python Projects/6.4 Motivation Meme Project/assets/images/daenerys.jpeg b/Web Development Python Projects/6.4 Motivation Meme Project/assets/images/daenerys.jpeg
new file mode 100644
index 0000000..340489b
Binary files /dev/null and b/Web Development Python Projects/6.4 Motivation Meme Project/assets/images/daenerys.jpeg differ
diff --git a/Web Development Python Projects/6.4 Motivation Meme Project/goal.png b/Web Development Python Projects/6.4 Motivation Meme Project/goal.png
new file mode 100644
index 0000000..85d74af
Binary files /dev/null and b/Web Development Python Projects/6.4 Motivation Meme Project/goal.png differ
diff --git a/Web Development Python Projects/6.4 Motivation Meme Project/index.html b/Web Development Python Projects/6.4 Motivation Meme Project/index.html
new file mode 100644
index 0000000..5f700d9
--- /dev/null
+++ b/Web Development Python Projects/6.4 Motivation Meme Project/index.html	
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Motivation Meme</title>
+  <link rel="stylesheet" href="style.css">
+  <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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div class="poster">
+    <img class="motivation-img" src="assets/images/daenerys.jpeg" alt="daenerys holding a black egg">
+    <h1>That Special Moment</h1>
+    <p>When you find the perfect avocado at the supermarket</p>
+  </div>
+</body>
+
+</html>
+<!-- 
+  TODO: Create a motivational post website.
+Style it how ever you like. 
+Look at the goal image for inspiration.
+But it must have the following features:
+1. The main h1 text should be using the Regular Libre Baskerville Font from Google Fonts:
+  https://fonts.google.com/specimen/Libre+Baskerville
+2. The text should be white and background black.
+3. Add your own image into the images folder inside assets. It should have a 5px white border.
+4. The text should be center aligned.
+5. Create a div to contain the h1, p and img elements. Adjust the margins so that the image and text are centered on the page. 
+  Hint: You horizontally center a div by giving it a width of 50% and a margin-left of 25%.
+  Hint: Set the image to have a width of 100% so it fills the div. 
+6. Read about the text-transform property on MDN docs to make the h1 uppercase with CSS.
+  https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform 
+-->
\ No newline at end of file
diff --git a/Web Development Python Projects/6.4 Motivation Meme Project/solution/assets/images/daenerys.jpeg b/Web Development Python Projects/6.4 Motivation Meme Project/solution/assets/images/daenerys.jpeg
new file mode 100644
index 0000000..340489b
Binary files /dev/null and b/Web Development Python Projects/6.4 Motivation Meme Project/solution/assets/images/daenerys.jpeg differ
diff --git a/Web Development Python Projects/6.4 Motivation Meme Project/solution/solution.css b/Web Development Python Projects/6.4 Motivation Meme Project/solution/solution.css
new file mode 100644
index 0000000..4a1aa5a
--- /dev/null
+++ b/Web Development Python Projects/6.4 Motivation Meme Project/solution/solution.css	
@@ -0,0 +1,21 @@
+body {
+  background-color: black;
+}
+h1 {
+  text-transform: uppercase;
+  font-size: 3rem;
+}
+
+.poster {
+  width: 50%;
+  margin-left: 25%;
+  margin-top: 100px;
+  color: white;
+  font-family: "Libre Baskerville", serif;
+  text-align: center;
+}
+
+.motivation-img {
+  border: 5px solid white;
+  width: 100%;
+}
diff --git a/Web Development Python Projects/6.4 Motivation Meme Project/solution/solution.html b/Web Development Python Projects/6.4 Motivation Meme Project/solution/solution.html
new file mode 100644
index 0000000..f014c86
--- /dev/null
+++ b/Web Development Python Projects/6.4 Motivation Meme Project/solution/solution.html	
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Motivation Meme</title>
+  <link rel="stylesheet" href="./solution.css" />
+  <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=Libre+Baskerville&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="poster">
+    <img class="motivation-img" src="./assets/images/daenerys.jpeg" src="daenerys with egg" />
+    <h1>That Special Moment</h1>
+    <p>When you find the perfect avocado at the supermarket</p>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Web Development Python Projects/6.4 Motivation Meme Project/style.css b/Web Development Python Projects/6.4 Motivation Meme Project/style.css
new file mode 100644
index 0000000..df643ba
--- /dev/null
+++ b/Web Development Python Projects/6.4 Motivation Meme Project/style.css	
@@ -0,0 +1,23 @@
+body {
+    background: black;
+}
+
+h1 {
+    text-transform: 100%;
+    color: white;
+    font-size: 3rem;
+}
+
+.poster {
+    width: 50%;
+    margin-left: 25%;
+    margin-top: 100px;
+    color: white;
+    font-family: "Libre Baskerville", serif;
+    text-align: center;
+}
+
+.motivation-img {
+    border: 5px, solid white;
+    width: 100%;
+}
\ No newline at end of file
