diff --git a/Project(CSS)/BlogWebsite/avatar.svg b/Project(CSS)/BlogWebsite/avatar.svg
new file mode 100644
index 0000000..6e2e7b2
--- /dev/null
+++ b/Project(CSS)/BlogWebsite/avatar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1744 1744" fill="none" shape-rendering="auto"><metadata xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/"><rdf:RDF><rdf:Description><dc:title>Notionists</dc:title><dc:creator>Zoish</dc:creator><dc:source xsi:type="dcterms:URI">https://heyzoish.gumroad.com/l/notionists</dc:source><dcterms:license xsi:type="dcterms:URI">https://creativecommons.org/publicdomain/zero/1.0/</dcterms:license><dc:rights>Remix of „Notionists” (https://heyzoish.gumroad.com/l/notionists) by „Zoish”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/)</dc:rights></rdf:Description></rdf:RDF></metadata><mask id="viewboxMask"><rect width="1744" height="1744" rx="0" ry="0" x="0" y="0" fill="#fff" /></mask><g mask="url(#viewboxMask)"><g transform="translate(531 487)"><path d="M554 727.7c-99.2 297-363.8 388.6-503.7 19.8-19.3-50.7 31-69.5 66.2-91.9 24.1-15.3 36.8-28.5 35.3-42.2-7-64.4-36.9-243.8-36.9-243.8l-3-5.8s.7-1.6-2.2 1.2c-3 3-9.9 34.2-37 34.2-24.5 0-49.2-10.9-61-86.3C7.2 285.6 9.6 214 40 201c12.5-5.3 24-7.2 35.2-.8 11.3 6.4-13-22 112-126C268.4 6.4 396.7-3.5 448.5 8 500.3 19.5 552 44.8 574.9 98.5c27.8 65-25.9 114.3-14 262.5-2.2 53.6.8 171.2-146.6 210.6-28 7.5-19.3 48.4 22.7 58.4 67 21 117 72.3 117 97.9" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="m554 266.2.1-1.4c4.1-36.4 8.2-71.7 27.1-103.4 6.5 4.4 5.7 10 3.7 15.2-19.9 51.2-18 104.4-16.2 157.6l.4 14c2.1 66.4-14.5 126.8-58.7 177.5-15.4 17.6-35.8 29.8-56.5 40.3-21.4 11-25.9 20.1-19.2 43.6l.8 2.6c1.4 3.9 2.8 7.9-1 11.8-4.5 4.6-9.5 3.3-14.8 1.8l-.6-.1a406.4 406.4 0 0 1-137-68.3c-6-4.4-10.8-10.3-15.5-16.1l-.3-.4c-2.5-3-3-7.8.5-10.4 3.3-2.5 5.8-.5 8.7 1.8l1 .9a145.5 145.5 0 0 0 76.3 31.7c13.4 1.4 26.6.9 40 .4 7.4-.3 14.8-.6 22.3-.5 10.2 0 18.7-4.7 26.7-9.2l2.8-1.6c27.8-15.5 54.3-32.8 72.2-60.7 16.1-25 25.9-52.2 31.6-80.9 7.2-36.1 6.6-72.7 6-109.8-.3-12-.5-24.2-.5-36.4ZM50.6 190.8c21.9-1.7 34 11.2 44.3 26.3a140.4 140.4 0 0 1 22.4 61.5c.5 3.7 1 7.6-1.2 11.3-4.5.6-4.9-3-5-5.6-.5-20.7-9.7-38.7-18.9-56.1-6.6-12.5-16.2-24.6-31.4-27.6-17.2-3.5-33 12-40.8 32.2-14.5 37.6-12 74.6 1.4 111 5.8 15.9 13.1 32.1 27.8 43.2 14.8 11.3 32.7 9.3 43.6-5.7l2-2.5c2-2.6 4-5.1 5-8 2.1-5.8 5.4-11.2 11.3-10.4 6.8 1 8 8.3 8.7 14a3661 3661 0 0 0 22 156.7l5.9 38.8c2.6 17.1 5.6 41.7 3.6 52.1a28 28 0 0 0-.3 2.2c-.4 2.8-.6 5-4.2 5.5-4.9.8-7-2-7.7-6.4-2.3-17-3-23.6-4-49.6-.9-25.2-5.6-50-10.4-74.9l-5-27c-5.2-30.8-10.3-62-10.8-97l-2 3c-7.6 11.3-13.7 20.5-24.5 24a40.5 40.5 0 0 1-46.1-12.5 127.8 127.8 0 0 1-28.8-55.8c-8.4-34-9.9-67.1.9-100.6 5.2-16.1 23.7-44.7 42.2-42Zm34.6 127.5c4.4 3.2 8.4 6 12-5.4-1.1-42.2-14.7-69.2-35.8-70.3 11.2 14.6 22 28.8 23 48.5a32.3 32.3 0 0 1-10.7-8.8c-2-2.2-4-4.4-6.5-6l-3-2.4c-4.8-3.6-9.7-7.4-17.8-4.5 3.8 5.8 9 10 14.3 14 6 4.7 12 9.3 15.6 16.5-10.6 7.7-15.2 17.7-9.7 29.9 4.8 10.5 11.9 19.2 25.9 19.8-.6-6.3-4.7-10.9-8.8-15.4-5-5.4-9.7-10.6-7.5-18.6 3.2-1.5 6.2.7 9 2.7Z" fill="#000"/></g><g transform="translate(178 1057)"><path d="M1303 692 16 688.7S53.5 481.5 111 360C236.9 93.7 489.4 44.3 511.3 56.7c32 18 62.3 40.7 151.4 40.7 91.1 0 148.8-39.5 148.8-39.5s135.3 32.3 200.6 69.5c83.1 47.4 177 187 220.2 295.9 46 115.6 70.7 268.7 70.7 268.7Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1296.8 692c-6.3-26-11.8-51.9-17.3-77.9l-8.4-39c-8-36.6-18.6-72.3-30-107.6a678.2 678.2 0 0 0-42.1-102.8l-7-13.7a802.4 802.4 0 0 0-27.6-50.7c-27.4-45.3-58.1-88.3-97-124a334.8 334.8 0 0 0-102.4-65c-7-2.8-13.8-6-20.7-9.1-7.9-3.7-15.8-7.3-24-10.5-10.6-4-14.4-.7-18.8 7.3-8 14.7-18 28-32.9 36-40.3 21.6-82.3 33.2-126.5 13.6a138 138 0 0 1-48.6-35.4c-6-7-12.2-8.3-20.5-9.5-22-3.3-36.7 4.7-49 23.1-16.3 24.2-42.3 33.2-69.5 35.8a146.6 146.6 0 0 1-108-31.8A203.2 203.2 0 0 1 402 86.5l-9.7 4.5c-6.9 3.1-13.6 6.2-19.8 10-9.6 6-19.7 11-29.8 16a347.3 347.3 0 0 0-34 18.9 454.4 454.4 0 0 0-85.4 73.7 604 604 0 0 0-86.3 122.8 869 869 0 0 0-50 108.1 1216.5 1216.5 0 0 0-34 102 562 562 0 0 0-20.2 102.2c-.6 6.8-2.1 13.6-3.7 20.4-1.9 8.3-3.8 16.8-4.1 25.8-5.5 1-10.6 1-16.9 1 4.5-32.9 9.7-66 16-98.8 2.3-12 5.3-23.7 8.3-35.4l5.3-21.5c5.2-22.6 12.6-44.6 20-66.6l.9-2.7a836.3 836.3 0 0 1 83-179c17-27.2 36-53 57.1-77 37.3-43 79.1-80.3 130-105.9l10.8-5.4c36-18.2 72-36.4 112-44.2 11.1-2.1 22.2-4.6 33-7.6 12.7-3.5 15.2-9.1 10.3-21.1l-1-2.2c-.7-1.6-1.4-3.3-1.7-5v-.4c-.6-3.6-1.2-7.8 3.8-8.9 4.3-1 5.5 1.6 7 5l.6 1.1c1.6 3.2 3 6.5 4.5 9.7 4.8 10.8 9.6 21.7 18.6 30.6a101 101 0 0 0 59.7 27.2l5.3.7c24.8 3.3 49.7 6.7 75 5.4 35.3-1.8 70.2-5.5 104-16.5 5.2-1.7 9.7-4.8 14-8.3 7-5.8 6.5-10.6.5-16.8-8.9-9.2-11-20.6-10.3-32.6 4-1.5 7-.5 7.6 1.8 7 30.4 29.6 36 55.8 39 33.8 3.8 66.1 14.3 98.5 25 25.4 8.5 48.3 21.6 71.2 34.6l18.6 10.5c25 13.8 47.2 32.1 66.9 53.2 22.7 24.3 43.9 50 62.4 77.6 16.1 24 31.5 48.6 45 74.5a1007.4 1007.4 0 0 1 86.5 242c5.6 25.4 9.8 51.3 14.1 77.5 2.2 13.2 4.3 26.4 6.7 39.7-3.2.9-6.7.9-11.2.9ZM573 143a83.8 83.8 0 0 0 49.7-37.7 17 17 0 0 0-9.2-3.5l-2.8-.5a470 470 0 0 0-19.9-3.9c-27-4.8-54-9.7-74-32.8-1.3-1.5-4.6-1.7-7-1.8-27.5-.5-53.4 6.9-79.4 14.3l-11.2 3.2c.8 5.6 2.6 9 5.8 12.2a224 224 0 0 0 39.6 32.5c32.9 21 67.9 30.7 108.4 18Zm224 .3c-31.6 4.3-57.1-9-81-27.6-1.6-1.7-3.3-3-4.9-4.2-3-2.4-5.7-4.5-6.9-8.4 10.1-3.8 20.6-5.8 31.1-7.9 11.2-2.1 22.4-4.3 33-8.6l5.4-1.8c4.3-1.4 8.7-2.8 11.8-5.8 16.7-16.2 36.2-15.6 56.2-10.6 13 3.3 26 7 39.5 11l19 5.6-5.6 6.5c-14.1 16.6-26.6 31.3-46.9 38.5-16.7 6-33.2 11-50.7 13.3Z" fill="#000"/><path d="M1115.6 692c-9.1-36.9-12.1-74.7-22-111.2-7.7-28.1-13.9-56.8-23.8-84-7-19.4-13.7-39-23-57.8-12.7-25-23.1-51.2-34.4-77-1.3-3-2.9-6.3 1.3-8.8 4.3-2.6 7.4-.5 9.8 2.6 3.8 5 7.8 10.2 10.6 15.9 10 20.4 19.4 41.1 29.1 61.6A612.7 612.7 0 0 1 1097 529c9 31.6 17.5 63.6 21.5 96.6 2.6 21.4 7 42.7 8.6 65.4-3.3 1-6.8 1-11.4 1ZM221.2 692c-.6-3 .4-5.8.4-8.7 0-49.6 9.6-98 16.6-146.7 5-35 13.3-69 22.5-102.9a253.5 253.5 0 0 1 31.6-69c2.3-3.6 4-10 10-6.9 6.1 3.2 3.2 9 1.4 13.6-7.2 17.6-15.9 34.7-21.8 52.7a748.3 748.3 0 0 0-31 138.7c-1 8.5-2.7 16.8-4.9 25-7.4 28.5-3.8 58.4-10.9 87-1.1 4.7.3 10.1.3 16.2-4.5 1-8.9 1-14.2 1Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M645.9 165.5c-9 6.6-10.5 15.7-3.6 28.3l4 2.7c2.3 1.5 4.3 3 6.5 3.6 9.5 3 17-2 21.6-9.1 4.7-7 5.5-16.9-1.9-22-7.3-5.1-16.6-10.9-26.6-3.5Zm5.4 17.4Zm0 0c3.8 2.8 7.6 3.4 10.9-.5a3.4 3.4 0 0 0-1.2-5.3c-4.4-1.6-9.2-2.6-9.7 5.8Z" fill="#000"/></g><g transform="translate(266 207)"><path d="M255 299.7c11-28 26-52.4 44-75.1a51 51 0 0 1 9-8.7c3-2.5 7.3-5.4 4.2-10.6-5.5-9.3-1.9-17.1 4.6-24.5-3.5-6-7.2-11.7-10-17.7-5.9-12.2.1-24.3 13.4-27.3 17.5-4 34.5-3.6 50 7 2.8 2 6.1 2.9 10 4.6 3.3-9.8 6-19 9.7-28 6.2-15.3 20-18 30.9-6.1 2.5 2.8 4.7 4.1 8.3 4.5 15.6 1.6 15.5 1.7 19.9 16.6 16.1-4.2 32.3-9 48.6-12.6 37-7.9 74.2-13.2 112.3-8.2a397 397 0 0 1 93.7 22.6c55.7 21.9 105.4 52.6 144.9 98.3 32.3 37.4 64.6 74.9 96.2 113 8.7 10.4 15.4 23 7.8 37.6-5 9.7-14 14.5-23.4 18.3-41.9 17.4-82.8 10.5-124.1-3.7-27-9.3-51-24.8-77.7-34.3-3.9-1.4-7.5-4-12.2-3-4 7.9-.9 16.9-6.5 25.3-12.2 18.1-30.6 17.3-47.8 17.7-27.6.6-55.2-2.4-82.1-8.9-30.5-7.4-60.9-14.7-90.1-25-4 4.5-.4 7 1 9.7 7.6 15.5-.8 29.8-17.8 30.3-8.2.2-16-.3-23.3-4.9-4-2.5-8.5-4-13.6-2.7-3 7.3 1 14.2 1.4 21.2 1 25.9-5.3 50.5-11.7 75.2-6.4 24.3-20.2 44.8-32 66.3-2.9 5.2-6.5 11.1-13.4 10.1-7.6-1-5.2-8.6-6.5-13.6-4.3-16.3-2.2-34-9.6-49.7-7.3-15.4-15.8-30.2-31.5-39-12.6-7-29.5-3.4-36.2 9.2-2.8 5.2-8.3 5.5-11.3 10.7-5.6 9.8-13.7 17.8-12.2 30.5.3 2.4-2.7 4-6.5 3.6a230 230 0 0 1-23-123c1.7-17.8 1-35.7 2.3-53.6 1.3-17.7 6.2-34.2 10.3-52Z" fill="#000"/></g><g transform="translate(791 871)"><path d="M182.3 95.7c-29.2 14-65.1 3-84.2-16-2.3-2.3-3.8-5.6-5.3-8.6-1-2.3-1.6-5 .7-7.1 2.2-2.1 4.7-1.8 7.1-.7 2.6 1.3 5.6 2.5 7.5 4.5 12.1 13 28 16.4 44.7 19C162 88 169 82.3 177 80.2c5.3-1.4 11-9 15-.7 3.3 6.8-1.3 12.9-9.7 16ZM66.6 57.4C71 45.2 80.3 40.6 90.8 37.9c5-1.3 10.8-1.7 13 4.3 2.4 7-3.2 10.9-8.3 12-7.3 1.4-12 4.6-15.4 11.2-2.2 4.3-5.7 9.7-11.7 7-7.2-3-3.8-9-1.8-15Z" fill="#000"/></g><g transform="translate(653 805)"></g><g transform="translate(901 668)"><path d="M65.7 43.5c-4.3 23.6-7.3 45.8-.3 68.8A79.4 79.4 0 0 0 98 157.1c22.3 14.8 22.7 43 .4 57.5-24.6 16.2-50.8 14-77 7.5-11.8-3-17.9-14.2-21-25.4-2.7-9.6 6.5-25.2 16.6-31 3.1 3.8 2.4 7 .2 11.3-6.7 12.3 0 31.4 13.5 32.6 19.8 1.7 40.7 5.8 59.1-8 12.5-9.4 14-21.5 1.8-31.4-7.3-5.9-14.4-11.7-20.6-18.8-28-31.7-29.9-68.2-20-107 3.5-14.3 9.2-27 19-38C73 3 76-.9 80.5 2c5.9 3.9 1.2 8.4-1 12-5.6 9-10.6 18.3-13.8 29.5Z" fill="#000"/></g><g transform="translate(610 680)"><path d="M419.6 111c-4.2-9.5-9.9-15.2-19.8-15.7-6-.3-7-5.1-8.9-9.8 2-1.5 3.5-3.7 5.3-3.8 21.1-1.7 42.4-1.8 63.5-.1 6 .4 9.3 8 3.2 10.4-10 4-12.5 13.2-18.5 19.8-8.2 9-15.2 9.1-24.8-.8ZM228.6 81.4c12.2.7 23.1 1 34 2 3.6.3 8 1.8 8 6.7 0 5.6-4.6 5.2-8.3 5.1-6.3 0-9.7 2.7-12.5 8.6-3.4 7.4-6.9 15.3-18 14.8-10.5-.5-15.1-7.2-18.1-15.2-2.2-5.7-5-8.4-11-8.2-3.4.1-7.1-.2-7.5-4.9-.4-5 3-6 7-7.2a67.9 67.9 0 0 1 26.4-1.7Z" fill="#000"/></g><g transform="translate(610 680)"></g><g transform="translate(774 657)"><path d="M56.8 30.9c9.5-10.6 21.8-16.2 31.6-25C93 1.8 98 3 101.8 7.5c3.8 4.3 7.3 8.3 2.7 14.5a83 83 0 0 1-42.7 28.3C47.4 55 32 56.5 17 59.3c-4.5.9-10.2 3.3-11.5-3.6-1.2-6.6 3.2-10 9.5-11.2 14.2-2.8 28.4-5.2 41.8-13.6ZM289.9 29c11.3 2 18 11 27.8 14.2 3.8 1.2 8.4 4.7 6.6 9.5-2.1 5.8-8 4.3-12.2 3a450.2 450.2 0 0 1-39.2-14.5c-12.8-5.6-25.1-12.4-37.4-19-6-3.2-11.6-7.8-7.4-15.2 4.2-7.3 11-9.5 18.3-3.7C259.4 13.8 275 19.8 290 29Z" fill="#000"/></g><g transform="translate(0 559)"></g></g></svg>
\ No newline at end of file
diff --git a/Project(CSS)/BlogWebsite/index.html b/Project(CSS)/BlogWebsite/index.html
new file mode 100644
index 0000000..df7ff0a
--- /dev/null
+++ b/Project(CSS)/BlogWebsite/index.html
@@ -0,0 +1,400 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="body_Container">
+      <div class="container">
+        <header class="header_container">
+          <h1 class="header_title">Dharm Blogs</h1>
+          <p class="header_desc">
+            Utilize this space to incorporate a captivating subheading crafted
+            by ChatGPT, adding depth and intrigue to your blog.
+          </p>
+        </header>
+        <main class="main_container">
+          <!-- card 1 start  -->
+          <div class="card_container">
+            <a href="#" class="card_image_container">
+              <img
+                src="https://source.unsplash.com/random/600×400?healthy"
+                alt="card 1 image "
+                class="card_image"
+                loading="lazy"
+              />
+            </a>
+            <div class="card_title_container">
+              <a href="#" class="card_title_anchor">
+                <h2 class="card_title">New Gadgets Released</h2>
+                <p class="card_desc">
+                  Check out the latest tech gadgets hitting the market, from
+                  smartphones to smartwatches.
+                </p>
+              </a>
+            </div>
+
+            <div class="card_footer_container">
+              <div class="author_container">
+                <div class="author_avatar_container">
+                  <img
+                    src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
+                    alt="avtar 1"
+                    loading="lazy"
+                    class="aithor_avtar"
+                  />
+                </div>
+                <div class="author_info_container">
+                  <span class="author_name">
+                    John Doe
+                  </span>
+                  <span class="author_date">
+                    sept 19, 2021
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span class="card_tag_container">
+                  Technology
+                </span>
+              </div>
+            </div>
+          </div>
+
+
+          <!-- card 1 end here -->
+          <div class="card_container">
+            <a href="#" class="card_image_container">
+              <img
+                src="https://source.unsplash.com/random/600×400?technology"
+                alt="card 1 image "
+                class="card_image"
+                loading="lazy"
+              />
+            </a>
+            <div class="card_title_container">
+              <a href="#" class="card_title_anchor">
+                <h2 class="card_title">New Gadgets Released</h2>
+                <p class="card_desc">
+                  Check out the latest tech gadgets hitting the market, from
+                  smartphones to smartwatches.
+                </p>
+              </a>
+            </div>
+
+            <div class="card_footer_container">
+              <div class="author_container">
+                <div class="author_avatar_container">
+                  <img
+                    src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
+                    alt="avtar 1"
+                    loading="lazy"
+                    class="aithor_avtar"
+                  />
+                </div>
+                <div class="author_info_container">
+                  <span class="author_name">
+                    John Doe
+                  </span>
+                  <span class="author_date">
+                    sept 19, 2021
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span class="card_tag_container">
+                  Technology
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card_container">
+            <a href="#" class="card_image_container">
+              <img
+                src="https://source.unsplash.com/random/600×400?nutrition"
+                alt="card 1 image "
+                class="card_image"
+                loading="lazy"
+              />
+            </a>
+            <div class="card_title_container">
+              <a href="#" class="card_title_anchor">
+                <h2 class="card_title">New Gadgets Released</h2>
+                <p class="card_desc">
+                  Check out the latest tech gadgets hitting the market, from
+                  smartphones to smartwatches.
+                </p>
+              </a>
+            </div>
+
+            <div class="card_footer_container">
+              <div class="author_container">
+                <div class="author_avatar_container">
+                  <img
+                    src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
+                    alt="avtar 1"
+                    loading="lazy"
+                    class="aithor_avtar"
+                  />
+                </div>
+                <div class="author_info_container">
+                  <span class="author_name">
+                    John Doe
+                  </span>
+                  <span class="author_date">
+                    sept 19, 2021
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span class="card_tag_container">
+                  Technology
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card_container">
+            <a href="#" class="card_image_container">
+              <img
+                src="https://source.unsplash.com/random/600×400?travel"
+                alt="card 1 image "
+                class="card_image"
+                loading="lazy"
+              />
+            </a>
+            <div class="card_title_container">
+              <a href="#" class="card_title_anchor">
+                <h2 class="card_title">New Gadgets Released</h2>
+                <p class="card_desc">
+                  Check out the latest tech gadgets hitting the market, from
+                  smartphones to smartwatches.
+                </p>
+              </a>
+            </div>
+
+            <div class="card_footer_container">
+              <div class="author_container">
+                <div class="author_avatar_container">
+                  <img
+                    src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
+                    alt="avtar 1"
+                    loading="lazy"
+                    class="aithor_avtar"
+                  />
+                </div>
+                <div class="author_info_container">
+                  <span class="author_name">
+                    John Doe
+                  </span>
+                  <span class="author_date">
+                    sept 19, 2021
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span class="card_tag_container">
+                  Technology
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card_container">
+            <a href="#" class="card_image_container">
+              <img
+                src="https://source.unsplash.com/random/600×400?productivity"
+                alt="card 1 image "
+                class="card_image"
+                loading="lazy"
+              />
+            </a>
+            <div class="card_title_container">
+              <a href="#" class="card_title_anchor">
+                <h2 class="card_title">New Gadgets Released</h2>
+                <p class="card_desc">
+                  Check out the latest tech gadgets hitting the market, from
+                  smartphones to smartwatches.
+                </p>
+              </a>
+            </div>
+
+            <div class="card_footer_container">
+              <div class="author_container">
+                <div class="author_avatar_container">
+                  <img
+                    src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
+                    alt="avtar 1"
+                    loading="lazy"
+                    class="aithor_avtar"
+                  />
+                </div>
+                <div class="author_info_container">
+                  <span class="author_name">
+                    John Doe
+                  </span>
+                  <span class="author_date">
+                    sept 19, 2021
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span class="card_tag_container">
+                  Technology
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card_container">
+            <a href="#" class="card_image_container">
+              <img
+                src="https://source.unsplash.com/random/600×400?mindfulness"
+                alt="card 1 image "
+                class="card_image"
+                loading="lazy"
+              />
+            </a>
+            <div class="card_title_container">
+              <a href="#" class="card_title_anchor">
+                <h2 class="card_title">New Gadgets Released</h2>
+                <p class="card_desc">
+                  Check out the latest tech gadgets hitting the market, from
+                  smartphones to smartwatches.
+                </p>
+              </a>
+            </div>
+
+            <div class="card_footer_container">
+              <div class="author_container">
+                <div class="author_avatar_container">
+                  <img
+                    src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
+                    alt="avtar 1"
+                    loading="lazy"
+                    class="aithor_avtar"
+                  />
+                </div>
+                <div class="author_info_container">
+                  <span class="author_name">
+                    John Doe
+                  </span>
+                  <span class="author_date">
+                    sept 19, 2021
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span class="card_tag_container">
+                  Technology
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card_container">
+            <a href="#" class="card_image_container">
+              <img
+                src="https://source.unsplash.com/random/600×400?productivity"
+                alt="card 1 image "
+                class="card_image"
+                loading="lazy"
+              />
+            </a>
+            <div class="card_title_container">
+              <a href="#" class="card_title_anchor">
+                <h2 class="card_title">New Gadgets Released</h2>
+                <p class="card_desc">
+                  Check out the latest tech gadgets hitting the market, from
+                  smartphones to smartwatches.
+                </p>
+              </a>
+            </div>
+
+            <div class="card_footer_container">
+              <div class="author_container">
+                <div class="author_avatar_container">
+                  <img
+                    src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
+                    alt="avtar 1"
+                    loading="lazy"
+                    class="aithor_avtar"
+                  />
+                </div>
+                <div class="author_info_container">
+                  <span class="author_name">
+                    John Doe
+                  </span>
+                  <span class="author_date">
+                    sept 19, 2021
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span class="card_tag_container">
+                  Technology
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card_container">
+            <a href="#" class="card_image_container">
+              <img
+                src="https://source.unsplash.com/random/600×400?sustainability"
+                alt="card 1 image "
+                class="card_image"
+                loading="lazy"
+              />
+            </a>
+            <div class="card_title_container">
+              <a href="#" class="card_title_anchor">
+                <h2 class="card_title">New Gadgets Released</h2>
+                <p class="card_desc">
+                  Check out the latest tech gadgets hitting the market, from
+                  smartphones to smartwatches.
+                </p>
+              </a>
+            </div>
+
+            <div class="card_footer_container">
+              <div class="author_container">
+                <div class="author_avatar_container">
+                  <img
+                    src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
+                    alt="avtar 1"
+                    loading="lazy"
+                    class="aithor_avtar"
+                  />
+                </div>
+                <div class="author_info_container">
+                  <span class="author_name">
+                    John Doe
+                  </span>
+                  <span class="author_date">
+                    sept 19, 2021
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span class="card_tag_container">
+                  Technology
+                </span>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  </body>
+</html>
+
+<!-- 
+
+    https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64
+    https://source.unsplash.com/random/600×400?healthy -->
diff --git a/Project(CSS)/BlogWebsite/photo-1604480131833-5d7aea770e1c.jpg b/Project(CSS)/BlogWebsite/photo-1604480131833-5d7aea770e1c.jpg
new file mode 100644
index 0000000..4013ab1
Binary files /dev/null and b/Project(CSS)/BlogWebsite/photo-1604480131833-5d7aea770e1c.jpg differ
diff --git a/Project(CSS)/BlogWebsite/style.css b/Project(CSS)/BlogWebsite/style.css
new file mode 100644
index 0000000..b038eba
--- /dev/null
+++ b/Project(CSS)/BlogWebsite/style.css
@@ -0,0 +1,168 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    height: 100%;
+    width: 100%;
+}
+
+a{
+    text-decoration: none;
+}
+
+.container{
+    max-width: 66vw;
+    padding: 2rem 1rem;
+    margin: 0 auto;
+    /* background-color: aqua; */
+}
+
+.header_container{
+    margin-bottom: 2.8rem;
+}
+
+.header_title{
+    margin-bottom: 1rem;
+    font-size: 1.7rem;
+    line-height: 2rem;
+    font-weight: 700;
+    text-align: center;
+}
+
+.header_desc{
+    max-width: 568px;
+    text-align: center;
+    color: rgb(105, 99, 99);
+    margin: 0 auto;
+}
+.main_container{
+    display: grid;
+    gap: 1.5rem;
+    /* grid-template-columns: repeat(1, 1fr); */
+    grid-template-columns: repeat(auto-fit, minmax(350px, 400px));
+    justify-content: center;
+}
+
+/* @media (min-width:935px) {
+    .main_container{
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (min-width:1380px) {
+    .main_container{
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+@media (min-width:1870px) {
+    .main_container{
+        grid-template-columns: repeat(4, 1fr);
+    }
+} */
+
+.card_container{
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgb(233, 224, 224);
+    border-radius: 8px;
+}
+
+.card_image_container{
+    position: relative;
+    overflow: hidden;
+    height: 7rem;
+}
+
+@media (min-width: 768px) {
+    .card_image_container{
+            height: 12rem;
+    }
+}
+
+.card_image{
+    object-fit: cover;
+    object-position: center;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+.card_title_container{
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+}
+
+.card_container:hover .card_image{
+    transform: scale(1.1);
+    transition-duration: 200ms;
+}
+
+.card_title{
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+    margin-bottom: 0.3rem;
+    color: rgb(25, 23, 23);
+}
+
+
+.card_title_anchor:hover .card_title{
+    color:rgb(67, 67, 191);
+}
+
+
+.card_desc{
+    color: rgb(113, 107, 107);
+    font-size: 1rem;
+}
+
+.card_footer_container{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.author_container{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+}
+
+.author_avatar_container{
+    height: 2.5rem;
+    width: 2.5rem;
+    overflow: hidden;
+    border: 1px solid rgb(150, 147, 147);
+    border-radius: 50%;
+    background-color: rgb(243, 239, 239);
+}
+
+.author_info_container{
+    display: flex;
+    flex-direction: column;
+}
+
+.author_name{
+    color: rgb(38, 38, 149);
+}
+
+.author_date{
+    color: rgb(136, 126, 126);
+}
+
+.card_tag_container{
+    font-size: 0.79rem;
+    border: 1px solid rgb(76, 71, 71);
+    border-radius: 4px;
+    line-height: 1.3rem;
+    padding: 0.25rem 0.5rem;
+    color: grey;
+}