Fix Invalid HTML on front pg #99

Author: lunacodes

content/_includes/home/feature-boxes.html

@@ -1,7 +1,7 @@
 <section class="features-grid">
 {%- for feature in site.data.home.feature_boxes -%}
   <div class="feature-item {{ feature.title | downcase | replace: " ", "-" }}">
-    <a class="no-underline black-text feature-box-wrap-link" href="{{ feature.box_url }}"><h3 class="feature-title" id="{{ feature.title | downcase | replace: " ", "-" }}">{{ feature.title }}</h3></a>
+    <a class="feature-title" href="{{ feature.box_url }}">{{ feature.title }}</a>
     <a class="no-underline black-text feature-box-wrap-link" href="{{ feature.box_url }}"><img src="/assets/img/{{ feature.icon }}" class="feature-img" alt="{{ feature.icon-alt }}"></a>
     <p class="feature-text">{{ feature.text | markdownify | remove: "<p>" | remove: "</p>" }}</p>
   </div>

content/_layouts/default.html

@@ -11,7 +11,7 @@
   </ul>
 
   <div class="site-wrapper {{ page.class }} page-{{ page.permalink | downcase | replace: "/", "" | replace: " ", "-" }}" id="siteTop">
-    {%- include top_nav.html -%}
+    {% include top_nav.html %}
 
     {%- if page.class contains 'home' or page.title == 'Home' -%}
       {%- include header.html -%}

content/_sass/partials/home/_features.scss

@@ -52,17 +52,6 @@
   }
 }
 
-.feature-box-wrap-link {
-  &:visited {
-    color: $black;
-  }
-
-  &:hover,
-  &:active {
-    color: $cwl-red;
-  }
-}
-
 .feature-item {
   align-items: center;
   box-shadow: 0 6px 15px $box-shadow--color;
@@ -76,6 +65,24 @@
   @include hide-anchor-symbols;
 }
 
+.feature-title {
+  color: $black;
+  font-size: calc(1.3rem + 0.6vw);
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0 0 1rem;
+  text-decoration: none;
+
+  &:visited {
+    color: $black;
+  }
+
+  &:hover,
+  &:active {
+    color: $cwl-red;
+  }
+}
+
 @include media-breakpoint-up(md) {
   .feature-title {
     font-size: 1.3rem;