Customized landing page into Mental Health Awareness website

README.md

@@ -64,6 +64,23 @@ Start Bootstrap was created by and is maintained by **[David Miller](https://dav
 
 Start Bootstrap is based on the [Bootstrap](https://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
 
+## Project Description
+This project is a Mental Health Awareness website created by customizing
+an existing open-source Bootstrap landing page template.
+
+## Improvements Made
+- Updated the main heading and description to focus on mental health
+- Added a student mental health awareness section
+- Added mental wellness tips for daily well-being
+- Improved the website color scheme
+- Enhanced project documentation
+
+## Learning Outcome
+This project helped me understand GitHub workflows such as forking a repository,
+editing files directly on GitHub, committing changes, and improving
+an open-source project.
+
+
 ## Copyright and License
 
 Copyright 2013-2023 Start Bootstrap LLC. Code released under the [MIT](https://github.com/StartBootstrap/startbootstrap-landing-page/blob/master/LICENSE) license.

dist/css/styles.css

@@ -10916,4 +10916,13 @@ header.masthead h1, header.masthead .h1 {
 footer.footer {
   padding-top: 4rem;
   padding-bottom: 4rem;
-}
+}
+/* Custom styles added for Mental Health Awareness */
+
+body {
+  background-color: #f1f9f6;
+}
+
+h1, h2 {
+  color: #2f855a;
+}

dist/index.html

@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         <meta name="description" content="" />
         <meta name="author" content="" />
-        <title>Landing Page - Start Bootstrap Theme</title>
+        <title>Mental Health Awareness Website</title>
         <!-- Favicon-->
         <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
         <!-- Bootstrap icons-->
@@ -30,7 +30,13 @@
                     <div class="col-xl-6">
                         <div class="text-center text-white">
                             <!-- Page heading-->
-                            <h1 class="mb-5">Generate more leads with a professional landing page!</h1>
+                            <h1 class="mb-5">Mental Health Awareness</h1>
+                            <p class="lead mb-4">
+Mental health is as important as physical health.
+This website aims to spread awareness about mental well-being,
+especially among college students.
+</p>
+
                             <!-- Signup form-->
                             <!-- * * * * * * * * * * * * * * *-->
                             <!-- * * SB Forms Contact Form * *-->
@@ -99,6 +105,31 @@ <h3>Easy to Use</h3>
                 </div>
             </div>
         </section>
+        <section class="features-icons bg-light text-center">
+  <div class="container">
+    <h2 class="mb-4">Student Mental Health</h2>
+    <p>
+      College and engineering students often face exam stress,
+      academic pressure, anxiety, and lack of sleep.
+      Focusing on mental health helps students stay balanced
+      and perform better academically.
+    </p>
+  </div>
+</section>
+        <section class="showcase">
+  <div class="container py-5">
+    <h2>Mental Wellness Tips</h2>
+    <ul style="list-style-position: inside;">
+      <li>Maintain a regular sleep schedule</li>
+      <li>Take breaks during long study hours</li>
+      <li>Talk to friends, family, or mentors</li>
+      <li>Practice meditation or deep breathing</li>
+      <li>Limit screen time and social media</li>
+    </ul>
+  </div>
+</section>
+
+
         <!-- Image Showcases-->
         <section class="showcase">
             <div class="container-fluid p-0">