Blog preview card updated.

Author: sharique

fe-mentor/blog-preview-card/index.html

@@ -38,18 +38,14 @@
             </div>
             <div class="button">Learning</div>
             <div class="published">Published 21 Dec 2023</div>
-            <h2>HTML & CSS foundations These</h2>
+            <h2>HTML & CSS foundations</h2>
             <div class="content">
-                languages are the backbone of every website, defining structure,
-                content, and presentation. Greg Hooper
+                These languages are the backbone of every website, defining
+                structure, content, and presentation.
             </div>
-            <div class="attribution">
-                Challenge by
-                <a
-                    href="https://www.frontendmentor.io?ref=challenge"
-                    target="_blank"
-                    >Frontend Mentor</a
-                >. Coded by <a href="#">Your Name Here</a>.
+            <div class="author">
+                <img src="assets/images/image-avatar.webp" alt="" / height="50px">
+                Greg Hooper
             </div>
         </div>
         <script>

fe-mentor/blog-preview-card/style.css

@@ -3,16 +3,55 @@
     --white: #fff;
     --gray-500: hsl(0, 0%, 42%);
     --gray-950: hsl(0, 0%, 7%);
+    --black: #000;
 }
 body {
     background-color: var(--yellow);
     justify-content: center;
     align-items: baseline;
     min-height: 110vh;
+    display: flex;
 }
 .wrapper {
     margin-block: auto;
     background-color: var(--white);
-    padding: 10px;
+    padding: 20px;
     border: 1px solid black;
+    width: fit-content;
+    margin-inline: auto;
+    border-radius: 10px;
+    border: 1px solid var(--black);
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+}
+
+.content {
+    width: 37ch;
+    color: var(--gray-500);
+    padding-bottom: 10px;
+}
+.published {
+    font-size: 0.9rem;
+}
+.button {
+    padding: 6px 15px;
+    background-color: var(--yellow);
+    width: fit-content;
+    font-weight: bold;
+    border-radius: 5px;
+}
+.image img {
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+.author {
+    font-weight: bold;
+    display: flex;
+    gap: 15px;
+    align-items: center;
+}
+h2:hover {
+    color: var(--yellow);
+    cursor: pointer;
 }