Nicely styled the first features section

css/styles.css

@@ -133,17 +133,38 @@ h2 {
   margin: 0;
 }
 
-#features {
+h3 {
+  font-size: 1.5em;
+  font-weight: 300;
+  margin: 0;
+
+}
+
+.features {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-#features p {
+#features-intro p {
   text-align: center;
 }
 
+.feature-showcase {
+  display: flex;
+  flex-direction: column;
+}
+
+.feature-showcase-item {
+  padding: 30px;
+  border-bottom: 1px solid var(--bgColor);
+}
+
+#modern-css {
+  border-bottom: none;
+}
+
 /* CAROUSEL STYLES */
 
 #carousel {
@@ -280,4 +301,39 @@ h2 {
     margin: auto;
   }
 
+  /* BELOW LANDING STYLES */
+
+  .feature-showcase {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+  }
+  
+  .feature-showcase-item {
+    padding: 30px;
+  }
+  
+  #responsive-design {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    border-right: 1px solid var(--bgColor);
+  }
+  
+  #resize-support {
+    grid-column: 2 / 2;
+    grid-row: 2 / 3;
+  }
+  
+  #user-input {
+    grid-column: 1 / 2;
+    grid-row: 3 / 3;
+    border-right: 1px solid var(--bgColor);
+    border-bottom: none;
+  }
+  
+  #modern-css {
+    grid-column: 2 / 2;
+    grid-row: 3 / 3;
+  }
+
 }

index.html

@@ -19,7 +19,7 @@
       </div>
 
       <div id="below-landing">
-        <section id="features" class="content-column">
+        <section id="features-intro" class="content-column features">
           <h2>Features</h2>
           <p>
             This webpage has been designed to display a variety of different web development skills and features.
@@ -42,8 +42,48 @@
             </div>
           </div>
         </div>
+        
+        <section id="feature-showcase-1" class="content-column features">
+          <h2 id="table-heading" class="content-column">A Few Features</h2>
+          <div class="feature-showcase">
+            <div class="feature-showcase-item" id="responsive-design">
+              <h3>Responsive Design</h3>
+              <p>
+                This website has been designed to provide satisfying user feedback. From using javscript to expand the carousel to using css to change the shape of the title on the landing page, the website has been designed to provide an outstanding user experience.
+              </p>
             </div>
 
+            <div class="feature-showcase-item" id="resize-support">
+              <h3>Resize Support</h3>
+              <p>
+                The website has been designed to support a variety of different devices and aspect ratios. The website will adapt to the size of the window and display the content in a way that is easy to read and navigate.
+              </p>
+            </div>
+
+            <div class="feature-showcase-item" id="user-input">
+              <h3>User Input</h3>
+              <p>
+                The website has been designed to allow the user to interact with the website. This includes the ability to change the background color of the website.
+              </p>
+            </div>
+
+            <div class="feature-showcase-item" id="modern-css">
+              <h3>Modern CSS</h3>
+              <p>
+                The website has been designed to use modern css features such as the flex layout and grids to provide a visually appealing layout.
+              </p>
+            </div>
+          </div>
+        </section>
+<!--
+        <section id="feature-showcase-2" class="content-column">
+          <div class="feature-showcase-item" id="animation"></div>
+          <div class="feature-showcase-item" id="api-useage"></div>
+          <div class="feature-showcase-item" id="browser-data"></div>
+          <div class="feature-showcase-item" id="great-website"></div>
+        </section>
+      </div>
+-->
     </main>
     <script src="js/scripts.js"></script>
   </body>