From 91e4712d87f46ae338128926c69eab38460d38bd Mon Sep 17 00:00:00 2001 From: raberin Date: Mon, 11 Feb 2019 18:47:15 -0800 Subject: [PATCH 01/31] First Commit Git Flow --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 17aecb1714..dc272fc5c0 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # User Interface Project Week +First Commit You are to treat this week as if you are working as a front end developer at a web development agency. The instructor is the owner of the agency and is under pressure from the client to deliver the product, a custom marketing website, on time. The project managers are acting as your supervisors. This week you will be building a website for an architectural firm named Smith and Jones Architects. Smith and Jones have requested a minimum viable product to deliver to their board of directors by the end of the week. The requirements are listed below under **MVP Features**. Smith and Jones also have a wish list of extra features they would love to showcase to the board if you can get them done. You will demonstrate your work to the agency owner Thursday afternoon. From 447b98a04da457521b505e994ee9f1feef92f471 Mon Sep 17 00:00:00 2001 From: raberin Date: Mon, 11 Feb 2019 19:15:27 -0800 Subject: [PATCH 02/31] Completed HTML of header and footer --- index.html | 119 ++++++++++++++++++++++++++++------------------------- 1 file changed, 63 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index 8a84a17304..9fb8dce3a4 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,30 @@ - - - Home - - - - - - - -

You got this! Good luck.

- - - - - + + + +
+
+

S&J

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

+ 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

+
+
+ + + From 69925e129e2c417936f630cfdee1b3dd1b192fd9 Mon Sep 17 00:00:00 2001 From: raberin Date: Mon, 11 Feb 2019 20:47:08 -0800 Subject: [PATCH 03/31] Finished HTML of Home Page --- index.html | 135 ++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 97 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 9fb8dce3a4..45b16798fc 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
-

S&J

+

S&J

-
From d2a69a6470f1d5e318b2073af54ce5bd8138acc8 Mon Sep 17 00:00:00 2001 From: raberin Date: Mon, 11 Feb 2019 20:53:45 -0800 Subject: [PATCH 04/31] Minor fixes on HTML --- index.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 45b16798fc..1b251d18be 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
-

S&J

+

S&J

-

+ Jumbotron +

Integrity,
Excellence,
Progress. -

+
From a50bc09f7bc61472a00b6efc7c493552fa95b16b Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 12 Feb 2019 19:12:36 -0800 Subject: [PATCH 05/31] Added LESS files to organize CSS/LESS --- css/index.css | 158 ++++++++++++++++++++++++++++++++++++++++++- index.html | 4 +- less/footer.less | 0 less/global.less | 29 ++++++++ less/index.less | 67 ++---------------- less/mixins.less | 1 + less/navigation.less | 5 ++ less/reset.less | 48 +++++++++++++ less/variables.less | 9 +++ 9 files changed, 258 insertions(+), 63 deletions(-) create mode 100644 less/footer.less create mode 100644 less/global.less create mode 100644 less/mixins.less create mode 100644 less/navigation.less create mode 100644 less/reset.less create mode 100644 less/variables.less diff --git a/css/index.css b/css/index.css index e6b2b589c1..77f5530ee8 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,157 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +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, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 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; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', Arial, sans-serif; +} +.container { + max-width: 800px; + width: 100%; + margin: 0 auto; +} +@media (max-width: 500px) { + .container { + max-width: 500px; + width: 100%; + padding: 0 2%; + } +} +p { + font-size: 16rem; + line-height: 24rem; +} +.flex { + display: flex; +} diff --git a/index.html b/index.html index 1b251d18be..aaba582333 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
-
+

S&J

-
+

diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..3506e82982 --- /dev/null +++ b/less/global.less @@ -0,0 +1,29 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +html, body { + font-family: 'Roboto', Arial, sans-serif; +} + +.container { + max-width: 800px; + width: 100%; + margin: 0 auto; + @media @mobile { + max-width: 500px; + width: 100%; + padding: 0 2%; + } +} + +p { + font-size: 16rem; + line-height: 24rem; +} + + diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..dd0f518a4b 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,7 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ - -html,body,div,span,applet,object,iframe, -h1,h2,h3,h4,h5,h6,p,blockquote,pre, -a,abbr,acronym,address,big,cite,code, -del,dfn,em,img,ins,kbd,q,s,samp, -small,strike,strong,sub,sup,tt,var, -b,u,i,center, -dl,dt,dd,ol,ul,li, -fieldset,form,label,legend, -table,caption,tbody,tfoot,thead,tr,th,td, -article,aside,canvas,details,figcaption,figure, -footer,header,hgroup,menu,nav,section,summary, -time,mark,audio,video{ - margin:0; - padding:0; - border:0; - outline:0; - font-size:100%; - font:inherit; - vertical-align:baseline; -} -/* HTML5 display-role reset for older browsers */ -article,aside,details,figcaption,figure, -footer,header,hgroup,menu,nav,section{ - display:block; -} -body{ - line-height:1; -} -ol,ul{ - list-style:none; -} -blockquote,q{ - quotes:none; -} -blockquote:before,blockquote:after, -q:before,q:after{ - content:’’; - content:none; -} -ins{ - text-decoration:none; -} -del{ - text-decoration:line-through; -} - -table{ - border-collapse:collapse; - border-spacing:0; -} - -/* Your Code Goes Here */ \ No newline at end of file +// Follow the order in the readme +@import "variables"; +@import "mixins"; +@import "reset"; +@import "global"; +@import "navigation"; +@import "footer"; \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..8b864acfa3 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1 @@ +// Mixins in here diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..f6ba5624b2 --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,5 @@ +// Navigation Styles here +.flex { + display: flex; +} + diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000000..af944401f7 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 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; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..dc9450b148 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,9 @@ + +// Color assignments + + +// Colors + + +// Media Query +@mobile: (max-width: 500px); \ No newline at end of file From 85e87bb68c01183454bbf802c7faae27971a3f1d Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 12 Feb 2019 19:53:08 -0800 Subject: [PATCH 06/31] Finished header except background color --- css/index.css | 31 ++++++++++++++++++++++++++++--- index.html | 11 ++++++++--- less/footer.less | 4 ++++ less/global.less | 6 +++--- less/home-page.less | 3 +++ less/index.less | 1 + less/navigation.less | 22 ++++++++++++++++++++++ 7 files changed, 69 insertions(+), 9 deletions(-) create mode 100644 less/home-page.less diff --git a/css/index.css b/css/index.css index 77f5530ee8..60a46cfe51 100644 --- a/css/index.css +++ b/css/index.css @@ -137,7 +137,7 @@ body { font-family: 'Roboto', Arial, sans-serif; } .container { - max-width: 800px; + max-width: 1080px; width: 100%; margin: 0 auto; } @@ -149,9 +149,34 @@ body { } } p { - font-size: 16rem; - line-height: 24rem; + font-size: 1.6rem; + line-height: 2.4rem; +} +.gray-box { + color: #D8D8D8; } .flex { display: flex; } +.header { + background-color: #828282; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 40px; + padding-left: 5%; + padding-right: 5%; +} +.header h1 { + font-weight: bold; + font-size: 2.4rem; + color: #ffffff; +} +.header nav a.menu-buttons, +.header nav .menu-button-close { + display: none; +} +.footer { + background: #828282; +} diff --git a/index.html b/index.html index aaba582333..c92ddd1f4b 100644 --- a/index.html +++ b/index.html @@ -18,9 +18,11 @@

S&J

@@ -67,6 +69,7 @@

Recent Projects

The Villa Houses +

THE VILLAS

@@ -86,6 +89,7 @@

THE VILLAS

The Outskirt Houses +

OUTSKIRTS

@@ -105,6 +109,7 @@

OUTSKIRTS

The Blocks Houses +

THE BLOCKS

diff --git a/less/footer.less b/less/footer.less index e69de29bb2..939d77c0e7 100644 --- a/less/footer.less +++ b/less/footer.less @@ -0,0 +1,4 @@ +.footer { + background: #828282; + +} \ No newline at end of file diff --git a/less/global.less b/less/global.less index 3506e82982..3e7ed7ed0c 100644 --- a/less/global.less +++ b/less/global.less @@ -11,7 +11,7 @@ html, body { } .container { - max-width: 800px; + max-width: 1080px; width: 100%; margin: 0 auto; @media @mobile { @@ -22,8 +22,8 @@ html, body { } p { - font-size: 16rem; - line-height: 24rem; + font-size: 1.6rem; + line-height: 2.4rem; } diff --git a/less/home-page.less b/less/home-page.less new file mode 100644 index 0000000000..b8b241958f --- /dev/null +++ b/less/home-page.less @@ -0,0 +1,3 @@ +.gray-box { + color: #D8D8D8 +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index dd0f518a4b..94a99c821a 100644 --- a/less/index.less +++ b/less/index.less @@ -3,5 +3,6 @@ @import "mixins"; @import "reset"; @import "global"; +@import "home-page"; @import "navigation"; @import "footer"; \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index f6ba5624b2..637eaac7ce 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -2,4 +2,26 @@ .flex { display: flex; } +.header { + background-color: #828282; + .flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 40px; + padding-left: 5%; + padding-right: 5%; + h1 { + font-weight: bold; + font-size: 2.4rem; + color: #ffffff; + } + + nav { + + a.menu-buttons, .menu-button-close { + display: none; + } + } +} From 12c8a991373848958b57d34654df19b6444c8eb7 Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 12 Feb 2019 20:13:28 -0800 Subject: [PATCH 07/31] Finished Jumbotron of home-page --- css/index.css | 18 +++++++++++++++++- index.html | 4 ++-- less/global.less | 2 +- less/home-page.less | 18 ++++++++++++++++++ 4 files changed, 38 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 60a46cfe51..813a70c771 100644 --- a/css/index.css +++ b/css/index.css @@ -137,7 +137,7 @@ body { font-family: 'Roboto', Arial, sans-serif; } .container { - max-width: 1080px; + max-width: 800px; width: 100%; margin: 0 auto; } @@ -155,6 +155,22 @@ p { .gray-box { color: #D8D8D8; } +header { + position: relative; + text-align: left; +} +header img { + width: 100%; +} +header h2 { + font-weight: bold; + font-size: 6.4rem; + line-height: 7.5rem; + color: #ffffff; + position: absolute; + bottom: 10%; + left: 5%; +} .flex { display: flex; } diff --git a/index.html b/index.html index c92ddd1f4b..4bf9ee84ae 100644 --- a/index.html +++ b/index.html @@ -27,8 +27,8 @@

S&J

- Jumbotron -

+ Jumbotron +

Integrity,
Excellence,
Progress. diff --git a/less/global.less b/less/global.less index 3e7ed7ed0c..b4c4ddf69d 100644 --- a/less/global.less +++ b/less/global.less @@ -11,7 +11,7 @@ html, body { } .container { - max-width: 1080px; + max-width: 800px; width: 100%; margin: 0 auto; @media @mobile { diff --git a/less/home-page.less b/less/home-page.less index b8b241958f..f6e1fdf72a 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,3 +1,21 @@ .gray-box { color: #D8D8D8 +} + +header { + position: relative; + text-align: left; + + img { + width: 100%; + } + h2{ + font-weight: bold; + font-size: 6.4rem; + line-height: 7.5rem; + color: #ffffff; + position: absolute; + bottom: 10%; + left: 5%; + } } \ No newline at end of file From fb3b6fe493e677ec97563a28d4e02b692d7f4af7 Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 12 Feb 2019 21:10:32 -0800 Subject: [PATCH 08/31] Finished the top-content --- css/index.css | 45 ++++++++++++++++++++++++++++++++++++++-- index.html | 50 ++++++++++++++++++++++++++++++++------------- less/global.less | 2 +- less/home-page.less | 34 +++++++++++++++++++++++++++++- less/mixins.less | 9 ++++++++ 5 files changed, 122 insertions(+), 18 deletions(-) diff --git a/css/index.css b/css/index.css index 813a70c771..22e2a75c16 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,11 @@ +.padding-left-right { + padding-left: 5%; + padding-right: 5%; +} +.margin-top-bottom { + margin-top: 5%; + margin-bottom: 5%; +} /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -137,7 +145,7 @@ body { font-family: 'Roboto', Arial, sans-serif; } .container { - max-width: 800px; + max-width: 1080px; width: 100%; margin: 0 auto; } @@ -165,12 +173,45 @@ header img { header h2 { font-weight: bold; font-size: 6.4rem; - line-height: 7.5rem; + line-height: 6.4rem; color: #ffffff; position: absolute; bottom: 10%; left: 5%; } +div.content-img { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-top: 5%; + margin-bottom: 5%; +} +div.content-img div.title-content-btn { + display: flex; + flex-direction: column; + align-content: space-between; + width: 42.5%; +} +div.content-img div.title-content-btn h2 { + font-weight: bold; + font-size: 2.8rem; + color: #222222; + margin-top: 5%; + margin-bottom: 5%; +} +div.content-img div.title-content-btn div.btn { + border: solid 1px #222222; + font-size: 1.6rem; + width: 12rem; + height: 4rem; + text-align: center; + padding-top: 3%; + margin-top: 5%; + margin-bottom: 5%; +} +div.content-img img.top-content-image { + width: 42.5%; +} .flex { display: flex; } diff --git a/index.html b/index.html index 4bf9ee84ae..fc5ad38930 100644 --- a/index.html +++ b/index.html @@ -21,13 +21,21 @@

S&J

Home Services Contact - menu-button-expand - menu-button-close + menu-button-expand + menu-button-close

- Jumbotron + Jumbotron

Integrity,
Excellence,
@@ -35,7 +43,7 @@

-
+

Smith & Jones Architects

@@ -45,10 +53,19 @@

Smith & Jones Architects

Learn More
- Picture of house blueprints + Picture of house blueprints
-
+
+ Picutre of Futuristic designs

Futuristic Designs

@@ -58,17 +75,16 @@

Futuristic Designs

View Designs
- Picutre of Futuristic designs
-
+

Recent Projects

- The Villa Houses + The Villa Houses

THE VILLAS

@@ -88,7 +104,10 @@

THE VILLAS

- The Outskirt Houses + The Outskirt Houses

OUTSKIRTS

@@ -108,7 +127,10 @@

OUTSKIRTS

- The Blocks Houses + The Blocks Houses

THE BLOCKS

diff --git a/less/global.less b/less/global.less index b4c4ddf69d..3e7ed7ed0c 100644 --- a/less/global.less +++ b/less/global.less @@ -11,7 +11,7 @@ html, body { } .container { - max-width: 800px; + max-width: 1080px; width: 100%; margin: 0 auto; @media @mobile { diff --git a/less/home-page.less b/less/home-page.less index f6e1fdf72a..65f8a459a7 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -12,10 +12,42 @@ header { h2{ font-weight: bold; font-size: 6.4rem; - line-height: 7.5rem; + line-height: 6.4rem; color: #ffffff; position: absolute; bottom: 10%; left: 5%; } +} + +div.content-img { + .flex; + flex-direction: row; + justify-content: space-evenly; + .margin-top-bottom; + + div.title-content-btn { + .flex; + flex-direction: column; + align-content: space-between; + width: 42.5%; + h2 { + font-weight: bold; + font-size: 2.8rem; + color: #222222; + .margin-top-bottom; + } + div.btn { + border: solid 1px #222222; + font-size: 1.6rem; + width: 12rem; + height: 4rem; + text-align: center; + padding-top: 3%; + .margin-top-bottom; + } + } + img.top-content-image { + width: 42.5%; + } } \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 8b864acfa3..6eff06e82b 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1 +1,10 @@ // Mixins in here +.padding-left-right { + padding-left: 5%; + padding-right: 5%; +} + +.margin-top-bottom { + margin-top: 5%; + margin-bottom: 5%; +} \ No newline at end of file From b96a96c815e2f64b353f429c3ac4ebda27287150 Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 12 Feb 2019 21:30:22 -0800 Subject: [PATCH 09/31] Finshed footer --- css/index.css | 30 ++++++++++++++++++++++++++++++ index.html | 14 +++++++------- less/footer.less | 33 ++++++++++++++++++++++++++++++++- 3 files changed, 69 insertions(+), 8 deletions(-) diff --git a/css/index.css b/css/index.css index 22e2a75c16..4c13cd4cb4 100644 --- a/css/index.css +++ b/css/index.css @@ -236,4 +236,34 @@ div.content-img img.top-content-image { } .footer { background: #828282; + color: #ffffff; +} +.footer div.footer-flex { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} +.footer div.footer-flex div.footer-content { + margin-top: 5%; + margin-bottom: 5%; +} +.footer div.footer-flex div.footer-content h3 { + font-size: 2rem; + line-height: 2.4rem; + font-weight: bold; +} +.footer div.footer-flex div.footer-content p { + font-size: 1.4rem; + line-height: 2.6rem; +} +.footer div.footer-flex div.footer-content .footer-input { + width: 100%; + padding: 5%; + border-radius: 5px; + margin-top: 3%; + font-size: 1.6rem; +} +.footer p.copyright { + font-size: 1rem; + text-align: center; } diff --git a/index.html b/index.html index fc5ad38930..a260b86c34 100644 --- a/index.html +++ b/index.html @@ -151,30 +151,30 @@

THE BLOCKS

-
-
+
+

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

@@ -182,7 +182,7 @@

California

702 555 0144

-

Copyright © 2018 Smith and Jones

+

Copyright © 2018 Smith and Jones

diff --git a/less/footer.less b/less/footer.less index 939d77c0e7..d909597287 100644 --- a/less/footer.less +++ b/less/footer.less @@ -1,4 +1,35 @@ .footer { background: #828282; - + color: #ffffff; + + div.footer-flex { + .flex; + flex-direction: row; + justify-content: space-evenly; + + div.footer-content { + .margin-top-bottom; + h3 { + font-size: 2rem; + line-height: 2.4rem; + font-weight: bold; + } + p { + font-size: 1.4rem; + line-height: 2.6rem; + } + .footer-input { + width: 100%; + padding: 5%; + border-radius: 5px; + margin-top: 3%; + font-size: 1.6rem; + } + } + } + + p.copyright { + font-size: 1rem; + text-align: center; + } } \ No newline at end of file From a47860ac895c09e15fe269772fd289712e6fb5dc Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 12 Feb 2019 22:59:33 -0800 Subject: [PATCH 10/31] Completed the home-page HTML and CSS - Desktop --- css/index.css | 62 ++++++++++++++++++++-- index.html | 119 ++++++++++++++++++++++++------------------- less/global.less | 2 +- less/home-page.less | 60 +++++++++++++++++++++- less/navigation.less | 2 +- 5 files changed, 184 insertions(+), 61 deletions(-) diff --git a/css/index.css b/css/index.css index 4c13cd4cb4..91806c2d71 100644 --- a/css/index.css +++ b/css/index.css @@ -145,7 +145,7 @@ body { font-family: 'Roboto', Arial, sans-serif; } .container { - max-width: 1080px; + max-width: 960px; width: 100%; margin: 0 auto; } @@ -185,12 +185,13 @@ div.content-img { justify-content: space-evenly; margin-top: 5%; margin-bottom: 5%; + margin-top: 10%; } div.content-img div.title-content-btn { display: flex; flex-direction: column; align-content: space-between; - width: 42.5%; + width: 40%; } div.content-img div.title-content-btn h2 { font-weight: bold; @@ -210,7 +211,60 @@ div.content-img div.title-content-btn div.btn { margin-bottom: 5%; } div.content-img img.top-content-image { - width: 42.5%; + width: 44%; +} +div.three-pic-content { + margin-top: 5%; + margin-bottom: 5%; + margin-top: 10%; +} +div.three-pic-content h2 { + font-weight: bold; + font-size: 2.8rem; + color: #222222; + padding-left: 5%; + margin-top: 5%; + margin-bottom: 5%; +} +div.three-pic-content div.pic-top-word-bottom { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +div.three-pic-content div.pic-top-word-bottom div.two-para { + padding: 2%; + width: 45%; + margin-top: 5%; + margin-bottom: 5%; +} +div.three-pic-content div.pic-top-word-bottom div.two-para p.first-para { + margin-bottom: 5%; +} +div.three-pic-content div.pic-top-word-bottom div.pic-float-title { + position: relative; + display: flex; + justify-content: center; +} +div.three-pic-content div.pic-top-word-bottom div.pic-float-title img.img-gray-box { + width: 100%; +} +div.three-pic-content div.pic-top-word-bottom div.pic-float-title div.gray-box { + background-color: #D8D8D8; + color: black; + font-size: 2.4rem; + letter-spacing: 5px; + text-align: center; + width: 30%; + padding-top: 2.5rem; + height: 7rem; + position: absolute; + bottom: -15%; + right: 0%; +} +div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { + bottom: -15%; + left: 0%; } .flex { display: flex; @@ -221,7 +275,7 @@ div.content-img img.top-content-image { flex-direction: row; justify-content: space-between; align-items: center; - height: 40px; + height: 4.5rem; padding-left: 5%; padding-right: 5%; } diff --git a/index.html b/index.html index a260b86c34..61dab12036 100644 --- a/index.html +++ b/index.html @@ -62,9 +62,9 @@

Smith & Jones Architects

Picutre of Futuristic designs

Futuristic Designs

@@ -77,76 +77,84 @@

Futuristic Designs

-
+

Recent Projects

The Villa Houses -
-

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

+

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

+
The Outskirt Houses -
-

OUTSKIRTS

+
OUTSKIRTS
+
+
+

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

-

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

THE BLOCKS

+
THE BLOCKS
+
+
+

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

-

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

@@ -157,7 +165,12 @@

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 3e7ed7ed0c..a91aa94638 100644 --- a/less/global.less +++ b/less/global.less @@ -11,7 +11,7 @@ html, body { } .container { - max-width: 1080px; + max-width: 960px; width: 100%; margin: 0 auto; @media @mobile { diff --git a/less/home-page.less b/less/home-page.less index 65f8a459a7..4d32324978 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -25,12 +25,13 @@ div.content-img { flex-direction: row; justify-content: space-evenly; .margin-top-bottom; + margin-top: 10%; div.title-content-btn { .flex; flex-direction: column; align-content: space-between; - width: 42.5%; + width: 40%; h2 { font-weight: bold; font-size: 2.8rem; @@ -48,6 +49,61 @@ div.content-img { } } img.top-content-image { - width: 42.5%; + width: 44%; + } +} + +div.three-pic-content { + .margin-top-bottom; + margin-top: 10%; + h2 { + font-weight: bold; + font-size: 2.8rem; + color: #222222; + padding-left: 5%; + .margin-top-bottom; + } + div.pic-top-word-bottom { + .flex; + justify-content: center; + flex-direction: column; + align-items: center; + + div.two-para { + padding: 2%; + width: 45%; + .margin-top-bottom; + p.first-para { + margin-bottom: 5%; + } + } + div.pic-float-title { + position: relative; + .flex; + justify-content: center; + + img.img-gray-box { + width: 100%; + } + div.gray-box { + background-color: #D8D8D8; + color: black; + font-size: 2.4rem; + letter-spacing: 5px; + text-align: center; + width: 30%; + padding-top: 2.5rem; + height: 7rem; + position: absolute; + bottom: -15%; + right: 0%; + } + + .outskirts { + bottom: -15%; + left: 0%; + } + } + } } \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index 637eaac7ce..9ac532d84f 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -8,7 +8,7 @@ flex-direction: row; justify-content: space-between; align-items: center; - height: 40px; + height: 4.5rem; padding-left: 5%; padding-right: 5%; From b3369bf1e7c87fa177f8673de4c750c485a19cc0 Mon Sep 17 00:00:00 2001 From: raberin Date: Thu, 14 Feb 2019 18:38:13 -0800 Subject: [PATCH 11/31] Changed container width to 1024px --- css/index.css | 2 +- less/global.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 91806c2d71..576b239f0f 100644 --- a/css/index.css +++ b/css/index.css @@ -145,7 +145,7 @@ body { font-family: 'Roboto', Arial, sans-serif; } .container { - max-width: 960px; + max-width: 1024px; width: 100%; margin: 0 auto; } diff --git a/less/global.less b/less/global.less index a91aa94638..ed0e99e3df 100644 --- a/less/global.less +++ b/less/global.less @@ -11,7 +11,7 @@ html, body { } .container { - max-width: 960px; + max-width: 1024px; width: 100%; margin: 0 auto; @media @mobile { From 388baa26583bc1e98baf80d67654979839e53bad Mon Sep 17 00:00:00 2001 From: raberin Date: Thu, 14 Feb 2019 19:10:18 -0800 Subject: [PATCH 12/31] Changed color of nav bar --- css/index.css | 2 +- less/navigation.less | 2 +- less/services.less | 0 services.html | 27 +++++++++++++++++++++++++-- 4 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 less/services.less diff --git a/css/index.css b/css/index.css index 576b239f0f..14b47243b2 100644 --- a/css/index.css +++ b/css/index.css @@ -270,7 +270,7 @@ div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { display: flex; } .header { - background-color: #828282; + background-color: #98A5AE; display: flex; flex-direction: row; justify-content: space-between; diff --git a/less/navigation.less b/less/navigation.less index 9ac532d84f..edb283c480 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -3,7 +3,7 @@ display: flex; } .header { - background-color: #828282; + background-color: #98A5AE; .flex; flex-direction: row; justify-content: space-between; diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/services.html b/services.html index fb5a79e18a..e02ca36df3 100644 --- a/services.html +++ b/services.html @@ -11,8 +11,31 @@ - -

Services

+
+
+

S&J

+ +
+ +
+ Jumbotron +

Services

+
+
+ @@ -34,8 +35,9 @@

S&J

-
- Jumbotron +
+ Jumbotron + Jumbotron

Integrity,
Excellence,
@@ -54,18 +56,28 @@

Smith & Jones Architects

Learn More
Picture of house blueprints + Picture of house blueprints
Picutre of Futuristic designs + Picutre of Futuristic designs

Futuristic Designs

@@ -82,10 +94,15 @@

Recent Projects

The Villa Houses + The Villa Houses
THE VILLAS
@@ -108,10 +125,15 @@

Recent Projects

The Outskirt Houses + The Outskirt Houses
OUTSKIRTS
@@ -134,10 +156,15 @@

Recent Projects

The Blocks Houses + The Blocks Houses
THE BLOCKS
diff --git a/less/home-page.less b/less/home-page.less index 4d32324978..3ab9287b26 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -2,13 +2,27 @@ color: #D8D8D8 } -header { +img.img-desktop { + @media @mobile { + display: none; + } +} + +img.img-mobile { + display: none; + @media @mobile { + display: block; + } +} + +header.jumbo-header { position: relative; text-align: left; - img { + img.jumbotron { width: 100%; } + h2{ font-weight: bold; font-size: 6.4rem; @@ -17,6 +31,11 @@ header { position: absolute; bottom: 10%; left: 5%; + + @media @mobile { + font-size: 4.4rem; + line-height: 4.4rem; + } } } @@ -27,11 +46,23 @@ div.content-img { .margin-top-bottom; margin-top: 10%; + @media @mobile { + flex-direction: column; + align-items: center; + + } + + div.title-content-btn { .flex; flex-direction: column; align-content: space-between; width: 40%; + + @media @mobile { + width: 90%; + } + h2 { font-weight: bold; font-size: 2.8rem; @@ -46,10 +77,25 @@ div.content-img { text-align: center; padding-top: 3%; .margin-top-bottom; + + @media @mobile { + width: 100%; + height: 5rem; + padding-top: 4%; + } } } img.top-content-image { width: 44%; + @media @mobile { + width: 90%; + } + } +} + +div.Architects { + @media @mobile { + flex-direction: column-reverse; } } diff --git a/less/navigation.less b/less/navigation.less index edb283c480..ae97c7afd9 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,7 +1,4 @@ // Navigation Styles here -.flex { - display: flex; -} .header { background-color: #98A5AE; .flex; @@ -12,6 +9,10 @@ padding-left: 5%; padding-right: 5%; + @media @mobile { + max-width: 500px; + } + h1 { font-weight: bold; font-size: 2.4rem; diff --git a/less/variables.less b/less/variables.less index dc9450b148..e20307e7d1 100644 --- a/less/variables.less +++ b/less/variables.less @@ -1,8 +1,7 @@ -// Color assignments - - -// Colors +.flex { + display: flex; + } // Media Query From 47c333b22a784beb67d874573da644f428b12655 Mon Sep 17 00:00:00 2001 From: raberin Date: Thu, 14 Feb 2019 20:41:32 -0800 Subject: [PATCH 14/31] Finished mobile css for home page --- css/index.css | 18 ++++++++++++++++++ less/home-page.less | 14 ++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/css/index.css b/css/index.css index e29fd82860..f330ee20ff 100644 --- a/css/index.css +++ b/css/index.css @@ -291,6 +291,12 @@ div.three-pic-content div.pic-top-word-bottom div.two-para { div.three-pic-content div.pic-top-word-bottom div.two-para p.first-para { margin-bottom: 5%; } +@media (max-width: 500px) { + div.three-pic-content div.pic-top-word-bottom div.two-para { + width: 90%; + margin-top: 15%; + } +} div.three-pic-content div.pic-top-word-bottom div.pic-float-title { position: relative; display: flex; @@ -312,10 +318,22 @@ div.three-pic-content div.pic-top-word-bottom div.pic-float-title div.gray-box { bottom: -15%; right: 0%; } +@media (max-width: 500px) { + div.three-pic-content div.pic-top-word-bottom div.pic-float-title div.gray-box { + width: 90%; + right: 5%; + bottom: -20%; + } +} div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { bottom: -15%; left: 0%; } +@media (max-width: 500px) { + div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { + left: 5%; + } +} .header { background-color: #98A5AE; display: flex; diff --git a/less/home-page.less b/less/home-page.less index 3ab9287b26..3fe0a957d5 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -122,6 +122,11 @@ div.three-pic-content { p.first-para { margin-bottom: 5%; } + + @media @mobile { + width: 90%; + margin-top: 15%; + } } div.pic-float-title { position: relative; @@ -143,11 +148,20 @@ div.three-pic-content { position: absolute; bottom: -15%; right: 0%; + + @media @mobile { + width: 90%; + right: 5%; + bottom: -20%; + } } .outskirts { bottom: -15%; left: 0%; + @media @mobile { + left: 5%; + } } } From b9213967df9478639ebe7c56ea8b4c71dbead53b Mon Sep 17 00:00:00 2001 From: raberin Date: Thu, 14 Feb 2019 20:44:07 -0800 Subject: [PATCH 15/31] Finished mobile css of footer --- css/index.css | 15 ++++++++++++++- less/footer.less | 13 ++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index f330ee20ff..6993fb279b 100644 --- a/css/index.css +++ b/css/index.css @@ -367,6 +367,13 @@ div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { flex-direction: row; justify-content: space-evenly; } +@media (max-width: 500px) { + .footer div.footer-flex { + flex-direction: column; + padding-left: 3%; + padding-right: 3%; + } +} .footer div.footer-flex div.footer-content { margin-top: 5%; margin-bottom: 5%; @@ -388,6 +395,12 @@ div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { font-size: 1.6rem; } .footer p.copyright { - font-size: 1rem; + font-size: 1.2rem; text-align: center; } +@media (max-width: 500px) { + .footer p.copyright { + text-align: left; + padding-left: 3%; + } +} diff --git a/less/footer.less b/less/footer.less index d909597287..e727d54f00 100644 --- a/less/footer.less +++ b/less/footer.less @@ -7,6 +7,12 @@ flex-direction: row; justify-content: space-evenly; + @media @mobile { + flex-direction: column; + padding-left: 3%; + padding-right: 3%; + } + div.footer-content { .margin-top-bottom; h3 { @@ -29,7 +35,12 @@ } p.copyright { - font-size: 1rem; + font-size: 1.2rem; text-align: center; + + @media @mobile { + text-align: left; + padding-left: 3%; + } } } \ No newline at end of file From 060fc645440d3319121fc3e50116786f845769c9 Mon Sep 17 00:00:00 2001 From: raberin Date: Thu, 14 Feb 2019 21:58:38 -0800 Subject: [PATCH 16/31] Finished HTML of services page --- css/index.css | 12 +++++++----- index.html | 6 +++--- less/home-page.less | 11 +++++++---- less/navigation.less | 2 +- services.html | 13 +++++++------ 5 files changed, 25 insertions(+), 19 deletions(-) diff --git a/css/index.css b/css/index.css index 6993fb279b..1e5074863e 100644 --- a/css/index.css +++ b/css/index.css @@ -186,21 +186,23 @@ header.jumbo-header { header.jumbo-header img.jumbotron { width: 100%; } -header.jumbo-header h2 { +header.jumbo-header h1.jumbo-title { font-weight: bold; font-size: 6.4rem; line-height: 6.4rem; color: #ffffff; position: absolute; - bottom: 10%; - left: 5%; } @media (max-width: 500px) { - header.jumbo-header h2 { + header.jumbo-header h1.jumbo-title { font-size: 4.4rem; line-height: 4.4rem; } } +header.jumbo-header h1.bottom-left { + bottom: 10%; + left: 5%; +} div.content-img { display: flex; flex-direction: row; @@ -349,7 +351,7 @@ div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { max-width: 500px; } } -.header h1 { +.header h2.title { font-weight: bold; font-size: 2.4rem; color: #ffffff; diff --git a/index.html b/index.html index 02a97e4ce3..762e00714c 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
-

S&J

+

S&J

diff --git a/less/home-page.less b/less/home-page.less index 3fe0a957d5..a8aa81acdd 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -23,20 +23,23 @@ header.jumbo-header { width: 100%; } - h2{ + h1.jumbo-title{ font-weight: bold; font-size: 6.4rem; line-height: 6.4rem; color: #ffffff; position: absolute; - bottom: 10%; - left: 5%; - + @media @mobile { font-size: 4.4rem; line-height: 4.4rem; } } + + h1.bottom-left { + bottom: 10%; + left: 5%; + } } div.content-img { diff --git a/less/navigation.less b/less/navigation.less index ae97c7afd9..02dcb4df63 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -13,7 +13,7 @@ max-width: 500px; } - h1 { + h2.title { font-weight: bold; font-size: 2.4rem; color: #ffffff; diff --git a/services.html b/services.html index e02ca36df3..67377a44a4 100644 --- a/services.html +++ b/services.html @@ -13,7 +13,7 @@
-

S&J

+

S&J

- + + - - - -
-
-

S&J

- -
- -
- Jumbotron -

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

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

S&J

+ +
+ +
+ Jumbotron +

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

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

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

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

+
+ design-build +
+ +
+
+

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

+
+ sustainability +
+ +
+
+
+

+ 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

+
+ + + + From e8f0747a39f77f3bd54c2fc2145e2285529224e1 Mon Sep 17 00:00:00 2001 From: raberin Date: Sun, 17 Feb 2019 20:59:48 -0800 Subject: [PATCH 18/31] Added jumbotron css on services.html --- less/services.less | 33 +++++++++++++++++++++++++++++++++ services.html | 6 +++--- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/less/services.less b/less/services.less index e69de29bb2..421de4c42a 100644 --- a/less/services.less +++ b/less/services.less @@ -0,0 +1,33 @@ +header.jumbo-header { + position: relative; + text-align: left; + + img.jumbotron { + width: 100%; + } + + h1.bottom-left { + bottom: 10%; + left: 5%; + } + + h1.jumbo-title { + font-weight: bold; + font-size: 6.4rem; + line-height: 6.4rem; + color: #ffffff; + position: absolute; + + @media @mobile { + font-size: 4.4rem; + line-height: 4.4rem; + } + } +} + +p.services-ptag { + font-size: 1.0rem; +} + + + diff --git a/services.html b/services.html index 9a6aa589fc..1fc4655ccb 100644 --- a/services.html +++ b/services.html @@ -34,9 +34,9 @@

S&J

-
- Jumbotron -

Services

+
+ Jumbotron +

Services

From ad82a660afb7379d62d63e040f6201af3f4ab6cc Mon Sep 17 00:00:00 2001 From: raberin Date: Mon, 18 Feb 2019 11:20:29 -0800 Subject: [PATCH 19/31] Small format changes to files --- css/index.css | 55 +++++++++ less/contact.less | 0 less/index.less | 4 +- less/services.less | 75 +++++++++---- services.html | 269 +++++++++++++++++++++++---------------------- 5 files changed, 249 insertions(+), 154 deletions(-) create mode 100644 less/contact.less diff --git a/css/index.css b/css/index.css index 1e5074863e..bd666c5e18 100644 --- a/css/index.css +++ b/css/index.css @@ -336,6 +336,61 @@ div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { left: 5%; } } +header.jumbo-header { + position: relative; + text-align: left; +} +header.jumbo-header img.jumbotron { + width: 100%; +} +header.jumbo-header h1.bottom-left { + bottom: 10%; + left: 5%; +} +header.jumbo-header h1.jumbo-title { + font-weight: bold; + font-size: 6.4rem; + line-height: 6.4rem; + color: #ffffff; + position: absolute; +} +@media (max-width: 500px) { + header.jumbo-header h1.jumbo-title { + font-size: 4.4rem; + line-height: 4.4rem; + } +} +div.ptag-container { + display: flex; + justify-content: center; + margin-top: 5%; + margin-bottom: 5%; +} +div.ptag-container p.services-ptag { + font-size: 1.2rem; + padding-left: 6%; + padding-right: 6%; +} +div.tabs { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-top: 5%; + margin-bottom: 5%; +} +div.tabs div.tab { + font-weight: bold; + border: solid 1px #222222; + font-size: 2rem; + width: 20rem; + height: 6rem; + text-align: center; + padding-top: 2%; +} +div.tabs div.active-tab { + background-color: #5DA1B7; + color: white; +} .header { background-color: #98A5AE; display: flex; diff --git a/less/contact.less b/less/contact.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/index.less b/less/index.less index 94a99c821a..5ff21d4d7a 100644 --- a/less/index.less +++ b/less/index.less @@ -4,5 +4,7 @@ @import "reset"; @import "global"; @import "home-page"; +@import "services.less"; +@import "contact.less"; @import "navigation"; -@import "footer"; \ No newline at end of file +@import "footer"; diff --git a/less/services.less b/less/services.less index 421de4c42a..a17dcd4fd0 100644 --- a/less/services.less +++ b/less/services.less @@ -1,33 +1,64 @@ header.jumbo-header { - position: relative; - text-align: left; + position: relative; + text-align: left; - img.jumbotron { - width: 100%; - } + img.jumbotron { + width: 100%; + } - h1.bottom-left { - bottom: 10%; - left: 5%; - } + h1.bottom-left { + bottom: 10%; + left: 5%; + } - h1.jumbo-title { - font-weight: bold; - font-size: 6.4rem; - line-height: 6.4rem; - color: #ffffff; - position: absolute; - - @media @mobile { - font-size: 4.4rem; - line-height: 4.4rem; - } + h1.jumbo-title { + font-weight: bold; + font-size: 6.4rem; + line-height: 6.4rem; + color: #ffffff; + position: absolute; + + @media @mobile { + font-size: 4.4rem; + line-height: 4.4rem; } + } } -p.services-ptag { - font-size: 1.0rem; +div.ptag-container { + display: flex; + justify-content: center; + .margin-top-bottom; + + p.services-ptag { + font-size: 1.2rem; + padding-left: 6%; + padding-right: 6%; + } } +div.tabs { + .flex; + flex-direction: row; + justify-content: space-evenly; + .margin-top-bottom; + div.tab { + font-weight: bold; + border: solid 1px #222222; + font-size: 2rem; + width: 20rem; + height: 6rem; + text-align: center; + padding-top: 2%; + } + div.active-tab { + background-color: #5DA1B7; + color: white; + } +} + +div.content { + +} diff --git a/services.html b/services.html index 1fc4655ccb..38f7358d84 100644 --- a/services.html +++ b/services.html @@ -35,152 +35,159 @@

S&J

- Jumbotron + Jumbotron

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

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

+

+ 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

-

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

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

+ +
+
+

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

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

+
+
+

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

- 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

+
+
+

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

-
-

California

-

Mountain Street

-

Suite 105

-

San Diego, CA 22345

-

702 555 0144

+ design-build +
+ +
+
+

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

+ sustainability
-

Copyright © 2018 Smith and Jones

-
+ +
+
+
+

+ 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

+
+
From d75ce5386af457a9a5f4154c0dc5c4c2f9e83ff0 Mon Sep 17 00:00:00 2001 From: raberin Date: Mon, 18 Feb 2019 12:26:15 -0800 Subject: [PATCH 20/31] Finished CSS of services.html --- css/index.css | 27 +++++- less/services.less | 37 ++++++-- services.html | 231 +++++++++++++++++++++++---------------------- 3 files changed, 170 insertions(+), 125 deletions(-) diff --git a/css/index.css b/css/index.css index bd666c5e18..42c11b0c7e 100644 --- a/css/index.css +++ b/css/index.css @@ -367,9 +367,9 @@ div.ptag-container { margin-bottom: 5%; } div.ptag-container p.services-ptag { - font-size: 1.2rem; - padding-left: 6%; - padding-right: 6%; + font-size: 1.4rem; + padding-left: 5%; + padding-right: 5%; } div.tabs { display: flex; @@ -388,9 +388,28 @@ div.tabs div.tab { padding-top: 2%; } div.tabs div.active-tab { - background-color: #5DA1B7; + background-color: #5da1b7; color: white; } +div.content-container div.content { + display: none; +} +div.content-container div.content div.content-words h2.content-title { + font-size: 2rem; + font-weight: bold; + margin-bottom: 5%; +} +div.content-container div.content div.content-words p.content-ptag { + font-size: 1.4rem; + width: 80%; +} +div.content-container div.active-content { + display: flex; + flex-direction: row; + padding-left: 5%; + padding-right: 5%; + margin-bottom: 5%; +} .header { background-color: #98A5AE; display: flex; diff --git a/less/services.less b/less/services.less index a17dcd4fd0..66657da542 100644 --- a/less/services.less +++ b/less/services.less @@ -31,9 +31,9 @@ div.ptag-container { .margin-top-bottom; p.services-ptag { - font-size: 1.2rem; - padding-left: 6%; - padding-right: 6%; + font-size: 1.4rem; + padding-left: 5%; + padding-right: 5%; } } @@ -51,14 +51,37 @@ div.tabs { height: 6rem; text-align: center; padding-top: 2%; - } + } div.active-tab { - background-color: #5DA1B7; + background-color: #5da1b7; color: white; } } -div.content { - +div.content-container { + div.content { + display: none; + + div.content-words { + h2.content-title { + font-size: 2rem; + font-weight: bold; + margin-bottom: 5%; + } + + p.content-ptag { + font-size: 1.4rem; + width: 80%; + } + } + } + + div.active-content { + display: flex; + flex-direction: row; + padding-left: 5%; + padding-right: 5%; + margin-bottom: 5%; + } } diff --git a/services.html b/services.html index 38f7358d84..3eeca65294 100644 --- a/services.html +++ b/services.html @@ -11,6 +11,7 @@ + @@ -64,129 +65,131 @@

Services

-
-
-

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

+
+ pre-construction
- pre-construction -
-
-
-

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

+
+ construction
- construction -
-
-
-

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

+
+
+

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

+
+ design-build
- design-build -
-
-
-

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

+
+
+

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

+
+ sustainability
- sustainability -
-
-
-
-

- 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

+
+
+
+

+ 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

+
-
-

California

-

Mountain Street

-

Suite 105

-

San Diego, CA 22345

-

702 555 0144

-
-
-

Copyright © 2018 Smith and Jones

-
+

Copyright © 2018 Smith and Jones

+
+
From c177ba10995a24b39172f4f2d190f226830c7823 Mon Sep 17 00:00:00 2001 From: raberin Date: Mon, 18 Feb 2019 14:30:01 -0800 Subject: [PATCH 21/31] Finished navigation overlay --- css/index.css | 57 +++++++++++++++++++++++++++++++++++++++++--- index.html | 35 +++++++++++++++------------ js/index.js | 17 ++++++++++++- less/navigation.less | 55 ++++++++++++++++++++++++++++++++++++++---- services.html | 35 +++++++++++++++------------ 5 files changed, 160 insertions(+), 39 deletions(-) diff --git a/css/index.css b/css/index.css index 42c11b0c7e..4905202c97 100644 --- a/css/index.css +++ b/css/index.css @@ -420,6 +420,9 @@ div.content-container div.active-content { padding-left: 5%; padding-right: 5%; } +.header img.menu-button-close { + display: none; +} @media (max-width: 500px) { .header { max-width: 500px; @@ -429,10 +432,58 @@ div.content-container div.active-content { font-weight: bold; font-size: 2.4rem; color: #ffffff; + z-index: 2; +} +.nav-overlay { + height: 100%; + width: 0; + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + left: 0; + top: 0; + background-color: rgba(153, 165, 174, 0.8); + overflow-x: hidden; + /* Disable horizontal scroll */ + transition: 0.5s; + /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ +} +.nav-overlay-content { + position: relative; + top: 25%; + /* 25% from the top */ + width: 100%; + /* 100% width */ + text-align: center; + /* Centered text/links */ + margin-top: 30px; + /* 30px top margin to avoid conflict with the close button on smaller screens */ } -.header nav a.menu-buttons, -.header nav .menu-button-close { - display: none; +/* The navigation links inside the overlay */ +.nav-overlay a { + font-weight: bold; + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + /* Display block instead of inline */ + transition: 0.3s; + /* Transition effects on hover (color) */ +} +/* When you mouse over the navigation links, change their color */ +.nav-overlay a:hover, +.nav-overlay a:focus { + color: #504545; +} +/* Position the close button (top right corner) */ +img.menu-button-close { + position: absolute; + top: 1.5%; + right: 18.5%; + font-size: 60px; + z-index: 2; } .footer { background: #828282; diff --git a/index.html b/index.html index 762e00714c..6376dd65d4 100644 --- a/index.html +++ b/index.html @@ -18,21 +18,26 @@

S&J

- +
+ +
+ + menu-button-expand + menu-button-close
diff --git a/js/index.js b/js/index.js index bb3d341cf0..03db4f602b 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,16 @@ -// JS goes here \ No newline at end of file +// JS goes here +//Navigation Overlay +//Open nav when clickimg on hamburger +function openNav() { + document.querySelector(".nav-overlay").style.width = "100%"; + document.querySelector(".menu-button-close").style.display = "block"; + document.querySelector(".menu-button-expand").style.display = "none"; + + } + + /* Close when someone clicks on the "x" symbol inside the overlay */ + function closeNav() { + document.querySelector(".nav-overlay").style.width = "0%"; + document.querySelector(".menu-button-close").style.display = "none"; + document.querySelector(".menu-button-expand").style.display = "block"; + } \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index 02dcb4df63..b757b48113 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -8,6 +8,10 @@ height: 4.5rem; padding-left: 5%; padding-right: 5%; + + img.menu-button-close { + display: none; + } @media @mobile { max-width: 500px; @@ -17,12 +21,53 @@ font-weight: bold; font-size: 2.4rem; color: #ffffff; + z-index: 2; } +} + +// Overlay CSS +.nav-overlay { + height: 100%; + width: 0; + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + background-color: rgba(153,165,174, 0.8); + overflow-x: hidden; /* Disable horizontal scroll */ + transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ +} - nav { +.nav-overlay-content { + position: relative; + top: 25%; /* 25% from the top */ + width: 100%; /* 100% width */ + text-align: center; /* Centered text/links */ + margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ +} - a.menu-buttons, .menu-button-close { - display: none; - } - } +/* The navigation links inside the overlay */ +.nav-overlay a { + font-weight: bold; + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; /* Display block instead of inline */ + transition: 0.3s; /* Transition effects on hover (color) */ } + +/* When you mouse over the navigation links, change their color */ +.nav-overlay a:hover, .nav-overlay a:focus { + color: #504545; +} + +/* Position the close button (top right corner) */ +img.menu-button-close { + position: absolute; + top: 1.5%; + right: 18.5%; + font-size: 60px; + z-index: 2; +} + diff --git a/services.html b/services.html index 3eeca65294..9c74b2daef 100644 --- a/services.html +++ b/services.html @@ -18,21 +18,26 @@

S&J

- +
+ +
+ + menu-button-expand + menu-button-close
From f141cc1d2e652d0d953b7804234131cc02cc271c Mon Sep 17 00:00:00 2001 From: raberin Date: Mon, 18 Feb 2019 14:40:47 -0800 Subject: [PATCH 22/31] Small changes on nav overlay to look cleaner --- css/index.css | 21 ++++++++++----------- less/navigation.less | 25 ++++++++++++++----------- 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/css/index.css b/css/index.css index 4905202c97..9e4f34481b 100644 --- a/css/index.css +++ b/css/index.css @@ -447,25 +447,19 @@ div.content-container div.active-content { overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; - /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ } .nav-overlay-content { position: relative; top: 25%; - /* 25% from the top */ width: 100%; - /* 100% width */ text-align: center; - /* Centered text/links */ margin-top: 30px; - /* 30px top margin to avoid conflict with the close button on smaller screens */ } -/* The navigation links inside the overlay */ .nav-overlay a { font-weight: bold; - padding: 8px; + padding: 0.8rem; text-decoration: none; - font-size: 36px; + font-size: 3.6rem; color: white; display: block; /* Display block instead of inline */ @@ -480,11 +474,16 @@ div.content-container div.active-content { /* Position the close button (top right corner) */ img.menu-button-close { position: absolute; - top: 1.5%; - right: 18.5%; - font-size: 60px; + top: 0.8%; + right: 5.3%; + font-size: 6rem; z-index: 2; } +@media (max-width: 500px) { + img.menu-button-close { + right: 7.5%; + } +} .footer { background: #828282; color: #ffffff; diff --git a/less/navigation.less b/less/navigation.less index b757b48113..b48e2ffc8f 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -35,23 +35,22 @@ top: 0; background-color: rgba(153,165,174, 0.8); overflow-x: hidden; /* Disable horizontal scroll */ - transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ + transition: 0.5s; //Transition effect which times the speed it slides in } .nav-overlay-content { position: relative; - top: 25%; /* 25% from the top */ - width: 100%; /* 100% width */ - text-align: center; /* Centered text/links */ - margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; } -/* The navigation links inside the overlay */ .nav-overlay a { font-weight: bold; - padding: 8px; + padding: 0.8rem; text-decoration: none; - font-size: 36px; + font-size: 3.6rem; color: white; display: block; /* Display block instead of inline */ transition: 0.3s; /* Transition effects on hover (color) */ @@ -65,9 +64,13 @@ /* Position the close button (top right corner) */ img.menu-button-close { position: absolute; - top: 1.5%; - right: 18.5%; - font-size: 60px; + top: 0.8%; + right: 5.3%; + font-size: 6rem; z-index: 2; + + @media @mobile { + right: 7.5%; + } } From 3bda7b604a16d9098a79fa5e63b244ca9a344ead Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 19 Feb 2019 19:34:44 -0800 Subject: [PATCH 23/31] Completed services tab component --- css/index.css | 2 -- js/index.js | 69 +++++++++++++++++++++++++++++++++++++------- less/navigation.less | 4 +-- 3 files changed, 61 insertions(+), 14 deletions(-) diff --git a/css/index.css b/css/index.css index 9e4f34481b..062648f4ab 100644 --- a/css/index.css +++ b/css/index.css @@ -438,9 +438,7 @@ div.content-container div.active-content { height: 100%; width: 0; position: fixed; - /* Stay in place */ z-index: 1; - /* Sit on top */ left: 0; top: 0; background-color: rgba(153, 165, 174, 0.8); diff --git a/js/index.js b/js/index.js index 03db4f602b..7f522c158a 100644 --- a/js/index.js +++ b/js/index.js @@ -2,15 +2,64 @@ //Navigation Overlay //Open nav when clickimg on hamburger function openNav() { - document.querySelector(".nav-overlay").style.width = "100%"; - document.querySelector(".menu-button-close").style.display = "block"; - document.querySelector(".menu-button-expand").style.display = "none"; + document.querySelector(".nav-overlay").style.width = "100%"; + document.querySelector(".menu-button-close").style.display = "block"; + document.querySelector(".menu-button-expand").style.display = "none"; +} +/* Close when someone clicks on the "x" symbol inside the overlay */ +function closeNav() { + document.querySelector(".nav-overlay").style.width = "0%"; + document.querySelector(".menu-button-close").style.display = "none"; + document.querySelector(".menu-button-expand").style.display = "block"; +} + +//Services Tab Component +class Tab { + constructor(tab) { + this.tab = tab; + + //Getting the custom data attrs on tab + this.data = this.tab.dataset.tab; + + // Using the custom data attribute get the associated Item element + //selecting each tab using the [data-somthing] for specificty + this.contentElement = document.querySelector(`.content[data-tab='${this.data}']`); + + //Using the data attrs, create a new instance of the TabContent class + this.contentElement = new TabContent(this.contentElement); + + this.tab.addEventListener('click', () => this.select()); + } + select() { + // Get all of the elements with the tab class + const tabs = document.querySelectorAll('.tab'); + // Using a loop or the forEach method remove the 'active-tab' class from all of the links + //This removed + Array.from(tabs).forEach((tab) => tab.classList.remove('active-tab')); + + // Add a class named "tabs-link-selected" to this link + this.tab.classList.add('active-tab'); + + // Call the select method on the item associated with this link + this.contentElement.showContent(); } - - /* Close when someone clicks on the "x" symbol inside the overlay */ - function closeNav() { - document.querySelector(".nav-overlay").style.width = "0%"; - document.querySelector(".menu-button-close").style.display = "none"; - document.querySelector(".menu-button-expand").style.display = "block"; - } \ No newline at end of file +} + +class TabContent { + constructor(content) { + this.content = content; + } + + showContent() { + const contents = document.querySelectorAll('.content'); + + //Removing the class "active-content" from each element + Array.from(contents).forEach((content) => content.classList.remove('active-content')); + + //Add a class name "active-content" to this element + this.content.classList.add('active-content'); + } +} + +const tabs = document.querySelectorAll(".tab").forEach(tab => new Tab(tab)); diff --git a/less/navigation.less b/less/navigation.less index b48e2ffc8f..f7ff5291e1 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -29,8 +29,8 @@ .nav-overlay { height: 100%; width: 0; - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ + position: fixed; + z-index: 1; left: 0; top: 0; background-color: rgba(153,165,174, 0.8); From 915779207154f89b2ee0ea645f71f055d15d379a Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 19 Feb 2019 19:36:46 -0800 Subject: [PATCH 24/31] Font size adjustments // MVP Complete --- css/index.css | 4 ++-- less/services.less | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 062648f4ab..8f4fe75488 100644 --- a/css/index.css +++ b/css/index.css @@ -367,7 +367,7 @@ div.ptag-container { margin-bottom: 5%; } div.ptag-container p.services-ptag { - font-size: 1.4rem; + font-size: 1.6rem; padding-left: 5%; padding-right: 5%; } @@ -400,7 +400,7 @@ div.content-container div.content div.content-words h2.content-title { margin-bottom: 5%; } div.content-container div.content div.content-words p.content-ptag { - font-size: 1.4rem; + font-size: 1.6rem; width: 80%; } div.content-container div.active-content { diff --git a/less/services.less b/less/services.less index 66657da542..7a6cd2f538 100644 --- a/less/services.less +++ b/less/services.less @@ -31,7 +31,7 @@ div.ptag-container { .margin-top-bottom; p.services-ptag { - font-size: 1.4rem; + font-size: 1.6rem; padding-left: 5%; padding-right: 5%; } @@ -71,7 +71,7 @@ div.content-container { } p.content-ptag { - font-size: 1.4rem; + font-size: 1.6rem; width: 80%; } } From 4c3e0dd5baac16594b92d09601eb69debfc04dd3 Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 19 Feb 2019 20:23:36 -0800 Subject: [PATCH 25/31] Prettier'd all my files // Completed MVP --- css/index.css | 4 ++-- js/index.js | 28 ++++++++++++++++------------ less/global.less | 7 +++---- less/navigation.less | 20 ++++++++++---------- 4 files changed, 31 insertions(+), 28 deletions(-) diff --git a/css/index.css b/css/index.css index 8f4fe75488..cba293cd17 100644 --- a/css/index.css +++ b/css/index.css @@ -145,7 +145,7 @@ html { } html, body { - font-family: 'Roboto', Arial, sans-serif; + font-family: "Roboto", Arial, sans-serif; } .container { max-width: 1024px; @@ -411,7 +411,7 @@ div.content-container div.active-content { margin-bottom: 5%; } .header { - background-color: #98A5AE; + background-color: #98a5ae; display: flex; flex-direction: row; justify-content: space-between; diff --git a/js/index.js b/js/index.js index 7f522c158a..c44b0070a2 100644 --- a/js/index.js +++ b/js/index.js @@ -24,22 +24,24 @@ class Tab { // Using the custom data attribute get the associated Item element //selecting each tab using the [data-somthing] for specificty - this.contentElement = document.querySelector(`.content[data-tab='${this.data}']`); + this.contentElement = document.querySelector( + `.content[data-tab='${this.data}']` + ); //Using the data attrs, create a new instance of the TabContent class this.contentElement = new TabContent(this.contentElement); - this.tab.addEventListener('click', () => this.select()); + this.tab.addEventListener("click", () => this.select()); } select() { // Get all of the elements with the tab class - const tabs = document.querySelectorAll('.tab'); + const tabs = document.querySelectorAll(".tab"); // Using a loop or the forEach method remove the 'active-tab' class from all of the links - //This removed - Array.from(tabs).forEach((tab) => tab.classList.remove('active-tab')); + //This removed + Array.from(tabs).forEach(tab => tab.classList.remove("active-tab")); // Add a class named "tabs-link-selected" to this link - this.tab.classList.add('active-tab'); + this.tab.classList.add("active-tab"); // Call the select method on the item associated with this link this.contentElement.showContent(); @@ -48,17 +50,19 @@ class Tab { class TabContent { constructor(content) { - this.content = content; + this.content = content; } showContent() { - const contents = document.querySelectorAll('.content'); + const contents = document.querySelectorAll(".content"); - //Removing the class "active-content" from each element - Array.from(contents).forEach((content) => content.classList.remove('active-content')); + //Removing the class "active-content" from each element + Array.from(contents).forEach(content => + content.classList.remove("active-content") + ); - //Add a class name "active-content" to this element - this.content.classList.add('active-content'); + //Add a class name "active-content" to this element + this.content.classList.add("active-content"); } } diff --git a/less/global.less b/less/global.less index ed0e99e3df..a159824f82 100644 --- a/less/global.less +++ b/less/global.less @@ -6,8 +6,9 @@ html { font-size: 62.5%; } -html, body { - font-family: 'Roboto', Arial, sans-serif; +html, +body { + font-family: "Roboto", Arial, sans-serif; } .container { @@ -25,5 +26,3 @@ p { font-size: 1.6rem; line-height: 2.4rem; } - - diff --git a/less/navigation.less b/less/navigation.less index f7ff5291e1..41e0f6268b 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,6 +1,6 @@ // Navigation Styles here .header { - background-color: #98A5AE; + background-color: #98a5ae; .flex; flex-direction: row; justify-content: space-between; @@ -8,7 +8,7 @@ height: 4.5rem; padding-left: 5%; padding-right: 5%; - + img.menu-button-close { display: none; } @@ -29,21 +29,21 @@ .nav-overlay { height: 100%; width: 0; - position: fixed; + position: fixed; z-index: 1; left: 0; top: 0; - background-color: rgba(153,165,174, 0.8); + background-color: rgba(153, 165, 174, 0.8); overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; //Transition effect which times the speed it slides in } .nav-overlay-content { position: relative; - top: 25%; - width: 100%; - text-align: center; - margin-top: 30px; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; } .nav-overlay a { @@ -57,7 +57,8 @@ } /* When you mouse over the navigation links, change their color */ -.nav-overlay a:hover, .nav-overlay a:focus { +.nav-overlay a:hover, +.nav-overlay a:focus { color: #504545; } @@ -73,4 +74,3 @@ img.menu-button-close { right: 7.5%; } } - From 979b1852e33472f980558dc13331e914e723f042 Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 19 Feb 2019 21:06:14 -0800 Subject: [PATCH 26/31] Added mobile images --- less/variables.less | 17 ++++++++++++++++- services.html | 35 ++++++++++++++++++++++++++++++----- 2 files changed, 46 insertions(+), 6 deletions(-) diff --git a/less/variables.less b/less/variables.less index e20307e7d1..5696e9f3e9 100644 --- a/less/variables.less +++ b/less/variables.less @@ -5,4 +5,19 @@ // Media Query -@mobile: (max-width: 500px); \ No newline at end of file +@mobile: (max-width: 500px); + + +//Img switching desktop => mobile +img.img-desktop { + @media @mobile { + display: none; + } +} + +img.img-mobile { + display: none; + @media @mobile { + display: block; + } +} \ No newline at end of file diff --git a/services.html b/services.html index 9c74b2daef..6311f36541 100644 --- a/services.html +++ b/services.html @@ -42,10 +42,15 @@

S&J

Jumbotron + Jumbotron

Services

@@ -86,7 +91,12 @@

Pre-Construction

pre-construction + pre-construction @@ -107,7 +117,12 @@

Construction

construction + construction @@ -128,7 +143,12 @@

Design Build

design-build + design-build @@ -149,7 +169,12 @@

Sustainability

sustainability + sustainability From 4c4211decbc9dc38731a583635b978033306b34b Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 19 Feb 2019 21:27:30 -0800 Subject: [PATCH 27/31] Finished mobile tab buttons for services page --- css/index.css | 42 +++++++++++++++++++++++++++++------------- less/home-page.less | 13 ------------- less/services.less | 14 ++++++++++++++ 3 files changed, 43 insertions(+), 26 deletions(-) diff --git a/css/index.css b/css/index.css index cba293cd17..2e0a6dcfe2 100644 --- a/css/index.css +++ b/css/index.css @@ -1,6 +1,19 @@ .flex { display: flex; } +@media (max-width: 500px) { + img.img-desktop { + display: none; + } +} +img.img-mobile { + display: none; +} +@media (max-width: 500px) { + img.img-mobile { + display: block; + } +} .padding-left-right { padding-left: 5%; padding-right: 5%; @@ -166,19 +179,6 @@ p { .gray-box { color: #D8D8D8; } -@media (max-width: 500px) { - img.img-desktop { - display: none; - } -} -img.img-mobile { - display: none; -} -@media (max-width: 500px) { - img.img-mobile { - display: block; - } -} header.jumbo-header { position: relative; text-align: left; @@ -378,6 +378,13 @@ div.tabs { margin-top: 5%; margin-bottom: 5%; } +@media (max-width: 500px) { + div.tabs { + flex-direction: column; + align-content: center; + align-items: center; + } +} div.tabs div.tab { font-weight: bold; border: solid 1px #222222; @@ -387,6 +394,15 @@ div.tabs div.tab { text-align: center; padding-top: 2%; } +@media (max-width: 500px) { + div.tabs div.tab { + width: 80%; + height: 5rem; + margin-top: 3%; + margin-bottom: 3%; + padding-top: 3%; + } +} div.tabs div.active-tab { background-color: #5da1b7; color: white; diff --git a/less/home-page.less b/less/home-page.less index a8aa81acdd..afa0c60946 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -2,19 +2,6 @@ color: #D8D8D8 } -img.img-desktop { - @media @mobile { - display: none; - } -} - -img.img-mobile { - display: none; - @media @mobile { - display: block; - } -} - header.jumbo-header { position: relative; text-align: left; diff --git a/less/services.less b/less/services.less index 7a6cd2f538..d841d79d24 100644 --- a/less/services.less +++ b/less/services.less @@ -43,6 +43,12 @@ div.tabs { justify-content: space-evenly; .margin-top-bottom; + @media @mobile { + flex-direction: column; + align-content: center; + align-items: center; + } + div.tab { font-weight: bold; border: solid 1px #222222; @@ -51,6 +57,14 @@ div.tabs { height: 6rem; text-align: center; padding-top: 2%; + + @media @mobile { + width: 80%; + height: 5rem; + margin-top: 3%; + margin-bottom: 3%; + padding-top: 3%; + } } div.active-tab { From 7bd9ee586f3a0d4bd3d998601adc85d92d3406ff Mon Sep 17 00:00:00 2001 From: raberin Date: Tue, 19 Feb 2019 21:37:28 -0800 Subject: [PATCH 28/31] Completed mobile page of services page --- css/index.css | 19 ++++++++++++++++--- less/services.less | 17 ++++++++++++++--- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 2e0a6dcfe2..d01db5612d 100644 --- a/css/index.css +++ b/css/index.css @@ -396,11 +396,11 @@ div.tabs div.tab { } @media (max-width: 500px) { div.tabs div.tab { - width: 80%; + width: 90%; height: 5rem; margin-top: 3%; margin-bottom: 3%; - padding-top: 3%; + padding-top: 4%; } } div.tabs div.active-tab { @@ -411,7 +411,7 @@ div.content-container div.content { display: none; } div.content-container div.content div.content-words h2.content-title { - font-size: 2rem; + font-size: 2.8rem; font-weight: bold; margin-bottom: 5%; } @@ -419,6 +419,12 @@ div.content-container div.content div.content-words p.content-ptag { font-size: 1.6rem; width: 80%; } +@media (max-width: 500px) { + div.content-container div.content div.content-words p.content-ptag { + width: 100%; + margin-bottom: 5%; + } +} div.content-container div.active-content { display: flex; flex-direction: row; @@ -426,6 +432,13 @@ div.content-container div.active-content { padding-right: 5%; margin-bottom: 5%; } +@media (max-width: 500px) { + div.content-container div.active-content { + flex-direction: column; + align-content: center; + align-items: center; + } +} .header { background-color: #98a5ae; display: flex; diff --git a/less/services.less b/less/services.less index d841d79d24..e28f83a8a1 100644 --- a/less/services.less +++ b/less/services.less @@ -59,11 +59,11 @@ div.tabs { padding-top: 2%; @media @mobile { - width: 80%; + width: 90%; height: 5rem; margin-top: 3%; margin-bottom: 3%; - padding-top: 3%; + padding-top: 4%; } } @@ -79,7 +79,7 @@ div.content-container { div.content-words { h2.content-title { - font-size: 2rem; + font-size: 2.8rem; font-weight: bold; margin-bottom: 5%; } @@ -87,6 +87,11 @@ div.content-container { p.content-ptag { font-size: 1.6rem; width: 80%; + + @media @mobile { + width: 100%; + margin-bottom: 5%; + } } } } @@ -97,5 +102,11 @@ div.content-container { padding-left: 5%; padding-right: 5%; margin-bottom: 5%; + + @media @mobile { + flex-direction: column; + align-content: center; + align-items: center; + } } } From 571f88b6ce86f1eed5d2cc95a5ce1bd07f5f43ca Mon Sep 17 00:00:00 2001 From: raberin Date: Thu, 21 Feb 2019 19:27:30 -0800 Subject: [PATCH 29/31] Finished HTML of contacts page --- contact.html | 171 ++++++++++++++++++++++++++++++++++++++++++----- css/index.css | 4 ++ less/global.less | 5 ++ less/index.less | 4 +- 4 files changed, 164 insertions(+), 20 deletions(-) diff --git a/contact.html b/contact.html index 868844fe14..1b3fab6a17 100644 --- a/contact.html +++ b/contact.html @@ -1,23 +1,157 @@ - - - Contact Us - - - - + + + Contact Us + + + + - + +
+
+

S&J

+
+ +
-

Contact

+ menu-button-expand + menu-button-close +
+ +
+ Jumbotron + Jumbotron +

Contact Us

+
+ +
+

Get In Touch

+
+

Email Address

+ +

We'll never share your email with anyone else.

+ +

How many building do you need planned?

+ + +

Providue a brief overview of your project needs:

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

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

+
+
+ + + + +
+
+
+

+ 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 + + + diff --git a/css/index.css b/css/index.css index d01db5612d..f1d85e1f38 100644 --- a/css/index.css +++ b/css/index.css @@ -176,6 +176,10 @@ p { font-size: 1.6rem; line-height: 2.4rem; } +h2 { + font-size: 2.8rem; + font-weight: bold; +} .gray-box { color: #D8D8D8; } diff --git a/less/global.less b/less/global.less index a159824f82..d195ed0b9c 100644 --- a/less/global.less +++ b/less/global.less @@ -26,3 +26,8 @@ p { font-size: 1.6rem; line-height: 2.4rem; } + +h2 { + font-size: 2.8rem; + font-weight: bold; +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 5ff21d4d7a..c0907df0d8 100644 --- a/less/index.less +++ b/less/index.less @@ -4,7 +4,7 @@ @import "reset"; @import "global"; @import "home-page"; -@import "services.less"; -@import "contact.less"; +@import "services"; +@import "contact"; @import "navigation"; @import "footer"; From e876cf08ca4d2e0b6e972c6cf01965d235d1e169 Mon Sep 17 00:00:00 2001 From: raberin Date: Thu, 21 Feb 2019 19:56:27 -0800 Subject: [PATCH 30/31] Completed desktop view of contacts page --- contact.html | 174 +++++++++++++++++++++++++--------------------- css/index.css | 52 ++++++++++++++ less/contact.less | 58 ++++++++++++++++ 3 files changed, 203 insertions(+), 81 deletions(-) diff --git a/contact.html b/contact.html index 1b3fab6a17..5d3e17f146 100644 --- a/contact.html +++ b/contact.html @@ -54,27 +54,41 @@

Contact Us

-

Get In Touch

-

Email Address

- -

We'll never share your email with anyone else.

- -

How many building do you need planned?

- - -

Providue a brief overview of your project needs:

- +

Get In Touch

+
+

Email Address

+ +

We'll never share your email with anyone else.

+
+
+

How many building do you need planned?

+ +
+
+

Providue a brief overview of your project needs:

+ +
- - - - - - - - +
+ + +
+
+ + +
+
+ + +
@@ -83,72 +97,70 @@

Get In Touch

-
-

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

-
+

Where We Work

+
+

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

+
+
- - - -
-
-
-

- 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

-
+
+
+
+

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

+ +

We'll never share your email with anyone else.

-

Copyright © 2018 Smith and Jones

-
-
+
+

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

+