Removed unused images and improved responsiveness

src/css/style.css

@@ -25,7 +25,6 @@ html {
     padding: 20px;
 }
 
-
 body {
     font-family: 'Poppins', sans-serif;
     background-image: url('../img/background.svg');
@@ -53,6 +52,7 @@ h1 {
 h2 {
     font-size: 2.25rem;
     font-weight: var(--weight-bold);
+    margin-bottom: 2rem;
 }
 
 h3 {
@@ -60,43 +60,61 @@ h3 {
     font-weight: var(--weight-semi-bold);
 }
 
-.feature-container {
+.intro-section .intro-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 5rem auto;
+    text-align: center;
 }
 
-.feature-list {
-    margin-top: 3rem;
+.feature-section .feature-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 5rem auto;
+    text-align: center;
+}
+
+.feature-section .feature-list {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: start;
 }
 
-.feature-item {
+.feature-section .feature-item {
     flex: 1 1 100%;
     display: flex;
     flex-direction: column;
     justify-content: left;
     align-items: center;
-    text-align: center;
     padding: 0 1rem;
 }
 
-.feature-icon {
+.feature-section .feature-icon {
     background: var(--radial-gradient);
     background-clip: text;
+    -webkit-background-clip: text;
     color: transparent;
     font-size: 5rem;
 }
 
-.feature-title {
+.feature-section .feature-title {
     padding: 1rem 0;
 }
 
+@media screen and (max-width: 750px) {
+    .feature-section .feature-list {
+        flex-direction: column;
+    }
+    .feature-section .feature-item {
+        padding: 1.5rem 0;
+    }
+}
+
 a {
     text-decoration: none;
     transition: box-shadow 300ms ease;
@@ -152,7 +170,7 @@ nav a {
     margin-top: 40px;
 }
 
-.hero-section .intro-container {
+.hero-section .hero-container {
     height: 100vh;
     display: flex;
     flex-direction: column;
@@ -204,7 +222,7 @@ nav a {
         padding-top: 100px;
     }
 
-    .hero-section .intro-container {
+    .hero-section .hero-container {
         height: calc(100vh - 100px);
     }
 }

src/index.html

@@ -19,7 +19,7 @@
     <div class="page-container">
         <main>
             <section class="hero-section">
-                <div class="intro-container">
+                <div class="hero-container">
                     <header>
                         <a href="index.html">
                             <img src="img/logo.svg" alt="Logo" width="100" height="35">
@@ -48,23 +48,16 @@
                 </div>
             </section>
             <section class="intro-section" id="intro">
-                <table>
-                    <tr>
-                        <td>
-                            <img src="img/product-preview.jpg" alt="Product preview" width="400" height="376">
-                        </td>
-                        <td>
-                            <h2>Collaboration made easy with ryoko!</h2>
-                            <p>
-                                Do you want to boost your productivity and agility of your
-                                development? <br>
-                                With ryoko you are able to effectively plan your tasks
-                                and manage your projects. It is build with developers in mind and
-                                facilitates effective collaboration.
-                            </p>
-                        </td>
-                    </tr>
-                </table>
+                <div class="content-container intro-container">
+                    <h2>Collaboration made easy with ryoko!</h2>
+                    <p>
+                        Do you want to boost your productivity and agility of your
+                        development? <br>
+                        With ryoko you are able to effectively plan your tasks
+                        and manage your projects. It is build with developers in mind and
+                        facilitates effective collaboration.
+                    </p>
+                </div>
             </section>
             <section class="feature-section">
                 <div class="content-container feature-container">