Skip to content

Commit

Permalink
Merge pull request #53 from code4policy/lydia-working
Browse files Browse the repository at this point in the history 
adjusting the look and layout of the top
  • Loading branch information
@lydden
lydden authored Jan 14, 2025
2 parents d53a188 + 3caaa5b commit 2a38332
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 38 deletions.
45 changes: 23 additions & 22 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<title>Housing Assistance Toolkit - Boston.gov</title>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8" />
<noscript><meta http-equiv="Refresh" content="0; URL=/big_pipe/no-js?destination=/government/cabinets/economic-opportunity-and-inclusion" />
Expand Down Expand Up @@ -250,34 +251,34 @@
</div>

</header>
<section>

<h1 class="centered-header">Housing Resource Guide</h1>

<img src="flow-chart-header.png" alt="City of Boston flow chart header" class="header-BOS-image">

<section>
<div class="section-content">
<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>
</div>

<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 class="left-content">
<h1 class="centered-header">Housing 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>
</div>
</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 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>


Expand Down
54 changes: 38 additions & 16 deletions public/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,34 +405,55 @@ h2 {
.search-button:hover {
background-color: #005bb5;
}
.header-BOS-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: auto;
}
.centered-header
{ text-align: center; }

.section-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 20px;
}

.text-content {
.left-content {
flex: 1;
display: flex;
flex-direction: column;
margin-right: 20px;
}

.image-links {
.centered-header {
text-align: left; /* Align header to the left to match text-content */
margin-bottom: 75px;
font-family: 'Montserrat', sans-serif;
color: #091f2f;
text-transform: uppercase;
font-weight: 700;
font-size: 60px;
}

.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 */
}

.header-BOS-image {
width: 550px; /* Adjust the size as needed */
height: auto;
margin-bottom: 20px;
}

.image-links {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start; /* Align items to the top for consistency */
align-items: flex-start;
}

.image-link {
Expand All @@ -444,9 +465,10 @@ h2 {
}

.image-link img {
width: 150px; /* Set fixed size for consistency */
height: 150px; /* Set fixed size for square appearance */
object-fit: cover; /* Adjust image to cover area without distortion */
width: 150px;
height: 150px;
object-fit: cover;
border: 1px solid #ccc;
border-radius: 8px;
cursor: pointer;
}

0 comments on commit 2a38332

Please sign in to comment.