From 8649a131d3ebe580d19276922ca503ca3dd16819 Mon Sep 17 00:00:00 2001 From: JamesB Date: Mon, 17 Dec 2018 12:45:35 -0800 Subject: [PATCH 01/28] Navigation bar mock up --- css/index.css | 168 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 15 ++++- less/index.less | 37 ++++++++++- 3 files changed, 217 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index e6b2b589c1..2c69146c2d 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,167 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; +} +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Your Code Goes Here */ +.container { + width: 53.3%; + margin: 0 auto; + border: 1px solid red; + display: flex; + flex-direction: column; +} +header { + width: 100%; + display: flex; + border: 1px solid greenyellow; + justify-content: flex-end; + background: #d8d8d8; +} +header nav { + width: 100%; + border: 1px solid blue; + display: flex; + justify-content: space-between; +} +header nav a { + display: flex; + text-decoration: none; + color: #fff; + font-weight: bold; + border: 2px solid blue; + margin: 0 20px; +} +.top { + display: flex; +} diff --git a/index.html b/index.html index 8a84a17304..06b600dccb 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@ -

You got this! Good luck.

+
+ +
+ +
+ +
+ +
+ +
\ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..75b3fdf11b 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,39 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +.container { + width: 53.3%; + margin: 0 auto; + border: 1px solid red; + display: flex; + flex-direction: column; +} + +header { + width: 100%; + display: flex; + border: 1px solid greenyellow; + justify-content: flex-end; + background: #d8d8d8; +} + +header nav { + width: 100%; + border: 1px solid blue; + display: flex; + justify-content: space-between; +} + +header nav a { + display: flex; + text-decoration: none; + color: #fff; + font-weight: bold; + border: 2px solid blue; + margin: 0 20px; +} + +.top { + display: flex; +} \ No newline at end of file From 065aec394c0eccbf2803281cf216bc2783fb453a Mon Sep 17 00:00:00 2001 From: JamesB Date: Mon, 17 Dec 2018 18:20:03 -0800 Subject: [PATCH 02/28] top image and h1 in correct position --- css/index.css | 42 +++++++++++++++++++++++++++++++++++----- index.html | 26 +++++++++++++++++++++++-- less/index.less | 51 ++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 107 insertions(+), 12 deletions(-) diff --git a/css/index.css b/css/index.css index 2c69146c2d..f3ef0da760 100644 --- a/css/index.css +++ b/css/index.css @@ -5,6 +5,9 @@ RESET v2.0b1 | 201101 NOTE:WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON */ +* { + box-sizing: border-box; +} html, body, div, @@ -139,20 +142,22 @@ table { margin: 0 auto; border: 1px solid red; display: flex; - flex-direction: column; + flex-wrap: wrap; } header { width: 100%; display: flex; border: 1px solid greenyellow; - justify-content: flex-end; background: #d8d8d8; + height: 50px; + position: relative; } header nav { width: 100%; - border: 1px solid blue; + border: 1px solid hotpink; display: flex; justify-content: space-between; + align-items: center; } header nav a { display: flex; @@ -160,8 +165,35 @@ header nav a { color: #fff; font-weight: bold; border: 2px solid blue; - margin: 0 20px; + margin: 0 85px; +} +.top-img img { + width: 100%; + border: 4px solid hotpink; } -.top { +.top-img h1 { + margin: -325px 0 0 75px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #fff; + width: 100%; + padding-bottom: 100px; +} +.sja { display: flex; + width: 85%; + margin: 0 auto; + border: 2px solid hotpink; +} +.sja-text h1 { + font-weight: bold; + font-size: 28px; + color: #222; +} +.sja-text p { + font-weight: regular; + font-size: 16px; + line-height: 24px; + padding: 50px; } diff --git a/index.html b/index.html index 06b600dccb..899b002dfc 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Home + @@ -30,9 +31,29 @@
- +
+ +

Integrity,
+ Excellence,
+ Progress. +

+
+
+
+

Smith & Jones Architects

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas laudantium tenetur officiis sit beatae corrupti veritatis nisi, velit nobis, cum labore architecto voluptatibus molestiae. Non. +

+
+
+ +
+
+ + + + - + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 75b3fdf11b..af4388a230 100644 --- a/less/index.less +++ b/less/index.less @@ -5,6 +5,9 @@ RESET v2.0b1 | 201101 NOTE:WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON */ +* { + box-sizing: border-box; +} html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, @@ -63,22 +66,26 @@ table{ margin: 0 auto; border: 1px solid red; display: flex; - flex-direction: column; + flex-wrap: wrap; } header { width: 100%; display: flex; border: 1px solid greenyellow; - justify-content: flex-end; + // justify-content: flex-end; background: #d8d8d8; + height: 50px; + position: relative; + // z-index: 1; } header nav { width: 100%; - border: 1px solid blue; + border: 1px solid hotpink; display: flex; justify-content: space-between; + align-items: center; } header nav a { @@ -87,9 +94,43 @@ header nav a { color: #fff; font-weight: bold; border: 2px solid blue; - margin: 0 20px; + margin: 0 85px; +} + +.top-img img { + width: 100%; + border: 4px solid hotpink; } -.top { +.top-img h1 { + // z-index: 2; + margin: -325px 0 0 75px; + // border: 3px solid greenyellow; + font-weight: bold; + font-size: 64px; + line-height: 75px; + // color: #000; + color: #fff; + width: 100%; + padding-bottom: 100px; +} + +.sja { display: flex; + width: 85%; + margin: 0 auto; + border: 2px solid hotpink; +} + +.sja-text h1 { + font-weight: bold; + font-size: 28px; + color: #222; +} + +.sja-text p { + font-weight: regular; + font-size: 16px; + line-height: 24px; + padding: 50px; } \ No newline at end of file From 765ce9ba2be52985ea0330767dbe7553d12662c3 Mon Sep 17 00:00:00 2001 From: JamesB Date: Mon, 17 Dec 2018 20:19:55 -0800 Subject: [PATCH 03/28] Add first section under photo at top of page --- css/index.css | 11 ++++++++++- index.html | 5 ++++- less/index.less | 12 +++++++++++- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index f3ef0da760..78057ac0ec 100644 --- a/css/index.css +++ b/css/index.css @@ -190,10 +190,19 @@ header nav a { font-weight: bold; font-size: 28px; color: #222; + padding-top: 50px; + border: 2px solid red; } .sja-text p { font-weight: regular; font-size: 16px; line-height: 24px; - padding: 50px; + border: 2px solid red; + padding-top: 10px; +} +.btn { + display: inline-block; + border: 1px solid black; + padding: 15px 25px; + margin: 27px 2px; } diff --git a/index.html b/index.html index 899b002dfc..3d61e6f285 100644 --- a/index.html +++ b/index.html @@ -43,8 +43,11 @@

Integrity,

Smith & Jones Architects

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas laudantium tenetur officiis sit beatae corrupti veritatis nisi, velit nobis, cum labore architecto voluptatibus molestiae. Non. +

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

+
Learn More
diff --git a/less/index.less b/less/index.less index af4388a230..2ae41bb825 100644 --- a/less/index.less +++ b/less/index.less @@ -126,11 +126,21 @@ header nav a { font-weight: bold; font-size: 28px; color: #222; + padding-top: 50px; + border: 2px solid red; } .sja-text p { font-weight: regular; font-size: 16px; line-height: 24px; - padding: 50px; + border: 2px solid red; + padding-top: 10px; +} + +.btn { + display: inline-block; + border: 1px solid black; + padding: 15px 25px; + margin: 27px 2px; } \ No newline at end of file From 0d392c5dd65c9a7367c60e503daeb63a71729bf2 Mon Sep 17 00:00:00 2001 From: JamesB Date: Tue, 18 Dec 2018 12:27:23 -0800 Subject: [PATCH 04/28] Add h2 and image for middle content --- css/index.css | 40 ++++++++++++++++++++++++++++++++++++--- index.html | 39 +++++++++++++++++++++++++++++++++----- less/index.less | 50 +++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 115 insertions(+), 14 deletions(-) diff --git a/css/index.css b/css/index.css index 78057ac0ec..2ddf1f9db5 100644 --- a/css/index.css +++ b/css/index.css @@ -137,6 +137,10 @@ table { border-spacing: 0; } /* Your Code Goes Here */ +body { + display: flex; + flex-wrap: wrap; +} .container { width: 53.3%; margin: 0 auto; @@ -151,6 +155,7 @@ header { background: #d8d8d8; height: 50px; position: relative; + z-index: 1; } header nav { width: 100%; @@ -158,6 +163,8 @@ header nav { display: flex; justify-content: space-between; align-items: center; + position: relative; + z-index: 1; } header nav a { display: flex; @@ -170,23 +177,36 @@ header nav a { .top-img img { width: 100%; border: 4px solid hotpink; + position: relative; + z-index: 0; + margin: -50px auto 0; } .top-img h1 { - margin: -325px 0 0 75px; + z-index: 2; + margin: -275px 0 0 75px; font-weight: bold; font-size: 64px; line-height: 75px; color: #fff; width: 100%; padding-bottom: 100px; + position: relative; +} +.main-content-one { + display: flex; + width: 85%; + margin: 0 auto; + border: 2px solid hotpink; + padding-bottom: 80px; } -.sja { +.main-content-two { display: flex; width: 85%; margin: 0 auto; border: 2px solid hotpink; + padding-bottom: 60px; } -.sja-text h1 { +.sja-text h2 { font-weight: bold; font-size: 28px; color: #222; @@ -206,3 +226,17 @@ header nav a { padding: 15px 25px; margin: 27px 2px; } +.fut-des { + padding-left: 20px; +} +.recent-projects { + width: 85%; + font-weight: bold; + font-size: 28px; + color: #222; + border: 2px solid black; + margin: 0 auto; +} +.recent-projects h2 { + padding: 35px 0; +} diff --git a/index.html b/index.html index 3d61e6f285..1fc5310530 100644 --- a/index.html +++ b/index.html @@ -40,12 +40,12 @@

Integrity,

-
+
-

Smith & Jones Architects

-

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

Smith & Jones Architects

+

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

Learn More
@@ -54,6 +54,35 @@

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 loaboramus dissentiet in, nec no errem. +

+
Learn More
+
+
+ +
+

Recent Projects

+
+
+ +
+ +
+
+ + + + + diff --git a/less/index.less b/less/index.less index 2ae41bb825..0a5e0f708f 100644 --- a/less/index.less +++ b/less/index.less @@ -61,6 +61,11 @@ table{ } /* Your Code Goes Here */ +body { + display: flex; + flex-wrap: wrap; +} + .container { width: 53.3%; margin: 0 auto; @@ -77,7 +82,7 @@ header { background: #d8d8d8; height: 50px; position: relative; - // z-index: 1; + z-index: 1; } header nav { @@ -85,7 +90,9 @@ header nav { border: 1px solid hotpink; display: flex; justify-content: space-between; - align-items: center; + align-items: center; + position: relative; + z-index: 1; } header nav a { @@ -100,11 +107,14 @@ header nav a { .top-img img { width: 100%; border: 4px solid hotpink; + position: relative; + z-index: 0; + margin: -50px auto 0; } .top-img h1 { - // z-index: 2; - margin: -325px 0 0 75px; + z-index: 2; + margin: -275px 0 0 75px; // border: 3px solid greenyellow; font-weight: bold; font-size: 64px; @@ -113,16 +123,27 @@ header nav a { color: #fff; width: 100%; padding-bottom: 100px; + position: relative; +} + +.main-content-one { + display: flex; + width: 85%; + margin: 0 auto; + border: 2px solid hotpink; + padding-bottom: 80px; + // padding-top: 25px; } -.sja { +.main-content-two { display: flex; width: 85%; margin: 0 auto; border: 2px solid hotpink; + padding-bottom: 60px; } -.sja-text h1 { +.sja-text h2 { font-weight: bold; font-size: 28px; color: #222; @@ -143,4 +164,21 @@ header nav a { border: 1px solid black; padding: 15px 25px; margin: 27px 2px; +} + +.fut-des { + padding-left: 20px; +} + +.recent-projects { + width: 85%; + font-weight: bold; + font-size: 28px; + color: #222; + border: 2px solid black; + margin: 0 auto; +} + +.recent-projects h2 { + padding: 35px 0; } \ No newline at end of file From fafb26f866db822d3d517f0c9ba1111c29adec34 Mon Sep 17 00:00:00 2001 From: JamesB Date: Tue, 18 Dec 2018 15:40:30 -0800 Subject: [PATCH 05/28] Home page html complete --- css/index.css | 27 +++++++++++-- index.html | 103 ++++++++++++++++++++++++++++++++++++++++++------ less/index.less | 37 +++++++++++++++-- 3 files changed, 148 insertions(+), 19 deletions(-) diff --git a/css/index.css b/css/index.css index 2ddf1f9db5..f7889ae67d 100644 --- a/css/index.css +++ b/css/index.css @@ -140,6 +140,7 @@ table { body { display: flex; flex-wrap: wrap; + font-family: 'Roboto', sans-serif; } .container { width: 53.3%; @@ -231,12 +232,32 @@ header nav a { } .recent-projects { width: 85%; + border: 2px solid black; + margin: 0 auto; +} +.recent-projects h2 { font-weight: bold; font-size: 28px; color: #222; - border: 2px solid black; + padding: 35px 0 15px; +} +.the-villas p { + font-weight: regular; + font-size: 16px; + line-height: 24px; + width: 50%; margin: 0 auto; + padding-top: 25px; } -.recent-projects h2 { - padding: 35px 0; +.the-villas div { + padding-top: 50px; +} +.villas { + border: 1px solid black; + background-color: red; + color: white; + display: flex; + justify-content: center; + align-items: center; + width: 300px; } diff --git a/index.html b/index.html index 1fc5310530..9860274eae 100644 --- a/index.html +++ b/index.html @@ -55,18 +55,18 @@

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 loaboramus dissentiet in, nec no errem. -

-
Learn More
-
+
+ +
+
+

Futuristic Designs

+

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

+
Learn More
+
@@ -75,7 +75,86 @@

Recent Projects

+
+

THE VILLAS

+
+
+

+ The Villas bring to the table win-win survival stategies 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 ckickthroughs from DevOps. Nanotechnology + immersion along the information highway will close the loop on focusing solely on the + bottom line. +

+
+ + +
+
+ +
+
OUTSKIRTS
+
+

+ The Outskirts are amazing to the table win-win survival + strategies to ensure proactive domination. At the end of the day, going forward, + a new normal that has evolved from generation X is on the runway heading towards a + streamlined cloud solution. +
+ Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. + Override the digital divide with additional ckickthroughs from DevOps. Nanotechnology + immersion along the information highway will close the loop on focusing solely on the + bottom line. +

+
+
+ +
+
+ +
+
THE BLOCKS
+
+

+ 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 ckickthroughs 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 32345 702 555 0144

+
+
+ Copyright © 2018 Smith and Jones
diff --git a/less/index.less b/less/index.less index 0a5e0f708f..5a2bca25d6 100644 --- a/less/index.less +++ b/less/index.less @@ -64,6 +64,7 @@ table{ body { display: flex; flex-wrap: wrap; + font-family: 'Roboto', sans-serif; } .container { @@ -172,13 +173,41 @@ header nav a { .recent-projects { width: 85%; + border: 2px solid black; + margin: 0 auto; +} + +.recent-projects h2 { font-weight: bold; font-size: 28px; color: #222; - border: 2px solid black; + padding: 35px 0 15px; +} + +.the-villas p { + font-weight: regular; + font-size: 16px; + line-height: 24px; + width: 50%; margin: 0 auto; + padding-top: 25px; } -.recent-projects h2 { - padding: 35px 0; -} \ No newline at end of file +.the-villas div { + padding-top: 50px; +} + +.villas { + border: 1px solid black; + background-color: red; + color: white; + // padding: 15px 50px; + display: flex; + justify-content: center; + align-items: center; + width: 300px; + +} + + + From 8a60f69b741485391b9d1b91649830b4153fce98 Mon Sep 17 00:00:00 2001 From: JamesB Date: Tue, 18 Dec 2018 19:41:48 -0800 Subject: [PATCH 06/28] SERVICES page html complete --- css/index.css | 86 ++++++++++++++++++++++++++++++------- index.html | 2 +- less/index.less | 111 ++++++++++++++++++++++++++++++++++++++++-------- services.html | 89 +++++++++++++++++++++++++++++++++++++- 4 files changed, 253 insertions(+), 35 deletions(-) diff --git a/css/index.css b/css/index.css index f7889ae67d..77ce14e5a3 100644 --- a/css/index.css +++ b/css/index.css @@ -137,35 +137,29 @@ table { border-spacing: 0; } /* Your Code Goes Here */ -body { - display: flex; - flex-wrap: wrap; - font-family: 'Roboto', sans-serif; -} .container { width: 53.3%; margin: 0 auto; border: 1px solid red; display: flex; flex-wrap: wrap; + position: relative; + font-family: 'Roboto', sans-serif; } -header { - width: 100%; +.container header { + width: 53.3%; display: flex; - border: 1px solid greenyellow; - background: #d8d8d8; + border: 5px solid greenyellow; + background: #828282; height: 50px; - position: relative; - z-index: 1; + position: fixed; } header nav { width: 100%; border: 1px solid hotpink; display: flex; justify-content: space-between; - align-items: center; - position: relative; - z-index: 1; + align-items: center ; } header nav a { display: flex; @@ -179,8 +173,8 @@ header nav a { width: 100%; border: 4px solid hotpink; position: relative; - z-index: 0; - margin: -50px auto 0; + z-index: -1; + margin: auto 0; } .top-img h1 { z-index: 2; @@ -240,6 +234,15 @@ header nav a { font-size: 28px; color: #222; padding: 35px 0 15px; + position: absolute; +} +.the-villas { + display: flex; + flex-wrap: wrap; +} +.the-villas img { + position: relative; + padding-top: 50px; } .the-villas p { font-weight: regular; @@ -260,4 +263,55 @@ header nav a { justify-content: center; align-items: center; width: 300px; + position: relative; + z-index: 1; +} +.container-services { + width: 53.3%; + margin: 0 auto; + border: 1px solid red; + display: flex; + flex-wrap: wrap; + position: relative; + font-family: 'Roboto', sans-serif; +} +.container-services header { + width: 53.3%; + display: flex; + background: #828282; + height: 50px; + position: fixed; +} +.container-services header nav { + width: 100%; + border: 1px solid hotpink; + display: flex; + justify-content: space-between; + align-items: center ; +} +.container-services header nav a { + display: flex; + text-decoration: none; + color: #fff; + font-weight: bold; + border: 2px solid blue; + margin: 0 85px; +} +.container-services h1 { + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #fff; + position: relative; + margin-top: -100px; + margin-left: 100px; +} +.top-paragraph { + width: 80%; + margin: 0 auto; + border: 2px solid black; + padding: 50px; + font-weight: regular; + font-size: 16px; + line-height: 24px; } diff --git a/index.html b/index.html index 9860274eae..eac39f3d5f 100644 --- a/index.html +++ b/index.html @@ -138,7 +138,7 @@

Recent Projects

diff --git a/less/index.less b/less/index.less index 5a2bca25d6..10f35013ac 100644 --- a/less/index.less +++ b/less/index.less @@ -61,11 +61,10 @@ table{ } /* Your Code Goes Here */ -body { - display: flex; - flex-wrap: wrap; - font-family: 'Roboto', sans-serif; -} +// body { +// display: flex; +// flex-wrap: wrap; +// } .container { width: 53.3%; @@ -73,17 +72,19 @@ body { border: 1px solid red; display: flex; flex-wrap: wrap; + position: relative; + font-family: 'Roboto', sans-serif; } -header { - width: 100%; +.container header { + width: 53.3%; display: flex; - border: 1px solid greenyellow; + border: 5px solid greenyellow; // justify-content: flex-end; - background: #d8d8d8; + background: #828282; height: 50px; - position: relative; - z-index: 1; + position: fixed; + // right: 0px; } header nav { @@ -91,9 +92,7 @@ header nav { border: 1px solid hotpink; display: flex; justify-content: space-between; - align-items: center; - position: relative; - z-index: 1; + align-items: center ; } header nav a { @@ -109,8 +108,8 @@ header nav a { width: 100%; border: 4px solid hotpink; position: relative; - z-index: 0; - margin: -50px auto 0; + z-index: -1; + margin: auto 0; } .top-img h1 { @@ -182,6 +181,17 @@ header nav a { font-size: 28px; color: #222; padding: 35px 0 15px; + position: absolute; +} + +.the-villas { + display: flex; + flex-wrap: wrap; +} + +.the-villas img { + position: relative; + padding-top: 50px; } .the-villas p { @@ -206,8 +216,75 @@ header nav a { justify-content: center; align-items: center; width: 300px; - + position: relative; + z-index: 1; +} + +// ==================================== SERVICES PAGE ======================================================= + +.container-services { + width: 53.3%; + margin: 0 auto; + border: 1px solid red; + display: flex; + flex-wrap: wrap; + position: relative; + font-family: 'Roboto', sans-serif; +} + +.container-services header { + width: 53.3%; + display: flex; + // border: 5px solid greenyellow; + // justify-content: flex-end; + background: #828282; + height: 50px; + position: fixed; + // right: 0px; +} + +.container-services header nav { + width: 100%; + border: 1px solid hotpink; + display: flex; + justify-content: space-between; + align-items: center ; +} + +.container-services header nav a { + display: flex; + text-decoration: none; + color: #fff; + font-weight: bold; + border: 2px solid blue; + margin: 0 85px; } +.container-services h1 { + font-weight: bold; + font-size: 64px; + line-height: 75px; + // color: #000; + color: #fff; + // width: 100%; + // padding-bottom: 100px; + position: relative; + margin-top: -100px; + margin-left: 100px; +} + +.top-paragraph { + width: 80%; + margin: 0 auto; + border:2px solid black; + padding: 50px; + font-weight: regular; + font-size: 16px; + line-height: 24px; +} + + + + diff --git a/services.html b/services.html index fb5a79e18a..81b4e79ef4 100644 --- a/services.html +++ b/services.html @@ -11,8 +11,95 @@ +
+ +
+ +
+ + +

Services

+ +
+

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

+
-

Services

+
+
+
+
Pre-Construction
+
Construction
+
Design Build
+
Sustainability
+
+ +
+
+
Pre-Construction
+
+ Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities. +
+
+ +
+
Construction
+
+ Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities. +
+
+ +
+
Design Build
+
+ Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities. +
+
+ +
+
Sustainability
+
+ Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

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

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 32345 702 555 0144

+
+
+ Copyright © 2018 Smith and Jones +
+
+ +
+
+ + + +
+
+ +
+
+ HOME + SERVICES + CONTACT +
+
+
+ + +
-
+
diff --git a/js/index.js b/js/index.js index c7cd6b79af..4cf73f92b8 100644 --- a/js/index.js +++ b/js/index.js @@ -50,6 +50,30 @@ class TabLink { } } + // ============================================ DROPDOWN ============================================================= + + class Dropdown { + constructor(element) { + // assign this.element to the dropdown element + this.element = element; + // assign 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() }) + // Instructor note, the reason we must wrap the toggleContent method in an anonymous function is that 'this' in toggleContent + // would refer to the button, NOT the current instance of the class. + } + + 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)); + diff --git a/less/home-page.less b/less/home-page.less index be32cb4c2a..c9bc8a9609 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -3,6 +3,23 @@ // flex-wrap: wrap; // } +// ================================================================================= + +// .header-container { +// width: 100%; +// height: 70px; +// border-bottom: 1px solid #ffffff; +// display: flex; +// justify-content: center; +// align-items: center; +// background-color: #931d25; +// } +// .header-container .header { +// height: 50px; +// } + +// ===================================================================================== + .container { max-width: 880px; margin: 0 auto; @@ -13,33 +30,33 @@ font-family: 'Roboto', sans-serif; } - .container header { - max-width: 880px; - display: flex; - // border: 5px solid greenyellow; - justify-content: flex-end; - background: #828282; - height: 50px; - position: fixed; - z-index: 10; - } + // .container header { + // max-width: 880px; + // display: flex; + // // border: 5px solid greenyellow; + // justify-content: flex-end; + // background: #828282; + // height: 50px; + // position: fixed; + // z-index: 10; + // } - header nav { - width: 880px; - // border: 1px solid hotpink; - display: flex; - justify-content: space-between; - align-items: center ; - } + // header nav { + // width: 880px; + // // border: 1px solid hotpink; + // display: flex; + // justify-content: space-between; + // align-items: center ; + // } - header nav a { - display: flex; - text-decoration: none; - color: #fff; - font-weight: bold; - border: 2px solid blue; - margin: 0 85px; - } + // header nav a { + // display: flex; + // text-decoration: none; + // color: #fff; + // font-weight: bold; + // border: 2px solid blue; + // margin: 0 85px; + // } .top-img img { width: 100%; diff --git a/less/services-page.less b/less/services-page.less index 7221f3aef2..54486bbb94 100644 --- a/less/services-page.less +++ b/less/services-page.less @@ -7,36 +7,120 @@ flex-wrap: wrap; font-family: 'Roboto', sans-serif; } - - .container-services header { - width: 880px; + + // =============================================================================== + + .dropdown { + z-index: 2; + // position: absolute; + left: 25px; + cursor: pointer; display: flex; - // border: 5px solid greenyellow; - // justify-content: flex-end; - background: #828282; - height: 50px; - position: fixed; - // right: 0px; - padding: 0; - z-index: 10; + justify-content: space-between; + border: 5px solid black; + width: 880px; } - - .container-services header nav { - width: 100%; - // border: 1px solid hotpink; + .dropdown .dropdown-button { + padding: 15px; + // border: 3px solid #ffffff; + color: #ffffff; + font-size: 20px; + font-weight: bold; display: flex; - justify-content: space-between; - align-items: center ; + justify-content: flex-end; + margin-right: 50px; } - - .container-services header nav a { + .dropdown .logo { + display: flex; + justify-content: flex-start; + align-items: center; + margin-left: 50px; + font-weight: bold; + font-size: 28px; + color: white; + } +// .dropdown .dropdown-button:hover { +// // background-color: #be2530; +// } + .dropdown .dropdown-content { + // width: 100%; + width: 880px; + height: 520px; + position: absolute; + background-color: #d8d8d8; display: flex; - text-decoration: none; - color: #fff; + flex-direction: column; + align-items: center; + margin-top: 60px; + // border: 2.5px solid #931d25; + z-index: 20; + } + .dropdown .dropdown-link { + // width: 100%; + text-align: center; + padding: 15px 0; font-weight: bold; - border: 2px solid blue; - margin: 0 85px; + font-size: 48px; + text-decoration: none; + color: #FFF; + display: flex; + flex-direction: column; + align-items: center; + } + .dropdown .dropdown-link:hover { + color: #222; + // background-color: #931d25; + } + .dropdown .dropdown-hidden { + display: none; } + + + .header-container { + width: 880px; + height: 70px; + // border-bottom: 1px solid #ffffff; + display: flex; + // justify-content: center; + align-items: center; + background-color: @footer-background; + margin: 0 auto; + } + .header-container .header { + height: 50px; + } + + // ================================================================================= + +// .container-services header { +// width: 880px; +// display: flex; +// // border: 5px solid greenyellow; +// // justify-content: flex-end; +// background: #828282; +// height: 50px; +// position: fixed; +// // right: 0px; +// padding: 0; +// z-index: 10; +// } + +// .container-services header nav { +// width: 100%; +// // border: 1px solid hotpink; +// display: flex; +// justify-content: space-between; +// align-items: center ; +// } + +// .container-services header nav a { +// display: flex; +// text-decoration: none; +// color: #fff; +// font-weight: bold; +// border: 2px solid blue; +// margin: 0 85px; +// } .container-services h1 { diff --git a/services.html b/services.html index 8b82527469..dc83861d37 100644 --- a/services.html +++ b/services.html @@ -11,14 +11,28 @@ -
-
+ +
+
+ +
+
+ HOME + SERVICES + CONTACT +
+
+
+ + +
+

Services

From 8db5b9b4a2e06085416c9646c07d74991d375aaa Mon Sep 17 00:00:00 2001 From: JamesB Date: Thu, 20 Dec 2018 15:38:48 -0800 Subject: [PATCH 16/28] Everything on navbar complete except converting hamburger to X --- css/index.css | 13 ++++++------- less/home-page.less | 2 +- less/services-page.less | 16 +++++++++------- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/css/index.css b/css/index.css index eddccd64fa..639dd0f14f 100644 --- a/css/index.css +++ b/css/index.css @@ -149,7 +149,6 @@ table { margin: auto 0; } .top-img h1 { - z-index: 2; margin: -275px 0 0 75px; font-weight: bold; font-size: 64px; @@ -318,12 +317,10 @@ table { font-family: 'Roboto', sans-serif; } .dropdown { - z-index: 2; left: 25px; cursor: pointer; display: flex; justify-content: space-between; - border: 5px solid black; width: 880px; } .dropdown .dropdown-button { @@ -346,14 +343,15 @@ table { } .dropdown .dropdown-content { width: 880px; - height: 520px; + height: 525px; position: absolute; - background-color: #d8d8d8; + background-color: rgba(216, 216, 216, 0.95); display: flex; flex-direction: column; align-items: center; - margin-top: 60px; - z-index: 20; + margin-top: 50px; + z-index: 200; + padding-top: 100px; } .dropdown .dropdown-link { text-align: center; @@ -365,6 +363,7 @@ table { display: flex; flex-direction: column; align-items: center; + border: 2px solid red; } .dropdown .dropdown-link:hover { color: #222; diff --git a/less/home-page.less b/less/home-page.less index c9bc8a9609..9308c1ed53 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -67,7 +67,7 @@ } .top-img h1 { - z-index: 2; + // z-index: 2; margin: -275px 0 0 75px; // border: 3px solid greenyellow; font-weight: bold; diff --git a/less/services-page.less b/less/services-page.less index 54486bbb94..5cb9d1942e 100644 --- a/less/services-page.less +++ b/less/services-page.less @@ -11,17 +11,17 @@ // =============================================================================== .dropdown { - z-index: 2; + // z-index: 2; // position: absolute; left: 25px; cursor: pointer; display: flex; justify-content: space-between; - border: 5px solid black; + // border: 5px solid black; width: 880px; } .dropdown .dropdown-button { - padding: 15px; + padding: 15px; // border: 3px solid #ffffff; color: #ffffff; font-size: 20px; @@ -45,15 +45,16 @@ .dropdown .dropdown-content { // width: 100%; width: 880px; - height: 520px; + height: 525px; position: absolute; - background-color: #d8d8d8; + background-color: rgba(216, 216, 216, .95); display: flex; flex-direction: column; align-items: center; - margin-top: 60px; + margin-top: 50px; // border: 2.5px solid #931d25; - z-index: 20; + z-index: 200; + padding-top: 100px; } .dropdown .dropdown-link { // width: 100%; @@ -66,6 +67,7 @@ display: flex; flex-direction: column; align-items: center; + border: 2px solid red; } .dropdown .dropdown-link:hover { color: #222; From 1d17da3ba41c006664fca5087843cdbf5e49a33d Mon Sep 17 00:00:00 2001 From: JamesB Date: Fri, 21 Dec 2018 08:53:39 -0800 Subject: [PATCH 17/28] Update nav bar --- css/index.css | 2 -- index.html | 8 ++++---- js/index.js | 3 +++ less/home-page.less | 2 +- less/services-page.less | 3 ++- services.html | 7 +++++-- 6 files changed, 15 insertions(+), 10 deletions(-) diff --git a/css/index.css b/css/index.css index 639dd0f14f..b1974aa6dc 100644 --- a/css/index.css +++ b/css/index.css @@ -168,7 +168,6 @@ table { display: flex; width: 90%; margin: 0 auto; - border: 2px solid black; padding-bottom: 60px; } .sja-text h2 { @@ -363,7 +362,6 @@ table { display: flex; flex-direction: column; align-items: center; - border: 2px solid red; } .dropdown .dropdown-link:hover { color: #222; diff --git a/index.html b/index.html index b325901731..e8e97c2648 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ Services Contact --> - +
@@ -36,7 +36,7 @@ -
+
- - + + \ No newline at end of file diff --git a/js/index.js b/js/index.js index 4cf73f92b8..3cf8ac310f 100644 --- a/js/index.js +++ b/js/index.js @@ -74,6 +74,9 @@ class TabLink { // 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)); +// ========================================================================================================================== + + diff --git a/less/home-page.less b/less/home-page.less index 9308c1ed53..483728c432 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -93,7 +93,7 @@ display: flex; width: 90%; margin: 0 auto; - border: 2px solid black; + // border: 2px solid black; padding-bottom: 60px; } diff --git a/less/services-page.less b/less/services-page.less index 5cb9d1942e..bfb253db5f 100644 --- a/less/services-page.less +++ b/less/services-page.less @@ -8,6 +8,8 @@ font-family: 'Roboto', sans-serif; } + + // =============================================================================== .dropdown { @@ -67,7 +69,6 @@ display: flex; flex-direction: column; align-items: center; - border: 2px solid red; } .dropdown .dropdown-link:hover { color: #222; diff --git a/services.html b/services.html index dc83861d37..3f5786f879 100644 --- a/services.html +++ b/services.html @@ -11,7 +11,10 @@ - + + + +
@@ -25,7 +28,7 @@
- +
+
+
@@ -29,21 +30,22 @@
-
+ - +

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 + cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service + for state of the art customer service.

@@ -61,17 +63,25 @@

Services

Pre-Construction
- Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities. + Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate + one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state + of the art customer service.

Phosfluorescently engage worldwide methodologies with web-enabled + technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. + Completely pursue scalable customer service through sustainable potentialities.
- +
Construction
- Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

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

Services

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.
@@ -91,7 +105,11 @@

Services

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.
@@ -102,41 +120,41 @@

Services

- -
-

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 32345
702 555 0144

-
-
- Copyright © 2018 Smith and Jones -
-
+ +
+

New York

+

123 Lane
Suite 100
Albany, NY 12345
202 555 0144

+
+
+

Florida

+

Ocean Drive
Suite 201
Orlando, FL 22345
502 555 0144

+
+
+

California

+

Mountain Street
Suite 105
San Diego, CA 32345
702 555 0144

+
+
+ Copyright © 2018 Smith and Jones +
+
-
+ - - - + + - - - - -
-
-
- -
-
- HOME - SERVICES - CONTACT + + +
+
+
+

S&J

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

Integrity,
- Excellence,
- Progress. -

-
-
- -
-
-

Smith & Jones Architects

-

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

-
Learn More
-
-
- - -
-
- -
-
- -
-
-

Futuristic Designs

-

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

-
Learn More
-
-
- -
-

Recent Projects

-
-
- -
THE VILLAS
-
- -
-

- The Villas bring to the table win-win survival stategies 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 ckickthroughs from DevOps. Nanotechnology - immersion along the information highway will close the loop on focusing solely on the - bottom line. + + +

+ +
+

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

+
+
-
-
- -
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 ckickthroughs from DevOps. Nanotechnology - immersion along the information highway will close the loop on focusing solely on the - bottom line. +

+
+
+

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

+
-
-
- -
THE BLOCKS
-
- -
-

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

+
+

Recent Projects

+ +
THE VILLAS
+

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

- Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. - Override the digital divide with additional ckickthroughs from DevOps. Nanotechnology - immersion along the information highway will close the loop on focusing solely on the - bottom line. +
+
+ 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 32345
702 555 0144

-
-
- Copyright © 2018 Smith and Jones -
-
- - - - - - - - - - - -
- + + \ No newline at end of file diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..7cce55ffcb --- /dev/null +++ b/less/footer.less @@ -0,0 +1,18 @@ +// ### Footer Headings +// - Font Weight: Regular +// - Font Size: 20px +// - Line Height: 24px +// - Color: #FFFFFF + +// ### Footer Text +// - Font Weight: Regular +// - Font Size: 14px +// - Line Height: 26px +// - Color: #FFFFFF + +// ## Footer +// Background: #828282 + +// ===================== Start Redo project starting 12/26/2018 ========================= + +// ====================== End Redo project starting 12/26/2018 ========================== diff --git a/less/home-page.less b/less/home-page.less index 0a7d76684a..e28443d35a 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -1,3 +1,87 @@ +// ===================== Start Redo project starting 12/26/2018 ========================= +// ### Home Page +// - Recent Projects Gray Square: #D8D8D8 +// - Button borders: #222222 + +// ### Jumbotron Headers +// - Font Weight: Bold +// - Font Size: 64px +// - Line Height: 75px +// - Color: #FFFFFF + +.main-content { + display: flex; + flex-direction: column; +} + +.main-header { + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #fff; + position: absolute; + top: 275px; + left: 450px; +} + +.main-img img { + width: 100%; + position: relative; + top: -50px; + z-index: -1; +} + +.smith-jones { + display: flex; + border: 2px solid red; + padding-bottom: 75px; +} + + .text { + border: 2px solid black; + padding: 50px 40px; + font-size: 16px; + line-height: 24px; +} + + h2 { + padding-bottom: 20px; +} + + button { + border: 1px solid #222; + background-color: #fff; + height: 35px; + width: 100px; +} + + p { + padding-bottom: 25px; +} + + .img { + display: flex; +} + +.future-designs { + display: flex; + padding-bottom: 75px; + border: 2px solid greenyellow; +} + +.the-villas p { + width: 50%; + margin: 0 auto; + font-size: 16px; + line-height: 24px; + padding-top: 75px; +} + +.the-villas h2 { + padding-bottom: 50px; +} +// ====================== End Redo project starting 12/26/2018 ========================== + // body { // display: flex; // flex-wrap: wrap; @@ -20,299 +104,293 @@ // ===================================================================================== -.container { - max-width: 880px; - margin: 0 auto; - // border: 1px solid red; - // display: flex; - // flex-wrap: wrap; - // position: relative; - font-family: 'Roboto', sans-serif; - border: 2px solid red; - } - - // .container header { - // max-width: 880px; - // display: flex; - // // border: 5px solid greenyellow; - // justify-content: flex-end; - // background: #828282; - // height: 50px; - // position: fixed; - // z-index: 10; - // } - - // header nav { - // width: 880px; - // // border: 1px solid hotpink; - // display: flex; - // justify-content: space-between; - // align-items: center ; - // } - - // header nav a { - // display: flex; - // text-decoration: none; - // color: #fff; - // font-weight: bold; - // border: 2px solid blue; - // margin: 0 85px; - // } - - .top-img img { - width: 100%; - // border: 4px solid hotpink; - position: relative; - z-index: -1; - margin: auto 0; - } - - .top-img h1 { - // z-index: 2; - margin: -275px 0 0 75px; - // border: 3px solid greenyellow; - font-weight: bold; - font-size: 64px; - line-height: 75px; - // color: #000; - color: #fff; - // width: 100%; - padding-bottom: 100px; - position: absolute; - display: inline; - } - - .main-content-one { - display: flex; - width: 90%; - margin: 0 auto; - // border: 2px solid hotpink; - padding-bottom: 80px; - // padding-top: 25px; - } - - .main-content-two { - display: flex; - width: 90%; - margin: 0 auto; - // border: 2px solid black; - padding-bottom: 60px; - } +// .container { +// max-width: 880px; +// margin: 0 auto; +// // border: 1px solid red; +// // display: flex; +// // flex-wrap: wrap; +// // position: relative; +// font-family: 'Roboto', sans-serif; +// border: 2px solid red; +// } + +// .container header { +// max-width: 880px; +// display: flex; +// // border: 5px solid greenyellow; +// justify-content: flex-end; +// background: #828282; +// height: 50px; +// position: fixed; +// z-index: 10; +// } - .sja-text h2 { - font-weight: bold; - font-size: 28px; - color: #222; - padding: 25px 0; - } - - .sja-text p { - font-weight: regular; - font-size: 16px; - line-height: 24px; - padding-right: 40px; - } - - .sja-img { - width: 150%; - } - - .sja-img img { - width: 100%; - } - - .btn { - display: inline-block; - border: 1px solid black; - padding: 15px 25px; - margin: 27px 2px; - } - - .fut-des { - padding-left: 20px; - } - - .recent-projects { - max-width: 90%; - // border: 2px solid black; - margin: 0 auto; - } - - .recent-projects h2 { - font-weight: bold; - font-size: 28px; - color: #222; - padding: 35px 0 15px; - position: absolute; - } - - .the-villas { - display: flex; - flex-wrap: wrap; - } - - .the-villas img { - position: relative; - padding-top: 100px; - width: 100%; - } - - .the-villas p { - font-size: 16px; - line-height: 24px; - width: 50%; - margin: 0 auto; - padding: 75px 0; - } - - - - .villa-img { - position: relative; - width: 100%; - } - - .villas { - border: 1px solid white; - background-color: #d8d8d8; - color: black; - right: 0; - width: 250px; - height: 75px; - position: absolute; - bottom: -22px; - text-align: center; - font-size: 28px; - padding-top: 20px; - } +// header nav { +// width: 880px; +// // border: 1px solid hotpink; +// display: flex; +// justify-content: space-between; +// align-items: center ; +// } - .the-outskirts { - position: relative; - } +// header nav a { +// display: flex; +// text-decoration: none; +// color: #fff; +// font-weight: bold; +// border: 2px solid blue; +// margin: 0 85px; +// } - .the-outskirts-img { - position: relative; - } +// .top-img img { +// width: 100%; +// // border: 4px solid hotpink; +// position: relative; +// z-index: -1; +// margin: auto 0; +// } - .the-outskirts p { - font-size: 16px; - line-height: 24px; - width: 50%; - margin: 0 auto; - padding: 75px 0; - } - - .the-outskirts img { - width: 100%; - } - - .outskirts { - border: 1px solid white; - background-color: #d8d8d8; - color: black; - width: 250px; - height: 75px; - position: absolute; - text-align: center; - font-size: 28px; - padding-top: 20px; - top: 170px; - } - - .the-blocks img { - width: 100%; - } - - .the-blocks p { - font-size: 16px; - line-height: 24px; - width: 50%; - margin: 0 auto; - padding: 75px 0; - } - - .the-blocks-img { - position: relative; - } - - .blocks { - position: absolute; - border: 1px solid white; - background-color: #d8d8d8; - color: black; - width: 250px; - height: 75px; - text-align: center; - font-size: 28px; - padding-top: 20px; - right: 0; - bottom: -37px; - } - - .footer { - background-color: @footer-background; - width: 100%; - display: flex; - flex-wrap: wrap; - font-weight: regular; - font-size: 14px; - line-height: 26px; - color: #FFF; - } - - .copyright { - margin: 0 auto; - display: flex; - } - - .mobile { - display: none; - } - - // ================================================ MOBILE ================================================================== - - - @media(max-width: 500px) { - - .top-img h1 { - font-size: 32px; - line-height: 40px; - padding-bottom: 0; - margin: -150px 0 0 25px; - } - - .mobile { - display: block; - border: 2px solid red; - } - - .desktop { - display: none; - } - - .main-content-one { - flex-direction: column-reverse; - } - - .sja-img .desktop { - display: none; - } - - .sja-img .mobile { - display: block; - border: 2px solid purple; - width: 60%; - } - - .footer { - flex-direction: column; - justify-content: center; - width: 100%; - } - - .dropdown .dropdown-content { - width: 100%; - } - - } +// .top-img h1 { +// // z-index: 2; +// margin: -275px 0 0 75px; +// // border: 3px solid greenyellow; +// font-weight: bold; +// font-size: 64px; +// line-height: 75px; +// // color: #000; +// color: #fff; +// // width: 100%; +// padding-bottom: 100px; +// position: absolute; +// display: inline; +// } + +// .main-content-one { +// display: flex; +// width: 90%; +// margin: 0 auto; +// // border: 2px solid hotpink; +// padding-bottom: 80px; +// // padding-top: 25px; +// } + +// .main-content-two { +// display: flex; +// width: 90%; +// margin: 0 auto; +// // border: 2px solid black; +// padding-bottom: 60px; +// } + +// .sja-text h2 { +// font-weight: bold; +// font-size: 28px; +// color: #222; +// padding: 25px 0; +// } + +// .sja-text p { +// font-weight: regular; +// font-size: 16px; +// line-height: 24px; +// padding-right: 40px; +// } +// .sja-img { +// width: 150%; +// } + +// .sja-img img { +// width: 100%; +// } + +// .btn { +// display: inline-block; +// border: 1px solid black; +// padding: 15px 25px; +// margin: 27px 2px; +// } + +// .fut-des { +// padding-left: 20px; +// } + +// .recent-projects { +// max-width: 90%; +// // border: 2px solid black; +// margin: 0 auto; +// } + +// .recent-projects h2 { +// font-weight: bold; +// font-size: 28px; +// color: #222; +// padding: 35px 0 15px; +// position: absolute; +// } + +// .the-villas { +// display: flex; +// flex-wrap: wrap; +// } + +// .the-villas img { +// position: relative; +// padding-top: 100px; +// width: 100%; +// } + +// .the-villas p { +// font-size: 16px; +// line-height: 24px; +// width: 50%; +// margin: 0 auto; +// padding: 75px 0; +// } + +// .villa-img { +// position: relative; +// width: 100%; +// } + +// .villas { +// border: 1px solid white; +// background-color: #d8d8d8; +// color: black; +// right: 0; +// width: 250px; +// height: 75px; +// position: absolute; +// bottom: -22px; +// text-align: center; +// font-size: 28px; +// padding-top: 20px; +// } + +// .the-outskirts { +// position: relative; +// } + +// .the-outskirts-img { +// position: relative; +// } + +// .the-outskirts p { +// font-size: 16px; +// line-height: 24px; +// width: 50%; +// margin: 0 auto; +// padding: 75px 0; +// } + +// .the-outskirts img { +// width: 100%; +// } + +// .outskirts { +// border: 1px solid white; +// background-color: #d8d8d8; +// color: black; +// width: 250px; +// height: 75px; +// position: absolute; +// text-align: center; +// font-size: 28px; +// padding-top: 20px; +// top: 170px; +// } + +// .the-blocks img { +// width: 100%; +// } + +// .the-blocks p { +// font-size: 16px; +// line-height: 24px; +// width: 50%; +// margin: 0 auto; +// padding: 75px 0; +// } + +// .the-blocks-img { +// position: relative; +// } + +// .blocks { +// position: absolute; +// border: 1px solid white; +// background-color: #d8d8d8; +// color: black; +// width: 250px; +// height: 75px; +// text-align: center; +// font-size: 28px; +// padding-top: 20px; +// right: 0; +// bottom: -37px; +// } + +// .footer { +// background-color: @footer-background; +// width: 100%; +// display: flex; +// flex-wrap: wrap; +// font-weight: regular; +// font-size: 14px; +// line-height: 26px; +// color: #FFF; +// } + +// .copyright { +// margin: 0 auto; +// display: flex; +// } + +// .mobile { +// display: none; +// } + +// ================================================ MOBILE ================================================================== + +// @media (max-width: 500px) { +// .top-img h1 { +// font-size: 32px; +// line-height: 40px; +// padding-bottom: 0; +// margin: -150px 0 0 25px; +// } + +// .mobile { +// display: block; +// border: 2px solid red; +// } + +// .desktop { +// display: none; +// } + +// .main-content-one { +// flex-direction: column-reverse; +// } + +// .sja-img .desktop { +// display: none; +// } + +// .sja-img .mobile { +// display: block; +// border: 2px solid purple; +// width: 60%; +// } + +// .footer { +// flex-direction: column; +// justify-content: center; +// width: 100%; +// } + +// .dropdown .dropdown-content { +// width: 100%; +// } +// } diff --git a/less/index.less b/less/index.less index 42e0979571..c68d61fda2 100644 --- a/less/index.less +++ b/less/index.less @@ -5,72 +5,183 @@ RESET v2.0b1 | 201101 NOTE:WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON */ -* { - box-sizing: border-box; -} -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; +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; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } -body{ - line-height:1; +body { + line-height: 1; } -ol,ul{ - list-style:none; +ol, +ul { + list-style: none; } -blockquote,q{ - quotes:none; +blockquote, +q { + quotes: none; } -blockquote:before,blockquote:after, -q:before,q:after{ - content:’’; - content:none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; } -ins{ - text-decoration:none; +ins { + text-decoration: none; } -del{ - text-decoration:line-through; +del { + text-decoration: line-through; } -table{ - border-collapse:collapse; - border-spacing:0; +table { + border-collapse: collapse; + border-spacing: 0; } /* Your Code Goes Here */ -@import '/variables.less'; -@import '/home-page.less'; -@import '/services-page.less'; +// ===================== Start Redo project starting 12/26/2018 ========================= +// ### General Text +// - Font Weight: Regular +// - Font Size: 16px +// - Line Height: 24px -// ==================================== SERVICES PAGE ======================================================= +// ### Sub Headers +// - Font Weight: Bold +// - Font Size: 28px +// - Color: #222222 + +* { + box-sizing: border-box; +} + +.container { + color: #222; + font-family: Roboto, Arial, sans-serif; + margin: 0 auto; + width: 880px; + font-weight: regular; + font-size: 16px; + line-height: 24px; +} + +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + font-size: 28px; + color: #222; +} +// ====================== End Redo project starting 12/26/2018 ========================== +@import "/navigation.less"; +@import "/variables.less"; +@import "/home-page.less"; +@import "/services-page.less"; +@import "/footer.less"; diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..e6f24a679d --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,38 @@ +// ### Navigation Logo +// - Font Weight: Bold +// - Font Size: 24px +// - Color: #FFFFFF + +// ### Navigation Text (Expanded) +// - Font Weight: Bold +// - Font Size: 48px +// - Line Height: 85px +// - Color: #FFFFFF +// - Hover Color: #222222 + +// ===================== Start Redo project starting 12/26/2018 ========================= +.nav-container { + border: 2px solid black; + background-color: rgb(195, 196, 200); +} + +.nav { + display: flex; + justify-content: space-between; + border: 2px solid hotpink; + height: 50px; + align-items: center; + margin: 0 75px; +} + +.name h2 { + font-weight: bold; + font-size: 24px; + color: #fff; + padding: 0; +} + +.open-hamburger { + display: flex; +} +// ====================== End Redo project starting 12/26/2018 ========================== diff --git a/less/services-page.less b/less/services-page.less index 8ea2561164..d6bb4d775a 100644 --- a/less/services-page.less +++ b/less/services-page.less @@ -1,255 +1,257 @@ +// ===================== Start Redo project starting 12/26/2018 ========================= +// ### Services Page +// - Tab selected background: #5E9FB9 +// - Tab Hover background: #222222 +// - Tab Hover color: #FFF; +// ====================== End Redo project starting 12/26/2018 ========================== -.container-services { - width: 880px; - margin: 0 auto; - // border: 1px solid red; - display: flex; - flex-wrap: wrap; - font-family: 'Roboto', sans-serif; - } - - - - // =============================================================================== - - .dropdown { - // z-index: 2; - // position: absolute; - left: 25px; - cursor: pointer; - display: flex; - justify-content: space-between; - // border: 5px solid black; - //width: 880px; - width: 100%; - } - .dropdown .dropdown-button { - padding: 15px; - // border: 3px solid #ffffff; - color: #ffffff; - font-size: 20px; - font-weight: bold; - display: flex; - justify-content: flex-end; - margin-right: 50px; - } - .dropdown .logo { - display: flex; - justify-content: flex-start; - align-items: center; - margin-left: 50px; - font-weight: bold; - font-size: 28px; - color: white; - } -// .dropdown .dropdown-button:hover { -// // background-color: #be2530; -// } - .dropdown .dropdown-content { - width: 100%; - // width: 880px; - height: 525px; - position: absolute; - background-color: rgba(216, 216, 216, .95); - display: flex; - flex-direction: column; - align-items: center; - margin-top: 50px; - // border: 2.5px solid #931d25; - z-index: 200; - padding-top: 100px; - } - .dropdown .dropdown-link { - // width: 100%; - text-align: center; - padding: 15px 0; - font-weight: bold; - font-size: 48px; - text-decoration: none; - color: #FFF; - display: flex; - flex-direction: column; - align-items: center; - } - .dropdown .dropdown-link:hover { - color: #222; - // background-color: #931d25; - } - .dropdown .dropdown-hidden { - display: none; - } - - - .header-container { - // width: 880px; - width: 100%; - height: 70px; - // border-bottom: 1px solid #ffffff; - display: flex; - // justify-content: center; - align-items: center; - background-color: @footer-background; - margin: 0 auto; - } - .header-container .header { - height: 50px; - } - - // ================================================================================= - -// .container-services header { +// .container-services { // width: 880px; +// margin: 0 auto; +// // border: 1px solid red; // display: flex; -// // border: 5px solid greenyellow; -// // justify-content: flex-end; -// background: #828282; -// height: 50px; -// position: fixed; -// // right: 0px; -// padding: 0; -// z-index: 10; +// flex-wrap: wrap; +// font-family: 'Roboto', sans-serif; // } - -// .container-services header nav { -// width: 100%; -// // border: 1px solid hotpink; + +// =============================================================================== + +// .dropdown { +// // z-index: 2; +// // position: absolute; +// left: 25px; +// cursor: pointer; // display: flex; // justify-content: space-between; -// align-items: center ; +// // border: 5px solid black; +// //width: 880px; +// width: 100%; +// } +// .dropdown .dropdown-button { +// padding: 15px; +// // border: 3px solid #ffffff; +// color: #ffffff; +// font-size: 20px; +// font-weight: bold; +// display: flex; +// justify-content: flex-end; +// margin-right: 50px; +// } +// .dropdown .logo { +// display: flex; +// justify-content: flex-start; +// align-items: center; +// margin-left: 50px; +// font-weight: bold; +// font-size: 28px; +// color: white; // } - -// .container-services header nav a { +// // .dropdown .dropdown-button:hover { +// // // background-color: #be2530; +// // } +// .dropdown .dropdown-content { +// width: 100%; +// // width: 880px; +// height: 525px; +// position: absolute; +// background-color: rgba(216, 216, 216, .95); // display: flex; +// flex-direction: column; +// align-items: center; +// margin-top: 50px; +// // border: 2.5px solid #931d25; +// z-index: 200; +// padding-top: 100px; +// } +// .dropdown .dropdown-link { +// // width: 100%; +// text-align: center; +// padding: 15px 0; +// font-weight: bold; +// font-size: 48px; // text-decoration: none; -// color: #fff; +// color: #FFF; +// display: flex; +// flex-direction: column; +// align-items: center; +// } +// .dropdown .dropdown-link:hover { +// color: #222; +// // background-color: #931d25; +// } +// .dropdown .dropdown-hidden { +// display: none; +// } + +// .header-container { +// // width: 880px; +// width: 100%; +// height: 70px; +// // border-bottom: 1px solid #ffffff; +// display: flex; +// // justify-content: center; +// align-items: center; +// background-color: @footer-background; +// margin: 0 auto; +// } +// .header-container .header { +// height: 50px; +// } + +// // ================================================================================= + +// // .container-services header { +// // width: 880px; +// // display: flex; +// // // border: 5px solid greenyellow; +// // // justify-content: flex-end; +// // background: #828282; +// // height: 50px; +// // position: fixed; +// // // right: 0px; +// // padding: 0; +// // z-index: 10; +// // } + +// // .container-services header nav { +// // width: 100%; +// // // border: 1px solid hotpink; +// // display: flex; +// // justify-content: space-between; +// // align-items: center ; +// // } + +// // .container-services header nav a { +// // display: flex; +// // text-decoration: none; +// // color: #fff; +// // font-weight: bold; +// // border: 2px solid blue; +// // margin: 0 85px; +// // } + +// .container-services h1 { // font-weight: bold; -// border: 2px solid blue; -// margin: 0 85px; -// } - - - .container-services h1 { - font-weight: bold; - font-size: 64px; - line-height: 75px; - // color: #000; - color: #fff; - // width: 100%; - // padding-bottom: 100px; - position: relative; - margin-top: -100px; - margin-left: 100px; - } - - .container-services img { - width: 100%; - } - - .top-paragraph { - width: 90%; - margin: 0 auto; - padding: 50px; - font-weight: regular; - font-size: 16px; - line-height: 24px; - } - - .tabs-links { - display: flex; - flex-direction: row; - justify-content: space-evenly; - padding: 50px 0; - // border: 2px solid greenyellow; - } - -// - Tab selected background: #5E9FB9 -// - Tab Hover background: #222222 -// - Tab Hover color: #FFF; +// font-size: 64px; +// line-height: 75px; +// // color: #000; +// color: #fff; +// // width: 100%; +// // padding-bottom: 100px; +// position: relative; +// margin-top: -100px; +// margin-left: 100px; +// } - .tabs-link { - border: 1px solid black; - padding: 20px; - font-weight: bold; - } - - .tabs-link:hover { - background-color: #222; - color: #FFF; - } - - .tabs-link-selected { - background-color: #5E9FB9; - } - - .tabs-items { - display: flex; - flex-direction: row; - // width: 80%; - // border: 2px solid hotpink; - } - -// .tabs-item { +// .container-services img { +// width: 100%; +// } + +// .top-paragraph { +// width: 90%; +// margin: 0 auto; +// padding: 50px; +// font-weight: regular; +// font-size: 16px; +// line-height: 24px; +// } + +// .tabs-links { // display: flex; // flex-direction: row; -// border: 2px solid blue; -// } - -.tabs-item-title { - font-weight: bold; - font-size: 20px; -} - -.tabs-item { - display: none; -} - -.tabs-item-selected { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - padding: 50px 0; - width: 90%; - margin: 0 auto; - - .tabs-item-description { - width: 40%; - margin: 0; - padding-right: 20px; - } - .tabs-item-title { - padding-bottom: 25px; - width: 100%; - margin-left: 17px; - } - -} - -.size { - padding: 50px 25px; -} - -.footer h3 { - font-weight: bold; -} - -.email { - width: 33%; -} - -.california { - width: 22%; -} - -.new-york { - width: 22%; -} - -.florida { - width: 22%; -} - -.copyright { - font-size: 12px; -} - -// footer styling is on home-page.less \ No newline at end of file +// justify-content: space-evenly; +// padding: 50px 0; +// // border: 2px solid greenyellow; +// } + +// // - Tab selected background: #5E9FB9 +// // - Tab Hover background: #222222 +// // - Tab Hover color: #FFF; + +// .tabs-link { +// border: 1px solid black; +// padding: 20px; +// font-weight: bold; +// } + +// .tabs-link:hover { +// background-color: #222; +// color: #FFF; +// } + +// .tabs-link-selected { +// background-color: #5E9FB9; +// } + +// .tabs-items { +// display: flex; +// flex-direction: row; +// // width: 80%; +// // border: 2px solid hotpink; +// } + +// // .tabs-item { +// // display: flex; +// // flex-direction: row; +// // border: 2px solid blue; +// // } + +// .tabs-item-title { +// font-weight: bold; +// font-size: 20px; +// } + +// .tabs-item { +// display: none; +// } + +// .tabs-item-selected { +// display: flex; +// flex-wrap: wrap; +// justify-content: space-around; +// padding: 50px 0; +// width: 90%; +// margin: 0 auto; + +// .tabs-item-description { +// width: 40%; +// margin: 0; +// padding-right: 20px; +// } +// .tabs-item-title { +// padding-bottom: 25px; +// width: 100%; +// margin-left: 17px; +// } + +// } + +// .size { +// padding: 50px 25px; +// } + +// .footer h3 { +// font-weight: bold; +// } + +// .email { +// width: 33%; +// } + +// .california { +// width: 22%; +// } + +// .new-york { +// width: 22%; +// } + +// .florida { +// width: 22%; +// } + +// .copyright { +// font-size: 12px; +// } + +// // footer styling is on home-page.less diff --git a/old-index.html b/old-index.html new file mode 100644 index 0000000000..dfd7f1e19b --- /dev/null +++ b/old-index.html @@ -0,0 +1,155 @@ + + + + \ No newline at end of file diff --git a/test.html b/test.html new file mode 100644 index 0000000000..cd56888ad8 --- /dev/null +++ b/test.html @@ -0,0 +1,145 @@ + + + +
+

S&J

+ +
+ +
+
+
+
+

Integrity,
+ Excellence,
+ Progress.

+
+
+
+
+

Smith & Jones Architects

+

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

+
Learn More
+
+ +
+ +

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

+ +
View Designs
+
+ +
+
+

Recent Projects

+
+
THE VILLAS
+ +

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

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

+

+
+
+
OUTSKIRTS
+ +

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

+

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

+
+
+
THE BLOCKS
+ +

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

+

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

+
+ +
+ +
+
+
+

Interested in starting a project?

+

Let’s talk:

+
+ +
+ +

We'll never share your email with anyone else.

+
+
+

New York

+

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

+
+
+

Florida

+

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

+
+
+

California

+

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

+
+

Copyright © 2018 Smith and Jones

+
+
+ + + + \ No newline at end of file From b5aa8e5b7c8e6b3463f1b64b084d769e8cacfbc7 Mon Sep 17 00:00:00 2001 From: JamesB Date: Tue, 1 Jan 2019 19:17:34 -0800 Subject: [PATCH 20/28] starting over add the villas --- css/index.css | 25 +++++++- index.html | 28 ++++++--- less/home-page.less | 31 +++++++++- test.html | 145 -------------------------------------------- 4 files changed, 73 insertions(+), 156 deletions(-) delete mode 100644 test.html diff --git a/css/index.css b/css/index.css index a8470d8afb..c6221e76f8 100644 --- a/css/index.css +++ b/css/index.css @@ -179,6 +179,7 @@ h6 { .main-content { display: flex; flex-direction: column; + position: relative; } .main-header { font-weight: bold; @@ -186,8 +187,8 @@ h6 { line-height: 75px; color: #fff; position: absolute; - top: 275px; - left: 450px; + top: 200px; + left: 50px; } .main-img img { width: 100%; @@ -236,3 +237,23 @@ p { .the-villas h2 { padding-bottom: 50px; } +.recent-projects { + position: relative; +} +.box { + display: flex; + justify-content: center; + align-items: center; + background-color: #d8d8d8; + border: 1px solid #fff; + color: #222; + height: 100px; + width: 320px; + letter-spacing: 5px; + font-size: 24px; +} +.villas { + position: absolute; + right: 30px; + top: 250px; +} diff --git a/index.html b/index.html index a61fae5cdc..a949a48860 100644 --- a/index.html +++ b/index.html @@ -25,12 +25,12 @@

S&J

-
-

Integrity,
- Excellence,
- Progress. -

- +
+

Integrity,
+ Excellence,
+ Progress. +

+

Smith & Jones Architects

@@ -57,7 +57,7 @@

Futuristic Designs

Recent Projects

-
THE VILLAS
+
THE VILLAS

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

Recent Projects

close the loop on focusing solely on the bottom line.

+ +
+ +
OUTSKIRTS
+

+ The Outskirts are amazing to the table win-win survival strategies to ensure proactive domination. At the end of + the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a + streamlined cloud solution. + + Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital + divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will + close the loop on focusing solely on the bottom line. +

+
diff --git a/less/home-page.less b/less/home-page.less index e28443d35a..7ad7b357db 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -9,9 +9,12 @@ // - Line Height: 75px // - Color: #FFFFFF + + .main-content { display: flex; flex-direction: column; + position: relative; } .main-header { @@ -20,8 +23,8 @@ line-height: 75px; color: #fff; position: absolute; - top: 275px; - left: 450px; + top: 200px; + left: 50px; } .main-img img { @@ -80,6 +83,30 @@ .the-villas h2 { padding-bottom: 50px; } + +.recent-projects { + position: relative; +} + +.box { + display: flex; + justify-content: center; + align-items: center; + background-color: #d8d8d8; + border: 1px solid #fff; + color: #222; + height: 100px; + width: 320px; + // font-weight: bold; + letter-spacing: 5px; + font-size: 24px; +} + +.villas { + position: absolute; + right: 30px; + top: 250px; +} // ====================== End Redo project starting 12/26/2018 ========================== // body { diff --git a/test.html b/test.html deleted file mode 100644 index cd56888ad8..0000000000 --- a/test.html +++ /dev/null @@ -1,145 +0,0 @@ - - - -
-

S&J

- -
- -
-
-
-
-

Integrity,
- Excellence,
- Progress.

-
-
-
-
-

Smith & Jones Architects

-

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

-
Learn More
-
- -
- -

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

- -
View Designs
-
- -
-
-

Recent Projects

-
-
THE VILLAS
- -

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

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

-

-
-
-
OUTSKIRTS
- -

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

-

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

-
-
-
THE BLOCKS
- -

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

-

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

-
- -
- -
-
-
-

Interested in starting a project?

-

Let’s talk:

-
- -
- -

We'll never share your email with anyone else.

-
-
-

New York

-

- 123 Lane
- Suite 100
- Albany, NY 12345
- 202 555 0144 -

-
-
-

Florida

-

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

-
-
-

California

-

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

-
-

Copyright © 2018 Smith and Jones

-
-
- - - - \ No newline at end of file From 12d6ec80066382be99749f2f9e647e6a8dc43996 Mon Sep 17 00:00:00 2001 From: JamesB Date: Wed, 2 Jan 2019 09:41:01 -0800 Subject: [PATCH 21/28] starting over add 'the blocks' and the footer --- css/index.css | 43 ++++++++++++++++++++++++++++++++++++++++--- index.html | 44 +++++++++++++++++++++++++++++++++++++++++--- less/footer.less | 25 +++++++++++++++++++++++++ less/home-page.less | 21 ++++++++++++++++++--- 4 files changed, 124 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index c6221e76f8..a3bf84d4b5 100644 --- a/css/index.css +++ b/css/index.css @@ -227,17 +227,22 @@ p { padding-bottom: 75px; border: 2px solid greenyellow; } -.the-villas p { +.the-villas p, +.the-outskirts p, +.the-blocks p { width: 50%; margin: 0 auto; font-size: 16px; line-height: 24px; - padding-top: 75px; + padding: 75px 0; } .the-villas h2 { padding-bottom: 50px; } -.recent-projects { +.recent-projects, +.the-villas, +.the-outskirts, +.the-blocks { position: relative; } .box { @@ -257,3 +262,35 @@ p { right: 30px; top: 250px; } +.outskirts { + position: absolute; + top: 175px; +} +.blocks { + position: absolute; + top: 175px; + right: 25px; +} +.footer { + background-color: #828282; + width: 100%; + display: flex; + flex-wrap: wrap; + font-weight: regular; + font-size: 14px; + line-height: 26px; + color: #FFF; +} +.footer h3 { + color: #fff; + font-size: 20px; + line-height: 24px; + font-weight: regular; +} +.copyright { + margin: 0 auto; + display: flex; +} +.mobile { + display: none; +} diff --git a/index.html b/index.html index a949a48860..a0755e0e5c 100644 --- a/index.html +++ b/index.html @@ -76,16 +76,54 @@

Recent Projects

The Outskirts are amazing to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. +
+
+ Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital + divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will + close the loop on focusing solely on the bottom line. +

+
+
+ +
THE BLOCKS
+

+ The Blocks are amazing to the table win-win survival strategies to ensure proactive domination. At the end of the + day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined + cloud solution. +
+
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.

- - -
+ + +
+ +
+

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 32345
702 555 0144

+
+
+ Copyright © 2018 Smith and Jones +
+
- + -
- + +
+
+
+

S&J

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

Services

+
+ +

Services

@@ -118,33 +129,31 @@

Services

- -
- -
-

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 32345
702 555 0144

-
-
- Copyright © 2018 Smith and Jones -
-
- -
-
+ + +
+ +
+

New York

+

123 Lane
Suite 100
Albany, NY 12345
202 555 0144

+
+
+

Florida

+

Ocean Drive
Suite 201
Orlando, FL 22345
502 555 0144

+
+
+

California

+

Mountain Street
Suite 105
San Diego, CA 32345
702 555 0144

+
+
+ Copyright © 2018 Smith and Jones +
+
From f952f0ce4b515ec9bda2ae042d2c482cbbee7368 Mon Sep 17 00:00:00 2001 From: JamesB Date: Thu, 3 Jan 2019 15:21:47 -0800 Subject: [PATCH 26/28] starting over add nav bar functionality --- css/index.css | 75 +++++++++++++++++++- index.html | 31 ++++++++- js/index.js | 159 ++++++++++++++++++++++++------------------- less/navigation.less | 89 +++++++++++++++++++++++- services.html | 27 +++++++- 5 files changed, 305 insertions(+), 76 deletions(-) diff --git a/css/index.css b/css/index.css index aef62313b6..8b458139cb 100644 --- a/css/index.css +++ b/css/index.css @@ -156,9 +156,10 @@ h6 { color: #222; } .nav-container { + display: flex; + justify-content: space-between; background-color: #c3c4c8; - width: 1024px; - position: fixed; + width: 100%; z-index: 10; } .nav { @@ -167,6 +168,8 @@ h6 { height: 50px; align-items: center; margin: 0 75px; + width: 100%; + z-index: 1; } .name h2 { font-weight: bold; @@ -177,6 +180,74 @@ h6 { .open-hamburger { display: flex; } +.open-menu { + display: flex; +} +.close-menu { + display: none; + border: 2px solid hotpink; +} +/* The Overlay (background) */ +.overlay { + /* Height & width depends on how you want to reveal the overlay (see JS below) */ + height: 0; + width: 100%; + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + left: 0; + top: 0; + background-color: #000000; + /* Black fallback color */ + background-color: #c3c4c8; + overflow-x: hidden; + /* Disable horizontal scroll */ + transition: 0.5s; + /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ +} +/* Position the content inside the overlay */ +.overlay-content { + position: relative; + top: 25%; + /* 25% from the top */ + width: 100%; + /* 100% width */ + text-align: center; + /* Centered text/links */ + margin-top: 30px; + /* 30px top margin to avoid conflict with the close button on smaller screens */ +} +/* The navigation links inside the overlay */ +.overlay a { + padding: 8px; + text-decoration: none; + font-size: 48px; + line-height: 85px; + font-weight: bold; + color: #fff; + display: block; + /* Display block instead of inline */ + transition: 0.3s; + /* Transition effects on hover (color) */ +} +/* When you mouse over the navigation links, change their color */ +.overlay a:hover, +.overlay a:focus { + color: #222; +} +/* Position the close button (top right corner) */ +/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ +@media screen and (max-height: 450px) { + .overlay a { + font-size: 20px; + } + .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } +} .main-content { display: flex; flex-direction: column; diff --git a/index.html b/index.html index aff757a33d..465ec98fbd 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,43 @@ + + + + + + +
+ + + + + +
+ Home + Services + Contact +
+ +
+ + + + + + +

S&J

-
+
+ + +
diff --git a/js/index.js b/js/index.js index 3cf8ac310f..ad06295bd7 100644 --- a/js/index.js +++ b/js/index.js @@ -1,78 +1,97 @@ // JS goes here class TabLink { - constructor(element) { - this.element = element; - - // Get the custom data attribute on teh Link - this.data = this.element.dataset.tab; - // Using the custom data attribute ge tthe associated Item element - this.item = document.querySelector(`.tabs-item[data-tab="${this.data}"]`); - // Using the Item element, create a new instance of the TabItem class - this.tabItem = new TabItem(this.item); - - this.element.addEventListener('click', () => { - // Call the select method you define below - this.select(); - }); - }; - - select() { - // Get all of the elements with the tabs-link class - const links = document.querySelectorAll('.tabs-link'); - - // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links - links.forEach( link => { - link.classList.remove('tabs-link-selected') - }); - - // Add a class named "tabs-link-selected" to this link - this.element.classList.add('tabs-link-selected'); - - // Call the select method on the item associated with this link - this.tabItem.select(); - } + constructor(element) { + this.element = element; + + // Get the custom data attribute on teh Link + this.data = this.element.dataset.tab; + // Using the custom data attribute ge tthe associated Item element + this.item = document.querySelector(`.tabs-item[data-tab="${this.data}"]`); + // Using the Item element, create a new instance of the TabItem class + this.tabItem = new TabItem(this.item); + + this.element.addEventListener('click', () => { + // Call the select method you define below + this.select(); + }); + }; + + select() { + // Get all of the elements with the tabs-link class + const links = document.querySelectorAll('.tabs-link'); + + // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links + links.forEach(link => { + link.classList.remove('tabs-link-selected') + }); + + // Add a class named "tabs-link-selected" to this link + this.element.classList.add('tabs-link-selected'); + + // Call the select method on the item associated with this link + this.tabItem.select(); } - - class TabItem { - constructor(element) { - this.element = element; - } - - select() { - // Select all ".tabs-item" elements from the DOM - const items = document.querySelectorAll('.tabs-item'); - // Remove the class "tabs-item-selected" from each element - items.forEach( item => { - item.classList.remove('tabs-item-selected'); - }) - // Add a class named "tabs-item-selected" to this element - this.element.classList.add('tabs-item-selected'); - } +} + +class TabItem { + constructor(element) { + this.element = element; } - // ============================================ DROPDOWN ============================================================= - - class Dropdown { - constructor(element) { - // assign this.element to the dropdown element - this.element = element; - // assign 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() }) - // Instructor note, the reason we must wrap the toggleContent method in an anonymous function is that 'this' in toggleContent - // would refer to the button, NOT the current instance of the class. - } - - toggleContent() { - // Toggle the ".dropdown-hidden" class off and on - this.content.classList.toggle('dropdown-hidden'); - } + select() { + // Select all ".tabs-item" elements from the DOM + const items = document.querySelectorAll('.tabs-item'); + // Remove the class "tabs-item-selected" from each element + items.forEach(item => { + item.classList.remove('tabs-item-selected'); + }) + // Add a class named "tabs-item-selected" to this element + this.element.classList.add('tabs-item-selected'); } - // 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)); +} + +// ======================================================== OVERLAY START =========================================================================== +const openMenu = document.querySelector(".open"); +const closeMenu = document.querySelector(".close"); +/* Open */ +function openNav() { + document.getElementById("myNav").style.height = "100%"; + openMenu.classList.toggle("close-menu"); + closeMenu.classList.toggle("close-menu"); +} + +/* Close */ +function closeNav() { + document.getElementById("myNav").style.height = "0%"; + openMenu.classList.toggle("close-menu"); + closeMenu.classList.toggle("close-menu"); +} + +// ======================================================= OVERLAY END =============================================================================== + +// ============================================ DROPDOWN ============================================================= + +// class Dropdown { +// constructor(element) { +// // assign this.element to the dropdown element +// this.element = element; +// // assign 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() }) +// // Instructor note, the reason we must wrap the toggleContent method in an anonymous function is that 'this' in toggleContent +// // would refer to the button, NOT the current instance of the class. +// } + +// 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)); // ========================================================================================================================== @@ -102,4 +121,4 @@ class TabLink { -let links = document.querySelectorAll('.tabs-link').forEach( link => new TabLink(link)); \ No newline at end of file +let links = document.querySelectorAll('.tabs-link').forEach(link => new TabLink(link)); \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index 782d9548a8..52c070ee5d 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -13,9 +13,11 @@ // ===================== Start Redo project starting 12/26/2018 ========================= .nav-container { // border: 2px solid black; + display: flex; + justify-content: space-between; background-color: rgb(195, 196, 200); - width: 1024px; - position: fixed; + width: 100%; + // position: fixed; z-index: 10; } @@ -26,6 +28,8 @@ height: 50px; align-items: center; margin: 0 75px; + width: 100%; + z-index: 1; } .name h2 { @@ -38,4 +42,85 @@ .open-hamburger { display: flex; } + +.open-menu { + display: flex; +} + +.close-menu { + display: none; + border: 2px solid hotpink; +} + +// ===================================================== OVERLAY START ========================================================================= + +/* The Overlay (background) */ +.overlay { + /* Height & width depends on how you want to reveal the overlay (see JS below) */ + height: 0; + width: 100%; + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + background-color: rgb(0,0,0); /* Black fallback color */ + background-color: rgb(195, 196, 200); + // background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ + overflow-x: hidden; /* Disable horizontal scroll */ + transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ + } + + /* Position the content inside the overlay */ + .overlay-content { + position: relative; + top: 25%; /* 25% from the top */ + width: 100%; /* 100% width */ + text-align: center; /* Centered text/links */ + margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ + } + // ### Navigation Text (Expanded) +// - Font Weight: Bold +// - Font Size: 48px +// - Line Height: 85px +// - Color: #FFFFFF +// - Hover Color: #222222 + /* The navigation links inside the overlay */ + .overlay a { + padding: 8px; + text-decoration: none; + font-size: 48px; + line-height: 85px; + font-weight: bold; + color: #fff; + display: block; /* Display block instead of inline */ + transition: 0.3s; /* Transition effects on hover (color) */ + } + + /* When you mouse over the navigation links, change their color */ + .overlay a:hover, .overlay a:focus { + color: #222; + } + + /* Position the close button (top right corner) */ +// .overlay .closebtn { +// // position: absolute; +// // top: 20px; +// // right: 45px; +// // font-size: 60px; +// } + + + + /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ + @media screen and (max-height: 450px) { + .overlay a {font-size: 20px} + .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } + } + + // ============================================================ OVERLAY END ======================================================================= + // ====================== End Redo project starting 12/26/2018 ========================== diff --git a/services.html b/services.html index 365e471d10..19fe6d4a74 100644 --- a/services.html +++ b/services.html @@ -13,6 +13,28 @@ + + + +
+ + + + + +
+ Home + Services + Contact +
+ +
+ + + + + +
@@ -20,7 +42,10 @@

S&J

-
+
+ + +
From d5245a7459d4cad0b9e3e303ae31aed66ebb61c7 Mon Sep 17 00:00:00 2001 From: JamesB Date: Fri, 4 Jan 2019 14:46:00 -0800 Subject: [PATCH 27/28] add home page mobile view --- css/index.css | 101 +++++++++++++++++++++++++++++++++++- index.html | 20 ++++--- less/home-page.less | 121 +++++++++++++++++++++++++++++++++++++++++-- less/navigation.less | 4 +- 4 files changed, 234 insertions(+), 12 deletions(-) diff --git a/css/index.css b/css/index.css index 8b458139cb..293c62c29b 100644 --- a/css/index.css +++ b/css/index.css @@ -159,7 +159,8 @@ h6 { display: flex; justify-content: space-between; background-color: #c3c4c8; - width: 100%; + width: 1024px; + position: fixed; z-index: 10; } .nav { @@ -354,6 +355,104 @@ p { position: absolute; top: 175px; } +.mobile { + display: none; +} +@media (max-width: 500px) { + .container { + background-color: hotpink; + border: 2px solid black; + flex-direction: column; + } + .nav-container { + width: 482px; + } + .main-header { + font-size: 52px; + line-height: 60px; + margin: -75px 0 0 -20px; + } + .main-img img { + display: none; + } + .main-img .mobile { + display: block; + width: 482px; + border: 2px solid greenyellow; + position: relative; + top: -50px; + left: 0; + } + .smith-jones { + flex-direction: column-reverse; + } + .future-designs { + flex-direction: column; + } + button { + width: 100%; + } + .img img { + display: none; + } + .rp-img img { + display: none; + } + .rp-img .mobile, + .img .mobile { + display: block; + width: 100%; + } + .rp-img .mobile { + margin-bottom: 35px; + } + .villas { + right: 40px; + top: 185px; + } + .blocks, + .outskirts { + left: 45px; + top: 185px; + } + .footer { + flex-direction: column; + } + .footer .email { + width: 100%; + } + .footer .email h3 { + font-size: 30px; + line-height: 35px; + } + .footer input { + width: 100%; + height: 40px; + border-radius: 5px; + font-size: 20px; + margin: 15px 0; + padding: 15px 10px; + } + .footer p { + font-size: 18px; + } + .footer .new-york, + .footer .florida, + .footer .california { + width: 100%; + line-height: 30px; + } + .footer .new-york h3, + .footer .florida h3, + .footer .california h3 { + font-size: 25px; + padding-bottom: 10px; + } + .footer .copyright { + padding-top: 45px; + margin-left: 25px; + } +} .main-img-services { position: relative; z-index: -1; diff --git a/index.html b/index.html index 465ec98fbd..89709da7c2 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,7 @@

S&J

-
+

Integrity,
Excellence,
Progress. @@ -68,17 +68,22 @@

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

- +
@@ -87,6 +92,7 @@

Futuristic Designs

Recent Projects

+
THE VILLAS

The Villas bring to the table win-win survival strategies to ensure proactive domination. At the end of the @@ -103,6 +109,7 @@

Recent Projects

+
OUTSKIRTS

@@ -120,6 +127,7 @@

Recent Projects

+
THE BLOCKS

@@ -140,8 +148,8 @@

Recent Projects

New York

diff --git a/less/home-page.less b/less/home-page.less index 4ea05fde93..ea17d32a97 100644 --- a/less/home-page.less +++ b/less/home-page.less @@ -416,9 +416,9 @@ // display: flex; // } -// .mobile { -// display: none; -// } +.mobile { + display: none; +} // ================================================ MOBILE ================================================================== @@ -463,3 +463,118 @@ // width: 100%; // } // } + +@media(max-width: 500px) { + .container { + background-color: hotpink; + border: 2px solid black; + flex-direction: column; + } + + .nav-container { + width: 482px; + } + + + .main-header { + font-size: 52px; + line-height: 60px; + margin: -75px 0 0 -20px; + } + + .main-img img { + display: none; + } + + .main-img .mobile { + display: block; + width: 482px; + border: 2px solid greenyellow; + position: relative; + top: -50px; + left: 0; + } + + .smith-jones { + flex-direction: column-reverse; + } + + .future-designs { + flex-direction: column; + } + + button { + width: 100%; + } + + .img img { + display: none; + } + + .rp-img img { + display: none; + } + + + .rp-img .mobile, .img .mobile { + display: block; + width: 100%; + } + + .rp-img .mobile { + margin-bottom: 35px; + } + + .villas { + right: 40px; + top: 185px; + } + + .blocks, .outskirts { + left: 45px; + top: 185px; + } + + .footer { + flex-direction: column; + } + + .footer .email { + width: 100%; + } + + .footer .email h3 { + font-size: 30px; + line-height: 35px; + } + + .footer input { + width: 100%; + height: 40px; + border-radius: 5px; + font-size: 20px; + margin: 15px 0; + padding: 15px 10px; + } + + .footer p { + font-size: 18px; + } + + .footer .new-york, .footer .florida, .footer .california { + width: 100%; + line-height: 30px; + } + + .footer .new-york h3, .footer .florida h3, .footer .california h3 { + font-size: 25px; + padding-bottom: 10px; + } + + .footer .copyright { + padding-top: 45px; + margin-left: 25px; + } + + +} diff --git a/less/navigation.less b/less/navigation.less index 52c070ee5d..917d624e28 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -16,8 +16,8 @@ display: flex; justify-content: space-between; background-color: rgb(195, 196, 200); - width: 100%; - // position: fixed; + width: 1024px; + position: fixed; z-index: 10; } From 5556076823555a3f5ed4dc6b3cd0d9e2afba130b Mon Sep 17 00:00:00 2001 From: JamesB Date: Sun, 6 Jan 2019 13:36:51 -0800 Subject: [PATCH 28/28] Add Contact page --- contact.html | 116 ++++++++++++++- css/index.css | 69 ++++++++- index.html | 2 +- js/index.js | 50 ------- less/contact.less | 82 +++++++++++ less/footer.less | 7 + less/home-page.less | 311 +--------------------------------------- less/index.less | 1 + less/services-page.less | 140 ------------------ old-index.html | 155 -------------------- services.html | 2 +- 11 files changed, 275 insertions(+), 660 deletions(-) create mode 100644 less/contact.less delete mode 100644 old-index.html diff --git a/contact.html b/contact.html index 868844fe14..93970ae473 100644 --- a/contact.html +++ b/contact.html @@ -1,5 +1,6 @@ + Contact Us @@ -10,11 +11,119 @@ - + + + + + +
+ + + + + +
+ Home + Services + Contact +
+ +
+ + + + + -

Contact

+
+
+
+

S&J

+
+
+ + +
+
+
- + + + + + - - - \ No newline at end of file diff --git a/services.html b/services.html index 19fe6d4a74..9dd6ffa4a4 100644 --- a/services.html +++ b/services.html @@ -25,7 +25,7 @@
Home Services - Contact + Contact