From b5eb090f663209e41c60f4b9e1f862e525344736 Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 26 Feb 2019 19:38:02 -0800 Subject: [PATCH 01/21] User-Interface-Project-Week --- css/index.css | 137 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 8 ++- 2 files changed, 143 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index e6b2b589c1..4df28c59af 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,136 @@ -/* 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; +} +/* Your Code Goes Here */ diff --git a/index.html b/index.html index 8a84a17304..e1acea3cfc 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,8 @@ + + Home @@ -12,7 +14,9 @@ -

You got this! Good luck.

+
+ +

S&J

+ +
\ No newline at end of file From a2383a5a6d0a6db35b8ddd7fc1466b198a096c53 Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 26 Feb 2019 21:17:37 -0800 Subject: [PATCH 02/21] homepage desktop markup --- index.html | 248 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 168 insertions(+), 80 deletions(-) diff --git a/index.html b/index.html index e1acea3cfc..a66721c0e5 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -16,87 +17,174 @@
-

S&J

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

S&J

+ +
+
+
+
+
+ + + +
+ + +
+

Integrity,
Excellence,
Progress.

+
+
+ + + + +
+
+
+

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

+ + + +
+
+ + +
+
+

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.

+ +
+ + + +
+
+
+

Interested in starting a project?

+

Let’s talk:

+ +

We'll never share your email with anyone else.

+
+ +
+
+
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 From c7c89f7ba1c9e87bc9022269b6006750c53378cd Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 27 Feb 2019 19:21:40 -0800 Subject: [PATCH 03/21] added new components files and less files --- components/CTA/cta.less | 0 components/Footer/footer.less | 0 components/Jumbotron/jumbotron.less | 0 components/Navigation/navigation.less | 0 components/RecentProjects/recentProjects.less | 0 css/index.css | 55 +++++++++++++++++ index.html | 3 +- js/tabs.js | 0 less/global.less | 59 +++++++++++++++++++ less/index.less | 16 ++++- less/services.less | 0 11 files changed, 131 insertions(+), 2 deletions(-) create mode 100644 components/CTA/cta.less create mode 100644 components/Footer/footer.less create mode 100644 components/Jumbotron/jumbotron.less create mode 100644 components/Navigation/navigation.less create mode 100644 components/RecentProjects/recentProjects.less create mode 100644 js/tabs.js create mode 100644 less/global.less create mode 100644 less/services.less diff --git a/components/CTA/cta.less b/components/CTA/cta.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/Footer/footer.less b/components/Footer/footer.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/Jumbotron/jumbotron.less b/components/Jumbotron/jumbotron.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/RecentProjects/recentProjects.less b/components/RecentProjects/recentProjects.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/css/index.css b/css/index.css index 4df28c59af..3b98e5d268 100644 --- a/css/index.css +++ b/css/index.css @@ -134,3 +134,58 @@ table { border-spacing: 0; } /* Your Code Goes Here */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', Arial, sans-serif; +} +h1 { + font-size: 2.5rem; + font-weight: bold; + color: #FFFFFF; +} +h2 { + font-size: 6.4rem; + font-weight: bold; + line-height: 75px; + color: #FFFFFF; +} +h3 { + font-size: 2.4rem; + font-weight: bold; + color: #222222; +} +h4 { + font-size: 2rem; + font-weight: bold; +} +h5 { + font-size: 2rem; + line-height: 2.4rem; + color: #FFFFFF; + font-weight: normal; +} +p { + font-size: 1.8rem; + line-height: 2.4rem; + font-weight: normal; +} +.container { + max-width: 1025px; + width: 100%; + margin: 0 auto; +} +img { + max-width: 100%; + height: auto; +} diff --git a/index.html b/index.html index a66721c0e5..6fcbf70e3d 100644 --- a/index.html +++ b/index.html @@ -182,7 +182,8 @@
California

Copyright © 2018 Smith and Jones

- + + diff --git a/js/tabs.js b/js/tabs.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..5c7609cc7f --- /dev/null +++ b/less/global.less @@ -0,0 +1,59 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +html, body { + font-family: 'Roboto', Arial, sans-serif; + +} + +h1 { + font-size: 2.5rem; + font-weight: bold; + color: #FFFFFF; +} + +h2 { + font-size: 6.4rem; + font-weight: bold; + line-height: 75px; + color: #FFFFFF; +} + +h3 { + font-size: 2.4rem; + font-weight: bold; + color: #222222; +} +h4 { + font-size: 2rem; + font-weight: bold; +} + +h5 { + font-size: 2rem; + line-height: 2.4rem; + color: #FFFFFF; + font-weight: normal; +} + +p { + font-size: 1.8rem; + line-height: 2.4rem; + font-weight: normal; +} + +.container { + max-width: 1025px; + width: 100%; + margin: 0 auto; +} + +img { + max-width: 100%; + height: auto; +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..18bff47794 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,18 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +@import './global.less'; +@import './navigation.less'; +@import './services.less'; +@import '../components/CTA/cta.less'; +@import '../components/Footer/footer.less'; +@import '../components/Jumbotron/jumbotron.less'; +@import '../components/Navigation/navigation.less'; +@import '../components/RecentProjects/recentProjects.less'; \ No newline at end of file diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..e69de29bb2 From be80ec19a67b857d2b9d51249cb4c014265d5b51 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 27 Feb 2019 19:58:12 -0800 Subject: [PATCH 04/21] added styling to navigation and jumbotron --- components/Jumbotron/jumbotron.less | 37 ++++++++ components/Navigation/navigation.less | 105 +++++++++++++++++++++++ css/index.css | 117 ++++++++++++++++++++++++++ less/index.less | 1 - 4 files changed, 259 insertions(+), 1 deletion(-) diff --git a/components/Jumbotron/jumbotron.less b/components/Jumbotron/jumbotron.less index e69de29bb2..33964fabdc 100644 --- a/components/Jumbotron/jumbotron.less +++ b/components/Jumbotron/jumbotron.less @@ -0,0 +1,37 @@ + +.jumbotron { + width: 100%; + position: relative; + z-index: -1; + + + .jumbotron h2 { + position: absolute; + top: 54%; + left: 8.1%; + z-index: 1; + } + + .jumbo-services { + width: 100%; + position: relative; + z-index: -1; + } + + .jumbo-contact { + width: 100%; + position: relative; + } + + h2 { + position: absolute; + top: 54%; + left: 7.7%; + z-index: 1; + } + + .mobile-jumbo { + display: none; + } + +} \ No newline at end of file diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index e69de29bb2..5d459211dd 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -0,0 +1,105 @@ +.menu-container { + background-color: #99A4AF; + position: relative; + height: 50px; + width: 99.99%; + z-index: 999; + + .menu-container::after { + content: ''; + clear: both; + display: block; +} + + .logo { + float: left; + padding: 1% 0 0 8.2%; + margin: 0; + z-index: 2; + } + + .menu .content { + display: block; + transition: 0.3s all ease; + position: absolute; + top: 100%; + padding: 17.4%; + right: 0; + left: 0; + background: #99A4AE; + opacity: 0.9; + } + + .menu .site-nav { + display: none; + } + + /* .site-nav--open { + } */ + + .site-nav ul { + margin: 0; + padding: 0; + list-style: none; + } + + .content .nav-link{ + color: #FFFFFF; + padding-left: 36.5%; + text-decoration: none; + font-size: 4.5rem; + line-height: 81px; + letter-spacing: 2px; + z-index: 1; + cursor: pointer; + } + + .site-nav .nav-link:first-child { + padding-top: 5%; + } + + &:hover { + color: #504446; + } + + .menu-toggle { + padding: 2rem; + position: absolute; + top: 4%; + right: 6%; + cursor: pointer; + } + + .hamburger, + .hamburger::before, + .hamburger::after { + content: ''; + display: block; + background: #FFFFFf; + height: 3px; + width: 2.5rem; + border-radius: 3px; + transition: all ease-in-out 500ms; + } + + .hamburger::before { + transform: translateY(-7px); + } + + .hamburger::after { + transform: translateY(4px); + } + + .open .hamburger { + transform: rotate(45deg); + } + + .open .hamburger::before { + opacity: 0; + } + + .open .hamburger::after { + transform: translateY(-3px) rotate(-90deg); + } + +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index 3b98e5d268..0f572ef562 100644 --- a/css/index.css +++ b/css/index.css @@ -189,3 +189,120 @@ img { max-width: 100%; height: auto; } +.jumbotron { + width: 100%; + position: relative; + z-index: -1; +} +.jumbotron .jumbotron h2 { + position: absolute; + top: 54%; + left: 8.1%; + z-index: 1; +} +.jumbotron .jumbo-services { + width: 100%; + position: relative; + z-index: -1; +} +.jumbotron .jumbo-contact { + width: 100%; + position: relative; +} +.jumbotron h2 { + position: absolute; + top: 54%; + left: 7.7%; + z-index: 1; +} +.jumbotron .mobile-jumbo { + display: none; +} +.menu-container { + background-color: #99A4AF; + position: relative; + height: 50px; + width: 99.99%; + z-index: 999; + /* .site-nav--open { + } */ +} +.menu-container .menu-container::after { + content: ''; + clear: both; + display: block; +} +.menu-container .logo { + float: left; + padding: 1% 0 0 8.2%; + margin: 0; + z-index: 2; +} +.menu-container .menu .content { + display: block; + transition: 0.3s all ease; + position: absolute; + top: 100%; + padding: 17.4%; + right: 0; + left: 0; + background: #99A4AE; + opacity: 0.9; +} +.menu-container .menu .site-nav { + display: none; +} +.menu-container .site-nav ul { + margin: 0; + padding: 0; + list-style: none; +} +.menu-container .content .nav-link { + color: #FFFFFF; + padding-left: 36.5%; + text-decoration: none; + font-size: 4.5rem; + line-height: 81px; + letter-spacing: 2px; + z-index: 1; + cursor: pointer; +} +.menu-container .site-nav .nav-link:first-child { + padding-top: 5%; +} +.menu-container:hover { + color: #504446; +} +.menu-container .menu-toggle { + padding: 2rem; + position: absolute; + top: 4%; + right: 6%; + cursor: pointer; +} +.menu-container .hamburger, +.menu-container .hamburger::before, +.menu-container .hamburger::after { + content: ''; + display: block; + background: #FFFFFf; + height: 3px; + width: 2.5rem; + border-radius: 3px; + transition: all ease-in-out 500ms; +} +.menu-container .hamburger::before { + transform: translateY(-7px); +} +.menu-container .hamburger::after { + transform: translateY(4px); +} +.menu-container .open .hamburger { + transform: rotate(45deg); +} +.menu-container .open .hamburger::before { + opacity: 0; +} +.menu-container .open .hamburger::after { + transform: translateY(-3px) rotate(-90deg); +} diff --git a/less/index.less b/less/index.less index 18bff47794..9dba230573 100644 --- a/less/index.less +++ b/less/index.less @@ -65,7 +65,6 @@ table{ } @import './global.less'; -@import './navigation.less'; @import './services.less'; @import '../components/CTA/cta.less'; @import '../components/Footer/footer.less'; From a82f8d3b8b64dcde0fab2fc31306e7f13cdf3a17 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 27 Feb 2019 20:25:14 -0800 Subject: [PATCH 05/21] added styling to CTA --- components/CTA/cta.less | 16 ++++++++++++++++ css/index.css | 14 ++++++++++++++ index.html | 36 ++++++++++++++++-------------------- 3 files changed, 46 insertions(+), 20 deletions(-) diff --git a/components/CTA/cta.less b/components/CTA/cta.less index e69de29bb2..b86df05587 100644 --- a/components/CTA/cta.less +++ b/components/CTA/cta.less @@ -0,0 +1,16 @@ +.CTA { + width: 100%; + margin: auto; + margin-top: 3%; + + .cta-content { + display: flex; + flex-direction: column; + flex-direction: row-reverse; + } + + .mobile-sj-img, .mobile-futuristic-img { + display: none; + } + +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index 0f572ef562..c7ed04a47b 100644 --- a/css/index.css +++ b/css/index.css @@ -189,6 +189,20 @@ img { max-width: 100%; height: auto; } +.CTA { + width: 100%; + margin: auto; + margin-top: 3%; +} +.CTA .cta-content { + display: flex; + flex-direction: column; + flex-direction: row-reverse; +} +.CTA .mobile-sj-img, +.CTA .mobile-futuristic-img { + display: none; +} .jumbotron { width: 100%; position: relative; diff --git a/index.html b/index.html index 6fcbf70e3d..91e5f75363 100644 --- a/index.html +++ b/index.html @@ -48,29 +48,25 @@

Integrity,
Excellence,
Progress.

-
-
-

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

- - - -
+
+ + +

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

+
-
-
-

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

- -
+
+

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

+
From 38e8d4afc14d41d9eddc9454116465afbf537a2a Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 27 Feb 2019 23:32:52 -0800 Subject: [PATCH 06/21] added styling to recent projects section --- components/CTA/cta.less | 52 +++++++++++--- components/RecentProjects/recentProjects.less | 36 ++++++++++ css/index.css | 68 ++++++++++++++++++- index.html | 35 +++++----- 4 files changed, 164 insertions(+), 27 deletions(-) diff --git a/components/CTA/cta.less b/components/CTA/cta.less index b86df05587..04c047f087 100644 --- a/components/CTA/cta.less +++ b/components/CTA/cta.less @@ -2,15 +2,51 @@ width: 100%; margin: auto; margin-top: 3%; - - .cta-content { + margin: 30px 0; display: flex; - flex-direction: column; - flex-direction: row-reverse; - } + flex-wrap: wrap; + justify-content: space-between; + + .cta-content { + width: 50%; + padding: 7% 1% 0% 8%; + } + + h3 { + padding-bottom: 21px; + } + + p { + font-size: 1.6rem; + padding-bottom: 28px; + } + + button { + background: #FFFFFF; + font-size: 1.6rem; + padding: 3% 7%; + text-align: center; + cursor: pointer; + } + + .smith-jones-img { + padding-top: 5%; + padding-right: 17%; + } + + .futuristic-img { + padding-top: 13%; + padding-left: 17%; + } + + .futuristic { + padding-top: 10%; + padding-right: 0%; + padding-left: 1%; + } - .mobile-sj-img, .mobile-futuristic-img { - display: none; - } + .mobile-sj-img, .mobile-futuristic-img { + display: none; + } } \ No newline at end of file diff --git a/components/RecentProjects/recentProjects.less b/components/RecentProjects/recentProjects.less index e69de29bb2..46377b2f6c 100644 --- a/components/RecentProjects/recentProjects.less +++ b/components/RecentProjects/recentProjects.less @@ -0,0 +1,36 @@ +.rp-title { + width: 100%; + padding: 6.5% 0 4.5% 8.5%; +} + +.recent-projects { + width: 100%; + margin: auto; + display: flex; + flex-direction: column; + + .project-img { + position: relative; + text-align: center; + } + + .mobile-villas-img, .mobile-outskirts-img, .mobile-blocks-img { + display: none; + } +} + +.box-title { + width: 30%; + // position: absolute; + top: 80%; + left: 70%; + } + + h4 { + text-align: center; + font-weight: normal; + font-size: 2.5rem; + letter-spacing: 6px; + padding: 35px 0px; + background-color: #D8D8D8; + } diff --git a/css/index.css b/css/index.css index c7ed04a47b..e5bcd442a6 100644 --- a/css/index.css +++ b/css/index.css @@ -193,11 +193,41 @@ img { width: 100%; margin: auto; margin-top: 3%; + margin: 30px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } .CTA .cta-content { - display: flex; - flex-direction: column; - flex-direction: row-reverse; + width: 50%; + padding: 7% 1% 0% 8%; +} +.CTA h3 { + padding-bottom: 21px; +} +.CTA p { + font-size: 1.6rem; + padding-bottom: 28px; +} +.CTA button { + background: #FFFFFF; + font-size: 1.6rem; + padding: 3% 7%; + text-align: center; + cursor: pointer; +} +.CTA .smith-jones-img { + padding-top: 5%; + padding-right: 17%; +} +.CTA .futuristic-img { + padding-top: 13%; + padding-left: 17%; +} +.CTA .futuristic { + padding-top: 10%; + padding-right: 0%; + padding-left: 1%; } .CTA .mobile-sj-img, .CTA .mobile-futuristic-img { @@ -320,3 +350,35 @@ img { .menu-container .open .hamburger::after { transform: translateY(-3px) rotate(-90deg); } +.rp-title { + width: 100%; + padding: 6.5% 0 4.5% 8.5%; +} +.recent-projects { + width: 100%; + margin: auto; + display: flex; + flex-direction: column; +} +.recent-projects .project-img { + position: relative; + text-align: center; +} +.recent-projects .mobile-villas-img, +.recent-projects .mobile-outskirts-img, +.recent-projects .mobile-blocks-img { + display: none; +} +.box-title { + width: 30%; + top: 80%; + left: 70%; +} +h4 { + text-align: center; + font-weight: normal; + font-size: 2.5rem; + letter-spacing: 6px; + padding: 35px 0px; + background-color: #D8D8D8; +} diff --git a/index.html b/index.html index 91e5f75363..06348b0b7b 100644 --- a/index.html +++ b/index.html @@ -49,8 +49,6 @@

Integrity,
Excellence,
Progress.

- -

Smith & Jones Architects

Et sed autem causae appareat, tempor abhorreant te mei, facer facilisis sit ea. Eu timeam vidisse consectetuer @@ -58,26 +56,31 @@

Smith & Jones Architects

Duo etiam laboramus dissentiet in, nec no errem

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

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

-
-
- +
+

Recent Projects

+
@@ -142,15 +145,15 @@

THE BLOCKS

-

Interested in starting a project?

-

Let’s talk:

+
Interested in starting a project?
+
Let’s talk:

We'll never share your email with anyone else.

-
New York
+
New York
123 Lane
Suite 100
Albany, NY 12345
@@ -158,7 +161,7 @@
New York
-
Florida
+
Florida
Ocean Drive
Suite 201
Orlando, FL 22345
@@ -166,7 +169,7 @@
Florida
-
California
+
California
Mountain Street
Suite 105
San Diego, CA 22345
From bcb315009ee75770766c8926246b9336dd29d952 Mon Sep 17 00:00:00 2001 From: Mariana Date: Thu, 28 Feb 2019 21:18:33 -0800 Subject: [PATCH 07/21] services page markup --- components/Footer/footer.less | 33 +++ components/Navigation/navigation.less | 5 +- components/RecentProjects/recentProjects.less | 33 +-- css/index.css | 49 ++++- index.html | 63 +++--- less/global.less | 3 +- services.html | 190 ++++++++++++++++-- 7 files changed, 307 insertions(+), 69 deletions(-) diff --git a/components/Footer/footer.less b/components/Footer/footer.less index e69de29bb2..9a6d82556d 100644 --- a/components/Footer/footer.less +++ b/components/Footer/footer.less @@ -0,0 +1,33 @@ +footer { + width: 100%; + background-color: #828282; + + h6 { + font-size: 1.9rem; + color: #FFFFFF; + } + + p { + font-size: 1.2rem; + color: #FFFFFF; + letter-spacing: .1rem; + font-weight: normal; + } + .footer-content { + padding: 5%; + display: flex; + + .footer-address { + width: 100%; + display: flex; + justify-content: space-around; + } + } + + .copyright { + text-align: center; +} + +} + + diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index 5d459211dd..01995cd5a5 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -75,7 +75,7 @@ .hamburger::after { content: ''; display: block; - background: #FFFFFf; + background: #FFFFFF; height: 3px; width: 2.5rem; border-radius: 3px; @@ -102,4 +102,5 @@ transform: translateY(-3px) rotate(-90deg); } -} \ No newline at end of file +} + diff --git a/components/RecentProjects/recentProjects.less b/components/RecentProjects/recentProjects.less index 46377b2f6c..f24abe965d 100644 --- a/components/RecentProjects/recentProjects.less +++ b/components/RecentProjects/recentProjects.less @@ -17,20 +17,29 @@ .mobile-villas-img, .mobile-outskirts-img, .mobile-blocks-img { display: none; } + p { + padding: 9% 28%; + } } .box-title { - width: 30%; - // position: absolute; - top: 80%; - left: 70%; + width: 31%; + position: absolute; + top: 75%; + right: 8.2%; + bottom: 2%; + + h4 { + text-align: center; + font-weight: normal; + font-size: 2.5rem; + letter-spacing: 7.3px; + padding: 35px 0px; + background-color: #D8D8D8; } +} - h4 { - text-align: center; - font-weight: normal; - font-size: 2.5rem; - letter-spacing: 6px; - padding: 35px 0px; - background-color: #D8D8D8; - } +.outskirts { + position: absolute; + left: 8.3%; + } \ No newline at end of file diff --git a/css/index.css b/css/index.css index e5bcd442a6..a9d9f5df8a 100644 --- a/css/index.css +++ b/css/index.css @@ -171,8 +171,8 @@ h4 { } h5 { font-size: 2rem; - line-height: 2.4rem; color: #FFFFFF; + line-height: 2.4rem; font-weight: normal; } p { @@ -233,6 +233,32 @@ img { .CTA .mobile-futuristic-img { display: none; } +footer { + width: 100%; + background-color: #828282; +} +footer h6 { + font-size: 1.9rem; + color: #FFFFFF; +} +footer p { + font-size: 1.2rem; + color: #FFFFFF; + letter-spacing: 0.1rem; + font-weight: normal; +} +footer .footer-content { + padding: 5%; + display: flex; +} +footer .footer-content .footer-address { + width: 100%; + display: flex; + justify-content: space-around; +} +footer .copyright { + text-align: center; +} .jumbotron { width: 100%; position: relative; @@ -329,7 +355,7 @@ img { .menu-container .hamburger::after { content: ''; display: block; - background: #FFFFFf; + background: #FFFFFF; height: 3px; width: 2.5rem; border-radius: 3px; @@ -369,16 +395,25 @@ img { .recent-projects .mobile-blocks-img { display: none; } +.recent-projects p { + padding: 9% 28%; +} .box-title { - width: 30%; - top: 80%; - left: 70%; + width: 31%; + position: absolute; + top: 75%; + right: 8.2%; + bottom: 2%; } -h4 { +.box-title h4 { text-align: center; font-weight: normal; font-size: 2.5rem; - letter-spacing: 6px; + letter-spacing: 7.3px; padding: 35px 0px; background-color: #D8D8D8; } +.outskirts { + position: absolute; + left: 8.3%; +} diff --git a/index.html b/index.html index 06348b0b7b..2a203c7d4b 100644 --- a/index.html +++ b/index.html @@ -84,18 +84,18 @@

Recent Projects

+
+

THE VILLAS

+
-
-

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.

+ cloud solution.
-

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital + +
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.

@@ -103,18 +103,19 @@

THE VILLAS

-
-
-

OUTSKIRTS

+
+

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.

+ cloud solution.
-

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital +
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.

@@ -122,18 +123,18 @@

OUTSKIRTS

+
+

THE BLOCKS

+
-
-

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.

+ cloud solution.
-

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital +
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.

@@ -145,7 +146,7 @@

THE BLOCKS

-
Interested in starting a project?
+
Interested in starting a project?

Let’s talk:

We'll never share your email with anyone else.

@@ -154,26 +155,26 @@
Let’s talk:
New York
- 123 Lane
- Suite 100
- Albany, NY 12345
- 202 555 0144 +

Lane
+ Suite 100
+ Albany, NY 12345
+ 202 555 0144


Florida
- Ocean Drive
- Suite 201
- Orlando, FL 22345
- 502 555 0144
+

Ocean Drive
+ Suite 201
+ Orlando, FL 22345
+ 502 555 0144


California
- Mountain Street
- Suite 105
- San Diego, CA 22345
- 702 555 0144 +

Mountain Street
+ Suite 105
+ San Diego, CA 22345
+ 702 555 0144>

diff --git a/less/global.less b/less/global.less index 5c7609cc7f..3564d778c2 100644 --- a/less/global.less +++ b/less/global.less @@ -36,11 +36,12 @@ h4 { h5 { font-size: 2rem; - line-height: 2.4rem; color: #FFFFFF; + line-height: 2.4rem; font-weight: normal; } + p { font-size: 1.8rem; line-height: 2.4rem; diff --git a/services.html b/services.html index fb5a79e18a..f7f94b5d99 100644 --- a/services.html +++ b/services.html @@ -1,38 +1,196 @@ + + + Services + + +
+ +
+
+

S&J

+ +
+
+
+
+ + +
+ + +
+

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.

+
-

Services

+ - + +
+
+
Pre-Construction
+
Construction
+
Design Build
+
Sustainability
+
+
- +
- Pre-Construction - Construction - Design Build - Sustainability +
+
+

Pre-Construction

+

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.
+ Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+
+ + +
- 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.

Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities. +
+
+

Construction

+

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.
+ Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+
+ + +
+
+
+

Design Build

+

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.
+ Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+
+ + +
+
+
+

Sustainability

+

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.
+ Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+
+ + +
+
---> +
+
+
+
Interested in starting a project?

+
Let’s talk:
+ +

We'll never share your email with anyone else.

+
- +
+
+
New York
+

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 From ec31e4d807c57fa372c5345e267db1fe0d72c702 Mon Sep 17 00:00:00 2001 From: Mariana Date: Fri, 1 Mar 2019 22:34:17 -0800 Subject: [PATCH 08/21] modified styling on multiple files --- components/Footer/footer.less | 16 +- components/Navigation/navigation.less | 28 ++-- css/index.css | 100 +++++++++++-- index.html | 47 +++--- less/services.less | 86 +++++++++++ services.html | 202 +++++++++++++------------- 6 files changed, 328 insertions(+), 151 deletions(-) diff --git a/components/Footer/footer.less b/components/Footer/footer.less index 9a6d82556d..bcbc5ef41e 100644 --- a/components/Footer/footer.less +++ b/components/Footer/footer.less @@ -2,17 +2,27 @@ footer { width: 100%; background-color: #828282; + .footer-email { + width: 45%; + } + h6 { + padding-bottom: 5px; font-size: 1.9rem; color: #FFFFFF; } p { - font-size: 1.2rem; + font-size: 1.5rem; color: #FFFFFF; - letter-spacing: .1rem; font-weight: normal; } + + input { + margin-top: 5px; + + } + .footer-content { padding: 5%; display: flex; @@ -20,7 +30,7 @@ footer { .footer-address { width: 100%; display: flex; - justify-content: space-around; + justify-content: space-evenly; } } diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index 01995cd5a5..a3f636b695 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -9,7 +9,7 @@ content: ''; clear: both; display: block; -} + } .logo { float: left; @@ -18,7 +18,7 @@ z-index: 2; } - .menu .content { + .site-nav { display: block; transition: 0.3s all ease; position: absolute; @@ -30,13 +30,6 @@ opacity: 0.9; } - .menu .site-nav { - display: none; - } - - /* .site-nav--open { - } */ - .site-nav ul { margin: 0; padding: 0; @@ -52,14 +45,18 @@ letter-spacing: 2px; z-index: 1; cursor: pointer; - } - .site-nav .nav-link:first-child { - padding-top: 5%; + .site-nav .nav-link:first-child { + padding-top: 5%; + + &:hover { + color: #504446; + } + } } - &:hover { - color: #504446; + .site-nav { + display: none; } .menu-toggle { @@ -104,3 +101,6 @@ } +.mobile-jumbo-img { + display: none; +} diff --git a/css/index.css b/css/index.css index a9d9f5df8a..6cef0f14ef 100644 --- a/css/index.css +++ b/css/index.css @@ -189,6 +189,77 @@ img { max-width: 100%; height: auto; } +.jumbo-services { + width: 100%; + position: relative; + z-index: -1; +} +.jumbo-services .services-title { + position: absolute; + top: 65.5%; + left: 8.5%; +} +.mobile-jumbo-services { + display: none; +} +.services-content p { + font-size: 1.6rem; + padding: 28% 8% 4.5% 8%; +} +.tabs { + width: 100%; +} +.tabs .tab-titles { + width: 100%; + display: flex; + justify-content: space-between; +} +.tabs .tab { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid black; + width: 189px; + height: 50px; + background-color: #FFFFFF; + font-size: 1.8rem; + margin: auto; + text-align: center; + cursor: pointer; + font-weight: bold; +} +.tabs .tab:hover { + color: #FFFFFF; + background-color: #5D9FB9; +} +.items-container { + width: 100%; + margin: auto; + margin-top: 3%; + margin: 30px 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} +.items-container .item-content { + width: 100%; + padding: 2% 1% 0% 8%; +} +.items-container h3 { + padding-bottom: 22px; +} +.items-container p { + font-size: 1.6rem; + width: 45%; +} +.items-container .item-desktop-img { + padding-top: 5%; + padding-right: 17%; +} +.items-container .item-mobile-img { + display: none; +} .CTA { width: 100%; margin: auto; @@ -237,16 +308,22 @@ footer { width: 100%; background-color: #828282; } +footer .footer-email { + width: 45%; +} footer h6 { + padding-bottom: 5px; font-size: 1.9rem; color: #FFFFFF; } footer p { - font-size: 1.2rem; + font-size: 1.5rem; color: #FFFFFF; - letter-spacing: 0.1rem; font-weight: normal; } +footer input { + margin-top: 5px; +} footer .footer-content { padding: 5%; display: flex; @@ -254,7 +331,7 @@ footer .footer-content { footer .footer-content .footer-address { width: 100%; display: flex; - justify-content: space-around; + justify-content: space-evenly; } footer .copyright { text-align: center; @@ -294,8 +371,6 @@ footer .copyright { height: 50px; width: 99.99%; z-index: 999; - /* .site-nav--open { - } */ } .menu-container .menu-container::after { content: ''; @@ -308,7 +383,7 @@ footer .copyright { margin: 0; z-index: 2; } -.menu-container .menu .content { +.menu-container .site-nav { display: block; transition: 0.3s all ease; position: absolute; @@ -319,9 +394,6 @@ footer .copyright { background: #99A4AE; opacity: 0.9; } -.menu-container .menu .site-nav { - display: none; -} .menu-container .site-nav ul { margin: 0; padding: 0; @@ -337,12 +409,15 @@ footer .copyright { z-index: 1; cursor: pointer; } -.menu-container .site-nav .nav-link:first-child { +.menu-container .content .nav-link .site-nav .nav-link:first-child { padding-top: 5%; } -.menu-container:hover { +.menu-container .content .nav-link .site-nav .nav-link:first-child:hover { color: #504446; } +.menu-container .site-nav { + display: none; +} .menu-container .menu-toggle { padding: 2rem; position: absolute; @@ -376,6 +451,9 @@ footer .copyright { .menu-container .open .hamburger::after { transform: translateY(-3px) rotate(-90deg); } +.mobile-jumbo-img { + display: none; +} .rp-title { width: 100%; padding: 6.5% 0 4.5% 8.5%; diff --git a/index.html b/index.html index 2a203c7d4b..479492abd0 100644 --- a/index.html +++ b/index.html @@ -18,32 +18,33 @@
-
-
-

S&J

- -
-
+
+
+
+

S&J

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

Integrity,
Excellence,
Progress.

+
+ + +
+

Integrity,
Excellence,
Progress.

+
-
- +
@@ -155,7 +156,7 @@
Let’s talk:
New York
-

Lane
+

123 Lane
Suite 100
Albany, NY 12345
202 555 0144


diff --git a/less/services.less b/less/services.less index e69de29bb2..9f2696381b 100644 --- a/less/services.less +++ b/less/services.less @@ -0,0 +1,86 @@ +.jumbo-services { + width: 100%; + position: relative; + z-index: -1; + + .services-title { + position: absolute; + top: 65.5%; + left: 8.5%; + } + +} + +.mobile-jumbo-services { + display: none; + } + +.services-content p{ + font-size: 1.6rem; + padding: 28% 8% 4.5% 8%; +} + +.tabs { + width: 100%; + + .tab-titles { + width: 100%; + display: flex; + justify-content: space-between; + } + + .tab { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid black; + width: 189px; + height: 50px; + background-color: #FFFFFF; + font-size: 1.8rem; + margin: auto; + text-align: center; + cursor: pointer; + font-weight: bold; + + &:hover { + color: #FFFFFF; + background-color: #5D9FB9; + } + } +} + +.items-container { + width: 100%; + margin: auto; + margin-top: 3%; + margin: 30px 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + + .item-content { + width: 100%; + padding: 2% 1% 0% 8%; + } + + h3 { + padding-bottom: 22px; + } + + p { + font-size: 1.6rem; + width: 45%; + + } + + .item-desktop-img { + padding-top: 5%; + padding-right: 17%; + } + + .item-mobile-img { + display: none; + } +} \ No newline at end of file diff --git a/services.html b/services.html index f7f94b5d99..23648d010a 100644 --- a/services.html +++ b/services.html @@ -19,7 +19,7 @@

S&J

-
From 3675c413de816051a434f1aae229598cedf170b6 Mon Sep 17 00:00:00 2001 From: Mariana Date: Sat, 2 Mar 2019 11:26:17 -0800 Subject: [PATCH 09/21] more modifications on styling --- components/CTA/cta.less | 8 ++- components/Footer/footer.less | 45 +++++++++-------- components/Navigation/navigation.less | 23 +++++++++ css/global.css | 50 +++++++++++++++++++ css/index.css | 28 +++++++++++ css/services.css | 71 +++++++++++++++++++++++++++ less/global.less | 2 +- less/index.less | 3 +- 8 files changed, 207 insertions(+), 23 deletions(-) create mode 100644 css/global.css create mode 100644 css/services.css diff --git a/components/CTA/cta.less b/components/CTA/cta.less index 04c047f087..4997eded9c 100644 --- a/components/CTA/cta.less +++ b/components/CTA/cta.less @@ -15,7 +15,7 @@ h3 { padding-bottom: 21px; } - + p { font-size: 1.6rem; padding-bottom: 28px; @@ -49,4 +49,10 @@ display: none; } +} + +@media (max-width: 500px) { + h3 { + font-size: 2.2rem; + } } \ No newline at end of file diff --git a/components/Footer/footer.less b/components/Footer/footer.less index bcbc5ef41e..b4bca77ee8 100644 --- a/components/Footer/footer.less +++ b/components/Footer/footer.less @@ -6,26 +6,25 @@ footer { width: 45%; } - h6 { - padding-bottom: 5px; - font-size: 1.9rem; - color: #FFFFFF; - } + h6 { + padding-bottom: 5px; + font-size: 1.9rem; + color: #FFFFFF; + } - p { - font-size: 1.5rem; - color: #FFFFFF; - font-weight: normal; - } + p { + font-size: 1.5rem; + color: #FFFFFF; + font-weight: normal; + } - input { - margin-top: 5px; - - } + input { + margin-top: 5px; + } - .footer-content { - padding: 5%; - display: flex; + .footer-content { + padding: 5%; + display: flex; .footer-address { width: 100%; @@ -34,10 +33,16 @@ footer { } } - .copyright { - text-align: center; + .copyright { + text-align: center; + } } -} +@media (max-width:500%) { + .footer { + display: flex; + flex-direction: column; + } +} diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index a3f636b695..0129bcb55a 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -101,6 +101,29 @@ } + + .mobile-jumbo-img { display: none; } + +@media ( max-width: 500px) { + .home { + width: 100%; + padding: 1%; + } + + .jumbo-img { + display: none; + } + + .mobile-jumbo-img { + display: block; + width: 100%; + } + .jumbo-title { + font-size: 4rem; + line-height: 1.2em; + } + +} \ No newline at end of file diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000000..d8c307751a --- /dev/null +++ b/css/global.css @@ -0,0 +1,50 @@ +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', Arial, sans-serif; +} +h1 { + font-size: 2.5rem; + font-weight: bold; + color: #FFFFFF; +} +h2 { + font-size: 6.4rem; + font-weight: bold; + line-height: 75px; + color: #FFFFFF; +} +h3 { + font-size: 2.4rem; + font-weight: bold; + color: #222222; +} +h4 { + font-size: 2rem; + font-weight: bold; +} +h5 { + font-size: 2rem; + color: #FFFFFF; + line-height: 2.4rem; + font-weight: normal; +} +p { + font-size: 1.8rem; + line-height: 2.4rem; + font-weight: normal; +} +.container { + max-width: 1025px; + width: 100%; + margin: 0 auto; +} +img { + max-width: 100%; + height: auto; +} diff --git a/css/index.css b/css/index.css index 6cef0f14ef..b60bfc88a5 100644 --- a/css/index.css +++ b/css/index.css @@ -304,6 +304,11 @@ img { .CTA .mobile-futuristic-img { display: none; } +@media (max-width: 500px) { + h3 { + font-size: 2.2rem; + } +} footer { width: 100%; background-color: #828282; @@ -336,6 +341,12 @@ footer .footer-content .footer-address { footer .copyright { text-align: center; } +@media (max-width: 500%) { + .footer { + display: flex; + flex-direction: column; + } +} .jumbotron { width: 100%; position: relative; @@ -454,6 +465,23 @@ footer .copyright { .mobile-jumbo-img { display: none; } +@media (max-width: 500px) { + .home { + width: 100%; + padding: 1%; + } + .jumbo-img { + display: none; + } + .mobile-jumbo-img { + display: block; + width: 100%; + } + .jumbo-title { + font-size: 4rem; + line-height: 1.2em; + } +} .rp-title { width: 100%; padding: 6.5% 0 4.5% 8.5%; diff --git a/css/services.css b/css/services.css new file mode 100644 index 0000000000..11c1dfc069 --- /dev/null +++ b/css/services.css @@ -0,0 +1,71 @@ +.jumbo-services { + width: 100%; + position: relative; + z-index: -1; +} +.jumbo-services .services-title { + position: absolute; + top: 65.5%; + left: 8.5%; +} +.mobile-jumbo-services { + display: none; +} +.services-content p { + font-size: 1.6rem; + padding: 28% 8% 4.5% 8%; +} +.tabs { + width: 100%; +} +.tabs .tab-titles { + width: 100%; + display: flex; + justify-content: space-between; +} +.tabs .tab { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid black; + width: 189px; + height: 50px; + background-color: #FFFFFF; + font-size: 1.8rem; + margin: auto; + text-align: center; + cursor: pointer; + font-weight: bold; +} +.tabs .tab:hover { + color: #FFFFFF; + background-color: #5D9FB9; +} +.items-container { + width: 100%; + margin: auto; + margin-top: 3%; + margin: 30px 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} +.items-container .item-content { + width: 100%; + padding: 2% 1% 0% 8%; +} +.items-container h3 { + padding-bottom: 22px; +} +.items-container p { + font-size: 1.6rem; + width: 45%; +} +.items-container .item-desktop-img { + padding-top: 5%; + padding-right: 17%; +} +.items-container .item-mobile-img { + display: none; +} diff --git a/less/global.less b/less/global.less index 3564d778c2..5b2d04476a 100644 --- a/less/global.less +++ b/less/global.less @@ -57,4 +57,4 @@ p { img { max-width: 100%; height: auto; -} \ No newline at end of file +} diff --git a/less/index.less b/less/index.less index 9dba230573..510311475d 100644 --- a/less/index.less +++ b/less/index.less @@ -70,4 +70,5 @@ table{ @import '../components/Footer/footer.less'; @import '../components/Jumbotron/jumbotron.less'; @import '../components/Navigation/navigation.less'; -@import '../components/RecentProjects/recentProjects.less'; \ No newline at end of file +@import '../components/RecentProjects/recentProjects.less'; + From ab10f36821ae5a2c3f51962b54ea02d205bc02c7 Mon Sep 17 00:00:00 2001 From: Mariana Date: Sun, 3 Mar 2019 23:07:11 -0800 Subject: [PATCH 10/21] modified navigation and services styling, completed services js --- components/Navigation/navigation.less | 80 +++---- css/index.css | 85 +++---- index.html | 4 +- js/tabs.js | 49 ++++ less/services.less | 56 +++-- services.html | 311 +++++++++++++------------- 6 files changed, 324 insertions(+), 261 deletions(-) diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index 0129bcb55a..ae1531e804 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -5,11 +5,11 @@ width: 99.99%; z-index: 999; - .menu-container::after { - content: ''; - clear: both; - display: block; - } + // .menu-container::after { + // content: ''; + // clear: both; + // display: block; + // } .logo { float: left; @@ -59,45 +59,45 @@ display: none; } - .menu-toggle { - padding: 2rem; + .hamburger { + color: #FFFFFF; position: absolute; - top: 4%; - right: 6%; + top: 23%; + right: 8%; cursor: pointer; } - .hamburger, - .hamburger::before, - .hamburger::after { - content: ''; - display: block; - background: #FFFFFF; - height: 3px; - width: 2.5rem; - border-radius: 3px; - transition: all ease-in-out 500ms; - } - - .hamburger::before { - transform: translateY(-7px); - } - - .hamburger::after { - transform: translateY(4px); - } - - .open .hamburger { - transform: rotate(45deg); - } - - .open .hamburger::before { - opacity: 0; - } - - .open .hamburger::after { - transform: translateY(-3px) rotate(-90deg); - } + // .hamburger, + // .hamburger::before, + // .hamburger::after { + // content: ''; + // display: block; + // background: #FFFFFF; + // height: 3px; + // width: 2.5rem; + // border-radius: 3px; + // transition: all ease-in-out 500ms; + // } + + // .hamburger::before { + // transform: translateY(-7px); + // } + + // .hamburger::after { + // transform: translateY(4px); + // } + + // .open .hamburger { + // transform: rotate(45deg); + // } + + // .open .hamburger::before { + // opacity: 0; + // } + + // .open .hamburger::after { + // transform: translateY(-3px) rotate(-90deg); + // } } diff --git a/css/index.css b/css/index.css index b60bfc88a5..d170eb1d5f 100644 --- a/css/index.css +++ b/css/index.css @@ -196,7 +196,7 @@ img { } .jumbo-services .services-title { position: absolute; - top: 65.5%; + top: 63.5%; left: 8.5%; } .mobile-jumbo-services { @@ -204,7 +204,7 @@ img { } .services-content p { font-size: 1.6rem; - padding: 28% 8% 4.5% 8%; + padding: 5% 8% 4.5% 8%; } .tabs { width: 100%; @@ -232,34 +232,52 @@ img { color: #FFFFFF; background-color: #5D9FB9; } +.tabs .selected-tab { + background-color: #5D9FB9; + color: #FFFFFF; +} .items-container { width: 100%; margin: auto; margin-top: 3%; margin: 30px 0; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; } .items-container .item-content { + display: flex; + justify-content: space-around; width: 100%; - padding: 2% 1% 0% 8%; + padding: 2% 3% 2% 4%; } -.items-container h3 { - padding-bottom: 22px; +.items-container .item-title { + padding-top: 22px; + padding-left: 8.3%; +} +.items-container .item { + display: none; +} +.items-container .selected-item { + display: block; } .items-container p { font-size: 1.6rem; - width: 45%; -} -.items-container .item-desktop-img { - padding-top: 5%; - padding-right: 17%; + width: 40%; } .items-container .item-mobile-img { display: none; } +@media (max-width: 500px) { + .services { + width: 100%; + padding: 1%; + } + .services-jumbo-img { + display: none; + } + .mobile-jumbo-services { + display: block; + width: 100%; + } +} .CTA { width: 100%; margin: auto; @@ -383,11 +401,6 @@ footer .copyright { width: 99.99%; z-index: 999; } -.menu-container .menu-container::after { - content: ''; - clear: both; - display: block; -} .menu-container .logo { float: left; padding: 1% 0 0 8.2%; @@ -429,39 +442,13 @@ footer .copyright { .menu-container .site-nav { display: none; } -.menu-container .menu-toggle { - padding: 2rem; +.menu-container .hamburger { + color: #FFFFFF; position: absolute; - top: 4%; - right: 6%; + top: 23%; + right: 8%; cursor: pointer; } -.menu-container .hamburger, -.menu-container .hamburger::before, -.menu-container .hamburger::after { - content: ''; - display: block; - background: #FFFFFF; - height: 3px; - width: 2.5rem; - border-radius: 3px; - transition: all ease-in-out 500ms; -} -.menu-container .hamburger::before { - transform: translateY(-7px); -} -.menu-container .hamburger::after { - transform: translateY(4px); -} -.menu-container .open .hamburger { - transform: rotate(45deg); -} -.menu-container .open .hamburger::before { - opacity: 0; -} -.menu-container .open .hamburger::after { - transform: translateY(-3px) rotate(-90deg); -} .mobile-jumbo-img { display: none; } diff --git a/index.html b/index.html index 479492abd0..f88cd14d20 100644 --- a/index.html +++ b/index.html @@ -22,8 +22,8 @@

S&J

-
-
+
+
- - - - -
-
-

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.

-
- - - - -
-
-
Pre-Construction
-
Construction
-
Design Build
-
Sustainability
+ + + + +
+
+

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.

-
- - -
-
-
-

Pre-Construction

-

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.
-
Phosfluorescently engage worldwide methodologies with web-enabled technology. - Interactively - coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue - scalable - customer - service through sustainable potentialities.

- - + + + + +
+
+
Pre-Construction
+
Construction
+
Design Build
+
Sustainability
-
-
-

Construction

-

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.
-
Phosfluorescently engage worldwide methodologies with web-enabled technology. - Interactively - coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue - scalable - customer - service through sustainable potentialities.

- - + +
+
+

Pre-Construction

+
+

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.
+
Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+ + +
-
-
-
-

Design Build

-

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.
-
Phosfluorescently engage worldwide methodologies with web-enabled technology. - Interactively - coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue - scalable - customer - service through sustainable potentialities.

- - +
+

Construction

+
+

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.
+
Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+ + +
-
-
-
-

Sustainability

-

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.
-
Phosfluorescently engage worldwide methodologies with web-enabled technology. - Interactively - coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue - scalable - customer - service through sustainable potentialities.

- - +
+

Design Build

+
+

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.
+
Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+ + +
-
-
-
-
-
-
-
Interested in starting a project?

-
Let’s talk:
- -

We'll never share your email with anyone else.

-
-
-
-
New York
-

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> -

+
+

Sustainability

+
+

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.
+
Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+ + +
+
+ +
+
+
+
Interested in starting a project?

+
Let’s talk:
+ +

We'll never share your email with anyone else.

+
+ +
+
+
New York
+

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

-
+
+

Copyright © 2018 Smith and Jones

+
- - + + \ No newline at end of file From ce9a2ccf92734c7a8cbe176c3cfcaf0490dba121 Mon Sep 17 00:00:00 2001 From: Mariana Date: Mon, 4 Mar 2019 18:13:49 -0800 Subject: [PATCH 11/21] made modifications to muliple less files --- components/CTA/cta.less | 34 ++++++++- components/Footer/footer.less | 4 + components/Navigation/navigation.less | 18 ++++- components/RecentProjects/recentProjects.less | 13 +++- css/index.css | 75 +++++++++++++++++-- index.html | 5 +- js/index.js | 26 ++++++- less/global.less | 17 +++++ less/services.less | 7 +- services.html | 5 +- 10 files changed, 180 insertions(+), 24 deletions(-) diff --git a/components/CTA/cta.less b/components/CTA/cta.less index 4997eded9c..48c9aafe21 100644 --- a/components/CTA/cta.less +++ b/components/CTA/cta.less @@ -52,7 +52,37 @@ } @media (max-width: 500px) { - h3 { - font-size: 2.2rem; + .home .cta-content { + width: 100%; + padding: 2%; + + button { + width: 100%; + } + + h3 { + font-size: 2.2rem; + }.smith-jones-img, .futuristic-img { + display: none; + } + + .mobile-sj-img { + display: block; + } + + .mobile-futuristic-img { + display: block; + } + + .smith-jones-img, .futuristic-img { + display: none; + } + + .mobile-sj-img,.mobile-futuristic-img { + width: 100%; + display: block; + } + } + } \ No newline at end of file diff --git a/components/Footer/footer.less b/components/Footer/footer.less index b4bca77ee8..3bb7cb604a 100644 --- a/components/Footer/footer.less +++ b/components/Footer/footer.less @@ -19,6 +19,10 @@ footer { } input { + font-size: 1.5rem; + padding: 4%; + width: 95%; + border-radius: 5px; margin-top: 5px; } diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index ae1531e804..abc1eec917 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -36,10 +36,11 @@ list-style: none; } - .content .nav-link{ + .nav-link{ color: #FFFFFF; padding-left: 36.5%; text-decoration: none; + text-align: center; font-size: 4.5rem; line-height: 81px; letter-spacing: 2px; @@ -56,10 +57,10 @@ } .site-nav { - display: none; + // display: none; } - .hamburger { + .hamburger .open { color: #FFFFFF; position: absolute; top: 23%; @@ -67,6 +68,11 @@ cursor: pointer; } + .close { + display: none; + } + + // .hamburger, // .hamburger::before, // .hamburger::after { @@ -126,4 +132,10 @@ line-height: 1.2em; } + .nav-link { + padding-left: 0; + padding-right: 3%; + text-align: center; + } + } \ No newline at end of file diff --git a/components/RecentProjects/recentProjects.less b/components/RecentProjects/recentProjects.less index f24abe965d..561cd82db0 100644 --- a/components/RecentProjects/recentProjects.less +++ b/components/RecentProjects/recentProjects.less @@ -42,4 +42,15 @@ .outskirts { position: absolute; left: 8.3%; - } \ No newline at end of file + } + +@media (max-width: 500px) { + .home { + width: 100%; + padding: 2%; + + h3 { + font-size: 2.2rem; + } + } +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index d170eb1d5f..d7fca6e6dd 100644 --- a/css/index.css +++ b/css/index.css @@ -189,6 +189,20 @@ img { max-width: 100%; height: auto; } +@media (max-width: 500px) { + .footer-content { + display: flex; + flex-wrap: wrap; + } + .footer-email { + width: 100%; + padding-bottom: 3%; + } + .footer-address { + padding-bottom: 3%; + flex-direction: column; + } +} .jumbo-services { width: 100%; position: relative; @@ -323,9 +337,35 @@ img { display: none; } @media (max-width: 500px) { - h3 { + .home .cta-content { + width: 100%; + padding: 2%; + } + .home .cta-content button { + width: 100%; + } + .home .cta-content h3 { font-size: 2.2rem; } + .home .cta-content .smith-jones-img, + .home .cta-content .futuristic-img { + display: none; + } + .home .cta-content .mobile-sj-img { + display: block; + } + .home .cta-content .mobile-futuristic-img { + display: block; + } + .home .cta-content .smith-jones-img, + .home .cta-content .futuristic-img { + display: none; + } + .home .cta-content .mobile-sj-img, + .home .cta-content .mobile-futuristic-img { + width: 100%; + display: block; + } } footer { width: 100%; @@ -345,6 +385,10 @@ footer p { font-weight: normal; } footer input { + font-size: 1.5rem; + padding: 4%; + width: 95%; + border-radius: 5px; margin-top: 5px; } footer .footer-content { @@ -423,32 +467,33 @@ footer .copyright { padding: 0; list-style: none; } -.menu-container .content .nav-link { +.menu-container .nav-link { color: #FFFFFF; padding-left: 36.5%; text-decoration: none; + text-align: center; font-size: 4.5rem; line-height: 81px; letter-spacing: 2px; z-index: 1; cursor: pointer; } -.menu-container .content .nav-link .site-nav .nav-link:first-child { +.menu-container .nav-link .site-nav .nav-link:first-child { padding-top: 5%; } -.menu-container .content .nav-link .site-nav .nav-link:first-child:hover { +.menu-container .nav-link .site-nav .nav-link:first-child:hover { color: #504446; } -.menu-container .site-nav { - display: none; -} -.menu-container .hamburger { +.menu-container .hamburger .open { color: #FFFFFF; position: absolute; top: 23%; right: 8%; cursor: pointer; } +.menu-container .close { + display: none; +} .mobile-jumbo-img { display: none; } @@ -468,6 +513,11 @@ footer .copyright { font-size: 4rem; line-height: 1.2em; } + .nav-link { + padding-left: 0; + padding-right: 3%; + text-align: center; + } } .rp-title { width: 100%; @@ -510,3 +560,12 @@ footer .copyright { position: absolute; left: 8.3%; } +@media (max-width: 500px) { + .home { + width: 100%; + padding: 2%; + } + .home h3 { + font-size: 2.2rem; + } +} diff --git a/index.html b/index.html index f88cd14d20..8e6621c263 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,8 @@

S&J

- + +
diff --git a/js/index.js b/js/index.js index bb3d341cf0..ee86d15dbb 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,25 @@ -// JS goes here \ No newline at end of file +// JS goes here +class Dropdown { + constructor(element) { + this.element = element; + this.button = this.element.querySelector('.hamburger'); + this.closeButton = this.element.querySelector('.close'); + this.content = this.element.querySelector('.site-nav'); + this.closeBtnContent = document.querySelector('.site-nav'); + + this.button.addEventListner('click', (event) => { this.toggleContent(event) }) + this.closeButton.addEventListner('click', (event) => { this.closeContent(event) }) + } + + toggleContent(event) { + this.content.classList.toggle('site-nav'); + } + closeContent(event) { + this.closeBtnContent.classList.toggle('site-nav'); + } +} + + + +let dropdowns = document.querySelectorAll('header'); +dropdowns = Array.from(dropdowns).map(dropdown => dropdown(dropdown)); \ No newline at end of file diff --git a/less/global.less b/less/global.less index 5b2d04476a..cedbe9ab9e 100644 --- a/less/global.less +++ b/less/global.less @@ -58,3 +58,20 @@ img { max-width: 100%; height: auto; } + +@media (max-width: 500px) { + .footer-content { + display: flex; + flex-wrap: wrap; + } + + .footer-email { + width: 100%; + padding-bottom: 3%; + } + + .footer-address { + padding-bottom: 3%; + flex-direction: column; + } +} \ No newline at end of file diff --git a/less/services.less b/less/services.less index 4ad84dd17d..44546254b5 100644 --- a/less/services.less +++ b/less/services.less @@ -60,11 +60,7 @@ margin: auto; margin-top: 3%; margin: 30px 0; - // display: flex; - // flex-direction: row; - // flex-wrap: wrap; - // justify-content: space-between; - + .item-content { display: flex; justify-content: space-around; @@ -109,4 +105,5 @@ display: block; width: 100%; } + } \ No newline at end of file diff --git a/services.html b/services.html index 45497e87de..be111b060c 100644 --- a/services.html +++ b/services.html @@ -21,7 +21,8 @@

S&J

- + +
From e50d288daf31f13b9383490f7b267452950261f3 Mon Sep 17 00:00:00 2001 From: Mariana Date: Mon, 4 Mar 2019 19:30:16 -0800 Subject: [PATCH 12/21] added media queries to recent projects, navigation and services less files --- components/Navigation/navigation.less | 4 +-- components/RecentProjects/recentProjects.less | 27 +++++++++++++-- css/index.css | 34 +++++++++++++++++-- js/index.js | 2 +- less/services.less | 2 ++ 5 files changed, 61 insertions(+), 8 deletions(-) diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index abc1eec917..7ee6bc1318 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -57,7 +57,7 @@ } .site-nav { - // display: none; + display: none; } .hamburger .open { @@ -135,7 +135,7 @@ .nav-link { padding-left: 0; padding-right: 3%; - text-align: center; + text-align: right; } } \ No newline at end of file diff --git a/components/RecentProjects/recentProjects.less b/components/RecentProjects/recentProjects.less index 561cd82db0..9680b75c6f 100644 --- a/components/RecentProjects/recentProjects.less +++ b/components/RecentProjects/recentProjects.less @@ -45,12 +45,35 @@ } @media (max-width: 500px) { - .home { + .home .recent-projects { width: 100%; padding: 2%; - h3 { + .rp-title { font-size: 2.2rem; + text-align: left; + padding: 6.5% 0 4.5% 1.5%; + } + + p { + width: 100%; + margin-top: 6%; + padding: 10% 2%; + } + + .villas-img, .outskirts-img, .blocks-img { + display: none; + } + + .mobile-villas-img, .mobile-outskirts-img, .mobile-blocks-img { + display: block; + width: 100%; + } + + .box-title { + width: 100%; + padding: 2%; + left: .3%; } } } \ No newline at end of file diff --git a/css/index.css b/css/index.css index d7fca6e6dd..a28f9daea5 100644 --- a/css/index.css +++ b/css/index.css @@ -222,6 +222,8 @@ img { } .tabs { width: 100%; + padding-left: 6%; + padding-right: 5%; } .tabs .tab-titles { width: 100%; @@ -484,6 +486,9 @@ footer .copyright { .menu-container .nav-link .site-nav .nav-link:first-child:hover { color: #504446; } +.menu-container .site-nav { + display: none; +} .menu-container .hamburger .open { color: #FFFFFF; position: absolute; @@ -516,7 +521,7 @@ footer .copyright { .nav-link { padding-left: 0; padding-right: 3%; - text-align: center; + text-align: right; } } .rp-title { @@ -561,11 +566,34 @@ footer .copyright { left: 8.3%; } @media (max-width: 500px) { - .home { + .home .recent-projects { width: 100%; padding: 2%; } - .home h3 { + .home .recent-projects .rp-title { font-size: 2.2rem; + text-align: left; + padding: 6.5% 0 4.5% 1.5%; + } + .home .recent-projects p { + width: 100%; + margin-top: 6%; + padding: 10% 2%; + } + .home .recent-projects .villas-img, + .home .recent-projects .outskirts-img, + .home .recent-projects .blocks-img { + display: none; + } + .home .recent-projects .mobile-villas-img, + .home .recent-projects .mobile-outskirts-img, + .home .recent-projects .mobile-blocks-img { + display: block; + width: 100%; + } + .home .recent-projects .box-title { + width: 100%; + padding: 2%; + left: 0.3%; } } diff --git a/js/index.js b/js/index.js index ee86d15dbb..428648dfb1 100644 --- a/js/index.js +++ b/js/index.js @@ -2,7 +2,7 @@ class Dropdown { constructor(element) { this.element = element; - this.button = this.element.querySelector('.hamburger'); + this.button = this.element.querySelector('.open'); this.closeButton = this.element.querySelector('.close'); this.content = this.element.querySelector('.site-nav'); this.closeBtnContent = document.querySelector('.site-nav'); diff --git a/less/services.less b/less/services.less index 44546254b5..8b0903fcbd 100644 --- a/less/services.less +++ b/less/services.less @@ -22,6 +22,8 @@ .tabs { width: 100%; + padding-left: 6%; + padding-right: 5%; .tab-titles { width: 100%; From 33afdacc44dffb993292cc9b56c350e0cc1dd0ba Mon Sep 17 00:00:00 2001 From: Mariana Date: Mon, 4 Mar 2019 20:45:25 -0800 Subject: [PATCH 13/21] added media queries to footer, CTA less --- components/CTA/cta.less | 35 +++++---------- components/Footer/footer.less | 45 ++++++++++++++++--- css/index.css | 81 ++++++++++++++++++----------------- index.html | 4 +- less/global.less | 17 -------- 5 files changed, 92 insertions(+), 90 deletions(-) diff --git a/components/CTA/cta.less b/components/CTA/cta.less index 48c9aafe21..468ecf1f23 100644 --- a/components/CTA/cta.less +++ b/components/CTA/cta.less @@ -1,6 +1,5 @@ .CTA { width: 100%; - margin: auto; margin-top: 3%; margin: 30px 0; display: flex; @@ -40,9 +39,7 @@ } .futuristic { - padding-top: 10%; - padding-right: 0%; - padding-left: 1%; + padding: 10% 0 2% 1%; } .mobile-sj-img, .mobile-futuristic-img { @@ -52,6 +49,15 @@ } @media (max-width: 500px) { + .CTA { + flex-wrap: wrap-reverse; + padding: 2%; + + .smith-jones-img, .futuristic-img { + width: 100%; + padding: 2%; + } + } .home .cta-content { width: 100%; padding: 2%; @@ -62,27 +68,6 @@ h3 { font-size: 2.2rem; - }.smith-jones-img, .futuristic-img { - display: none; - } - - .mobile-sj-img { - display: block; } - - .mobile-futuristic-img { - display: block; - } - - .smith-jones-img, .futuristic-img { - display: none; - } - - .mobile-sj-img,.mobile-futuristic-img { - width: 100%; - display: block; - } - } - } \ No newline at end of file diff --git a/components/Footer/footer.less b/components/Footer/footer.less index 3bb7cb604a..00db5beb5c 100644 --- a/components/Footer/footer.less +++ b/components/Footer/footer.less @@ -16,12 +16,13 @@ footer { font-size: 1.5rem; color: #FFFFFF; font-weight: normal; + padding-top: 3%; } input { font-size: 1.5rem; padding: 4%; - width: 95%; + width: 100%; border-radius: 5px; margin-top: 5px; } @@ -42,11 +43,43 @@ footer { } } -@media (max-width:500%) { +@media (max-width: 500px) { + footer { + width: 100%; - .footer { - display: flex; - flex-direction: column; - } + .footer-content { + display: flex; + flex-direction: column; + } + + .footer-email { + width: 100%; + padding-bottom: 3%; + } + + .footer-address { + padding-top: 3%; + padding-bottom: 5%; + display: flex; + flex-direction: column; + } + + h5 { + font-size: 2.3rem; + font-weight: 400; + padding-bottom: 3%; + } + + h6 { + font-weight: 400; + font-size: 2.3rem; + } + + p { + padding-top: 2%; + padding-bottom: 5%; + font-weight: normal; + } + } } diff --git a/css/index.css b/css/index.css index a28f9daea5..6b0f3447dc 100644 --- a/css/index.css +++ b/css/index.css @@ -189,20 +189,6 @@ img { max-width: 100%; height: auto; } -@media (max-width: 500px) { - .footer-content { - display: flex; - flex-wrap: wrap; - } - .footer-email { - width: 100%; - padding-bottom: 3%; - } - .footer-address { - padding-bottom: 3%; - flex-direction: column; - } -} .jumbo-services { width: 100%; position: relative; @@ -296,7 +282,6 @@ img { } .CTA { width: 100%; - margin: auto; margin-top: 3%; margin: 30px 0; display: flex; @@ -330,15 +315,22 @@ img { padding-left: 17%; } .CTA .futuristic { - padding-top: 10%; - padding-right: 0%; - padding-left: 1%; + padding: 10% 0 2% 1%; } .CTA .mobile-sj-img, .CTA .mobile-futuristic-img { display: none; } @media (max-width: 500px) { + .CTA { + flex-wrap: wrap-reverse; + padding: 2%; + } + .CTA .smith-jones-img, + .CTA .futuristic-img { + width: 100%; + padding: 2%; + } .home .cta-content { width: 100%; padding: 2%; @@ -349,25 +341,6 @@ img { .home .cta-content h3 { font-size: 2.2rem; } - .home .cta-content .smith-jones-img, - .home .cta-content .futuristic-img { - display: none; - } - .home .cta-content .mobile-sj-img { - display: block; - } - .home .cta-content .mobile-futuristic-img { - display: block; - } - .home .cta-content .smith-jones-img, - .home .cta-content .futuristic-img { - display: none; - } - .home .cta-content .mobile-sj-img, - .home .cta-content .mobile-futuristic-img { - width: 100%; - display: block; - } } footer { width: 100%; @@ -385,11 +358,12 @@ footer p { font-size: 1.5rem; color: #FFFFFF; font-weight: normal; + padding-top: 3%; } footer input { font-size: 1.5rem; padding: 4%; - width: 95%; + width: 100%; border-radius: 5px; margin-top: 5px; } @@ -405,11 +379,38 @@ footer .footer-content .footer-address { footer .copyright { text-align: center; } -@media (max-width: 500%) { - .footer { +@media (max-width: 500px) { + footer { + width: 100%; + } + footer .footer-content { display: flex; flex-direction: column; } + footer .footer-email { + width: 100%; + padding-bottom: 3%; + } + footer .footer-address { + padding-top: 3%; + padding-bottom: 5%; + display: flex; + flex-direction: column; + } + footer h5 { + font-size: 2.3rem; + font-weight: 400; + padding-bottom: 3%; + } + footer h6 { + font-weight: 400; + font-size: 2.3rem; + } + footer p { + padding-top: 2%; + padding-bottom: 5%; + font-weight: normal; + } } .jumbotron { width: 100%; diff --git a/index.html b/index.html index 8e6621c263..52c83456db 100644 --- a/index.html +++ b/index.html @@ -148,8 +148,8 @@

THE BLOCKS

-
Interested in starting a project?

-
Let’s talk:
+
Interested in starting a project?
+ Let’s talk:

We'll never share your email with anyone else.

diff --git a/less/global.less b/less/global.less index cedbe9ab9e..5b2d04476a 100644 --- a/less/global.less +++ b/less/global.less @@ -58,20 +58,3 @@ img { max-width: 100%; height: auto; } - -@media (max-width: 500px) { - .footer-content { - display: flex; - flex-wrap: wrap; - } - - .footer-email { - width: 100%; - padding-bottom: 3%; - } - - .footer-address { - padding-bottom: 3%; - flex-direction: column; - } -} \ No newline at end of file From b73c2c5e15ad825262de2e850042e8e6c01dc643 Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 5 Mar 2019 22:37:52 -0800 Subject: [PATCH 14/21] modified navigation and recent project less, added js to navigation --- components/CTA/cta.less | 1 + components/Footer/footer.less | 7 +- components/Navigation/navigation.less | 141 +++----- components/RecentProjects/recentProjects.less | 7 +- css/index.css | 84 ++--- index.html | 20 +- js/index.js | 18 +- less/global.less | 1 + services.html | 300 +++++++++--------- 9 files changed, 278 insertions(+), 301 deletions(-) diff --git a/components/CTA/cta.less b/components/CTA/cta.less index 468ecf1f23..1fdc03332f 100644 --- a/components/CTA/cta.less +++ b/components/CTA/cta.less @@ -58,6 +58,7 @@ padding: 2%; } } + .home .cta-content { width: 100%; padding: 2%; diff --git a/components/Footer/footer.less b/components/Footer/footer.less index 00db5beb5c..2e9fe53f80 100644 --- a/components/Footer/footer.less +++ b/components/Footer/footer.less @@ -10,13 +10,13 @@ footer { padding-bottom: 5px; font-size: 1.9rem; color: #FFFFFF; + margin-bottom: 2%; } p { - font-size: 1.5rem; + font-size: 1.3rem; color: #FFFFFF; font-weight: normal; - padding-top: 3%; } input { @@ -39,7 +39,8 @@ footer { } .copyright { - text-align: center; + font-size: 1.3rem; + text-align: center; } } diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index 7ee6bc1318..580cfbaa20 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -1,114 +1,73 @@ .menu-container { background-color: #99A4AF; - position: relative; - height: 50px; - width: 99.99%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2% 7.75%; + width: 100%; z-index: 999; - // .menu-container::after { - // content: ''; - // clear: both; - // display: block; - // } - - .logo { - float: left; - padding: 1% 0 0 8.2%; - margin: 0; - z-index: 2; + .hamburger { + cursor: pointer; } .site-nav { - display: block; - transition: 0.3s all ease; - position: absolute; - top: 100%; - padding: 17.4%; - right: 0; - left: 0; + position: fixed; + width: 71%; + height: 100%; + top: 1px; + left: 14.5%; background: #99A4AE; opacity: 0.9; - } - - .site-nav ul { - margin: 0; - padding: 0; - list-style: none; - } - - .nav-link{ - color: #FFFFFF; - padding-left: 36.5%; - text-decoration: none; - text-align: center; - font-size: 4.5rem; - line-height: 81px; - letter-spacing: 2px; - z-index: 1; - cursor: pointer; + // visibility: hidden; + transition: all 0.5s ease; + z-index: 2; + + .expanded-menu { + background-color: #99A4AF; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2% 7.75%; + width: 100%; + z-index: 999; + + .close { + cursor: pointer; + } + } - .site-nav .nav-link:first-child { - padding-top: 5%; + .nav-links { + padding-top: 15%; + } - &:hover { + .nav-link { + color: #FFFFFF; + padding-left: 40.5%; + text-decoration: none; + list-style: none; + text-align: center; + font-size: 4.5rem; + line-height: 81px; + letter-spacing: 2px; + z-index: 1; + cursor: pointer; + + &:hover { color: #504446; } } } - + .site-nav { display: none; } - .hamburger .open { - color: #FFFFFF; - position: absolute; - top: 23%; - right: 8%; - cursor: pointer; - } - - .close { - display: none; + .toggle-on { + display: block; } - - - // .hamburger, - // .hamburger::before, - // .hamburger::after { - // content: ''; - // display: block; - // background: #FFFFFF; - // height: 3px; - // width: 2.5rem; - // border-radius: 3px; - // transition: all ease-in-out 500ms; - // } - - // .hamburger::before { - // transform: translateY(-7px); - // } - - // .hamburger::after { - // transform: translateY(4px); - // } - - // .open .hamburger { - // transform: rotate(45deg); - // } - - // .open .hamburger::before { - // opacity: 0; - // } - - // .open .hamburger::after { - // transform: translateY(-3px) rotate(-90deg); - // } - } - - .mobile-jumbo-img { display: none; } @@ -117,6 +76,10 @@ .home { width: 100%; padding: 1%; + + .logo { + padding: 1.2% 7.75%; + } } .jumbo-img { diff --git a/components/RecentProjects/recentProjects.less b/components/RecentProjects/recentProjects.less index 9680b75c6f..24bc5e884c 100644 --- a/components/RecentProjects/recentProjects.less +++ b/components/RecentProjects/recentProjects.less @@ -26,7 +26,7 @@ width: 31%; position: absolute; top: 75%; - right: 8.2%; + right: 8.1%; bottom: 2%; h4 { @@ -41,7 +41,7 @@ .outskirts { position: absolute; - left: 8.3%; + left: 8.1%; } @media (max-width: 500px) { @@ -56,6 +56,7 @@ } p { + font-size: 1.6rem; width: 100%; margin-top: 6%; padding: 10% 2%; @@ -73,7 +74,7 @@ .box-title { width: 100%; padding: 2%; - left: .3%; + left: .1%; } } } \ No newline at end of file diff --git a/css/index.css b/css/index.css index 6b0f3447dc..25bf56af56 100644 --- a/css/index.css +++ b/css/index.css @@ -181,6 +181,7 @@ p { font-weight: normal; } .container { + border: 2px solid white; max-width: 1025px; width: 100%; margin: 0 auto; @@ -353,12 +354,12 @@ footer h6 { padding-bottom: 5px; font-size: 1.9rem; color: #FFFFFF; + margin-bottom: 2%; } footer p { - font-size: 1.5rem; + font-size: 1.3rem; color: #FFFFFF; font-weight: normal; - padding-top: 3%; } footer input { font-size: 1.5rem; @@ -377,6 +378,7 @@ footer .footer-content .footer-address { justify-content: space-evenly; } footer .copyright { + font-size: 1.3rem; text-align: center; } @media (max-width: 500px) { @@ -443,37 +445,47 @@ footer .copyright { } .menu-container { background-color: #99A4AF; - position: relative; - height: 50px; - width: 99.99%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2% 7.75%; + width: 100%; z-index: 999; } -.menu-container .logo { - float: left; - padding: 1% 0 0 8.2%; - margin: 0; - z-index: 2; +.menu-container .hamburger { + cursor: pointer; } .menu-container .site-nav { - display: block; - transition: 0.3s all ease; - position: absolute; - top: 100%; - padding: 17.4%; - right: 0; - left: 0; + position: fixed; + width: 71%; + height: 100%; + top: 1px; + left: 14.5%; background: #99A4AE; opacity: 0.9; + transition: all 0.5s ease; + z-index: 2; } -.menu-container .site-nav ul { - margin: 0; - padding: 0; - list-style: none; +.menu-container .site-nav .expanded-menu { + background-color: #99A4AF; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2% 7.75%; + width: 100%; + z-index: 999; } -.menu-container .nav-link { +.menu-container .site-nav .expanded-menu .close { + cursor: pointer; +} +.menu-container .site-nav .nav-links { + padding-top: 15%; +} +.menu-container .site-nav .nav-link { color: #FFFFFF; - padding-left: 36.5%; + padding-left: 40.5%; text-decoration: none; + list-style: none; text-align: center; font-size: 4.5rem; line-height: 81px; @@ -481,24 +493,14 @@ footer .copyright { z-index: 1; cursor: pointer; } -.menu-container .nav-link .site-nav .nav-link:first-child { - padding-top: 5%; -} -.menu-container .nav-link .site-nav .nav-link:first-child:hover { +.menu-container .site-nav .nav-link:hover { color: #504446; } .menu-container .site-nav { display: none; } -.menu-container .hamburger .open { - color: #FFFFFF; - position: absolute; - top: 23%; - right: 8%; - cursor: pointer; -} -.menu-container .close { - display: none; +.menu-container .toggle-on { + display: block; } .mobile-jumbo-img { display: none; @@ -508,6 +510,9 @@ footer .copyright { width: 100%; padding: 1%; } + .home .logo { + padding: 1.2% 7.75%; + } .jumbo-img { display: none; } @@ -551,7 +556,7 @@ footer .copyright { width: 31%; position: absolute; top: 75%; - right: 8.2%; + right: 8.1%; bottom: 2%; } .box-title h4 { @@ -564,7 +569,7 @@ footer .copyright { } .outskirts { position: absolute; - left: 8.3%; + left: 8.1%; } @media (max-width: 500px) { .home .recent-projects { @@ -577,6 +582,7 @@ footer .copyright { padding: 6.5% 0 4.5% 1.5%; } .home .recent-projects p { + font-size: 1.6rem; width: 100%; margin-top: 6%; padding: 10% 2%; @@ -595,6 +601,6 @@ footer .copyright { .home .recent-projects .box-title { width: 100%; padding: 2%; - left: 0.3%; + left: 0.1%; } } diff --git a/index.html b/index.html index 52c83456db..fc4158bd5c 100644 --- a/index.html +++ b/index.html @@ -20,13 +20,14 @@
-
-

S&J

-
- +

S&J

+ +
+
+

S&J

-
-
+
- - + +
diff --git a/js/index.js b/js/index.js index 428648dfb1..a2b0f71e05 100644 --- a/js/index.js +++ b/js/index.js @@ -1,10 +1,10 @@ // JS goes here class Dropdown { - constructor(element) { - this.element = element; - this.button = this.element.querySelector('.open'); - this.closeButton = this.element.querySelector('.close'); - this.content = this.element.querySelector('.site-nav'); + constructor(dropdown) { + this.dropdown = dropdown; + this.button = dropdown.querySelector('.hamburger'); + this.closeButton = dropdown.querySelector('.close'); + this.content = dropdown.querySelector('.site-nav'); this.closeBtnContent = document.querySelector('.site-nav'); this.button.addEventListner('click', (event) => { this.toggleContent(event) }) @@ -12,14 +12,14 @@ class Dropdown { } toggleContent(event) { - this.content.classList.toggle('site-nav'); + this.content.classList.toggle('toggle-on'); } closeContent(event) { - this.closeBtnContent.classList.toggle('site-nav'); + this.closeBtnContent.classList.toggle('close'); } } -let dropdowns = document.querySelectorAll('header'); -dropdowns = Array.from(dropdowns).map(dropdown => dropdown(dropdown)); \ No newline at end of file +let dropdowns = document.querySelectorAll('.menucontainer'); +dropdowns.forEach(dropdown => new Dropdown(dropdown)); \ No newline at end of file diff --git a/less/global.less b/less/global.less index 5b2d04476a..ae683b036e 100644 --- a/less/global.less +++ b/less/global.less @@ -49,6 +49,7 @@ p { } .container { + border: 2px solid white; max-width: 1025px; width: 100%; margin: 0 auto; diff --git a/services.html b/services.html index be111b060c..d88ccfc6b2 100644 --- a/services.html +++ b/services.html @@ -18,13 +18,14 @@
-
-

S&J

-
- +

S&J

+ +
+
+

S&J

-
-
+
-
+

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.

+
+
+ + + +
+
+

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.

+
+ + + + +
+
+
Pre-Construction
+
Construction
+
Design Build
+
Sustainability
- - - - -
-
-
Pre-Construction
-
Construction
-
Design Build
-
Sustainability
+
+ + +
+
+

Pre-Construction

+
+

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.
+
Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+ +
- -
-
-

Pre-Construction

-
-

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.
-
Phosfluorescently engage worldwide methodologies with web-enabled technology. - Interactively - coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue - scalable - customer - service through sustainable potentialities.

- - -
-
- -
-

Construction

-
-

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.
-
Phosfluorescently engage worldwide methodologies with web-enabled technology. - Interactively - coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue - scalable - customer - service through sustainable potentialities.

- - -
-
- -
-

Design Build

-
-

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.
-
Phosfluorescently engage worldwide methodologies with web-enabled technology. - Interactively - coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue - scalable - customer - service through sustainable potentialities.

- - -
+
+

Construction

+
+

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.
+
Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+ +
+
-
-

Sustainability

-
-

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.
-
Phosfluorescently engage worldwide methodologies with web-enabled technology. - Interactively - coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue - scalable - customer - service through sustainable potentialities.

- - -
+
+

Design Build

+
+

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.
+
Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+ +
-
-
-
-
-
Interested in starting a project?

-
Let’s talk:
- -

We'll never share your email with anyone else.

-
-
-
-
New York
-

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 -

+
+

Sustainability

+
+

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.
+
Phosfluorescently engage worldwide methodologies with web-enabled technology. + Interactively + coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue + scalable + customer + service through sustainable potentialities.

+ +
+
+
+ +
+
+
+
Interested in starting a project?
+ Let’s talk:
+
+
+

We'll never share your email with anyone else.

+
+
+
+
New York
+

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

-
- - +
+

Copyright © 2018 Smith and Jones

+
+ + + \ No newline at end of file From bf09dc3f3706e0f38cb9bd102445b101be800338 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 6 Mar 2019 00:32:32 -0800 Subject: [PATCH 15/21] added changes to js navigation --- components/Navigation/navigation.less | 33 +++++++++-------------- css/index.css | 32 ++++++++++------------ index.html | 39 ++++++++++++++------------- js/index.js | 12 ++++----- less/global.less | 3 ++- services.html | 34 ++++++++++++----------- 6 files changed, 74 insertions(+), 79 deletions(-) diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index 580cfbaa20..683a17b1a6 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -13,22 +13,28 @@ .site-nav { position: fixed; - width: 71%; + width: 100%; height: 100%; top: 1px; - left: 14.5%; + left: 0; background: #99A4AE; opacity: 0.9; - // visibility: hidden; + visibility: hidden; transition: all 0.5s ease; z-index: 2; + .toggle-on { + visibility: visible; + opacity: 0.9; + z-index: 3; + } + .expanded-menu { background-color: #99A4AF; display: flex; justify-content: space-between; align-items: center; - padding: 1.2% 7.75%; + padding: 1% 20.3%; width: 100%; z-index: 999; @@ -43,7 +49,7 @@ .nav-link { color: #FFFFFF; - padding-left: 40.5%; + padding-left: 43.5%; text-decoration: none; list-style: none; text-align: center; @@ -58,14 +64,6 @@ } } } - - .site-nav { - display: none; - } - - .toggle-on { - display: block; - } } .mobile-jumbo-img { @@ -73,7 +71,7 @@ } @media ( max-width: 500px) { - .home { + .container { width: 100%; padding: 1%; @@ -94,11 +92,4 @@ font-size: 4rem; line-height: 1.2em; } - - .nav-link { - padding-left: 0; - padding-right: 3%; - text-align: right; - } - } \ No newline at end of file diff --git a/css/index.css b/css/index.css index 25bf56af56..a3b6eea0b5 100644 --- a/css/index.css +++ b/css/index.css @@ -181,7 +181,8 @@ p { font-weight: normal; } .container { - border: 2px solid white; + border-left: 1px solid white; + border-right: 1px solid white; max-width: 1025px; width: 100%; margin: 0 auto; @@ -457,21 +458,27 @@ footer .copyright { } .menu-container .site-nav { position: fixed; - width: 71%; + width: 100%; height: 100%; top: 1px; - left: 14.5%; + left: 0; background: #99A4AE; opacity: 0.9; + visibility: hidden; transition: all 0.5s ease; z-index: 2; } +.menu-container .site-nav .toggle-on { + visibility: visible; + opacity: 0.9; + z-index: 3; +} .menu-container .site-nav .expanded-menu { background-color: #99A4AF; display: flex; justify-content: space-between; align-items: center; - padding: 1.2% 7.75%; + padding: 1% 20.3%; width: 100%; z-index: 999; } @@ -483,7 +490,7 @@ footer .copyright { } .menu-container .site-nav .nav-link { color: #FFFFFF; - padding-left: 40.5%; + padding-left: 43.5%; text-decoration: none; list-style: none; text-align: center; @@ -496,21 +503,15 @@ footer .copyright { .menu-container .site-nav .nav-link:hover { color: #504446; } -.menu-container .site-nav { - display: none; -} -.menu-container .toggle-on { - display: block; -} .mobile-jumbo-img { display: none; } @media (max-width: 500px) { - .home { + .container { width: 100%; padding: 1%; } - .home .logo { + .container .logo { padding: 1.2% 7.75%; } .jumbo-img { @@ -524,11 +525,6 @@ footer .copyright { font-size: 4rem; line-height: 1.2em; } - .nav-link { - padding-left: 0; - padding-right: 3%; - text-align: right; - } } .rp-title { width: 100%; diff --git a/index.html b/index.html index fc4158bd5c..26b267bc39 100644 --- a/index.html +++ b/index.html @@ -19,24 +19,27 @@
-
-

S&J

- -
-
-

S&J

- -
- +
+
+

S&J

+ +
+
+
+

S&J

+ +
+
+ +
-
@@ -186,8 +189,8 @@
California

Copyright © 2018 Smith and Jones

- - + + diff --git a/js/index.js b/js/index.js index a2b0f71e05..e09c10a5b1 100644 --- a/js/index.js +++ b/js/index.js @@ -2,9 +2,9 @@ class Dropdown { constructor(dropdown) { this.dropdown = dropdown; - this.button = dropdown.querySelector('.hamburger'); - this.closeButton = dropdown.querySelector('.close'); - this.content = dropdown.querySelector('.site-nav'); + this.button = this.dropdown.querySelector('.hamburger'); + this.closeButton = this.dropdown.querySelector('.close'); + this.content = this.dropdown.querySelector('.site-nav'); this.closeBtnContent = document.querySelector('.site-nav'); this.button.addEventListner('click', (event) => { this.toggleContent(event) }) @@ -15,11 +15,11 @@ class Dropdown { this.content.classList.toggle('toggle-on'); } closeContent(event) { - this.closeBtnContent.classList.toggle('close'); + this.closeBtnContent.classList.toggle('toggle-on'); } } -let dropdowns = document.querySelectorAll('.menucontainer'); -dropdowns.forEach(dropdown => new Dropdown(dropdown)); \ No newline at end of file +let dropdowns = document.querySelectorAll('header'); +dropdowns.Array.from(dropdowns).map(dropdown => new Dropdown(dropdown)); \ No newline at end of file diff --git a/less/global.less b/less/global.less index ae683b036e..5a22e89ded 100644 --- a/less/global.less +++ b/less/global.less @@ -49,7 +49,8 @@ p { } .container { - border: 2px solid white; + border-left: 1px solid white; + border-right: 1px solid white; max-width: 1025px; width: 100%; margin: 0 auto; diff --git a/services.html b/services.html index d88ccfc6b2..5da31c74ae 100644 --- a/services.html +++ b/services.html @@ -17,21 +17,25 @@
-
-

S&J

- -
-
-

S&J

- -
- +
+
+

S&J

+ +
+
+
+

S&J

+ +
+
+ +
From dab0ac07e4ef02ad8b96f75e52ebc5d51f379ba3 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 6 Mar 2019 19:02:05 -0800 Subject: [PATCH 16/21] added js to navigation --- components/Navigation/navigation.less | 21 +++++++---- css/index.css | 26 +++++++------- index.html | 18 +++++----- js/index.js | 50 ++++++++++++++++++++------- services.html | 16 ++++----- 5 files changed, 81 insertions(+), 50 deletions(-) diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index 683a17b1a6..c600ed8bfb 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -1,4 +1,4 @@ -.menu-container { +.menucontainer { background-color: #99A4AF; display: flex; justify-content: space-between; @@ -23,11 +23,7 @@ transition: all 0.5s ease; z-index: 2; - .toggle-on { - visibility: visible; - opacity: 0.9; - z-index: 3; - } + .expanded-menu { background-color: #99A4AF; @@ -36,7 +32,7 @@ align-items: center; padding: 1% 20.3%; width: 100%; - z-index: 999; + // z-index: 999; .close { cursor: pointer; @@ -64,6 +60,17 @@ } } } + + // .site-nav { + // display: none; + // } + + .toggle-on { + // display: block; + visibility: visible; + opacity: 0.9; + // z-index: 3; + } } .mobile-jumbo-img { diff --git a/css/index.css b/css/index.css index a3b6eea0b5..650062d822 100644 --- a/css/index.css +++ b/css/index.css @@ -444,7 +444,7 @@ footer .copyright { .jumbotron .mobile-jumbo { display: none; } -.menu-container { +.menucontainer { background-color: #99A4AF; display: flex; justify-content: space-between; @@ -453,10 +453,10 @@ footer .copyright { width: 100%; z-index: 999; } -.menu-container .hamburger { +.menucontainer .hamburger { cursor: pointer; } -.menu-container .site-nav { +.menucontainer .site-nav { position: fixed; width: 100%; height: 100%; @@ -468,27 +468,21 @@ footer .copyright { transition: all 0.5s ease; z-index: 2; } -.menu-container .site-nav .toggle-on { - visibility: visible; - opacity: 0.9; - z-index: 3; -} -.menu-container .site-nav .expanded-menu { +.menucontainer .site-nav .expanded-menu { background-color: #99A4AF; display: flex; justify-content: space-between; align-items: center; padding: 1% 20.3%; width: 100%; - z-index: 999; } -.menu-container .site-nav .expanded-menu .close { +.menucontainer .site-nav .expanded-menu .close { cursor: pointer; } -.menu-container .site-nav .nav-links { +.menucontainer .site-nav .nav-links { padding-top: 15%; } -.menu-container .site-nav .nav-link { +.menucontainer .site-nav .nav-link { color: #FFFFFF; padding-left: 43.5%; text-decoration: none; @@ -500,9 +494,13 @@ footer .copyright { z-index: 1; cursor: pointer; } -.menu-container .site-nav .nav-link:hover { +.menucontainer .site-nav .nav-link:hover { color: #504446; } +.menucontainer .toggle-on { + visibility: visible; + opacity: 0.9; +} .mobile-jumbo-img { display: none; } diff --git a/index.html b/index.html index 26b267bc39..9876d990eb 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@
-
+

S&J

@@ -40,16 +40,16 @@

S&J

- +
+ -
- - -
-

Integrity,
Excellence,
Progress.

-
+
+ + +
+

Integrity,
Excellence,
Progress.

-
+
diff --git a/js/index.js b/js/index.js index e09c10a5b1..737f21ef30 100644 --- a/js/index.js +++ b/js/index.js @@ -1,25 +1,51 @@ // JS goes here +// class Dropdown { +// constructor(dropdown) { +// this.dropdown = dropdown; +// this.button = this.dropdown.querySelector('.hamburger'); +// this.closeButton = this.dropdown.querySelector('.close'); +// this.content = this.dropdown.querySelector('.site-nav'); +// this.closeBtnContent = document.querySelector('.close'); + +// this.button.addEventListner('click', (event) => { this.toggleContent(event) }) +// this.closeButton.addEventListner('click', (event) => { this.closeContent(event) }) +// } + +// toggleContent(event) { +// this.content.classList.toggle('toggle-on'); +// } +// closeContent(event) { +// this.closeBtnContent.classList.toggle('toggle-on'); +// } +// } + + + +// let dropdowns = document.querySelectorAll('.menucontainer'); +// dropdowns.Array.from(dropdowns).map(dropdown => new Dropdown(dropdown)); + class Dropdown { constructor(dropdown) { - this.dropdown = dropdown; - this.button = this.dropdown.querySelector('.hamburger'); - this.closeButton = this.dropdown.querySelector('.close'); - this.content = this.dropdown.querySelector('.site-nav'); - this.closeBtnContent = document.querySelector('.site-nav'); - - this.button.addEventListner('click', (event) => { this.toggleContent(event) }) - this.closeButton.addEventListner('click', (event) => { this.closeContent(event) }) + this.button = dropdown.querySelector('.hamburger'); + this.closeButton = dropdown.querySelector('.close'); + this.content = dropdown.querySelector('.site-nav'); + this.closeBtnContent = dropdown.querySelector('.close'); + + this.button.addEventListner('click', () => this.toggleContent()); + this.closeBtnContent.addEventListner('click', () => this.closeContent()); } - toggleContent(event) { + toggleContent() { + this.button.classList.toggle('toggle-on'); this.content.classList.toggle('toggle-on'); } - closeContent(event) { + + closeBtnContent() { this.closeBtnContent.classList.toggle('toggle-on'); } } -let dropdowns = document.querySelectorAll('header'); -dropdowns.Array.from(dropdowns).map(dropdown => new Dropdown(dropdown)); \ No newline at end of file +const dropdowns = document.querySelectorAll('.menucontainer'); +dropdowns.forEach(dropdown => new Dropdown(dropdown)); \ No newline at end of file diff --git a/services.html b/services.html index 5da31c74ae..b2d8b4eeb5 100644 --- a/services.html +++ b/services.html @@ -18,7 +18,7 @@
-
+

S&J

@@ -38,15 +38,15 @@

S&J

+
-
- - -
-

Services

-
+
+ + +
+

Services

- +
From eb27125ef54bdcc28e462f945af1c41ad2a0543b Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 6 Mar 2019 20:54:04 -0800 Subject: [PATCH 17/21] modified js nav --- components/Navigation/navigation.less | 19 ++--- components/RecentProjects/recentProjects.less | 4 +- css/index.css | 26 +++---- index.html | 2 +- js/index.js | 76 +++++++++---------- services.html | 2 +- 6 files changed, 59 insertions(+), 70 deletions(-) diff --git a/components/Navigation/navigation.less b/components/Navigation/navigation.less index c600ed8bfb..a4433a6a13 100644 --- a/components/Navigation/navigation.less +++ b/components/Navigation/navigation.less @@ -5,13 +5,13 @@ align-items: center; padding: 1.2% 7.75%; width: 100%; - z-index: 999; + z-index: 1; .hamburger { cursor: pointer; } - .site-nav { + .nav-content { position: fixed; width: 100%; height: 100%; @@ -19,11 +19,9 @@ left: 0; background: #99A4AE; opacity: 0.9; - visibility: hidden; - transition: all 0.5s ease; + transition: all 0.4s ease; z-index: 2; - .expanded-menu { background-color: #99A4AF; @@ -61,15 +59,8 @@ } } - // .site-nav { - // display: none; - // } - - .toggle-on { - // display: block; - visibility: visible; - opacity: 0.9; - // z-index: 3; + .hidden { + display: none; } } diff --git a/components/RecentProjects/recentProjects.less b/components/RecentProjects/recentProjects.less index 24bc5e884c..d03ff82f35 100644 --- a/components/RecentProjects/recentProjects.less +++ b/components/RecentProjects/recentProjects.less @@ -26,7 +26,7 @@ width: 31%; position: absolute; top: 75%; - right: 8.1%; + right: 8.2%; bottom: 2%; h4 { @@ -41,7 +41,7 @@ .outskirts { position: absolute; - left: 8.1%; + left: 8.2%; } @media (max-width: 500px) { diff --git a/css/index.css b/css/index.css index 650062d822..036e997dbf 100644 --- a/css/index.css +++ b/css/index.css @@ -451,12 +451,12 @@ footer .copyright { align-items: center; padding: 1.2% 7.75%; width: 100%; - z-index: 999; + z-index: 1; } .menucontainer .hamburger { cursor: pointer; } -.menucontainer .site-nav { +.menucontainer .nav-content { position: fixed; width: 100%; height: 100%; @@ -464,11 +464,10 @@ footer .copyright { left: 0; background: #99A4AE; opacity: 0.9; - visibility: hidden; - transition: all 0.5s ease; + transition: all 0.4s ease; z-index: 2; } -.menucontainer .site-nav .expanded-menu { +.menucontainer .nav-content .expanded-menu { background-color: #99A4AF; display: flex; justify-content: space-between; @@ -476,13 +475,13 @@ footer .copyright { padding: 1% 20.3%; width: 100%; } -.menucontainer .site-nav .expanded-menu .close { +.menucontainer .nav-content .expanded-menu .close { cursor: pointer; } -.menucontainer .site-nav .nav-links { +.menucontainer .nav-content .nav-links { padding-top: 15%; } -.menucontainer .site-nav .nav-link { +.menucontainer .nav-content .nav-link { color: #FFFFFF; padding-left: 43.5%; text-decoration: none; @@ -494,12 +493,11 @@ footer .copyright { z-index: 1; cursor: pointer; } -.menucontainer .site-nav .nav-link:hover { +.menucontainer .nav-content .nav-link:hover { color: #504446; } -.menucontainer .toggle-on { - visibility: visible; - opacity: 0.9; +.menucontainer .hidden { + display: none; } .mobile-jumbo-img { display: none; @@ -550,7 +548,7 @@ footer .copyright { width: 31%; position: absolute; top: 75%; - right: 8.1%; + right: 8.2%; bottom: 2%; } .box-title h4 { @@ -563,7 +561,7 @@ footer .copyright { } .outskirts { position: absolute; - left: 8.1%; + left: 8.2%; } @media (max-width: 500px) { .home .recent-projects { diff --git a/index.html b/index.html index 9876d990eb..d3c863151b 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@

S&J

-
+