Add rounded border to home page color boxes

Author: Erik2609

assets/scss/templates/_main.scss

@@ -193,6 +193,11 @@ input[type="checkbox"] {
   }
 }
 
+.border-bottom-gradient {
+  border-bottom: 5px solid transparent;
+  border-image: linear-gradient(to left, #ffcbbd, #fffde4);
+  border-image-slice: 1;
+}
 // view ≥768px (md and lg)
 @media (min-width: 768px) {
   .show-mobile {

layouts/partials/landingpage/activityfeed.html

@@ -2,7 +2,7 @@
 {{ with .Params.Activity_Feed}}
 <!-- Featured activities -->
 <section class="activitifeed-section pb-5 mt-5" id="featured">
-  <div class="container" style="background-color:#deecf7;">
+  <div class="container border-bottom-gradient rounded-lg" style="background-color:#deecf7;">
     <div class="row align-items-center">
       <div class="mx-4 col order-1">
         {{ if .featured_activities }}
@@ -74,7 +74,7 @@ <h3 class="mb-2" style="color: #005aa7;">{{$item.title}}</h3>
 
 <!-- Items -->
 <section class="activitifeed-section pt-5 mt-2" id="events">
-  <div class="container" style="background-color:#deecf7;">
+  <div class="container border-bottom-gradient rounded-lg" style="background-color:#deecf7;">
     <div class="row align-items-center">
       <div class="mx-4 col order-1">
         <!-- Activities -->