From 55ea05a491d164b5c6d4531ba7f421c0cdac4472 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 10:52:19 -0600 Subject: [PATCH 01/83] first commit --- index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 8a84a17304..e7b1161562 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,13 @@ -

You got this! Good luck.

+ + + + + + + From c6f00c90fe880c4516a572e69946cb9d4df491e3 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 12:06:03 -0600 Subject: [PATCH 03/83] still writing html --- index.html | 41 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index c069d1f51d..be1c8fe11c 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,8 @@ -
-
+
+

S&J

-
+
photo -

Integrity, - Excellence, +

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

+
Learn More
+
+
+ home1 +
+
+ +
+
+ home2 +
+
+

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

+
Learn More
+
+
+ +
+

Recent Projects

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

+
+ + From d245e040a6232ee1d195ae1cc8783c8ae48fe06a Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 12:26:31 -0600 Subject: [PATCH 04/83] finishing up desktop html --- index.html | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index be1c8fe11c..4d3f7e5f80 100644 --- a/index.html +++ b/index.html @@ -56,12 +56,26 @@

Futuristic Designs

Recent Projects

- recent -
THE VILLAS
+ 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.

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

+

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.

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

+

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.

+
+ From ef8cfefc821491e19c42cac60694d22d3b8a338d Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 12:53:27 -0600 Subject: [PATCH 05/83] finishing desktop html and made an email imput --- index.html | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4d3f7e5f80..aad4bd806f 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

S&J

-
+
photo

Integrity,
@@ -76,15 +76,49 @@

THE BLOCKS

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.

+
+
+ +
+
+

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 6249e985788d36cd96d38d66240d6231d19fd974 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 15:35:58 -0600 Subject: [PATCH 06/83] making variables and using them in css and using DOM II as reference --- css/index.css | 149 ++++++++++++++++++++++++++++++++++++++++++- less/footer.less | 12 ++++ less/global.less | 49 ++++++++++++++ less/home-page.less | 0 less/index.less | 70 ++++---------------- less/mixins.less | 0 less/navigation.less | 0 less/reset.less | 58 +++++++++++++++++ less/variables.less | 14 ++++ 9 files changed, 294 insertions(+), 58 deletions(-) create mode 100644 less/footer.less create mode 100644 less/global.less create mode 100644 less/home-page.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..dc1249cc0b 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,148 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/* Your Code Goes Here */ +/*------------------------------------*\ +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; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', sans-serif; + color: #222222; + background: #FFFFFF; +} diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..e0b92a51c0 --- /dev/null +++ b/less/footer.less @@ -0,0 +1,12 @@ +// .footer { +// width: 100%; +// border-top: 2px dashed @silver; +// background: @sandy-beach; + +// p { +// text-align: center; +// color: @font-color; +// font-size: 1.6rem; +// padding: 20px; +// } +// } \ No newline at end of file diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..2e89ddd9df --- /dev/null +++ b/less/global.less @@ -0,0 +1,49 @@ +* { + box-sizing: border-box; + } + + html { + font-size: 62.5%; + } + + html, body { + font-family: 'Roboto', sans-serif; + color: @nero; + background: @white; + + } + +// h1, h2, h3, h4, h5 { +// font-family: 'Indie Flower', cursive; +// } + +// h1 { +// font-size: 4rem; +// } + +// h2 { +// font-size: 3.2rem; +// padding-bottom: 10px; +// } + +// h4 { +// font-size: 2.5rem; +// padding-bottom: 10px; +// } + +// p { +// line-height: 1.5; +// font-size: 1.6rem; +// padding-bottom: 10px; +// } + +// img { +// max-width: 100%; +// height: auto; +// } + +// .container { +// max-width: 800px; +// width: 100%; +// margin: 0 auto; + diff --git a/less/home-page.less b/less/home-page.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..0384533ef5 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,16 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ +/* Your Code Goes Here */ -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; -} +// Variables and Mixins +@import 'variables.less'; +@import 'mixins.less'; -table{ - border-collapse:collapse; - border-spacing:0; -} +// Reset and Global Styles +@import 'reset.less'; +@import 'global.less'; -/* Your Code Goes Here */ \ No newline at end of file +// Reusable components +@import 'navigation.less'; +@import 'footer.less'; + +// Page Specific +@import 'home-page.less'; diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000000..83a4d32775 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,58 @@ +/*------------------------------------*\ +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; +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..a7076da8d1 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,14 @@ +// Font family can be found here: https://fonts.google.com/specimen/Roboto + +// Color assignments +@footer-bg: @grey; +@recent-projects-gray-square: @gainsboro; +@button-borders: @nero; + +// Colors +@WHITE: #FFF; +@white: #FFFFFF; +@gainsboro: #D8D8D8; +@grey: #828282; +@nero: #222222; +@blueish: #5E9FB9; \ No newline at end of file From 400b15237bc05150c31f357467e72b6afcac0c28 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 15:41:29 -0600 Subject: [PATCH 07/83] made general font styles on global.less and made images width adjustable --- css/index.css | 9 +++++++++ less/global.less | 20 ++++++++++---------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/css/index.css b/css/index.css index dc1249cc0b..be60dd4f33 100644 --- a/css/index.css +++ b/css/index.css @@ -146,3 +146,12 @@ body { color: #222222; background: #FFFFFF; } +p { + line-height: 24px; + font-weight: regular; + font-size: 16px; +} +img { + max-width: 100%; + height: auto; +} diff --git a/less/global.less b/less/global.less index 2e89ddd9df..de15ef40e0 100644 --- a/less/global.less +++ b/less/global.less @@ -31,16 +31,16 @@ // padding-bottom: 10px; // } -// p { -// line-height: 1.5; -// font-size: 1.6rem; -// padding-bottom: 10px; -// } - -// img { -// max-width: 100%; -// height: auto; -// } + p { + line-height: 24px; + font-weight: regular; + font-size: 16px; + } + + img { + max-width: 100%; + height: auto; + } // .container { // max-width: 800px; From 98202c2bdb8c69f6babe0365b7fb889627a0ba53 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 16:05:02 -0600 Subject: [PATCH 08/83] working on home-page.less and getting content to move for architects --- css/index.css | 19 ++++++++++++++++--- index.html | 2 +- less/global.less | 16 +++++++++------- less/home-page.less | 13 +++++++++++++ 4 files changed, 39 insertions(+), 11 deletions(-) diff --git a/css/index.css b/css/index.css index be60dd4f33..b3667f75bf 100644 --- a/css/index.css +++ b/css/index.css @@ -146,12 +146,25 @@ body { color: #222222; background: #FFFFFF; } +img { + max-width: 100%; + height: auto; +} +h1 { + font-size: 55px; +} p { line-height: 24px; font-weight: regular; font-size: 16px; } -img { - max-width: 100%; - height: auto; +.content-top { + margin: 30px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.content-top .text-content { + width: 48%; + padding-right: 1%; } diff --git a/index.html b/index.html index aad4bd806f..4b0219f8b0 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-

S&J

+
S&J
-
+
photo

Integrity,
@@ -58,21 +58,21 @@

Futuristic Designs

Recent Projects

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.

+

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

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.

+

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.

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.

+

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


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

diff --git a/less/home-page.less b/less/home-page.less index 711ffcb602..2db1bdfc55 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -83,9 +83,25 @@ } .main-content-section { - width: 75%; + width: 85%; margin: 0 auto 30px; + h2 { + font-size: 24px; + color: @nero; + font-weight: bold; + padding-top: 3%; + padding-bottom: 3%; + } + + p { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + + } From 50e6ec895cf58258fe860b94f0e2fd85bfd344c4 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 17:56:39 -0600 Subject: [PATCH 15/83] changed view designs button to say view designs --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 195fd7aa1a..21be0388f8 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

Smith & Jones Architects

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

-
Learn More
+
View Designs
From 07a6420b6e303373fc880179efe3d470194f14d9 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 18:54:17 -0600 Subject: [PATCH 16/83] added color to footer --- css/index.css | 10 ++++++++++ less/footer.less | 21 ++++++++++----------- less/home-page.less | 2 ++ 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/css/index.css b/css/index.css index 0662ec9879..80af06d81f 100644 --- a/css/index.css +++ b/css/index.css @@ -158,6 +158,16 @@ p { font-weight: regular; font-size: 16px; } +.footer { + width: 100%; + background: #828282; +} +.footer p { + text-align: center; + color: #FFFFFF; + font-size: 1.6rem; + padding: 20px; +} .content-top { margin: 30px 0; padding-left: 8%; diff --git a/less/footer.less b/less/footer.less index e0b92a51c0..21e1adcd9f 100644 --- a/less/footer.less +++ b/less/footer.less @@ -1,12 +1,11 @@ -// .footer { -// width: 100%; -// border-top: 2px dashed @silver; -// background: @sandy-beach; +.footer { + width: 100%; + background: @grey; -// p { -// text-align: center; -// color: @font-color; -// font-size: 1.6rem; -// padding: 20px; -// } -// } \ No newline at end of file + p { + text-align: center; + color: @white; + font-size: 1.6rem; + padding: 20px; + } + } \ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less index 2db1bdfc55..5d05f99441 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,5 +1,6 @@ + .content-top { margin: 30px 0; padding-left: 8%; @@ -93,6 +94,7 @@ padding-top: 3%; padding-bottom: 3%; } + p { display: flex; From 88d7f3ea881ad619ac7bdb824867d70d999af6e6 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 18:59:25 -0600 Subject: [PATCH 17/83] edited copyright font --- css/index.css | 6 ++++-- less/footer.less | 7 +++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 80af06d81f..3e9afb236f 100644 --- a/css/index.css +++ b/css/index.css @@ -162,12 +162,14 @@ p { width: 100%; background: #828282; } -.footer p { +.footer .copyright { text-align: center; color: #FFFFFF; - font-size: 1.6rem; padding: 20px; } +.footer .copyright p { + font-size: 10px; +} .content-top { margin: 30px 0; padding-left: 8%; diff --git a/less/footer.less b/less/footer.less index 21e1adcd9f..ec19426d3b 100644 --- a/less/footer.less +++ b/less/footer.less @@ -2,10 +2,13 @@ width: 100%; background: @grey; - p { + .copyright { text-align: center; color: @white; - font-size: 1.6rem; padding: 20px; + + p { + font-size: 10px; + } } } \ No newline at end of file From f5ad98e494f7e983a59d01948bb7ae73d643a33f Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 19:01:51 -0600 Subject: [PATCH 18/83] changed all font to white in footer --- css/index.css | 6 ++++++ less/footer.less | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/css/index.css b/css/index.css index 3e9afb236f..d55844b0e6 100644 --- a/css/index.css +++ b/css/index.css @@ -162,6 +162,12 @@ p { width: 100%; background: #828282; } +.footer h4 { + color: #FFFFFF; +} +.footer p { + color: #FFFFFF; +} .footer .copyright { text-align: center; color: #FFFFFF; diff --git a/less/footer.less b/less/footer.less index ec19426d3b..4b8889e3f7 100644 --- a/less/footer.less +++ b/less/footer.less @@ -1,6 +1,14 @@ .footer { width: 100%; background: @grey; + + h4 { + color: @white; + } + + p { + color: @white; + } .copyright { text-align: center; From 5d6f04de1724668c846586d7b83cc6ff715f3b11 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 19:31:36 -0600 Subject: [PATCH 19/83] edited font overlapping photo in header --- css/index.css | 17 +++++++++++++++-- index.html | 6 ++---- less/footer.less | 17 ++++++++++++----- less/home-page.less | 10 ++++++++-- 4 files changed, 37 insertions(+), 13 deletions(-) diff --git a/css/index.css b/css/index.css index d55844b0e6..519ded85e6 100644 --- a/css/index.css +++ b/css/index.css @@ -162,10 +162,15 @@ p { width: 100%; background: #828282; } -.footer h4 { +.footer .email { + display: flex; +} +.footer .email h4 { color: #FFFFFF; + font-weight: bold; + font-size: 18px; } -.footer p { +.footer .email p { color: #FFFFFF; } .footer .copyright { @@ -176,6 +181,14 @@ p { .footer .copyright p { font-size: 10px; } +.bottom-left { + position: absolute; + bottom: 8px; + left: 16px; + font-size: 75px; + font-weight: bold; + color: #FFFFFF; +} .content-top { margin: 30px 0; padding-left: 8%; diff --git a/index.html b/index.html index 21be0388f8..7ce5715527 100644 --- a/index.html +++ b/index.html @@ -27,9 +27,9 @@
photo -

Integrity,
+
Integrity,
Excellence,
- Progress.

+ Progress.
@@ -87,8 +87,6 @@

Interested in starting a project?

We'll never share your email with anyone else.

-
-

New York

123 Lane

diff --git a/less/footer.less b/less/footer.less index 4b8889e3f7..a8eec2254b 100644 --- a/less/footer.less +++ b/less/footer.less @@ -2,12 +2,19 @@ width: 100%; background: @grey; - h4 { - color: @white; - } + .email { + display: flex; + + + h4 { + color: @white; + font-weight: bold; + font-size: 18px; + } - p { - color: @white; + p { + color: @white; + } } .copyright { diff --git a/less/home-page.less b/less/home-page.less index 5d05f99441..1f45fe9c90 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,5 +1,12 @@ - +.bottom-left { + position: absolute; + bottom: 8px; + left: 16px; + font-size: 75px; + font-weight: bold; + color: @white; + } .content-top { margin: 30px 0; @@ -103,7 +110,6 @@ } - } From 7771d833206b65490ca33edcec65b1d1ab1a5d46 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Mon, 17 Dec 2018 20:38:46 -0600 Subject: [PATCH 20/83] made changes to footer --- css/index.css | 27 ++++++++++++++++++++------ index.html | 8 ++++++-- less/footer.less | 47 ++++++++++++++++++++++++++++++++++++--------- less/home-page.less | 14 ++++++++++++++ 4 files changed, 79 insertions(+), 17 deletions(-) diff --git a/css/index.css b/css/index.css index 519ded85e6..00dbe1825a 100644 --- a/css/index.css +++ b/css/index.css @@ -162,16 +162,19 @@ p { width: 100%; background: #828282; } -.footer .email { +.footer .footerBottom { display: flex; -} -.footer .email h4 { + justify-content: space-evenly; color: #FFFFFF; - font-weight: bold; + padding-top: 4%; +} +.footer .footerBottom .states h4 { font-size: 18px; + font-weight: bold; + padding-bottom: 4%; } -.footer .email p { - color: #FFFFFF; +.footer .footerBottom .states p { + font-size: 12px; } .footer .copyright { text-align: center; @@ -188,6 +191,8 @@ p { font-size: 75px; font-weight: bold; color: #FFFFFF; + padding-bottom: 4%; + padding-left: 4%; } .content-top { margin: 30px 0; @@ -261,6 +266,16 @@ p { width: 85%; margin: 0 auto 30px; } +.main-content-section .villa { + position: absolute; + bottom: 8px; + left: 16px; + font-size: 25px; + font-weight: bold; + color: #FFFFFF; + padding-bottom: 4%; + padding-left: 4%; +} .main-content-section h2 { font-size: 24px; color: #222222; diff --git a/index.html b/index.html index 7ce5715527..90c33acc9f 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@

Futuristic Designs

Recent Projects

villas -

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.

@@ -80,7 +80,9 @@

THE BLOCKS

- +
+ \ No newline at end of file diff --git a/index.html b/index.html index 90c33acc9f..7ba7ec777d 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ -
+
photo
Integrity,
From d51fb1ad9418a1225c354527ee4e15780f38200f Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 09:57:35 -0600 Subject: [PATCH 23/83] added footer to services page --- services.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/services.html b/services.html index fb5a79e18a..678cd1e215 100644 --- a/services.html +++ b/services.html @@ -33,6 +33,50 @@

Services

--> +
+ +
+ +
+

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 f252722e5df165d14ef66ad2acc44a13d2307ee2 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 10:09:25 -0600 Subject: [PATCH 24/83] added image to services page --- services.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/services.html b/services.html index 678cd1e215..bda5fbf638 100644 --- a/services.html +++ b/services.html @@ -12,7 +12,23 @@ -

Services

+
+
+
S&J
+ +
+
+ + +
+
+ photo1 +
Services
+
diff --git a/less/home-page.less b/less/home-page.less index 0b6460a21a..1917334804 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -131,6 +131,8 @@ justify-content: center; padding-left: 200px; padding-right: 200px; + padding-top: 60px; + padding-bottom: 60px; } From 123588709e00bf503c6fe8e27c9e440dc300ffc0 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 11:57:03 -0600 Subject: [PATCH 27/83] cleaning up a few things commit no big changes --- css/index.css | 28 +++++++++++-------- index.html | 8 ++++-- less/home-page.less | 67 ++++++++++++++++++++++++++------------------- less/service.less | 0 4 files changed, 61 insertions(+), 42 deletions(-) create mode 100644 less/service.less diff --git a/css/index.css b/css/index.css index 1d8ac04db9..90abf7f8ff 100644 --- a/css/index.css +++ b/css/index.css @@ -184,10 +184,13 @@ p { .footer .copyright p { font-size: 10px; } -.header { - width: 100%; +.container-home .header { + position: relative; + width: 1100px; margin-top: 0; margin-bottom: 0; + margin-left: auto; + margin-right: auto; display: flex; justify-content: space-evenly; } @@ -273,16 +276,6 @@ p { width: 75%; margin: auto; } -.main-content-section .villa { - position: absolute; - bottom: 8px; - left: 16px; - font-size: 25px; - font-weight: bold; - color: #FFFFFF; - padding-bottom: 4%; - padding-left: 4%; -} .main-content-section h2 { font-size: 24px; color: #222222; @@ -299,3 +292,14 @@ p { padding-top: 60px; padding-bottom: 60px; } +.main-content-section .image { + position: relative; + width: 100%; +} +.main-content-section .image h3 span { + color: #FFFFFF; + position: absolute; + top: 100px; + left: 0; + width: 100%; +} diff --git a/index.html b/index.html index 808d855cec..e4b63ce5a7 100644 --- a/index.html +++ b/index.html @@ -56,8 +56,12 @@

Futuristic Designs

Recent Projects

- villas -

THE VILLAS

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

diff --git a/less/home-page.less b/less/home-page.less index 1917334804..6bcfb7c71a 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,12 +1,24 @@ -.header { - width: 100%; - margin-top: 0; - margin-bottom: 0; - display: flex; - justify-content: space-evenly; +.container-home { + + .header { + position: relative; + width: 1100px; + margin-top: 0; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: space-evenly; + + } + + + } + + .bottom-left { position: absolute; bottom: 8px; @@ -104,18 +116,6 @@ width: 75%; margin: auto; - .villa { - position: absolute; - bottom: 8px; - left: 16px; - font-size: 25px; - font-weight: bold; - color: @white; - padding-bottom: 4%; - padding-left: 4%; - - } - h2 { font-size: 24px; color: @nero; @@ -123,20 +123,31 @@ padding-top: 3%; padding-bottom: 3%; } - p { - display: flex; - flex-wrap: wrap; - justify-content: center; - padding-left: 200px; - padding-right: 200px; - padding-top: 60px; - padding-bottom: 60px; - } + display: flex; + flex-wrap: wrap; + justify-content: center; + padding-left: 200px; + padding-right: 200px; + padding-top: 60px; + padding-bottom: 60px; + } - } + .image { + position: relative; + width: 100%; + + h3 span { + color: @white; + position: absolute; + top: 100px; + left: 0; + width: 100%; + } + } +} diff --git a/less/service.less b/less/service.less new file mode 100644 index 0000000000..e69de29bb2 From 22e7d43eb17f898ec16e09e232a8ae8a743efe67 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 12:25:21 -0600 Subject: [PATCH 28/83] updated footer with style guide details --- css/index.css | 11 ++++++++--- less/footer.less | 34 ++++++++++------------------------ 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/css/index.css b/css/index.css index 90abf7f8ff..fd5e8a9c48 100644 --- a/css/index.css +++ b/css/index.css @@ -169,12 +169,17 @@ p { padding-top: 4%; } .footer .footerBottom .states h4 { - font-size: 18px; - font-weight: bold; + font-size: 20px; + font-weight: regular; + line-height: 24px; + color: #FFFFFF; padding-bottom: 4%; } .footer .footerBottom .states p { - font-size: 12px; + font-size: 14px; + font-weight: regular; + line-height: 26px; + color: #FFFFFF; } .footer .copyright { text-align: center; diff --git a/less/footer.less b/less/footer.less index b69b07092d..f98eca2508 100644 --- a/less/footer.less +++ b/less/footer.less @@ -11,24 +11,27 @@ .states { h4 { - font-size: 18px; - font-weight: bold; + font-size: 20px; + font-weight: regular; + line-height: 24px; + color: @white; padding-bottom: 4%; } p { - font-size: 12px; + font-size: 14px; + font-weight: regular; + line-height: 26px; + color: @white; + } } - } - - .copyright { text-align: center; color: @white; @@ -38,21 +41,4 @@ font-size: 10px; } } - } - - - - // .email { - // display: flex; - - - // h4 { - // color: @white; - // font-weight: bold; - // font-size: 18px; - // } - - // p { - // color: @white; - // } - // } \ No newline at end of file + } \ No newline at end of file From e6c2139e238d287795ea54373af8f78cd6896480 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 12:29:52 -0600 Subject: [PATCH 29/83] writing html for services page --- services.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/services.html b/services.html index bda5fbf638..5f391a2add 100644 --- a/services.html +++ b/services.html @@ -30,6 +30,13 @@
Services
+
+
+
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.
+
+
+ + +
+
+
S&J
+
+ Home + Service + Conact +
+
+ +
@@ -58,7 +70,7 @@

Futuristic Designs

Recent Projects

villas -

THE VILLAS

+

THE VILLAS

diff --git a/less/home-page.less b/less/home-page.less index 00df2255b8..6bb8a32262 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -7,6 +7,7 @@ margin-bottom: 0; margin-left: auto; margin-right: auto; + padding-top: 40px; display: flex; justify-content: space-evenly; @@ -61,6 +62,7 @@ padding-bottom: 4%; margin-top: 5%; width: 150px; + cursor: pointer; } .btn:hover { @@ -103,6 +105,7 @@ padding-bottom: 4%; margin-top: 5%; width: 150px; + cursor: pointer; } .btn:hover { diff --git a/less/navigation.less b/less/navigation.less index e69de29bb2..c5f4ad5ccb 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -0,0 +1,44 @@ + +.dropdown { + z-index: 2; + position: absolute; + left: 25px; + background-color: @grey; + cursor: pointer; + + .dropdown-button { + padding: 15px; + border: 3px solid @white; + color: @white; + font-size: 20px; + font-weight: bold; + &:hover { + background-color: black; + } + } + .dropdown-content { + width: 100%; + position: absolute; + background-color: @white; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; + border: 2.5px solid red; + } + .dropdown-link { + width: 100%; + text-align: center; + padding: 15px 0; + font-size: 18px; + text-decoration: none; + color: black; + &:hover { + color: @white; + background-color: red; + } + } + .dropdown-hidden { + display: none; + } + } \ No newline at end of file diff --git a/less/service.less b/less/service.less index f01976de24..ed0dca7f47 100644 --- a/less/service.less +++ b/less/service.less @@ -1,3 +1,28 @@ + +.section { + width: 70%; + margin: 45px auto; + display: flex; + overflow: hidden; + font-size: 16px; + line-height: 24px; + font-weight: regular; + display: flex; + justify-content: center; + align-items: center; + + .box { + padding: 40px; + } + + .box-title { + font-size: 24px; + padding-bottom: 10px; + font-weight: bold; + } + +} + .tabs { width: 100%; @@ -53,26 +78,3 @@ } } } - - - -.section { - width: 70%; - margin: 45px auto; - display: flex; - overflow: hidden; - font-size: 16px; - line-height: 24px; - font-weight: regular; - - .box { - padding: 40px; - } - - .box-title { - font-size: 24px; - padding-bottom: 10px; - font-weight: bold; - } - -} \ No newline at end of file diff --git a/services.html b/services.html index 042a0d78f9..e9dc3d55ab 100644 --- a/services.html +++ b/services.html @@ -12,7 +12,7 @@ -
+ + + +
+
+
S&J
+
+ Home + Service + Conact +
+
+ +
From 395614e594f47e64340700e650c44b8cf8d1eeca Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 14:13:10 -0600 Subject: [PATCH 37/83] editing villas on home page --- css/index.css | 9 +++++++++ index.html | 9 +++++---- less/home-page.less | 11 +++++++++++ 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index c7cf4576c7..4a8d3286fc 100644 --- a/css/index.css +++ b/css/index.css @@ -244,6 +244,15 @@ p { display: flex; justify-content: space-evenly; } +.bottom-left1 { + bottom: 8px; + left: 16px; + font-size: 35px; + font-weight: bold; + color: black; + padding-bottom: 4%; + padding-left: 4%; +} .bottom-left { position: absolute; bottom: 8px; diff --git a/index.html b/index.html index 2266415ab2..bf1118dda2 100644 --- a/index.html +++ b/index.html @@ -68,12 +68,13 @@

Futuristic Designs

Recent Projects

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

diff --git a/less/home-page.less b/less/home-page.less index 6bb8a32262..d3b38527ca 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -17,6 +17,17 @@ } +.bottom-left1 { + // position: absolute; + bottom: 8px; + left: 16px; + font-size: 35px; + font-weight: bold; + color: black; + padding-bottom: 4%; + padding-left: 4%; + } + From 5280e81c4d7ff22a049aac14085fe51bf0020b65 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 15:03:59 -0600 Subject: [PATCH 38/83] made some changes to nav bar --- css/index.css | 7 +++++-- index.html | 3 ++- less/home-page.less | 6 +++++- less/service.less | 4 +++- services.html | 4 +++- 5 files changed, 18 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 4a8d3286fc..b97fddee19 100644 --- a/css/index.css +++ b/css/index.css @@ -249,9 +249,13 @@ p { left: 16px; font-size: 35px; font-weight: bold; - color: black; + color: #FFFFFF; + text-align: center; padding-bottom: 4%; padding-left: 4%; + border: 1px solid #D8D8D8; + background-color: #D8D8D8; + width: 250px; } .bottom-left { position: absolute; @@ -390,7 +394,6 @@ p { width: 100%; height: 300px; display: flex; - justify-content: center; padding-top: 60px; } .tabs .tabs-item { diff --git a/index.html b/index.html index bf1118dda2..a3a4e3f91b 100644 --- a/index.html +++ b/index.html @@ -26,13 +26,14 @@
S&J
+
Home Service Conact
- +
diff --git a/less/home-page.less b/less/home-page.less index d3b38527ca..4044c1e773 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -23,9 +23,13 @@ left: 16px; font-size: 35px; font-weight: bold; - color: black; + color: @white; + text-align: center; padding-bottom: 4%; padding-left: 4%; + border: 1px solid @gainsboro; + background-color: @gainsboro; + width: 250px; } diff --git a/less/service.less b/less/service.less index ed0dca7f47..e1f30d2572 100644 --- a/less/service.less +++ b/less/service.less @@ -25,12 +25,14 @@ .tabs { width: 100%; + // display: flex; + .tabs-items { width: 100%; height: 300px; display: flex; - justify-content: center; + // justify-content: center; padding-top: 60px; } diff --git a/services.html b/services.html index e9dc3d55ab..b7fbbe6cad 100644 --- a/services.html +++ b/services.html @@ -27,13 +27,15 @@
S&J
+ +
Home Service Conact
- +
From d9b7e63d9aa9fae55d69a1ff894183bed75375db Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 15:25:16 -0600 Subject: [PATCH 39/83] saving before lunch --- less/service.less | 1 - 1 file changed, 1 deletion(-) diff --git a/less/service.less b/less/service.less index e1f30d2572..5be475b9fd 100644 --- a/less/service.less +++ b/less/service.less @@ -20,7 +20,6 @@ padding-bottom: 10px; font-weight: bold; } - } .tabs { From 236224078a65b9457a11204cef9d9b39697da730 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 16:58:55 -0600 Subject: [PATCH 40/83] editing services page --- less/service.less | 1 + 1 file changed, 1 insertion(+) diff --git a/less/service.less b/less/service.less index 5be475b9fd..83b03f79d6 100644 --- a/less/service.less +++ b/less/service.less @@ -19,6 +19,7 @@ font-size: 24px; padding-bottom: 10px; font-weight: bold; + } } From 6139ac51a3d4b9628d382d5e8b9883db24c18eb1 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 17:52:23 -0600 Subject: [PATCH 41/83] commit before standup --- css/index.css | 20 ++++---------------- index.html | 2 +- less/home-page.less | 31 +++++++++++++++---------------- less/navigation.less | 6 ++++-- 4 files changed, 24 insertions(+), 35 deletions(-) diff --git a/css/index.css b/css/index.css index b97fddee19..9b41b9e6e0 100644 --- a/css/index.css +++ b/css/index.css @@ -161,10 +161,12 @@ p { font-size: 16px; } .dropdown { - z-index: 2; + z-index: 6; position: absolute; left: 25px; background-color: #828282; + height: 35px; + width: 100%; cursor: pointer; } .dropdown .dropdown-button { @@ -236,27 +238,13 @@ p { .container-home .header { position: relative; width: 1100px; - margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; - padding-top: 40px; + padding-top: 60px; display: flex; justify-content: space-evenly; } -.bottom-left1 { - bottom: 8px; - left: 16px; - font-size: 35px; - font-weight: bold; - color: #FFFFFF; - text-align: center; - padding-bottom: 4%; - padding-left: 4%; - border: 1px solid #D8D8D8; - background-color: #D8D8D8; - width: 250px; -} .bottom-left { position: absolute; bottom: 8px; diff --git a/index.html b/index.html index a3a4e3f91b..d7a672eb6b 100644 --- a/index.html +++ b/index.html @@ -74,7 +74,7 @@

Recent Projects

THE VILLAS

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

diff --git a/less/home-page.less b/less/home-page.less index 4044c1e773..3c08a73233 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -3,11 +3,10 @@ .header { position: relative; width: 1100px; - margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; - padding-top: 40px; + padding-top: 60px; display: flex; justify-content: space-evenly; @@ -17,20 +16,20 @@ } -.bottom-left1 { - // position: absolute; - bottom: 8px; - left: 16px; - font-size: 35px; - font-weight: bold; - color: @white; - text-align: center; - padding-bottom: 4%; - padding-left: 4%; - border: 1px solid @gainsboro; - background-color: @gainsboro; - width: 250px; - } +// .bottom-right { +// position: absolute; +// bottom: 8px; +// right: 16px; + // font-size: 35px; + // font-weight: bold; + // color: @white; + // text-align: center; + // padding-bottom: 4%; + // padding-left: 4%; + // border: 1px solid @gainsboro; + // background-color: @gainsboro; + // width: 250px; +// } diff --git a/less/navigation.less b/less/navigation.less index c5f4ad5ccb..bc978ecd8b 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,14 +1,16 @@ .dropdown { - z-index: 2; + z-index: 6; position: absolute; left: 25px; background-color: @grey; + height: 35px; + width: 100%; cursor: pointer; .dropdown-button { padding: 15px; - border: 3px solid @white; + // border: 3px solid @white; color: @white; font-size: 20px; font-weight: bold; From 813fe334344a19ccebbacd12a0df4ee4896aafb7 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Tue, 18 Dec 2018 20:12:32 -0600 Subject: [PATCH 42/83] spelled relative wrong for grey boxes on home page --- css/index.css | 31 ++++++++++++++++++++++--------- index.html | 11 ++++------- less/home-page.less | 34 ++++++++++++++++++++++++---------- 3 files changed, 50 insertions(+), 26 deletions(-) diff --git a/css/index.css b/css/index.css index 9b41b9e6e0..767e4175cf 100644 --- a/css/index.css +++ b/css/index.css @@ -171,7 +171,6 @@ p { } .dropdown .dropdown-button { padding: 15px; - border: 3px solid #FFFFFF; color: #FFFFFF; font-size: 20px; font-weight: bold; @@ -345,16 +344,30 @@ p { padding-top: 60px; padding-bottom: 60px; } -.main-content-section .image { +.main-content-section h3 { position: relative; - width: 100%; + bottom: 45px; + background-color: #D8D8D8; + height: 90px; + width: 35%; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + letter-spacing: 7px; } -.main-content-section .image h3 span { - color: #FFFFFF; - position: absolute; - top: 100px; - left: 0; - width: 100%; +.main-content-section h5 { + position: relative; + bottom: 45px; + left: 542px; + background-color: #D8D8D8; + height: 90px; + width: 35%; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + letter-spacing: 7px; } .section { width: 70%; diff --git a/index.html b/index.html index d7a672eb6b..be46599885 100644 --- a/index.html +++ b/index.html @@ -69,16 +69,13 @@

Futuristic Designs

Recent Projects

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

+
@@ -91,7 +88,7 @@

OUTSKIRTS

blocks -

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.

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

diff --git a/less/home-page.less b/less/home-page.less index 3c08a73233..5663ea5034 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -152,16 +152,30 @@ } - .image { + h3 { position: relative; - width: 100%; - - h3 span { - color: @white; - position: absolute; - top: 100px; - left: 0; - width: 100%; - } + bottom: 45px; + background-color: @gainsboro; + height: 90px; + width: 35%; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + letter-spacing: 7px; + } + + h5 { + position: relative; + bottom: 45px; + left: 542px; + background-color: @gainsboro; + height: 90px; + width: 35%; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + letter-spacing: 7px; } } From 11e2740d2f89e5eb44979db607a4e55c0cdfc41d Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 10:02:07 -0600 Subject: [PATCH 43/83] made some organization changes to homepage css --- css/index.css | 5 ++++- less/home-page.less | 28 +++++++++++----------------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/css/index.css b/css/index.css index 767e4175cf..50bbdf3d59 100644 --- a/css/index.css +++ b/css/index.css @@ -244,6 +244,9 @@ p { display: flex; justify-content: space-evenly; } +.container-home .header img { + width: 100%; +} .bottom-left { position: absolute; bottom: 8px; @@ -341,7 +344,7 @@ p { justify-content: center; padding-left: 200px; padding-right: 200px; - padding-top: 60px; + padding-top: 30px; padding-bottom: 60px; } .main-content-section h3 { diff --git a/less/home-page.less b/less/home-page.less index 5663ea5034..26c6f776c3 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -10,27 +10,16 @@ display: flex; justify-content: space-evenly; + img { + width: 100%; + } + } } -// .bottom-right { -// position: absolute; -// bottom: 8px; -// right: 16px; - // font-size: 35px; - // font-weight: bold; - // color: @white; - // text-align: center; - // padding-bottom: 4%; - // padding-left: 4%; - // border: 1px solid @gainsboro; - // background-color: @gainsboro; - // width: 250px; -// } - @@ -43,7 +32,9 @@ color: @white; padding-bottom: 4%; padding-left: 4%; - } +} + +//========================= TOP-CONTENT .content-top { margin: 50px 0; @@ -86,6 +77,7 @@ } +//============================== DESIGN-CONTENT-SECTION .designs-content-section { margin: 30px 0; @@ -129,6 +121,8 @@ } +//========================= MAIN-CONTENT-SECTION + .main-content-section { width: 75%; margin: auto; @@ -147,7 +141,7 @@ justify-content: center; padding-left: 200px; padding-right: 200px; - padding-top: 60px; + padding-top: 30px; padding-bottom: 60px; } From cc085864dc8b3b3d34ddb0caed88b4055400e27a Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 10:04:52 -0600 Subject: [PATCH 44/83] got tabs on service page the right direction --- css/index.css | 7 +++++-- less/service.less | 8 +++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/css/index.css b/css/index.css index 50bbdf3d59..8d1eea2528 100644 --- a/css/index.css +++ b/css/index.css @@ -380,8 +380,8 @@ p { line-height: 24px; font-weight: regular; display: flex; - justify-content: center; - align-items: center; + flex-wrap: wrap; + justify-content: space-between; } .section .box { padding: 40px; @@ -393,6 +393,9 @@ p { } .tabs { width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } .tabs .tabs-items { width: 100%; diff --git a/less/service.less b/less/service.less index 83b03f79d6..969048972c 100644 --- a/less/service.less +++ b/less/service.less @@ -8,8 +8,8 @@ line-height: 24px; font-weight: regular; display: flex; - justify-content: center; - align-items: center; + flex-wrap: wrap; + justify-content: space-between; .box { padding: 40px; @@ -25,7 +25,9 @@ .tabs { width: 100%; - // display: flex; + display: flex; + flex-wrap: wrap; + justify-content: space-between; .tabs-items { From 5a00006d9262cd43bf742b81f00a10b041c478c3 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 10:12:26 -0600 Subject: [PATCH 45/83] added images to service page --- services.html | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/services.html b/services.html index b7fbbe6cad..c74ce0bc56 100644 --- a/services.html +++ b/services.html @@ -62,6 +62,9 @@
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 +
@@ -69,13 +72,19 @@
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.
+
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 +
@@ -83,7 +92,10 @@
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 +
+
From 56819a61cd5dffa297cf9eebe25a985ab6ec831f Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 10:22:11 -0600 Subject: [PATCH 46/83] got the top images back to full screen on both pages --- css/index.css | 32 ++++++++----- less/home-page.less | 10 +++- less/service.less | 112 ++++++++++++++++++++++++-------------------- 3 files changed, 88 insertions(+), 66 deletions(-) diff --git a/css/index.css b/css/index.css index 8d1eea2528..a3c0e39dc5 100644 --- a/css/index.css +++ b/css/index.css @@ -234,9 +234,13 @@ p { .footer .copyright p { font-size: 10px; } +body { + box-sizing: border-box; + margin: 0; +} .container-home .header { position: relative; - width: 1100px; + width: 100%; margin-bottom: 0; margin-left: auto; margin-right: auto; @@ -391,35 +395,39 @@ p { padding-bottom: 10px; font-weight: bold; } -.tabs { +.section .tabs { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } -.tabs .tabs-items { +.section .tabs .tabs-items { width: 100%; height: 300px; display: flex; + flex-wrap: wrap; + justify-content: space-between; padding-top: 60px; } -.tabs .tabs-item { - display: none; +.section .tabs .tabs-item { width: 75%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } -.tabs .tabs-item .tabs-item.title { +.section .tabs .tabs-item .tabs-item.title { font-size: 24px; font-weight: bold; padding-bottom: 10px; } -.tabs .tabs-item-selected { +.section .tabs .tabs-item-selected { display: block; } -.tabs .tabs-links { +.section .tabs .tabs-links { display: flex; background-color: black; } -.tabs .tabs-link { +.section .tabs .tabs-link { padding: 20px 25px; font-size: 24px; background-color: #FFFFFF; @@ -427,17 +435,17 @@ p { color: black; cursor: pointer; } -.tabs .tabs-link:hover { +.section .tabs .tabs-link:hover { background-color: #222222; color: #FFF; } -.tabs .tabs-link-selected { +.section .tabs .tabs-link-selected { z-index: 2; border: 1px solid black; background-color: #5E9FB9; color: #FFFFFF; } -.tabs .tabs-link-selected:hover { +.section .tabs .tabs-link-selected:hover { background-color: #222222; color: #FFF; } diff --git a/less/home-page.less b/less/home-page.less index 26c6f776c3..f9a5905c10 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,8 +1,14 @@ +body { + box-sizing: border-box; + margin: 0; +} + .container-home { .header { position: relative; - width: 1100px; + // width: 1100px; + width: 100%; margin-bottom: 0; margin-left: auto; margin-right: auto; @@ -34,7 +40,7 @@ padding-left: 4%; } -//========================= TOP-CONTENT +//============================= TOP-CONTENT .content-top { margin: 50px 0; diff --git a/less/service.less b/less/service.less index 969048972c..481f0c77aa 100644 --- a/less/service.less +++ b/less/service.less @@ -21,64 +21,72 @@ font-weight: bold; } -} - -.tabs { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - .tabs-items { + .tabs { width: 100%; - height: 300px; display: flex; - // justify-content: center; - padding-top: 60px; - } - - .tabs-item { - display: none; - width: 75%; - - .tabs-item.title { - font-size: 24px; - font-weight: bold; - padding-bottom: 10px; + flex-wrap: wrap; + justify-content: space-between; + + + .tabs-items { + width: 100%; + height: 300px; + display: flex; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding-top: 60px; } - } - - .tabs-item-selected { - display: block; - } - - .tabs-links { - display: flex; - background-color: black; - } - - .tabs-link { - padding: 20px 25px; - font-size: 24px; - background-color: @white; - border: 1px solid black; - color: black; - cursor: pointer; - &:hover { - background-color: @nero; - color: @WHITE; + + .tabs-item { + // display: none; + width: 75%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .tabs-item.title { + font-size: 24px; + font-weight: bold; + padding-bottom: 10px; + } } - } - - .tabs-link-selected { - z-index: 2; - border: 1px solid black; - background-color: @blueish; - color: @white; - &:hover { - background-color: @nero; - color: @WHITE; + + .tabs-item-selected { + display: block; + } + + .tabs-links { + display: flex; + background-color: black; + } + + .tabs-link { + padding: 20px 25px; + font-size: 24px; + background-color: @white; + border: 1px solid black; + color: black; + cursor: pointer; + &:hover { + background-color: @nero; + color: @WHITE; + } + } + + .tabs-link-selected { + z-index: 2; + border: 1px solid black; + background-color: @blueish; + color: @white; + &:hover { + background-color: @nero; + color: @WHITE; + } } } + } + From 9903a74057234adcda76f02dd1816ea5ef6f5c30 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 10:44:20 -0600 Subject: [PATCH 47/83] changes made to top section of service page and then changed back --- less/home-page.less | 6 +++--- less/service.less | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/less/home-page.less b/less/home-page.less index f9a5905c10..3cd3b54da3 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -3,11 +3,13 @@ body { margin: 0; } + +//========================= HEADER + .container-home { .header { position: relative; - // width: 1100px; width: 100%; margin-bottom: 0; margin-left: auto; @@ -22,8 +24,6 @@ body { } - - } diff --git a/less/service.less b/less/service.less index 481f0c77aa..53b9b37b15 100644 --- a/less/service.less +++ b/less/service.less @@ -1,8 +1,10 @@ + +//=================== SECTION + .section { width: 70%; margin: 45px auto; - display: flex; overflow: hidden; font-size: 16px; line-height: 24px; @@ -34,7 +36,6 @@ width: 100%; height: 300px; display: flex; - display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 60px; From d83bc3ca45347476579a4ba3b45ccfdd06a05359 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 10:55:02 -0600 Subject: [PATCH 48/83] editing css on services page --- css/index.css | 50 +--------------- less/service.less | 147 ++++++++++++++++++++++++++-------------------- 2 files changed, 86 insertions(+), 111 deletions(-) diff --git a/css/index.css b/css/index.css index a3c0e39dc5..3a7c627c79 100644 --- a/css/index.css +++ b/css/index.css @@ -395,57 +395,13 @@ body { padding-bottom: 10px; font-weight: bold; } -.section .tabs { +.tabs { width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-between; } -.section .tabs .tabs-items { +.tabs-items { width: 100%; height: 300px; display: flex; - flex-wrap: wrap; - justify-content: space-between; + justify-content: center; padding-top: 60px; } -.section .tabs .tabs-item { - width: 75%; - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -.section .tabs .tabs-item .tabs-item.title { - font-size: 24px; - font-weight: bold; - padding-bottom: 10px; -} -.section .tabs .tabs-item-selected { - display: block; -} -.section .tabs .tabs-links { - display: flex; - background-color: black; -} -.section .tabs .tabs-link { - padding: 20px 25px; - font-size: 24px; - background-color: #FFFFFF; - border: 1px solid black; - color: black; - cursor: pointer; -} -.section .tabs .tabs-link:hover { - background-color: #222222; - color: #FFF; -} -.section .tabs .tabs-link-selected { - z-index: 2; - border: 1px solid black; - background-color: #5E9FB9; - color: #FFFFFF; -} -.section .tabs .tabs-link-selected:hover { - background-color: #222222; - color: #FFF; -} diff --git a/less/service.less b/less/service.less index 53b9b37b15..e459c644a6 100644 --- a/less/service.less +++ b/less/service.less @@ -24,70 +24,89 @@ } +} - .tabs { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - - .tabs-items { - width: 100%; - height: 300px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding-top: 60px; - } - - .tabs-item { - // display: none; - width: 75%; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - .tabs-item.title { - font-size: 24px; - font-weight: bold; - padding-bottom: 10px; - } - } - - .tabs-item-selected { - display: block; - } - - .tabs-links { - display: flex; - background-color: black; - } - - .tabs-link { - padding: 20px 25px; - font-size: 24px; - background-color: @white; - border: 1px solid black; - color: black; - cursor: pointer; - &:hover { - background-color: @nero; - color: @WHITE; - } - } - - .tabs-link-selected { - z-index: 2; - border: 1px solid black; - background-color: @blueish; - color: @white; - &:hover { - background-color: @nero; - color: @WHITE; - } - } - } - + +.tabs { + + width: 100%; +} + +.tabs-items { + width: 100%; + height: 300px; + display: flex; + justify-content: center; + padding-top: 60px; } + + + + + + +// .tabs { +// width: 100%; +// display: flex; +// // flex-wrap: wrap; +// justify-content: space-between; + + +// .tabs-items { +// width: 100%; +// height: 300px; +// display: flex; +// // flex-wrap: wrap; +// justify-content: space-between; +// padding-top: 60px; +// } + +// .tabs-item { +// // display: none; +// width: 75%; +// display: flex; +// // flex-wrap: wrap; +// justify-content: space-between; + +// .tabs-item.title { +// font-size: 24px; +// font-weight: bold; +// padding-bottom: 10px; +// } +// } + +// .tabs-item-selected { +// display: block; +// } + +// .tabs-links { +// display: flex; +// background-color: black; +// } + +// .tabs-link { +// padding: 20px 25px; +// font-size: 24px; +// background-color: @white; +// border: 1px solid black; +// color: black; +// cursor: pointer; +// &:hover { +// background-color: @nero; +// color: @WHITE; +// } +// } + +// .tabs-link-selected { +// z-index: 2; +// border: 1px solid black; +// background-color: @blueish; +// color: @white; +// &:hover { +// background-color: @nero; +// color: @WHITE; +// } +// } +// } + From 296b155438371d7ad8be307e5008fb493a8640c0 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 11:13:02 -0600 Subject: [PATCH 49/83] editing font on service page --- css/index.css | 51 ++++++++++++- less/service.less | 179 +++++++++++++++++++++++++++++----------------- 2 files changed, 162 insertions(+), 68 deletions(-) diff --git a/css/index.css b/css/index.css index 3a7c627c79..e78e09e3ef 100644 --- a/css/index.css +++ b/css/index.css @@ -395,13 +395,60 @@ body { padding-bottom: 10px; font-weight: bold; } +.tab-item-title { + font-size: 20px; + font-weight: bold; + padding-top: 20px; + padding-bottom: 20px; +} .tabs { width: 100%; + display: flex; + justify-content: space-between; } -.tabs-items { +.tabs .tabs-items { width: 100%; height: 300px; display: flex; - justify-content: center; + justify-content: space-between; padding-top: 60px; } +.tabs .tabs-item { + width: 75%; + display: flex; + justify-content: space-between; +} +.tabs .tabs-item .tabs-item.title { + font-size: 24px; + font-weight: bold; + padding-bottom: 10px; +} +.tabs .tabs-item-selected { + display: block; +} +.tabs .tabs-links { + display: flex; + background-color: black; +} +.tabs .tabs-link { + padding: 20px 25px; + font-size: 24px; + background-color: #FFFFFF; + border: 1px solid black; + color: black; + cursor: pointer; +} +.tabs .tabs-link:hover { + background-color: #222222; + color: #FFF; +} +.tabs .tabs-link-selected { + z-index: 2; + border: 1px solid black; + background-color: #5E9FB9; + color: #FFFFFF; +} +.tabs .tabs-link-selected:hover { + background-color: #222222; + color: #FFF; +} diff --git a/less/service.less b/less/service.less index e459c644a6..0aacfcd003 100644 --- a/less/service.less +++ b/less/service.less @@ -27,86 +27,133 @@ } -.tabs { +// .tabs { - width: 100%; -} +// width: 100%; +// } -.tabs-items { - width: 100%; - height: 300px; - display: flex; - justify-content: center; - padding-top: 60px; -} +// .tabs-items { +// width: 100%; +// height: 300px; +// display: flex; +// justify-content: center; +// padding-top: 60px; +// } +// .tabs-item { +// // display: none; +// width: 75%; +// display: flex; +// justify-content: center; +// } + + +// .tabs-links { +// display: flex; +// justify-content: space-between; + +// } +// .tabs-link { +// padding: 20px 25px; +// font-size: 24px; +// background-color: @white; +// border: 1px solid black; +// color: black; +// cursor: pointer; +// &:hover { +// background-color: @nero; +// color: @WHITE; +// } +// } + +// .tabs-link-selected { +// z-index: 2; +// border: 1px solid black; +// background-color: @blueish; +// color: @white; +// &:hover { +// background-color: @nero; +// color: @WHITE; +// } +// } -// .tabs { -// width: 100%; -// display: flex; -// // flex-wrap: wrap; -// justify-content: space-between; + +.tab-item-title { + font-size: 20px; + font-weight: bold; + padding-top: 20px; + padding-bottom: 20px; +} -// .tabs-items { -// width: 100%; -// height: 300px; -// display: flex; -// // flex-wrap: wrap; -// justify-content: space-between; -// padding-top: 60px; -// } -// .tabs-item { -// // display: none; -// width: 75%; -// display: flex; -// // flex-wrap: wrap; -// justify-content: space-between; - -// .tabs-item.title { -// font-size: 24px; -// font-weight: bold; -// padding-bottom: 10px; -// } -// } -// .tabs-item-selected { -// display: block; -// } +.tabs { + width: 100%; + display: flex; + // flex-wrap: wrap; + justify-content: space-between; -// .tabs-links { -// display: flex; -// background-color: black; -// } -// .tabs-link { -// padding: 20px 25px; -// font-size: 24px; -// background-color: @white; -// border: 1px solid black; -// color: black; -// cursor: pointer; -// &:hover { -// background-color: @nero; -// color: @WHITE; -// } -// } + .tabs-items { + width: 100%; + height: 300px; + display: flex; + // flex-wrap: wrap; + justify-content: space-between; + padding-top: 60px; + } -// .tabs-link-selected { -// z-index: 2; -// border: 1px solid black; -// background-color: @blueish; -// color: @white; -// &:hover { -// background-color: @nero; -// color: @WHITE; -// } -// } -// } + .tabs-item { + // display: none; + width: 75%; + display: flex; + // flex-wrap: wrap; + justify-content: space-between; + + .tabs-item.title { + font-size: 24px; + font-weight: bold; + padding-bottom: 10px; + } + } + + .tabs-item-selected { + display: block; + } + + .tabs-links { + display: flex; + background-color: black; + } + + .tabs-link { + padding: 20px 25px; + font-size: 24px; + background-color: @white; + border: 1px solid black; + color: black; + cursor: pointer; + &:hover { + background-color: @nero; + color: @WHITE; + } + } + + .tabs-link-selected { + z-index: 2; + border: 1px solid black; + background-color: @blueish; + color: @white; + &:hover { + background-color: @nero; + color: @WHITE; + } + } +} From bdae8aa6bbf806384b06187656419984f9e1751d Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 12:37:16 -0600 Subject: [PATCH 50/83] named something the same and lost top images. got them back --- css/index.css | 62 +------------------- index.html | 24 -------- less/home-page.less | 3 +- less/navigation.less | 46 --------------- less/service.less | 136 ++++++++++++++++++------------------------- services.html | 48 +++++---------- 6 files changed, 74 insertions(+), 245 deletions(-) diff --git a/css/index.css b/css/index.css index e78e09e3ef..00ad0d788e 100644 --- a/css/index.css +++ b/css/index.css @@ -160,49 +160,6 @@ p { font-weight: regular; font-size: 16px; } -.dropdown { - z-index: 6; - position: absolute; - left: 25px; - background-color: #828282; - height: 35px; - width: 100%; - cursor: pointer; -} -.dropdown .dropdown-button { - padding: 15px; - color: #FFFFFF; - font-size: 20px; - font-weight: bold; -} -.dropdown .dropdown-button:hover { - background-color: black; -} -.dropdown .dropdown-content { - width: 100%; - position: absolute; - background-color: #FFFFFF; - display: flex; - flex-direction: column; - align-items: center; - margin-top: 10px; - border: 2.5px solid red; -} -.dropdown .dropdown-link { - width: 100%; - text-align: center; - padding: 15px 0; - font-size: 18px; - text-decoration: none; - color: black; -} -.dropdown .dropdown-link:hover { - color: #FFFFFF; - background-color: red; -} -.dropdown .dropdown-hidden { - display: none; -} .footer { width: 100%; background: #828282; @@ -405,31 +362,16 @@ body { width: 100%; display: flex; justify-content: space-between; + align-content: center; } .tabs .tabs-items { width: 100%; height: 300px; display: flex; + flex-direction: row; justify-content: space-between; padding-top: 60px; } -.tabs .tabs-item { - width: 75%; - display: flex; - justify-content: space-between; -} -.tabs .tabs-item .tabs-item.title { - font-size: 24px; - font-weight: bold; - padding-bottom: 10px; -} -.tabs .tabs-item-selected { - display: block; -} -.tabs .tabs-links { - display: flex; - background-color: black; -} .tabs .tabs-link { padding: 20px 25px; font-size: 24px; diff --git a/index.html b/index.html index be46599885..fdbaa46d36 100644 --- a/index.html +++ b/index.html @@ -12,30 +12,6 @@ - - -
-
-
S&J
- -
- Home - Service - Conact -
-
- -
-
diff --git a/less/home-page.less b/less/home-page.less index 3cd3b54da3..90e902deeb 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -26,8 +26,7 @@ body { } - - +//========================== BOTTOM-LEFT .bottom-left { position: absolute; diff --git a/less/navigation.less b/less/navigation.less index bc978ecd8b..e69de29bb2 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,46 +0,0 @@ - -.dropdown { - z-index: 6; - position: absolute; - left: 25px; - background-color: @grey; - height: 35px; - width: 100%; - cursor: pointer; - - .dropdown-button { - padding: 15px; - // border: 3px solid @white; - color: @white; - font-size: 20px; - font-weight: bold; - &:hover { - background-color: black; - } - } - .dropdown-content { - width: 100%; - position: absolute; - background-color: @white; - display: flex; - flex-direction: column; - align-items: center; - margin-top: 10px; - border: 2.5px solid red; - } - .dropdown-link { - width: 100%; - text-align: center; - padding: 15px 0; - font-size: 18px; - text-decoration: none; - color: black; - &:hover { - color: @white; - background-color: red; - } - } - .dropdown-hidden { - display: none; - } - } \ No newline at end of file diff --git a/less/service.less b/less/service.less index 0aacfcd003..7f6dbbaa21 100644 --- a/less/service.less +++ b/less/service.less @@ -24,63 +24,9 @@ } -} - - -// .tabs { - -// width: 100%; -// } - -// .tabs-items { -// width: 100%; -// height: 300px; -// display: flex; -// justify-content: center; -// padding-top: 60px; -// } - -// .tabs-item { -// // display: none; -// width: 75%; -// display: flex; -// justify-content: center; - -// } - - -// .tabs-links { -// display: flex; -// justify-content: space-between; - -// } - - -// .tabs-link { -// padding: 20px 25px; -// font-size: 24px; -// background-color: @white; -// border: 1px solid black; -// color: black; -// cursor: pointer; -// &:hover { -// background-color: @nero; -// color: @WHITE; -// } -// } -// .tabs-link-selected { -// z-index: 2; -// border: 1px solid black; -// background-color: @blueish; -// color: @white; -// &:hover { -// background-color: @nero; -// color: @WHITE; -// } -// } - +} .tab-item-title { @@ -90,47 +36,79 @@ padding-bottom: 20px; } +// .tabs-items { +// width: 100%; +// height: 300px; +// display: flex; +// flex-direction: row; +// // flex-wrap: wrap; +// justify-content: space-between; + +// // justify-content: space-evenly; +// padding-top: 60px; + +// } + .tabs { width: 100%; display: flex; - // flex-wrap: wrap; justify-content: space-between; + align-content: center; .tabs-items { width: 100%; height: 300px; display: flex; - // flex-wrap: wrap; + flex-direction: row; justify-content: space-between; padding-top: 60px; } - .tabs-item { - // display: none; - width: 75%; - display: flex; - // flex-wrap: wrap; - justify-content: space-between; - - .tabs-item.title { - font-size: 24px; - font-weight: bold; - padding-bottom: 10px; - } - } - - .tabs-item-selected { - display: block; - } - - .tabs-links { - display: flex; - background-color: black; - } + // .tabs-item-descriiption { + // width: 100%; + // height: 300px; + // display: flex; + // flex-direction: row; + // justify-content: space-between; + // } + + // .img-service { + // width: 100%; + // height: 300px; + // display: flex; + // flex-direction: row; + // justify-content: space-between; + // } + + + + // .tabs-item { + // // display: none; + // width: 75%; + // display: flex; + // // // flex-wrap: wrap; + // justify-content: space-between; + + // .tabs-item.title { + // font-size: 24px; + // font-weight: bold; + // padding-bottom: 10px; + + // } + // } + + // .tabs-item-selected { + // display: block; + // } + +// .tabs-links { +// display: flex; +// background-color: black; +// } .tabs-link { padding: 20px 25px; diff --git a/services.html b/services.html index c74ce0bc56..27c3305c65 100644 --- a/services.html +++ b/services.html @@ -12,32 +12,6 @@ - - - -
-
-
S&J
- - -
- Home - Service - Conact -
-
- -
-
@@ -58,10 +32,13 @@
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.
pre
@@ -71,32 +48,35 @@
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
-
+
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.
+
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
-
+
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.
+
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
-
+
From fbb5d455eb611b02d641a944b9b04144d91b3899 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 13:02:30 -0600 Subject: [PATCH 51/83] linked pages in nav bar --- css/index.css | 2 +- index.html | 13 +++++++++++++ less/home-page.less | 2 +- less/navigation.less | 3 +++ 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 00ad0d788e..bbb1d48c87 100644 --- a/css/index.css +++ b/css/index.css @@ -201,7 +201,7 @@ body { margin-bottom: 0; margin-left: auto; margin-right: auto; - padding-top: 60px; + padding-top: 0; display: flex; justify-content: space-evenly; } diff --git a/index.html b/index.html index fdbaa46d36..7050887a5b 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,19 @@ +
+
+
S&J
+
Dropdown
+
+ Home + Services + Contact +
+
+ +
+
diff --git a/less/home-page.less b/less/home-page.less index 90e902deeb..06baac7ff1 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -14,7 +14,7 @@ body { margin-bottom: 0; margin-left: auto; margin-right: auto; - padding-top: 60px; + padding-top: 0; display: flex; justify-content: space-evenly; diff --git a/less/navigation.less b/less/navigation.less index e69de29bb2..bbdcde380b 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -0,0 +1,3 @@ +.header-container { + background-color: @grey; +} \ No newline at end of file From a7b24ecfc4d2615b833e9201a81f55aa8a872673 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 15:59:16 -0600 Subject: [PATCH 52/83] finishing up service page css editing photos --- css/index.css | 59 ++++++++++----- index.html | 25 ++++--- less/global.less | 22 +----- less/home-page.less | 11 +++ less/navigation.less | 12 ++- less/service.less | 175 +++++++++++++++++-------------------------- services.html | 16 ++-- 7 files changed, 153 insertions(+), 167 deletions(-) diff --git a/css/index.css b/css/index.css index bbb1d48c87..fefb9a9a2c 100644 --- a/css/index.css +++ b/css/index.css @@ -145,8 +145,8 @@ html { html, body { font-family: 'Roboto', sans-serif; - color: #222222; background: #FFFFFF; + color: #222222; } img { max-width: 100%; @@ -195,6 +195,14 @@ body { box-sizing: border-box; margin: 0; } +.navTop { + width: 100%; + background-color: #828282; + color: red; +} +.navTop h1 { + color: red; +} .container-home .header { position: relative; width: 100%; @@ -333,7 +341,7 @@ body { font-size: 25px; letter-spacing: 7px; } -.section { +.container-home .section { width: 70%; margin: 45px auto; overflow: hidden; @@ -344,33 +352,25 @@ body { flex-wrap: wrap; justify-content: space-between; } -.section .box { +.container-home .section .box { padding: 40px; } -.section .box-title { +.container-home .section .box-title { font-size: 24px; padding-bottom: 10px; font-weight: bold; } -.tab-item-title { - font-size: 20px; - font-weight: bold; - padding-top: 20px; - padding-bottom: 20px; -} -.tabs { - width: 100%; +.container-home .section .tabs-items { display: flex; + flex-direction: row; + flex-wrap: wrap; justify-content: space-between; - align-content: center; } -.tabs .tabs-items { +.tabs { width: 100%; - height: 300px; display: flex; - flex-direction: row; justify-content: space-between; - padding-top: 60px; + align-content: center; } .tabs .tabs-link { padding: 20px 25px; @@ -394,3 +394,28 @@ body { background-color: #222222; color: #FFF; } +.tabs-items { + margin: 50px 0; + padding-left: 13%; + padding-right: 13%; + display: flex; + flex-direction: row; + justify-content: space-evenly; +} +.tabs-items .tab-item-title { + font-size: 20px; + font-weight: bold; + padding-top: 20px; + padding-bottom: 20px; + display: flex; +} +.tabs-items .tabs-item-descriiption { + display: flex; + flex-direction: row; + align-content: flex-start; +} +.tabs-items .img-service { + display: flex; + flex-direction: row; + align-content: flex-end; +} diff --git a/index.html b/index.html index 7050887a5b..2a8e90a331 100644 --- a/index.html +++ b/index.html @@ -12,18 +12,23 @@ + +
-
-
S&J
-
Dropdown
-
- Home - Services - Contact -
-
- +
+

S&J

+ +
Dropdown
+
+ Home + Services + Contact
+
+
diff --git a/less/global.less b/less/global.less index a3c089881c..53f6036a95 100644 --- a/less/global.less +++ b/less/global.less @@ -12,6 +12,7 @@ font-family: 'Roboto', sans-serif; color: @nero; background: @white; + color: @nero; } @@ -20,34 +21,13 @@ height: auto; } -// h1, h2, h3, h4, h5 { -// font-family: 'Indie Flower', cursive; -// } h1 { font-size: 55px; } -// h2 { -// font-size: 3.2rem; -// padding-bottom: 10px; -// } - -// h4 { -// font-size: 2.5rem; -// padding-bottom: 10px; -// } - p { line-height: 24px; font-weight: regular; font-size: 16px; } - - - -// .container { -// max-width: 800px; -// width: 100%; -// margin: 0 auto; - diff --git a/less/home-page.less b/less/home-page.less index 06baac7ff1..8d73b12a1d 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -3,6 +3,17 @@ body { margin: 0; } +//==========================NAV + +.navTop { + width: 100%; + background-color: @grey; + color: red; + + h1 { + color: red; + } +} //========================= HEADER diff --git a/less/navigation.less b/less/navigation.less index bbdcde380b..ef358c86fa 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,3 +1,9 @@ -.header-container { - background-color: @grey; -} \ No newline at end of file +// .navTop { +// width: 100%; +// background-color: @grey; +// color: red; + +// h1 { +// color: red; +// } +// } \ No newline at end of file diff --git a/less/service.less b/less/service.less index 7f6dbbaa21..eed9b08733 100644 --- a/less/service.less +++ b/less/service.less @@ -1,114 +1,44 @@ +.container-home { + + .section { + width: 70%; + margin: 45px auto; + overflow: hidden; + font-size: 16px; + line-height: 24px; + font-weight: regular; + display: flex; + flex-wrap: wrap; + justify-content: space-between; -//=================== SECTION + .box { + padding: 40px; + } -.section { - width: 70%; - margin: 45px auto; - overflow: hidden; - font-size: 16px; - line-height: 24px; - font-weight: regular; - display: flex; - flex-wrap: wrap; - justify-content: space-between; + .box-title { + font-size: 24px; + padding-bottom: 10px; + font-weight: bold; + } - .box { - padding: 40px; - } + .tabs-items { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + } - .box-title { - font-size: 24px; - padding-bottom: 10px; - font-weight: bold; - } - - - -} - - -.tab-item-title { - font-size: 20px; - font-weight: bold; - padding-top: 20px; - padding-bottom: 20px; } -// .tabs-items { -// width: 100%; -// height: 300px; -// display: flex; -// flex-direction: row; -// // flex-wrap: wrap; -// justify-content: space-between; - -// // justify-content: space-evenly; -// padding-top: 60px; - -// } - - - - .tabs { width: 100%; display: flex; justify-content: space-between; align-content: center; - - .tabs-items { - width: 100%; - height: 300px; - display: flex; - flex-direction: row; - justify-content: space-between; - padding-top: 60px; - } - - // .tabs-item-descriiption { - // width: 100%; - // height: 300px; - // display: flex; - // flex-direction: row; - // justify-content: space-between; - // } - - // .img-service { - // width: 100%; - // height: 300px; - // display: flex; - // flex-direction: row; - // justify-content: space-between; - // } - - - - // .tabs-item { - // // display: none; - // width: 75%; - // display: flex; - // // // flex-wrap: wrap; - // justify-content: space-between; - - // .tabs-item.title { - // font-size: 24px; - // font-weight: bold; - // padding-bottom: 10px; - - // } - // } - - // .tabs-item-selected { - // display: block; - // } - -// .tabs-links { -// display: flex; -// background-color: black; -// } + .tabs-link { padding: 20px 25px; @@ -120,18 +50,51 @@ &:hover { background-color: @nero; color: @WHITE; + } + } + + .tabs-link-selected { + z-index: 2; + border: 1px solid black; + background-color: @blueish; + color: @white; + &:hover { + background-color: @nero; + color: @WHITE; + } } +} + +.tabs-items { + margin: 50px 0; + padding-left: 13%; + padding-right: 13%; + display: flex; + flex-direction: row; + justify-content: space-evenly; + + .tab-item-title { + font-size: 20px; + font-weight: bold; + padding-top: 20px; + padding-bottom: 20px; + display: flex; } - .tabs-link-selected { - z-index: 2; - border: 1px solid black; - background-color: @blueish; - color: @white; - &:hover { - background-color: @nero; - color: @WHITE; - } + .tabs-item-descriiption{ + display: flex; + flex-direction: row; + align-content: flex-start; + } + + .img-service{ + display: flex; + flex-direction: row; + align-content: flex-end; } } + + + + diff --git a/services.html b/services.html index 27c3305c65..c4283ef379 100644 --- a/services.html +++ b/services.html @@ -11,7 +11,7 @@ - +
@@ -38,8 +38,7 @@
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.
-
+

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
@@ -49,8 +48,7 @@
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.
-
+

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
@@ -60,8 +58,7 @@
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.
-
+

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
@@ -71,14 +68,13 @@
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.
-
+

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
-
+
-
+ +
--> + +
+ + +
diff --git a/less/home-page.less b/less/home-page.less index 8d73b12a1d..a06bf81950 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -5,15 +5,29 @@ body { //==========================NAV -.navTop { - width: 100%; - background-color: @grey; - color: red; - - h1 { - color: red; - } -} +.Navbar { + display: flex; + } + + .Navbar { + background-color: grey; + display: flex; + padding: 16px; + font-family: sans-serif; + color: white; + } + + .Navbar__Items { + display:flex; + } + + .Navbar__Link { + padding-right: 8px; + } + + .Navbar__Items--right { + margin-left:auto; + } //========================= HEADER diff --git a/less/navigation.less b/less/navigation.less index ef358c86fa..92668ac309 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,9 +1,23 @@ -// .navTop { -// width: 100%; -// background-color: @grey; -// color: red; - -// h1 { -// color: red; -// } -// } \ No newline at end of file +.Navbar { + display: flex; + } + + .Navbar { + background-color: grey; + display: flex; + padding: 16px; + font-family: sans-serif; + color: white; + } + + .Navbar__Items { + display:flex; + } + + .Navbar__Link { + padding-right: 8px; + } + + .Navbar__Items--right { + margin-left:auto; + } From 5ff3992067a2633d2dffe0737679001fa768bf1c Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Wed, 19 Dec 2018 17:12:40 -0600 Subject: [PATCH 55/83] changed font in nav bar --- contact.html | 20 +++++++++++++++++++- css/index.css | 3 +++ less/home-page.less | 3 +++ services.html | 21 +++++++++++++++++++++ 4 files changed, 46 insertions(+), 1 deletion(-) diff --git a/contact.html b/contact.html index 9de69184d2..371cc1f2ac 100644 --- a/contact.html +++ b/contact.html @@ -12,7 +12,25 @@ -

Contact

+
+ + +
-
+ + +
+
+ S&J +
+
+

hi

+ +
+ + +
diff --git a/js/index.js b/js/index.js index 45fb213532..48b9ca64d9 100644 --- a/js/index.js +++ b/js/index.js @@ -55,4 +55,14 @@ class TabLink { links = document.querySelectorAll(".tabs-link") - .forEach(link => new TabLink(link)); \ No newline at end of file + .forEach(link => new TabLink(link)); + + //=====NAV + + function classToggle() { + const navs = document.querySelectorAll('.Navbar__Items') + + navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow')); + } + + document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle); \ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less index 6dfab43307..25d047c6bd 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -4,11 +4,13 @@ body { } //==========================NAV - -.Navbar { - display: flex; - cursor: pointer; - } + +// ### Navigation Text (Expanded) +// - Font Weight: Bold +// - Font Size: 48px +// - Line Height: 85px +// - Color: #FFFFFF +// - Hover Color: #222222 .Navbar { background-color: grey; @@ -16,22 +18,80 @@ body { padding: 16px; font-family: sans-serif; color: white; + } + + .Navbar__Link { + padding-right: 8px; font-size: 24px; + color: @white; font-weight: bold; + padding-left: 50px; } .Navbar__Items { - display:flex; + display: flex; + flex-direction: column; } - .Navbar__Link { - padding-right: 8px; - color: @white; + .Navbar__Items--right { + margin-left: auto; } - .Navbar__Items--right { - margin-left:auto; + .Navbar__Link-toggle { + display: none; } + +// @media only screen and (max-width: 768px) { +// .Navbar__Items, +// .Navbar { +// flex-direction: column; +// } + + .Navbar__Items { + display:none; + } + .Navbar__Items--right { + margin-left:0; + } + .Navbar__ToggleShow { + display: flex; + } + .Navbar__Link-toggle { + // align-self: flex-end; + display: flex; + justify-content: flex-end; + position: absolute; + cursor: pointer; + } + + +// .Navbar { +// display: flex; +// cursor: pointer; +// } + +// .Navbar { +// background-color: grey; +// display: flex; +// padding: 16px; +// font-family: sans-serif; +// color: white; +// font-size: 24px; +// font-weight: bold; +// } + +// .Navbar__Items { +// display:flex; +// } + +// .Navbar__Link { +// padding-right: 8px; +// color: @white; +// } + +// .Navbar__Items--right { +// margin-left:auto; +// } //========================= HEADER From a906ff6271bcc83dda05e9f7d72f540abcb78711 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Thu, 20 Dec 2018 14:33:09 -0600 Subject: [PATCH 60/83] got hamburger working in nav --- css/index.css | 63 +++++++++++++-------- index.html | 64 ++++----------------- js/index.js | 38 +++++++++++-- less/home-page.less | 132 +++++++++++++++++--------------------------- 4 files changed, 135 insertions(+), 162 deletions(-) diff --git a/css/index.css b/css/index.css index 0c8e00110c..a8d6cd10c4 100644 --- a/css/index.css +++ b/css/index.css @@ -214,44 +214,59 @@ body { box-sizing: border-box; margin: 0; } -.Navbar { - background-color: grey; - display: flex; - padding: 16px; +.dropdown { + z-index: 2; + position: absolute; + background-color: #828282; font-family: sans-serif; - color: white; + left: 25px; + cursor: pointer; } -.Navbar__Link { - padding-right: 8px; +.dropdown .dropdown-button { + padding: 15px; + color: white; font-size: 24px; - color: #FFFFFF; font-weight: bold; - padding-left: 50px; } -.Navbar__Items { +.dropdown .dropdown-button:hover { + color: black; +} +.dropdown .dropdown-content { + width: 400px; + position: absolute; + background-color: grey; display: flex; flex-direction: column; + align-items: center; + margin-top: 10px; } -.Navbar__Items--right { - margin-left: auto; +.dropdown .dropdown-link { + width: 100%; + text-align: center; + padding: 15px 0; + font-size: 48px; + font-weight: bold; + line-height: 85px; + text-decoration: none; + color: #FFFFFF; } -.Navbar__Link-toggle { - display: none; +.dropdown .dropdown-link:hover { + color: white; + background-color: #222222; } -.Navbar__Items { +.dropdown .dropdown-hidden { display: none; } -.Navbar__Items--right { - margin-left: 0; -} -.Navbar__ToggleShow { +.header-container { + width: 100%; + height: 70px; display: flex; + justify-content: center; + align-items: center; + background-color: grey; } -.Navbar__Link-toggle { - display: flex; - justify-content: flex-end; - position: absolute; - cursor: pointer; +.header-container .header { + height: 50px; } .container-home .header { position: relative; diff --git a/index.html b/index.html index 9139c5250a..d553a0d064 100644 --- a/index.html +++ b/index.html @@ -12,59 +12,17 @@ - - - - - - -
-
- S&J -
-
-

hi

- -
- - -
+
+
+
+
+ Home + Services + Contact +
+
+ +
diff --git a/js/index.js b/js/index.js index 48b9ca64d9..6bc22cdf9e 100644 --- a/js/index.js +++ b/js/index.js @@ -58,11 +58,39 @@ class TabLink { .forEach(link => new TabLink(link)); //=====NAV + + class Dropdown { + constructor(element) { + + // Assign this.element to the dropdown element + this.element = element; + + // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context) + this.button = this.element.querySelector(".dropdown-button"); + + // assign the reference to the ".dropdown-content" class found in the dropdown element + this.content = this.element.querySelector(".dropdown-content"); + + // Add a click handler to the button reference and call the toggleContent method. + this.button.addEventListener("click", () => this.toggleContent()); + } - function classToggle() { - const navs = document.querySelectorAll('.Navbar__Items') - - navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow')); + toggleContent() { + + // Toggle the ".dropdown-hidden" class off and on + this.content.classList.toggle("dropdown-hidden"); + } } - document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle); \ No newline at end of file + + // Nothing to do here, just study what the code is doing and move on to the Dropdown class + let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); + + +// function classToggle() { +// const navs = document.querySelectorAll('.Navbar__Items') + +// navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow')); +// } + +// document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle); \ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less index 25d047c6bd..516458b043 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -5,93 +5,65 @@ body { //==========================NAV -// ### Navigation Text (Expanded) -// - Font Weight: Bold -// - Font Size: 48px -// - Line Height: 85px -// - Color: #FFFFFF -// - Hover Color: #222222 - - .Navbar { - background-color: grey; - display: flex; - padding: 16px; +.dropdown { + z-index: 2; + position: absolute; + background-color: @grey; font-family: sans-serif; - color: white; - } - - .Navbar__Link { - padding-right: 8px; - font-size: 24px; - color: @white; - font-weight: bold; - padding-left: 50px; + left: 25px; + cursor: pointer; + + .dropdown-button { + padding: 15px; + color: white; + font-size: 24px; + font-weight: bold; + &:hover { + // background-color: white; + color: black; + } + } + .dropdown-content { + width: 400px; + position: absolute; + background-color: grey; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; + } + .dropdown-link { + width: 100%; + text-align: center; + padding: 15px 0; + font-size: 48px; + font-weight: bold; + line-height: 85px; + text-decoration: none; + color: #FFFFFF; + &:hover { + color: white; + background-color: #222222; + } + } + .dropdown-hidden { + display: none; + } } - .Navbar__Items { + .header-container { + width: 100%; + height: 70px; display: flex; - flex-direction: column; - } - - .Navbar__Items--right { - margin-left: auto; - } - - .Navbar__Link-toggle { - display: none; + justify-content: center; + align-items: center; + background-color: grey; + .header { + height: 50px; + } } -// @media only screen and (max-width: 768px) { -// .Navbar__Items, -// .Navbar { -// flex-direction: column; -// } - .Navbar__Items { - display:none; - } - .Navbar__Items--right { - margin-left:0; - } - .Navbar__ToggleShow { - display: flex; - } - .Navbar__Link-toggle { - // align-self: flex-end; - display: flex; - justify-content: flex-end; - position: absolute; - cursor: pointer; - } - - -// .Navbar { -// display: flex; -// cursor: pointer; -// } - -// .Navbar { -// background-color: grey; -// display: flex; -// padding: 16px; -// font-family: sans-serif; -// color: white; -// font-size: 24px; -// font-weight: bold; -// } - -// .Navbar__Items { -// display:flex; -// } - -// .Navbar__Link { -// padding-right: 8px; -// color: @white; -// } - -// .Navbar__Items--right { -// margin-left:auto; -// } //========================= HEADER From 48e94b3234392cdbc41f7c9ce32f964ad0db7714 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Thu, 20 Dec 2018 14:46:27 -0600 Subject: [PATCH 61/83] finishing up nav bar --- css/index.css | 11 ++++++++++- index.html | 2 +- less/home-page.less | 19 ++++++++++++++++--- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/css/index.css b/css/index.css index a8d6cd10c4..1886b19de0 100644 --- a/css/index.css +++ b/css/index.css @@ -214,12 +214,20 @@ body { box-sizing: border-box; margin: 0; } +.header-container p { + color: #FFFFFF; + position: absolute; + left: 65px; + font-weight: bold; + font-family: sans-serif; + font-size: 24px; +} .dropdown { z-index: 2; position: absolute; background-color: #828282; font-family: sans-serif; - left: 25px; + right: 85px; cursor: pointer; } .dropdown .dropdown-button { @@ -234,6 +242,7 @@ body { .dropdown .dropdown-content { width: 400px; position: absolute; + right: 45px; background-color: grey; display: flex; flex-direction: column; diff --git a/index.html b/index.html index d553a0d064..ad983ca3c4 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ Contact
- +

S&J

diff --git a/less/home-page.less b/less/home-page.less index 516458b043..fb3bf79b39 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -5,12 +5,25 @@ body { //==========================NAV +.header-container { + + p { + color: @white; + position: absolute; + left: 65px; + font-weight: bold; + font-family: sans-serif; + font-size: 24px; + } +} + .dropdown { z-index: 2; - position: absolute; + position: absolute; background-color: @grey; font-family: sans-serif; - left: 25px; + // left: 455px; + right: 85px; cursor: pointer; .dropdown-button { @@ -19,13 +32,13 @@ body { font-size: 24px; font-weight: bold; &:hover { - // background-color: white; color: black; } } .dropdown-content { width: 400px; position: absolute; + right: 45px; background-color: grey; display: flex; flex-direction: column; From 9f6800dab1cb10be46a13429c8324812dcd50d6e Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Thu, 20 Dec 2018 16:06:20 -0600 Subject: [PATCH 62/83] making media for home page --- contact.html | 24 +++++++++++------------- css/index.css | 12 +++++++++++- index.html | 3 ++- less/global.less | 2 ++ less/home-page.less | 13 +++++++++++-- services.html | 20 +++++++++----------- 6 files changed, 46 insertions(+), 28 deletions(-) diff --git a/contact.html b/contact.html index 0fb9fd055c..47a84f9f92 100644 --- a/contact.html +++ b/contact.html @@ -12,19 +12,17 @@ -
- - -
+
+
+
+
+ Home + Services + Contact +
+
+

S&J

+
diff --git a/css/index.css b/css/index.css index 1886b19de0..56e5017b79 100644 --- a/css/index.css +++ b/css/index.css @@ -232,7 +232,7 @@ body { } .dropdown .dropdown-button { padding: 15px; - color: white; + color: #FFFFFF; font-size: 24px; font-weight: bold; } @@ -308,6 +308,11 @@ body { flex-wrap: wrap; justify-content: space-between; } +@media (max-width: 500px) { + .content-top { + background: red; + } +} .content-top .text-content { width: 48%; padding-right: 1%; @@ -343,6 +348,11 @@ body { flex-wrap: wrap; justify-content: space-between; } +@media (max-width: 500px) { + .designs-content-section { + background-color: red; + } +} .designs-content-section .text-content { width: 48%; padding-right: 1%; diff --git a/index.html b/index.html index ad983ca3c4..5b63fe3f91 100644 --- a/index.html +++ b/index.html @@ -16,13 +16,14 @@
+ Home Services Contact

S&J

-
+
diff --git a/less/global.less b/less/global.less index 53f6036a95..c97ce442d9 100644 --- a/less/global.less +++ b/less/global.less @@ -13,6 +13,8 @@ color: @nero; background: @white; color: @nero; + // width: 100%; + // height: 100%; } diff --git a/less/home-page.less b/less/home-page.less index fb3bf79b39..d451c05f94 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -3,6 +3,7 @@ body { margin: 0; } + //==========================NAV .header-container { @@ -22,13 +23,12 @@ body { position: absolute; background-color: @grey; font-family: sans-serif; - // left: 455px; right: 85px; cursor: pointer; .dropdown-button { padding: 15px; - color: white; + color: @white; font-size: 24px; font-weight: bold; &:hover { @@ -94,6 +94,7 @@ body { img { width: 100%; + // height: auto; } } @@ -123,6 +124,10 @@ body { flex-wrap: wrap; justify-content: space-between; + @media(max-width: 500px) { + background: red; + } + .text-content { width: 48%; padding-right: 1%; @@ -165,6 +170,10 @@ body { display: flex; flex-wrap: wrap; justify-content: space-between; + + @media(max-width: 500px) { + background-color: red; + } .text-content { diff --git a/services.html b/services.html index ea62e00cf1..97b3492c16 100644 --- a/services.html +++ b/services.html @@ -13,19 +13,17 @@ -
- -
+

S&J

+
From cb7c6d3f8b7aacd17a8aea32ffd367d4d34eff4e Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Thu, 20 Dec 2018 16:23:47 -0600 Subject: [PATCH 63/83] making mobile footer --- css/index.css | 28 ++++++++++++++++++++++++++++ less/footer.less | 26 ++++++++++++++++++++++++++ less/home-page.less | 4 ++++ 3 files changed, 58 insertions(+) diff --git a/css/index.css b/css/index.css index 56e5017b79..7d2710f035 100644 --- a/css/index.css +++ b/css/index.css @@ -183,6 +183,20 @@ p { width: 100%; background: #828282; } +@media (max-width: 500px) { + .footer { + display: flex; + flex-direction: column; + padding-left: 30px; + } + .footer h4 { + padding-top: 30px; + } + .footer .footerBottom { + display: flex; + flex-direction: column; + } +} .footer .footerBottom { display: flex; justify-content: space-evenly; @@ -207,6 +221,15 @@ p { color: #FFFFFF; padding: 20px; } +@media (max-width: 500px) { + .footer .copyright { + display: flex; + justify-content: flex-start; + } + .footer .copyright p { + display: flex; + } +} .footer .copyright p { font-size: 10px; } @@ -384,6 +407,11 @@ body { width: 75%; margin: auto; } +@media (max-width: 500px) { + .main-content-section { + background-color: red; + } +} .main-content-section h2 { font-size: 24px; color: #222222; diff --git a/less/footer.less b/less/footer.less index f98eca2508..2abb6a7a2c 100644 --- a/less/footer.less +++ b/less/footer.less @@ -2,6 +2,21 @@ width: 100%; background: @grey; + @media(max-width: 500px) { + display: flex; + flex-direction: column; + padding-left: 30px; + + h4 { + padding-top: 30px; + } + + .footerBottom { + display: flex; + flex-direction: column; + } + } + .footerBottom { display: flex; justify-content: space-evenly; @@ -37,6 +52,17 @@ color: @white; padding: 20px; + @media(max-width: 500px) { + display: flex; + justify-content: flex-start; + + p { + display: flex; + + + } + } + p { font-size: 10px; } diff --git a/less/home-page.less b/less/home-page.less index d451c05f94..49613732ae 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -215,6 +215,10 @@ body { width: 75%; margin: auto; + @media(max-width: 500px) { + background-color: red; + } + h2 { font-size: 24px; color: @nero; From fda5c6940f531dec5f5d6450ff7e44207e4f4052 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Thu, 20 Dec 2018 17:16:48 -0600 Subject: [PATCH 64/83] making top content mobile on home page --- css/index.css | 23 ++++++++++++++++++++++- less/home-page.less | 21 ++++++++++++++++++++- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 7d2710f035..04cd43af95 100644 --- a/css/index.css +++ b/css/index.css @@ -300,6 +300,14 @@ body { .header-container .header { height: 50px; } +@media (max-width: 500px) { + .container-home { + width: 100%; + display: flex; + flex-direction: column; + align-content: center; + } +} .container-home .header { position: relative; width: 100%; @@ -333,7 +341,10 @@ body { } @media (max-width: 500px) { .content-top { - background: red; + background: #FFFFFF; + width: 100%; + display: flex; + flex-direction: column; } } .content-top .text-content { @@ -341,6 +352,11 @@ body { padding-right: 1%; padding-top: 4%; } +@media (max-width: 500px) { + .content-top .text-content { + width: 100%; + } +} .content-top h2 { font-size: 28px; color: #222222; @@ -359,6 +375,11 @@ body { width: 150px; cursor: pointer; } +@media (max-width: 500px) { + .content-top .btn { + width: 100%; + } +} .content-top .btn:hover { background-color: #222222; color: white; diff --git a/less/home-page.less b/less/home-page.less index 49613732ae..4da407fda4 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -82,6 +82,13 @@ body { .container-home { + @media(max-width: 500px) { + width: 100%; + display: flex; + flex-direction: column; + align-content: center; + } + .header { position: relative; width: 100%; @@ -125,13 +132,21 @@ body { justify-content: space-between; @media(max-width: 500px) { - background: red; + background: @white; + width: 100%; + display: flex; + flex-direction: column; + } .text-content { width: 48%; padding-right: 1%; padding-top: 4%; + + @media(max-width: 500px) { + width: 100%; + } } h2 { @@ -152,6 +167,10 @@ body { margin-top: 5%; width: 150px; cursor: pointer; + + @media(max-width: 500px) { + width: 100%; + } } .btn:hover { From ff29c40247e586d64b7a6448292d179ffce326d8 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Thu, 20 Dec 2018 17:23:10 -0600 Subject: [PATCH 65/83] made mobile changes to main content home page --- css/index.css | 15 ++++++++++++++- less/home-page.less | 13 ++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 04cd43af95..166956bcad 100644 --- a/css/index.css +++ b/css/index.css @@ -355,6 +355,8 @@ body { @media (max-width: 500px) { .content-top .text-content { width: 100%; + display: flex; + flex-direction: column; } } .content-top h2 { @@ -394,7 +396,8 @@ body { } @media (max-width: 500px) { .designs-content-section { - background-color: red; + width: 100%; + background-color: #FFFFFF; } } .designs-content-section .text-content { @@ -402,6 +405,11 @@ body { padding-right: 1%; padding-top: 4%; } +@media (max-width: 500px) { + .designs-content-section .text-content { + width: 100%; + } +} .designs-content-section h2 { font-size: 28px; color: #222222; @@ -420,6 +428,11 @@ body { width: 150px; cursor: pointer; } +@media (max-width: 500px) { + .designs-content-section .btn { + width: 100%; + } +} .designs-content-section .btn:hover { background-color: #222222; color: white; diff --git a/less/home-page.less b/less/home-page.less index 4da407fda4..0065071743 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -146,6 +146,8 @@ body { @media(max-width: 500px) { width: 100%; + display: flex; + flex-direction: column; } } @@ -191,7 +193,8 @@ body { justify-content: space-between; @media(max-width: 500px) { - background-color: red; + width: 100%; + background-color: @white; } @@ -199,6 +202,10 @@ body { width: 48%; padding-right: 1%; padding-top: 4%; + + @media(max-width: 500px) { + width: 100%; + } } h2 { @@ -219,6 +226,10 @@ body { margin-top: 5%; width: 150px; cursor: pointer; + + @media(max-width: 500px) { + width: 100%; + } } .btn:hover { From 130e2d4757deb64ea5210815c3e76d3547a54e73 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Thu, 20 Dec 2018 17:45:22 -0600 Subject: [PATCH 66/83] commit before stand up --- css/index.css | 15 ++++++++++++++- less/home-page.less | 13 ++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 166956bcad..ee9f512db5 100644 --- a/css/index.css +++ b/css/index.css @@ -443,7 +443,8 @@ body { } @media (max-width: 500px) { .main-content-section { - background-color: red; + width: 100%; + background-color: #FFFFFF; } } .main-content-section h2 { @@ -453,6 +454,12 @@ body { padding-top: 3%; padding-bottom: 3%; } +@media (max-width: 500px) { + .main-content-section h2 { + width: 100%; + display: flex; + } +} .main-content-section p { display: flex; flex-wrap: wrap; @@ -462,6 +469,12 @@ body { padding-top: 30px; padding-bottom: 60px; } +@media (max-width: 500px) { + .main-content-section p { + width: 100%; + display: flex; + } +} .main-content-section h3 { position: relative; bottom: 45px; diff --git a/less/home-page.less b/less/home-page.less index 0065071743..6b536fed23 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -246,7 +246,8 @@ body { margin: auto; @media(max-width: 500px) { - background-color: red; + width: 100%; + background-color: @white; } h2 { @@ -255,6 +256,11 @@ body { font-weight: bold; padding-top: 3%; padding-bottom: 3%; + + @media(max-width: 500px) { + width: 100%; + display: flex; + } } p { @@ -266,6 +272,11 @@ body { padding-top: 30px; padding-bottom: 60px; + @media(max-width: 500px) { + width: 100%; + display: flex; + } + } h3 { From 43af527430da5215e00d5fde0c2f8a89e701d552 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 11:03:48 -0600 Subject: [PATCH 67/83] push --- css/index.css | 65 ++++++++++++++++++++++++++++++++++++++- less/footer.less | 2 ++ less/global.less | 1 + less/home-page.less | 74 +++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 139 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index ee9f512db5..3124694801 100644 --- a/css/index.css +++ b/css/index.css @@ -147,6 +147,7 @@ body { font-family: 'Roboto', sans-serif; background: #FFFFFF; color: #222222; + max-width: 100%; } img { max-width: 100%; @@ -225,6 +226,8 @@ p { .footer .copyright { display: flex; justify-content: flex-start; + padding: 0; + padding-top: 20px; } .footer .copyright p { display: flex; @@ -310,7 +313,6 @@ body { } .container-home .header { position: relative; - width: 100%; margin-bottom: 0; margin-left: auto; margin-right: auto; @@ -331,6 +333,11 @@ body { padding-bottom: 4%; padding-left: 4%; } +@media (max-width: 500px) { + .bottom-left { + width: 100%; + } +} .content-top { margin: 50px 0; padding-left: 13%; @@ -342,9 +349,12 @@ body { @media (max-width: 500px) { .content-top { background: #FFFFFF; + padding: 0; + margin: 0 0; width: 100%; display: flex; flex-direction: column; + align-content: center; } } .content-top .text-content { @@ -357,6 +367,8 @@ body { width: 100%; display: flex; flex-direction: column; + padding-left: 25px; + padding-right: 25px; } } .content-top h2 { @@ -386,6 +398,18 @@ body { background-color: #222222; color: white; } +@media (max-width: 500px) { + .content-top img { + object-fit: cover; + width: 450px; + height: 400px; + display: flex; + padding: 0; + position: relative; + left: 20px; + top: 20px; + } +} .designs-content-section { margin: 30px 0; padding-left: 13%; @@ -397,6 +421,7 @@ body { @media (max-width: 500px) { .designs-content-section { width: 100%; + padding: 0; background-color: #FFFFFF; } } @@ -408,6 +433,8 @@ body { @media (max-width: 500px) { .designs-content-section .text-content { width: 100%; + padding-left: 25px; + padding-right: 25px; } } .designs-content-section h2 { @@ -437,6 +464,16 @@ body { background-color: #222222; color: white; } +@media (max-width: 500px) { + .designs-content-section img { + object-fit: cover; + width: 450px; + height: 400px; + padding: 0; + position: relative; + left: 20px; + } +} .main-content-section { width: 75%; margin: auto; @@ -473,6 +510,10 @@ body { .main-content-section p { width: 100%; display: flex; + padding: 0; + padding-bottom: 40px; + padding-left: 25px; + padding-right: 25px; } } .main-content-section h3 { @@ -487,6 +528,12 @@ body { font-size: 25px; letter-spacing: 7px; } +@media (max-width: 500px) { + .main-content-section h3 { + width: 100%; + display: flex; + } +} .main-content-section h5 { position: relative; bottom: 45px; @@ -500,6 +547,22 @@ body { font-size: 25px; letter-spacing: 7px; } +@media (max-width: 500px) { + .main-content-section h5 { + width: 100%; + left: 0; + display: flex; + justify-content: center; + padding: 0; + } +} +@media (max-width: 500px) { + .main-content-section img { + object-fit: cover; + width: 500px; + height: 250px; + } +} .box-description { width: 70%; margin: 45px auto; diff --git a/less/footer.less b/less/footer.less index 2abb6a7a2c..52ae0a589f 100644 --- a/less/footer.less +++ b/less/footer.less @@ -55,6 +55,8 @@ @media(max-width: 500px) { display: flex; justify-content: flex-start; + padding: 0; + padding-top: 20px; p { display: flex; diff --git a/less/global.less b/less/global.less index c97ce442d9..b7a68b6a21 100644 --- a/less/global.less +++ b/less/global.less @@ -13,6 +13,7 @@ color: @nero; background: @white; color: @nero; + max-width: 100%; // width: 100%; // height: 100%; diff --git a/less/home-page.less b/less/home-page.less index 6b536fed23..83fb850ebb 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,6 +1,7 @@ body { box-sizing: border-box; - margin: 0; + margin: 0; + } @@ -81,17 +82,19 @@ body { //========================= HEADER .container-home { + @media(max-width: 500px) { width: 100%; display: flex; flex-direction: column; align-content: center; + } .header { position: relative; - width: 100%; + // width: 100%; margin-bottom: 0; margin-left: auto; margin-right: auto; @@ -102,6 +105,7 @@ body { img { width: 100%; // height: auto; + } } @@ -119,6 +123,10 @@ body { color: @white; padding-bottom: 4%; padding-left: 4%; + + @media(max-width: 500px) { + width: 100%; + } } //============================= TOP-CONTENT @@ -133,9 +141,12 @@ body { @media(max-width: 500px) { background: @white; + padding: 0; + margin: 0 0; width: 100%; display: flex; flex-direction: column; + align-content: center; } @@ -148,6 +159,8 @@ body { width: 100%; display: flex; flex-direction: column; + padding-left: 25px; + padding-right: 25px; } } @@ -180,6 +193,19 @@ body { color: white; } + img { + @media(max-width: 500px) { + object-fit: cover; + width: 450px; + height: 400px; + display: flex; + padding: 0; + position: relative; + left: 20px; + top: 20px; + } + } + } //============================== DESIGN-CONTENT-SECTION @@ -194,6 +220,7 @@ body { @media(max-width: 500px) { width: 100%; + padding: 0; background-color: @white; } @@ -205,6 +232,8 @@ body { @media(max-width: 500px) { width: 100%; + padding-left: 25px; + padding-right: 25px; } } @@ -237,6 +266,17 @@ body { color: white; } + img { + @media(max-width: 500px) { + object-fit: cover; + width: 450px; + height: 400px; + padding: 0; + position: relative; + left: 20px; + } + } + } //========================= MAIN-CONTENT-SECTION @@ -275,6 +315,10 @@ body { @media(max-width: 500px) { width: 100%; display: flex; + padding: 0; + padding-bottom: 40px; + padding-left: 25px; + padding-right: 25px; } } @@ -290,6 +334,11 @@ body { align-items: center; font-size: 25px; letter-spacing: 7px; + + @media(max-width: 500px) { + width: 100%; + display: flex; + } } h5 { @@ -304,5 +353,26 @@ body { align-items: center; font-size: 25px; letter-spacing: 7px; + + @media(max-width: 500px) { + width: 100%; + left: 0; + display: flex; + justify-content: center; + padding: 0; + + } } + + img { + @media(max-width: 500px) { + object-fit: cover; + width: 500px; + height: 250px; + + } + + } + + } From 19a8ff06b939d9ccb83241275703aa7ffaa858d2 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 11:47:53 -0600 Subject: [PATCH 68/83] edited columnreverse and padding on mobile homepage --- css/index.css | 9 +++------ less/home-page.less | 14 ++++++++------ 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/css/index.css b/css/index.css index 3124694801..b100049950 100644 --- a/css/index.css +++ b/css/index.css @@ -351,9 +351,8 @@ body { background: #FFFFFF; padding: 0; margin: 0 0; - width: 100%; display: flex; - flex-direction: column; + flex-direction: column-reverse; align-content: center; } } @@ -367,8 +366,7 @@ body { width: 100%; display: flex; flex-direction: column; - padding-left: 25px; - padding-right: 25px; + padding: 40px; } } .content-top h2 { @@ -433,8 +431,7 @@ body { @media (max-width: 500px) { .designs-content-section .text-content { width: 100%; - padding-left: 25px; - padding-right: 25px; + padding: 40px; } } .designs-content-section h2 { diff --git a/less/home-page.less b/less/home-page.less index 83fb850ebb..0e34888e64 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -143,9 +143,9 @@ body { background: @white; padding: 0; margin: 0 0; - width: 100%; + // width: 100%; display: flex; - flex-direction: column; + flex-direction: column-reverse; align-content: center; } @@ -159,8 +159,9 @@ body { width: 100%; display: flex; flex-direction: column; - padding-left: 25px; - padding-right: 25px; + padding: 40px; + // padding-left: 25px; + // padding-right: 25px; } } @@ -232,8 +233,9 @@ body { @media(max-width: 500px) { width: 100%; - padding-left: 25px; - padding-right: 25px; + padding: 40px; + // padding-left: 25px; + // padding-right: 25px; } } From 8be36c3b7d95989724ba4e199883f95140504c08 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 11:52:31 -0600 Subject: [PATCH 69/83] edited padding on mobile view for homepage --- css/index.css | 4 +++- less/home-page.less | 9 +++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/css/index.css b/css/index.css index b100049950..1962349618 100644 --- a/css/index.css +++ b/css/index.css @@ -374,6 +374,7 @@ body { color: #222222; font-weight: bold; padding-bottom: 16px; + padding-top: 20px; } .content-top .btn { background-color: white; @@ -405,7 +406,7 @@ body { padding: 0; position: relative; left: 20px; - top: 20px; + top: 25px; } } .designs-content-section { @@ -492,6 +493,7 @@ body { .main-content-section h2 { width: 100%; display: flex; + padding: 40px; } } .main-content-section p { diff --git a/less/home-page.less b/less/home-page.less index 0e34888e64..d8013c402a 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -143,7 +143,6 @@ body { background: @white; padding: 0; margin: 0 0; - // width: 100%; display: flex; flex-direction: column-reverse; align-content: center; @@ -160,8 +159,6 @@ body { display: flex; flex-direction: column; padding: 40px; - // padding-left: 25px; - // padding-right: 25px; } } @@ -170,6 +167,7 @@ body { color: @nero; font-weight: bold; padding-bottom: 16px; + padding-top: 20px; } .btn { @@ -203,7 +201,7 @@ body { padding: 0; position: relative; left: 20px; - top: 20px; + top: 25px; } } @@ -234,8 +232,6 @@ body { @media(max-width: 500px) { width: 100%; padding: 40px; - // padding-left: 25px; - // padding-right: 25px; } } @@ -302,6 +298,7 @@ body { @media(max-width: 500px) { width: 100%; display: flex; + padding: 40px; } } From 97f7a07a1630ddd291b752f8ea7a2e89fe9b685a Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 11:56:01 -0600 Subject: [PATCH 70/83] edited padding and p tags on service page --- css/index.css | 3 +++ less/service.less | 4 ++++ services.html | 12 ++++++------ 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 1962349618..86881b3d38 100644 --- a/css/index.css +++ b/css/index.css @@ -585,6 +585,9 @@ body { justify-content: center; padding-top: 60px; } +.tabs .tabs-items p { + padding: 35px; +} .tabs .tabs-item { display: none; width: 75%; diff --git a/less/service.less b/less/service.less index fd6a743604..9f399bf4bc 100644 --- a/less/service.less +++ b/less/service.less @@ -25,6 +25,10 @@ display: flex; justify-content: center; padding-top: 60px; + + p { + padding: 35px; + } } diff --git a/services.html b/services.html index 97b3492c16..fbd8d6363c 100644 --- a/services.html +++ b/services.html @@ -52,24 +52,24 @@
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.

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

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
From d60dc983a1ccea406cdcd444711e1453d417d498 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 12:02:17 -0600 Subject: [PATCH 71/83] edited opacity and hover color of dropdown window --- css/index.css | 5 ++--- less/home-page.less | 5 ++--- services.html | 4 ++-- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/css/index.css b/css/index.css index 86881b3d38..0116585219 100644 --- a/css/index.css +++ b/css/index.css @@ -269,7 +269,7 @@ body { width: 400px; position: absolute; right: 45px; - background-color: grey; + background-color: rgba(153, 166, 177, 0.9); display: flex; flex-direction: column; align-items: center; @@ -286,8 +286,7 @@ body { color: #FFFFFF; } .dropdown .dropdown-link:hover { - color: white; - background-color: #222222; + color: #222222; } .dropdown .dropdown-hidden { display: none; diff --git a/less/home-page.less b/less/home-page.less index d8013c402a..df3a8399df 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -40,7 +40,7 @@ body { width: 400px; position: absolute; right: 45px; - background-color: grey; + background-color: rgba(153,166,177,0.9); display: flex; flex-direction: column; align-items: center; @@ -56,8 +56,7 @@ body { text-decoration: none; color: #FFFFFF; &:hover { - color: white; - background-color: #222222; + color: @nero; } } .dropdown-hidden { diff --git a/services.html b/services.html index fbd8d6363c..3c5e008697 100644 --- a/services.html +++ b/services.html @@ -76,8 +76,8 @@
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. +

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
From 7fb2059de411ec05dd6a354a16fb74df0a4d5e6d Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 12:10:55 -0600 Subject: [PATCH 72/83] aligned items in dropdown menu --- css/index.css | 9 ++++++--- less/home-page.less | 10 +++++++--- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 0116585219..01ab6816c5 100644 --- a/css/index.css +++ b/css/index.css @@ -266,7 +266,8 @@ body { color: black; } .dropdown .dropdown-content { - width: 400px; + width: 950px; + height: 600px; position: absolute; right: 45px; background-color: rgba(153, 166, 177, 0.9); @@ -277,8 +278,10 @@ body { } .dropdown .dropdown-link { width: 100%; - text-align: center; - padding: 15px 0; + display: flex; + align-items: center; + justify-content: center; + padding: 55px 0; font-size: 48px; font-weight: bold; line-height: 85px; diff --git a/less/home-page.less b/less/home-page.less index df3a8399df..6eca6f61ac 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -37,7 +37,8 @@ body { } } .dropdown-content { - width: 400px; + width: 950px; + height: 600px; position: absolute; right: 45px; background-color: rgba(153,166,177,0.9); @@ -48,8 +49,11 @@ body { } .dropdown-link { width: 100%; - text-align: center; - padding: 15px 0; + display: flex; + align-items: center; + justify-content: center; + // text-align: center; + padding: 55px 0; font-size: 48px; font-weight: bold; line-height: 85px; From 227eba9a37bc61626cddfa70f58f4fe8406aecc0 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 12:20:32 -0600 Subject: [PATCH 73/83] made changes to dropdown mobile --- css/index.css | 13 +++++++++++++ less/home-page.less | 12 +++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index 01ab6816c5..4a54c92e63 100644 --- a/css/index.css +++ b/css/index.css @@ -276,6 +276,14 @@ body { align-items: center; margin-top: 10px; } +@media (max-width: 500px) { + .dropdown .dropdown-content { + width: 300px; + height: 400px; + right: 5px; + left: -275px; + } +} .dropdown .dropdown-link { width: 100%; display: flex; @@ -291,6 +299,11 @@ body { .dropdown .dropdown-link:hover { color: #222222; } +@media (max-width: 500px) { + .dropdown .dropdown-link { + font-size: 24px; + } +} .dropdown .dropdown-hidden { display: none; } diff --git a/less/home-page.less b/less/home-page.less index 6eca6f61ac..3e5014008e 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -46,13 +46,19 @@ body { flex-direction: column; align-items: center; margin-top: 10px; + + @media(max-width: 500px) { + width: 300px; + height: 400px; + right: 5px; + left: -275px; + } } .dropdown-link { width: 100%; display: flex; align-items: center; justify-content: center; - // text-align: center; padding: 55px 0; font-size: 48px; font-weight: bold; @@ -62,6 +68,10 @@ body { &:hover { color: @nero; } + + @media(max-width: 500px) { + font-size: 24px; + } } .dropdown-hidden { display: none; From a36b5feb8ec2c024fa9744424161419148c28d93 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 12:59:27 -0600 Subject: [PATCH 74/83] editing nav bar --- css/index.css | 6 ++++++ index.html | 4 +++- js/index.js | 17 +---------------- less/home-page.less | 9 +++++++++ 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/css/index.css b/css/index.css index 4a54c92e63..67b61c427a 100644 --- a/css/index.css +++ b/css/index.css @@ -276,6 +276,12 @@ body { align-items: center; margin-top: 10px; } +.dropdown .dropdown-content p { + padding-top: 20px; +} +.dropdown .dropdown-content .dropdown-buttonClose { + padding-top: 20px; +} @media (max-width: 500px) { .dropdown .dropdown-content { width: 300px; diff --git a/index.html b/index.html index 5b63fe3f91..9eebec9ded 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,10 @@
+
- +

S&J

+
Home Services Contact diff --git a/js/index.js b/js/index.js index 6bc22cdf9e..ab1920f62e 100644 --- a/js/index.js +++ b/js/index.js @@ -62,35 +62,20 @@ class TabLink { class Dropdown { constructor(element) { - // Assign this.element to the dropdown element this.element = element; - // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context) this.button = this.element.querySelector(".dropdown-button"); - // assign the reference to the ".dropdown-content" class found in the dropdown element this.content = this.element.querySelector(".dropdown-content"); - // Add a click handler to the button reference and call the toggleContent method. this.button.addEventListener("click", () => this.toggleContent()); } toggleContent() { - // Toggle the ".dropdown-hidden" class off and on this.content.classList.toggle("dropdown-hidden"); } } - // Nothing to do here, just study what the code is doing and move on to the Dropdown class - let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); - - -// function classToggle() { -// const navs = document.querySelectorAll('.Navbar__Items') - -// navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow')); -// } - -// document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle); \ No newline at end of file + let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); \ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less index 3e5014008e..c847da74aa 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -47,6 +47,15 @@ body { align-items: center; margin-top: 10px; + p { + padding-top: 20px; + } + + .dropdown-buttonClose { + padding-top: 20px; + + } + @media(max-width: 500px) { width: 300px; height: 400px; From ddbb960c2294f9d927115eec59980548bf764c89 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 16:13:33 -0600 Subject: [PATCH 75/83] commit for nav --- css/index.css | 14 ++++++++++---- index.html | 1 + js/index.js | 1 + less/home-page.less | 21 ++++++++++++++++----- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index 67b61c427a..5f4f0577a9 100644 --- a/css/index.css +++ b/css/index.css @@ -266,22 +266,28 @@ body { color: black; } .dropdown .dropdown-content { - width: 950px; + width: 1025px; height: 600px; position: absolute; - right: 45px; + right: 1px; background-color: rgba(153, 166, 177, 0.9); display: flex; flex-direction: column; align-items: center; margin-top: 10px; } -.dropdown .dropdown-content p { +.dropdown .dropdown-content .dropdown-buttonClose { padding-top: 20px; } -.dropdown .dropdown-content .dropdown-buttonClose { +.dropdown .dropdown-content p { padding-top: 20px; } +@media (max-width: 500px) { + .dropdown .dropdown-content p { + position: absolute; + left: 10px; + } +} @media (max-width: 500px) { .dropdown .dropdown-content { width: 300px; diff --git a/index.html b/index.html index 9eebec9ded..595e3875f3 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
+

S&J

diff --git a/js/index.js b/js/index.js index ab1920f62e..8e69d4da61 100644 --- a/js/index.js +++ b/js/index.js @@ -74,6 +74,7 @@ class TabLink { toggleContent() { this.content.classList.toggle("dropdown-hidden"); + } } diff --git a/less/home-page.less b/less/home-page.less index c847da74aa..8c389774a6 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -37,22 +37,33 @@ body { } } .dropdown-content { - width: 950px; + width: 1025px; + // width: 150vh; height: 600px; position: absolute; - right: 45px; + right: 1px; background-color: rgba(153,166,177,0.9); display: flex; flex-direction: column; align-items: center; margin-top: 10px; + .dropdown-buttonClose { + padding-top: 20px; + // display: block; + } + + // .dropdown-button { + // display: none; + // } + p { padding-top: 20px; - } - .dropdown-buttonClose { - padding-top: 20px; + @media(max-width: 500px) { + position: absolute; + left: 10px; + } } From 9de9ad6e74f3253fc111fc891c7e0ab2ab3aa81d Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 16:41:52 -0600 Subject: [PATCH 76/83] styling x and span on dropdown menu --- css/index.css | 8 ++++++++ index.html | 8 ++++++-- less/home-page.less | 13 +++++++++++-- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 5f4f0577a9..b4d65c56f8 100644 --- a/css/index.css +++ b/css/index.css @@ -276,8 +276,16 @@ body { align-items: center; margin-top: 10px; } +.dropdown .dropdown-content span { + color: #FFFFFF; + font-weight: bold; + font-size: 24px; +} .dropdown .dropdown-content .dropdown-buttonClose { + display: flex; + justify-content: space-between; padding-top: 20px; + width: 900px; } .dropdown .dropdown-content p { padding-top: 20px; diff --git a/index.html b/index.html index 595e3875f3..8ae3ffacf5 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,12 @@
-

S&J

-
+ +
+ S&J + +
+ Home Services Contact diff --git a/less/home-page.less b/less/home-page.less index 8c389774a6..deb7772b1e 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -48,9 +48,18 @@ body { align-items: center; margin-top: 10px; + span { + color: @white; + font-weight: bold; + font-size: 24px; + } + .dropdown-buttonClose { - padding-top: 20px; - // display: block; + display: flex; + justify-content: space-between; + padding-top: 20px; + width: 900px; + } // .dropdown-button { From 7868cf3c6607c184ccb0cc2aa3b09b9df486468e Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 16:46:39 -0600 Subject: [PATCH 77/83] styled the span and x on dropdown menu for mobile --- css/index.css | 5 +++++ less/home-page.less | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/css/index.css b/css/index.css index b4d65c56f8..0140c797d1 100644 --- a/css/index.css +++ b/css/index.css @@ -287,6 +287,11 @@ body { padding-top: 20px; width: 900px; } +@media (max-width: 500px) { + .dropdown .dropdown-content .dropdown-buttonClose { + width: 200px; + } +} .dropdown .dropdown-content p { padding-top: 20px; } diff --git a/less/home-page.less b/less/home-page.less index deb7772b1e..9b53d211f0 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -59,6 +59,12 @@ body { justify-content: space-between; padding-top: 20px; width: 900px; + + @media(max-width: 500px) { + width: 200px; + } + + } From 3644c7659c0330e8993ade7995d9f58c65430d7e Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 17:31:43 -0600 Subject: [PATCH 78/83] editing javascript for nav x --- js/index.js | 12 ++++++++++-- less/service.less | 1 + 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/js/index.js b/js/index.js index 8e69d4da61..00c5243b21 100644 --- a/js/index.js +++ b/js/index.js @@ -74,9 +74,17 @@ class TabLink { toggleContent() { this.content.classList.toggle("dropdown-hidden"); - + } } - let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); \ No newline at end of file + let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); + + +const close = document.querySelector(".x"); + +close.addEventListener('click', function(event) { + event.target.toggle("dropdown-hidden"); + console.log(); +}) diff --git a/less/service.less b/less/service.less index 9f399bf4bc..200d07f8d5 100644 --- a/less/service.less +++ b/less/service.less @@ -88,4 +88,5 @@ display: flex; flex-direction: row; align-items: center; + } From c445a91b3c79d7e9b3dc8ff2c0a229d647fc9644 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 17:39:05 -0600 Subject: [PATCH 79/83] editing javascript --- index.html | 4 +++- js/index.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 8ae3ffacf5..84354f0314 100644 --- a/index.html +++ b/index.html @@ -22,13 +22,15 @@
S&J +
- + Home Services Contact
+

S&J

diff --git a/js/index.js b/js/index.js index 00c5243b21..eb50be4488 100644 --- a/js/index.js +++ b/js/index.js @@ -84,7 +84,7 @@ class TabLink { const close = document.querySelector(".x"); -close.addEventListener('click', function(event) { +close.addEventListener("click", function(event) { event.target.toggle("dropdown-hidden"); console.log(); }) From 0a2b86423e41fffa309cbe9ba9d6ca78f3706a2b Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 21 Dec 2018 17:48:03 -0600 Subject: [PATCH 80/83] editied dropdown css for mobile --- css/index.css | 5 +++++ less/home-page.less | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/css/index.css b/css/index.css index 0140c797d1..7a7d10d354 100644 --- a/css/index.css +++ b/css/index.css @@ -281,6 +281,11 @@ body { font-weight: bold; font-size: 24px; } +@media (max-width: 500px) { + .dropdown .dropdown-content span { + font-size: 18px; + } +} .dropdown .dropdown-content .dropdown-buttonClose { display: flex; justify-content: space-between; diff --git a/less/home-page.less b/less/home-page.less index 9b53d211f0..6f95843813 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -52,6 +52,11 @@ body { color: @white; font-weight: bold; font-size: 24px; + + @media(max-width: 500px) { + font-size: 18px; + } + } .dropdown-buttonClose { From b88b71bead20f9fcf8173d61720cd91f00990039 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 4 Jan 2019 11:43:41 -0600 Subject: [PATCH 81/83] commit for resubmitting --- css/index.css | 16 +++++++++++++--- index.html | 6 ++---- js/index.js | 32 +++++++++++++++++++++++++++----- less/home-page.less | 18 +++++++++++++++--- services.html | 10 +++++++++- 5 files changed, 66 insertions(+), 16 deletions(-) diff --git a/css/index.css b/css/index.css index 7a7d10d354..77a9b80dd4 100644 --- a/css/index.css +++ b/css/index.css @@ -240,6 +240,11 @@ body { box-sizing: border-box; margin: 0; } +@media (max-width: 500px) { + body { + overflow-x: hidden; + } +} .header-container p { color: #FFFFFF; position: absolute; @@ -283,7 +288,12 @@ body { } @media (max-width: 500px) { .dropdown .dropdown-content span { - font-size: 18px; + font-size: 20px; + } +} +@media (max-width: 500px) { + .dropdown .dropdown-content img { + height: 20px; } } .dropdown .dropdown-content .dropdown-buttonClose { @@ -450,7 +460,7 @@ body { display: flex; padding: 0; position: relative; - left: 20px; + left: 15px; top: 25px; } } @@ -514,7 +524,7 @@ body { height: 400px; padding: 0; position: relative; - left: 20px; + left: 15px; } } .main-content-section { diff --git a/index.html b/index.html index 84354f0314..0cd01a972a 100644 --- a/index.html +++ b/index.html @@ -15,14 +15,12 @@
- -
+
S&J - - +
Home diff --git a/js/index.js b/js/index.js index eb50be4488..6e9b36cf31 100644 --- a/js/index.js +++ b/js/index.js @@ -82,9 +82,31 @@ class TabLink { let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); -const close = document.querySelector(".x"); -close.addEventListener("click", function(event) { - event.target.toggle("dropdown-hidden"); - console.log(); -}) + + + var buttonOther = document.getElementById("buttonClose"), + + menuConent = document.getElementById("menuContent"); + + + buttonClose.addEventListener("click", function(){ + + if (menuContent.style.display == 'none') { + + menuContent.style.display = 'block'; + + } else { + + menuContent.style.display = 'none'; + + } + +}, false); + + + + + + + diff --git a/less/home-page.less b/less/home-page.less index 6f95843813..8c3e2d5596 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -2,6 +2,10 @@ body { box-sizing: border-box; margin: 0; + @media(max-width: 500px) { + overflow-x: hidden; + } + } @@ -54,11 +58,19 @@ body { font-size: 24px; @media(max-width: 500px) { - font-size: 18px; + font-size: 20px; } } + img { + @media(max-width: 500px) { + height: 20px; + } + } + + + .dropdown-buttonClose { display: flex; justify-content: space-between; @@ -253,7 +265,7 @@ body { display: flex; padding: 0; position: relative; - left: 20px; + left: 15px; top: 25px; } } @@ -324,7 +336,7 @@ body { height: 400px; padding: 0; position: relative; - left: 20px; + left: 15px; } } diff --git a/services.html b/services.html index 3c5e008697..ba572478a4 100644 --- a/services.html +++ b/services.html @@ -16,12 +16,20 @@
-
+ +
+ +
+ S&J + +
+ Home Services Contact
+

S&J

From c7a1e8da40649c1839a0f3d357234f365ca57b47 Mon Sep 17 00:00:00 2001 From: Kelli Rae Hanson Date: Fri, 4 Jan 2019 12:13:13 -0600 Subject: [PATCH 82/83] edited href tags --- index.html | 81 --------------------------------------------------- services.html | 24 +++------------ 2 files changed, 4 insertions(+), 101 deletions(-) diff --git a/index.html b/index.html index 0cd01a972a..a79b5c91ed 100644 --- a/index.html +++ b/index.html @@ -138,87 +138,6 @@

California

- - - - - - - - - - \ No newline at end of file diff --git a/services.html b/services.html index ba572478a4..55f145e550 100644 --- a/services.html +++ b/services.html @@ -24,9 +24,9 @@
- Home - Services - Contact + Home + Services + Contact
@@ -96,24 +96,8 @@
- -