ongoing

css/index.css

@@ -538,7 +538,120 @@ h1, h2, h3, h4, h5, h6, p {
 }
 #our-blog .blog-container {
   margin: 2rem 0 2.5rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 1rem;
 }
-#our-blog .blog-container div {
-  margin: 0;
+@media screen and (max-width: 992px) {
+  #our-blog .blog-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (max-width: 767px) {
+  #our-blog .blog-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+#our-blog .blog-container .blog-single {
+  width: 100%;
+  height: 100%;
+  border: 1.5px solid rgb(173, 188, 255);
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+}
+#our-blog .blog-container .blog-single .img-container {
+  height: 100%;
+  flex: 3;
+}
+#our-blog .blog-container .blog-single .details {
+  flex: 2;
+  padding: 1rem 1rem 0.5rem;
+  line-height: 1.4;
+}
+#our-blog .blog-container .blog-single .details .title {
+  font-size: 0.95rem;
+  color: rgb(0, 0, 0);
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+#our-blog .blog-container .blog-single .details p {
+  font-size: 0.85rem;
+  color: rgba(0, 0, 0, 0.6);
+  line-height: 1.7;
+}
+#our-blog .blog-container .blog-single:first-child {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+#our-blog .blog-container .blog-single:first-child .details {
+  padding-top: 1.5rem;
+}
+#our-blog .blog-container .blog-single:first-child .title {
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+}
+#our-blog .blog-container .blog-single:first-child p {
+  font-size: 0.9rem;
+  line-height: 1.7;
+}
+@media screen and (max-width: 992px) {
+  #our-blog .blog-container .blog-single:first-child {
+    grid-column: unset;
+    grid-row: unset;
+  }
+  #our-blog .blog-container .blog-single:first-child .title {
+    font-size: 1rem;
+  }
+  #our-blog .blog-container .blog-single:first-child p {
+    font-size: 0.85rem;
+  }
+}
+#our-blog .blog-container .blog-single:nth-child(4) {
+  grid-column: span 2;
+  flex-direction: row;
+}
+#our-blog .blog-container .blog-single:nth-child(4) .img-container {
+  height: 100%;
+  flex: 1;
+}
+#our-blog .blog-container .blog-single:nth-child(4) .details {
+  flex: 1;
+}
+#our-blog .blog-container .blog-single:nth-child(4) p {
+  font-size: 0.8rem;
+}
+@media screen and (max-width: 992px) {
+  #our-blog .blog-container .blog-single:nth-child(4) {
+    grid-column: unset;
+    flex-direction: column;
+  }
+  #our-blog .blog-container .blog-single:nth-child(4) .img-container {
+    flex: 3;
+  }
+  #our-blog .blog-container .blog-single:nth-child(4) .details {
+    flex: 2;
+  }
+}
+
+#current-news {
+  font-family: "Noto Serif Bengali", serif;
+  color: rgb(0, 0, 0);
+  background: url(../images/8-news.svg) no-repeat center center/cover;
+}
+#current-news .section-title {
+  color: rgb(255, 255, 255);
+}
+#current-news .link-btn-outline {
+  display: block;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin: 2rem auto;
+  border-color: rgb(255, 255, 255);
+  color: rgb(255, 255, 255);
+  background: transparent;
 }/*# sourceMappingURL=index.css.map */

css/index.sass

@@ -242,9 +242,120 @@
 
     .blog-container
         margin: 2rem 0 2.5rem
+        display: grid
+        grid-template-columns: repeat(4, 1fr)
+        grid-gap: 1rem
+
+        @media screen and ( max-width: 992px )
+            grid-template-columns: repeat(2, 1fr)
+
+        @media screen and ( max-width: 767px )
+            grid-template-columns: repeat(1, 1fr)
+            
+
+        .blog-single
+            width: 100%
+            height: 100%
+            border: 1.5px solid $thirdColor
+            display: flex
+            flex-direction: column
+            border-radius: 5px
+
+            .img-container
+                height: 100%
+                flex: 3
+
+            .details
+                flex: 2
+                padding: 1rem 1rem .5rem
+                line-height: 1.4
+
+                .title
+                    font-size: .95rem
+                    color: $blackColor
+                    text-decoration: none
+                    cursor: pointer
+                    font-weight: 600
+                    line-height: 1.2
+                    margin-bottom: .5rem
+                    display: block
+
+
+                p
+                    font-size: .85rem
+                    color: $greyColor
+                    line-height: 1.7
+
+            &:first-child
+                grid-column: span 2
+                grid-row: span 2
+
+                .details
+                    padding-top: 1.5rem
+
+                .title
+                    font-size: 1.3rem
+                    margin-bottom: 1rem
+
+                p
+                    font-size: .9rem
+                    line-height: 1.7
+
+                @media screen and ( max-width: 992px )
+                    grid-column: unset
+                    grid-row: unset
+
+                    .title
+                        font-size: 1rem
+
+                    p
+                        font-size: .85rem
+
+
+            &:nth-child(4)
+                grid-column: span 2
+                flex-direction: row
+
+                .img-container
+                    height: 100%
+                    flex: 1
+
+                .details
+                    flex: 1
+
+                p
+                    font-size: .8rem
+                
+                @media screen and ( max-width: 992px )
+                    grid-column: unset
+                    flex-direction: column
+
+                    .img-container
+                        flex: 3
+
+                    .details
+                        flex: 2
+
+
+
+// current-news
+#current-news
+    font-family: $fontNotoBangla 
+    color: $blackColor
+    background: url(../images/8-news.svg) no-repeat center center/cover
+
+    .section-title
+        color: $whiteColor
+
+    .link-btn-outline
+        display: block
+        width: fit-content
+        margin: 2rem auto
+        border-color: $whiteColor
+        color: $whiteColor
+        background: transparent
+
 
-        div
-            margin: 0
 
 
 

index.html

@@ -841,29 +841,77 @@
 
                 <div class="blog-container">
 
-                    <div class="row g-3">
+                    <div class="blog-single">
+                        
+                        <div class="img-container">
+                            <img src="./images/blog-1.svg" alt="">
+                        </div>
+
+                        <div class="details">
+                            <a href="#" class="title">
+                                English Learning
+                            </a>
+
+                            <p>
+                                We are shocked to learn that at least 23 people were killed and 9 others injured in car crash How to keep up with the world Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt .....
+                            </p>
 
-                        <div class="col-12 col-md-6">
-                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, expedita?
                         </div>
 
-                        <div class="col-12 col-md-6">
-                            
-                            <div class="row g-3">
+                    </div>
 
-                                <div class="col-12 col-md-6">
-                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, similique.
-                                </div>
+                    <div class="blog-single">
+                        
+                        <div class="img-container">
+                            <img src="./images/blog-2.svg" alt="">
+                        </div>
 
-                                <div class="col-12 col-md-6">
-                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, similique.
-                                </div>
+                        <div class="details">
+                            <a href="#" class="title">
+                                How to keep up with the world
+                            </a>
 
-                                <div class="col-12">
-                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, similique.
-                                </div>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. . .
+                            </p>
 
-                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="blog-single">
+                        
+                        <div class="img-container">
+                            <img src="./images/blog-3.svg" alt="">
+                        </div>
+
+                        <div class="details">
+                            <a href="#" class="title">
+                                How to keep up with the world
+                            </a>
+
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. . .
+                            </p>
+
+                        </div>
+
+                    </div>
+
+                    <div class="blog-single">
+                        
+                        <div class="img-container">
+                            <img src="./images/blog-4.svg" alt="">
+                        </div>
+
+                        <div class="details">
+                            <a href="#" class="title">
+                                Ace your Exams
+                            </a>
+
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. . .
+                            </p>
 
                         </div>
 
@@ -878,6 +926,23 @@
             </div>
 
         </section>
+
+        <section id="current-news">
+
+            <div class="container">
+
+                                
+                <h2 class="section-title">
+                    পড়ুন আমাদের ব্লগ
+                </h2>
+
+                <a href="#" class="link-btn-outline" role="button">
+                    সকল ব্লগ
+                </a>
+
+            </div>
+
+        </section>
         
     </main>