diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1621e92
--- /dev/null
+++ b/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.0">
+    <title>Card Challenge</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="card">
+        <div class="song">
+          <img class="album-cover" src="https://direct.rhapsody.com/imageserver/images/alb.443885891/600x600.jpg" alt="Album Image">
+          <div class="song-info">
+            <h2 class="song-title">Father Ocean</h2>
+            <p class="song-artist">Monolink</p>
+            <p class="song-year">(2018)</p>
+          </div>
+        </div>
+        <div class="rating">
+            <p class="rating-text">Rate this album</p>
+            <div class="stars-container">
+                <img class="rate-star" src="https://image.flaticon.com/icons/svg/860/860827.svg" alt="">
+            <img class="rate-star" src="https://image.flaticon.com/icons/svg/860/860827.svg" alt="">
+            <img class="rate-star" src="https://image.flaticon.com/icons/svg/860/860827.svg" alt="">
+            <img class="rate-star" src="https://image.flaticon.com/icons/svg/860/860827.svg" alt="">
+            <img class="rate-star" src="https://image.flaticon.com/icons/svg/860/860827.svg" alt="">
+            </div>
+        </div>
+      </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..67ef496
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,60 @@
+img,body{
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  body{
+      display: flex;
+    justify-content: center;
+    align-items:center ;
+  }
+
+  p{
+    margin: 0;
+    color: gray;
+    letter-spacing: 3px;
+}
+
+  .card{
+    height:285px;
+    width: 486px;
+    display: flex;
+    flex-direction: column;
+    border: 2px solid gray;
+    box-shadow: 6px 9px 29px 3px rgba(0,0,0,0.75);
+      }
+  .song{
+    width: 486px;
+    height: 175px;
+    display: flex;
+    border-bottom: 1px solid gray;
+  }
+  .album-cover{
+    height: 175px;
+  }
+  .song-info{
+      width: auto;
+      margin-left: 30px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+
+  }
+  .song-title{
+    width: 100%;
+    margin: 0 0px 16px 0 ;
+  }
+
+  .rating{
+      display: flex;
+      height: 100%;
+      justify-content: space-around;
+      align-items: center;
+      align-content: center;
+  }
+  .rate-star{
+    height:30px;
+    width:30px;
+    margin: 0px 0px;
+  }
\ No newline at end of file
