Merge pull request #60 from code4policy/lydia-working

edited the text at the top and adjusted images

public/index.html

@@ -254,34 +254,17 @@
 <section>
     <div class="section-content">
         <div class="left-content">
-            <h1 class="centered-header">Housing Resource Guide</h1>
+            <h1 class="centered-header">Housing Stability Resource Guide</h1>
             <div class="text-content">
-                <p>Welcome to the Housing Assistance Toolkit! Our goal is to provide comprehensive resources to help you navigate housing options in Boston. Whether you are looking for affordable housing, assistance programs, or general information, we are here to assist you.</p>
+                <p>Our goal is to help you navigate Boston's resources to assist renters and homeowners ensure housing stability. The tool below provides information and links to programs that assist on issues like rental payments, eviction, and foreclosure.</p>
             </div>
         </div>
 
         <div class="right-content">
             <img src="flow-chart-header.png" alt="City of Boston flow chart header" class="header-BOS-image">
-            <div class="image-links">
-                <div class="image-link">
-                    <a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">
-                        <img src="foundation-report-cover.jpg" alt="Cover of Foundation Report">
-                    </a>
-                    <p><a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">Laying the Foundation: Community Anti-Displacement Priorities</a></p>
-                </div>
-
-                <div class="image-link">
-                    <a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">
-                        <img src="toolkit-report-cover.jpg" alt="Cover of Toolkit Report">
-                    </a>
-                    <p><a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">Anti-Displacement Existing Toolkit and Progress</a></p>
-                </div>
-            </div>
         </div>
     </div>
 </section>
-
-
           <div id="sa" class="d--n node-site-alert">
                   <div class="views-element-container" id="block-bos-theme-views-block-site-alerts-block-site-alerts--2" data-block-plugin-id="views_block:site_alerts-block_site_alerts">
       <div><div class="js-view-dom-id-59da6b3b7b5df062dada3c85cca04f8624f82e85e0dc3bb45c76fd33ec0b4267">
@@ -324,7 +307,22 @@ <h2>Our Strategy: The 4Ps of Anti-Displacement</h2>
       <li><strong>Partnerships:</strong> Building partnerships with community organizations and stakeholders.</li>
     </ul>
     <div class="strategy-image">
-      <img src="4Ps-image.png" alt="The 4Ps Strategy for Anti-Displacement" />
+      <img src="4Ps-image.png" alt="The 4Ps Strategy for Anti-Displacement">
+
+     <div class="image-link">
+       <a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">
+        <img src="foundation-report-cover.jpg" alt="Cover of Foundation Report">
+       </a>
+        <p><a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">Laying the Foundation: Community Anti-Displacement Priorities</a></p>
+        </div>
+
+        <div class="image-link">
+        <a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">
+        <img src="toolkit-report-cover.jpg" alt="Cover of Toolkit Report">
+        </a>
+        <p><a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">Anti-Displacement Existing Toolkit and Progress</a></p>
+        </div>
+      </div>
     </div>
   </div>
 </section>

public/styles.css

@@ -173,56 +173,67 @@ a.hover-bold:hover {
   }
 .section-content {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start; /* Adjust alignment */
     align-items: flex-start;
+    flex-wrap: wrap; /* Allow wrapping for responsiveness */
     margin: 20px;
 }
+
 .left-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     margin-right: 20px;
 }
+
 .centered-header {
-    text-align: left; /* Align header to the left to match text-content */
-    margin-bottom: 75px;
+    text-align: left;
+    margin-bottom: 30px;
     font-family: 'Montserrat', sans-serif;
     color: #091f2f;
     text-transform: uppercase;
     font-weight: 700;
-    font-size: 60px;
+    font-size: 55px;
 }
+
 .text-content {
     font-size: 22px;
     color: #091f2f;
     font-family: Lora, serif;
     font-style: italic;
-
 }
+
 .right-content {
     flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: center; /* Center images horizontally */
+    align-items: center;
 }
+
 .header-BOS-image {
-    width: 550px; /* Adjust the size as needed */
+    width: 550px;
     height: auto;
     margin-bottom: 20px;
+    margin-top: 150px;
 }
+
 .image-links {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: flex-start;
+    margin-top: 20px;
 }
+
 .image-link {
     text-align: center;
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 20px; /* Add margin to space out from other content */
 }
+
 .image-link img {
     width: 150px;
     height: 150px;
@@ -231,6 +242,7 @@ a.hover-bold:hover {
     border-radius: 8px;
     cursor: pointer;
 }
+
 #city-strategy {
   background-color: var(--text-light);
   border: 1px solid var(--border-blue);