Skip to content

Commit

Permalink
Merge pull request #67 from code4policy/lydia-working
Browse files Browse the repository at this point in the history 
adjusted the top text and added contact info bar
  • Loading branch information
@lydden
lydden authored Jan 17, 2025
2 parents 7da4fcb + 7bb2633 commit 6f5804b
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 139 deletions.
35 changes: 6 additions & 29 deletions public/4p-pages/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,9 +244,9 @@ a.hover-bold:hover {
}

#city-strategy h2 {
font-size: 50px;
font-weight: bold;
color: var(--primary-blue);
font-size: 61px;
font-weight: 700;
color: #091f2f;
margin-bottom: 20px;
text-align: left; /* Align title to the left */
font-family: 'Montserrat', sans-serif;
Expand All @@ -267,20 +267,21 @@ a.hover-bold:hover {
margin-bottom: 20px;
font-family: Lora, serif;
font-size: 18px;
color: #091f2f;
}

.strategy-text ul li {
font-size: 20px;
line-height: 1.8;
color: var(--text-dark);
color: #091f2f;
margin: 10px 0;
padding-left: 25px;
position: relative;
}

.strategy-text ul li::before {
content: '•';
color: var(--primary-blue);
color: #091f2f;
font-size: 20px;
position: absolute;
left: 0;
Expand All @@ -302,30 +303,6 @@ a.hover-bold:hover {
border: 1px solid var(--border-blue);
}

.report-links {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 20px;
}

.image-link {
text-align: center;
margin: 10px;
flex: 0 1 45%;
}

.image-link img {
width: 150px;
height: auto;
object-fit: cover;
border: 1px solid #ccc;
border-radius: 8px;
cursor: pointer;
margin-bottom: 10px;
}

.meet-the-team {
display: inline-block;
font-size: 18px;
Expand Down
33 changes: 19 additions & 14 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,15 +253,10 @@
</header>
<section>
<div class="section-content">
<div class="left-content">
<h1 class="centered-header">Housing Stability Resource Guide</h1>
<div class="text-content">
<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">
<h1 class="centered-header">Housing Stability Resource Guide</h1>
<div class="text-content">
<p>Our goal is to help you navigate Boston's resources to assist renters and homeowners ensure housing stability.</p>
<p>The tool below provides information and links to programs that assist on issues like rental payments, eviction, and foreclosure.</p>
</div>
</div>
</section>
Expand Down Expand Up @@ -294,8 +289,19 @@ <h2>As a Homeowner, I need to...</h2>
<div class="accordion"></div>
</div>
</div>

<!-- Separate section for report links -->
<section class="contact-info">
<div class="info-container">
<div class="info renters">
<h2 class="contact-header">Renters:</h2>
<p>Visit <a href="https://boston.gov/housing-stability">BOSTON.GOV/HOUSING-STABILITY</a><br>or call <strong>617.635.4200</strong></p>
</div>
<div class="divider"></div>
<div class="info homeowners extra-padding">
<h2 class="contact-header">Homeowners:</h2>
<p>Visit <a href="https://homecenter.boston.gov">HOMECENTER.BOSTON.GOV</a><br>or call <strong>617.635.4663</strong></p>
</div>
</div>
</section>
<div class="report-links">
<div class="image-link">
<a href="https://www.boston.gov/departments/planning-advisory-council/anti-displacement-action-plan#reports" target="_blank">
Expand All @@ -314,13 +320,12 @@ <h2>As a Homeowner, I need to...</h2>
</p>
</div>
</div>
</section>

<div>
<div>
<div class="button-container">
<button id="toggle-chart" class="vscode" onclick="redirectToPage()">Our 4P's Tool Kits</button>
</div>
</div>
</section>


<script src="script.js"></script>
Expand Down
140 changes: 44 additions & 96 deletions public/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,133 +173,81 @@ a.hover-bold:hover {
}

.section-content {
display: flex;
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;
align-items: center; /* Center content horizontally */
justify-content: center; /* Center content vertically */
margin: 20px;
}

.centered-header {
text-align: left;
text-align: center; /* Center the text */
margin-bottom: 30px;
font-family: 'Montserrat', sans-serif;
color: #091f2f;
text-transform: uppercase;
font-weight: 700;
font-size: 55px;
font-size: 61px;
}

.text-content {
font-size: 22px;
text-align: center; /* Center the text */
font-size: 25px;
color: #091f2f;
font-family: Lora, serif;
font-style: italic;
max-width: 800px; /* Optional: Set a max width for better readability */
}

.right-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}

.header-BOS-image {
width: 550px;
height: auto;
margin-bottom: 20px;
margin-top: 150px;
}

#city-strategy {
background-color: var(--text-light);
border: 1px solid var(--border-blue);
border-radius: 8px;
padding: 30px;
margin: 40px 0;
box-shadow: 0 4px 12px var(--shadow-light);
}

.strategy-content {
display: flex;
justify-content: space-between; /* Space between text-section and image */
align-items: center; /* Center align vertically */
font-size: 50px;
color: #091f2f;
font-family: Lora, serif;
}

.text-container {
flex: 1.5; /* Allow more space for the text */
padding-right: 20px; /* Space between text and image */
display: flex;
flex-direction: column; /* Stack title and text vertically */
/* Text for the contact info bar */
.contact-info {
background-color: #091f2f;
color: white;
padding: 40px;
}

#city-strategy h2 {
font-size: 50px;
font-weight: bold;
color: var(--primary-blue);
margin-bottom: 20px;
text-align: left; /* Align title to the left */
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
.info-container {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
text-align: left;
}

.strategy-text p {
font-size: 25px;
line-height: 1.8;
color: #091f2f;
font-family: Lora, serif;
margin-bottom: 20px;
.info {
flex: 1;
max-width: 300px;
margin-left: 20px; /* Default left margin for all */
}

.strategy-text ul {
list-style-type: none;
padding: 0;
margin-bottom: 20px;
font-family: Lora, serif;
font-size: 18px;
.extra-padding {
margin-left: 35px; /* Additional padding for the right side */
}

.strategy-text ul li {
font-size: 20px;
line-height: 1.8;
color: var(--text-dark);
margin: 10px 0;
padding-left: 25px;
position: relative;
.divider {
width: 2px;
height: 50px;
background-color: #e94e77;
margin: 0 20px;
}

.strategy-text ul li::before {
content: '•';
color: var(--primary-blue);
font-size: 20px;
position: absolute;
left: 0;
top: 5px;
.contact-header {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: white;
background-color: #091f2f;
padding: 5px 0;
display: inline-block;
margin-bottom: 10px;
}

.strategy-image {
width: 100px; /* Set the width as required */
flex: 0.7; /* Allocates space equally for smaller images */
display: flex;
justify-content: center;
align-items: center; /* Center image vertically */
.info p {
margin-top: 0;
}

.strategy-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid var(--border-blue);
a {
font-weight: bold;
color: white;
text-decoration: none;
}

.report-links {
Expand Down

0 comments on commit 6f5804b

Please sign in to comment.