Adding the reasons section with css

farhana039 · Jul 26, 2024 · 1a919c4 · 1a919c4
1 parent 9ed23e5
commit 1a919c4
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -113,6 +113,32 @@ main {
     color: #ffffff;
 }
 
+/* Reasons section*/
+#reasons {
+    width: 90%;
+    margin: 20px auto;
+}
+
+#reasons h2 {
+    margin-bottom: 20px;
+    text-align: center;
+    font-size: 280%;
+}
+
+#benefits-physical>div, #benefits-mental>div {
+    line-height: 20px;
+    margin-bottom: 20px;
+}
+
+#benefits p {
+    padding: 0 20px;
+}
+
+#benefits hr {
+    border-top: 1px solid #3a3a3a;
+    margin: 5px 0;
+}
+
 /* Footer */
 #social-networks {
     text-align: center;

diff --git a/index.html b/index.html
@@ -43,6 +43,37 @@ <h2>Love Running</h2>
             <h3>Dublin Docklands & Phoenix Park</h3>
         </div>
         </section>
+
+        <!-- Reasons section-->
+        <section id="reasons">
+            <h2>Why Love Running With Us?</h2>
+            <div id="benefits">
+                <div id="benefits-physical">
+                    <div>
+                        <h3>Feel Healthy <i class="fa-solid fa-heart-pulse"></i></h3>
+                        <hr>
+                        <p>Since it improves aerobic fitness, running is a great way to help improve your cardiovascular health. Plus, it burns calories and can build strength.</p>
+                    </div>
+                    <div>
+                        <h3>Feel Strong <i class="fa-solid fa-dumbbell"></i></h3>
+                        <hr>
+                        <p>Running strengthens your heart by pumping blood more effectively through your body.</p>
+                    </div>
+                </div>
+                <div id="benefits-mental">
+                    <div>
+                        <h3>Feel Free <i class="fa-brands fa-fly"></i></h3>
+                        <hr>
+                        <p>Physical exercise, running included, is known to release endorphins in the brain. Endorphins make you more energetic, more awake and, yes, happier.</p>
+                    </div>
+                    <div>
+                        <h3>Get Social <i class="fa-solid fa-globe"></i></h3>
+                        <hr>
+                        <p>When we run with others, we can run farther and faster more easily. Social running can pull you out of a running funk or low mood, and inspire you to try new events.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
      </main>
 
     <!-- Footer -->