WIP: need help adding above 6 sections doesnt fit navbar

layouts/index.html

@@ -23,7 +23,8 @@
     <link rel="stylesheet" href="{{ "/css/sections/projects.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/>
-
+    <link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/>
+    
     <!-- Add Google Analytics if enabled in configuration -->
     {{ if site.GoogleAnalytics }}
         {{ template "_internal/google_analytics_async.html" . }}

layouts/partials/cards/accomplishments.html

@@ -0,0 +1,35 @@
+<div
+  class="col-sm-12 col-md-6 col-lg-4 p-2 filtr-item"
+  
+>
+  <div class="card mt-1">
+    <div class="card">
+      <a class="card-header">
+        <div>
+          <div class="d-flex">
+            {{ if .logo }}
+
+            {{ $logoImage:= resources.Get .logo}}
+            {{ if $logoImage }}
+            {{ $logoImage := $logoImage.Fit "24x24" }}
+
+            <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+            {{ end }}
+            {{ end }}
+            <h6 class="card-title mb-0">{{ .name }}</h6>
+          </div>
+          <div class="sub-title ml-2 pl-4 ">
+            <span>{{ .organization }}</span>
+            <span>{{ .timeline }}</span>
+          </div>
+        </div>
+      </a>
+      <div class="card-body text-justify  pt-1 pb-1">
+        <p class="ml-2 mb-2 pl-2 ">{{ .overview | markdownify }}</p>
+        <!-- Display certificate discription and link  -->
+        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ if .url }}{{ .url }}{{ else }}#accomplishments{{ end }}" target="_blank" role="button">see certificate</a>
+
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/sections/accomplishments.html

@@ -0,0 +1,18 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 accomplishments-section" id="{{ $sectionID }}">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
+  
+  <div class="container">
+    <div class="row" id="acomplishment-card-holder">
+      {{ range .certificates }}
+        {{ partial "cards/accomplishments" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>

static/css/sections/accomplishments.css

@@ -0,0 +1,112 @@
+.accomplishments-section .card .card-header {
+    background-color: #f9fafc;
+    padding: 0.7rem;
+    padding-bottom: 0rem;
+    text-decoration: none;
+  }
+  
+  .accomplishments-section .card .card-img-xs {
+    margin-right: 0.5rem;
+  }
+  
+  .card .card-header .sub-title span:nth-child(1) {
+    float: left;
+  }
+  .card .card-header .sub-title span:nth-child(2) {
+    float: right;
+  }
+  
+  .accomplishments-section .card .card-body {
+    padding: 0.7rem;
+  }
+  
+  .accomplishments-section .card .card-header .sub-title {
+    color: #8392a5;
+    margin-top: 0.4rem;
+  }
+  
+  
+  /* ============= Device specific fixes ======= */
+  
+  /* Large screens such as TV */
+  @media only screen and (min-width: 1824px) {
+  }
+  
+  /* Extra large devices (large desktops, 1200px and up) */
+  
+  @media (max-width: 1400px) {
+  }
+  
+  @media (max-width: 1200px) {
+  }
+  
+  /* IPad Pro */
+  @media (max-width: 1024px) {
+    .accomplishments-section {
+      padding-left: 0;
+      padding-right: 0;
+      width: 100%;
+    }
+    .accomplishments-section .container {
+      max-width: 100%;
+    }
+    .accomplishments-section  {
+      padding: 0;
+    }
+    .accomplishments-section  {
+      padding-left: 0.2rem;
+      padding-right: 0.2rem;
+    }
+  }
+  
+  /*  Large devices (desktops, 992px and up) */
+  
+  @media (max-width: 992px) {
+  }
+  
+  /* Medium devices (tablets, 768px and up) */
+  
+  @media only screen and (max-width: 768px) {
+    .accomplishments-section {
+      padding-left: 0;
+      padding-right: 0;
+      width: 100%;
+    }
+    .accomplishments-section .container {
+      max-width: 100%;
+    }
+    .accomplishments-section  {
+      padding: 0;
+    }
+    .accomplishments-section  {
+      padding-left: 0.2rem;
+      padding-right: 0.2rem;
+      flex: 50%;
+      max-width: calc(100% / 2 - 0.2rem);
+    }
+  }
+  
+  /* Small devices (landscape phones, 576px and up) */
+  
+  @media only screen and (max-width: 576px) {
+    .accomplishments-section .btn {
+      margin-top: 0.3125rem;
+    }
+    .accomplishments-section  {
+      flex: 100%;
+      max-width: 100%;
+    }
+  }
+  
+  /* iPhoneX, iPhone 6,7,8 */
+  @media only screen and (max-width: 375px) {
+  }
+  
+  /* Galaxy S5, Moto G4 */
+  @media only screen and (max-width: 360px) {
+  }
+  
+  /* iPhone 5 or before */
+  @media only screen and (max-width: 320px) {
+  }
+