blog safak#4

src/app/blog/blog.module.css

@@ -1 +1,10 @@
-.container{}
+.container{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.post {
+    width: 33%;
+}

src/app/blog/page.jsx

@@ -4,10 +4,18 @@ import styles from "./blog.module.css";
 const BlogPage = () => {
   return (
     <div className={styles.container}>
-      <PostCard />
-      <PostCard />
-      <PostCard />
-      <PostCard />
+      <div className={styles.post}>
+        <PostCard />
+      </div>
+      <div className={styles.post}>
+        <PostCard />
+      </div>
+      <div className={styles.post}>
+        <PostCard />
+      </div>
+      <div className={styles.post}>
+        <PostCard />
+      </div>
     </div>
   );
 };

src/components/postCard/postCard.jsx

@@ -1,5 +1,21 @@
+import Link from "next/link"
+import Image from "next/image"
+import styles from "./postcard.module.css"
+
 const PostCard = () => {
-    return <div className={}>PostCard</div>;
+    return <div className={styles.container}>
+        <div className={styles.top}>
+            <div className={styles.imgContainer}>
+                <Image src="/static/girl.png" fill alt="" className={styles.img} />
+            </div>
+            <span className={styles.date}>2024.02.02</span>
+        </div>
+        <div className={styles.bottom}>
+            <h1 className={styles.title}>Title</h1>
+            <p className={styles.desc}>Desc</p>
+            <Link href="/blog/post">READ MORE</Link>
+        </div>
+    </div>;
 };
 
 export default PostCard;

src/components/postCard/postcard.module.css

@@ -1 +1,26 @@
-.container{}
+.container{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 40px;
+    margin-top: 10px;
+}
+
+.top{
+    display: flex;
+}
+
+.imgContainer{
+    position: relative;
+    width: 90%;
+    height: 300px;
+}
+
+.img{
+    object-fit: cover;
+}
+
+.date {
+    font-size: 12px;
+    transform: rotate(270deg);
+}