Add 'blog-posts' section and 'post-item' component

src/components/_blog-posts.html

@@ -0,0 +1,40 @@
+<section class="blog-posts">
+    <div class="container">
+
+        <h2 class="blog-posts__title title">Caring is the new marketing</h2>
+
+        <p class="blog-posts__subtitle subtitle">The Nexcent blog is the best place to read about the latest membership insights, trends and more. See who's joining the community, read about how our community are increasing their membership income and lot's more.​</p>
+
+        <div class="blog-posts__items">
+
+            @@include('./_post-item.html', {
+                "img": {
+                    "src": "img/post-item/laptop-1.jpeg",
+                    "alt": "Image",
+                },
+                "title": "Creating Streamlined Safeguarding Processes with OneRen",
+                "readmoreLink": "#",
+            })
+
+            @@include('./_post-item.html', {
+                "img": {
+                    "src": "img/post-item/laptop-2.jpeg",
+                    "alt": "Image",
+                },
+                "title": "What are your safeguarding responsibilities and how can you manage them?",
+                "readmoreLink": "#",
+            })
+
+            @@include('./_post-item.html', {
+                "img": {
+                    "src": "img/post-item/laptop-3.jpeg",
+                    "alt": "Image",
+                },
+                "title": "Revamping the Membership Model with Triathlon Australia",
+                "readmoreLink": "#",
+            })
+
+        </div>
+
+    </div>
+</section>

src/components/_post-item.html

@@ -0,0 +1,15 @@
+<article class="post-item">
+
+    <div class="post-item__img">
+        <img src="@@img.src" alt="@@img.alt">
+    </div>
+
+    <div class="post-item__caption">
+
+        <h4 class="post-item__title title">@@title</h4>
+
+        <a class="btn-arrow-tertiary" href="@@readmoreLink">Readmore</a>
+
+    </div>
+
+</article>

src/index.html

@@ -56,6 +56,8 @@
 
         @@include('./components/_img-quote.html')
 
+        @@include('./components/_blog-posts.html')
+
     </main>
 
     <script src="js/script.min.js"></script>

src/scss/abstracts/_colors.scss

@@ -4,6 +4,7 @@ $neutral-3: #717171;
 $neutral-4: #89939E;
 
 $tint-1: #E8F5E9;
+$tint-2: #C8E6C9;
 
 $shade-1: #388E3B;
 

src/scss/components/_btn.scss

@@ -5,22 +5,27 @@
 
 
 
-.btn {
+.btn,
+.btn-arrow-tertiary {
     @include flex (inline-flex, center, center);
 
+    border-radius: 4px;
+
+    transition: transitions.$btn;
+
+    white-space: nowrap;
+    text-align: center;
+}
+
+.btn {
     padding: 14px 32px;
 
     background: colors.$brand-primary;
-    border-radius: 4px;
-
-    transition: transitions.$btn;
 
     font-size: 16px;
     line-height: 150%;
     font-weight: 500;
     color: colors.$default-white;
-    white-space: nowrap;
-    text-align: center;
 
     &:active {
         background: colors.$shade-1;
@@ -29,4 +34,56 @@
     @media (max-width: $md) {
         padding: 12px 26px;
     }
-}
+}
+
+.btn-arrow-tertiary {
+    padding: 8px;
+
+    background: transparent;
+
+    color: colors.$brand-primary;
+    font-size: 20px;
+    line-height: 140%;
+    font-weight: 600;
+
+    @media (max-width: $lg) {
+        font-size: 19px;
+    }
+    @media (max-width: $sm) {
+        font-size: 18px;
+    }
+
+
+    &:after {
+        content: "";
+
+        display: inline-block;
+
+        margin-left: 8px;
+
+        width: 24px;
+        height: 24px;
+
+        background: colors.$brand-primary;
+        mask-image: url("../img/btn-arrow.svg");
+
+        transition: inherit;
+    }
+
+
+    &:hover {
+        background: colors.$tint-1;
+
+        &:after {
+            transform: translateX(2px);
+        }
+    }
+
+    &:active {
+        background: colors.$tint-2;
+
+        &:after {
+            transform: translateX(4px);
+        }
+    }
+}

src/scss/components/_post-item.scss

@@ -0,0 +1,66 @@
+@use "abstracts/colors";
+@use "abstracts/breakpoints" as *;
+@use "abstracts/mixins" as *;
+
+
+
+.post-item {
+    @include flex (flex, null, center, null, null, column);
+
+    &__img {
+        width: 100%;
+        height: 286px;
+
+        @media (max-width: $md) {
+            height: 256px;
+        }
+        @media (max-width: $sm) {
+            height: 226px;
+        }
+
+
+        img {
+            width: 100%;
+            height: 100%;
+
+            object-fit: cover;
+            border-radius: 8px;
+        }
+    }
+
+    &__caption {
+        flex: 1;
+        @include flex (flex, space-between, null, 16px, null, column);
+
+        width: calc(100% - (2 * 25.5px));
+
+        margin-top: -96px;
+        padding: 16px;
+
+        border-radius: 8px;
+        background: colors.$neutral-2;
+        box-shadow: 0px 8px 16px 0px rgba(171, 190, 209, 0.40);
+
+        @media (max-width: $sm) {
+            gap: 12px;
+
+            width: calc(100% - (2 * 20px));
+
+            margin-top: -86px;
+            padding: 14px;
+        }
+        @media (max-width: $sm) {
+            gap: 8px;
+
+            width: calc(100% - (2 * 15px));
+
+            margin-top: -76px;
+            padding: 12px;
+        }
+    }
+
+    &__title {
+        text-align: center;
+        color: colors.$neutral-3;
+    }
+}

src/scss/layout/_blog-posts.scss

@@ -0,0 +1,41 @@
+@use "abstracts/breakpoints" as *;
+@use "abstracts/mixins" as *;
+
+
+
+.blog-posts {
+    margin-bottom: 95px;
+
+    @media (max-width: $xl) {
+        margin-bottom: 80px;
+    }
+    @media (max-width: $lg) {
+        margin-bottom: 64px;
+    }
+    @media (max-width: $md) {
+        margin-bottom: 48px;
+    }
+
+
+    &__title,
+    &__subtitle {
+        text-align: center;
+    }
+
+    &__subtitle {
+        max-width: 630px;
+
+        margin: 8px auto 16px auto;
+    }
+
+    &__items {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        gap: 24px;
+
+        @media (max-width: $sm) {
+            grid-template-columns: 1fr;
+            gap: 20px;
+        }
+    }
+}

src/scss/style.scss

@@ -4,6 +4,7 @@
 
 @use "components/btn";
 @use "components/container";
+@use "components/post-item";
 
 @use "layout/header";
 @use "layout/hero";
@@ -12,3 +13,4 @@
 @use "layout/section-img-content";
 @use "layout/achievements";
 @use "layout/img-quote";
+@use "layout/blog-posts";