Skip to content

Commit dd62622

Browse files
cjyabrahamcjyabraham
authored
Adds Newsletter form to the site footer and a Contact Us page under the About menu (pytorch#1709)
* Add newsletter form to site footer Signed-off-by: Chris Abraham <[email protected]> * Added Contact Us page Signed-off-by: Chris Abraham <[email protected]> * fix line-height Signed-off-by: Chris Abraham <[email protected]> * make privacy text consistent Signed-off-by: Chris Abraham <[email protected]> --------- Signed-off-by: Chris Abraham <[email protected]>
1 parent 5acd73b commit dd62622

File tree

6 files changed

+283
-6
lines changed

6 files changed

+283
-6
lines changed

‎_includes/footer.html

+24
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,30 @@ <h2>Resources</h2>
2424

2525
<footer class="site-footer">
2626
<div class="container footer-container">
27+
28+
<div class="newsletter" id="newsletter">
29+
30+
<p
31+
class="newsletter__title is-style-max-width-800"><strong>Stay in touch</strong> for updates, event info, and the latest news</p>
32+
33+
34+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
35+
<script>
36+
hbspt.forms.create({
37+
region: "na1",
38+
portalId: "8112310",
39+
formId: "2fb2231c-000b-4ec5-88a0-1ab242549c9e"
40+
});
41+
</script>
42+
43+
44+
<p
45+
class="newsletter__privacy">By submitting this form, I consent to receive marketing emails from the LF and its projects regarding their events, training, research, developments, and related announcements. I understand that I can unsubscribe at any time using the links in the footers of the emails I receive. <a href="https://www.linuxfoundation.org/privacy/">Privacy Policy</a>.</p>
46+
47+
</div>
48+
49+
50+
2751
<div class="lf-grid">
2852
<div class="footer-logo-wrapper">
2953
<a href="{{ site.url }}{{ site.baseurl }}" class="footer-logo">

‎_includes/main_menu.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,8 @@
139139
<a class="nav-dropdown-item" href="{{ site.baseurl }}/governing-board">
140140
<span class=dropdown-title>Governing Board</span>
141141
</a>
142-
<a class="nav-dropdown-item" href="{{ site.baseurl }}/resources/contributors/">
143-
<span class=dropdown-title>Stay In Touch</span>
144-
<p>Subscribe for updates, event info, webinars, and the latest community news.</p>
142+
<a class="nav-dropdown-item" href="{{ site.baseurl }}/contact-us">
143+
<span class=dropdown-title>Contact Us</span>
145144
</a>
146145
</div>
147146
</div>

‎_includes/mobile_menu.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
<a href="{{ site.baseurl }}/governing-board">Governing Board</a>
118118
</li>
119119
<li>
120-
<a href="{{ site.baseurl }}/resources/contributors/">Stay In Touch</a>
120+
<a href="{{ site.baseurl }}/contact-us">Contact Us</a>
121121
</li>
122122
</ul>
123123
<li class="resources-mobile-menu-title">

‎_sass/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ $mid_gray: #797676;
2323

2424
$desktop_header_height: 90px;
2525
$mobile_header_height: 68px;
26-
$desktop_footer_height: 360px;
26+
$desktop_footer_height: 620px;
2727
$site_horizontal_padding: 30px;
2828

2929
@import "../node_modules/bootstrap/scss/variables";

‎_sass/footer.scss

+219-1
Original file line numberDiff line numberDiff line change
@@ -290,4 +290,222 @@
290290
grid-row-gap: 30px;
291291
display: grid;
292292
grid-template-columns: repeat(12,1fr);
293-
}
293+
}
294+
295+
// removes captcha image from flow.
296+
.hs-recaptcha {
297+
display: none;
298+
}
299+
300+
.newsletter {
301+
line-height: 140%;
302+
margin-bottom: 80px;
303+
304+
&__title {
305+
line-height: 140%;
306+
font-size: 24px;
307+
@media (min-width: 1000px) {
308+
font-size: 40px;
309+
}
310+
}
311+
312+
.legal-consent-container {
313+
display: none;
314+
}
315+
316+
p.newsletter__privacy {
317+
max-width: 860px;
318+
margin-top: 30px;
319+
line-height: 21px;
320+
font-size: 14px;
321+
color: #dfdfdf;
322+
a {
323+
color: #dfdfdf;
324+
font-weight: 600;
325+
&:hover {
326+
color: #dfdfdf;
327+
font-weight: 600;
328+
}
329+
}
330+
}
331+
332+
// form container.
333+
.hbspt-form {
334+
min-height: 300px;
335+
@media (min-width: 500px) {
336+
min-height: 100px;
337+
}
338+
@media (min-width: 1000px) {
339+
min-height: 20px;
340+
}
341+
342+
// Displays if required field not filled.
343+
.hs-error-msg {
344+
display: block;
345+
margin-right: 8px;
346+
color: $orange;
347+
font-size: 14px;
348+
line-height: 1.1em;
349+
width: 95%;
350+
padding-top: 15px;
351+
}
352+
353+
// form inputs wrapper.
354+
.hs-form {
355+
display: grid;
356+
grid-template-columns: 1fr;
357+
grid-gap: 30px;
358+
359+
@media (min-width: 500px) {
360+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
361+
}
362+
363+
@media (min-width: 700px) {
364+
grid-template-columns: repeat(3, minmax(0, 1fr));
365+
}
366+
367+
@media (min-width: 950px) {
368+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
369+
grid-row-gap: 1.5rem;
370+
grid-column-gap: 1.5rem;
371+
}
372+
373+
input[type='text'],
374+
input[type='email'] {
375+
height: 50px;
376+
@media (min-width: 500px) {
377+
height: 42px;
378+
}
379+
width: 100%;
380+
background: transparent;
381+
border: none;
382+
border-bottom: 2px solid $white;
383+
border-radius: 0;
384+
transition: all 0.25s ease;
385+
color: $white;
386+
font-size: 16px;
387+
@media (min-width: 500px) {
388+
font-size: 20px;
389+
}
390+
line-height: 105%;
391+
&::placeholder {
392+
color: $white;
393+
font-size: 16px;
394+
@media (min-width: 500px) {
395+
font-size: 20px;
396+
}
397+
line-height: 105%;
398+
}
399+
&:focus {
400+
outline: 0;
401+
border-bottom: 2px solid $orange;
402+
transition: color 0.25s ease;
403+
&::placeholder {
404+
transition: color 0.25s ease;
405+
color: transparent;
406+
}
407+
}
408+
}
409+
410+
// Controls autocomplete styles.
411+
input,
412+
textarea,
413+
select {
414+
&:-webkit-autofill,
415+
&:-webkit-autofill:hover,
416+
&:-webkit-autofill:focus {
417+
-webkit-text-fill-color: $white;
418+
}
419+
}
420+
421+
select {
422+
appearance: none;
423+
background: transparent;
424+
border: 0px solid transparent;
425+
border-bottom: 2px solid $white;
426+
border-radius: 0;
427+
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0);
428+
display: block;
429+
height: 50px;
430+
@media (min-width: 500px) {
431+
height: 42px;
432+
}
433+
margin: 0;
434+
max-width: 100%;
435+
padding: 0.25em 0 calc(0.25em + 1px) 5px;
436+
transition: all 0.25s ease;
437+
width: 100%;
438+
color: $white;
439+
font-size: 16px;
440+
@media (min-width: 500px) {
441+
font-size: 20px;
442+
}
443+
line-height: 105%;
444+
445+
&::-ms-expand {
446+
display: none;
447+
}
448+
449+
&:focus {
450+
outline: 0;
451+
border-bottom: 2px solid $orange;
452+
&::placeholder {
453+
transition: color 0.4s ease;
454+
color: transparent;
455+
}
456+
}
457+
458+
option {
459+
font-weight: normal;
460+
color: black;
461+
}
462+
}
463+
464+
.hs-button {
465+
border-radius: 5px;
466+
margin-top: 20px;
467+
border: none;
468+
background-color: $orange;
469+
color: $white;
470+
font-weight: 400;
471+
padding: 11px 40px;
472+
font-size: 16px;
473+
font-weight: 700;
474+
text-decoration: none;
475+
}
476+
477+
// underline errors.
478+
.hs-input.invalid {
479+
border-bottom: 2px dashed red !important;
480+
}
481+
482+
// hide general error message.
483+
.hs_error_rollup {
484+
display: none;
485+
}
486+
}
487+
}
488+
489+
// success message for newsletter footer only.
490+
.submitted-message {
491+
display: flex;
492+
align-content: center;
493+
align-items: center;
494+
justify-content: center;
495+
border: 2px solid $white;
496+
min-height: 280px;
497+
font-size: 18px;
498+
padding: 20px 20px 0;
499+
line-height: 1.1em;
500+
@media (min-width: 500px) {
501+
min-height: 80px;
502+
}
503+
@media (min-width: 1000px) {
504+
min-height: unset;
505+
}
506+
}
507+
508+
.submitted-message p {
509+
max-width: none;
510+
}
511+
}

‎contact-us.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
layout: default
3+
title: Contact Us
4+
body-class: announcement
5+
background-class: announcement-background
6+
permalink: /contact-us
7+
---
8+
9+
<div class="container">
10+
<div class="row hero-content">
11+
<div class="col-md-10">
12+
<h1>Contact Us</h1>
13+
</div>
14+
</div>
15+
</div>
16+
17+
<div class="container-fluid light-background-section contact-us-section">
18+
<div class="container">
19+
<div class="row">
20+
<div class="col-md-10">
21+
<h2>Get in Touch</h2>
22+
<p class="lead">The success of PyTorch is only possible with the contributions and support of our developer community and member companies.
23+
To learn more about how you can join your industry peers in supporting PyTorch,
24+
or for any questions you may have, please fill out this form to be contacted by a PyTorch Foundation representative.</p>
25+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js?pre=1"></script>
26+
<script>
27+
hbspt.forms.create({
28+
region: "na1",
29+
portalId: "8112310",
30+
formId: "6459945b-52e7-4636-911f-8bfbff65f030"
31+
});
32+
</script>
33+
</div>
34+
</div>
35+
</div>
36+
</div>

0 commit comments

Comments
 (0)