diff --git a/contact.html b/contact.html index 868844fe14..8740443dff 100644 --- a/contact.html +++ b/contact.html @@ -1,61 +1,158 @@ + Contact Us - + +
+ -

Contact

- - - - +
+ + + \ No newline at end of file diff --git a/css/index.css b/css/index.css index e6b2b589c1..b4509104f5 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,992 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; +} +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +nav { + transition: height 0.5s, background-color 0.5s; + margin: 0 auto; + height: opx; + width: inherit; + max-width: 100%; + z-index: 2; + background-color: #98a4af; + opacity: 0.95; + position: fixed; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; +} +nav .logo h2 { + color: #ffffff; +} +nav h1, +nav h2, +nav h3, +nav h4 { + color: white; +} +nav header { + display: flex; + justify-content: space-between; + z-index: 2; + max-width: 100%; +} +nav .nav-links { + display: flex; + flex-direction: column; + overflow: hidden; + align-items: center; + justify-content: space-evenly; + height: 100%; + width: 100%; + max-width: inherit; + padding-bottom: 98px; +} +nav .nav-links a { + color: #ffffff; + font-weight: 500; + font-size: 40px; + line-height: 85px; + text-decoration: none; +} +nav .nav-links a:hover { + color: #222222; +} +nav.collapsed { + transition-property: height 1s; + height: 80px; + bottom: none; + background-color: transparent; +} +@media (max-width: 500px) { + nav.collapsed { + height: 55px; + } +} +nav.collapsed.scrolled { + background-color: #98a4af; +} +nav.collapsed .nav-links { + padding: 0; + height: 0; +} +.home-wrapper { + width: 1100px; + max-width: 100%; + margin: 0px auto; +} +.home-wrapper img { + width: 100%; + height: auto; +} +.home-wrapper p { + width: 100%; + height: auto; +} +.home-wrapper button { + font-size: 1.5rem; + background-color: white; + border: 1px solid #222222; + padding: 13px 28px 13px 28px; +} +.home-wrapper h1 { + font-size: 6.4rem; + line-height: 7.5rem; +} +@media (max-width: 500px) { + .home-wrapper h1 { + font-size: 3.4rem; + line-height: 4rem; + } +} +.home-wrapper h2 { + font-size: 2.8rem; + color: #222222; +} +@media (max-width: 500px) { + .home-wrapper h2 { + font-size: 2.4rem; + } +} +.home-wrapper h3 { + font-size: 2.4rem; +} +.home-wrapper .jumbotron { + background-image: url(../img/home/home-jumbotron.png); + background-repeat: no-repeat; + background-size: cover; + position: relative; + height: 62.5%; + height: 60%; +} +@media (max-width: 500px) { + .home-wrapper .jumbotron { + background-image: url(../img/home/home-mobile-jumbotron.png); + width: 100%; + background-size: cover; + background-position: bottom; + min-height: 260px; + height: auto; + } +} +.home-wrapper .jumbotron .banner h1, +.home-wrapper .jumbotron .banner h2, +.home-wrapper .jumbotron .banner h3, +.home-wrapper .jumbotron .banner h4 { + color: #ffffff; +} +.home-wrapper header, +.home-wrapper .banner { + padding: 22px 8.4% 48px; + bottom: 10px; +} +.home-wrapper .banner { + padding-top: 15%; +} +.home-wrapper .banner { + position: absolute; +} +@media (max-width: 500px) { + .home-wrapper .banner { + bottom: 0px; + padding: 3%; + } +} +.home-wrapper .home-par-mid { + max-width: 100%; + display: grid; + grid-row-gap: 15%; + grid-column-gap: 4%; + margin: 10% 5% 10% 5%; + justify-items: center; + align-items: center; +} +@media (max-width: 730px) { + .home-wrapper .home-par-mid { + margin: 3%; + margin-bottom: 0%; + grid-row-gap: 6%; + grid-column-gap: 3%; + } +} +@media (max-width: 600px) { + .home-wrapper .home-par-mid { + margin-bottom: 0%; + } +} +@media (max-width: 500px) { + .home-wrapper .home-par-mid { + margin-bottom: 80%; + } +} +.home-wrapper .home-par-mid .home-mid { + width: 70%; + max-width: 100%; + grid-column: 1 / 2; + grid-row: 1 / 2; +} +@media (max-width: 730px) { + .home-wrapper .home-par-mid .home-mid { + grid-column: 1 / 2; + grid-row: 2 / 3; + } +} +.home-wrapper .home-par-mid .home-mid p { + margin-top: 5%; + margin-bottom: 5%; + line-height: 3rem; +} +.home-wrapper .home-par-mid .home-mid-img { + grid-column: 2 / 3; + grid-row: 1 / 2; + width: 100%; + max-width: 100%; +} +@media (max-width: 730px) { + .home-wrapper .home-par-mid .home-mid-img { + grid-column: 1 / 2; + grid-row: 1 / 2; + margin-top: 10%; + } +} +.home-wrapper .home-par-mid .home-mid1 { + grid-column: 2 / 3; + grid-row: 2 / 3; + width: 70%; + max-width: 100%; +} +@media (max-width: 730px) { + .home-wrapper .home-par-mid .home-mid1 { + grid-column: 1 / 2; + grid-row: 4 / 5; + } +} +.home-wrapper .home-par-mid .home-mid1 p { + margin-top: 5%; + margin-bottom: 5%; + line-height: 3rem; +} +.home-wrapper .home-par-mid .home-mid-img1 { + grid-column: 1 / 2; + grid-row: 2 / 3; + max-width: 100%; + width: 100%; +} +.home-wrapper .home-par-mid .home-mid-img1 picture img { + width: 100%; +} +.home-wrapper .home-par-mid .home-mid-img1 picture source { + width: 100%; +} +@media (max-width: 730px) { + .home-wrapper .home-par-mid .home-mid-img1 { + grid-column: 1 / 2; + grid-row: 3 / 4; + } +} +.home-wrapper .rec { + margin: 0 auto 6% auto; +} +.home-wrapper .home-par-bottom { + display: grid; + grid-row-gap: 3%; + margin-bottom: 20%; +} +@media (max-width: 730px) { + .home-wrapper .home-par-bottom { + margin-top: 50%; + grid-row-gap: 4%; + margin-bottom: 20%; + } +} +@media (max-width: 500px) { + .home-wrapper .home-par-bottom { + margin-bottom: 95%; + } +} +.home-wrapper .home-par-bottom img, +.home-wrapper .home-par-bottom .title-card, +.home-wrapper .home-par-bottom p { + width: 100%; + height: auto; +} +.home-wrapper .home-par-bottom .villa { + max-width: 100%; +} +.home-wrapper .home-par-bottom .home-bottom { + justify-self: center; + position: relative; + max-width: 100%; + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.home-wrapper .home-par-bottom .home-bottom1 { + justify-self: center; + width: 48%; + margin: 7% auto 7% auto; + max-width: 100%; + grid-column: 1 / 2; + grid-row: 2 / 3; +} +@media (max-width: 730px) { + .home-wrapper .home-par-bottom .home-bottom1 { + width: 80%; + margin: 5% 3% 5% 3%; + } +} +.home-wrapper .home-par-bottom .home-bottom2 { + justify-self: center; + position: relative; + max-width: 100%; + grid-column: 1 / 2; + grid-row: 3 / 4; +} +.home-wrapper .home-par-bottom .home-bottom3 { + justify-self: center; + width: 48%; + margin: 7% auto 7% auto; + max-width: 100%; + grid-column: 1 / 2; + grid-row: 4 / 5; +} +@media (max-width: 730px) { + .home-wrapper .home-par-bottom .home-bottom3 { + width: 80%; + margin: 5% 3% 5% 3%; + } +} +.home-wrapper .home-par-bottom .home-bottom4 { + justify-self: center; + position: relative; + max-width: 100%; + grid-column: 1 / 2; + grid-row: 5 / 6; +} +.home-wrapper .home-par-bottom .home-bottom5 { + justify-self: center; + width: 48%; + margin: 7% auto 7% auto; + max-width: 100%; + grid-column: 1 / 2; + grid-row: 6 / 7; +} +@media (max-width: 730px) { + .home-wrapper .home-par-bottom .home-bottom5 { + width: 80%; + margin: 5% 3% 5% 3%; + } +} +.home-wrapper .home-par-bottom .home-bottom5 p { + max-width: 100%; +} +.home-wrapper .home-par-bottom .title-card { + max-width: 100%; + position: absolute; + z-index: 0; + bottom: -50px; + background-color: #d8d8d8; + border: 1.3px solid #ffffff; + width: 316px; + height: 95px; + display: flex; + justify-content: center; + align-items: center; +} +.home-wrapper .home-par-bottom .title-card p { + text-align: center; + letter-spacing: 0.5rem; + font-weight: 0; + font-size: 2.2rem; + color: #222222; +} +@media (max-width: 500px) { + .home-wrapper .home-par-bottom .title-card p { + font-size: 2.4rem; + max-width: 100%; + } +} +.home-wrapper .home-par-bottom .title-card.right { + right: 0px; +} +@media (max-width: 500px) { + .home-wrapper .home-par-bottom .title-card.right { + right: auto; + max-width: 100%; + } +} +@media (max-width: 500px) { + .home-wrapper .home-par-bottom .title-card.right { + bottom: -66px; + width: 90.7%; + border: none; + } +} +html, +body, +.home-wrapper { + height: 100%; + color: #222222; + margin: 0 auto; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +body { + font-family: "Roboto", sans-serif; + font-size: 1.6rem; + line-height: 2.4rem; +} +body h1, +body h2, +body h3, +body h4 { + font-weight: 700; +} +.rounded-border { + border-radius: 4px; + border: 0.5px solid #222222; +} +footer { + margin-top: 25%; + padding-top: 66px; + display: flex; + flex-wrap: wrap; + color: #e8e8e8; + background-color: #828282; +} +@media (max-width: 500px) { + footer { + padding-left: 4.7%; + padding-top: 30px; + margin-top: 5%; + } +} +footer .email { + padding-left: 8.3%; + width: 33.33%; +} +@media (max-width: 500px) { + footer .email { + padding-left: 0; + padding-right: 8%; + width: 100%; + padding-bottom: 20px; + } +} +footer .email input { + margin-top: 10px; + font-size: 1.8rem; + height: 42px; + width: 100%; + min-width: 150px; + border-radius: 4px; + border: 0.5px solid #222222; + color: #828282; + padding-left: 2%; +} +@media (max-width: 500px) { + footer .email input { + margin: 12px 0px 8px 0px; + font-size: 1.6rem; + } +} +footer .fine-print { + font-size: 1.2rem; +} +footer .locations { + width: 66.67%; + display: flex; + justify-content: space-between; + padding-right: 8.3%; + padding-left: 5.3%; +} +@media (max-width: 500px) { + footer .locations { + width: 100%; + flex-direction: column; + padding-left: 0; + } + footer .locations .location { + padding-bottom: 25px; + } +} +footer h3 { + font-size: 1.8rem; + font-weight: 700; + line-height: 2.4rem; +} +footer p { + font-size: 1.4rem; + line-height: 2.6rem; +} +.copyright { + padding-top: 38px; + width: 100%; + display: grid; + justify-content: center; +} +.copyright .fine-print { + justify-content: center; +} +@media (max-width: 500px) { + .copyright { + padding-top: 0px; + padding-bottom: 25px; + justify-content: left; + } +} +.copyright input { + padding-left: 0.8%; +} +.services button { + padding: 15px 0px 15px; +} +.services button { + margin-top: 10px; + width: 235px; + height: 100px; +} +@media (max-width: 500px) { + .services button { + width: 100%; + } +} +.services h2 { + font-size: 2.8rem; + color: #222222; +} +@media (max-width: 500px) { + .services h2 { + font-size: 2.4rem; + } +} +.services .jumbotron { + background-image: url(../img/services/services-jumbotron.png); + position: relative; + height: 62.5%; + height: 60%; + background-repeat: no-repeat; + background-size: cover; + height: 245px; +} +@media (max-width: 500px) { + .services .jumbotron { + background-image: url(../img/services/services-mobile-jumbotron.png); + width: 100%; + background-size: cover; + background-position: bottom; + min-height: 260px; + height: auto; + } +} +.services .jumbotron .banner h1, +.services .jumbotron .banner h2, +.services .jumbotron .banner h3, +.services .jumbotron .banner h4 { + color: #ffffff; +} +.services .jumbotron .banner { + bottom: 20px; +} +@media (max-width: 500px) { + .services .jumbotron { + width: 100%; + background-size: cover; + background-position: bottom; + min-height: 260px; + height: auto; + } +} +.services p { + font-size: 1.5rem; +} +.services .content { + padding-left: 8.3%; + padding-right: 8.3%; + padding-bottom: 100px; +} +.services .content .intro { + padding-top: 58px; + padding-bottom: 50px; +} +@media (max-width: 500px) { + .services .content .intro { + padding-top: 34px; + padding-bottom: 35px; + } +} +@media (max-width: 500px) { + .services .content { + padding-left: 6.25%; + padding-right: 6.25%; + padding-bottom: 60px; + } +} +.services .content .buttons { + display: flex; + justify-content: space-between; + padding-bottom: 35px; +} +@media (max-width: 730px) { + .services .content .buttons { + text-align: center; + display: inline-block; + padding-bottom: 20px; + } +} +.services .content .buttons button { + width: 184px; + height: 50px; + font-size: 1.8rem; + font-weight: 700; + margin-bottom: 22px; +} +.services .content .buttons button:hover { + background-color: #222222; + color: #ffffff; +} +.services .content .buttons button.selected { + background-color: #5e9fb9; + color: #ffffff; + border: none; +} +@media (max-width: 500px) { + .services .content .buttons button { + width: 100%; + } +} +.services .content .tab { + display: flex; + flex-wrap: wrap; + align-items: space-between; + justify-content: center; + overflow: hidden; +} +@media (max-width: 730px) { + .services .content .tab { + flex-flow: column nowrap; + } +} +.services .content .tab .header-text { + width: 100%; +} +@media (max-width: 730px) { + .services .content .tab .header-text { + display: flex; + justify-content: center; + padding-bottom: 12px; + } +} +.services .content .tab h2 { + display: inline-block; +} +@media (max-width: 730px) { + .services .content .tab h2 { + padding-bottom: 10px; + } +} +.services .content .tab p { + width: 50%; + min-width: 280px; + white-space: pre-line; + margin: auto; + padding-bottom: 20px; +} +@media (max-width: 500px) { + .services .content .tab p { + width: 100%; + } +} +.services .content .tab picture { + width: 50%; + padding-left: 3.4%; + display: flex; + justify-content: center; + margin: auto; +} +@media (max-width: 730px) { + .services .content .tab picture { + padding: 0px; + width: 100%; + } +} +.services .content .tab picture img { + width: 100%; +} +.services .content .tab.hidden { + display: none; +} +.contact .jumbotron { + background-image: url(../img/contact/contact-jumbotron.png); + position: relative; + height: 62.5%; + background-repeat: no-repeat; + background-size: cover; + height: 245px; +} +@media (max-width: 500px) { + .contact .jumbotron { + background-image: url(../img/contact/contact-mobile-jumbotron.png); + width: 100%; + background-size: cover; + background-position: bottom; + min-height: 260px; + height: auto; + } +} +.contact .jumbotron .banner { + bottom: 20px; +} +@media (max-width: 500px) { + .contact .jumbotron { + width: 100%; + background-size: cover; + background-position: bottom; + min-height: 260px; + height: auto; + } +} +.contact .mid-content { + display: flex; +} +.contact .mid-content h2, +.contact .mid-content h3 { + color: #222222; +} +@media (max-width: 500px) { + .contact .mid-content { + flex-direction: column; + } +} +.contact .mid-content .panel { + width: 50%; + padding: 50px 2% 50px; + margin-left: 8.3%; +} +.contact .mid-content .panel .header-text { + padding-bottom: 20px; +} +.contact .mid-content .panel .header-text h2 { + color: #3c3c3c; + font-size: 2.4rem; +} +@media (max-width: 500px) { + .contact .mid-content .panel { + margin-left: auto; + margin-right: auto; + padding: 38px 4.1% 0px; + width: 100%; + } +} +.contact .mid-content .panel.left-panel form { + display: flex-box; + flex-flow: column nowrap; + justify-content: space-between; + font-size: 1.5rem; +} +.contact .mid-content .panel.left-panel form input, +.contact .mid-content .panel.left-panel form label, +.contact .mid-content .panel.left-panel form small, +.contact .mid-content .panel.left-panel form select, +.contact .mid-content .panel.left-panel form textarea { + display: block; + width: 100%; +} +.contact .mid-content .panel.left-panel form small { + color: #75758b; +} +@media (max-width: 500px) { + .contact .mid-content .panel.left-panel form small { + font-size: 1.2rem; + } +} +.contact .mid-content .panel.left-panel form input, +.contact .mid-content .panel.left-panel form select, +.contact .mid-content .panel.left-panel form textarea { + font-size: 1.6rem; + padding: 8px; + border-radius: 4px; + border: 0.5px solid #222222; + margin: 2px 0px; + border: 0.75px solid #75758b; +} +.contact .mid-content .panel.left-panel form textarea { + height: 135px; +} +.contact .mid-content .panel.left-panel form .form-group { + padding-bottom: 35px; + min-width: 410px; +} +@media (max-width: 500px) { + .contact .mid-content .panel.left-panel form .form-group { + max-width: 290px; + min-width: 290px; + padding-bottom: 15px; + } +} +.contact .mid-content .panel.left-panel form .form-check input, +.contact .mid-content .panel.left-panel form .form-check label { + display: inline-block; + width: auto; +} +.contact .mid-content .panel.left-panel form [type="radio"] { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.contact .mid-content .panel.left-panel form [type="radio"] + span::before { + content: ""; + display: inline-block; + width: 1rem; + height: 1rem; + vertical-align: -0.025rem; + border-radius: 1rem; + border: 0.5px solid #75758b; + margin-right: 0.75rem; + transition: 0.5s ease all; +} +.contact .mid-content .panel.left-panel form [type="radio"]:checked + span::before { + border-color: #828282; + background: #222222; +} +.contact .mid-content .panel.left-panel form button { + margin-top: 28px; + width: 135px; +} +@media (max-width: 500px) { + .contact .mid-content .panel.left-panel form button { + padding: 15px 0px 15px; + width: 100%; + } +} +.contact .mid-content .panel.right-panel { + margin-left: 11.7%; +} +.contact .mid-content .panel.right-panel .locations h3 { + font-size: 2rem; +} +.contact .mid-content .panel.right-panel .locations p { + padding-top: 4px; + padding-bottom: 4px; +} +.contact .mid-content .panel.right-panel .location { + padding-bottom: 35px; +} +@media (max-width: 500px) { + .contact .mid-content .panel.right-panel { + margin-left: auto; + justify-content: left; + } +} +.contact .mid-content h2, +.contact .mid-content p, +.contact .mid-content button { + padding: 15px 0px 15px; +} +@media (max-width: 500px) { + .contact .mid-content h2, + .contact .mid-content p, + .contact .mid-content button { + padding-top: 0px; + } +} diff --git a/img/home/home-mobile-the-blocks-img.png b/img/home-mobile-the-blocks-img.png similarity index 100% rename from img/home/home-mobile-the-blocks-img.png rename to img/home-mobile-the-blocks-img.png diff --git a/index.html b/index.html index 8a84a17304..0ae7afc8a5 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,224 @@ - - - Home - - - - - - - -

You got this! Good luck.

- - - - - - - - - - \ No newline at end of file + + + + Home + + + + + + + +
+ + + + + +
+ +
+
+
+

Smith & Jones Architects

+

+ Et sed autem causae appareat, tempor abhorreant te mei, facer + facilisis sit ea. Eu timeam vidisse consectetuer sed. Duo etiam + laboramus dissentiet in, nec no errem +

+ +
+ + + + Blueprints + + + + + Buildings + + +
+

Futuristic Designs

+

+ Et sed autem causae appareat, tempor abhorreant te mei, facer + facilisis sit ea. Eu timeam vidisse consectetuer sed. Duo etiam + laboramus dissentiet in, nec no errem +

+ +
+
+ + + +
+
+

Recent Projects

+ + + + + + +

THE VILLAS

+
+ +
+

+ The Villas bring to the table win-win survival strategies to ensure + proactive domination. At the end of the day, going forward, a new + normal that has evolved from generation X is on the runway heading + towards a streamlined cloud solution. +

+
+

+ Capitalize on low hanging fruit to identify a ballpark value added + activity to beta test. Override the digital divide with additional + clickthroughs from DevOps. Nanotechnology immersion along the + information highway will close the loop on focusing solely on the + bottom line. +

+
+ +
+ + + + +

OUTSKIRTS

+
+ +
+

+ The Outskirts are amazing to the table win-win survival strategies + to ensure proactive domination. At the end of the day, going + forward, a new normal that has evolved from generation X is on the + runway heading towards a streamlined cloud solution. +

+
+ +

+ Capitalize on low hanging fruit to identify a ballpark value added + activity to beta test. Override the digital divide with additional + clickthroughs from DevOps. Nanotechnology immersion along the + information highway will close the loop on focusing solely on the + bottom line. +

+
+ +
+ + + + + +

THE BLOCKS

+
+ +
+

+ The Blocks are amazing to the table win-win survival strategies to + ensure proactive domination. At the end of the day, going forward, a + new normal that has evolved from generation X is on the runway + heading towards a streamlined cloud solution. +

+
+

+ Capitalize on low hanging fruit to identify a ballpark value added + activity to beta test. Override the digital divide with additional + clickthroughs from DevOps. Nanotechnology immersion along the + information highway will close the loop on focusing solely on the + bottom line. +

+
+
+ +


+ + + + + + + diff --git a/js/index.js b/js/index.js index bb3d341cf0..cef18e35fd 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,52 @@ -// JS goes here \ No newline at end of file +let navToggleButton = { + collapsed: true, + element: document.querySelector(".nav-main-button"), + openImage: "img/nav-hamburger.png", + closeImage: "img/nav-hamburger-close.png" +}; + +let pageContents = document.querySelector(".container"); +let nav = document.querySelector("nav"); + +//handles hamburger +navToggleButton.element.addEventListener("click", () => { + nav.classList.toggle("collapsed"); + if (navToggleButton.collapsed === true) { + navToggleButton.element.innerHTML = `close button`; + navToggleButton.collapsed = false; + } else { + navToggleButton.element.innerHTML = `close button`; + navToggleButton.collapsed = true; + } +}); + +//Handles Scroll Logic +(function scrollLogic() { + var last_known_scroll_position = 0; + var ticking = false; + + function updateNavColor(scroll_pos) { + if (scroll_pos === 0) { + nav.classList.remove("scrolled"); + } else { + nav.classList.add("scrolled"); + } + } + + window.addEventListener("scroll", function handleScroll(e) { + last_known_scroll_position = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(function handleAnimation() { + updateNavColor(last_known_scroll_position); + ticking = false; + }); + + ticking = true; + } + }); +})(); diff --git a/js/services.js b/js/services.js new file mode 100644 index 0000000000..66fc06020b --- /dev/null +++ b/js/services.js @@ -0,0 +1,94 @@ +class Tabs { + constructor(tabs, parentElem) { + this.parentElem = parentElem; + this.element = tabs; + this.tabs = Array.from(document.querySelectorAll(".tab")); + this.links = Array.from(document.querySelectorAll(".tab-link")); + this.links = this.links.map(link => { + return new TabLink(link, this); + }); + this.activeLink = this.links[0]; + this.init(); + } + + updateActive(link) { + this.activeLink.deactivateTab(); + this.activeLink = link; + this.activeLink.activateTab(); + } + + init() { + this.links.forEach(link => { + link.deactivateTab(); + link.element.addEventListener("click", link.updateTabsOnClick.bind(link)); + }); + this.activeLink.activateTab(); + } +} + +class TabLink { + constructor(link, parent) { + this.element = link; + this.parent = parent; + this.data = this.element.dataset.tab; + this.tabArr = this.getLinkedTabs(); + } + getLinkedTabs() { + return this.parent.tabs.filter(tab => { + return tab.dataset.tab === this.data; + }); + } + activateTab() { + this.element.classList.add("selected"); + console.log(window.innerWidth); + if (window.innerWidth > 600) { + this.tabArr.forEach(tab => { + tab.classList.remove("hidden"); + let container = this.parent.parentElem; + let containerHeight = container.clientHeight; + containerHeight = "" + containerHeight + "px"; + container.style.height = containerHeight; + let oldTabHeight = tab.scrollHeight; + oldTabHeight = "" + oldTabHeight + "px"; + TweenLite.set(tab, { /* y: 50 ,*/ height: 0, opacity: 0 }); + TweenLite.to(tab, 0.15, { y: -60, opacity: 1 }); + TweenLite.to(tab, 0.25, { + y: 0, + height: oldTabHeight, + delay: 0.1, + ease: Power4.easeOut, + onComplete: () => { + TweenLite.to(container, 0.5, { height: "auto" }); + TweenLite.to(tab, 0.5, { height: "auto" }); + } + }); + }); + } else { + this.tabArr.forEach(tab => { + tab.classList.remove("hidden"); + TweenLite.set(tab, { opacity: 0 }); + TweenLite.to(tab, 0.25, { opacity: 1 }); + }); + } + } + + deactivateTab() { + this.element.classList.remove("selected"); + this.tabArr.forEach(tab => { + tab.classList.add("hidden"); + }); + } + updateTabsOnClick() { + this.parent.updateActive(this); + } +} + +let tabsArr = document.querySelectorAll(".tabs"); +tabsArr = Array.from(tabsArr); +tabsArr = tabsArr.map(tabs => { + return new Tabs(tabs, document.querySelector(".content")); +}); + +tabsArr.forEach(tabs => { + tabs.init(); +}); diff --git a/less/contact.less b/less/contact.less new file mode 100644 index 0000000000..33829e1d3e --- /dev/null +++ b/less/contact.less @@ -0,0 +1,160 @@ +.contact { + .jumbotron { + .jumbotron( + "../img/contact/contact-jumbotron.png", + "../img/contact/contact-mobile-jumbotron.png" + ); + background-repeat: no-repeat; + background-size: cover; + height: 245px; + .banner { + bottom: 20px; + } + @media @mobile { + width: 100%; + background-size: cover; + background-position: bottom; + min-height: 260px; + height: auto; + } + } + .mid-content { + h2, + h3 { + color: @dark; + } + display: flex; + @media @mobile { + flex-direction: column; + } + .panel { + .header-text { + padding-bottom: 20px; + h2 { + color: lighten(@dark, 10%); + font-size: 2.4rem; + } + } + width: 50%; + padding: 50px 2% 50px; + margin-left: 8.3%; + @media @mobile { + margin-left: auto; + margin-right: auto; + padding: 38px 4.1% 0px; + width: 100%; + } + &.left-panel { + form { + display: flex-box; + flex-flow: column nowrap; + justify-content: space-between; + font-size: 1.5rem; + input, + label, + small, + select, + textarea { + display: block; + width: 100%; + } + small { + color: @medium-gray; + @media @mobile { + font-size: 1.2rem; + } + } + input, + select, + textarea { + font-size: 1.6rem; + padding: 8px; + .rounded-border; + margin: 2px 0px; + border: 0.75px solid @medium-gray; + } + textarea { + height: 135px; + } + .form-group { + padding-bottom: 35px; + min-width: 410px; + @media @mobile { + max-width: 290px; + min-width: 290px; + padding-bottom: 15px; + } + } + .form-check { + input, + label { + display: inline-block; + width: auto; + } + } + + [type="radio"] { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + [type="radio"] + span::before { + content: ""; + display: inline-block; + width: 1rem; + height: 1rem; + vertical-align: -0.025rem; + border-radius: 1rem; + border: 0.5px solid @medium-gray; + margin-right: 0.75rem; + transition: 0.5s ease all; + } + [type="radio"]:checked + span::before { + border-color: @dark-gray; + background: @dark; + } + button { + margin-top: 28px; + width: 135px; + @media @mobile { + padding: 15px 0px 15px; + width: 100%; + } + } + } + } + &.right-panel { + margin-left: 11.7%; + .locations { + h3 { + font-size: 2rem; + } + p { + padding-top: 4px; + padding-bottom: 4px; + } + } + .location { + padding-bottom: 35px; + } + @media @mobile { + margin-left: auto; + justify-content: left; + } + } + } + h2, + p, + button { + padding: 15px 0px 15px; + @media @mobile { + padding-top: 0px; + } + } + } +} diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..69688e9aa4 --- /dev/null +++ b/less/footer.less @@ -0,0 +1,81 @@ +footer { + margin-top: 25%; + padding-top: 66px; + display: flex; + flex-wrap: wrap; + color: lighten(@dark-gray, 40%); + background-color: @dark-gray; + @media @mobile { + padding-left: 4.7%; + padding-top: 30px; + margin-top: 5%; + } + .email { + padding-left: 8.3%; + width: 33.33%; + @media @mobile { + padding-left: 0; + padding-right: 8%; + width: 100%; + padding-bottom: 20px; + } + input { + margin-top: 10px; + font-size: 1.8rem; + height: 42px; + width: 100%; + min-width: 150px; + .rounded-border; + color: @dark-gray; + padding-left: 2%; + @media @mobile { + margin: 12px 0px 8px 0px; + font-size: 1.6rem; + } + } + } + .fine-print { + font-size: 1.2rem; + } + .locations { + width: 66.67%; + display: flex; + justify-content: space-between; + padding-right: 8.3%; + padding-left: 5.3%; + @media @mobile { + width: 100%; + flex-direction: column; + padding-left: 0; + .location { + padding-bottom: 25px; + } + } + } + h3 { + font-size: 1.8rem; + font-weight: 700; + line-height: 2.4rem; + } + p { + font-size: 1.4rem; + line-height: 2.6rem; + } +} +.copyright { + padding-top: 38px; + width: 100%; + display: grid; + justify-content: center; + .fine-print { + justify-content: center; + } + @media @mobile { + padding-top: 0px; + padding-bottom: 25px; + justify-content: left; + } + input { + padding-left: 0.8%; + } +} diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..c27c79044e --- /dev/null +++ b/less/global.less @@ -0,0 +1,27 @@ +html, +body, +.home-wrapper { + height: 100%; + color: @dark; + margin: 0 auto; +} + +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + font-family: "Roboto", sans-serif; + font-size: 1.6rem; + line-height: 2.4rem; + h1, + h2, + h3, + h4 { + font-weight: 700; + } +} diff --git a/less/home.less b/less/home.less new file mode 100644 index 0000000000..a50d7e60a4 --- /dev/null +++ b/less/home.less @@ -0,0 +1,285 @@ +.home-wrapper { + width: 1100px; + max-width: 100%; + margin: 0px auto; + img { + width: 100%; + height: auto; + } + p { + width: 100%; + height: auto; + } + button { + font-size: 1.5rem; + background-color: white; + border: 1px solid @dark; + padding: 13px 28px 13px 28px; + } + + h1 { + font-size: 6.4rem; + line-height: 7.5rem; + @media @mobile { + font-size: 3.4rem; + line-height: 4rem; + } + } + + h2 { + font-size: 2.8rem; + color: @dark; + @media @mobile { + font-size: 2.4rem; + } + } + + h3 { + font-size: 2.4rem; + } + + .jumbotron { + .jumbotron( + "../img/home/home-jumbotron.png", + "../img/home/home-mobile-jumbotron.png" + ); + height: 60%; + .banner { + h1, + h2, + h3, + h4 { + color: @white; + } + } + } + + header, + .banner { + padding: 22px 8.4% 48px; + bottom: 10px; + } + .banner { + padding-top: 15%; + } + + .banner { + position: absolute; + + @media @mobile { + bottom: 0px; + padding: 3%; + } + } + + .home-par-mid { + max-width: 100%; + display: grid; + grid-row-gap: 15%; + grid-column-gap: 4%; + margin: 10% 5% 10% 5%; + justify-items: center; + align-items: center; + @media @tablet { + margin: 3%; + margin-bottom: 0%; + grid-row-gap: 6%; + grid-column-gap: 3%; + } + @media @big-mobile { + margin-bottom: 0%; + } + @media @mobile { + margin-bottom: 80%; + } + + .home-mid { + width: 70%; + max-width: 100%; + grid-column: 1 e("/") 2; + grid-row: 1 e("/") 2; + @media @tablet { + grid-column: 1 e("/") 2; + grid-row: 2 e("/") 3; + } + p { + margin-top: 5%; + margin-bottom: 5%; + line-height: 3rem; + } + } + .home-mid-img { + grid-column: 2 e("/") 3; + grid-row: 1 e("/") 2; + + width: 100%; + max-width: 100%; + @media @tablet { + grid-column: 1 e("/") 2; + grid-row: 1 e("/") 2; + margin-top: 10%; + } + } + + .home-mid1 { + grid-column: 2 e("/") 3; + grid-row: 2 e("/") 3; + + width: 70%; + max-width: 100%; + @media @tablet { + grid-column: 1 e("/") 2; + grid-row: 4 e("/") 5; + } + p { + margin-top: 5%; + margin-bottom: 5%; + line-height: 3rem; + } + } + .home-mid-img1 { + grid-column: 1 e("/") 2; + grid-row: 2 e("/") 3; + + max-width: 100%; + width: 100%; + picture { + img { + width: 100%; + } + source { + width: 100%; + } + } + @media @tablet { + grid-column: 1 e("/") 2; + grid-row: 3 e("/") 4; + } + } + } + + .rec { + margin: 0 auto 6% auto; + } + .home-par-bottom { + display: grid; + grid-row-gap: 3%; + margin-bottom: 20%; + @media @tablet { + margin-top: 50%; + grid-row-gap: 4%; + margin-bottom: 20%; + } + @media @mobile { + margin-bottom: 95%; + } + + img, + .title-card, + p { + width: 100%; + height: auto; + } + .villa { + max-width: 100%; + } + + .home-bottom { + justify-self: center; + position: relative; + max-width: 100%; + grid-column: 1 e("/") 2; + grid-row: 1 e("/") 2; + } + .home-bottom1 { + justify-self: center; + width: 48%; + margin: 7% auto 7% auto; + max-width: 100%; + grid-column: 1 e("/") 2; + grid-row: 2 e("/") 3; + @media @tablet { + width: 80%; + margin: 5% 3% 5% 3%; + } + } + .home-bottom2 { + justify-self: center; + position: relative; + max-width: 100%; + grid-column: 1 e("/") 2; + grid-row: 3 e("/") 4; + } + .home-bottom3 { + justify-self: center; + width: 48%; + margin: 7% auto 7% auto; + max-width: 100%; + grid-column: 1 e("/") 2; + grid-row: 4 e("/") 5; + @media @tablet { + width: 80%; + margin: 5% 3% 5% 3%; + } + } + .home-bottom4 { + justify-self: center; + position: relative; + max-width: 100%; + grid-column: 1 e("/") 2; + grid-row: 5 e("/") 6; + } + .home-bottom5 { + justify-self: center; + width: 48%; + margin: 7% auto 7% auto; + max-width: 100%; + grid-column: 1 e("/") 2; + grid-row: 6 e("/") 7; + @media @tablet { + width: 80%; + margin: 5% 3% 5% 3%; + } + p { + max-width: 100%; + } + } + .title-card { + max-width: 100%; + position: absolute; + z-index: 0; + bottom: -50px; + background-color: @gray; + border: 1.3px solid @white; + width: 316px; + height: 95px; + display: flex; + justify-content: center; + align-items: center; + p { + text-align: center; + letter-spacing: 0.5rem; + font-weight: 0; + font-size: 2.2rem; + color: @dark; + @media @mobile { + font-size: 2.4rem; + max-width: 100%; + } + } + &.right { + right: 0px; + @media @mobile { + right: auto; + max-width: 100%; + } + + @media @mobile { + bottom: -66px; + width: 90.7%; + border: none; + } + } + } + } +} diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..2875fe12ff 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,9 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ - -html,body,div,span,applet,object,iframe, -h1,h2,h3,h4,h5,h6,p,blockquote,pre, -a,abbr,acronym,address,big,cite,code, -del,dfn,em,img,ins,kbd,q,s,samp, -small,strike,strong,sub,sup,tt,var, -b,u,i,center, -dl,dt,dd,ol,ul,li, -fieldset,form,label,legend, -table,caption,tbody,tfoot,thead,tr,th,td, -article,aside,canvas,details,figcaption,figure, -footer,header,hgroup,menu,nav,section,summary, -time,mark,audio,video{ - margin:0; - padding:0; - border:0; - outline:0; - font-size:100%; - font:inherit; - vertical-align:baseline; -} -/* HTML5 display-role reset for older browsers */ -article,aside,details,figcaption,figure, -footer,header,hgroup,menu,nav,section{ - display:block; -} -body{ - line-height:1; -} -ol,ul{ - list-style:none; -} -blockquote,q{ - quotes:none; -} -blockquote:before,blockquote:after, -q:before,q:after{ - content:’’; - content:none; -} -ins{ - text-decoration:none; -} -del{ - text-decoration:line-through; -} - -table{ - border-collapse:collapse; - border-spacing:0; -} - -/* Your Code Goes Here */ \ No newline at end of file +@import "reset.less"; +@import "nav.less"; +@import "variables.less"; +@import "home.less"; +@import "global.less"; +@import "mixins.less"; +@import "footer.less"; +@import "services.less"; +@import "contact.less"; diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..3cb9818f8e --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,20 @@ +.jumbotron(@image-url, @image-url-mobile) { + background-image: ~"url(@{image-url})"; + background-repeat: no-repeat; + background-size: cover; + position: relative; + height: 62.5%; + + @media @mobile { + background-image: ~"url(@{image-url-mobile})"; + width: 100%; + background-size: cover; + background-position: bottom; + min-height: 260px; + height: auto; + } +} +.rounded-border { + border-radius: @border-radius; + border: 0.5px solid @dark; +} diff --git a/less/nav.less b/less/nav.less new file mode 100644 index 0000000000..77a234e7fa --- /dev/null +++ b/less/nav.less @@ -0,0 +1,71 @@ +nav { + .logo { + h2 { + color: @white; + } + } + + transition: height 0.5s, background-color 0.5s; + margin: 0 auto; + height: opx; + width: inherit; + max-width: 100%; + z-index: 2; + background-color: #98a4af; + opacity: 0.95; + position: fixed; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + h1, + h2, + h3, + h4 { + color: white; + } + header { + display: flex; + justify-content: space-between; + z-index: 2; + max-width: 100%; + } + .nav-links { + display: flex; + flex-direction: column; + overflow: hidden; + align-items: center; + justify-content: space-evenly; + height: 100%; + width: 100%; + max-width: inherit; + padding-bottom: @nav-height; // position: fixed; + a { + color: @white; + font-weight: 500; + font-size: 40px; + line-height: 85px; + text-decoration: none; + &:hover { + color: @dark; + } + } + } + &.collapsed { + // background: linear-gradient(@dark, @navbar-gray); + transition-property: height 1s; + height: 80px; + @media @mobile { + height: 55px; + } + bottom: none; + background-color: transparent; + &.scrolled { + background-color: @navbar-gray; + } + .nav-links { + padding: 0; + height: 0; + } + } +} diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000000..e3148f66a7 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,137 @@ +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; +} +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..7c2446f8c5 --- /dev/null +++ b/less/services.less @@ -0,0 +1,164 @@ +.services { + button { + padding: 15px 0px 15px; + } + + button { + margin-top: 10px; + width: 235px; + height: 100px; + + @media @mobile { + width: 100%; + } + } + + h2 { + font-size: 2.8rem; + color: @dark; + @media @mobile { + font-size: 2.4rem; + } + } + .jumbotron { + .jumbotron( + "../img/services/services-jumbotron.png", + "../img/services/services-mobile-jumbotron.png" + ); + height: 60%; + .banner { + h1, + h2, + h3, + h4 { + color: @white; + } + } + background-repeat: no-repeat; + background-size: cover; + height: 245px; + .banner { + bottom: 20px; + } + @media @mobile { + width: 100%; + background-size: cover; + background-position: bottom; + min-height: 260px; + height: auto; + } + } + p { + font-size: 1.5rem; + } + .content { + padding-left: 8.3%; + padding-right: 8.3%; + padding-bottom: 100px; + .intro { + padding-top: 58px; + padding-bottom: 50px; + + @media @mobile { + padding-top: 34px; + padding-bottom: 35px; + } + } + + @media @mobile { + padding-left: 6.25%; + padding-right: 6.25%; + padding-bottom: 60px; + } + .buttons { + display: flex; + justify-content: space-between; + padding-bottom: 35px; + + @media @tablet { + text-align: center; + display: inline-block; + padding-bottom: 20px; + } + + button { + width: 184px; + height: 50px; + font-size: 1.8rem; + font-weight: 700; + margin-bottom: 22px; + + &:hover { + background-color: @dark; + color: @white; + } + &.selected { + background-color: @blue; + color: @white; + border: none; + } + + @media @mobile { + width: 100%; + } + } + } + + .tab { + display: flex; + flex-wrap: wrap; + align-items: space-between; + justify-content: center; + overflow: hidden; + + @media @services-mobile { + flex-flow: column nowrap; + } + + .header-text { + width: 100%; + @media @services-mobile { + display: flex; + justify-content: center; + padding-bottom: 12px; + } + } + h2 { + display: inline-block; + @media @services-mobile { + padding-bottom: 10px; + } + } + p { + width: 50%; + min-width: 280px; + white-space: pre-line; + margin: auto; + padding-bottom: 20px; + + @media @mobile { + width: 100%; + } + } + picture { + width: 50%; + padding-left: 3.4%; + display: flex; + justify-content: center; + margin: auto; + + @media @services-mobile { + padding: 0px; + width: 100%; + } + img { + width: 100%; + } + } + + &.hidden { + display: none; + } + } + } +} diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..3a5bbc6c37 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,19 @@ +@mobile: ~"(max-width: 500px)"; +@tablet: ~"(max-width: 730px)"; +@services-mobile: ~"(max-width: 730px)"; +@small-mobile: ~"(max-width: 300px)"; +@large-max-width: 1025px; +@big-mobile: ~"(max-width: 600px)"; + +@border-radius: 4px; + +@nav-height: 98px; + +//colors +@white: #ffffff; +@dark: #222222; +@gray: #d8d8d8; +@blue: #5e9fb9; +@dark-gray: #828282; +@medium-gray: #75758b; +@navbar-gray: #98a4af; diff --git a/services.html b/services.html index fb5a79e18a..e8a45fa0aa 100644 --- a/services.html +++ b/services.html @@ -1,9 +1,9 @@ + Services - +
+
+

+ Services include: completely synergize resource taxing relationships via premier niche markets. Professionally cultivate + one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of + the art customer service. +

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

New York

+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202 555 0144

+
+
+

Florida

+

Ocean Drive

+

Suite 201

+

Orlando, FL 22345

+

502 555 0144

+
+
+

California

+

Mountain Street

+

Suite 105

+

San Diego, CA 22345

+

702 555 0144

+
+
+
+

Copyright © 2018 Smith and Jones

+
+
+
+ + + + ---> + + + \ No newline at end of file