From e78efd2f6d01eb8c7e5bf377c9646ec8641c5fa7 Mon Sep 17 00:00:00 2001
From: Notoric <tom@acornes.com>
Date: Sat, 9 Mar 2024 17:08:09 +0000
Subject: [PATCH] added a background color and some underlines

---
 css/styles.css | 18 +++++++++---------
 index.html     |  8 ++++----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 6fc4f95..918573c 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -153,6 +153,10 @@ h3 {
   text-align: center;
 }
 
+#table-heading {
+  margin-bottom: 25px;
+}
+
 .feature-showcase {
   display: flex;
   flex-direction: column;
@@ -192,8 +196,8 @@ h3 {
   width: calc(100% - 34px);
   min-height: 100px;
   margin: 12px;
-  border-radius: 55px;
-  border: 5px solid black;
+  border-radius: 52px;
+  border: 3px solid var(--bgColor);
   overflow: hidden;
 
   transition: width 1s ease, height 1s ease;
@@ -279,7 +283,7 @@ h3 {
     height: 800px;
     width: 150px;
     min-width: 150px;
-    border-radius: 80px;
+    border-radius: 74px;
   }
 
   .carousel-item .carousel-id {
@@ -316,18 +320,14 @@ h3 {
   .feature-showcase-item {
     padding: 30px;
   }
-
-  #table-heading {
-    margin-bottom: 50px;
-  }
   
-  #responsive-design {
+  #interactive-ui {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
     border-right: 1px solid var(--bgColor);
   }
   
-  #resize-support {
+  #responsive-design {
     grid-column: 2 / 2;
     grid-row: 2 / 3;
   }
diff --git a/index.html b/index.html
index af2bd70..a86b839 100644
--- a/index.html
+++ b/index.html
@@ -46,15 +46,15 @@
         <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>
+            <div class="feature-showcase-item" id="interactive-ui">
+              <h3>Interactive UI</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>
+            <div class="feature-showcase-item" id="responsive-design">
+              <h3>Responsive Design</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>