From 8cfc1454af9c3f03656a77578a39df494c90971b Mon Sep 17 00:00:00 2001 From: drkfogle Date: Mon, 17 Dec 2018 11:45:17 -0500 Subject: [PATCH 01/39] Kevin Rodriguez -User-Interface-Project-Week --- css/index.css | 137 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 21 +++++--- 2 files changed, 151 insertions(+), 7 deletions(-) diff --git a/css/index.css b/css/index.css index e6b2b589c1..4df28c59af 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,136 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; +} +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Your Code Goes Here */ diff --git a/index.html b/index.html index 8a84a17304..1c80aeab60 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,16 @@ -

You got this! Good luck.

- + +
S&J
+
+ +
+ - +
+ Integrity, Excellence, Progress. @@ -60,7 +69,7 @@

You got this! Good luck.

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. - +
--> + \ No newline at end of file From 778ee0ee1ade98384063942ae4843ffb992f3683 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Mon, 17 Dec 2018 23:08:09 -0500 Subject: [PATCH 02/39] Still having trouble with z-indexing --- css/index.css | 86 +++++++++++++++++++++++++++ index.html | 162 +++++++++++++++++++++++++++----------------------- 2 files changed, 172 insertions(+), 76 deletions(-) diff --git a/css/index.css b/css/index.css index 4df28c59af..6f82a7f0ce 100644 --- a/css/index.css +++ b/css/index.css @@ -134,3 +134,89 @@ table { border-spacing: 0; } /* Your Code Goes Here */ +header{ + display: flex; + justify-content: space-between; +} +.top-pic{ + /* position: absolute; */ + z-index: 0; +} +.pic-words{ + position: relative; + z-index: 1; + Top: 80%; + +} +.top-content{ + margin: 30px 0; + display: flex; + justify-content: space-between; +} +/* .top-contents{ + flex-wrap: wrap; + justify-content: space-between + } */ +.container{ + max-width: 800px; + width: 80%; + margin: 0 auto; + Background: #FFFFFF; + Color: #222222 +} +.text-content{ + display: flex; + flex-direction: column; + font-weight: Regular; + font-Size: 16px; + line-Height: 24px + +} +.recent-text{ + width: 50%; + margin: 25px 0px 25px 160px; +} +.Footer{ + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; + +} +.location{ + display: flex; + justify-content: space-around; + flex-direction: column; +} +h5{ + display: flex; + justify-content: center; + Background: #828282; + +} +.Footer-text{ + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF +} +.footer-heading{ + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF +} +button{ + + border: 2px solid #222222; + border-radius: 4px; + margin-right: 255px; + padding-bottom: 15px; + padding-top: 15px; +} +h2{ + Font-Weight: Bold; + Font-Size: 28px; + Color: #222222; + margin-bottom: 30px; +} \ No newline at end of file diff --git a/index.html b/index.html index 1c80aeab60..56bb0e3acd 100644 --- a/index.html +++ b/index.html @@ -13,93 +13,103 @@ -
S&J
-
+
S&J -
+ +
+
+
+ +

Integrity,
+ Excellence,
+ Progress.

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

Smith & Jones Architects

+ +

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

+ +
+ +
+ + +
+ +
+

Futuristic Designs

+ +

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

+ + + +
+
---> - - +
+ Interested in starting a project?
+ Let’s talk: -Copyright © 2018 Smith and Jones + Enter email + 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 284291adb836cde590f76dfcb3d27d5ac8c8200c Mon Sep 17 00:00:00 2001 From: drkfogle Date: Tue, 18 Dec 2018 13:33:40 -0500 Subject: [PATCH 03/39] added email form to index --- css/index.css | 7 +++++- index.html | 40 ++++++++++++++++--------------- services.html | 66 +++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 80 insertions(+), 33 deletions(-) diff --git a/css/index.css b/css/index.css index 6f82a7f0ce..0016b1d289 100644 --- a/css/index.css +++ b/css/index.css @@ -141,6 +141,7 @@ header{ .top-pic{ /* position: absolute; */ z-index: 0; + width: 100%; } .pic-words{ position: relative; @@ -159,7 +160,7 @@ header{ } */ .container{ max-width: 800px; - width: 80%; + width: 100%; margin: 0 auto; Background: #FFFFFF; Color: #222222 @@ -219,4 +220,8 @@ h2{ Font-Size: 28px; Color: #222222; margin-bottom: 30px; +} +h3{ + display: flex; + justify-content: flex-end; } \ No newline at end of file diff --git a/index.html b/index.html index 56bb0e3acd..21e7c6e4ec 100644 --- a/index.html +++ b/index.html @@ -58,7 +58,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.

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.

@@ -83,30 +83,32 @@

THE BLOCKS

Interested in starting a project?
Let’s talk: - - Enter email - +
+ Enter email + + +
We'll never share your email with anyone else.
-

New York

-

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

+

New York

+

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

-

Florida

-

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

+

Florida

+

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

-

California

-

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

+

California

+

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

Copyright © 2018 Smith and Jones
diff --git a/services.html b/services.html index fb5a79e18a..dc08dc9fdc 100644 --- a/services.html +++ b/services.html @@ -9,30 +9,70 @@ - +
+
+ +
+
+ +

Services

+
+
-

Services

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

Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities. +
+ +
+ Interested in starting a project?
+ Let’s talk: ---> + Enter email + 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 c9298ece9139dd94aceb79ce4647260990d3655c Mon Sep 17 00:00:00 2001 From: drkfogle Date: Tue, 18 Dec 2018 18:54:54 -0500 Subject: [PATCH 04/39] Can't get z-index for the life of me --- contact.html | 121 +++++++++++++++++++++++++++++++++----------------- css/index.css | 25 ++++++++++- index.html | 16 +++---- services.html | 12 ++--- 4 files changed, 118 insertions(+), 56 deletions(-) diff --git a/contact.html b/contact.html index 868844fe14..52f53e8ada 100644 --- a/contact.html +++ b/contact.html @@ -9,53 +9,92 @@ - +
+

S&J

+ +
+
+ +

Services

+
+ +
-

Contact

- - + +
+

Where We Work

+

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

+

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

+

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

+
+
+ +
+

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

+
+
+
\ No newline at end of file diff --git a/css/index.css b/css/index.css index 0016b1d289..fce791ed74 100644 --- a/css/index.css +++ b/css/index.css @@ -134,7 +134,7 @@ table { border-spacing: 0; } /* Your Code Goes Here */ -header{ +.header{ display: flex; justify-content: space-between; } @@ -224,4 +224,27 @@ h2{ h3{ display: flex; justify-content: flex-end; +} +.email-stuff{ +display: flex; +flex-direction: column; +Font-Size: 14px; +Line-Height: 26px; +Color: #FFFFFF +} +.email_css{ + display: flex; + flex-direction: column; +} +.contact_us{ + display: flex; + flex-direction: column; +} +button:hover{ +background-color: black; +color: white; +} +.where_we_work{ + line-height: 2rem; + margin-bottom: 22px; } \ No newline at end of file diff --git a/index.html b/index.html index 21e7c6e4ec..417b93a953 100644 --- a/index.html +++ b/index.html @@ -13,18 +13,19 @@ -
S&J +
+

S&J

-
+
-
- -

Integrity,
+
+ +

Integrity,
Excellence,
Progress.

@@ -81,12 +82,11 @@

THE BLOCKS

- Interested in starting a project?
+
diff --git a/services.html b/services.html index dc08dc9fdc..fea075ba57 100644 --- a/services.html +++ b/services.html @@ -9,16 +9,16 @@ -
-
+
+

S&J

-
-
- +
+
+

Services

@@ -26,7 +26,7 @@

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.

From e4a71a609e2cc3823149aaa5414e44ca0ae985f9 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Wed, 19 Dec 2018 16:30:42 -0500 Subject: [PATCH 05/39] attempting to work on nav now --- contact.html | 82 +++++++++++++++++++++++++++------------------------ css/index.css | 55 +++++++++++++++++++++++++++++++--- index.html | 11 ++++--- 3 files changed, 100 insertions(+), 48 deletions(-) diff --git a/contact.html b/contact.html index 52f53e8ada..da89a8b371 100644 --- a/contact.html +++ b/contact.html @@ -24,45 +24,50 @@

Services

+
+

Get In Touch

+ Enter Email + + We'll never share your email with anyone else. +
+ How many buildings do you need planned? + +
+
+ Provide a brief overview of your project needs: + +
+ I am a small business owner
+ I am a residential owner
+ I am a corporation
-

Get In Touch

- - We'll never share your email with anyone else. - -How many buildings do you need planned? - - -Provide a brief overview of your project needs: - I am a small business owner
- I am a residential owner
- I am a corporation
- - - -
-

Where We Work

-

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

-

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

-

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

+ +
+
+

Where We Work

+

New York

+

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

+

Florida

+

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

+

California

+

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

+
+
+
Copyright © 2018 Smith and Jones
diff --git a/css/index.css b/css/index.css index fce791ed74..9f5315703d 100644 --- a/css/index.css +++ b/css/index.css @@ -145,8 +145,10 @@ table { } .pic-words{ position: relative; - z-index: 1; - Top: 80%; + bottom: 18rem; + left: 5rem; + font-size: 5rem; + color: white; } .top-content{ @@ -193,7 +195,8 @@ h5{ display: flex; justify-content: center; Background: #828282; - + padding-top: 20px; + color: white; } .Footer-text{ font-Weight: Regular; @@ -247,4 +250,48 @@ color: white; .where_we_work{ line-height: 2rem; margin-bottom: 22px; -} \ No newline at end of file +} +.contact_us{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +.get_in_touch{ + width: 40%; + line-height: 50px; +} +.header{ + Font-Weight: Bold; + Font-Size: 24px; + Color: #FFFFFF; + background-color: lightslategray; + padding: 15px 15px; +} +.where_we_work h1{ + font-weight: bold; +} +.recent-projects h3{ + position: relative; + bottom: 2rem; + background-color: #D8D8D8; + font-size: 2rem; +} +.right{ + display: flex; + justify-content: flex-start; + margin-right: 480px; + padding-left: 70px; + line-height: 5rem; +} +.left{ + margin-left:480px; + padding-right:70px; + line-height: 5rem; + +} +.pic{ + width:48%; +} +.text-content{ + padding: 0 0 0 10px; +} diff --git a/index.html b/index.html index 417b93a953..e52ef78e20 100644 --- a/index.html +++ b/index.html @@ -40,12 +40,12 @@

Smith & Jones Architects

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

- +
- +

Futuristic Designs

@@ -59,19 +59,19 @@

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.

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

-

OUTSKIRTS

+

OUTSKIRTS

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

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

-

THE BLOCKS

+

THE BLOCKS

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

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

@@ -80,7 +80,6 @@

THE BLOCKS

-
-
-
-
-

California

-

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

+
+ +
+

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
+
Copyright © 2018 Smith and Jones
diff --git a/css/index.css b/css/index.css index c0a5e32e03..f1cffe1069 100644 --- a/css/index.css +++ b/css/index.css @@ -134,7 +134,14 @@ table { border-spacing: 0; } /* Your Code Goes Here */ -.header{ +.container { + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: #222222; +} +.container .header { display: flex; justify-content: space-between; Font-Weight: Bold; @@ -143,159 +150,139 @@ table { background-color: lightslategray; padding: 15px 15px; } -.top-pic{ - /* position: absolute; */ - z-index: 0; +.container .top-pic { width: 100%; } -.pic-words{ +.container .pic-words { position: relative; bottom: 18rem; left: 5rem; font-size: 5rem; color: white; - } -.top-content{ +.container .top-content { margin: 30px 0; display: flex; justify-content: space-between; } -/* .top-contents{ - flex-wrap: wrap; - justify-content: space-between - } */ -.container{ - max-width: 800px; - width: 100%; - margin: 0 auto; - Background: #FFFFFF; - Color: #222222 -} -.text-content{ +.container .top-content .text-content { display: flex; flex-direction: column; font-weight: Regular; font-Size: 16px; - line-Height: 24px - + line-Height: 24px; + padding: 0 0 0 10px; } -.recent-text{ +.container .recent-projects h3 { + position: relative; + bottom: 2rem; + background-color: #D8D8D8; + font-size: 2rem; +} +.container .pic { + width: 48%; +} +.container .recent-text { width: 50%; margin: 25px 0px 25px 160px; } -.Footer{ +.container .left { + margin-left: 480px; + padding-right: 70px; + line-height: 5rem; +} +.container .right { + display: flex; + justify-content: flex-start; + margin-right: 480px; + padding-left: 70px; + line-height: 5rem; +} +.container .Footer { display: flex; flex-direction: row; Background: #828282; justify-content: space-evenly; - } -.location{ +.container .Footer .email-stuff { display: flex; - justify-content: space-around; flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; } -h5{ +.container .Footer .email_css { display: flex; - justify-content: center; - Background: #828282; - padding-top: 20px; - color: white; + flex-direction: column; } -.Footer-text{ - font-Weight: Regular; - font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF +.container .Footer .location { + display: flex; + justify-content: space-around; + flex-direction: column; } -.footer-heading{ +.container .Footer .footer-heading { font-Weight: Regular; Font-Size: 20px; Line-Height: 24px; - Color: #FFFFFF + Color: #FFFFFF; +} +.container .Footer .Footer-text { + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; } -button{ - +.container button { border: 2px solid #222222; border-radius: 4px; margin-right: 255px; padding-bottom: 15px; padding-top: 15px; } -h2{ +.container button button:hover { + background-color: black; + color: white; +} +.container .contact_us { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.container .contact_us .get_in_touch { + width: 40%; + line-height: 50px; +} +.container h2 { Font-Weight: Bold; Font-Size: 28px; Color: #222222; margin-bottom: 30px; } -h3{ +.container h3 { display: flex; justify-content: flex-end; } -.email-stuff{ -display: flex; -flex-direction: column; -Font-Size: 14px; -Line-Height: 26px; -Color: #FFFFFF -} -.email_css{ +.container h5 { display: flex; - flex-direction: column; -} -button:hover{ -background-color: black; -color: white; + justify-content: center; + Background: #828282; + padding-top: 20px; + color: white; } -.where_we_work{ +.container .where_we_work { line-height: 2rem; margin-bottom: 22px; } -.contact_us{ - display: flex; - flex-direction: row; - justify-content: space-between; -} -.get_in_touch{ - width: 40%; - line-height: 50px; -} -.where_we_work h1{ +.container .where_we_work .where_we_work h1 { font-weight: bold; } -.recent-projects h3{ - position: relative; - bottom: 2rem; - background-color: #D8D8D8; - font-size: 2rem; +.container .contact { + bottom: 8rem; } -.right{ - display: flex; - justify-content: flex-start; - margin-right: 480px; - padding-left: 70px; - line-height: 5rem; -} -.left{ - margin-left:480px; - padding-right:70px; - line-height: 5rem; - -} -.pic{ - width:48%; -} -.text-content{ - padding: 0 0 0 10px; -} -.contact{ -bottom: 8rem; -} -.tab{ +.container .tab { display: flex; flex-direction: row; } -.tab button{ +.container .tab .tab button { border-radius: 1px; -} \ No newline at end of file +} diff --git a/index.html b/index.html index 211ed3369f..90014eebc9 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ +

S&J

- - -
- +
+

Smith & Jones Architects

@@ -39,12 +38,11 @@

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

@@ -53,7 +51,6 @@

Futuristic Designs

-

Recent Projects

@@ -73,11 +70,8 @@

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.

-
-
- - - +
+
Copyright © 2018 Smith and Jones
+ \ No newline at end of file diff --git a/less/index.less b/less/index.less index a7c22b8219..b03f1a7dbb 100644 --- a/less/index.less +++ b/less/index.less @@ -1,3 +1,4 @@ + /*------------------------------------*\ RESET \*------------------------------------*/ @@ -58,3 +59,182 @@ table{ } /* Your Code Goes Here */ +.container{ + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: #222222; + .header{ + display: flex; + justify-content: space-between; + Font-Weight: Bold; + Font-Size: 24px; + Color: #FFFFFF; + background-color: lightslategray; + padding: 15px 15px; + // width: 100%; + } + .top-pic{ + width: 100%; + } + .pic-words{ + position: relative; + bottom: 18rem; + left: 5rem; + font-size: 5rem; + color: white; + } + .top-content{ + margin: 30px 0; + display: flex; + justify-content: space-between; + .text-content{ + display: flex; + flex-direction: column; + font-weight: Regular; + font-Size: 16px; + line-Height: 24px; + padding: 0 0 0 10px; + } + } + .recent-projects h3{ + position: relative; + bottom: 2rem; + background-color: #D8D8D8; + font-size: 2rem; + } + .pic{ + width:48%; + } + .recent-text{ + width: 50%; + margin: 25px 0px 25px 160px; + } + .left{ + margin-left:480px; + padding-right:70px; + line-height: 5rem; + } + .right{ + display: flex; + justify-content: flex-start; + margin-right: 480px; + padding-left: 70px; + line-height: 5rem; + } + .Footer{ + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; + .email-stuff{ + display: flex; + flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF + } + .email_css{ + display: flex; + flex-direction: column; + } + .location{ + display: flex; + justify-content: space-around; + flex-direction: column; + } + .footer-heading{ + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF + } + .Footer-text{ + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF + } + } + button{ + border: 2px solid #222222; + border-radius: 4px; + margin-right: 255px; + padding-bottom: 15px; + padding-top: 15px; + button:hover{ + background-color: black; + color: white; + } + } + .contact_us{ + display: flex; + flex-direction: row; + justify-content: space-between; + .get_in_touch{ + width: 40%; + line-height: 50px; + } + } + h2{ + Font-Weight: Bold; + Font-Size: 28px; + Color: #222222; + margin-bottom: 30px; + } + h3{ + display: flex; + justify-content: flex-end; + } + +h5{ + display: flex; + justify-content: center; + Background: #828282; + padding-top: 20px; + color: white; + } + .where_we_work{ + line-height: 2rem; + margin-bottom: 22px; + .where_we_work h1{ + font-weight: bold; + } + } + .contact{ + bottom: 8rem; + } + .tab{ + display: flex; + flex-direction: row; + .tab button{ + border-radius: 1px; + } + } +} + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/services.html b/services.html index d7fea48989..11c393f1d4 100644 --- a/services.html +++ b/services.html @@ -9,71 +9,72 @@ -
-

S&J

- -
-
- -

Services

-
- - +
+
+

S&J

+ +
+
+ +

Services

+
+ - + -
- -

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

+
+ +

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

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

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

+
+ +
+

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
- +
Copyright © 2018 Smith and Jones
+
+ \ No newline at end of file From efd0cd665c866bb096e7950de01ae87f4e802ee0 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 20 Dec 2018 15:22:07 -0500 Subject: [PATCH 08/39] trying to work on nav --- contact.html | 4 +-- css/index.css | 64 +++++++++++++++++++++++++++++++++++++++++++--- js/index.js | 62 ++++++++++++++++++++++++++++++++++++++++++++- less/index.less | 67 ++++++++++++++++++++++++++++++++++++++++++++----- services.html | 48 ++++++++++++++++++++--------------- 5 files changed, 211 insertions(+), 34 deletions(-) diff --git a/contact.html b/contact.html index 32580f6fc9..60e2fbd64e 100644 --- a/contact.html +++ b/contact.html @@ -13,9 +13,7 @@

S&J

diff --git a/css/index.css b/css/index.css index f1cffe1069..98c973d847 100644 --- a/css/index.css +++ b/css/index.css @@ -160,6 +160,13 @@ table { font-size: 5rem; color: white; } +.container .pic-word { + position: relative; + bottom: 9rem; + left: 5rem; + font-size: 5rem; + color: white; +} .container .top-content { margin: 30px 0; display: flex; @@ -239,7 +246,7 @@ table { padding-bottom: 15px; padding-top: 15px; } -.container button button:hover { +.container button:hover { background-color: black; color: white; } @@ -273,7 +280,7 @@ table { line-height: 2rem; margin-bottom: 22px; } -.container .where_we_work .where_we_work h1 { +.container .where_we_work h1 { font-weight: bold; } .container .contact { @@ -281,8 +288,57 @@ table { } .container .tab { display: flex; - flex-direction: row; + align-items: center; + justify-content: center; } -.container .tab .tab button { +.container .tab .tab-button { + width: 200px; border-radius: 1px; } +.container .tab .active-tab { + background-color: lightblue; + color: white; +} +.container .middle-content { + display: flex; + flex-direction: row; + margin-top: 2rem; +} +.container .middle-content h3 { + line-height: 2rem; +} +.nav_over { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + left: 0; + top: 0; + background-color: blue; + overflow-x: hidden; + transition: 0.5s; +} +.nav_over .nav_content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} +.nav_over .nav_over a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; +} +.nav_over .nav_over .closenv { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} +.nav_over .header h1 { + color: red; +} diff --git a/js/index.js b/js/index.js index bb3d341cf0..21fd03dc59 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,61 @@ -// JS goes here \ No newline at end of file +// // JS goes here +// class TabLink { +// constructor(tabElement){ +// // assign this.tabElement to the tabElement DOM reference +// this.tabElement = tabElement; + +// // Get the `data-tab` value from this.tabElement and store it here +// this.tabData = this.tabElement.dataset.tab; + +// // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. +// this.cards = Array.from(this.cards).map(card => new TabCard(card)); + +// // Add a click event that invokes this.selectTab +// this.tabElement.addEventListener('click', () => {this.selectTab() +// }) +// }; + +// selectTab(){ + +// // Select all elements with the .tab class on them +// const tabs = document.querySelectorAll('.tab'); + +// // Iterate through the NodeList removing the .active-tab class from each element +// tabs.forEach(tab => tab.classList.remove('active-tab')) + +// // Select all of the elements with the .card class on them +// const cards = document.querySelectorAll('.card') ; + +// // Iterate through the NodeList setting the display style each one to 'none' +// cards.forEach(card => card.style.display = 'none') + +// // Add a class of ".active-tab" to this.tabElement +// this.tabElement.classList.add('active-tab'); + +// // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here. +// this.cards.forEach(card => card.selectCard()); +// } +// } +// class TabCard { +// constructor(cardElement){ +// // Assign this.cardElement to the cardElement DOM reference +// this.cardElement = cardElement; +// } +// selectCard(){ +// // Update the style of this.cardElement to display = "flex" +// this.cardElement.style.display = 'flex'; +// } + +// } + + + + +// let tab = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); + +function openNav() { + document.getElementById("over_top").style.height = "100%"; +} +function CloseNav() { + document.getElementById("over_top").style.height = "0%"; +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index b03f1a7dbb..c3f6ddd08d 100644 --- a/less/index.less +++ b/less/index.less @@ -85,6 +85,13 @@ table{ font-size: 5rem; color: white; } + .pic-word{ + position: relative; + bottom: 9rem; + left: 5rem; + font-size: 5rem; + color: white; + } .top-content{ margin: 30px 0; display: flex; @@ -163,10 +170,10 @@ table{ margin-right: 255px; padding-bottom: 15px; padding-top: 15px; - button:hover{ + &:hover{ background-color: black; color: white; - } + } } .contact_us{ display: flex; @@ -198,7 +205,7 @@ h5{ .where_we_work{ line-height: 2rem; margin-bottom: 22px; - .where_we_work h1{ + h1{ font-weight: bold; } } @@ -207,14 +214,62 @@ h5{ } .tab{ display: flex; - flex-direction: row; - .tab button{ + align-items: center; + justify-content: center; + .tab-button{ + width:200px; border-radius: 1px; } + .active-tab{ + background-color: lightblue; + color:white; + } } + .middle-content{ + display: flex; + flex-direction: row; + margin-top: 2rem; + } + .middle-content h3{ + line-height: 2rem; + } } - +.nav_over{ + height: 100%; + width: 0; + position: fixed; + z-index: 1; + left: 0; + top: 0; + background-color: blue; + overflow-x: hidden; + transition: 0.5s; + .nav_content{ + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; + } + .nav_over a{ + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; + } + .nav_over .closenv{ + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + } + .header h1{ + color: red; + } +} diff --git a/services.html b/services.html index 11c393f1d4..1dd4637c14 100644 --- a/services.html +++ b/services.html @@ -11,36 +11,44 @@
-

S&J

-
-

Services

+

Services

+

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

- -

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.

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

+
+
+ +
From 56ccebcd2df0b957aa0f0410279f95d35a3cac9b Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 20 Dec 2018 16:17:40 -0500 Subject: [PATCH 09/39] Some elements are hidden --- css/index.css | 4 +++- js/index.js | 12 ++++++------ less/index.less | 5 ++++- services.html | 4 ++-- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/css/index.css b/css/index.css index 98c973d847..ff873a7e04 100644 --- a/css/index.css +++ b/css/index.css @@ -315,7 +315,6 @@ table { left: 0; top: 0; background-color: blue; - overflow-x: hidden; transition: 0.5s; } .nav_over .nav_content { @@ -342,3 +341,6 @@ table { .nav_over .header h1 { color: red; } +.nav_over .openNav { + display: block; +} diff --git a/js/index.js b/js/index.js index 21fd03dc59..d30d5572fd 100644 --- a/js/index.js +++ b/js/index.js @@ -53,9 +53,9 @@ // let tab = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); -function openNav() { - document.getElementById("over_top").style.height = "100%"; -} -function CloseNav() { - document.getElementById("over_top").style.height = "0%"; -} \ No newline at end of file +// function openNav() { +// document.getElementById("over_top").style.display = "block"; +// } +// function CloseNav() { +// document.getElementById("over_top").style.display = "none"; +// } \ No newline at end of file diff --git a/less/index.less b/less/index.less index c3f6ddd08d..80b18d67e9 100644 --- a/less/index.less +++ b/less/index.less @@ -243,7 +243,7 @@ h5{ left: 0; top: 0; background-color: blue; - overflow-x: hidden; + // overflow-x: hidden; transition: 0.5s; .nav_content{ position: relative; @@ -269,6 +269,9 @@ h5{ .header h1{ color: red; } + .openNav{ + display: block; + } } diff --git a/services.html b/services.html index 1dd4637c14..fde1932861 100644 --- a/services.html +++ b/services.html @@ -13,8 +13,8 @@
-
- -
-

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

+
+ +
+

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
+
Copyright © 2018 Smith and Jones
diff --git a/js/contact.js b/js/contact.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/js/index.js b/js/index.js index d30d5572fd..53a3388288 100644 --- a/js/index.js +++ b/js/index.js @@ -1,41 +1,41 @@ // // JS goes here -// class TabLink { -// constructor(tabElement){ -// // assign this.tabElement to the tabElement DOM reference -// this.tabElement = tabElement; +class TabLink { + constructor(tabElement){ + // assign this.tabElement to the tabElement DOM reference + this.tabElement = tabElement; -// // Get the `data-tab` value from this.tabElement and store it here -// this.tabData = this.tabElement.dataset.tab; + // Get the `data-tab` value from this.tabElement and store it here + this.tabData = this.tabElement.dataset.tab; -// // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. -// this.cards = Array.from(this.cards).map(card => new TabCard(card)); - -// // Add a click event that invokes this.selectTab -// this.tabElement.addEventListener('click', () => {this.selectTab() -// }) -// }; + // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. + // this.cards = Array.from(this.cards).map(card => new TabCard(card)); + this.item = document.querySelector(`.content[data-tab='${this.data}']`); + // Add a click event that invokes this.selectTab + this.tabElement.addEventListener('click', () => {this.selectTab() + }) + }; -// selectTab(){ + selectTab(){ -// // Select all elements with the .tab class on them -// const tabs = document.querySelectorAll('.tab'); + // Select all elements with the .tab class on them + const tabs = document.querySelectorAll('.tab'); -// // Iterate through the NodeList removing the .active-tab class from each element -// tabs.forEach(tab => tab.classList.remove('active-tab')) + // Iterate through the NodeList removing the .active-tab class from each element + tabs.forEach(tab => tab.classList.remove('active-tab')) -// // Select all of the elements with the .card class on them -// const cards = document.querySelectorAll('.card') ; + // Select all of the elements with the .card class on them + // const cards = document.querySelectorAll('.card') ; -// // Iterate through the NodeList setting the display style each one to 'none' -// cards.forEach(card => card.style.display = 'none') + // // Iterate through the NodeList setting the display style each one to 'none' + // cards.forEach(card => card.style.display = 'none') -// // Add a class of ".active-tab" to this.tabElement -// this.tabElement.classList.add('active-tab'); + // Add a class of ".active-tab" to this.tabElement + this.tabElement.classList.add('active-tab'); -// // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here. -// this.cards.forEach(card => card.selectCard()); -// } -// } + // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here. + // this.cards.forEach(card => card.selectCard()); + } +} // class TabCard { // constructor(cardElement){ // // Assign this.cardElement to the cardElement DOM reference @@ -51,11 +51,5 @@ -// let tab = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); +let tab = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); -// function openNav() { -// document.getElementById("over_top").style.display = "block"; -// } -// function CloseNav() { -// document.getElementById("over_top").style.display = "none"; -// } \ No newline at end of file diff --git a/js/nav.js b/js/nav.js new file mode 100644 index 0000000000..6bcbe89cb6 --- /dev/null +++ b/js/nav.js @@ -0,0 +1,14 @@ +const toggleMenu = () => menu.classList.toggle('menu--open'); + // Toggle the "menu--open" class on your menu reference. + + +// Start Here: Create a reference to the ".menu" class +const menu = document.querySelector('.menu'); + // console.log(menu); + +// create a reference to the ".menu-button" class +const menuButton = document.querySelector('.menu-button'); + // console.log(menuButton); + +// Using your menuButton reference, add a click handler that calls toggleMenu +menuButton.addEventListener('click', toggleMenu); \ No newline at end of file diff --git a/js/services.js b/js/services.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/contact.less b/less/contact.less new file mode 100644 index 0000000000..f0a09368b6 --- /dev/null +++ b/less/contact.less @@ -0,0 +1,15 @@ +.contact_us{ + display: flex; + flex-direction: row; + justify-content: space-between; + .get_in_touch{ + width: 40%; + line-height: 50px; + } + + .where_we_work{ + line-height: 2rem; + margin-bottom: 22px; + h1{ + font-weight: bold; + } \ No newline at end of file diff --git a/less/index.less b/less/index.less index 80b18d67e9..bcf8678a16 100644 --- a/less/index.less +++ b/less/index.less @@ -65,6 +65,11 @@ table{ margin: 0 auto; Background: #FFFFFF; Color: #222222; + @media(max-width: 500px){ + display: flex; + flex-direction: column; + width: 100%; + } .header{ display: flex; justify-content: space-between; @@ -175,14 +180,7 @@ table{ color: white; } } - .contact_us{ - display: flex; - flex-direction: row; - justify-content: space-between; - .get_in_touch{ - width: 40%; - line-height: 50px; - } + } h2{ Font-Weight: Bold; @@ -195,19 +193,14 @@ table{ justify-content: flex-end; } -h5{ + h5{ display: flex; justify-content: center; Background: #828282; padding-top: 20px; color: white; } - .where_we_work{ - line-height: 2rem; - margin-bottom: 22px; - h1{ - font-weight: bold; - } + } .contact{ bottom: 8rem; @@ -225,74 +218,42 @@ h5{ color:white; } } - .middle-content{ - display: flex; - flex-direction: row; - margin-top: 2rem; - } - .middle-content h3{ - line-height: 2rem; + + .recent-projects{ + @media(max-width: 500px){ + width:100%; + display: flex; + flex-direction: column; + img{ + width:100%; + align-items: center; + } + } } } -.nav_over{ - height: 100%; - width: 0; - position: fixed; - z-index: 1; - left: 0; + +.menu{ + display: none; top: 0; - background-color: blue; - // overflow-x: hidden; - transition: 0.5s; - .nav_content{ - position: relative; - top: 25%; - width: 100%; - text-align: center; - margin-top: 30px; - } - .nav_over a{ - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; + .menu-button{ display: block; - transition: 0.3s; - } - .nav_over .closenv{ - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; } - .header h1{ - color: red; - } - .openNav{ - display: block; + .menu a{ + margin: 20% auto; + padding: 20px; + width: 70%; } + +} +.menu--open{ + display: block; } - - - - - - - - - - - - - - - - - - - - - - - diff --git a/less/nav.less b/less/nav.less new file mode 100644 index 0000000000..ba2decb385 --- /dev/null +++ b/less/nav.less @@ -0,0 +1,28 @@ +.nav_over{ + display: flex; + justify-content: space-between; + width:880px; + &:hover{ + cursor: pointer; + } + .close{ + display:none; + } + + .nav_over a{ + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; + } + .nav_over .closenv{ + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + } + + } + \ No newline at end of file diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..179b64e6de --- /dev/null +++ b/less/services.less @@ -0,0 +1,8 @@ +.middle-content{ + display: flex; + flex-direction: row; + margin-top: 2rem; + } + .middle-content h3{ + line-height: 2rem; + } \ No newline at end of file diff --git a/services.html b/services.html index fde1932861..3bf95ba406 100644 --- a/services.html +++ b/services.html @@ -11,16 +11,16 @@
-
@@ -47,7 +47,14 @@

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.

- + + + + + + + +
@@ -84,5 +91,6 @@

California

Copyright © 2018 Smith and Jones
+ \ No newline at end of file From a93232307eb41a3dbed8eb43d2b1adc1b780df40 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Fri, 21 Dec 2018 13:51:57 -0500 Subject: [PATCH 11/39] work so far --- css/contact.css | 16 +++++++++++ css/index.css | 62 --------------------------------------- css/services.css | 17 +++++++---- js/services.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++ less/contact.less | 7 +++-- less/index.less | 17 +---------- less/nav.less | 4 +-- less/services.less | 41 ++++++++++++++++++++------ services.html | 50 ++++++++++++++++++++------------ 9 files changed, 170 insertions(+), 116 deletions(-) diff --git a/css/contact.css b/css/contact.css index e69de29bb2..0c73242ea4 100644 --- a/css/contact.css +++ b/css/contact.css @@ -0,0 +1,16 @@ +.contact_us { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.contact_us .get_in_touch { + width: 40%; + line-height: 50px; +} +.contact_us .where_we_work { + line-height: 2rem; + margin-bottom: 22px; +} +.contact_us .where_we_work h1 { + font-weight: bold; +} diff --git a/css/index.css b/css/index.css index 17efa3aadf..f6ca2972be 100644 --- a/css/index.css +++ b/css/index.css @@ -257,15 +257,6 @@ table { background-color: black; color: white; } -.container .contact_us { - display: flex; - flex-direction: row; - justify-content: space-between; -} -.container .contact_us .get_in_touch { - width: 40%; - line-height: 50px; -} .container h2 { Font-Weight: Bold; Font-Size: 28px; @@ -283,37 +274,9 @@ table { padding-top: 20px; color: white; } -.container .where_we_work { - line-height: 2rem; - margin-bottom: 22px; -} -.container .where_we_work h1 { - font-weight: bold; -} .container .contact { bottom: 8rem; } -.container .tab { - display: flex; - align-items: center; - justify-content: center; -} -.container .tab .tab-button { - width: 200px; - border-radius: 1px; -} -.container .tab .active-tab { - background-color: lightblue; - color: white; -} -.container .middle-content { - display: flex; - flex-direction: row; - margin-top: 2rem; -} -.container .middle-content h3 { - line-height: 2rem; -} @media (max-width: 500px) { .container .recent-projects { width: 100%; @@ -325,31 +288,6 @@ table { align-items: center; } } -.nav_over { - display: flex; - justify-content: space-between; - width: 880px; -} -.nav_over:hover { - cursor: pointer; -} -.nav_over .close { - display: none; -} -.nav_over .nav_over a { - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; - display: block; - transition: 0.3s; -} -.nav_over .nav_over .closenv { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; -} .menu { display: none; top: 0; diff --git a/css/services.css b/css/services.css index b92f4eec03..58e3bd6916 100644 --- a/css/services.css +++ b/css/services.css @@ -1,8 +1,15 @@ -.middle-content { +.tabs .topics { display: flex; - flex-direction: row; - margin-top: 2rem; + justify-content: space-between; } -.middle-content h3 { - line-height: 2rem; +.tabs .topics .tab { + font-weight: bold; +} +.tabs .topics .tab:hover { + cursor: pointer; +} +.tabs .topics .active-tab { + background-color: lightblue; + color: white; + border: 2px solid green; } diff --git a/js/services.js b/js/services.js index e69de29bb2..fe9e6f51c7 100644 --- a/js/services.js +++ b/js/services.js @@ -0,0 +1,72 @@ +class TabLink { + constructor(tabElement){ + // assign this.tabElement to the tabElement DOM reference + this.tabElement = tabElement; + + // Get the `data-tab` value from this.tabElement and store it here + this.tabData = this.tabElement.dataset.tab; + + // We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task: + + // Check to see if this.tabData is equal to 'all' + if(this.tabData === 'all'){ + // If `all` is true, select all cards regardless of their data attribute values + this.cards = document.querySelectorAll(`.card`); + } else { + // else if `all` is false, only select the cards with matching this.tabData values + this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`) ; + } + + + // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. + this.cards = Array.from(this.cards).map(card => new TabCard(card)); + + // Add a click event that invokes this.selectTab + this.tabElement.addEventListener('click', () => {this.selectTab() + }) + }; + + selectTab(){ + + // Select all elements with the .tab class on them + const tabs = document.querySelectorAll('.tab'); + + // Iterate through the NodeList removing the .active-tab class from each element + tabs.forEach(tab => tab.classList.remove('active-tab')) + + // Select all of the elements with the .card class on them + const cards = document.querySelectorAll('.card') ; + + // Iterate through the NodeList setting the display style each one to 'none' + cards.forEach(card => card.style.display = 'none') + + // Add a class of ".active-tab" to this.tabElement + this.tabElement.classList.add('active-tab'); + + // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here. + this.cards.forEach(card => card.selectCard()); + } + } + + class TabCard { + constructor(cardElement){ + // Assign this.cardElement to the cardElement DOM reference + this.cardElement = cardElement; + } + selectCard(){ + // Update the style of this.cardElement to display = "flex" + this.cardElement.style.display = 'flex'; + } + + } + + /* START HERE: + + - Select all classes named ".tab" and assign that value to the tabs variable + + - With your selection in place, now chain a .forEach() method onto the tabs variable to iterate over the DOM NodeList + + - In your .forEach() method's callback function, return a new instance of TabLink and pass in each tab as a parameter + + */ + let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); \ No newline at end of file diff --git a/less/contact.less b/less/contact.less index f0a09368b6..c859d5d8bf 100644 --- a/less/contact.less +++ b/less/contact.less @@ -6,10 +6,11 @@ width: 40%; line-height: 50px; } - - .where_we_work{ + .where_we_work{ line-height: 2rem; margin-bottom: 22px; h1{ font-weight: bold; - } \ No newline at end of file + } + } +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index bcf8678a16..0deac4e44f 100644 --- a/less/index.less +++ b/less/index.less @@ -181,7 +181,6 @@ table{ } } - } h2{ Font-Weight: Bold; Font-Size: 28px; @@ -199,25 +198,11 @@ table{ Background: #828282; padding-top: 20px; color: white; - } - } .contact{ bottom: 8rem; } - .tab{ - display: flex; - align-items: center; - justify-content: center; - .tab-button{ - width:200px; - border-radius: 1px; - } - .active-tab{ - background-color: lightblue; - color:white; - } - } + .recent-projects{ @media(max-width: 500px){ diff --git a/less/nav.less b/less/nav.less index ba2decb385..e904c47634 100644 --- a/less/nav.less +++ b/less/nav.less @@ -23,6 +23,4 @@ right: 45px; font-size: 60px; } - - } - \ No newline at end of file +} \ No newline at end of file diff --git a/less/services.less b/less/services.less index 179b64e6de..56ed296eef 100644 --- a/less/services.less +++ b/less/services.less @@ -1,8 +1,33 @@ -.middle-content{ - display: flex; - flex-direction: row; - margin-top: 2rem; - } - .middle-content h3{ - line-height: 2rem; - } \ No newline at end of file +.tabs { + + .topics { + display: flex; + justify-content: space-between; + + .tab { + + font-weight: bold; + &:hover { + cursor: pointer; + } + } + .active-tab { + background-color: lightblue; + color:white; + border: 2px solid green; + } + } +} + +// .tab{ +// display: flex; +// align-items: center; +// justify-content: center; +// .tab-button{ +// width:200px; +// border-radius: 1px; +// } +// .active-tab{ +// background-color: lightblue; +// color:white; +// } \ No newline at end of file diff --git a/services.html b/services.html index 3bf95ba406..245220713b 100644 --- a/services.html +++ b/services.html @@ -34,27 +34,39 @@

Services include: completely synergize resource taxing relationships via pre
- +
+
Pre-Construction
+
Construction
+
Design Build
+
Sustainability
+
+

-

-
-

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

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

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.

+ +
From d05f1e4af0c9f772f9e7c8b6120d0caf1eca6913 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Fri, 21 Dec 2018 14:05:33 -0500 Subject: [PATCH 12/39] fun times --- services.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/services.html b/services.html index 245220713b..b5babe3f02 100644 --- a/services.html +++ b/services.html @@ -40,7 +40,6 @@

Services include: completely synergize resource taxing relationships via pre
Design Build
Sustainability
-
@@ -53,19 +52,19 @@

Pre-Construction

Construction

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

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

- +

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.

- +
From dac149c2e00aed4694fb139cddfb59378cf1bb98 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 27 Dec 2018 20:14:56 -0500 Subject: [PATCH 13/39] Updates so far --- css/services.css | 113 +++++++++++++++++++++++++++++++++++++++++++ js/services.js | 40 +++++---------- less/index.less | 66 +++++++++++++++++++++++++ less/nav.less | 5 +- less/services.less | 118 ++++++++++++++++++++++++++++++++++++++++++++- services.html | 14 +++--- 6 files changed, 317 insertions(+), 39 deletions(-) diff --git a/css/services.css b/css/services.css index 58e3bd6916..f0a9a37dd0 100644 --- a/css/services.css +++ b/css/services.css @@ -13,3 +13,116 @@ color: white; border: 2px solid green; } +.container { + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: #222222; +} +@media (max-width: 500px) { + .container { + display: flex; + flex-direction: column; + width: 100%; + } +} +.container .header { + display: flex; + justify-content: space-between; + Font-Weight: Bold; + Font-Size: 24px; + Color: #FFFFFF; + background-color: lightslategray; + padding: 15px 15px; +} +.container .top-pic { + width: 100%; +} +.Footer { + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; +} +.Footer .email-stuff { + display: flex; + flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; +} +.Footer .email_css { + display: flex; + flex-direction: column; +} +.Footer .location { + display: flex; + justify-content: space-around; + flex-direction: column; +} +.Footer .footer-heading { + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF; +} +.Footer .Footer-text { + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; +} +.card { + display: none; +} +.nav_over { + display: flex; + justify-content: space-between; + width: 880px; +} +.nav_over:hover { + cursor: pointer; +} +.nav_over .close { + display: none; +} +.nav_over .menu { + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; +} +.nav_over .menu .menu a { + margin: 20% auto; + padding: 20px; + width: 70%; +} +.nav_over .menu .menu--open { + display: block; +} +.nav_over .menu-button { + width: 31px; + height: 30px; + padding-top: 30px; +} +.nav_over .nav_over a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; +} +.nav_over .nav_over .closenv { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} diff --git a/js/services.js b/js/services.js index fe9e6f51c7..f14d4446ce 100644 --- a/js/services.js +++ b/js/services.js @@ -6,17 +6,6 @@ class TabLink { // Get the `data-tab` value from this.tabElement and store it here this.tabData = this.tabElement.dataset.tab; - // We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task: - - // Check to see if this.tabData is equal to 'all' - if(this.tabData === 'all'){ - // If `all` is true, select all cards regardless of their data attribute values - this.cards = document.querySelectorAll(`.card`); - } else { - // else if `all` is false, only select the cards with matching this.tabData values - this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`) ; - } - // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. this.cards = Array.from(this.cards).map(card => new TabCard(card)); @@ -28,45 +17,38 @@ class TabLink { selectTab(){ - // Select all elements with the .tab class on them + const tabs = document.querySelectorAll('.tab'); - // Iterate through the NodeList removing the .active-tab class from each element + tabs.forEach(tab => tab.classList.remove('active-tab')) - // Select all of the elements with the .card class on them + const cards = document.querySelectorAll('.card') ; - // Iterate through the NodeList setting the display style each one to 'none' + cards.forEach(card => card.style.display = 'none') - // Add a class of ".active-tab" to this.tabElement + this.tabElement.classList.add('active-tab'); - // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here. + this.cards.forEach(card => card.selectCard()); } } class TabCard { constructor(cardElement){ - // Assign this.cardElement to the cardElement DOM reference this.cardElement = cardElement; } selectCard(){ - // Update the style of this.cardElement to display = "flex" + this.cardElement.style.display = 'flex'; } } - /* START HERE: - - - Select all classes named ".tab" and assign that value to the tabs variable - - - With your selection in place, now chain a .forEach() method onto the tabs variable to iterate over the DOM NodeList - - - In your .forEach() method's callback function, return a new instance of TabLink and pass in each tab as a parameter - - */ - let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); \ No newline at end of file + + let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 0deac4e44f..d9ffe1a72e 100644 --- a/less/index.less +++ b/less/index.less @@ -79,6 +79,59 @@ table{ background-color: lightslategray; padding: 15px 15px; // width: 100%; + .nav_over{ + display: flex; + justify-content: space-between; + width:880px; + &:hover{ + cursor: pointer; + } + .close{ + display:none; + } + + .nav_over .closenv{ + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + } + } + } + .menu{ + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; + &:hover{ + cursor: pointer; + } + .menu-button{ + // display: block; + } + .menu a{ + margin: 20% auto; + padding: 20px; + width: 70%; + } + .menu--open{ + display: block; + + .nav_over a{ + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; + } + } } .top-pic{ width: 100%; @@ -127,6 +180,12 @@ table{ margin-left:480px; padding-right:70px; line-height: 5rem; + @media(max-width: 500px){ + display: flex; + flex-direction: column; + margin-left: 280px; + + } } .right{ display: flex; @@ -134,6 +193,12 @@ table{ margin-right: 480px; padding-left: 70px; line-height: 5rem; + @media(max-width: 500px){ + display: flex; + flex-direction: column; + margin-right: 280px; + + } } .Footer{ display: flex; @@ -242,3 +307,4 @@ table{ .menu--open{ display: block; } + diff --git a/less/nav.less b/less/nav.less index e904c47634..c5252f287d 100644 --- a/less/nav.less +++ b/less/nav.less @@ -2,14 +2,15 @@ display: flex; justify-content: space-between; width:880px; + z-index: 1; + background-color: rgba(0,0,0,0.5); &:hover{ cursor: pointer; } .close{ display:none; } - - .nav_over a{ + .nav_over a{ padding: 8px; text-decoration: none; font-size: 36px; diff --git a/less/services.less b/less/services.less index 56ed296eef..0a2ab80891 100644 --- a/less/services.less +++ b/less/services.less @@ -18,7 +18,72 @@ } } } +.container{ + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: #222222; + @media(max-width: 500px){ + display: flex; + flex-direction: column; + width: 100%; + } + .header{ + display: flex; + justify-content: space-between; + Font-Weight: Bold; + Font-Size: 24px; + Color: #FFFFFF; + background-color: lightslategray; + padding: 15px 15px; + // width: 100%; + } + .top-pic{ + width: 100%; + } +} + +.Footer{ + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; + .email-stuff{ + display: flex; + flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF + } + .email_css{ + display: flex; + flex-direction: column; + } + .location{ + display: flex; + justify-content: space-around; + flex-direction: column; + } + .footer-heading{ + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF + } + .Footer-text{ + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF + } + +} +.card{ + display: none; +} + // .tab{ // display: flex; // align-items: center; @@ -30,4 +95,55 @@ // .active-tab{ // background-color: lightblue; // color:white; -// } \ No newline at end of file +// } +.nav_over{ + display: flex; + justify-content: space-between; + width:880px; + &:hover{ + cursor: pointer; + } + .close{ + display:none; + } + .menu{ + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; + .menu a{ + margin: 20% auto; + padding: 20px; + width: 70%; + } + .menu--open{ + display: block; + } + } + .menu-button{ + // display: block; + width: 31px; + height: 30px; + padding-top: 30px; + } + .nav_over a{ + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; + } + .nav_over .closenv{ + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + } +} \ No newline at end of file diff --git a/services.html b/services.html index b5babe3f02..ed10a523de 100644 --- a/services.html +++ b/services.html @@ -4,7 +4,7 @@ Services - + @@ -15,17 +15,17 @@

S&J

+
+ Home + Services + Contact +
-
- Home - Services - Contact -

Services

-

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

+

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

From f80ae610debdbc3f673c670b4a97e0e68055fcdc Mon Sep 17 00:00:00 2001 From: drkfogle Date: Tue, 1 Jan 2019 16:16:54 -0500 Subject: [PATCH 14/39] Projected restarted and current version --- css/index.css | 6 +- css/services.css | 137 ++++++------ css_mistakes.css | 487 +++++++++++++++++++++++++++++++++++++++++ index.html | 181 +++++++-------- index_mistakes.html | 109 +++++++++ js/services.js | 9 +- less/index.less | 315 +------------------------- less/nav.less | 56 ++--- less/services.less | 168 ++------------ services.html | 167 +++++++------- services_mistakes.html | 108 +++++++++ 11 files changed, 1009 insertions(+), 734 deletions(-) create mode 100644 css_mistakes.css create mode 100644 index_mistakes.html create mode 100644 services_mistakes.html diff --git a/css/index.css b/css/index.css index f6ca2972be..e7a7ae4b83 100644 --- a/css/index.css +++ b/css/index.css @@ -288,7 +288,7 @@ table { align-items: center; } } -.menu { +.container .menu { display: none; top: 0; left: 0; @@ -300,7 +300,7 @@ table { margin-top: 30px; overflow: auto; } -.menu .menu-button { +.container .menu .menu-button { display: block; } .menu .menu a { @@ -308,6 +308,6 @@ table { padding: 20px; width: 70%; } -.menu--open { +.container .menu--open { display: block; } diff --git a/css/services.css b/css/services.css index f0a9a37dd0..c55f3b2eba 100644 --- a/css/services.css +++ b/css/services.css @@ -1,18 +1,3 @@ -.tabs .topics { - display: flex; - justify-content: space-between; -} -.tabs .topics .tab { - font-weight: bold; -} -.tabs .topics .tab:hover { - cursor: pointer; -} -.tabs .topics .active-tab { - background-color: lightblue; - color: white; - border: 2px solid green; -} .container { max-width: 880px; width: 100%; @@ -36,9 +21,78 @@ background-color: lightslategray; padding: 15px 15px; } +.container .header .nav_over { + display: flex; + justify-content: space-between; + width: 880px; +} +.container .header .nav_over:hover { + cursor: pointer; +} +.container .header .nav_over .close { + display: none; +} +.container .header .nav_over .nav_over a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; +} +.container .header .nav_over .nav_over .closenv { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} +.container .header .nav_over .menu { + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; +} +.container .header .nav_over .menu .menu a { + margin: 20% auto; + padding: 20px; + width: 70%; +} +.container .header .nav_over .menu .menu--open { + display: block; +} +.container .header .nav_over .menu-button { + width: 31px; + height: 30px; + padding-top: 30px; +} .container .top-pic { width: 100%; } +.container .tabs .topics { + display: flex; + justify-content: space-between; +} +.container .tabs .topics .tab { + font-weight: bold; +} +.container .tabs .topics .tab:hover { + cursor: pointer; +} +.container .tabs .topics .active-tab { + background-color: black; + color: white; + border: 2px solid green; + display: block; +} +.card { + display: flex; +} .Footer { display: flex; flex-direction: row; @@ -73,56 +127,3 @@ Line-Height: 26px; Color: #FFFFFF; } -.card { - display: none; -} -.nav_over { - display: flex; - justify-content: space-between; - width: 880px; -} -.nav_over:hover { - cursor: pointer; -} -.nav_over .close { - display: none; -} -.nav_over .menu { - display: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 2; - text-align: center; - margin-top: 30px; - overflow: auto; -} -.nav_over .menu .menu a { - margin: 20% auto; - padding: 20px; - width: 70%; -} -.nav_over .menu .menu--open { - display: block; -} -.nav_over .menu-button { - width: 31px; - height: 30px; - padding-top: 30px; -} -.nav_over .nav_over a { - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; - display: block; - transition: 0.3s; -} -.nav_over .nav_over .closenv { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; -} diff --git a/css_mistakes.css b/css_mistakes.css new file mode 100644 index 0000000000..8550016223 --- /dev/null +++ b/css_mistakes.css @@ -0,0 +1,487 @@ +/*------------------------------------*\ +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 { + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: #222222; +} +@media (max-width: 500px) { + .container { + display: flex; + flex-direction: column; + width: 100%; + } +} +.container .header { + display: flex; + justify-content: space-between; + Font-Weight: Bold; + Font-Size: 24px; + Color: #FFFFFF; + background-color: lightslategray; + padding: 15px 15px; +} +.container .top-pic { + width: 100%; +} +.container .pic-words { + position: relative; + bottom: 18rem; + left: 5rem; + font-size: 5rem; + color: white; +} +.container .pic-word { + position: relative; + bottom: 9rem; + left: 5rem; + font-size: 5rem; + color: white; +} +.container .top-content { + margin: 30px 0; + display: flex; + justify-content: space-between; +} +.container .top-content .text-content { + display: flex; + flex-direction: column; + font-weight: Regular; + font-Size: 16px; + line-Height: 24px; + padding: 0 0 0 10px; +} +.container .recent-projects h3 { + position: relative; + bottom: 2rem; + background-color: #D8D8D8; + font-size: 2rem; +} +.container .pic { + width: 48%; +} +.container .recent-text { + width: 50%; + margin: 25px 0px 25px 160px; +} +.container .left { + margin-left: 480px; + padding-right: 70px; + line-height: 5rem; +} +.container .right { + display: flex; + justify-content: flex-start; + margin-right: 480px; + padding-left: 70px; + line-height: 5rem; +} +.container .Footer { + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; +} +.container .Footer .email-stuff { + display: flex; + flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; +} +.container .Footer .email_css { + display: flex; + flex-direction: column; +} +.container .Footer .location { + display: flex; + justify-content: space-around; + flex-direction: column; +} +.container .Footer .footer-heading { + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF; +} +.container .Footer .Footer-text { + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; +} +.container button { + border: 2px solid #222222; + border-radius: 4px; + margin-right: 255px; + padding-bottom: 15px; + padding-top: 15px; +} +.container button:hover { + background-color: black; + color: white; +} +.container h2 { + Font-Weight: Bold; + Font-Size: 28px; + Color: #222222; + margin-bottom: 30px; +} +.container h3 { + display: flex; + justify-content: flex-end; +} +.container h5 { + display: flex; + justify-content: center; + Background: #828282; + padding-top: 20px; + color: white; +} +.container .contact { + bottom: 8rem; +} +@media (max-width: 500px) { + .container .recent-projects { + width: 100%; + display: flex; + flex-direction: column; + } + .container .recent-projects img { + width: 100%; + align-items: center; + } +} +.container .menu { + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; +} +.container .menu .menu-button { + display: block; +} +.menu .menu a { + margin: 20% auto; + padding: 20px; + width: 70%; +} +.container .menu--open { + display: block; +} + +.nav_over { + display: flex; + justify-content: space-between; + width: 880px; + } + .nav_over:hover { + cursor: pointer; + } + .nav_over .close { + display: none; + } + .nav_over .nav_over a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; + } + .nav_over .nav_over .closenv { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + } + + .container { + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: #222222; + } + @media (max-width: 500px) { + .container { + display: flex; + flex-direction: column; + width: 100%; + } + } + .container .header { + display: flex; + justify-content: space-between; + Font-Weight: Bold; + Font-Size: 24px; + Color: #FFFFFF; + background-color: lightslategray; + padding: 15px 15px; + } + .container .header .nav_over { + display: flex; + justify-content: space-between; + width: 880px; + } + .container .header .nav_over:hover { + cursor: pointer; + } + .container .header .nav_over .close { + display: none; + } + .container .header .nav_over .nav_over a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: white; + display: block; + transition: 0.3s; + } + .container .header .nav_over .nav_over .closenv { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + } + .container .header .nav_over .menu { + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; + } + .container .header .nav_over .menu .menu a { + margin: 20% auto; + padding: 20px; + width: 70%; + } + .container .header .nav_over .menu .menu--open { + display: block; + } + .container .header .nav_over .menu-button { + width: 31px; + height: 30px; + padding-top: 30px; + } + .container .top-pic { + width: 100%; + } + .container .tabs .topics { + display: flex; + justify-content: space-between; + } + .container .tabs .topics .tab { + font-weight: bold; + } + .container .tabs .topics .tab:hover { + cursor: pointer; + } + .container .tabs .topics .active-tab { + background-color: black; + color: white; + border: 2px solid green; + display: block; + } + .card { + display: flex; + } + .Footer { + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; + } + .Footer .email-stuff { + display: flex; + flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; + } + .Footer .email_css { + display: flex; + flex-direction: column; + } + .Footer .location { + display: flex; + justify-content: space-around; + flex-direction: column; + } + .Footer .footer-heading { + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF; + } + .Footer .Footer-text { + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; + } + + .contact_us { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .contact_us .get_in_touch { + width: 40%; + line-height: 50px; + } + .contact_us .where_we_work { + line-height: 2rem; + margin-bottom: 22px; + } + .contact_us .where_we_work h1 { + font-weight: bold; + } + \ No newline at end of file diff --git a/index.html b/index.html index 73d75fff0b..c36e7eeacd 100644 --- a/index.html +++ b/index.html @@ -2,108 +2,95 @@ - Home + Services - - - -
-
-

S&J

- -
-
-
-
- -

Integrity,
- Excellence,
- Progress.

-
-
-
-
-
-

Smith & Jones Architects

- -

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

- -
- -
- -
- -
-

Futuristic Designs

- -

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

- - - -
-
-
-

Recent Projects

- -

THE VILLAS

-
-

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

-

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

-
- -

OUTSKIRTS

-
-

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

-

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

-
- -

THE BLOCKS

-
-

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

-

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

-
-
-
- -
-

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

S&J

+ +
+
+
+ +

+ Integrity,
+ Excellence,
+ Progress. +

+
+
+
+
+
+

Smith & Jones Architects

+

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

+ +
+ +
+ +
+ +
+

Futuristic Designs

+

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

+ +
+
+
+
+

Recent Projects

+ +

THE VILLAS

+

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

+

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

+ +

OUTSKIRTS

+

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

+

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

+ +

THE BLOCKS

+

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.

+
+
+ Interested in starting a project?
+ Let's talk: + + We'll never share your email with anyone else +
+ + +
+
+ + +
+
+ + +
+
+
Copyright © 2018 Smith and Jones
+
+ - \ No newline at end of file diff --git a/index_mistakes.html b/index_mistakes.html new file mode 100644 index 0000000000..73d75fff0b --- /dev/null +++ b/index_mistakes.html @@ -0,0 +1,109 @@ + + + + + Home + + + + + + + + +
+
+

S&J

+ +
+
+
+
+ +

Integrity,
+ Excellence,
+ Progress.

+
+
+
+
+
+

Smith & Jones Architects

+ +

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

+ +
+ +
+ +
+ +
+

Futuristic Designs

+ +

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

+ + + +
+
+
+

Recent Projects

+ +

THE VILLAS

+
+

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

+

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

+
+ +

OUTSKIRTS

+
+

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

+

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

+
+ +

THE BLOCKS

+
+

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

+

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

+
+
+
+ +
+

New York

+

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

+
+
+

Florida

+

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

+
+
+

California

+

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

+
+
+
Copyright © 2018 Smith and Jones
+
+ + + \ No newline at end of file diff --git a/js/services.js b/js/services.js index f14d4446ce..321264d0c5 100644 --- a/js/services.js +++ b/js/services.js @@ -5,8 +5,13 @@ class TabLink { // Get the `data-tab` value from this.tabElement and store it here this.tabData = this.tabElement.dataset.tab; - - + if(this.tabData === 'all'){ + // If `all` is true, select all cards regardless of their data attribute values + this.cards = document.querySelectorAll(`.card`); + } else { + // else if `all` is false, only select the cards with matching this.tabData values + this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`) ; + } // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. this.cards = Array.from(this.cards).map(card => new TabCard(card)); diff --git a/less/index.less b/less/index.less index d9ffe1a72e..97c82a4ddb 100644 --- a/less/index.less +++ b/less/index.less @@ -1,310 +1,5 @@ - -/*------------------------------------*\ -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{ - max-width: 880px; - width: 100%; - margin: 0 auto; - Background: #FFFFFF; - Color: #222222; - @media(max-width: 500px){ - display: flex; - flex-direction: column; - width: 100%; - } - .header{ - display: flex; - justify-content: space-between; - Font-Weight: Bold; - Font-Size: 24px; - Color: #FFFFFF; - background-color: lightslategray; - padding: 15px 15px; - // width: 100%; - .nav_over{ - display: flex; - justify-content: space-between; - width:880px; - &:hover{ - cursor: pointer; - } - .close{ - display:none; - } - - .nav_over .closenv{ - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; - } - } - } - .menu{ - display: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.5); - z-index: 2; - text-align: center; - margin-top: 30px; - overflow: auto; - &:hover{ - cursor: pointer; - } - .menu-button{ - // display: block; - } - .menu a{ - margin: 20% auto; - padding: 20px; - width: 70%; - } - .menu--open{ - display: block; - - .nav_over a{ - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; - display: block; - transition: 0.3s; - } - } - } - .top-pic{ - width: 100%; - } - .pic-words{ - position: relative; - bottom: 18rem; - left: 5rem; - font-size: 5rem; - color: white; - } - .pic-word{ - position: relative; - bottom: 9rem; - left: 5rem; - font-size: 5rem; - color: white; - } - .top-content{ - margin: 30px 0; - display: flex; - justify-content: space-between; - .text-content{ - display: flex; - flex-direction: column; - font-weight: Regular; - font-Size: 16px; - line-Height: 24px; - padding: 0 0 0 10px; - } - } - .recent-projects h3{ - position: relative; - bottom: 2rem; - background-color: #D8D8D8; - font-size: 2rem; - } - .pic{ - width:48%; - } - .recent-text{ - width: 50%; - margin: 25px 0px 25px 160px; - } - .left{ - margin-left:480px; - padding-right:70px; - line-height: 5rem; - @media(max-width: 500px){ - display: flex; - flex-direction: column; - margin-left: 280px; - - } - } - .right{ - display: flex; - justify-content: flex-start; - margin-right: 480px; - padding-left: 70px; - line-height: 5rem; - @media(max-width: 500px){ - display: flex; - flex-direction: column; - margin-right: 280px; - - } - } - .Footer{ - display: flex; - flex-direction: row; - Background: #828282; - justify-content: space-evenly; - .email-stuff{ - display: flex; - flex-direction: column; - Font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF - } - .email_css{ - display: flex; - flex-direction: column; - } - .location{ - display: flex; - justify-content: space-around; - flex-direction: column; - } - .footer-heading{ - font-Weight: Regular; - Font-Size: 20px; - Line-Height: 24px; - Color: #FFFFFF - } - .Footer-text{ - font-Weight: Regular; - font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF - } - } - button{ - border: 2px solid #222222; - border-radius: 4px; - margin-right: 255px; - padding-bottom: 15px; - padding-top: 15px; - &:hover{ - background-color: black; - color: white; - } - } - - h2{ - Font-Weight: Bold; - Font-Size: 28px; - Color: #222222; - margin-bottom: 30px; - } - h3{ - display: flex; - justify-content: flex-end; - } - - h5{ - display: flex; - justify-content: center; - Background: #828282; - padding-top: 20px; - color: white; - } - .contact{ - bottom: 8rem; - } - - - .recent-projects{ - @media(max-width: 500px){ - width:100%; - display: flex; - flex-direction: column; - img{ - width:100%; - align-items: center; - } - } - } -} - - -.menu{ - display: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.5); - z-index: 2; - text-align: center; - margin-top: 30px; - overflow: auto; - .menu-button{ - display: block; - } - .menu a{ - margin: 20% auto; - padding: 20px; - width: 70%; - } - -} -.menu--open{ - display: block; -} - +@import "reset.less"; +@import "global.less"; +@import "services.less"; +@import "home.less"; +@import "nav.less"; \ No newline at end of file diff --git a/less/nav.less b/less/nav.less index c5252f287d..5329f4f736 100644 --- a/less/nav.less +++ b/less/nav.less @@ -1,27 +1,33 @@ -.nav_over{ - display: flex; - justify-content: space-between; - width:880px; - z-index: 1; - background-color: rgba(0,0,0,0.5); - &:hover{ - cursor: pointer; - } - .close{ - display:none; - } - .nav_over a{ - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; - display: block; - transition: 0.3s; +nav{ + display: flex; + justify-content: space-between; + width: 880px; + .menu{ + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; + .menu a{ + margin: 20% auto; + padding: 20px; + width: 70%; + } + .menu--open{ + display: block; } - .nav_over .closenv{ - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; +} + .menu-button{ + width: 31px; + height: 30px; + // padding-top: 30px; } -} \ No newline at end of file + .close{ + display:none; + } +} diff --git a/less/services.less b/less/services.less index 0a2ab80891..eb2343aabc 100644 --- a/less/services.less +++ b/less/services.less @@ -1,149 +1,29 @@ -.tabs { - - .topics { - display: flex; - justify-content: space-between; - - .tab { - - font-weight: bold; - &:hover { - cursor: pointer; - } - } - .active-tab { - background-color: lightblue; - color:white; - border: 2px solid green; - } - } -} -.container{ - max-width: 880px; - width: 100%; - margin: 0 auto; - Background: #FFFFFF; - Color: #222222; - @media(max-width: 500px){ - display: flex; - flex-direction: column; - width: 100%; - } - .header{ - display: flex; - justify-content: space-between; - Font-Weight: Bold; - Font-Size: 24px; - Color: #FFFFFF; - background-color: lightslategray; - padding: 15px 15px; - // width: 100%; - } - .top-pic{ - width: 100%; - } - -} - -.Footer{ - display: flex; - flex-direction: row; - Background: #828282; - justify-content: space-evenly; - .email-stuff{ - display: flex; - flex-direction: column; - Font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF - } - .email_css{ - display: flex; - flex-direction: column; - } - .location{ - display: flex; - justify-content: space-around; - flex-direction: column; - } - .footer-heading{ - font-Weight: Regular; - Font-Size: 20px; - Line-Height: 24px; - Color: #FFFFFF - } - .Footer-text{ - font-Weight: Regular; - font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF - } - -} -.card{ - display: none; -} - -// .tab{ -// display: flex; -// align-items: center; -// justify-content: center; -// .tab-button{ -// width:200px; -// border-radius: 1px; -// } -// .active-tab{ -// background-color: lightblue; -// color:white; -// } -.nav_over{ +.tabs{ + .topics{ display: flex; justify-content: space-between; - width:880px; - &:hover{ - cursor: pointer; - } - .close{ - display:none; - } - .menu{ - display: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.5); - z-index: 2; - text-align: center; - margin-top: 30px; - overflow: auto; - .menu a{ - margin: 20% auto; - padding: 20px; - width: 70%; - } - .menu--open{ - display: block; + .tab{ + font-weight: bold; + &:hover { + cursor: pointer; } } - .menu-button{ - // display: block; - width: 31px; - height: 30px; - padding-top: 30px; - } - .nav_over a{ - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; + .active-tab { + background-color: black; + color:white; + border: 2px solid green; display: block; - transition: 0.3s; - } - .nav_over .closenv{ - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; - } -} \ No newline at end of file + } + } +} + +.card{ + display: block; +} +.services_jumbotron{ + position: relative; + bottom: 1rem; +} +.top-content .services_title{ + bottom: 10rem; +} \ No newline at end of file diff --git a/services.html b/services.html index ed10a523de..69589b6f0d 100644 --- a/services.html +++ b/services.html @@ -4,104 +4,101 @@ Services - + -
-
- -
-
- -

Services

-

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

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

Services

+

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

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

Pre-Construction

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

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

- -
+ +

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

+

Design Build

+

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

+

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

+
-
-

California

-

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

+
+

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.

+
-
-
Copyright © 2018 Smith and Jones
-
- - - - \ No newline at end of file +
+
+ Interested in starting a project?
+ Let's talk: + + We'll never share your email with anyone else +
+ + +
+
+ + +
+
+ + +
+
+
Copyright © 2018 Smith and Jones
+
+ + + + \ No newline at end of file diff --git a/services_mistakes.html b/services_mistakes.html new file mode 100644 index 0000000000..557c5a0fc5 --- /dev/null +++ b/services_mistakes.html @@ -0,0 +1,108 @@ + + + + + Services + + + + +
+
+ +
+
+ +

Services

+

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

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

+
+
+
Copyright © 2018 Smith and Jones
+
+ + + + + \ No newline at end of file From 01a04934646b01e7dba3159320c073c5c53bb5fb Mon Sep 17 00:00:00 2001 From: drkfogle Date: Tue, 1 Jan 2019 20:27:23 -0500 Subject: [PATCH 15/39] Sorry forgot to add a lot of elements. this is actually where I am --- css/global.css | 0 css/home.css | 0 css/index.css | 214 ++++++++++++++++++++++++++++------------------- index.html | 14 ++-- less/global.less | 88 +++++++++++++++++++ less/home.less | 78 +++++++++++++++++ less/reset.less | 59 +++++++++++++ 7 files changed, 362 insertions(+), 91 deletions(-) create mode 100644 css/global.css create mode 100644 css/home.css create mode 100644 less/global.less create mode 100644 less/home.less create mode 100644 less/reset.less diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/css/home.css b/css/home.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/css/index.css b/css/index.css index e7a7ae4b83..abda8ee72e 100644 --- a/css/index.css +++ b/css/index.css @@ -133,13 +133,12 @@ table { border-collapse: collapse; border-spacing: 0; } -/* Your Code Goes Here */ .container { max-width: 880px; width: 100%; margin: 0 auto; Background: #FFFFFF; - Color: #222222; + Color: black; } @media (max-width: 500px) { .container { @@ -151,112 +150,49 @@ table { .container .header { display: flex; justify-content: space-between; - Font-Weight: Bold; - Font-Size: 24px; + font-weight: bold; + font-size: 24px; Color: #FFFFFF; background-color: lightslategray; padding: 15px 15px; } -.container .top-pic { - width: 100%; -} -.container .pic-words { - position: relative; - bottom: 18rem; - left: 5rem; - font-size: 5rem; - color: white; -} -.container .pic-word { - position: relative; - bottom: 9rem; - left: 5rem; - font-size: 5rem; +.container h1 { color: white; } -.container .top-content { - margin: 30px 0; - display: flex; - justify-content: space-between; -} -.container .top-content .text-content { - display: flex; - flex-direction: column; - font-weight: Regular; - font-Size: 16px; - line-Height: 24px; - padding: 0 0 0 10px; -} -.container .recent-projects h3 { - position: relative; - bottom: 2rem; - background-color: #D8D8D8; - font-size: 2rem; -} -.container .pic { - width: 48%; -} -.container .recent-text { - width: 50%; - margin: 25px 0px 25px 160px; -} -.container .left { - margin-left: 480px; - padding-right: 70px; - line-height: 5rem; -} -.container .right { - display: flex; - justify-content: flex-start; - margin-right: 480px; - padding-left: 70px; - line-height: 5rem; -} -.container .Footer { +.container footer { display: flex; flex-direction: row; Background: #828282; justify-content: space-evenly; } -.container .Footer .email-stuff { +.container footer .emailQ { display: flex; flex-direction: column; Font-Size: 14px; Line-Height: 26px; Color: #FFFFFF; } -.container .Footer .email_css { +.container footer .email-css { display: flex; flex-direction: column; } -.container .Footer .location { +.container footer .location { display: flex; justify-content: space-around; flex-direction: column; } -.container .Footer .footer-heading { +.container footer .email-heading { font-Weight: Regular; Font-Size: 20px; Line-Height: 24px; Color: #FFFFFF; } -.container .Footer .Footer-text { +.container footer .email-text { font-Weight: Regular; font-Size: 14px; Line-Height: 26px; Color: #FFFFFF; } -.container button { - border: 2px solid #222222; - border-radius: 4px; - margin-right: 255px; - padding-bottom: 15px; - padding-top: 15px; -} -.container button:hover { - background-color: black; - color: white; -} .container h2 { Font-Weight: Bold; Font-Size: 28px; @@ -274,21 +210,127 @@ table { padding-top: 20px; color: white; } -.container .contact { - bottom: 8rem; +.top-content h1 { + position: relative; + bottom: 18rem; + left: 5rem; + font-size: 5rem; + color: white; +} +.top-content .img { + width: 100%; +} +.tabs .topics { + display: flex; + justify-content: space-between; +} +.tabs .topics .tab { + font-weight: bold; +} +.tabs .topics .tab:hover { + cursor: pointer; +} +.tabs .topics .active-tab { + background-color: black; + color: white; + border: 2px solid green; + display: block; +} +.card { + display: block; +} +.services_jumbotron { + position: relative; + bottom: 1rem; +} +.top-content .services_title { + bottom: 10rem; +} +.recent-projects h3 { + position: relative; + bottom: 2rem; + background-color: #D8D8D8; + font-size: 2rem; +} +.recent-projects p { + width: 50%; + margin: 25px 0px 25px 160px; + text-align: center; } @media (max-width: 500px) { - .container .recent-projects { + .recent-projects { width: 100%; display: flex; flex-direction: column; } - .container .recent-projects img { + .recent-projects img { width: 100%; align-items: center; } } -.container .menu { +button { + border: 2px solid #222222; + border-radius: 4px; + margin-right: 255px; + padding-bottom: 15px; + padding-top: 15px; +} +button:hover { + background-color: black; + color: white; +} +.middle-content { + margin: 30px 0; + display: flex; + justify-content: space-between; +} +.middle-content .text-content { + display: flex; + flex-direction: column; + font-weight: Regular; + font-Size: 16px; + line-Height: 24px; + padding: 0 0 0 10px; +} +.middle-content .pic1 { + padding-right: 45px; + width: 48%; +} +.middle-content .pic2 { + width: 48%; +} +.left { + margin-left: 480px; + padding-right: 70px; + line-height: 5rem; +} +@media (max-width: 500px) { + .left { + display: flex; + flex-direction: column; + margin-left: 280px; + } +} +.container .right { + display: flex; + justify-content: flex-start; + margin-right: 480px; + padding-left: 70px; + line-height: 5rem; +} +@media (max-width: 500px) { + .container .right { + display: flex; + flex-direction: column; + margin-right: 280px; + } +} +nav { + display: flex; + justify-content: space-between; + width: 880px; +} +nav .menu { display: none; top: 0; left: 0; @@ -300,14 +342,18 @@ table { margin-top: 30px; overflow: auto; } -.container .menu .menu-button { - display: block; -} -.menu .menu a { +nav .menu .menu a { margin: 20% auto; padding: 20px; width: 70%; } -.container .menu--open { +nav .menu .menu--open { display: block; } +nav .menu-button { + width: 31px; + height: 30px; +} +nav .close { + display: none; +} diff --git a/index.html b/index.html index c36e7eeacd..3a0d44f710 100644 --- a/index.html +++ b/index.html @@ -14,12 +14,12 @@

S&J

- +

Integrity,
Excellence,
@@ -34,11 +34,11 @@

Smith & Jones Architects

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

- +
- +

Futuristic Designs

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

@@ -48,15 +48,15 @@

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

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

- +

THE BLOCKS

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

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

diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..176a117702 --- /dev/null +++ b/less/global.less @@ -0,0 +1,88 @@ +.container{ + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: black; + @media(max-width: 500px){ + display:flex; + flex-direction: column; + width:100%; + } + .header{ + display: flex; + justify-content: space-between; + font-weight: bold; + font-size: 24px; + Color: #FFFFFF; + background-color: lightslategray; + padding: 15px 15px; + } + h1{ + color: white; + } + footer{ + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; + .emailQ{ + display: flex; + flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF + } + .email-css{ + display: flex; + flex-direction: column; + } + .location{ + display: flex; + justify-content: space-around; + flex-direction: column; + } + .email-heading{ + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF + } + .email-text{ + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF + } + } + h2{ + Font-Weight: Bold; + Font-Size: 28px; + Color: #222222; + margin-bottom: 30px; + } + h3{ + display: flex; + justify-content: flex-end; + } + h5{ + display: flex; + justify-content: center; + Background: #828282; + padding-top: 20px; + color: white; + } +} + +.top-content{ + h1{ + position: relative; + bottom: 18rem; + left: 5rem; + font-size: 5rem; + color: white; + } + .img{ + width:100%; + } +} \ No newline at end of file diff --git a/less/home.less b/less/home.less new file mode 100644 index 0000000000..bf40414370 --- /dev/null +++ b/less/home.less @@ -0,0 +1,78 @@ + +.recent-projects{ + h3{ + position: relative; + bottom: 2rem; + background-color: #D8D8D8; + font-size: 2rem; + } + p{ + width: 50%; + margin: 25px 0px 25px 160px; + text-align: center; + } + @media(max-width: 500px){ + width:100%; + display: flex; + flex-direction: column; + img{ + width:100%; + align-items: center; + } + } +} +button{ + border: 2px solid #222222; + border-radius: 4px; + margin-right: 255px; + padding-bottom: 15px; + padding-top: 15px; + &:hover{ + background-color: black; + color: white; + } +} +.middle-content{ + margin: 30px 0; + display: flex; + justify-content: space-between; + .text-content{ + display: flex; + flex-direction: column; + font-weight: Regular; + font-Size: 16px; + line-Height: 24px; + padding: 0 0 0 10px; + } + .pic1{ + padding-right: 45px; + width:48%; + } + .pic2{ + width:48%; + } +} +.left{ + margin-left:480px; + padding-right:70px; + line-height: 5rem; + @media(max-width: 500px){ + display: flex; + flex-direction: column; + margin-left: 280px; + + } +} +.container .right{ + display: flex; + justify-content: flex-start; + margin-right: 480px; + padding-left: 70px; + line-height: 5rem; + @media(max-width: 500px){ + display: flex; + flex-direction: column; + margin-right: 280px; + + } +} \ No newline at end of file diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000000..8734ee0b59 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,59 @@ + +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ + +html,body,div,span,applet,object,iframe, +h1,h2,h3,h4,h5,h6,p,blockquote,pre, +a,abbr,acronym,address,big,cite,code, +del,dfn,em,img,ins,kbd,q,s,samp, +small,strike,strong,sub,sup,tt,var, +b,u,i,center, +dl,dt,dd,ol,ul,li, +fieldset,form,label,legend, +table,caption,tbody,tfoot,thead,tr,th,td, +article,aside,canvas,details,figcaption,figure, +footer,header,hgroup,menu,nav,section,summary, +time,mark,audio,video{ +margin:0; +padding:0; +border:0; +outline:0; +font-size:100%; +font:inherit; +vertical-align:baseline; +} +/* HTML5 display-role reset for older browsers */ +article,aside,details,figcaption,figure, +footer,header,hgroup,menu,nav,section{ +display:block; +} +body{ +line-height:1; +} +ol,ul{ +list-style:none; +} +blockquote,q{ +quotes:none; +} +blockquote:before,blockquote:after, +q:before,q:after{ +content:’’; +content:none; +} +ins{ +text-decoration:none; +} +del{ +text-decoration:line-through; +} + +table{ +border-collapse:collapse; +border-spacing:0; +} \ No newline at end of file From aad695391446b5d69c2027dcb0a550f27dc43214 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Wed, 2 Jan 2019 11:13:44 -0500 Subject: [PATCH 16/39] This is what I should've pushed yesterday --- css/index.css | 3 ++- less/global.less | 2 +- less/services.less | 1 + services.html | 14 +++++++------- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index abda8ee72e..073951b890 100644 --- a/css/index.css +++ b/css/index.css @@ -217,7 +217,7 @@ table { font-size: 5rem; color: white; } -.top-content .img { +.top-content img { width: 100%; } .tabs .topics { @@ -242,6 +242,7 @@ table { .services_jumbotron { position: relative; bottom: 1rem; + width: 100%; } .top-content .services_title { bottom: 10rem; diff --git a/less/global.less b/less/global.less index 176a117702..71b4c82b7f 100644 --- a/less/global.less +++ b/less/global.less @@ -82,7 +82,7 @@ font-size: 5rem; color: white; } - .img{ + img{ width:100%; } } \ No newline at end of file diff --git a/less/services.less b/less/services.less index eb2343aabc..2d9748a8e5 100644 --- a/less/services.less +++ b/less/services.less @@ -23,6 +23,7 @@ .services_jumbotron{ position: relative; bottom: 1rem; + width: 100%; } .top-content .services_title{ bottom: 10rem; diff --git a/services.html b/services.html index 69589b6f0d..d48e597c71 100644 --- a/services.html +++ b/services.html @@ -14,8 +14,8 @@
From f24c19ca64fcc55edbfc88bf278268689ce63abf Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 3 Jan 2019 17:19:33 -0500 Subject: [PATCH 17/39] THE NAV WORKS!! --- css/contact.css | 16 ------ css/global.css | 0 css/home.css | 0 css/index.css | 17 +++++-- css/nav.css | 25 --------- css/services.css | 129 ----------------------------------------------- js/index.js | 80 ++++++++++++++--------------- less/global.less | 3 +- less/nav.less | 15 ++++-- 9 files changed, 64 insertions(+), 221 deletions(-) delete mode 100644 css/contact.css delete mode 100644 css/global.css delete mode 100644 css/home.css delete mode 100644 css/nav.css delete mode 100644 css/services.css diff --git a/css/contact.css b/css/contact.css deleted file mode 100644 index 0c73242ea4..0000000000 --- a/css/contact.css +++ /dev/null @@ -1,16 +0,0 @@ -.contact_us { - display: flex; - flex-direction: row; - justify-content: space-between; -} -.contact_us .get_in_touch { - width: 40%; - line-height: 50px; -} -.contact_us .where_we_work { - line-height: 2rem; - margin-bottom: 22px; -} -.contact_us .where_we_work h1 { - font-weight: bold; -} diff --git a/css/global.css b/css/global.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/css/home.css b/css/home.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/css/index.css b/css/index.css index 073951b890..2e3bd36eee 100644 --- a/css/index.css +++ b/css/index.css @@ -156,7 +156,7 @@ table { background-color: lightslategray; padding: 15px 15px; } -.container h1 { +.container .header h1 { color: white; } .container footer { @@ -342,14 +342,15 @@ nav .menu { text-align: center; margin-top: 30px; overflow: auto; + position: fixed; } -nav .menu .menu a { +nav .menu a { margin: 20% auto; padding: 20px; width: 70%; -} -nav .menu .menu--open { - display: block; + color: white; + display: flex; + flex-direction: column; } nav .menu-button { width: 31px; @@ -358,3 +359,9 @@ nav .menu-button { nav .close { display: none; } +nav .menu--open { + display: block; +} +nav nav:hover { + cursor: pointer; +} diff --git a/css/nav.css b/css/nav.css deleted file mode 100644 index a84d388e14..0000000000 --- a/css/nav.css +++ /dev/null @@ -1,25 +0,0 @@ -.nav_over { - display: flex; - justify-content: space-between; - width: 880px; -} -.nav_over:hover { - cursor: pointer; -} -.nav_over .close { - display: none; -} -.nav_over .nav_over a { - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; - display: block; - transition: 0.3s; -} -.nav_over .nav_over .closenv { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; -} diff --git a/css/services.css b/css/services.css deleted file mode 100644 index c55f3b2eba..0000000000 --- a/css/services.css +++ /dev/null @@ -1,129 +0,0 @@ -.container { - max-width: 880px; - width: 100%; - margin: 0 auto; - Background: #FFFFFF; - Color: #222222; -} -@media (max-width: 500px) { - .container { - display: flex; - flex-direction: column; - width: 100%; - } -} -.container .header { - display: flex; - justify-content: space-between; - Font-Weight: Bold; - Font-Size: 24px; - Color: #FFFFFF; - background-color: lightslategray; - padding: 15px 15px; -} -.container .header .nav_over { - display: flex; - justify-content: space-between; - width: 880px; -} -.container .header .nav_over:hover { - cursor: pointer; -} -.container .header .nav_over .close { - display: none; -} -.container .header .nav_over .nav_over a { - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; - display: block; - transition: 0.3s; -} -.container .header .nav_over .nav_over .closenv { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; -} -.container .header .nav_over .menu { - display: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 2; - text-align: center; - margin-top: 30px; - overflow: auto; -} -.container .header .nav_over .menu .menu a { - margin: 20% auto; - padding: 20px; - width: 70%; -} -.container .header .nav_over .menu .menu--open { - display: block; -} -.container .header .nav_over .menu-button { - width: 31px; - height: 30px; - padding-top: 30px; -} -.container .top-pic { - width: 100%; -} -.container .tabs .topics { - display: flex; - justify-content: space-between; -} -.container .tabs .topics .tab { - font-weight: bold; -} -.container .tabs .topics .tab:hover { - cursor: pointer; -} -.container .tabs .topics .active-tab { - background-color: black; - color: white; - border: 2px solid green; - display: block; -} -.card { - display: flex; -} -.Footer { - display: flex; - flex-direction: row; - Background: #828282; - justify-content: space-evenly; -} -.Footer .email-stuff { - display: flex; - flex-direction: column; - Font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF; -} -.Footer .email_css { - display: flex; - flex-direction: column; -} -.Footer .location { - display: flex; - justify-content: space-around; - flex-direction: column; -} -.Footer .footer-heading { - font-Weight: Regular; - Font-Size: 20px; - Line-Height: 24px; - Color: #FFFFFF; -} -.Footer .Footer-text { - font-Weight: Regular; - font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF; -} diff --git a/js/index.js b/js/index.js index 53a3388288..d0464aa4c2 100644 --- a/js/index.js +++ b/js/index.js @@ -1,55 +1,55 @@ -// // JS goes here -class TabLink { - constructor(tabElement){ - // assign this.tabElement to the tabElement DOM reference - this.tabElement = tabElement; +// // // JS goes here +// class TabLink { +// constructor(tabElement){ +// // assign this.tabElement to the tabElement DOM reference +// this.tabElement = tabElement; - // Get the `data-tab` value from this.tabElement and store it here - this.tabData = this.tabElement.dataset.tab; +// // Get the `data-tab` value from this.tabElement and store it here +// this.tabData = this.tabElement.dataset.tab; - // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. - // this.cards = Array.from(this.cards).map(card => new TabCard(card)); - this.item = document.querySelector(`.content[data-tab='${this.data}']`); - // Add a click event that invokes this.selectTab - this.tabElement.addEventListener('click', () => {this.selectTab() - }) - }; +// // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. +// // this.cards = Array.from(this.cards).map(card => new TabCard(card)); +// this.item = document.querySelector(`.content[data-tab='${this.data}']`); +// // Add a click event that invokes this.selectTab +// this.tabElement.addEventListener('click', () => {this.selectTab() +// }) +// }; - selectTab(){ +// selectTab(){ - // Select all elements with the .tab class on them - const tabs = document.querySelectorAll('.tab'); +// // Select all elements with the .tab class on them +// const tabs = document.querySelectorAll('.tab'); - // Iterate through the NodeList removing the .active-tab class from each element - tabs.forEach(tab => tab.classList.remove('active-tab')) +// // Iterate through the NodeList removing the .active-tab class from each element +// tabs.forEach(tab => tab.classList.remove('active-tab')) - // Select all of the elements with the .card class on them - // const cards = document.querySelectorAll('.card') ; +// // Select all of the elements with the .card class on them +// // const cards = document.querySelectorAll('.card') ; - // // Iterate through the NodeList setting the display style each one to 'none' - // cards.forEach(card => card.style.display = 'none') +// // // Iterate through the NodeList setting the display style each one to 'none' +// // cards.forEach(card => card.style.display = 'none') - // Add a class of ".active-tab" to this.tabElement - this.tabElement.classList.add('active-tab'); - - // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here. - // this.cards.forEach(card => card.selectCard()); - } -} -// class TabCard { -// constructor(cardElement){ -// // Assign this.cardElement to the cardElement DOM reference -// this.cardElement = cardElement; -// } -// selectCard(){ -// // Update the style of this.cardElement to display = "flex" -// this.cardElement.style.display = 'flex'; -// } +// // Add a class of ".active-tab" to this.tabElement +// this.tabElement.classList.add('active-tab'); +// // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here. +// // this.cards.forEach(card => card.selectCard()); // } +// } +// // class TabCard { +// // constructor(cardElement){ +// // // Assign this.cardElement to the cardElement DOM reference +// // this.cardElement = cardElement; +// // } +// // selectCard(){ +// // // Update the style of this.cardElement to display = "flex" +// // this.cardElement.style.display = 'flex'; +// // } + +// // } -let tab = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); +// let tab = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); diff --git a/less/global.less b/less/global.less index 71b4c82b7f..1d362c5fc3 100644 --- a/less/global.less +++ b/less/global.less @@ -17,10 +17,10 @@ Color: #FFFFFF; background-color: lightslategray; padding: 15px 15px; - } h1{ color: white; } +} footer{ display: flex; flex-direction: row; @@ -73,7 +73,6 @@ color: white; } } - .top-content{ h1{ position: relative; diff --git a/less/nav.less b/less/nav.less index 5329f4f736..9e85f70c1d 100644 --- a/less/nav.less +++ b/less/nav.less @@ -13,13 +13,14 @@ nav{ text-align: center; margin-top: 30px; overflow: auto; - .menu a{ + position: fixed; + a{ margin: 20% auto; padding: 20px; width: 70%; - } - .menu--open{ - display: block; + color: white; + display: flex; + flex-direction: column; } } .menu-button{ @@ -30,4 +31,10 @@ nav{ .close{ display:none; } + .menu--open{ + display: block; + } + nav:hover{ + cursor: pointer; + } } From 5012e9c442b56f03a604f6bbbe71947e68ec2c68 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Fri, 4 Jan 2019 18:51:56 -0500 Subject: [PATCH 18/39] media isn't done --- css/index.css | 35 +++++++++++++++++++++++++++++++---- index.html | 26 +++++++++++++++----------- js/services.js | 35 ++++++++++++++++++----------------- less/global.less | 28 ++++++++++++++-------------- less/index.less | 3 ++- less/services.less | 34 +++++++++++++++++++++++++++++++--- less/variables.less | 1 + services.html | 18 +++++++++++++----- 8 files changed, 125 insertions(+), 55 deletions(-) create mode 100644 less/variables.less diff --git a/css/index.css b/css/index.css index 2e3bd36eee..2074c847ae 100644 --- a/css/index.css +++ b/css/index.css @@ -210,14 +210,14 @@ table { padding-top: 20px; color: white; } -.top-content h1 { +.container .top-content h1 { position: relative; bottom: 18rem; left: 5rem; font-size: 5rem; color: white; } -.top-content img { +.container .top-content img { width: 100%; } .tabs .topics { @@ -226,19 +226,32 @@ table { } .tabs .topics .tab { font-weight: bold; + border: 2px solid black; + background-color: white; + padding: 20px 20px; + color: black; } .tabs .topics .tab:hover { cursor: pointer; } .tabs .topics .active-tab { - background-color: black; + background-color: lightblue; color: white; - border: 2px solid green; + border: 2px solid black; display: block; + padding: 20px 20px; } .card { display: block; } +.card .card_info h1 { + font-weight: bold; + font-size: 20px; +} +.card .card_info p { + font-size: 15px; + line-height: 1.5rem; +} .services_jumbotron { position: relative; bottom: 1rem; @@ -247,6 +260,20 @@ table { .top-content .services_title { bottom: 10rem; } +.top-content p { + position: relative; + bottom: 55px; +} +@media (max-width: 500px) { + .container { + display: flex; + flex-direction: column; + align-items: center; + } + .container .tab { + padding: 20px 120px; + } +} .recent-projects h3 { position: relative; bottom: 2rem; diff --git a/index.html b/index.html index 3a0d44f710..90dd580267 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Services + Home -
-
-

S&J

- -
-
+
+
+ +
- +

Integrity,
Excellence,
Progress.

-
diff --git a/js/services.js b/js/services.js index 321264d0c5..f8a1b25830 100644 --- a/js/services.js +++ b/js/services.js @@ -12,43 +12,44 @@ class TabLink { // else if `all` is false, only select the cards with matching this.tabData values this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`) ; } - // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. + // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. this.cards = Array.from(this.cards).map(card => new TabCard(card)); // Add a click event that invokes this.selectTab this.tabElement.addEventListener('click', () => {this.selectTab() - }) - }; + }); + } selectTab(){ - + // Select all elements with the .tab class on them + const tabs = document.querySelectorAll(".tab"); - const tabs = document.querySelectorAll('.tab'); - - - tabs.forEach(tab => tab.classList.remove('active-tab')) + // Iterate through the NodeList removing the .active-tab class from each node + tabs.forEach( tab => { + tab.classList.remove("active-tab"); + }) + // Select all of the elements with the .card class on them + const cards = document.querySelectorAll('.card'); - const cards = document.querySelectorAll('.card') ; + // Iterate through the NodeList setting the display style each one to 'none' + cards.forEach( card => card.style.display = 'none'); + // Add a class of ".active-tab" to this.tabElement + this.tabElement.classList.add("active-tab"); - cards.forEach(card => card.style.display = 'none') - - - this.tabElement.classList.add('active-tab'); - - + // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. this.cards.forEach(card => card.selectCard()); } } - + class TabCard { constructor(cardElement){ this.cardElement = cardElement; } selectCard(){ - this.cardElement.style.display = 'flex'; + this.cardElement.style.display = "flex"; } } diff --git a/less/global.less b/less/global.less index 1d362c5fc3..cb6282a543 100644 --- a/less/global.less +++ b/less/global.less @@ -20,7 +20,8 @@ h1{ color: white; } -} + } + footer{ display: flex; flex-direction: row; @@ -72,16 +73,15 @@ padding-top: 20px; color: white; } -} -.top-content{ - h1{ - position: relative; - bottom: 18rem; - left: 5rem; - font-size: 5rem; - color: white; - } - img{ - width:100%; - } -} \ No newline at end of file + .top-content{ + h1{ + position: relative; + bottom: 18rem; + left: 5rem; + font-size: 5rem; + color: white; + } + img{ + width:100%; + } +}} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 97c82a4ddb..88c7b82eda 100644 --- a/less/index.less +++ b/less/index.less @@ -2,4 +2,5 @@ @import "global.less"; @import "services.less"; @import "home.less"; -@import "nav.less"; \ No newline at end of file +@import "nav.less"; +@import "variables.less"; \ No newline at end of file diff --git a/less/services.less b/less/services.less index 2d9748a8e5..605c0bbb81 100644 --- a/less/services.less +++ b/less/services.less @@ -4,21 +4,34 @@ justify-content: space-between; .tab{ font-weight: bold; + border: 2px solid black; + background-color: white; + padding: 20px 20px; + color: black; &:hover { cursor: pointer; } } .active-tab { - background-color: black; + background-color: lightblue; color:white; - border: 2px solid green; + border: 2px solid black; display: block; + padding: 20px 20px; } - } +} } .card{ display: block; + .card_info h1{ + font-weight: bold; + font-size: 20px; + } + .card_info p{ + font-size: 15px; + line-height: 1.5rem; + } } .services_jumbotron{ position: relative; @@ -27,4 +40,19 @@ } .top-content .services_title{ bottom: 10rem; +} +.top-content p{ + position: relative; + bottom: 55px; +} + +@media @phone{ + .container{ + display: flex; + flex-direction: column; + align-items: center; + .tab{ + padding: 20px 120px; + } +} } \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..f1f3b157ac --- /dev/null +++ b/less/variables.less @@ -0,0 +1 @@ +@phone: ~"(max-width: 500px)"; \ No newline at end of file diff --git a/services.html b/services.html index d48e597c71..0f609ad7d4 100644 --- a/services.html +++ b/services.html @@ -34,7 +34,7 @@

Services

-
Pre-Construction
+
Pre-Construction
Construction
Design Build
Sustainability
@@ -42,28 +42,36 @@

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.

+
-
+
+

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.

+
From de6f868725d6483c2aa6ca13cf61ef9e4b4ccf22 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Mon, 7 Jan 2019 13:02:42 -0500 Subject: [PATCH 19/39] All that's left is mobile --- css/index.css | 105 ++++++++++++++++++++++++++------------------- index.html | 14 +++--- js/index.js | 82 ++++++++++++++++++----------------- less/global.less | 29 +++++-------- less/home.less | 21 --------- less/services.less | 75 ++++++++++++++++++++++++++++---- services.html | 4 +- 7 files changed, 190 insertions(+), 140 deletions(-) diff --git a/css/index.css b/css/index.css index 2074c847ae..c7a910d91a 100644 --- a/css/index.css +++ b/css/index.css @@ -140,13 +140,6 @@ table { Background: #FFFFFF; Color: black; } -@media (max-width: 500px) { - .container { - display: flex; - flex-direction: column; - width: 100%; - } -} .container .header { display: flex; justify-content: space-between; @@ -210,15 +203,12 @@ table { padding-top: 20px; color: white; } -.container .top-content h1 { - position: relative; - bottom: 18rem; - left: 5rem; - font-size: 5rem; - color: white; -} -.container .top-content img { - width: 100%; +@media (max-width: 500px) { + .container { + display: flex; + flex-direction: column; + width: 100%; + } } .tabs .topics { display: flex; @@ -264,14 +254,68 @@ table { position: relative; bottom: 55px; } +.top-content h1 { + position: relative; + bottom: 18rem; + left: 5rem; + font-size: 5rem; + color: white; +} +.top-content img { + width: 100%; +} @media (max-width: 500px) { .container { + width: 90%; display: flex; flex-direction: column; - align-items: center; + margin: 0 auto; } .container .tab { - padding: 20px 120px; + margin-bottom: 20px; + display: flex; + justify-content: center; + } + .container .card { + display: flex; + flex-direction: column; + } + .container footer { + display: flex; + flex-direction: column; + } + .container footer .location { + display: flex; + flex-direction: column; + } + .container footer .email-heading { + justify-content: flex-start; + } + nav { + display: flex; + justify-content: space-between; + width: 380px; + } + .top-content img { + width: 100%; + height: 280px; + } + .top-content .services_title { + bottom: 110px; + font-size: 4rem; + } + .tabs { + display: flex; + justify-content: center; + } + .topics { + display: flex; + flex-direction: column; + width: 320px; + } + .topics .active-tab { + display: flex; + justify-content: center; } } .recent-projects h3 { @@ -285,17 +329,6 @@ table { margin: 25px 0px 25px 160px; text-align: center; } -@media (max-width: 500px) { - .recent-projects { - width: 100%; - display: flex; - flex-direction: column; - } - .recent-projects img { - width: 100%; - align-items: center; - } -} button { border: 2px solid #222222; border-radius: 4px; @@ -332,13 +365,6 @@ button:hover { padding-right: 70px; line-height: 5rem; } -@media (max-width: 500px) { - .left { - display: flex; - flex-direction: column; - margin-left: 280px; - } -} .container .right { display: flex; justify-content: flex-start; @@ -346,13 +372,6 @@ button:hover { padding-left: 70px; line-height: 5rem; } -@media (max-width: 500px) { - .container .right { - display: flex; - flex-direction: column; - margin-right: 280px; - } -} nav { display: flex; justify-content: space-between; diff --git a/index.html b/index.html index 90dd580267..de1ccb6ec7 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,8 @@

S&J

- Home - Services + Home + Services Contact
@@ -66,12 +66,12 @@

THE BLOCKS

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

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

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

- We'll never share your email with anyone else +

We'll never share your email with anyone else
Copyright © 2018 Smith and Jones
- + diff --git a/js/index.js b/js/index.js index d0464aa4c2..bd99771d5f 100644 --- a/js/index.js +++ b/js/index.js @@ -1,55 +1,59 @@ -// // // JS goes here // class TabLink { -// constructor(tabElement){ -// // assign this.tabElement to the tabElement DOM reference -// this.tabElement = tabElement; - -// // Get the `data-tab` value from this.tabElement and store it here -// this.tabData = this.tabElement.dataset.tab; - -// // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. -// // this.cards = Array.from(this.cards).map(card => new TabCard(card)); -// this.item = document.querySelector(`.content[data-tab='${this.data}']`); -// // Add a click event that invokes this.selectTab -// this.tabElement.addEventListener('click', () => {this.selectTab() -// }) -// }; +// constructor(tabElement){ +// // assign this.tabElement to the tabElement DOM reference +// this.tabElement = tabElement; + +// // Get the `data-tab` value from this.tabElement and store it here +// this.tabData = this.tabElement.dataset.tab; +// if(this.tabData === 'all'){ +// // If `all` is true, select all cards regardless of their data attribute values +// this.cards = document.querySelectorAll(`.card`); +// } else { +// // else if `all` is false, only select the cards with matching this.tabData values +// this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`) ; +// } +// // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. +// this.cards = Array.from(this.cards).map(card => new TabCard(card)); + +// // Add a click event that invokes this.selectTab +// this.tabElement.addEventListener('click', () => {this.selectTab() +// }); +// } // selectTab(){ - // // Select all elements with the .tab class on them -// const tabs = document.querySelectorAll('.tab'); +// const tabs = document.querySelectorAll(".tab"); -// // Iterate through the NodeList removing the .active-tab class from each element -// tabs.forEach(tab => tab.classList.remove('active-tab')) +// // Iterate through the NodeList removing the .active-tab class from each node +// tabs.forEach( tab => { +// tab.classList.remove("active-tab"); +// }) // // Select all of the elements with the .card class on them -// // const cards = document.querySelectorAll('.card') ; - -// // // Iterate through the NodeList setting the display style each one to 'none' -// // cards.forEach(card => card.style.display = 'none') +// const cards = document.querySelectorAll('.card'); +// // Iterate through the NodeList setting the display style each one to 'none' +// cards.forEach( card => card.style.display = 'none'); + // // Add a class of ".active-tab" to this.tabElement -// this.tabElement.classList.add('active-tab'); - -// // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Just un-comment the code and study what is happening here. -// // this.cards.forEach(card => card.selectCard()); +// this.tabElement.classList.add("active-tab"); + +// // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. +// this.cards.forEach(card => card.selectCard()); // } // } -// // class TabCard { -// // constructor(cardElement){ -// // // Assign this.cardElement to the cardElement DOM reference -// // this.cardElement = cardElement; -// // } -// // selectCard(){ -// // // Update the style of this.cardElement to display = "flex" -// // this.cardElement.style.display = 'flex'; -// // } - -// // } +// class TabCard { +// constructor(cardElement){ +// this.cardElement = cardElement; +// } +// selectCard(){ +// this.cardElement.style.display = "flex"; +// } + +// } -// let tab = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); +// let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); diff --git a/less/global.less b/less/global.less index cb6282a543..e4bf725c83 100644 --- a/less/global.less +++ b/less/global.less @@ -4,11 +4,6 @@ margin: 0 auto; Background: #FFFFFF; Color: black; - @media(max-width: 500px){ - display:flex; - flex-direction: column; - width:100%; - } .header{ display: flex; justify-content: space-between; @@ -19,9 +14,8 @@ padding: 15px 15px; h1{ color: white; + } } - } - footer{ display: flex; flex-direction: row; @@ -73,15 +67,12 @@ padding-top: 20px; color: white; } - .top-content{ - h1{ - position: relative; - bottom: 18rem; - left: 5rem; - font-size: 5rem; - color: white; - } - img{ - width:100%; - } -}} \ No newline at end of file + +} +@media(max-width: 500px){ +.container{ + display:flex; + flex-direction: column; + width:100%; + } + } \ No newline at end of file diff --git a/less/home.less b/less/home.less index bf40414370..dabdcf71d5 100644 --- a/less/home.less +++ b/less/home.less @@ -11,15 +11,6 @@ margin: 25px 0px 25px 160px; text-align: center; } - @media(max-width: 500px){ - width:100%; - display: flex; - flex-direction: column; - img{ - width:100%; - align-items: center; - } - } } button{ border: 2px solid #222222; @@ -56,12 +47,6 @@ button{ margin-left:480px; padding-right:70px; line-height: 5rem; - @media(max-width: 500px){ - display: flex; - flex-direction: column; - margin-left: 280px; - - } } .container .right{ display: flex; @@ -69,10 +54,4 @@ button{ margin-right: 480px; padding-left: 70px; line-height: 5rem; - @media(max-width: 500px){ - display: flex; - flex-direction: column; - margin-right: 280px; - - } } \ No newline at end of file diff --git a/less/services.less b/less/services.less index 605c0bbb81..8e5ef87f40 100644 --- a/less/services.less +++ b/less/services.less @@ -46,13 +46,70 @@ bottom: 55px; } -@media @phone{ - .container{ - display: flex; - flex-direction: column; - align-items: center; - .tab{ - padding: 20px 120px; +.top-content{ + h1{ + position: relative; + bottom: 18rem; + left: 5rem; + font-size: 5rem; + color: white; } -} -} \ No newline at end of file + img{ + width:100%; + } + } + +@media (max-width: 500px) { + .container{ + width: 90%; + display: flex; + flex-direction: column; + margin: 0 auto; + .tab{ + margin-bottom: 20px; + display: flex; + justify-content: center + } + .card{ + display: flex; + flex-direction: column; + } + footer{ + display: flex; + flex-direction: column; + .location { + display: flex; + flex-direction: column; + } + .email-heading{ + justify-content: flex-start; + } + } + } + nav{ + display: flex; + justify-content: space-between; + width: 380px; + } + .top-content img { + width: 100%; + height: 280px; + } + .top-content .services_title { + bottom: 110px; + font-size: 4rem; + } + .tabs{ + display: flex; + justify-content: center; + } + .topics { + display: flex; + flex-direction: column; + width: 320px; + .active-tab{ + display: flex; + justify-content: center + } + } + } \ No newline at end of file diff --git a/services.html b/services.html index 0f609ad7d4..d88b90eedd 100644 --- a/services.html +++ b/services.html @@ -17,8 +17,8 @@

S&J

- Home - Services + Home + Services Contact
From 7e6a9cc309225eb1bf873a6ebe655541724eaad2 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Mon, 7 Jan 2019 14:22:29 -0500 Subject: [PATCH 20/39] working on home mobile --- css/index.css | 39 ++++++++++++++++++++++----------------- less/global.less | 22 +++++++++++++++++++++- less/services.less | 20 +++----------------- 3 files changed, 46 insertions(+), 35 deletions(-) diff --git a/css/index.css b/css/index.css index c7a910d91a..6a96bf3746 100644 --- a/css/index.css +++ b/css/index.css @@ -209,6 +209,26 @@ table { flex-direction: column; width: 100%; } + .container .middle-content { + justify-content: center; + } + .container footer { + display: flex; + flex-direction: column; + } + .container footer .location { + display: flex; + flex-direction: column; + margin-bottom: 30px; + } + .container footer .email-heading { + justify-content: flex-start; + } + nav { + display: flex; + justify-content: space-between; + width: 380px; + } } .tabs .topics { display: flex; @@ -228,7 +248,8 @@ table { background-color: lightblue; color: white; border: 2px solid black; - display: block; + display: flex; + justify-content: center; padding: 20px 20px; } .card { @@ -280,22 +301,6 @@ table { display: flex; flex-direction: column; } - .container footer { - display: flex; - flex-direction: column; - } - .container footer .location { - display: flex; - flex-direction: column; - } - .container footer .email-heading { - justify-content: flex-start; - } - nav { - display: flex; - justify-content: space-between; - width: 380px; - } .top-content img { width: 100%; height: 280px; diff --git a/less/global.less b/less/global.less index e4bf725c83..b3320a0755 100644 --- a/less/global.less +++ b/less/global.less @@ -74,5 +74,25 @@ display:flex; flex-direction: column; width:100%; + .middle-content{ + justify-content: center; + } + footer{ + display: flex; + flex-direction: column; + .location { + display: flex; + flex-direction: column; + margin-bottom: 30px; + } + .email-heading{ + justify-content: flex-start; + } } - } \ No newline at end of file + } +nav{ +display: flex; +justify-content: space-between; +width: 380px; + } +} \ No newline at end of file diff --git a/less/services.less b/less/services.less index 8e5ef87f40..f43005278e 100644 --- a/less/services.less +++ b/less/services.less @@ -16,7 +16,8 @@ background-color: lightblue; color:white; border: 2px solid black; - display: block; + display: flex; + justify-content: center; padding: 20px 20px; } } @@ -74,23 +75,7 @@ display: flex; flex-direction: column; } - footer{ - display: flex; - flex-direction: column; - .location { - display: flex; - flex-direction: column; - } - .email-heading{ - justify-content: flex-start; - } - } } - nav{ - display: flex; - justify-content: space-between; - width: 380px; - } .top-content img { width: 100%; height: 280px; @@ -112,4 +97,5 @@ justify-content: center } } + } \ No newline at end of file From ab01e36932fdc113813f9ade83ea932265716e4e Mon Sep 17 00:00:00 2001 From: drkfogle Date: Mon, 7 Jan 2019 16:16:40 -0500 Subject: [PATCH 21/39] shifting nested elements around --- css/index.css | 25 +++++++++++++++++++++++++ index.html | 4 ++-- less/home.less | 26 ++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 6a96bf3746..75283654c9 100644 --- a/css/index.css +++ b/css/index.css @@ -377,6 +377,31 @@ button:hover { padding-left: 70px; line-height: 5rem; } +@media (max-width: 500px) { + .top-content { + height: 270px; + } + .top-content h1 { + font-size: 3rem; + bottom: 12rem; + left: 1rem; + } + .home-content { + flex-direction: column-reverse; + justify-content: center; + } + .home-content .pic1 { + width: 100%; + padding: 0; + } + .text-content { + margin-top: 20px; + } + .text-content button { + width: 359px; + font-size: 18px; + } +} nav { display: flex; justify-content: space-between; diff --git a/index.html b/index.html index de1ccb6ec7..622cdf264f 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@

-
+

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

@@ -41,7 +41,7 @@

Smith & Jones Architects

-
+

Futuristic Designs

diff --git a/less/home.less b/less/home.less index dabdcf71d5..085d6bf69d 100644 --- a/less/home.less +++ b/less/home.less @@ -54,4 +54,30 @@ button{ margin-right: 480px; padding-left: 70px; line-height: 5rem; +} + +@media (max-width: 500px){ + .top-content{ + height: 270px; + h1{ + font-size: 3rem; + bottom: 12rem; + left: 1rem; + } + } + .home-content{ + flex-direction: column-reverse; + justify-content: center; + .pic1{ + width: 100%; + padding: 0; + } + } + .text-content{ + margin-top: 20px; + button{ + width: 359px; + font-size: 18px; + } + } } \ No newline at end of file From 83d9631ef70647af76ab5e590632ce029489def8 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Mon, 7 Jan 2019 17:23:19 -0500 Subject: [PATCH 22/39] Just minor changes left --- css/index.css | 22 ++++++++++++++++++++++ index.html | 4 ++-- less/global.less | 4 ++++ less/home.less | 20 ++++++++++++++++++++ services.html | 4 ++-- 5 files changed, 50 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 75283654c9..239f0205c9 100644 --- a/css/index.css +++ b/css/index.css @@ -216,6 +216,10 @@ table { display: flex; flex-direction: column; } + .container footer .emailQ p { + font-size: 20px; + color: #FFFFFF; + } .container footer .location { display: flex; flex-direction: column; @@ -394,6 +398,9 @@ button:hover { width: 100%; padding: 0; } + .hc2 { + flex-direction: column; + } .text-content { margin-top: 20px; } @@ -401,6 +408,21 @@ button:hover { width: 359px; font-size: 18px; } + .recent-projects img { + width: 100%; + height: 210px; + } + .recent-projects p { + margin-left: 80px; + } + .recent-projects .left { + margin: 0; + padding-right: 90px; + } + .recent-projects .right { + margin: 0; + padding-left: 90px; + } } nav { display: flex; diff --git a/index.html b/index.html index 622cdf264f..3c16606ad9 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@

Smith & Jones Architects

-
+

Futuristic Designs

@@ -68,7 +68,7 @@

THE BLOCKS

Interested in starting a project?
Let's talk:

-

We'll never share your email with anyone else

 diff --git a/less/global.less b/less/global.less index b3320a0755..0502f7858f 100644 --- a/less/global.less +++ b/less/global.less @@ -80,6 +80,10 @@ footer{ display: flex; flex-direction: column; + .emailQ p{ + font-size: 20px; + color: #FFFFFF; + } .location { display: flex; flex-direction: column; diff --git a/less/home.less b/less/home.less index 085d6bf69d..17c98c47ea 100644 --- a/less/home.less +++ b/less/home.less @@ -73,6 +73,9 @@ button{ padding: 0; } } + .hc2{ + flex-direction: column; + } .text-content{ margin-top: 20px; button{ @@ -80,4 +83,21 @@ button{ font-size: 18px; } } + .recent-projects{ + img{ + width: 100%; + height: 210px; + } + p{ + margin-left:80px; + } + .left{ + margin: 0; + padding-right: 90px; + } + .right{ + margin: 0; + padding-left: 90px; + } + } } \ No newline at end of file diff --git a/services.html b/services.html index d88b90eedd..35a2cea52f 100644 --- a/services.html +++ b/services.html @@ -78,8 +78,8 @@

Sustainability

Interested in starting a project?
Let's talk: - We'll never share your email with anyone else
From e43c5559d6358e6e7a345482e4a95c96da2ae172 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Mon, 7 Jan 2019 17:57:30 -0500 Subject: [PATCH 23/39] trying to find my close button for the nav --- css/index.css | 19 ++++++++++++++++--- index.html | 2 +- less/global.less | 18 ++++++++++++++---- less/home.less | 4 +++- less/nav.less | 3 +++ 5 files changed, 37 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index 239f0205c9..5d27b57277 100644 --- a/css/index.css +++ b/css/index.css @@ -220,12 +220,20 @@ table { font-size: 20px; color: #FFFFFF; } - .container footer .location { + .container footer .emailQ .confidential { + font-size: 14px; + display: flex; + justify-content: center; + } + .container footer .email-css { + padding: 0 20px; + } + .container .location { display: flex; flex-direction: column; margin-bottom: 30px; } - .container footer .email-heading { + .container .email-heading { justify-content: flex-start; } nav { @@ -413,7 +421,9 @@ button:hover { height: 210px; } .recent-projects p { - margin-left: 80px; + margin-left: 50px; + margin-right: 80px; + width: 270px; } .recent-projects .left { margin: 0; @@ -460,6 +470,9 @@ nav .close { nav .menu--open { display: block; } +nav .menu--open .close { + display: block; +} nav nav:hover { cursor: pointer; } diff --git a/index.html b/index.html index 3c16606ad9..435914e0ca 100644 --- a/index.html +++ b/index.html @@ -71,7 +71,7 @@

THE BLOCKS

-

We'll never share your email with anyone else

+

We'll never share your email with anyone else

Services

-
Pre-Construction
+
Pre-Construction
Construction
Design Build
Sustainability
From a250f8ea78a21726bfd86a4a864de7476a23b025 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Tue, 8 Jan 2019 15:24:01 -0500 Subject: [PATCH 25/39] JS works again --- js/services.js | 101 ++++++++++++++++++++++++++----------------------- 1 file changed, 54 insertions(+), 47 deletions(-) diff --git a/js/services.js b/js/services.js index eb441d0558..07c27d5314 100644 --- a/js/services.js +++ b/js/services.js @@ -1,55 +1,62 @@ class TabLink { - constructor(tabElement){ - // assign this.tabElement to the tabElement DOM reference - this.tabElement = tabElement; - - // Get the `data-tab` value from this.tabElement and store it here - this.tabData = this.tabElement.dataset.tab; + constructor(tabElement){ + // assign this.tabElement to the tabElement DOM reference + this.tabElement = tabElement; + + // Get the `data-tab` value from this.tabElement and store it here + this.tabData = this.tabElement.dataset.tab; + + // We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task: + // Check to see if this.tabData is equal to 'all' + if(this.tabData === 'all'){ + // If `all` is true, select all cards regardless of their data attribute values + this.cards = document.querySelectorAll(`.card`); + } else { + // else if `all` is false, only select the cards with matching this.tabData values + this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); + } + + // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. + this.cards = Array.from(this.cards).map( card => new TabCard(card)); + + // Add a click event that invokes this.selectTab + this.tabElement.addEventListener('click', () => {this.selectTab()}); + } + selectTab(){ + // Select all elements with the .tab class on them + const tabs = document.querySelectorAll(".tab"); + + // Iterate through the NodeList removing the .active-tab class from each node + tabs.forEach( tab => { + tab.classList.remove("active-tab"); + }) - this.item = document.querySelector(`.card[data-tab="${this.tabData}"]`); - - // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. - this.cards = Array.from(this.cards).map(card => new TabCard(card)); - // Add a click event that invokes this.selectTab - this.tabElement.addEventListener('click', () => {this.selectTab() - }) - }; - selectTab(){ - // Select all elements with the .tab class on them - const tabs = document.querySelectorAll(".tab"); - - // Iterate through the NodeList removing the .active-tab class from each node - tabs.forEach( tab => { - tab.classList.remove("active-tab"); - }) - - // Select all of the elements with the .card class on them - const cards = document.querySelectorAll('.card'); - - // Iterate through the NodeList setting the display style each one to 'none' - cards.forEach( card => card.style.display = 'none'); - - // Add a class of ".active-tab" to this.tabElement - this.tabElement.classList.add("active-tab"); - - // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. - this.cards.forEach(card => card.selectCard()); - } + // Select all of the elements with the .card class on them + const cards = document.querySelectorAll('.card'); + + // Iterate through the NodeList setting the display style each one to 'none' + cards.forEach( card => card.style.display = 'none'); + + // Add a class of ".active-tab" to this.tabElement + this.tabElement.classList.add("active-tab"); + + // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. + this.cards.forEach(card => card.selectCard()); } - class TabCard { - constructor(cardElement){ - this.cardElement = cardElement; - } - selectCard(){ - // const items = document.querySelectorAll('.card'); - // items.forEach( item => { item.classList.remove('active-tab'); - // }) - // this.cardElement.classList.add('active-tab') - this.cardElement.style.display = "flex"; - } - +} + +class TabCard { + constructor(cardElement){ + // Assign this.cardElement to the passed in cardElement. + this.cardElement = cardElement; + } + selectCard(){ + // Update the style of this.cardElement to display = "flex" + this.cardElement.style.display = "flex"; } +} + let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); From 6510320a782c51fd244025da64d29a48df10a8ef Mon Sep 17 00:00:00 2001 From: drkfogle Date: Tue, 8 Jan 2019 16:44:01 -0500 Subject: [PATCH 26/39] what I've tinkered with so far --- js/contact.js | 87 +++++++++++++++++++++++++------------------------- js/services.js | 13 ++++++-- 2 files changed, 55 insertions(+), 45 deletions(-) diff --git a/js/contact.js b/js/contact.js index fcf340f1c9..9e14ef5a9b 100644 --- a/js/contact.js +++ b/js/contact.js @@ -1,51 +1,52 @@ -// *----------------------------------------* -// class TabLink { -// constructor(element) { -// this.element = element; +/ +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(`.card[data-tab="${this.tabData}"]`); -// // Using the Item element, create a new instance of the TabItem class -// this.tabItem = new TabItem(this.item); + // Get the custom data attribute on the Link + this.data = this.element.dataset.tab; + // Using the custom data attribute get the associated Item element + this.item = document.querySelector(`.card[data-tab="${this.tabData}"]`); + // 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(); -// }); -// }; + 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'); + 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') -// }); + // 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'); + // 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(); -// } -// } + // Call the select method on the item associated with this link + this.tabItem.select(); + } +} -// class TabItem { -// constructor(element) { -// this.element = element; -// } +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'); -// } -// // } + 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'); + } +} +*/ \ No newline at end of file diff --git a/js/services.js b/js/services.js index 07c27d5314..5e5d02918c 100644 --- a/js/services.js +++ b/js/services.js @@ -53,9 +53,18 @@ class TabCard { } selectCard(){ // Update the style of this.cardElement to display = "flex" - this.cardElement.style.display = "flex"; + // Select all ".tabs-item" elements from the DOM + const items = document.querySelectorAll('.tab'); + // Remove the class "tabs-item-selected" from each element + items.forEach( item => { + item.classList.remove('active-tab'); + }) + // Add a class named "tabs-item-selected" to this element + this.cardElement.classList.add('active-tab'); + this.cardElement.style.display = "flex"; + } + } -} From 0d8cde51e6819be844cf7350bd750a13ea432064 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Tue, 8 Jan 2019 17:23:16 -0500 Subject: [PATCH 27/39] JS will not display flex again --- css/index.css | 14 ++++++++------ js/services.js | 9 +++++---- less/global.less | 11 +++++------ less/nav.less | 3 +++ 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/css/index.css b/css/index.css index 5d27b57277..87cf0d1abf 100644 --- a/css/index.css +++ b/css/index.css @@ -139,15 +139,14 @@ table { margin: 0 auto; Background: #FFFFFF; Color: black; + font-weight: Regular; + font-size: 16px; + line-height: 24px; } .container .header { - display: flex; - justify-content: space-between; - font-weight: bold; - font-size: 24px; - Color: #FFFFFF; background-color: lightslategray; - padding: 15px 15px; + height: 60px; + max-width: 880px; } .container .header h1 { color: white; @@ -438,6 +437,9 @@ nav { display: flex; justify-content: space-between; width: 880px; + color: #FFFFFF; + height: 50px; + align-items: center; } nav .menu { display: none; diff --git a/js/services.js b/js/services.js index 5e5d02918c..c5780a1ba4 100644 --- a/js/services.js +++ b/js/services.js @@ -5,7 +5,7 @@ class TabLink { // Get the `data-tab` value from this.tabElement and store it here this.tabData = this.tabElement.dataset.tab; - + /* // We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task: // Check to see if this.tabData is equal to 'all' if(this.tabData === 'all'){ @@ -15,10 +15,11 @@ class TabLink { // else if `all` is false, only select the cards with matching this.tabData values this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); } - + // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. this.cards = Array.from(this.cards).map( card => new TabCard(card)); - + */ + this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); // Add a click event that invokes this.selectTab this.tabElement.addEventListener('click', () => {this.selectTab()}); } @@ -54,7 +55,7 @@ class TabCard { selectCard(){ // Update the style of this.cardElement to display = "flex" // Select all ".tabs-item" elements from the DOM - const items = document.querySelectorAll('.tab'); + const items = document.querySelectorAll('.card'); // Remove the class "tabs-item-selected" from each element items.forEach( item => { item.classList.remove('active-tab'); diff --git a/less/global.less b/less/global.less index 72f85cb19d..025897bb64 100644 --- a/less/global.less +++ b/less/global.less @@ -4,14 +4,13 @@ margin: 0 auto; Background: #FFFFFF; Color: black; + font-weight: Regular; + font-size: 16px; + line-height: 24px; .header{ - display: flex; - justify-content: space-between; - font-weight: bold; - font-size: 24px; - Color: #FFFFFF; background-color: lightslategray; - padding: 15px 15px; + height: 60px; + max-width: 880px; h1{ color: white; } diff --git a/less/nav.less b/less/nav.less index ecd479185d..5ac17ff459 100644 --- a/less/nav.less +++ b/less/nav.less @@ -2,6 +2,9 @@ nav{ display: flex; justify-content: space-between; width: 880px; + color: #FFFFFF; + height: 50px; + align-items: center; .menu{ display: none; top: 0; From 53069434d3d0379f58d70577dbef4071426c4fcd Mon Sep 17 00:00:00 2001 From: drkfogle Date: Wed, 9 Jan 2019 11:22:04 -0500 Subject: [PATCH 28/39] Tinkering with toggling active tabs --- css/index.css | 6 ++-- js/contact.js | 85 ++++++++++++++++++++++++++-------------------- js/services.js | 22 ++++++------ less/services.less | 8 +++-- services.html | 4 +-- 5 files changed, 71 insertions(+), 54 deletions(-) diff --git a/css/index.css b/css/index.css index 87cf0d1abf..1b72bfa2a9 100644 --- a/css/index.css +++ b/css/index.css @@ -259,12 +259,14 @@ table { background-color: lightblue; color: white; border: 2px solid black; - display: flex; justify-content: center; padding: 20px 20px; } +.tabs .topics .active-tab-selected { + display: flex; +} .card { - display: block; + display: none; } .card .card_info h1 { font-weight: bold; diff --git a/js/contact.js b/js/contact.js index 9e14ef5a9b..a49806d7d8 100644 --- a/js/contact.js +++ b/js/contact.js @@ -1,52 +1,63 @@ -/ + class TabLink { - constructor(element) { + constructor(element) { this.element = element; - // Get the custom data attribute on the Link + // Get the custom data attribute on teh Link this.data = this.element.dataset.tab; - // Using the custom data attribute get the associated Item element - this.item = document.querySelector(`.card[data-tab="${this.tabData}"]`); + // 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(); + // Call the select method you define below + this.select(); }); - }; - - 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(); + 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; + } + + 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'); + } } -} -*/ \ No newline at end of file + + /* START HERE: + + - Select all classes named ".tabs-link" and assign that value to the links variable + + - With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList + + - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter + + */ + + let links = document.querySelectorAll('.tabs-link').forEach( link => new TabLink(link)); \ No newline at end of file diff --git a/js/services.js b/js/services.js index c5780a1ba4..797fb1e368 100644 --- a/js/services.js +++ b/js/services.js @@ -19,9 +19,11 @@ class TabLink { // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. this.cards = Array.from(this.cards).map( card => new TabCard(card)); */ - this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); + this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); // Add a click event that invokes this.selectTab + this.tabCard = Array.from(this.cards).map( cards => new TabCard(cards)); this.tabElement.addEventListener('click', () => {this.selectTab()}); + } selectTab(){ @@ -33,17 +35,17 @@ class TabLink { tab.classList.remove("active-tab"); }) - // Select all of the elements with the .card class on them - const cards = document.querySelectorAll('.card'); + // // Select all of the elements with the .card class on them + // const cards = document.querySelectorAll('.card'); - // Iterate through the NodeList setting the display style each one to 'none' - cards.forEach( card => card.style.display = 'none'); + // // Iterate through the NodeList setting the display style each one to 'none' + // cards.forEach( card => card.style.display = 'none'); // Add a class of ".active-tab" to this.tabElement this.tabElement.classList.add("active-tab"); // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. - this.cards.forEach(card => card.selectCard()); + this.tabCard.forEach(tabCard => tabCard.selectCard()); } } @@ -55,16 +57,14 @@ class TabCard { selectCard(){ // Update the style of this.cardElement to display = "flex" // Select all ".tabs-item" elements from the DOM - const items = document.querySelectorAll('.card'); + const items = document.querySelectorAll('.card_info'); // Remove the class "tabs-item-selected" from each element items.forEach( item => { - item.classList.remove('active-tab'); + item.classList.remove('active-tab-selected'); }) // Add a class named "tabs-item-selected" to this element - this.cardElement.classList.add('active-tab'); - this.cardElement.style.display = "flex"; + this.cardElement.classList.add('active-tab-selected'); } - } diff --git a/less/services.less b/less/services.less index f43005278e..cd1c71c903 100644 --- a/less/services.less +++ b/less/services.less @@ -16,15 +16,19 @@ background-color: lightblue; color:white; border: 2px solid black; - display: flex; justify-content: center; padding: 20px 20px; } + .active-tab-selected{ + display: flex; + } } } + + .card{ - display: block; + display: none; .card_info h1{ font-weight: bold; font-size: 20px; diff --git a/services.html b/services.html index a27f81e3d9..df44e36722 100644 --- a/services.html +++ b/services.html @@ -34,7 +34,7 @@

Services

-
Pre-Construction
+
Pre-Construction
Construction
Design Build
Sustainability
@@ -43,7 +43,7 @@

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.

From 4eacd94b9c590db489a967eab3cb086b2e3f4aba Mon Sep 17 00:00:00 2001 From: drkfogle Date: Wed, 9 Jan 2019 12:24:53 -0500 Subject: [PATCH 29/39] pretty sure on the right path however my function doesn't want to work --- js/services.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/services.js b/js/services.js index 797fb1e368..3a29170c97 100644 --- a/js/services.js +++ b/js/services.js @@ -16,7 +16,7 @@ class TabLink { this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); } - // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. + // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. this.cards = Array.from(this.cards).map( card => new TabCard(card)); */ this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); @@ -45,7 +45,7 @@ class TabLink { this.tabElement.classList.add("active-tab"); // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. - this.tabCard.forEach(tabCard => tabCard.selectCard()); + this.tabCard.selectCard(); } } From 01f45e2b2b2ac2db643b5156414ecd00d3086418 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Wed, 9 Jan 2019 17:02:15 -0500 Subject: [PATCH 30/39] IT WORKS. --- css/index.css | 6 +-- js/contact.js | 42 ++++++++--------- js/index.js | 114 +++++++++++++++++++++++---------------------- js/services.js | 2 +- less/services.less | 7 +-- services.html | 6 +-- 6 files changed, 91 insertions(+), 86 deletions(-) diff --git a/css/index.css b/css/index.css index 1b72bfa2a9..ae737d8000 100644 --- a/css/index.css +++ b/css/index.css @@ -262,9 +262,6 @@ table { justify-content: center; padding: 20px 20px; } -.tabs .topics .active-tab-selected { - display: flex; -} .card { display: none; } @@ -276,6 +273,9 @@ table { font-size: 15px; line-height: 1.5rem; } +.active-tab-selected { + display: flex; +} .services_jumbotron { position: relative; bottom: 1rem; diff --git a/js/contact.js b/js/contact.js index a49806d7d8..0bc4c53ab5 100644 --- a/js/contact.js +++ b/js/contact.js @@ -6,7 +6,7 @@ class TabLink { // 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}"]`); + this.item = document.querySelector(`.card[data-tab="${this.data}"]`); // Using the Item element, create a new instance of the TabItem class this.tabItem = new TabItem(this.item); @@ -15,21 +15,21 @@ class TabLink { this.select(); }); }; - + select() { // Get all of the elements with the tabs-link class - const links = document.querySelectorAll('.tabs-link'); - + const links = document.querySelectorAll('.tab'); + // 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(); + link.classList.remove('active-tab') + }); + + // Add a class named "tabs-link-selected" to this link + this.element.classList.add('active-tab'); + +// Call the select method on the item associated with this link +this.tabItem.select(); } } @@ -39,14 +39,14 @@ class TabLink { } 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'); + // Select all ".tabs-item" elements from the DOM + const items = document.querySelectorAll('.card'); + // Remove the class "tabs-item-selected" from each element + items.forEach( item => { + item.classList.remove('active-tab-selected'); + }) + // Add a class named "tabs-item-selected" to this element + this.element.classList.add('active-tab-selected'); } } @@ -60,4 +60,4 @@ class TabLink { */ - let links = document.querySelectorAll('.tabs-link').forEach( link => new TabLink(link)); \ No newline at end of file + let tabs = document.querySelectorAll('.tab').forEach( tab => new TabLink(tab)); \ No newline at end of file diff --git a/js/index.js b/js/index.js index bd99771d5f..63fdbd2558 100644 --- a/js/index.js +++ b/js/index.js @@ -1,59 +1,63 @@ + // class TabLink { -// constructor(tabElement){ -// // assign this.tabElement to the tabElement DOM reference -// this.tabElement = tabElement; - -// // Get the `data-tab` value from this.tabElement and store it here -// this.tabData = this.tabElement.dataset.tab; -// if(this.tabData === 'all'){ -// // If `all` is true, select all cards regardless of their data attribute values -// this.cards = document.querySelectorAll(`.card`); -// } else { -// // else if `all` is false, only select the cards with matching this.tabData values -// this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`) ; +// 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(); // } -// // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. -// this.cards = Array.from(this.cards).map(card => new TabCard(card)); - -// // Add a click event that invokes this.selectTab -// this.tabElement.addEventListener('click', () => {this.selectTab() -// }); -// } - -// selectTab(){ -// // Select all elements with the .tab class on them -// const tabs = document.querySelectorAll(".tab"); - -// // Iterate through the NodeList removing the .active-tab class from each node -// tabs.forEach( tab => { -// tab.classList.remove("active-tab"); -// }) - -// // Select all of the elements with the .card class on them -// const cards = document.querySelectorAll('.card'); - -// // Iterate through the NodeList setting the display style each one to 'none' -// cards.forEach( card => card.style.display = 'none'); - -// // Add a class of ".active-tab" to this.tabElement -// this.tabElement.classList.add("active-tab"); - -// // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. -// this.cards.forEach(card => card.selectCard()); -// } -// } - -// class TabCard { -// constructor(cardElement){ -// this.cardElement = cardElement; // } -// selectCard(){ - -// this.cardElement.style.display = "flex"; + +// 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'); +// } // } - -// } - - -// let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); - + +// /* START HERE: + +// - Select all classes named ".tabs-link" and assign that value to the links variable + +// - With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList + +// - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter + +// */ + +// let links = document.querySelectorAll('.tabs-link').forEach( link => new TabLink(link)); \ No newline at end of file diff --git a/js/services.js b/js/services.js index 3a29170c97..f2ded9489a 100644 --- a/js/services.js +++ b/js/services.js @@ -45,7 +45,7 @@ class TabLink { this.tabElement.classList.add("active-tab"); // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. - this.tabCard.selectCard(); + this.tabCard.select(); } } diff --git a/less/services.less b/less/services.less index cd1c71c903..b7fd9711df 100644 --- a/less/services.less +++ b/less/services.less @@ -19,9 +19,7 @@ justify-content: center; padding: 20px 20px; } - .active-tab-selected{ - display: flex; - } + } } @@ -38,6 +36,9 @@ line-height: 1.5rem; } } +.active-tab-selected{ + display: flex; +} .services_jumbotron{ position: relative; bottom: 1rem; diff --git a/services.html b/services.html index df44e36722..2298ea161e 100644 --- a/services.html +++ b/services.html @@ -42,8 +42,8 @@

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.

@@ -108,5 +108,5 @@
Copyright © 2018 Smith and Jones
- + \ No newline at end of file From 92f39021119488d79b3a2c28a669d53af698a995 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Wed, 9 Jan 2019 17:05:09 -0500 Subject: [PATCH 31/39] changed some stuff back --- js/contact.js | 122 ++++++++++++++++++++++++++----------------------- js/services.js | 110 ++++++++++++++++++++------------------------ services.html | 2 +- 3 files changed, 116 insertions(+), 118 deletions(-) diff --git a/js/contact.js b/js/contact.js index 0bc4c53ab5..136c96022b 100644 --- a/js/contact.js +++ b/js/contact.js @@ -1,63 +1,73 @@ - -class TabLink { - constructor(element) { - this.element = element; +// class TabLink { +// constructor(tabElement){ +// // assign this.tabElement to the tabElement DOM reference +// this.tabElement = tabElement; - // 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(`.card[data-tab="${this.data}"]`); - // Using the Item element, create a new instance of the TabItem class - this.tabItem = new TabItem(this.item); +// // Get the `data-tab` value from this.tabElement and store it here +// this.tabData = this.tabElement.dataset.tab; +// /* +// // We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task: +// // Check to see if this.tabData is equal to 'all' +// if(this.tabData === 'all'){ +// // If `all` is true, select all cards regardless of their data attribute values +// this.cards = document.querySelectorAll(`.card`); +// } else { +// // else if `all` is false, only select the cards with matching this.tabData values +// this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); +// } + +// // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. +// this.cards = Array.from(this.cards).map( card => new TabCard(card)); +// */ +// this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); +// // Add a click event that invokes this.selectTab +// this.tabCard = Array.from(this.cards).map( cards => new TabCard(cards)); +// this.tabElement.addEventListener('click', () => {this.selectTab()}); - 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('.tab'); +// selectTab(){ +// // Select all elements with the .tab class on them +// const tabs = document.querySelectorAll(".tab"); + +// // Iterate through the NodeList removing the .active-tab class from each node +// tabs.forEach( tab => { +// tab.classList.remove("active-tab"); +// }) - // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links - links.forEach( link => { - link.classList.remove('active-tab') - }); +// // // Select all of the elements with the .card class on them +// // const cards = document.querySelectorAll('.card'); + +// // // Iterate through the NodeList setting the display style each one to 'none' +// // cards.forEach( card => card.style.display = 'none'); - // Add a class named "tabs-link-selected" to this link - this.element.classList.add('active-tab'); +// // Add a class of ".active-tab" to this.tabElement +// this.tabElement.classList.add("active-tab"); + +// // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. +// this.tabCard.select(); +// } +// } + +// class TabCard { +// constructor(cardElement){ +// // Assign this.cardElement to the passed in cardElement. +// this.cardElement = cardElement; +// } +// selectCard(){ +// // Update the style of this.cardElement to display = "flex" +// // Select all ".tabs-item" elements from the DOM +// const items = document.querySelectorAll('.card_info'); +// // Remove the class "tabs-item-selected" from each element +// items.forEach( item => { +// item.classList.remove('active-tab-selected'); +// }) +// // Add a class named "tabs-item-selected" to this element +// this.cardElement.classList.add('active-tab-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('.card'); - // Remove the class "tabs-item-selected" from each element - items.forEach( item => { - item.classList.remove('active-tab-selected'); - }) - // Add a class named "tabs-item-selected" to this element - this.element.classList.add('active-tab-selected'); - } - } - - /* START HERE: - - - Select all classes named ".tabs-link" and assign that value to the links variable - - - With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList - - - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter - - */ - let tabs = document.querySelectorAll('.tab').forEach( tab => new TabLink(tab)); \ No newline at end of file + +// let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); +// // \ No newline at end of file diff --git a/js/services.js b/js/services.js index f2ded9489a..ffdc5a3ea6 100644 --- a/js/services.js +++ b/js/services.js @@ -1,74 +1,62 @@ class TabLink { - constructor(tabElement){ - // assign this.tabElement to the tabElement DOM reference - this.tabElement = tabElement; - - // Get the `data-tab` value from this.tabElement and store it here - this.tabData = this.tabElement.dataset.tab; - /* - // We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task: - // Check to see if this.tabData is equal to 'all' - if(this.tabData === 'all'){ - // If `all` is true, select all cards regardless of their data attribute values - this.cards = document.querySelectorAll(`.card`); - } else { - // else if `all` is false, only select the cards with matching this.tabData values - this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); - } - - // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. - this.cards = Array.from(this.cards).map( card => new TabCard(card)); - */ - this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); - // Add a click event that invokes this.selectTab - this.tabCard = Array.from(this.cards).map( cards => new TabCard(cards)); - this.tabElement.addEventListener('click', () => {this.selectTab()}); - - } + 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(`.card[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(); + }); + }; - selectTab(){ - // Select all elements with the .tab class on them - const tabs = document.querySelectorAll(".tab"); - - // Iterate through the NodeList removing the .active-tab class from each node - tabs.forEach( tab => { - tab.classList.remove("active-tab"); - }) + select() { + // Get all of the elements with the tabs-link class + const links = document.querySelectorAll('.tab'); - // // Select all of the elements with the .card class on them - // const cards = document.querySelectorAll('.card'); - - // // Iterate through the NodeList setting the display style each one to 'none' - // cards.forEach( card => card.style.display = 'none'); + // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links + links.forEach( link => { + link.classList.remove('active-tab') + }); - // Add a class of ".active-tab" to this.tabElement - this.tabElement.classList.add("active-tab"); - - // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. - this.tabCard.select(); + // Add a class named "tabs-link-selected" to this link + this.element.classList.add('active-tab'); + +// Call the select method on the item associated with this link +this.tabItem.select(); } } -class TabCard { - constructor(cardElement){ - // Assign this.cardElement to the passed in cardElement. - this.cardElement = cardElement; +class TabItem { + constructor(element) { + this.element = element; } - selectCard(){ - // Update the style of this.cardElement to display = "flex" - // Select all ".tabs-item" elements from the DOM - const items = document.querySelectorAll('.card_info'); - // Remove the class "tabs-item-selected" from each element - items.forEach( item => { + + select() { + // Select all ".tabs-item" elements from the DOM + const items = document.querySelectorAll('.card'); + // Remove the class "tabs-item-selected" from each element + items.forEach( item => { item.classList.remove('active-tab-selected'); - }) - // Add a class named "tabs-item-selected" to this element - this.cardElement.classList.add('active-tab-selected'); - } + }) + // Add a class named "tabs-item-selected" to this element + this.element.classList.add('active-tab-selected'); } +} - +/* START HERE: + +- Select all classes named ".tabs-link" and assign that value to the links variable + +- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList + +- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter - let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); +*/ - \ No newline at end of file +let tabs = document.querySelectorAll('.tab').forEach( tab => new TabLink(tab)); \ No newline at end of file diff --git a/services.html b/services.html index 2298ea161e..1c730b3a72 100644 --- a/services.html +++ b/services.html @@ -108,5 +108,5 @@
Copyright © 2018 Smith and Jones
- + \ No newline at end of file From 7a2f0720a931e34c80197e3bab6b8abe4247389d Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 10 Jan 2019 00:03:08 -0500 Subject: [PATCH 32/39] css-sprucing --- css/index.css | 248 ++++++++++++++++++++++++--------------------- index.html | 24 +++-- less/global.less | 20 ++-- less/home.less | 21 ++-- less/index.less | 2 +- less/nav.less | 14 ++- less/services.less | 56 ++++++---- services.html | 10 +- 8 files changed, 224 insertions(+), 171 deletions(-) diff --git a/css/index.css b/css/index.css index ae737d8000..f67e84638b 100644 --- a/css/index.css +++ b/css/index.css @@ -150,6 +150,7 @@ table { } .container .header h1 { color: white; + padding-left: 50px; } .container footer { display: flex; @@ -190,6 +191,8 @@ table { Font-Size: 28px; Color: #222222; margin-bottom: 30px; + display: flex; + justify-content: center; } .container h3 { display: flex; @@ -203,10 +206,9 @@ table { color: white; } @media (max-width: 500px) { - .container { - display: flex; - flex-direction: column; - width: 100%; + .container .header h1 { + padding: 15px; + font-size: 25px; } .container .middle-content { justify-content: center; @@ -235,106 +237,6 @@ table { .container .email-heading { justify-content: flex-start; } - nav { - display: flex; - justify-content: space-between; - width: 380px; - } -} -.tabs .topics { - display: flex; - justify-content: space-between; -} -.tabs .topics .tab { - font-weight: bold; - border: 2px solid black; - background-color: white; - padding: 20px 20px; - color: black; -} -.tabs .topics .tab:hover { - cursor: pointer; -} -.tabs .topics .active-tab { - background-color: lightblue; - color: white; - border: 2px solid black; - justify-content: center; - padding: 20px 20px; -} -.card { - display: none; -} -.card .card_info h1 { - font-weight: bold; - font-size: 20px; -} -.card .card_info p { - font-size: 15px; - line-height: 1.5rem; -} -.active-tab-selected { - display: flex; -} -.services_jumbotron { - position: relative; - bottom: 1rem; - width: 100%; -} -.top-content .services_title { - bottom: 10rem; -} -.top-content p { - position: relative; - bottom: 55px; -} -.top-content h1 { - position: relative; - bottom: 18rem; - left: 5rem; - font-size: 5rem; - color: white; -} -.top-content img { - width: 100%; -} -@media (max-width: 500px) { - .container { - width: 90%; - display: flex; - flex-direction: column; - margin: 0 auto; - } - .container .tab { - margin-bottom: 20px; - display: flex; - justify-content: center; - } - .container .card { - display: flex; - flex-direction: column; - } - .top-content img { - width: 100%; - height: 280px; - } - .top-content .services_title { - bottom: 110px; - font-size: 4rem; - } - .tabs { - display: flex; - justify-content: center; - } - .topics { - display: flex; - flex-direction: column; - width: 320px; - } - .topics .active-tab { - display: flex; - justify-content: center; - } } .recent-projects h3 { position: relative; @@ -394,11 +296,6 @@ button:hover { .top-content { height: 270px; } - .top-content h1 { - font-size: 3rem; - bottom: 12rem; - left: 1rem; - } .home-content { flex-direction: column-reverse; justify-content: center; @@ -416,6 +313,7 @@ button:hover { .text-content button { width: 359px; font-size: 18px; + margin-left: 15px; } .recent-projects img { width: 100%; @@ -427,18 +325,25 @@ button:hover { width: 270px; } .recent-projects .left { - margin: 0; - padding-right: 90px; + margin: 0 20px; + padding: 0; + justify-content: center; } .recent-projects .right { - margin: 0; - padding-left: 90px; + margin: 0 20px; + padding: 0; + justify-content: center; + } + .recent-projects .p-words { + display: flex; + flex-wrap: wrap; + justify-content: center; } } nav { display: flex; justify-content: space-between; - width: 880px; + width: 860px; color: #FFFFFF; height: 50px; align-items: center; @@ -466,7 +371,8 @@ nav .menu a { } nav .menu-button { width: 31px; - height: 30px; + height: 20px; + padding-right: 40px; } nav .close { display: none; @@ -480,3 +386,115 @@ nav .menu--open .close { nav nav:hover { cursor: pointer; } +@media (max-width: 500px) { + nav { + display: flex; + justify-content: space-between; + width: 380px; + } + nav .menu-button { + padding: 0; + } +} +.tabs .topics { + display: flex; + justify-content: space-between; +} +.tabs .topics .tab { + font-weight: bold; + border: 2px solid black; + background-color: white; + padding: 20px 20px; + color: black; +} +.tabs .topics .tab:hover { + cursor: pointer; +} +.tabs .topics .active-tab { + background-color: lightblue; + color: white; + border: 2px solid black; + justify-content: center; + padding: 20px 20px; +} +.card { + display: none; +} +.card .card_info h1 { + font-weight: bold; + font-size: 20px; +} +.card .card_info p { + font-size: 15px; + line-height: 1.5rem; +} +.active-tab-selected { + display: flex; +} +.services_jumbotron { + position: relative; + bottom: 2rem; + width: 100%; +} +.top-content .services_title { + bottom: 7rem; +} +.top-content p { + position: relative; + bottom: 50px; +} +.top-content h1 { + font-size: 3rem; + bottom: 12rem; + left: 1rem; + position: relative; + color: white; + line-height: 1; +} +.top-content img { + width: 100%; +} +@media (max-width: 500px) { + .tab { + margin-bottom: 20px; + display: flex; + justify-content: center; + } + .card { + display: flex; + flex-direction: column; + } + .top-content img { + width: 100%; + height: 280px; + } + .top-content h1 { + font-size: 3rem; + bottom: 12rem; + left: 1rem; + position: relative; + color: white; + line-height: 1; + } + .services { + height: 440px; + } + .top-content .services_title { + bottom: 107px; + left: 20px; + font-size: 55px; + } + .tabs { + display: flex; + justify-content: center; + } + .topics { + display: flex; + flex-direction: column; + width: 320px; + } + .topics .active-tab { + display: flex; + justify-content: center; + } +} diff --git a/index.html b/index.html index 435914e0ca..4a8a73d62c 100644 --- a/index.html +++ b/index.html @@ -53,17 +53,23 @@

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 day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

-

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

+

THE VILLAS

+
+

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

+

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

+

THE BLOCKS

-

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

-

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

+
+

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

+

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

+

Interested in starting a project?
@@ -71,7 +77,7 @@

THE BLOCKS

-

We'll never share your email with anyone else

 +

We'll never share your email with anyone else

S&J

- Home + Home Services Contact
- -
+ +
+

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.

-
+
+
From 382f8a6abcdebeabedc6165d119c7833f3ae5022 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 10 Jan 2019 13:23:48 -0500 Subject: [PATCH 33/39] final push.maybe --- css/index.css | 27 +++++++++++++++++++-------- index.html | 7 ++++--- less/global.less | 7 +++++-- less/home.less | 9 +++++++++ less/nav.less | 3 --- less/services.less | 10 ++++++---- services.html | 3 ++- 7 files changed, 45 insertions(+), 21 deletions(-) diff --git a/css/index.css b/css/index.css index f67e84638b..46a7f8a456 100644 --- a/css/index.css +++ b/css/index.css @@ -145,12 +145,13 @@ table { } .container .header { background-color: lightslategray; - height: 60px; + height: 50px; max-width: 880px; } .container .header h1 { color: white; padding-left: 50px; + font-size: 20px; } .container footer { display: flex; @@ -179,6 +180,8 @@ table { Font-Size: 20px; Line-Height: 24px; Color: #FFFFFF; + align-content: center; + padding-right: 20px; } .container footer .email-text { font-Weight: Regular; @@ -238,6 +241,13 @@ table { justify-content: flex-start; } } +.home { + height: 540px; +} +.home_jumbotron { + position: relative; + bottom: 12px; +} .recent-projects h3 { position: relative; bottom: 2rem; @@ -284,6 +294,7 @@ button:hover { margin-left: 480px; padding-right: 70px; line-height: 5rem; + font-family: 'Roboto', sans-serif; } .container .right { display: flex; @@ -291,6 +302,7 @@ button:hover { margin-right: 480px; padding-left: 70px; line-height: 5rem; + font-family: 'Roboto', sans-serif; } @media (max-width: 500px) { .top-content { @@ -374,9 +386,6 @@ nav .menu-button { height: 20px; padding-right: 40px; } -nav .close { - display: none; -} nav .menu--open { display: block; } @@ -438,18 +447,20 @@ nav nav:hover { } .top-content .services_title { bottom: 7rem; + font-size: 60px; + left: 4rem; } .top-content p { position: relative; bottom: 50px; } .top-content h1 { - font-size: 3rem; - bottom: 12rem; - left: 1rem; + font-size: 48px; + bottom: 15rem; + left: 5rem; position: relative; color: white; - line-height: 1; + line-height: 1.15; } .top-content img { width: 100%; diff --git a/index.html b/index.html index 4a8a73d62c..045a2c641f 100644 --- a/index.html +++ b/index.html @@ -15,16 +15,17 @@
-
- +
+

Integrity,
Excellence,
diff --git a/less/global.less b/less/global.less index 11268900e1..65e951f5eb 100644 --- a/less/global.less +++ b/less/global.less @@ -9,11 +9,12 @@ line-height: 24px; .header{ background-color: lightslategray; - height: 60px; + height: 50px; max-width: 880px; h1{ color: white; padding-left: 50px; + font-size: 20px; } } footer{ @@ -41,7 +42,9 @@ font-Weight: Regular; Font-Size: 20px; Line-Height: 24px; - Color: #FFFFFF + Color: #FFFFFF; + align-content: center; + padding-right: 20px; } .email-text{ font-Weight: Regular; diff --git a/less/home.less b/less/home.less index a566f69f82..74808c8c9a 100644 --- a/less/home.less +++ b/less/home.less @@ -1,4 +1,11 @@ +.home{ + height: 540px; +} +.home_jumbotron{ + position: relative; + bottom: 12px; +} .recent-projects{ h3{ position: relative; @@ -47,6 +54,7 @@ button{ margin-left:480px; padding-right:70px; line-height: 5rem; + font-family: 'Roboto', sans-serif; } .container .right{ display: flex; @@ -54,6 +62,7 @@ button{ margin-right: 480px; padding-left: 70px; line-height: 5rem; + font-family: 'Roboto', sans-serif; } @media (max-width: 500px){ diff --git a/less/nav.less b/less/nav.less index 8e26a80174..5ec48eaa33 100644 --- a/less/nav.less +++ b/less/nav.less @@ -31,9 +31,6 @@ nav{ height: 20px; padding-right: 40px; } - .close{ - display:none; - } .menu--open{ display: block; .close{ diff --git a/less/services.less b/less/services.less index 5ba5c0b283..1e7ba1a1ed 100644 --- a/less/services.less +++ b/less/services.less @@ -46,6 +46,8 @@ } .top-content .services_title{ bottom: 7rem; + font-size: 60px; + left: 4rem; } .top-content p{ position: relative; @@ -54,12 +56,12 @@ .top-content{ h1{ - font-size: 3rem; - bottom: 12rem; - left: 1rem; + font-size: 48px; + bottom: 15rem; + left: 5rem; position: relative; color: white; - line-height: 1; + line-height: 1.15; } img{ width:100%; diff --git a/services.html b/services.html index f7af5559f7..f5592e55a5 100644 --- a/services.html +++ b/services.html @@ -15,8 +15,9 @@ From 4302f3a90558cd117853d8ff17516a295e5d5f63 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 10 Jan 2019 13:28:04 -0500 Subject: [PATCH 35/39] href should work now --- services.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services.html b/services.html index f5592e55a5..3cfa437c19 100644 --- a/services.html +++ b/services.html @@ -18,8 +18,8 @@

S&J

- Home - Services + Home + Services Contact
From d9d6c56c6caf424cca6b5475a5ca1014d622385c Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 10 Jan 2019 15:28:37 -0500 Subject: [PATCH 36/39] just trying to get the close to work --- css/index.css | 11 +- css_mistakes.css | 487 ----------------------------------------- index_mistakes.html | 109 --------- js/nav.js | 4 +- less/global.less | 1 - less/home.less | 12 +- less/nav.less | 7 +- services_mistakes.html | 108 --------- 8 files changed, 24 insertions(+), 715 deletions(-) delete mode 100644 css_mistakes.css delete mode 100644 index_mistakes.html delete mode 100644 services_mistakes.html diff --git a/css/index.css b/css/index.css index 46a7f8a456..758a44d541 100644 --- a/css/index.css +++ b/css/index.css @@ -195,7 +195,6 @@ table { Color: #222222; margin-bottom: 30px; display: flex; - justify-content: center; } .container h3 { display: flex; @@ -271,7 +270,7 @@ button:hover { color: white; } .middle-content { - margin: 30px 0; + margin: 30px 0 90px; display: flex; justify-content: space-between; } @@ -286,6 +285,8 @@ button:hover { .middle-content .pic1 { padding-right: 45px; width: 48%; + position: relative; + left: 20px; } .middle-content .pic2 { width: 48%; @@ -294,6 +295,7 @@ button:hover { margin-left: 480px; padding-right: 70px; line-height: 5rem; + letter-spacing: 10px; font-family: 'Roboto', sans-serif; } .container .right { @@ -302,6 +304,7 @@ button:hover { margin-right: 480px; padding-left: 70px; line-height: 5rem; + letter-spacing: 10px; font-family: 'Roboto', sans-serif; } @media (max-width: 500px) { @@ -340,11 +343,13 @@ button:hover { margin: 0 20px; padding: 0; justify-content: center; + letter-spacing: 10px; } .recent-projects .right { margin: 0 20px; padding: 0; justify-content: center; + letter-spacing: 10px; } .recent-projects .p-words { display: flex; @@ -389,7 +394,7 @@ nav .menu-button { nav .menu--open { display: block; } -nav .menu--open .close { +nav .close { display: block; } nav nav:hover { diff --git a/css_mistakes.css b/css_mistakes.css deleted file mode 100644 index 8550016223..0000000000 --- a/css_mistakes.css +++ /dev/null @@ -1,487 +0,0 @@ -/*------------------------------------*\ -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 { - max-width: 880px; - width: 100%; - margin: 0 auto; - Background: #FFFFFF; - Color: #222222; -} -@media (max-width: 500px) { - .container { - display: flex; - flex-direction: column; - width: 100%; - } -} -.container .header { - display: flex; - justify-content: space-between; - Font-Weight: Bold; - Font-Size: 24px; - Color: #FFFFFF; - background-color: lightslategray; - padding: 15px 15px; -} -.container .top-pic { - width: 100%; -} -.container .pic-words { - position: relative; - bottom: 18rem; - left: 5rem; - font-size: 5rem; - color: white; -} -.container .pic-word { - position: relative; - bottom: 9rem; - left: 5rem; - font-size: 5rem; - color: white; -} -.container .top-content { - margin: 30px 0; - display: flex; - justify-content: space-between; -} -.container .top-content .text-content { - display: flex; - flex-direction: column; - font-weight: Regular; - font-Size: 16px; - line-Height: 24px; - padding: 0 0 0 10px; -} -.container .recent-projects h3 { - position: relative; - bottom: 2rem; - background-color: #D8D8D8; - font-size: 2rem; -} -.container .pic { - width: 48%; -} -.container .recent-text { - width: 50%; - margin: 25px 0px 25px 160px; -} -.container .left { - margin-left: 480px; - padding-right: 70px; - line-height: 5rem; -} -.container .right { - display: flex; - justify-content: flex-start; - margin-right: 480px; - padding-left: 70px; - line-height: 5rem; -} -.container .Footer { - display: flex; - flex-direction: row; - Background: #828282; - justify-content: space-evenly; -} -.container .Footer .email-stuff { - display: flex; - flex-direction: column; - Font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF; -} -.container .Footer .email_css { - display: flex; - flex-direction: column; -} -.container .Footer .location { - display: flex; - justify-content: space-around; - flex-direction: column; -} -.container .Footer .footer-heading { - font-Weight: Regular; - Font-Size: 20px; - Line-Height: 24px; - Color: #FFFFFF; -} -.container .Footer .Footer-text { - font-Weight: Regular; - font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF; -} -.container button { - border: 2px solid #222222; - border-radius: 4px; - margin-right: 255px; - padding-bottom: 15px; - padding-top: 15px; -} -.container button:hover { - background-color: black; - color: white; -} -.container h2 { - Font-Weight: Bold; - Font-Size: 28px; - Color: #222222; - margin-bottom: 30px; -} -.container h3 { - display: flex; - justify-content: flex-end; -} -.container h5 { - display: flex; - justify-content: center; - Background: #828282; - padding-top: 20px; - color: white; -} -.container .contact { - bottom: 8rem; -} -@media (max-width: 500px) { - .container .recent-projects { - width: 100%; - display: flex; - flex-direction: column; - } - .container .recent-projects img { - width: 100%; - align-items: center; - } -} -.container .menu { - display: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 2; - text-align: center; - margin-top: 30px; - overflow: auto; -} -.container .menu .menu-button { - display: block; -} -.menu .menu a { - margin: 20% auto; - padding: 20px; - width: 70%; -} -.container .menu--open { - display: block; -} - -.nav_over { - display: flex; - justify-content: space-between; - width: 880px; - } - .nav_over:hover { - cursor: pointer; - } - .nav_over .close { - display: none; - } - .nav_over .nav_over a { - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; - display: block; - transition: 0.3s; - } - .nav_over .nav_over .closenv { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; - } - - .container { - max-width: 880px; - width: 100%; - margin: 0 auto; - Background: #FFFFFF; - Color: #222222; - } - @media (max-width: 500px) { - .container { - display: flex; - flex-direction: column; - width: 100%; - } - } - .container .header { - display: flex; - justify-content: space-between; - Font-Weight: Bold; - Font-Size: 24px; - Color: #FFFFFF; - background-color: lightslategray; - padding: 15px 15px; - } - .container .header .nav_over { - display: flex; - justify-content: space-between; - width: 880px; - } - .container .header .nav_over:hover { - cursor: pointer; - } - .container .header .nav_over .close { - display: none; - } - .container .header .nav_over .nav_over a { - padding: 8px; - text-decoration: none; - font-size: 36px; - color: white; - display: block; - transition: 0.3s; - } - .container .header .nav_over .nav_over .closenv { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; - } - .container .header .nav_over .menu { - display: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 2; - text-align: center; - margin-top: 30px; - overflow: auto; - } - .container .header .nav_over .menu .menu a { - margin: 20% auto; - padding: 20px; - width: 70%; - } - .container .header .nav_over .menu .menu--open { - display: block; - } - .container .header .nav_over .menu-button { - width: 31px; - height: 30px; - padding-top: 30px; - } - .container .top-pic { - width: 100%; - } - .container .tabs .topics { - display: flex; - justify-content: space-between; - } - .container .tabs .topics .tab { - font-weight: bold; - } - .container .tabs .topics .tab:hover { - cursor: pointer; - } - .container .tabs .topics .active-tab { - background-color: black; - color: white; - border: 2px solid green; - display: block; - } - .card { - display: flex; - } - .Footer { - display: flex; - flex-direction: row; - Background: #828282; - justify-content: space-evenly; - } - .Footer .email-stuff { - display: flex; - flex-direction: column; - Font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF; - } - .Footer .email_css { - display: flex; - flex-direction: column; - } - .Footer .location { - display: flex; - justify-content: space-around; - flex-direction: column; - } - .Footer .footer-heading { - font-Weight: Regular; - Font-Size: 20px; - Line-Height: 24px; - Color: #FFFFFF; - } - .Footer .Footer-text { - font-Weight: Regular; - font-Size: 14px; - Line-Height: 26px; - Color: #FFFFFF; - } - - .contact_us { - display: flex; - flex-direction: row; - justify-content: space-between; - } - .contact_us .get_in_touch { - width: 40%; - line-height: 50px; - } - .contact_us .where_we_work { - line-height: 2rem; - margin-bottom: 22px; - } - .contact_us .where_we_work h1 { - font-weight: bold; - } - \ No newline at end of file diff --git a/index_mistakes.html b/index_mistakes.html deleted file mode 100644 index 73d75fff0b..0000000000 --- a/index_mistakes.html +++ /dev/null @@ -1,109 +0,0 @@ - - - - - Home - - - - - - - - -
-
-

S&J

- -
-
-
-
- -

Integrity,
- Excellence,
- Progress.

-
-
-
-
-
-

Smith & Jones Architects

- -

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

- -
- -
- -
- -
-

Futuristic Designs

- -

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

- - - -
-
-
-

Recent Projects

- -

THE VILLAS

-
-

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

-

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

-
- -

OUTSKIRTS

-
-

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

-

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

-
- -

THE BLOCKS

-
-

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

-

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

-
-
-
- -
-

New York

-

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

-
-
-

Florida

-

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

-
-
-

California

-

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

-
-
-
Copyright © 2018 Smith and Jones
-
- - - \ No newline at end of file diff --git a/js/nav.js b/js/nav.js index 6bcbe89cb6..683de99cb4 100644 --- a/js/nav.js +++ b/js/nav.js @@ -8,7 +8,9 @@ const menu = document.querySelector('.menu'); // create a reference to the ".menu-button" class const menuButton = document.querySelector('.menu-button'); +const closeButton = document.querySelector('.close') // console.log(menuButton); // Using your menuButton reference, add a click handler that calls toggleMenu -menuButton.addEventListener('click', toggleMenu); \ No newline at end of file +menuButton.addEventListener('click', toggleMenu); +closeButton.addEventListener('click,', toggleMenu); \ No newline at end of file diff --git a/less/global.less b/less/global.less index 65e951f5eb..4443b00115 100644 --- a/less/global.less +++ b/less/global.less @@ -59,7 +59,6 @@ Color: #222222; margin-bottom: 30px; display: flex; - justify-content: center; } h3{ display: flex; diff --git a/less/home.less b/less/home.less index 74808c8c9a..03b8757ea3 100644 --- a/less/home.less +++ b/less/home.less @@ -31,7 +31,7 @@ button{ } } .middle-content{ - margin: 30px 0; + margin: 30px 0 90px; display: flex; justify-content: space-between; .text-content{ @@ -43,8 +43,10 @@ button{ padding: 0 0 0 10px; } .pic1{ - padding-right: 45px; - width:48%; + padding-right: 45px; + width: 48%; + position: relative; + left: 20px; } .pic2{ width:48%; @@ -54,6 +56,7 @@ button{ margin-left:480px; padding-right:70px; line-height: 5rem; + letter-spacing: 10px; font-family: 'Roboto', sans-serif; } .container .right{ @@ -62,6 +65,7 @@ button{ margin-right: 480px; padding-left: 70px; line-height: 5rem; + letter-spacing: 10px; font-family: 'Roboto', sans-serif; } @@ -102,11 +106,13 @@ button{ margin: 0 20px; padding: 0; justify-content: center; + letter-spacing: 10px; } .right{ margin: 0 20px; padding: 0; justify-content: center; + letter-spacing: 10px; } .p-words{ display: flex; diff --git a/less/nav.less b/less/nav.less index 5ec48eaa33..a4fa592bac 100644 --- a/less/nav.less +++ b/less/nav.less @@ -33,10 +33,11 @@ nav{ } .menu--open{ display: block; - .close{ - display: block; - } + } + .close{ + display: block; + } nav:hover{ cursor: pointer; } diff --git a/services_mistakes.html b/services_mistakes.html deleted file mode 100644 index 557c5a0fc5..0000000000 --- a/services_mistakes.html +++ /dev/null @@ -1,108 +0,0 @@ - - - - - Services - - - - -
-
- -
-
- -

Services

-

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

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

-
-
-
Copyright © 2018 Smith and Jones
-
- - - - - \ No newline at end of file From b2eeb054f69a295c67a746c146124949815f7b1e Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 10 Jan 2019 15:32:45 -0500 Subject: [PATCH 37/39] button works --- js/nav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/nav.js b/js/nav.js index 683de99cb4..d959036dd3 100644 --- a/js/nav.js +++ b/js/nav.js @@ -13,4 +13,4 @@ const closeButton = document.querySelector('.close') // Using your menuButton reference, add a click handler that calls toggleMenu menuButton.addEventListener('click', toggleMenu); -closeButton.addEventListener('click,', toggleMenu); \ No newline at end of file +closeButton.addEventListener('click', toggleMenu); \ No newline at end of file From 529b2f6394499631ff24e73470c2b189df7565bd Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 10 Jan 2019 18:51:11 -0500 Subject: [PATCH 38/39] final push for project --- contact.html | 99 ++++++++++++++++++++++++++--------------------- css/index.css | 56 +++++++++++++++++++++++++++ less/contact.less | 38 ++++++++++++++++++ less/global.less | 3 ++ less/home.less | 1 + less/index.less | 3 +- 6 files changed, 154 insertions(+), 46 deletions(-) diff --git a/contact.html b/contact.html index 60e2fbd64e..31330c3060 100644 --- a/contact.html +++ b/contact.html @@ -9,27 +9,37 @@ -
-
-

S&J

- -
+ +
+
+ +
-

Contact

+

Contact Us

+

Get In Touch

- Enter Email + Enter address - We'll never share your email with anyone else. -
+

We'll never share your email with anyone else.

+
+
How many buildings do you need planned? -
+ I am a small business owner
I am a residential owner
I am a corporation
- +
+

Where We Work

@@ -67,36 +77,35 @@

California

-
- -
-

New York

-

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

-
-
-

Florida

-

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

-
-
-

California

-

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

-
-
+
+ Interested in starting a project?
+ Let's talk: + + We'll never share your email with anyone else +
+ + +
+
+ + +
+
+ + +
+
Copyright © 2018 Smith and Jones
diff --git a/css/index.css b/css/index.css index 758a44d541..3ad9258e93 100644 --- a/css/index.css +++ b/css/index.css @@ -195,10 +195,12 @@ table { Color: #222222; margin-bottom: 30px; display: flex; + font-family: 'Roboto', sans-serif; } .container h3 { display: flex; justify-content: flex-end; + font-family: 'Roboto', sans-serif; } .container h5 { display: flex; @@ -206,6 +208,7 @@ table { Background: #828282; padding-top: 20px; color: white; + font-family: 'Roboto', sans-serif; } @media (max-width: 500px) { .container .header h1 { @@ -257,6 +260,7 @@ table { width: 50%; margin: 25px 0px 25px 160px; text-align: center; + font-family: 'Roboto', sans-serif; } button { border: 2px solid #222222; @@ -514,3 +518,55 @@ nav nav:hover { justify-content: center; } } +.contact_us { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.contact_us .get_in_touch { + width: 40%; + line-height: 50px; +} +.contact_us .get_in_touch h2 { + margin-bottom: 0px; +} +.contact_us .get_in_touch .enter_email span { + position: relative; + bottom: 13px; +} +.contact_us .get_in_touch .enter_email p { + font-size: 12px; + position: relative; + bottom: 77px; + color: lightgray; +} +.contact_us .get_in_touch .building_plan { + display: flex; + flex-direction: column; + position: relative; + bottom: 5rem; +} +.contact_us .get_in_touch .project-needs { + position: relative; + bottom: 4rem; +} +.contact_us .where_we_work { + line-height: 2rem; + margin-bottom: 22px; +} +.contact_us .where_we_work h1 { + font-weight: bold; +} +.contact { + font-size: 48px; + bottom: 6rem; + left: 5rem; + position: relative; + color: white; + line-height: 1.15; + font-weight: bold; +} +.email_css { + bottom: 45px; + position: relative; +} diff --git a/less/contact.less b/less/contact.less index c859d5d8bf..037a2fbf6c 100644 --- a/less/contact.less +++ b/less/contact.less @@ -5,6 +5,31 @@ .get_in_touch{ width: 40%; line-height: 50px; + h2{ + margin-bottom: 0px; + } + .enter_email{ + span{ + position: relative; + bottom: 13px; + } + p{ + font-size: 12px; + position: relative; + bottom: 77px; + color: lightgray; + } + } + .building_plan{ + display: flex; + flex-direction: column; + position: relative; + bottom: 5rem; + } + .project-needs{ + position: relative; + bottom: 4rem; + } } .where_we_work{ line-height: 2rem; @@ -13,4 +38,17 @@ font-weight: bold; } } +} +.contact{ + font-size: 48px; + bottom: 6rem; + left: 5rem; + position: relative; + color: white; + line-height: 1.15; + font-weight: bold; +} +.email_css{ + bottom: 45px; + position: relative; } \ No newline at end of file diff --git a/less/global.less b/less/global.less index 4443b00115..91f8d1d789 100644 --- a/less/global.less +++ b/less/global.less @@ -59,10 +59,12 @@ Color: #222222; margin-bottom: 30px; display: flex; + font-family: 'Roboto', sans-serif; } h3{ display: flex; justify-content: flex-end; + font-family: 'Roboto', sans-serif; } h5{ display: flex; @@ -70,6 +72,7 @@ Background: #828282; padding-top: 20px; color: white; + font-family: 'Roboto', sans-serif; } } diff --git a/less/home.less b/less/home.less index 03b8757ea3..d6b1c04500 100644 --- a/less/home.less +++ b/less/home.less @@ -17,6 +17,7 @@ width: 50%; margin: 25px 0px 25px 160px; text-align: center; + font-family: 'Roboto', sans-serif; } } button{ diff --git a/less/index.less b/less/index.less index f8d2aa274d..da7525c02c 100644 --- a/less/index.less +++ b/less/index.less @@ -3,4 +3,5 @@ @import "home.less"; @import "nav.less"; @import "services.less"; -@import "variables.less"; \ No newline at end of file +@import "variables.less"; +@import "contact.less"; \ No newline at end of file From 9c948b15fc94681b9d9e4dca520cd2996095d152 Mon Sep 17 00:00:00 2001 From: drkfogle Date: Thu, 10 Jan 2019 18:52:53 -0500 Subject: [PATCH 39/39] actual final push --- contact.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/contact.html b/contact.html index 31330c3060..a3f16ad39b 100644 --- a/contact.html +++ b/contact.html @@ -109,5 +109,7 @@
Copyright © 2018 Smith and Jones
+ + \ No newline at end of file