From 197aed673c1750c771c3c8e50b24be82d05b50b5 Mon Sep 17 00:00:00 2001 From: SJ Miller Date: Fri, 3 Dec 2021 23:51:10 -0500 Subject: [PATCH 1/4] contact section --- assets/bh8/contact-monitor.svg | 5 + index.html | 57 ++++++------ sass/index.scss | 164 +++++++++++++++++++++------------ 3 files changed, 141 insertions(+), 85 deletions(-) create mode 100644 assets/bh8/contact-monitor.svg diff --git a/assets/bh8/contact-monitor.svg b/assets/bh8/contact-monitor.svg new file mode 100644 index 00000000..614219b2 --- /dev/null +++ b/assets/bh8/contact-monitor.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/index.html b/index.html index 7c927e63..5de5071b 100644 --- a/index.html +++ b/index.html @@ -205,34 +205,37 @@

Frequently Asked Questions

+
+
+

Contact

+

Feel free to let us know of any questions, comments, and/or concerns at hello@brickhack.io

+

Interested in joining our team? Check out our club

+
+ +
+ + diff --git a/sass/index.scss b/sass/index.scss index b8dfdf6c..4b6bdfd4 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -7,6 +7,8 @@ $light-blue: #44C6E6; $off-white: #F6F8FA; $darker-blue: #081646; $orange: #FF9C4A; +$grey: #D0D9E2; + // Typography :root { --body-font-size: 1.3rem; @@ -347,59 +349,72 @@ section { // Contact -footer { - width: 100%; - height: 300px; - left: 0; - right: 0; - bottom: 0; - margin-top: 20px; - background-image: url("../assets/footer/footer.svg"); - background-repeat: repeat no-repeat; - background-position: bottom center; - background-size: auto 300px; - overflow-x: clip; - - #footer-content { +#contact { + padding-bottom: 0; + display: flex; + justify-content: space-between; + flex-direction: row; + min-height: auto; + + #contact-content { + width: 50%; + padding-right: 20px; + } + + #contact-socials { + align-self: flex-end; + background-image: url("../assets/bh8/contact-monitor.svg"); + width: 430px; + max-width: 50%; + height: 330px; + margin-bottom: -2px; // Gets rid of gap between svg and footer + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; + padding: 1rem 2.5rem 5rem; display: flex; - flex-direction: column; - justify-content: space-around; - height: 235px; - margin: auto; - padding: 15px; - text-align: center; + justify-content: center; + align-items: center; + flex-wrap: wrap; - h2 { - margin-top: -5px; - margin-bottom: -5px; - } + a { + margin: 1rem; - p { - font-size: 1em; - } + i { + font-size: 2.5rem; + color: $blue; - // FA brand icons - i { - font-size: 3em; - padding: 0px 5px; - color: $blue; + &:hover { + color: $dark-blue; + } + } } + } +} - a { - display: inline-block; - transition: 0.2s; - i { - transition: 0.2s; - } +// Footer +footer { + background-color: $grey; + padding: 2rem 5rem; + display: flex; + justify-content: space-between; - &:hover i { - transform: translateY(-4px); - } + #footer-left { + padding: 0 1rem 1rem 0; + } + + #footer-right { + display: flex; + justify-content: space-between; + + p:not(p:last-of-type) { + padding-right: 1rem; } } } + @media screen and (max-width: 1500px) { // About #about { @@ -438,6 +453,16 @@ footer { #about #about-content #about-buttons { width: 100%; } + + // Footer + footer #footer-right { + flex-direction: column; + text-align: right; + + p:not(p:last-of-type) { + padding-right: 0; + } + } } @media screen and (max-width: 955px) { @@ -576,6 +601,23 @@ footer { } } } + + // Contact + #contact { + flex-direction: column; + + #contact-content { + width: 100%; + padding-right: 0px; + } + + #contact-socials { + margin: 2rem auto -2px; + max-width: 75%; + width: 75%; + height: calc((100vw - 10rem) * 0.56); // should be the same as 75% width + } + } } @media screen and (max-width: 650px) { @@ -611,24 +653,30 @@ footer { } } - footer { - height: 200px; - background-size: auto 200px; - - #footer-content { - height: 157px; - - h2 { - font-size: 1.2em; - } + // Contact + #contact #contact-socials { + max-width: 100%; + width: 100%; + height: calc((100vw - 10rem) * 0.75); // should be the same as 75% width + } - p { - font-size: 0.8em; - } + // Footer + footer { + flex-direction: column; - i { - font-size: 2em; - } + #footer-right { + text-align: left; } } -} \ No newline at end of file +} + +@media screen and (max-width: 475px) { + // Contact + #contact #contact-socials { + justify-content: flex-start; + padding: 0; + margin: 2rem 0; + background-image: none; + height: auto; + } +} From 2f54cb3cb230a9327ab713039c146176eee3268d Mon Sep 17 00:00:00 2001 From: SJ Miller Date: Fri, 10 Dec 2021 01:46:57 -0500 Subject: [PATCH 2/4] fixes --- index.html | 29 +++++++++++++++------------- sass/index.scss | 50 +++++++++++++++++++++++++------------------------ 2 files changed, 42 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 5de5071b..f11fafc0 100644 --- a/index.html +++ b/index.html @@ -212,18 +212,21 @@

Contact

Interested in joining our team? Check out our club

- - - - - - - - - - - - +

Connect with us:

+
@@ -235,7 +238,7 @@

Contact

diff --git a/sass/index.scss b/sass/index.scss index 4b6bdfd4..12d50374 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -373,19 +373,24 @@ section { background-position: center bottom; padding: 1rem 2.5rem 5rem; display: flex; + flex-direction: column; justify-content: center; align-items: center; - flex-wrap: wrap; - a { - margin: 1rem; + #social-icons { + display: flex; + flex-wrap: wrap; - i { - font-size: 2.5rem; - color: $blue; + a { + margin: 1rem; - &:hover { - color: $dark-blue; + i { + font-size: 3rem; + color: $blue; + + &:hover { + color: $dark-blue; + } } } } @@ -401,15 +406,19 @@ footer { justify-content: space-between; #footer-left { - padding: 0 1rem 1rem 0; + padding-right: 1rem; } #footer-right { display: flex; justify-content: space-between; - p:not(p:last-of-type) { - padding-right: 1rem; + p { + padding-bottom: 0; + + &:not(p:last-of-type) { + padding-right: 1rem; + } } } } @@ -657,7 +666,11 @@ footer { #contact #contact-socials { max-width: 100%; width: 100%; - height: calc((100vw - 10rem) * 0.75); // should be the same as 75% width + justify-content: flex-start; + padding: 0; + margin: 2rem 0; + background-image: none; + height: auto; } // Footer @@ -668,15 +681,4 @@ footer { text-align: left; } } -} - -@media screen and (max-width: 475px) { - // Contact - #contact #contact-socials { - justify-content: flex-start; - padding: 0; - margin: 2rem 0; - background-image: none; - height: auto; - } -} +} \ No newline at end of file From 5adff61edd202db25a50cdf4d9711829e72af6fd Mon Sep 17 00:00:00 2001 From: SJ Miller Date: Fri, 17 Dec 2021 17:30:45 -0500 Subject: [PATCH 3/4] newline eof Co-authored-by: Skye Gallup --- sass/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/index.scss b/sass/index.scss index 12d50374..8e7f46b0 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -681,4 +681,4 @@ footer { text-align: left; } } -} \ No newline at end of file +} From d363f3445789d4e4c4db79d0d89fc4751d778bf0 Mon Sep 17 00:00:00 2001 From: SJ Miller Date: Sun, 19 Dec 2021 02:52:31 -0500 Subject: [PATCH 4/4] fixing aspect ratio code --- sass/index.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/sass/index.scss b/sass/index.scss index 8e7f46b0..a6339f65 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -624,7 +624,8 @@ footer { margin: 2rem auto -2px; max-width: 75%; width: 75%; - height: calc((100vw - 10rem) * 0.56); // should be the same as 75% width + height: calc((100vw - 7rem) * 0.56); // should be the same as 75% of the current width + // Essentially: (100vw - section padding to get 100% width) * 0.75 to get the 75% width * 0.75 for 75% of 75% width } } }