Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contact blurb #357

Merged
merged 4 commits into from
Jul 15, 2024
Merged

Contact blurb #357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8a65f94
refactor(contact): move into includes; change color/shadow
machikoyasuda Jul 15, 2024
9e4f318
fix(css): remove unused var, class
machikoyasuda Jul 15, 2024
3378419
fix(css): remove unused class
machikoyasuda Jul 15, 2024
b469489
fix(copy): update copy
machikoyasuda Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions src/_includes/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<section id="reachout" class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<h2 class="text-center text-md-start d-block mb-3">The time is now—reach out to learn more</h2>
</div>
</section>

<svg class="position-absolute">
<clipPath id="my-clip-path-start" clipPathUnits="objectBoundingBox">
<path
d="M0.004,0.075 C0,0.034,0.029,0,0.066,0.002 L0.947,0.051 C0.979,0.052,1,0.081,1,0.116 V0.936 C1,0.973,0.977,1,0.944,1 H0.147 C0.117,1,0.091,0.977,0.088,0.943 L0.004,0.075"
></path>
</clipPath>
</svg>

<svg class="position-absolute">
<clipPath id="my-clip-path-end" clipPathUnits="objectBoundingBox">
<path
d="M0.041,0.125 C0.043,0.092,0.066,0.066,0.096,0.063 L0.878,0 C0.91,-0.003,0.939,0.024,0.941,0.06 L1,0.929 C1,0.967,0.977,1,0.942,1 H0.061 C0.027,1,0,0.968,0.002,0.931 L0.041,0.125"
></path>
</clipPath>
</svg>

<section class="row justify-content-md-center mt-5 mb-5 pb-5 align-content-stretch">
<div class="col-12 col-md-4">
<div class="background-calitp-blue pt-3 pt-md-5 px-3 text-center clipped-end">
<picture
><img
src="images/connect.png"
alt="Two thought bubbles with dashes of various lengths, meant to represent words in a conversation"
width="105"
/></picture>
<h3 class="text-white d-block my-4">Connect with Cal-ITP</h3>
<span class="text-white"
>Drop us a line at
<a rel="noreferrer" target="_blank" class="fw-bolder text-white" href="mailto:[email protected]">[email protected]</a>
to:</span
>
<ul class="text-center mb-4 ms-2 ms-md-4 ms-lg-5">
<li class="text-white text-start">get more information</li>
<li class="text-white text-start">request technical assistance</li>
<li class="text-white text-start">meet our Customer Success team</li>
</ul>
</div>
</div>
<div class="col-md-auto">&nbsp;</div>
<div class="col-12 col-md-4">
<div class="background-calitp-blue pt-3 pt-md-5 px-md-5 px-3 pt-2 text-center clipped-start">
<picture
><img
src="images/stay-up-to-date.png"
alt="A bus nearly surrounded by a semicircular arrow, meant to indicate that transit content is being refreshed"
width="86"
/></picture>
<h3 class="text-white d-block my-4">Stay up to date</h3>
<p class="text-white text-start ps-lg-3">
See our latest milestones on
<a class="text-white fw-bolder" href="/press">our Press page</a>, and subscribe to the
<a
class="text-white fw-bolder"
href="https://lp.constantcontactpages.com/su/eLbtFoE/calitp?website"
rel="noreferrer"
target="_blank"
>Caltrans Mobility Newsletter</a
>, a free biweekly resource with frequent Cal-ITP project updates.
</p>
</div>
</div>
</section>
67 changes: 1 addition & 66 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,69 +130,4 @@ <h2 class="text-center text-md-start mb-4">Helping California achieve critical g
alt="Another decorative element with dots and dashes, meant to resemble a transit map" />
</picture>

<section id="reachout" class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<h2 class="text-center text-md-start d-block mb-3">The time is now—reach out to help and to learn more</h2>
<p>This initiative is critical now more than ever.</p>
<p>
Cal-ITP is working with transportation agencies across the country to launch a program that can immediately improve the
ridership experience. Contact us to learn more.
</p>
</div>
</section>

<svg class="position-absolute">
<clipPath id="my-clip-path-start" clipPathUnits="objectBoundingBox"><path d="M0.004,0.075 C0,0.034,0.029,0,0.066,0.002 L0.947,0.051 C0.979,0.052,1,0.081,1,0.116 V0.936 C1,0.973,0.977,1,0.944,1 H0.147 C0.117,1,0.091,0.977,0.088,0.943 L0.004,0.075"></path></clipPath>
</svg>

<svg class="position-absolute">
<clipPath id="my-clip-path-end" clipPathUnits="objectBoundingBox"><path d="M0.041,0.125 C0.043,0.092,0.066,0.066,0.096,0.063 L0.878,0 C0.91,-0.003,0.939,0.024,0.941,0.06 L1,0.929 C1,0.967,0.977,1,0.942,1 H0.061 C0.027,1,0,0.968,0.002,0.931 L0.041,0.125"></path></clipPath>
</svg>

<section class="row justify-content-md-center mt-5 mb-5 pb-5 align-content-stretch">
<div class="col-12 col-md-4 clipped-shadow">
<div class="background-slate-5 pt-3 pt-md-5 px-3 text-center clipped-end">
<picture><img
src="images/connect.png"
alt="Two thought bubbles with dashes of various lengths, meant to represent words in a conversation"
width="105" /></picture>
<h3 class="text-white d-block my-4">Connect with Cal-ITP</h3>
<span class="text-white">Drop us a line at
<a
rel="noreferrer"
target="_blank"
class="fw-bolder text-white"
href="mailto:[email protected]">[email protected]</a>
to:</span>
<ul class="text-center mb-4 ms-2 ms-md-4 ms-lg-5">
<li class="text-white text-start">request technical assistance</li>
<li class="text-white text-start">get more information</li>
<li class="text-white text-start">offer collaborative support</li>
<li class="text-white text-start">join our email list for updates</li>
</ul>
</div>
</div>
<div class="col-md-auto">
&nbsp;
</div>
<div class="col-12 col-md-4 clipped-shadow">
<div class="background-slate-5 pt-3 pt-md-5 px-md-5 px-3 pt-2 text-center clipped-start">
<picture><img
src="images/stay-up-to-date.png"
alt="A bus nearly surrounded by a semicircular arrow, meant to indicate that transit content is being refreshed"
width="86" /></picture>
<h3 class="text-white d-block my-4">Stay up to date</h3>
<p class="text-white text-start ps-lg-3">
See our latest milestones on
<a
class="text-white fw-bolder"
href="/press">our Press page</a>, and subscribe to the
<a
class="text-white fw-bolder"
href="https://lp.constantcontactpages.com/su/eLbtFoE/calitp?website"
rel="noreferrer"
target="_blank">Caltrans Mobility Newsletter</a>, a free biweekly resource with frequent Cal-ITP project updates.
</p>
</div>
</div>
</section>
{% include contact.html %}
9 changes: 0 additions & 9 deletions src/stylesheets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ body {
--calitp-purple-5: rgb(41, 34, 120); /* #292278 */
--calitp-red-4: rgb(192, 63, 77); /* #c03f4d */
--calitp-red-5: rgb(160, 46, 59); /* #a02e3b */
--calitp-slate-5: rgb(36, 61, 81); /* #243d51 */
--calitp-font-weight-bold: 700;
}

Expand All @@ -54,10 +53,6 @@ body {
background-color: var(--calitp-purple-4);
}

.background-slate-5 {
background-color: var(--calitp-slate-5);
}

.btn {
--bs-btn-border-width: 2px;
}
Expand Down Expand Up @@ -357,10 +352,6 @@ footer a:hover {
min-height: 100%;
}

.clipped-shadow {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
}

.mb-28 {
margin-bottom: 28px;
}
Expand Down