diff --git a/index.html b/index.html
index 5752577..1057dfc 100644
--- a/index.html
+++ b/index.html
@@ -1,23 +1,46 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-  <title>Blog preview card</title>
+    <title>Blog preview card</title>
 
-  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  Learning
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./assets/images/favicon-32x32.png"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="container center">
+      <div class="card">
+        <div class="image center">
+          <img
+            src="/images/illustration-article.svg"
+            alt="Article illustration"
+          />
+        </div>
 
-  Published 21 Dec 2023
+        <div class="content">
+          <p>Learning</p>
 
-  HTML & CSS foundations
+          <p>Published 21 Dec 2023</p>
 
-  These languages are the backbone of every website, defining structure, content, and presentation.
+          <h1>HTML & CSS foundations</h1>
 
-  Greg Hooper
-</body>
-</html>
\ No newline at end of file
+          <p>
+            These languages are the backbone of every website, defining
+            structure, content, and presentation.
+          </p>
+        </div>
+
+        <footer>
+          <p>Greg Hooper</p>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
index 52f9e36..349eae1 100644
--- a/styles.css
+++ b/styles.css
@@ -4,7 +4,71 @@
   font-family: "Figtree";
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
 body {
-  font-weight: 500;
+  background-color: #f4d04e;
   font-family: "Figtree";
 }
+
+.container {
+  padding: 24px;
+  min-height: 100dvh;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  filter: drop-shadow(8px 8px black);
+  border: 1px black solid;
+  border-radius: 20px;
+
+  background-color: white;
+
+  padding: 24px;
+
+  .image {
+    border-radius: 10px;
+
+    max-width: fit-content;
+    height: fit-content;
+    overflow: hidden;
+
+    img {
+      width: auto;
+      height: 200px;
+      object-fit: cover;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
