From 897d0accdb4331e1530d38a174c7c8505c360e19 Mon Sep 17 00:00:00 2001 From: kammagik Date: Tue, 22 Jan 2019 19:45:57 -0800 Subject: [PATCH 01/26] if successful css should be converted to less --- css/index.css | 2 +- index.html | 87 ++++++++++++++++++++++++++----------------------- less/index.less | 42 +++++++++++++++++++++++- 3 files changed, 88 insertions(+), 43 deletions(-) diff --git a/css/index.css b/css/index.css index e6b2b589c1..2df4529953 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/* Should be empty until you compile your LESS */ diff --git a/index.html b/index.html index 8a84a17304..bf6f3c9f3a 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Home + @@ -12,56 +13,50 @@ -

You got this! Good luck.

+ + +
+ +

Integrity,
+Excellence,
+Progress.

- - - - +

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 diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..5893e41a87 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,44 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +#main-content { + display: block; +} + +#button { + position:absolute; + transition: .5s ease; + top: 50%; + left: 50%; +} + +#villas { + height: 50px; + width: 100px; + background-color: #555; +} + +.villa-img { + position: relative; +} + +.villas { + height: 110px; + width: 330px; + background-color: #D8D8D8; + text-align: center; + vertical-align: middle; + line-height: 100px; + position: absolute; + bottom: -40px; + right: 9px; + font-size: 30px; +} + +.centered { + margin-top: 60px; + margin-left: auto; + margin-right: auto; + width: 25em +} \ No newline at end of file From f802a23b53a1d3968c2eb432bebaa5550c4cff33 Mon Sep 17 00:00:00 2001 From: kammagik Date: Wed, 23 Jan 2019 19:58:51 -0800 Subject: [PATCH 02/26] recents projects section of styled and centered --- css/index.css | 192 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 32 ++++---- less/index.less | 51 +++++++++---- 3 files changed, 240 insertions(+), 35 deletions(-) diff --git a/css/index.css b/css/index.css index 2df4529953..d9d77bad83 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,191 @@ -/* Should be empty until you compile your LESS */ +/*------------------------------------*\ +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 */ +.main-content { + display: block; +} +.button { + position: absolute; + transition: .5s ease; + top: 50%; + left: 50%; +} +.recentprjt-imgs { + position: relative; +} +.villas { + height: 110px; + width: 330px; + background-color: #D8D8D8; + text-align: center; + vertical-align: middle; + line-height: 100px; + position: absolute; + bottom: -40px; + right: 9px; + font-size: 30px; +} +.centered { + margin-top: 90px; + margin-left: auto; + margin-right: auto; + margin-bottom: 120px; + width: 25em; +} +.outskirts { + height: 110px; + width: 330px; + background-color: #D8D8D8; + text-align: center; + vertical-align: middle; + line-height: 100px; + position: absolute; + bottom: -40px; + left: 0px; + font-size: 30px; +} +.blocks { + height: 110px; + width: 330px; + background-color: #D8D8D8; + text-align: center; + vertical-align: middle; + line-height: 100px; + position: absolute; + bottom: -40px; + right: 9px; + font-size: 30px; +} diff --git a/index.html b/index.html index bf6f3c9f3a..200f5fdaba 100644 --- a/index.html +++ b/index.html @@ -26,38 +26,40 @@

Integrity,
Smith & Jones Architects

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

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

-
+ +
villas image
THE VILLAS
-

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

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

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

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

+the Blocks +
THE BLOCKS
+
+

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

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

- - - - - - - diff --git a/less/index.less b/less/index.less index 5893e41a87..971b4070db 100644 --- a/less/index.less +++ b/less/index.less @@ -58,43 +58,62 @@ table{ } /* Your Code Goes Here */ -#main-content { + +.main-content { display: block; } - -#button { - position:absolute; +.button { + position: absolute; transition: .5s ease; top: 50%; left: 50%; } -#villas { - height: 50px; - width: 100px; - background-color: #555; -} - -.villa-img { +.recentprjt-imgs { position: relative; } - .villas { height: 110px; width: 330px; background-color: #D8D8D8; text-align: center; vertical-align: middle; - line-height: 100px; + line-height: 100px; position: absolute; bottom: -40px; right: 9px; font-size: 30px; } - .centered { - margin-top: 60px; + margin-top: 90px; margin-left: auto; margin-right: auto; - width: 25em + margin-bottom: 120px; + width: 25em; +} + +.outskirts { + height: 110px; + width: 330px; + background-color: #D8D8D8; + text-align: center; + vertical-align: middle; + line-height: 100px; + position: absolute; + bottom: -40px; + left: 0px; + font-size: 30px; +} + +.blocks { + height: 110px; + width: 330px; + background-color: #D8D8D8; + text-align: center; + vertical-align: middle; + line-height: 100px; + position: absolute; + bottom: -40px; + right: 9px; + font-size: 30px; } \ No newline at end of file From 59f939332337d7febe7bca315b66788028ea57dd Mon Sep 17 00:00:00 2001 From: kammagik Date: Wed, 23 Jan 2019 23:31:44 -0800 Subject: [PATCH 03/26] if successful current desktop design will be implemented to fit screen when zooming in and out --- css/index.css | 19 +++++++++++-------- index.html | 32 ++++++++++++++++---------------- less/index.less | 24 ++++++++++++++---------- 3 files changed, 41 insertions(+), 34 deletions(-) diff --git a/css/index.css b/css/index.css index d9d77bad83..d76b72afed 100644 --- a/css/index.css +++ b/css/index.css @@ -134,14 +134,13 @@ table { border-spacing: 0; } /* Your Code Goes Here */ -.main-content { - display: block; -} .button { - position: absolute; - transition: .5s ease; - top: 50%; - left: 50%; + background-color: white; + border: 2px solid black; + padding: 15px 32px; + text-align: center; + font-size: 16px; + color: black; } .recentprjt-imgs { position: relative; @@ -186,6 +185,10 @@ table { line-height: 100px; position: absolute; bottom: -40px; - right: 9px; + right: 40px; font-size: 30px; } +.subheader { + font-weight: bold; + font-size: 28px; +} diff --git a/index.html b/index.html index 200f5fdaba..920a8119a4 100644 --- a/index.html +++ b/index.html @@ -12,32 +12,32 @@ - +
-
+

Integrity,
Excellence,
Progress.

+ - -
-
Smith & Jones Architects
-

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

- +
+
+

Smith & Jones Architects

+

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

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

+

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


- -

Recent Projects

-

- + +
+

Recent Projects

villas image
THE VILLAS
@@ -52,7 +52,6 @@
Futuristic Designs

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
@@ -88,6 +87,7 @@
Futuristic Designs
Copyright © 2018 Smith and Jones --> +
diff --git a/less/index.less b/less/index.less index 971b4070db..b778bd3388 100644 --- a/less/index.less +++ b/less/index.less @@ -58,15 +58,13 @@ table{ } /* Your Code Goes Here */ - -.main-content { - display: block; -} .button { - position: absolute; - transition: .5s ease; - top: 50%; - left: 50%; + background-color: white; + border: 2px solid black; + padding: 15px 32px; + text-align: center; + font-size: 16px; + color: black; } .recentprjt-imgs { @@ -114,6 +112,12 @@ table{ line-height: 100px; position: absolute; bottom: -40px; - right: 9px; + right: 40px; font-size: 30px; -} \ No newline at end of file +} + +.subheader { + font-weight: bold; + font-size: 28px; +} + From 025383225bb07081f9b869aca66a48ad4c03b54f Mon Sep 17 00:00:00 2001 From: kammagik Date: Tue, 29 Jan 2019 20:09:45 -0800 Subject: [PATCH 04/26] once implemented nav bar will have color --- css/index.css | 7 ++++ index.html | 89 ++++++++++++++++++++++++++++++++++++++++++++----- less/index.less | 24 +++++++++++++ 3 files changed, 111 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index d76b72afed..c2159f03b8 100644 --- a/css/index.css +++ b/css/index.css @@ -105,6 +105,9 @@ nav, section { display: block; } +html { + /* font-size: 62.5%; */ +} body { line-height: 1; } @@ -134,6 +137,10 @@ table { border-spacing: 0; } /* Your Code Goes Here */ + +.jumbotron-txt { + +} .button { background-color: white; border: 2px solid black; diff --git a/index.html b/index.html index 920a8119a4..be0d8d6efc 100644 --- a/index.html +++ b/index.html @@ -9,24 +9,95 @@ +
- - - - -

Integrity,
-Excellence,
-Progress.

+ + +
+ +
+

Integrity,
Excellence,
Progress.

+
+
+
-
+

Smith & Jones Architects

-

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

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


diff --git a/less/index.less b/less/index.less index b778bd3388..65be4d5bc2 100644 --- a/less/index.less +++ b/less/index.less @@ -58,6 +58,30 @@ table{ } /* Your Code Goes Here */ + +nav { + width: 100%; + background-color:rgba(126, 138, 172) +} + +.jumbo-container { +position: relative; +} +.jumbo-txt { + position: absolute; + bottom: 8px; + right: 16px; +} +.bottom-right { + position: absolute; + bottom: 8px; + right: 16px; + font-size: 64px; +} +.flex-container { + display: flex; + flex-direction: column; +} .button { background-color: white; border: 2px solid black; From 8510fc47653f5eb4c4eb996e8d0693c37ce1f988 Mon Sep 17 00:00:00 2001 From: kammagik Date: Wed, 30 Jan 2019 19:14:29 -0800 Subject: [PATCH 05/26] jumbotron text needs to be inside jumbotron --- index.html | 12 +++++++++--- less/index.less | 2 +- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index be0d8d6efc..22a55ada41 100644 --- a/index.html +++ b/index.html @@ -58,13 +58,18 @@ top: 15px; right: 35px; } +} +nav { + width: 100%; + background-color: rgba(126, 138, 172) }
-
- + diff --git a/less/index.less b/less/index.less index 65be4d5bc2..5ce84264c5 100644 --- a/less/index.less +++ b/less/index.less @@ -59,7 +59,7 @@ table{ /* Your Code Goes Here */ -nav { +.container-fluid nav { width: 100%; background-color:rgba(126, 138, 172) } From 7b296363e976ceab21c45c9d39f8c9aa0920ed2b Mon Sep 17 00:00:00 2001 From: kammagik Date: Thu, 31 Jan 2019 18:57:10 -0800 Subject: [PATCH 06/26] background image for jumbotron should appear --- css/index.css | 22 ++++++++++++++------ index.html | 54 ++++++++++++++++++++++++++----------------------- less/index.less | 15 ++++---------- 3 files changed, 49 insertions(+), 42 deletions(-) diff --git a/css/index.css b/css/index.css index c2159f03b8..86e6555c75 100644 --- a/css/index.css +++ b/css/index.css @@ -105,9 +105,6 @@ nav, section { display: block; } -html { - /* font-size: 62.5%; */ -} body { line-height: 1; } @@ -137,9 +134,22 @@ table { border-spacing: 0; } /* Your Code Goes Here */ - -.jumbotron-txt { - +.jumbo-img { + background: url("img/home/home-jumbotron"); +} +.container-fluid nav { + width: 100%; + background-color: #7e8aac; +} +.bottom-right { + position: absolute; + bottom: 8px; + right: 16px; + font-size: 64px; +} +.flex-container { + display: flex; + flex-direction: column; } .button { background-color: white; diff --git a/index.html b/index.html index 22a55ada41..90d5eb7d23 100644 --- a/index.html +++ b/index.html @@ -63,13 +63,16 @@ width: 100%; background-color: rgba(126, 138, 172) } +.jumbo-container { + background:url("img/home/home-jumbotron.png") + }
-
- -
+

Integrity,
Excellence,
Progress.

-
- +

Smith & Jones Architects

-

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

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

-

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

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


@@ -116,46 +116,50 @@

Futuristic Designs

Recent Projects

-villas image +villas image
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 Outskirts +the 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

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

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

- +
diff --git a/less/index.less b/less/index.less index 5ce84264c5..0ec6fe3dfe 100644 --- a/less/index.less +++ b/less/index.less @@ -58,19 +58,12 @@ table{ } /* Your Code Goes Here */ - +.jumbo-img { + background: url("img/home/home-jumbotron") +} .container-fluid nav { width: 100%; - background-color:rgba(126, 138, 172) -} - -.jumbo-container { -position: relative; -} -.jumbo-txt { - position: absolute; - bottom: 8px; - right: 16px; + background-color: #7e8aac } .bottom-right { position: absolute; From 4387efc54fdc449bbe7f763baebce9aacc2f836f Mon Sep 17 00:00:00 2001 From: kammagik Date: Thu, 31 Jan 2019 21:14:03 -0800 Subject: [PATCH 07/26] footer should line up --- css/index.css | 70 +++++++++++++++++++++++++++++++++++++++-- index.html | 84 +++++++++---------------------------------------- less/index.less | 72 ++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 153 insertions(+), 73 deletions(-) diff --git a/css/index.css b/css/index.css index 86e6555c75..8023a9bc00 100644 --- a/css/index.css +++ b/css/index.css @@ -134,8 +134,59 @@ table { border-spacing: 0; } /* Your Code Goes Here */ -.jumbo-img { - background: url("img/home/home-jumbotron"); +.overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #000000; + background-color: rgba(126, 138, 172, 0.849); + overflow-x: hidden; + transition: 0.5s; +} +.overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} +.overlay a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; +} +.overlay a:hover, +.overlay a:focus { + color: #222222; +} +.overlay .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} +@media screen and (max-height: 450px) { + .overlay a { + font-size: 20px; + } + .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } +} +nav { + width: 100%; + background-color: #7e8aac; +} +.jumbo-image { + background: url("'../img/home/home-jumbotron.png'"); } .container-fluid nav { width: 100%; @@ -209,3 +260,18 @@ table { font-weight: bold; font-size: 28px; } +footer { + position: relative; + overflow: hidden; + font-size: 20px; + background-color: grey; + width: 100%; +} +.email-box { + float: left; +} +.right-footer { + column-count: 3; + float: right; + width: 40%; +} diff --git a/index.html b/index.html index 90d5eb7d23..5a0f8581c2 100644 --- a/index.html +++ b/index.html @@ -4,68 +4,13 @@ Home - + @@ -93,7 +38,7 @@ -
+

Integrity,
Excellence,
Progress.

@@ -111,6 +56,7 @@

Futuristic Designs

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


+
@@ -137,36 +83,36 @@

Recent Projects

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 s>tarting a project?

+ +

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 +

+

Copyright © 2018 Smith and Jones

diff --git a/less/index.less b/less/index.less index 0ec6fe3dfe..839a6124c9 100644 --- a/less/index.less +++ b/less/index.less @@ -58,9 +58,62 @@ table{ } /* Your Code Goes Here */ -.jumbo-img { - background: url("img/home/home-jumbotron") +.overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgb(0, 0, 0); + background-color:rgba(126, 138, 172, 0.849); + overflow-x: hidden; + transition: 0.5s; } + +.overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} + +.overlay a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; +} + +.overlay a:hover, .overlay a:focus { + color: #222222; +} + +.overlay .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} + +@media screen and (max-height: 450px) { + .overlay a {font-size: 20px} + .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } +} +nav { + width: 100%; + background-color: #7e8aac +} +.jumbo-image { + background:url("'../img/home/home-jumbotron.png'") + } .container-fluid nav { width: 100%; background-color: #7e8aac @@ -137,4 +190,19 @@ table{ font-weight: bold; font-size: 28px; } +footer { + position: relative; + overflow: hidden; + font-size: 20px; + background-color: grey; + width: 100%; +} +.email-box { +float:left; +} +.right-footer { + column-count: 3; + float: right; + width: 40%; +} From 68841c202c41782a174a6c3c91ebaaca327f7194 Mon Sep 17 00:00:00 2001 From: kammagik Date: Mon, 4 Feb 2019 18:40:57 -0800 Subject: [PATCH 08/26] Services Page needs to be completed --- css/index.css | 11 +++++------ index.html | 27 +++++++++++++-------------- less/index.less | 22 +++++++++------------- 3 files changed, 27 insertions(+), 33 deletions(-) diff --git a/css/index.css b/css/index.css index 8023a9bc00..6fcea594c6 100644 --- a/css/index.css +++ b/css/index.css @@ -182,15 +182,14 @@ table { } } nav { - width: 100%; background-color: #7e8aac; + margin: 0; + width: 100%; } .jumbo-image { - background: url("'../img/home/home-jumbotron.png'"); -} -.container-fluid nav { - width: 100%; - background-color: #7e8aac; + background: url("../img/home/home-jumbotron.png"); + background-size: cover; + height: 100%; } .bottom-right { position: absolute; diff --git a/index.html b/index.html index 5a0f8581c2..b066f1a28c 100644 --- a/index.html +++ b/index.html @@ -36,12 +36,11 @@ } - -
-

Integrity,
Excellence,
Progress.

+
+

Integrity,
Excellence,
Progress.

- + @@ -82,37 +81,37 @@

Recent Projects

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

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

+

Florida

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

+

California

-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/less/index.less b/less/index.less index 839a6124c9..c82e717e6e 100644 --- a/less/index.less +++ b/less/index.less @@ -108,16 +108,13 @@ table{ } } nav { - width: 100%; - background-color: #7e8aac + background-color: #7e8aac; + margin: 0; } .jumbo-image { - background:url("'../img/home/home-jumbotron.png'") + background:url("../img/home/home-jumbotron.png"); + background-size: cover; } -.container-fluid nav { - width: 100%; - background-color: #7e8aac -} .bottom-right { position: absolute; bottom: 8px; @@ -194,15 +191,14 @@ footer { position: relative; overflow: hidden; font-size: 20px; + color: white; background-color: grey; width: 100%; } .email-box { float:left; } -.right-footer { - column-count: 3; - float: right; - width: 40%; -} - +footer p { +column-count: 3; +float: right; +} \ No newline at end of file From b637ca8fcb7e69e7aadc55b0bd8cc5e4f7c950d7 Mon Sep 17 00:00:00 2001 From: kammagik Date: Mon, 4 Feb 2019 19:15:53 -0800 Subject: [PATCH 09/26] jumbo txt updated --- index.html | 11 ++++++----- less/index.less | 4 ---- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index b066f1a28c..e0a616cd82 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,15 @@ Home - + + + @@ -19,14 +20,14 @@ +
+ -
-
-

Smith & Jones Architects

-

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


+
+
+

Smith & Jones Architects

+

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

+
-
+blueprint image +
+ +
+

Futuristic Designs

-

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


+

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

+
+bulding image
-
+

Recent Projects

villas image @@ -83,7 +93,7 @@

Recent Projects

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

- + + + +
+
+

Interested in starting a project?
Let’s talk:

+ + +

We'll never share your email with anyone else.

+
+
+
+

+

New York


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

+
+
+

+

Florida


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

+
+
+

+

California


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

+
+
+

Copyright © 2018 Smith and Jones

+
+ +
+ \ No newline at end of file From fb6eaf38c103bde9e600f9440dbbd38bd8765a8b Mon Sep 17 00:00:00 2001 From: kammagik Date: Wed, 13 Feb 2019 18:56:26 -0800 Subject: [PATCH 12/26] mobile design needs to work properly --- index.html | 1 + less/mobile.less | 106 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 less/mobile.less diff --git a/index.html b/index.html index 769cb110ab..80c3a4f151 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + diff --git a/less/mobile.less b/less/mobile.less new file mode 100644 index 0000000000..9faa1713f3 --- /dev/null +++ b/less/mobile.less @@ -0,0 +1,106 @@ +header { + &.close { + height: 100%; + } +} +main { + .text { + font-size: 1rem; + top: -80px; + left: 10px; + } + + .block { + padding: 0; + flex-direction: column; + height: auto; + + .block-text { + width: 100%; + margin: 0 auto; + + .button { + margin: 5% auto; + } + } + + &.top-block { + top: -60px; + } + + &.middle-block { + flex-direction: column; + top: -50px; + } + + img { + width: 100%; + } + } + + .projects { + width: 100%; + top: -40px; + + .overlay { + font-size: 0.1rem; + width: auto; + height: auto; + top: 0px; + right: 0px; + width: 100%; + } + + .project-info { + width: 100%; + margin: 10% 0, 0, 0; + } + + .outskirts { + img { + top: 5px; + left: 0px; + } + .overlay { + top: 5px; + left: 0px; + } + } + + .the-blocks { + img { + top: 20px; + } + .overlay { + top: 20px; + } + } + + img { + width: 100%; + margin: 0 auto; + } + } +} +.container { + footer { + position: relative; + top: 20px; + padding: 0; + height: auto; + + h3 { + font-size: 0.7rem; + top: 0px; + } + + &.address { + top: 0px; + } + + .copyright { + bottom: 0px; +} + } +} +} \ No newline at end of file From 9dea731606c11feaca4327c28356edec04b15627 Mon Sep 17 00:00:00 2001 From: kammagik Date: Wed, 13 Feb 2019 19:00:47 -0800 Subject: [PATCH 13/26] fixed typo in mobile --- less/mobile.less | 1 - 1 file changed, 1 deletion(-) diff --git a/less/mobile.less b/less/mobile.less index 9faa1713f3..52bd4fdd29 100644 --- a/less/mobile.less +++ b/less/mobile.less @@ -102,5 +102,4 @@ main { bottom: 0px; } } -} } \ No newline at end of file From 9f0766cf69873274a661fa7fb5bc045cef690278 Mon Sep 17 00:00:00 2001 From: kammagik Date: Wed, 13 Feb 2019 20:57:06 -0800 Subject: [PATCH 14/26] tabs in services not functional --- css/index.css | 2 + css/services.css | 108 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 2 +- less/index.less | 2 + less/services.less | 72 ++++++++++++++++++++++++++++-- services.html | 73 +++++++++++++++++++----------- 6 files changed, 228 insertions(+), 31 deletions(-) create mode 100644 css/services.css diff --git a/css/index.css b/css/index.css index 59b8ba259c..135c900aa1 100644 --- a/css/index.css +++ b/css/index.css @@ -179,4 +179,6 @@ body footer .address { body footer .copyright { flex-direction: row; align-self: center; + padding-left: 45%; + font-size: 15px; } diff --git a/css/services.css b/css/services.css new file mode 100644 index 0000000000..568f0316f5 --- /dev/null +++ b/css/services.css @@ -0,0 +1,108 @@ +body .container-fluid nav { + background-color: #7e7ea0; +} +body .container-fluid nav .nav-header { + color: white; + font-size: 30px; + padding: 15px; +} +body .container-fluid nav .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #000000; + background-color: rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; +} +body .container-fluid nav .overlay a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; +} +body .container-fluid nav .overlay a:hover { + color: #222222; +} +body .container-fluid nav .overlay a:focus { + color: #222222; +} +@media screen and (max-height: 450px) { + body .container-fluid nav .overlay a { + font-size: 20px; + } +} +body .container-fluid nav .overlay .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} +@media screen and (max-height: 450px) { + body .container-fluid nav .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } +} +body .container-fluid nav .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} +body .container-fluid nav .menu-bar { + font-size: 30px; + cursor: pointer; + float: right; + padding: 0 1rem; + color: white; +} +body .container-fluid nav .services-text { + position: relative; + top: -55px; + left: 65px; + color: white; +} +body .tab-container { + border: 1px solid red; + width: 80%; + height: 400px; + margin: 0 auto; +} +body .tab-container .tab-items { + display: flex; + justify-content: space-between; + height: 200px; + display: none; + border: 1px dotted aqua; +} +body .tab-container .tab-items .tab-item h2 { + margin-bottom: 5%; +} +body .tab-container .tab-items .tab-item p { + line-height: 1.5; + width: 90%; + margin-bottom: 5%; + border: 1px solid violet; +} +body .tab-container .tab-items img { + width: 45%; +} +body .tab-container .tabs { + border: 1px solid black; + display: flex; + margin-bottom: 10%; + justify-content: space-between; +} +body .tab-container .tabs .tab { + height: 30px; + margin-left: 0; + width: 20%; +} diff --git a/index.html b/index.html index 80c3a4f151..03f64cc34d 100644 --- a/index.html +++ b/index.html @@ -123,7 +123,7 @@

California

702 555 0144
-

Copyright © 2018 Smith and Jones

+

Copyright © 2018 Smith and Jones

diff --git a/less/index.less b/less/index.less index d3882d3f6a..1e04832521 100644 --- a/less/index.less +++ b/less/index.less @@ -189,6 +189,8 @@ .copyright { flex-direction: row; align-self: center; + padding-left:45%; + font-size:15px } } } diff --git a/less/services.less b/less/services.less index cabdc7a0f3..25f95d00bd 100644 --- a/less/services.less +++ b/less/services.less @@ -1,14 +1,77 @@ -.container { - border: 1px dashed gold; - .main-img { - width: 100%; +body { + .container-fluid { + nav { + background-color:rgb(126, 126, 160); + .nav-header { + color:white; + font-size:30px; + padding:15px; } + .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgb(0, 0, 0); + background-color:rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; + + a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; + + &:hover{ + color: #222222; + } + &:focus{ + color: #222222; + } + @media screen and (max-height: 450px) { + font-size: 20px; + } + } + .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + + @media screen and (max-height: 450px) { + font-size: 40px; + top: 15px; + right: 35px; + } + } + } + .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; + } + .menu-bar { + font-size:30px; + cursor:pointer; + float:right; + padding:0 1rem; + color:white; +} + .services-text { position: relative; top: -55px; left: 65px; color: white; + } } } @@ -54,4 +117,5 @@ width: 20%; } } +} } \ No newline at end of file diff --git a/services.html b/services.html index 8933b8c780..7338c93c7f 100644 --- a/services.html +++ b/services.html @@ -3,8 +3,10 @@ - Home + Services + + + + - \ No newline at end of file From 85bbae319924123263b8db8e69e85655fcc00886 Mon Sep 17 00:00:00 2001 From: kammagik Date: Thu, 14 Feb 2019 20:17:37 -0800 Subject: [PATCH 15/26] first tab displays all --- css/services.css | 25 ++++-- less/services.less | 26 ++++-- services.html | 211 ++++++++++++++++++++------------------------- 3 files changed, 132 insertions(+), 130 deletions(-) diff --git a/css/services.css b/css/services.css index 568f0316f5..431b151104 100644 --- a/css/services.css +++ b/css/services.css @@ -83,26 +83,39 @@ body .tab-container .tab-items { display: none; border: 1px dotted aqua; } -body .tab-container .tab-items .tab-item h2 { +body .tab-container .tab-items .tabcontent h3 { margin-bottom: 5%; } -body .tab-container .tab-items .tab-item p { +body .tab-container .tab-items .tabcontent p { line-height: 1.5; width: 90%; margin-bottom: 5%; - border: 1px solid violet; } body .tab-container .tab-items img { width: 45%; } -body .tab-container .tabs { - border: 1px solid black; +body .tab-container .tab { display: flex; margin-bottom: 10%; justify-content: space-between; } -body .tab-container .tabs .tab { +body .tab-container .tab .tablinks { height: 30px; margin-left: 0; width: 20%; } +body .tab-container .tab button { + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; +} +body .tab-container .tab button:hover { + color: blue; +} +body .tab-container .tab button:active { + color: blue; +} diff --git a/less/services.less b/less/services.less index 25f95d00bd..144be201c3 100644 --- a/less/services.less +++ b/less/services.less @@ -88,8 +88,8 @@ body { display: none; border: 1px dotted aqua; - .tab-item { - h2 { + .tabcontent { + h3 { margin-bottom: 5%; } p { @@ -97,25 +97,39 @@ body { width: 90%; margin-bottom: 5%; - border: 1px solid violet; } } img { width: 45%; } + } - .tabs { - border: 1px solid black; + .tab { display: flex; margin-bottom: 10%; justify-content: space-between; - .tab { + .tablinks { height: 30px; margin-left: 0; width: 20%; } + button{ + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; + } + button:hover{ + color:blue; + } + button:active{ + color:blue; + } } } } \ No newline at end of file diff --git a/services.html b/services.html index 7338c93c7f..2b5a3b356c 100644 --- a/services.html +++ b/services.html @@ -53,110 +53,101 @@

cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

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

Pre-construction

+

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

+
-
-
- -
-

Pre-construction

-

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

-
- -
- - - -
- -
-

Design Build

-

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

-
- -
- - -
- -
-

Construction

-

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

-
- -
- - -
- -
-

Sustainability

-

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

-
- -
- - -
+
+

Design Build

+

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

+ +
+
+

Construction

+

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

+ +
+
+

Sustainability

+

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

+ +
+

@@ -200,22 +191,6 @@

California


Copyright © 2018 Smith and Jones

- - \ No newline at end of file From d448b32228f26fb510c26f84fa284ac85072ecf0 Mon Sep 17 00:00:00 2001 From: kammagik Date: Sat, 16 Feb 2019 10:21:01 -0800 Subject: [PATCH 16/26] changes --- css/services.css | 4 +++- less/services.less | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/css/services.css b/css/services.css index 431b151104..7955abc2df 100644 --- a/css/services.css +++ b/css/services.css @@ -80,9 +80,11 @@ body .tab-container .tab-items { display: flex; justify-content: space-between; height: 200px; - display: none; border: 1px dotted aqua; } +body .tab-container .tab-items .tabcontent { + display: none; +} body .tab-container .tab-items .tabcontent h3 { margin-bottom: 5%; } diff --git a/less/services.less b/less/services.less index 144be201c3..0d35725b8d 100644 --- a/less/services.less +++ b/less/services.less @@ -85,10 +85,11 @@ body { display: flex; justify-content: space-between; height: 200px; - display: none; + // display: none; border: 1px dotted aqua; .tabcontent { + display:none; h3 { margin-bottom: 5%; } From 91b8fb4a2ae1a4487a91ec139c22152125fab3db Mon Sep 17 00:00:00 2001 From: kammagik Date: Sat, 16 Feb 2019 15:14:34 -0800 Subject: [PATCH 17/26] updated tabs so content is now displayed --- css/services.css | 31 +++++++++++++------------------ less/services.less | 44 ++++++++++++++++++-------------------------- services.html | 38 ++++++++++++++++++++------------------ 3 files changed, 51 insertions(+), 62 deletions(-) diff --git a/css/services.css b/css/services.css index 7955abc2df..a9da54502a 100644 --- a/css/services.css +++ b/css/services.css @@ -76,24 +76,7 @@ body .tab-container { height: 400px; margin: 0 auto; } -body .tab-container .tab-items { - display: flex; - justify-content: space-between; - height: 200px; - border: 1px dotted aqua; -} -body .tab-container .tab-items .tabcontent { - display: none; -} -body .tab-container .tab-items .tabcontent h3 { - margin-bottom: 5%; -} -body .tab-container .tab-items .tabcontent p { - line-height: 1.5; - width: 90%; - margin-bottom: 5%; -} -body .tab-container .tab-items img { +body .tab-container img { width: 45%; } body .tab-container .tab { @@ -121,3 +104,15 @@ body .tab-container .tab button:hover { body .tab-container .tab button:active { color: blue; } +body .tab-container tabcontent #Pre-construction { + display: initial !important; +} +body .tab-container #Design-Build { + display: none; +} +body .tab-container #Construction { + display: none; +} +body .tab-container #Sustainability { + display: none; +} diff --git a/less/services.less b/less/services.less index 0d35725b8d..99474ceb2c 100644 --- a/less/services.less +++ b/less/services.less @@ -79,38 +79,15 @@ body { border: 1px solid red; width: 80%; height: 400px; - margin: 0 auto; - - .tab-items { - display: flex; - justify-content: space-between; - height: 200px; - // display: none; - border: 1px dotted aqua; - - .tabcontent { - display:none; - h3 { - margin-bottom: 5%; - } - p { - line-height: 1.5; - width: 90%; - - margin-bottom: 5%; - } - } + margin: 0 auto; img { width: 45%; } - - } - .tab { display: flex; margin-bottom: 10%; justify-content: space-between; - + .tablinks { height: 30px; margin-left: 0; @@ -131,6 +108,21 @@ body { button:active{ color:blue; } + +} +tabcontent + #Pre-construction { + display: initial !important; + } + #Design-Build{ + display: none; + } + #Construction{ + display:none; + } + #Sustainability{ + display: none; + } } + } -} \ No newline at end of file diff --git a/services.html b/services.html index 2b5a3b356c..c98324324c 100644 --- a/services.html +++ b/services.html @@ -54,10 +54,10 @@

state of the art customer service.

- - - - + + + +

Pre-construction

@@ -77,7 +77,7 @@

Pre-construction

-
+

Design Build

The Villas bring to the table win-win survival strategies to @@ -132,19 +132,21 @@

Sustainability

From 47536c3b4c4c3b36e349a12bdb97c49a26ce0b0b Mon Sep 17 00:00:00 2001 From: kammagik Date: Sat, 16 Feb 2019 17:37:01 -0800 Subject: [PATCH 18/26] footer has been updated --- css/index.css | 47 +++++++++++++++++++---------------- index.html | 66 +++++++++++++++++++++++++------------------------ less/index.less | 65 ++++++++++++++++++++++++++++-------------------- 3 files changed, 98 insertions(+), 80 deletions(-) diff --git a/css/index.css b/css/index.css index 135c900aa1..c07f25e35a 100644 --- a/css/index.css +++ b/css/index.css @@ -80,7 +80,7 @@ body .container { display: flex; justify-content: space-between; padding: 1% 5%; - height: 200px; + height: auto; } body .container h2 { margin: 5% 2%; @@ -91,7 +91,7 @@ body .container .column { justify-content: center; line-height: 1.7; margin: 0 2%; - width: 50%; + width: auto; } body .container .column p { margin-left: 3%; @@ -99,10 +99,10 @@ body .container .column p { body .container .column .button { background-color: white; border: 2px solid black; - padding: 20px; - margin-bottom: 10px; + padding: 5px; font-size: 16px; color: black; + width: 40%; } body .container.right { top: -180; @@ -157,28 +157,33 @@ body .subheader { font-size: 28px; } body footer { + background: grey; + color: white; +} +body footer h4 { + font-size: 20px; +} +body footer .footer { display: flex; - flex-direction: column; + justify-content: space-around; font-size: 20px; - color: white; - background-color: grey; - width: 100%; + text-align: left; + padding: 50px 0; } -body footer p { - column-count: 4; +body footer .footer .city input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; } -body footer .email-box { - padding-left: 5%; - padding-top: 5%; - padding-bottom: 5%; - margin: 5%; +body footer .footer .city p { + font-size: 20px; } -body footer .address { - column-count: 3; +body footer .footer .city h4 { + font-size: 20px; + margin-bottom: 10px; } body footer .copyright { - flex-direction: row; - align-self: center; - padding-left: 45%; - font-size: 15px; + text-align: center; + font-size: small; } diff --git a/index.html b/index.html index 03f64cc34d..3c82b40276 100644 --- a/index.html +++ b/index.html @@ -93,38 +93,40 @@

Recent Projects

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

-
+
+
+
+

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

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

New York

+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202 555 0144

+
+
+

Florida

+

Ocean Drive

+

Suite 201

+

Orlando, FL 22345

+

502 555 0144

+
+
+

California

+

Mountain Street

+

Suite 105

+

San Diego, CA 22345

+

702 555 0144

+
+
+

Copyright © 2018 Smith and Jones

+

diff --git a/less/index.less b/less/index.less index 1e04832521..fcdc5df188 100644 --- a/less/index.less +++ b/less/index.less @@ -85,7 +85,7 @@ display: flex; justify-content: space-between; padding: 1% 5%; - height: 200px; + height: auto; h2 { margin: 5% 2%; @@ -96,7 +96,7 @@ justify-content: center; line-height: 1.7; margin: 0 2%; - width: 50%; + width: auto; p { margin-left:3%; @@ -105,10 +105,11 @@ .button { background-color: white; border: 2px solid black; - padding:20px; - margin-bottom:10px; + padding: 5px; font-size: 16px; color: black; + width: 40%; + // line-height: 5%; } } &.right { @@ -168,31 +169,41 @@ font-size: 28px; } footer { - display:flex; - flex-direction: column; - font-size: 20px; - color: white; - background-color: grey; - width: 100%; - p { - column-count: 4; + background: grey; + color: white; + h4 { + font-size: 20px; + } + .footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + padding: 50px 0; + .city { + input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; + } + + p { + font-size: 20px; + } + + h4 { + font-size: 20px; + margin-bottom: 10px; + } } - .email-box { - padding-left:5%; - padding-top:5%; - padding-bottom:5%; - margin:5%; - } - .address{ - column-count: 3 - } - .copyright { - flex-direction: row; - align-self: center; - padding-left:45%; - font-size:15px + } + + .copyright { + text-align: center; + font-size: small; + } } - } } From 90448e46c16c5e51170ceb0c3ccac13807eed2bb Mon Sep 17 00:00:00 2001 From: kammagik Date: Sat, 16 Feb 2019 17:46:02 -0800 Subject: [PATCH 19/26] minor changes to home --- css/index.css | 6 +++--- index.html | 28 ++++++++++++++-------------- less/index.less | 6 +++--- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/css/index.css b/css/index.css index c07f25e35a..3521dac8f8 100644 --- a/css/index.css +++ b/css/index.css @@ -1,5 +1,5 @@ body .container-fluid nav { - background-color: #7e7ea0; + background-color: #8d9aa9; } body .container-fluid nav .nav-header { color: white; @@ -179,8 +179,8 @@ body footer .footer .city input { body footer .footer .city p { font-size: 20px; } -body footer .footer .city h4 { - font-size: 20px; +body footer .footer .city .cityName { + font-size: 30px; margin-bottom: 10px; } body footer .copyright { diff --git a/index.html b/index.html index 3c82b40276..ca117e8ffa 100644 --- a/index.html +++ b/index.html @@ -95,38 +95,38 @@

Recent Projects

-
+

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

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

New York

+
+
+

New York

123 Lane

Suite 100

Albany, NY 12345

202 555 0144

-
-
-

Florida

+
+
+

Florida

Ocean Drive

Suite 201

Orlando, FL 22345

502 555 0144

-
-
-

California

+
+
+

California

Mountain Street

Suite 105

San Diego, CA 22345

702 555 0144

-
+

Copyright © 2018 Smith and Jones

-
+
diff --git a/less/index.less b/less/index.less index fcdc5df188..870d5532f3 100644 --- a/less/index.less +++ b/less/index.less @@ -3,7 +3,7 @@ body { .container-fluid { nav { - background-color:rgb(126, 126, 160); + background-color:#8d9aa9; .nav-header { color:white; font-size:30px; @@ -192,8 +192,8 @@ font-size: 20px; } - h4 { - font-size: 20px; + .cityName { + font-size: 30px; margin-bottom: 10px; } } From 679463f222139c2e3d70ec83e41f7ca88dc026a0 Mon Sep 17 00:00:00 2001 From: kammagik Date: Sat, 16 Feb 2019 21:16:06 -0800 Subject: [PATCH 20/26] updated tabs, styling incomplete --- css/index.css | 6 +- css/services.css | 87 +++++++++++++----- less/index.less | 8 +- less/services.less | 220 +++++++++++++++++++++++++++------------------ services.html | 87 ++++++++---------- 5 files changed, 243 insertions(+), 165 deletions(-) diff --git a/css/index.css b/css/index.css index 3521dac8f8..db1b10f541 100644 --- a/css/index.css +++ b/css/index.css @@ -3,8 +3,8 @@ body .container-fluid nav { } body .container-fluid nav .nav-header { color: white; - font-size: 30px; - padding: 15px; + font-size: 1.6rem; + padding-left: 4%; } body .container-fluid nav .overlay { height: 100%; @@ -34,7 +34,7 @@ body .container-fluid nav .overlay a:focus { } @media screen and (max-height: 450px) { body .container-fluid nav .overlay a { - font-size: 20px; + font-size: 2.4rem; } } body .container-fluid nav .overlay .closebtn { diff --git a/css/services.css b/css/services.css index a9da54502a..ab4e7f17b0 100644 --- a/css/services.css +++ b/css/services.css @@ -1,10 +1,10 @@ body .container-fluid nav { - background-color: #7e7ea0; + background-color: #8d9aa9; } body .container-fluid nav .nav-header { color: white; - font-size: 30px; - padding: 15px; + font-size: 2rem; + padding-left: 4%; } body .container-fluid nav .overlay { height: 100%; @@ -16,7 +16,7 @@ body .container-fluid nav .overlay { background-color: #000000; background-color: rgba(81, 89, 112, 0.849); overflow-x: hidden; - transition: 0.5s; + transition: 0.5; } body .container-fluid nav .overlay a { padding: 8px; @@ -34,7 +34,7 @@ body .container-fluid nav .overlay a:focus { } @media screen and (max-height: 450px) { body .container-fluid nav .overlay a { - font-size: 20px; + font-size: 3rem; } } body .container-fluid nav .overlay .closebtn { @@ -64,30 +64,41 @@ body .container-fluid nav .menu-bar { padding: 0 1rem; color: white; } -body .container-fluid nav .services-text { - position: relative; - top: -55px; - left: 65px; +body .container-fluid nav .jumbo-image { + background: url("../img/services/services-jumbotron.png"); + background-size: cover; + height: 250px; +} +body .container-fluid nav .jumbo-image h1 { color: white; + padding-top: 30%; + padding-left: 5%; + font-size: 5rem; } body .tab-container { - border: 1px solid red; - width: 80%; - height: 400px; - margin: 0 auto; + margin: 5%; + width: auto; + height: auto; + padding-bottom: 15%; +} +body .tab-container p { + margin-top: 5%; + margin-bottom: 5%; } body .tab-container img { - width: 45%; + width: 30%; } body .tab-container .tab { display: flex; - margin-bottom: 10%; + margin-bottom: 5%; justify-content: space-between; + align-items: flex-end; } body .tab-container .tab .tablinks { - height: 30px; + height: 30%; margin-left: 0; width: 20%; + background-color: white; } body .tab-container .tab button { float: left; @@ -97,14 +108,17 @@ body .tab-container .tab button { padding: 14px 16px; transition: 0.3s; font-size: 17px; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; } body .tab-container .tab button:hover { - color: blue; -} -body .tab-container .tab button:active { - color: blue; + background-color: #4e95b0; + color: white; } -body .tab-container tabcontent #Pre-construction { +body .tab-container .tabcontent #Pre-construction { display: initial !important; } body .tab-container #Design-Build { @@ -116,3 +130,34 @@ body .tab-container #Construction { body .tab-container #Sustainability { display: none; } +body footer { + background: grey; + color: white; +} +body footer h4 { + font-size: 20px; +} +body footer .footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + padding: 50px 0; +} +body footer .footer .city input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; +} +body footer .footer .city p { + font-size: 20px; +} +body footer .footer .city .cityName { + font-size: 30px; + margin-bottom: 10px; +} +body footer .copyright { + text-align: center; + font-size: small; +} diff --git a/less/index.less b/less/index.less index 870d5532f3..adfa7753b2 100644 --- a/less/index.less +++ b/less/index.less @@ -6,8 +6,8 @@ background-color:#8d9aa9; .nav-header { color:white; - font-size:30px; - padding:15px; + font-size:1.6rem; + padding-left:4%; } .overlay { height: 100%; @@ -36,7 +36,7 @@ color: #222222; } @media screen and (max-height: 450px) { - font-size: 20px; + font-size: 2.4rem; } } .closebtn { @@ -205,5 +205,3 @@ } } } - - diff --git a/less/services.less b/less/services.less index 99474ceb2c..6a2c788106 100644 --- a/less/services.less +++ b/less/services.less @@ -1,97 +1,105 @@ body { .container-fluid { - nav { - background-color:rgb(126, 126, 160); - .nav-header { - color:white; - font-size:30px; - padding:15px; + nav { + background-color:#8d9aa9; + .nav-header { + color:white; + font-size:2rem; + padding-left:4%; + } + .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgb(0, 0, 0); + background-color:rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5; + a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; + + &:hover{ + color: #222222; + } + &:focus{ + color: #222222; + } + @media screen and (max-height: 450px) { + font-size: 3rem; + } + } + .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + @media screen and (max-height: 450px) { + font-size: 40px; + top: 15px; + right: 35px; + } + } + } + .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; + } + .menu-bar { + font-size:30px; + cursor:pointer; + float:right; + padding:0 1rem; + color:white; + } + .jumbo-image { + background:url("../img/services/services-jumbotron.png"); + background-size: cover; + height:250px; + h1 { + color:white; + padding-top:30%; + padding-left:5%; + font-size:5rem; + } + } + } } - .overlay { - height: 100%; - width: 0; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background-color: rgb(0, 0, 0); - background-color:rgba(81, 89, 112, 0.849); - overflow-x: hidden; - transition: 0.5s; - - a { - padding: 8px; - text-decoration: none; - font-size: 50px; - color: #ffffff; - display: block; - transition: 0.3s; - - &:hover{ - color: #222222; - } - &:focus{ - color: #222222; - } - @media screen and (max-height: 450px) { - font-size: 20px; - } - } - .closebtn { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; - @media screen and (max-height: 450px) { - font-size: 40px; - top: 15px; - right: 35px; - } - } - } - .overlay-content { - position: relative; - top: 25%; - width: 100%; - text-align: center; - margin-top: 30px; - } - .menu-bar { - font-size:30px; - cursor:pointer; - float:right; - padding:0 1rem; - color:white; -} - - - .services-text { - position: relative; - top: -55px; - left: 65px; - color: white; - } - } -} .tab-container { - border: 1px solid red; - width: 80%; - height: 400px; - margin: 0 auto; + margin:5%; + width: auto; + height: auto; + padding-bottom: 15%; + p{ + margin-top: 5%; + margin-bottom: 5%; + } img { - width: 45%; + width: 30%; + } .tab { display: flex; - margin-bottom: 10%; + margin-bottom: 5%; justify-content: space-between; - + align-items: flex-end; .tablinks { - height: 30px; + height: 30%; margin-left: 0; width: 20%; + background-color: white; } button{ float: left; @@ -101,18 +109,21 @@ body { padding: 14px 16px; transition: 0.3s; font-size: 17px; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; } button:hover{ - color:blue; - } - button:active{ - color:blue; + background-color:#4e95b0; + color:white; } - } -tabcontent +.tabcontent #Pre-construction { display: initial !important; + } #Design-Build{ display: none; @@ -124,5 +135,40 @@ tabcontent display: none; } } - + footer { + background: grey; + color: white; + h4 { + font-size: 20px; + } + .footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + padding: 50px 0; + .city { + input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; + } + + p { + font-size: 20px; + } + + .cityName { + font-size: 30px; + margin-bottom: 10px; + } + } + } + + .copyright { + text-align: center; + font-size: small; + } +} } diff --git a/services.html b/services.html index c98324324c..e10d39f5bb 100644 --- a/services.html +++ b/services.html @@ -6,7 +6,7 @@ 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. @@ -59,6 +52,7 @@

+

Pre-construction

@@ -76,6 +70,7 @@

Pre-construction

solely on the bottom line.

+

Design Build

@@ -151,45 +146,39 @@

Sustainability

- -
-
-

Interested in starting a project?
Let’s talk:

- - -

We'll never share your email with anyone else.

+
+
+

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

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

New York

+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202 555 0144

+
+
+

Florida

+

Ocean Drive

+

Suite 201

+

Orlando, FL 22345

+

502 555 0144

+
+
+

California

+

Mountain Street

+

Suite 105

+

San Diego, CA 22345

+

702 555 0144

+
-
-
-

-

New York


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

-
-
-

-

Florida


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

-
-
-

-

California


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

-
-

Copyright © 2018 Smith and Jones

From 48127299e1b584f600ec2a079fab9cd24300cba0 Mon Sep 17 00:00:00 2001 From: kammagik Date: Sat, 16 Feb 2019 21:47:07 -0800 Subject: [PATCH 21/26] added media import --- css/index.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++ less/index.less | 2 +- less/mobile.less | 2 ++ 3 files changed, 85 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index db1b10f541..e9cda1dce4 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,85 @@ +@media (max-width: 500px) { + header.close { + height: 100%; + } + main .text { + font-size: 1rem; + top: -80px; + left: 10px; + } + main .block { + padding: 0; + flex-direction: column; + height: auto; + } + main .block .block-text { + width: 100%; + margin: 0 auto; + } + main .block .block-text .button { + margin: 5% auto; + } + main .block.top-block { + top: -60px; + } + main .block.middle-block { + flex-direction: column; + top: -50px; + } + main .block img { + width: 100%; + } + main .projects { + width: 100%; + top: -40px; + } + main .projects .overlay { + font-size: 0.1rem; + width: auto; + height: auto; + top: 0px; + right: 0px; + width: 100%; + } + main .projects .project-info { + width: 100%; + margin: 10% 0, 0, 0; + } + main .projects .outskirts img { + top: 5px; + left: 0px; + } + main .projects .outskirts .overlay { + top: 5px; + left: 0px; + } + main .projects .the-blocks img { + top: 20px; + } + main .projects .the-blocks .overlay { + top: 20px; + } + main .projects img { + width: 100%; + margin: 0 auto; + } + .container footer { + position: relative; + top: 20px; + padding: 0; + height: auto; + } + .container footer h3 { + font-size: 0.7rem; + top: 0px; + } + .container footer.address { + top: 0px; + } + .container footer .copyright { + bottom: 0px; + } +} body .container-fluid nav { background-color: #8d9aa9; } diff --git a/less/index.less b/less/index.less index adfa7753b2..d0a4e220eb 100644 --- a/less/index.less +++ b/less/index.less @@ -1,5 +1,5 @@ - +@import "mobile.less"; body { .container-fluid { nav { diff --git a/less/mobile.less b/less/mobile.less index 52bd4fdd29..cebcf3cffd 100644 --- a/less/mobile.less +++ b/less/mobile.less @@ -1,3 +1,4 @@ +@media(max-width:500px){ header { &.close { height: 100%; @@ -102,4 +103,5 @@ main { bottom: 0px; } } +} } \ No newline at end of file From 613cfee2bce86a83940dd9926209993a08280122 Mon Sep 17 00:00:00 2001 From: kammagik Date: Sun, 17 Feb 2019 14:44:43 -0800 Subject: [PATCH 22/26] tab content styling improved --- css/services.css | 11 ++++++++++- less/services.less | 11 ++++++++++- services.html | 23 +++++++++++------------ 3 files changed, 31 insertions(+), 14 deletions(-) diff --git a/css/services.css b/css/services.css index ab4e7f17b0..1f7396067b 100644 --- a/css/services.css +++ b/css/services.css @@ -130,6 +130,16 @@ body .tab-container #Construction { body .tab-container #Sustainability { display: none; } +body .tab-container h3 { + padding-right: 50px; +} +body .tab-container .inner { + display: flex; + margin-bottom: 10%; +} +body .tab-container .inner p { + padding-right: 5%; +} body footer { background: grey; color: white; @@ -142,7 +152,6 @@ body footer .footer { justify-content: space-around; font-size: 20px; text-align: left; - padding: 50px 0; } body footer .footer .city input { padding-top: 10px; diff --git a/less/services.less b/less/services.less index 6a2c788106..572c5d74e0 100644 --- a/less/services.less +++ b/less/services.less @@ -134,6 +134,16 @@ body { #Sustainability{ display: none; } + h3 { + padding-right: 50px; + } + .inner{ + display:flex; + margin-bottom: 10%; + p{ + padding-right: 5%; + } + } } footer { background: grey; @@ -146,7 +156,6 @@ body { justify-content: space-around; font-size: 20px; text-align: left; - padding: 50px 0; .city { input { padding-top: 10px; diff --git a/services.html b/services.html index e10d39f5bb..f553b87d66 100644 --- a/services.html +++ b/services.html @@ -55,14 +55,13 @@

Services

Pre-construction

+

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 @@ -74,14 +73,13 @@

Pre-construction

Design Build

+

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 @@ -90,16 +88,16 @@

Design Build

+

Construction

+

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 @@ -108,16 +106,16 @@

Construction

+

Sustainability

+

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 @@ -126,6 +124,7 @@

Sustainability

+
From 22a91b45f27b13c62a7a81235213351b7432914b Mon Sep 17 00:00:00 2001 From: kammagik Date: Wed, 20 Feb 2019 18:54:17 -0800 Subject: [PATCH 24/26] updated --- css/home.css | 189 +++++++++++++++++++++++++ css/index.css | 11 +- css/services.css | 13 +- less/services.less | 333 +++++++++++++++++++++++---------------------- 4 files changed, 369 insertions(+), 177 deletions(-) create mode 100644 css/home.css diff --git a/css/home.css b/css/home.css new file mode 100644 index 0000000000..fd469af467 --- /dev/null +++ b/css/home.css @@ -0,0 +1,189 @@ +body .container-fluid nav { + background-color: #8d9aa9; +} +body .container-fluid nav .nav-header { + color: white; + font-size: 1.6rem; + padding-left: 4%; +} +body .container-fluid nav .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #000000; + background-color: rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; +} +body .container-fluid nav .overlay a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; +} +body .container-fluid nav .overlay a:hover { + color: #222222; +} +body .container-fluid nav .overlay a:focus { + color: #222222; +} +@media screen and (max-height: 450px) { + body .container-fluid nav .overlay a { + font-size: 2.4rem; + } +} +body .container-fluid nav .overlay .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} +@media screen and (max-height: 450px) { + body .container-fluid nav .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } +} +body .container-fluid nav .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} +body .container-fluid nav .menu-bar { + font-size: 30px; + cursor: pointer; + float: right; + padding: 0 1rem; + color: white; +} +body .container-fluid nav .jumbo-image { + background: url("../img/home/home-jumbotron.png"); + background-size: cover; + height: 800px; +} +body .container-fluid nav .jumbo-image h1 { + color: white; + padding-top: 30%; + padding-left: 5%; + font-size: 5rem; +} +body .container { + position: relative; + display: flex; + justify-content: space-between; + padding: 1% 5%; + height: auto; +} +body .container h2 { + margin: 5% 2%; +} +body .container .column { + display: flex; + flex-direction: column; + justify-content: center; + line-height: 1.7; + margin: 0 2%; + width: auto; +} +body .container .column p { + margin-left: 3%; +} +body .container .column .button { + background-color: white; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; +} +body .container.right { + top: -180; +} +body .container.left { + display: flex; + flex-direction: row-reverse; + top: -180; +} +body .container .img { + width: 40%; + height: 100%; + top: -180; +} +body .recentprjt-imgs { + display: flex; + flex-direction: column; +} +body .block-txt { + margin-top: -70px; + flex-direction: row; + align-self: flex-end; + height: 30%; + width: 30%; + background-color: grey; + text-align: center; + vertical-align: middle; + line-height: 100px; + font-size: 30px; +} +body .outskirts { + margin-top: -70px; + flex-direction: row; + align-self: flex-start; + height: 30%; + width: 30%; + background-color: grey; + text-align: center; + vertical-align: middle; + line-height: 100px; + font-size: 30px; +} +body .centered { + margin-top: 90px; + margin-left: auto; + margin-right: auto; + margin-bottom: 120px; + width: 25em; +} +body .subheader { + font-weight: bold; + font-size: 28px; +} +body footer { + background: grey; + color: white; +} +body footer h4 { + font-size: 20px; +} +body footer .footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + padding: 50px 0; +} +body footer .footer .city input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; +} +body footer .footer .city p { + font-size: 120px; +} +body footer .footer .city .cityName { + font-size: 30px; + margin-bottom: 10px; +} +body footer .copyright { + text-align: center; + font-size: small; +} diff --git a/css/index.css b/css/index.css index b7202c8f70..82abbdf475 100644 --- a/css/index.css +++ b/css/index.css @@ -191,7 +191,7 @@ body footer .copyright { background-color: #8d9aa9; } .container-fluid nav .nav-header { - color: white; + background-color: white; font-size: 2rem; padding-left: 4%; } @@ -211,8 +211,8 @@ body footer .copyright { padding: 8px; text-decoration: none; font-size: 50px; - color: #ffffff - display: block; + color: #ffffff; + display: block; transition: 0.3s; } .container-fluid nav .overlay a:hover { @@ -279,6 +279,7 @@ body footer .copyright { } .tab-container .tab { display: flex; + padding: 0 60px; justify-content: space-between; align-items: flex-end; } @@ -319,10 +320,12 @@ body footer .copyright { display: none; } .tab-container h3 { - padding-right: 50px; + padding-top: 5%; + padding-left: 60px; } .tab-container .inner { display: flex; + padding: 70px; } .tab-container .inner p { padding-right: 5%; diff --git a/css/services.css b/css/services.css index 91384b2cde..1b6b8b89d5 100644 --- a/css/services.css +++ b/css/services.css @@ -22,8 +22,8 @@ padding: 8px; text-decoration: none; font-size: 50px; - color: #ffffff - display: block; + color: #ffffff; + display: block; transition: 0.3s; } .container-fluid nav .overlay a:hover { @@ -84,14 +84,13 @@ } .tab-container p { margin-top: 5%; - margin-bottom: 5%; } .tab-container img { width: 30%; } .tab-container .tab { display: flex; - margin-bottom: 5%; + padding: 0 60px; justify-content: space-between; align-items: flex-end; } @@ -132,11 +131,12 @@ display: none; } .tab-container h3 { - padding-right: 50px; + padding-top: 5%; + padding-left: 60px; } .tab-container .inner { display: flex; - margin-bottom: 10%; + padding: 70px; } .tab-container .inner p { padding-right: 5%; @@ -165,7 +165,6 @@ footer .footer .city p { } footer .footer .city .cityName { font-size: 30px; - margin-bottom: 10px; } footer .copyright { text-align: center; diff --git a/less/services.less b/less/services.less index 295913b29d..d248e4f2f5 100644 --- a/less/services.less +++ b/less/services.less @@ -1,185 +1,186 @@ - +body { .container-fluid { - nav { - background-color:#8d9aa9; - .nav-header { - color:white; - font-size:2rem; - padding-left:4%; - } - .overlay { - height: 100%; - width: 0; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background-color: rgb(0, 0, 0); - background-color:rgba(81, 89, 112, 0.849); - overflow-x: hidden; - transition: 0.5s; - a { - padding: 8px; - text-decoration: none; - font-size: 50px; - color: #ffffff - display: block; - transition: 0.3s; - - &:hover{ - color: #222222; - } - &:focus{ - color: #222222; - } - @media screen and (max-height: 450px) { - font-size: 3rem; - } - } - .closebtn { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; - @media screen and (max-height: 450px) { - font-size: 40px; - top: 15px; - right: 35px; - } - } - } - .overlay-content { - position: relative; - top: 25%; - width: 100%; - text-align: center; - margin-top: 30px; - } - .menu-bar { - font-size:30px; - cursor:pointer; - float:right; - padding:0 1rem; - color:white; - } - .jumbo-image { - background:url("../img/services/services-jumbotron.png"); - background-size: cover; - height:250px; - h1 { - color:white; - padding-top:30%; - padding-left:5%; - font-size:5rem; - } - } - } + nav { + background-color:#8d9aa9; + .nav-header { + color:white; + font-size:1.6rem; + padding-left:4%; } + .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgb(0, 0, 0); + background-color:rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; + + a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; + &:hover{ + color: #222222; + } + &:focus{ + color: #222222; + } + @media screen and (max-height: 450px) { + font-size: 2.4rem; + } + } + .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; - -.tab-container { - width: auto; - height: auto; - .top-p{ - padding: 60px; + @media screen and (max-height: 450px) { + font-size: 40px; + top: 15px; + right: 35px; + } + } } - p{ - margin-top: 5%; - // margin-bottom: 5%; + .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; } - img { - width: 30%; - + .menu-bar { + font-size:30px; + cursor:pointer; + float:right; + padding:0 1rem; + color:white; } - .tab { - display: flex; - // margin-bottom: 5%; - justify-content: space-between; - align-items: flex-end; - .tablinks { - height: 30%; - margin-left: 0; - width: 20%; - background-color: white; - } - button{ - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 14px 16px; - transition: 0.3s; - font-size: 17px; - border: 2px solid black; - padding: 5px; - font-size: 16px; - color: black; - width: 40%; - } - button:hover{ - background-color:#4e95b0; + .jumbo-image { + background:url("../img/home/home-jumbotron.png"); + background-size: cover; + height:800px; + + h1 { color:white; + padding-top:30%; + padding-left:5%; + font-size:5rem; + } + } + } } + + +.tab-container { +width: auto; +height: auto; +.top-p{ + padding: 60px; +} +p{ +margin-top: 5%; +// margin-bottom: 5%; +} +img { + width: 30%; + +} +.tab { +display: flex; +// margin-bottom: 5%; +justify-content: space-between; +align-items: flex-end; +.tablinks { + height: 30%; + margin-left: 0; + width: 20%; + background-color: white; +} +button{ + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; +} +button:hover{ + background-color:#4e95b0; + color:white; +} } .tabcontent - #Pre-construction { - display: initial !important; + #Pre-construction { + display: initial !important; + } + #Design-Build{ + display: none; + } + #Construction{ + display:none; + } + #Sustainability{ + display: none; + } + h3 { + padding-right: 50px; } - #Design-Build{ - display: none; - } - #Construction{ - display:none; - } - #Sustainability{ - display: none; - } - h3 { - padding-right: 50px; - } - .inner{ - display:flex; - // margin-bottom: 10%; - p{ - padding-right: 5%; - } + .inner{ + display:flex; + // margin-bottom: 10%; + p{ + padding-right: 5%; } } - footer { - background: grey; - color: white; - h4 { - font-size: 20px; - } - .footer { - display: flex; - justify-content: space-around; +} +footer { + background: grey; + color: white; + h4 { + font-size: 20px; + } +.footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + .city { + input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; + } + + p { font-size: 20px; - text-align: left; - .city { - input { - padding-top: 10px; - display: block; - padding: 10px 0; - width: 100%; - } - - p { - font-size: 20px; - } - - .cityName { - font-size: 30px; - // margin-bottom: 10px; - } - } } - - .copyright { - text-align: center; - font-size: small; + + .cityName { + font-size: 30px; + // margin-bottom: 10px; + } } } - +.copyright { + text-align: center; + font-size: small; +} +} +} \ No newline at end of file From 8a717133ab8420b81ad311f805407d282b41759d Mon Sep 17 00:00:00 2001 From: kammagik Date: Wed, 20 Feb 2019 19:51:56 -0800 Subject: [PATCH 25/26] update2 --- css/home.css | 189 ------------------------- css/index.css | 76 +++++------ css/mobile.css | 82 ----------- css/services.css | 172 ----------------------- index.html | 3 +- less/home.less | 2 +- less/services.less | 334 ++++++++++++++++++++++----------------------- services.html | 3 +- 8 files changed, 208 insertions(+), 653 deletions(-) delete mode 100644 css/home.css delete mode 100644 css/mobile.css delete mode 100644 css/services.css diff --git a/css/home.css b/css/home.css deleted file mode 100644 index fd469af467..0000000000 --- a/css/home.css +++ /dev/null @@ -1,189 +0,0 @@ -body .container-fluid nav { - background-color: #8d9aa9; -} -body .container-fluid nav .nav-header { - color: white; - font-size: 1.6rem; - padding-left: 4%; -} -body .container-fluid nav .overlay { - height: 100%; - width: 0; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background-color: #000000; - background-color: rgba(81, 89, 112, 0.849); - overflow-x: hidden; - transition: 0.5s; -} -body .container-fluid nav .overlay a { - padding: 8px; - text-decoration: none; - font-size: 50px; - color: #ffffff; - display: block; - transition: 0.3s; -} -body .container-fluid nav .overlay a:hover { - color: #222222; -} -body .container-fluid nav .overlay a:focus { - color: #222222; -} -@media screen and (max-height: 450px) { - body .container-fluid nav .overlay a { - font-size: 2.4rem; - } -} -body .container-fluid nav .overlay .closebtn { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; -} -@media screen and (max-height: 450px) { - body .container-fluid nav .overlay .closebtn { - font-size: 40px; - top: 15px; - right: 35px; - } -} -body .container-fluid nav .overlay-content { - position: relative; - top: 25%; - width: 100%; - text-align: center; - margin-top: 30px; -} -body .container-fluid nav .menu-bar { - font-size: 30px; - cursor: pointer; - float: right; - padding: 0 1rem; - color: white; -} -body .container-fluid nav .jumbo-image { - background: url("../img/home/home-jumbotron.png"); - background-size: cover; - height: 800px; -} -body .container-fluid nav .jumbo-image h1 { - color: white; - padding-top: 30%; - padding-left: 5%; - font-size: 5rem; -} -body .container { - position: relative; - display: flex; - justify-content: space-between; - padding: 1% 5%; - height: auto; -} -body .container h2 { - margin: 5% 2%; -} -body .container .column { - display: flex; - flex-direction: column; - justify-content: center; - line-height: 1.7; - margin: 0 2%; - width: auto; -} -body .container .column p { - margin-left: 3%; -} -body .container .column .button { - background-color: white; - border: 2px solid black; - padding: 5px; - font-size: 16px; - color: black; - width: 40%; -} -body .container.right { - top: -180; -} -body .container.left { - display: flex; - flex-direction: row-reverse; - top: -180; -} -body .container .img { - width: 40%; - height: 100%; - top: -180; -} -body .recentprjt-imgs { - display: flex; - flex-direction: column; -} -body .block-txt { - margin-top: -70px; - flex-direction: row; - align-self: flex-end; - height: 30%; - width: 30%; - background-color: grey; - text-align: center; - vertical-align: middle; - line-height: 100px; - font-size: 30px; -} -body .outskirts { - margin-top: -70px; - flex-direction: row; - align-self: flex-start; - height: 30%; - width: 30%; - background-color: grey; - text-align: center; - vertical-align: middle; - line-height: 100px; - font-size: 30px; -} -body .centered { - margin-top: 90px; - margin-left: auto; - margin-right: auto; - margin-bottom: 120px; - width: 25em; -} -body .subheader { - font-weight: bold; - font-size: 28px; -} -body footer { - background: grey; - color: white; -} -body footer h4 { - font-size: 20px; -} -body footer .footer { - display: flex; - justify-content: space-around; - font-size: 20px; - text-align: left; - padding: 50px 0; -} -body footer .footer .city input { - padding-top: 10px; - display: block; - padding: 10px 0; - width: 100%; -} -body footer .footer .city p { - font-size: 120px; -} -body footer .footer .city .cityName { - font-size: 30px; - margin-bottom: 10px; -} -body footer .copyright { - text-align: center; - font-size: small; -} diff --git a/css/index.css b/css/index.css index 82abbdf475..c825ba220f 100644 --- a/css/index.css +++ b/css/index.css @@ -64,12 +64,12 @@ body .container-fluid nav .menu-bar { padding: 0 1rem; color: white; } -body .container-fluid nav .jumbo-image { +body .container-fluid nav .jumbo-image1 { background: url("../img/home/home-jumbotron.png"); background-size: cover; height: 800px; } -body .container-fluid nav .jumbo-image h1 { +body .container-fluid nav .jumbo-image1 h1 { color: white; padding-top: 30%; padding-left: 5%; @@ -187,15 +187,15 @@ body footer .copyright { text-align: center; font-size: small; } -.container-fluid nav { +body .container-fluid nav { background-color: #8d9aa9; } -.container-fluid nav .nav-header { - background-color: white; +body .container-fluid nav .nav-header { + color: white; font-size: 2rem; padding-left: 4%; } -.container-fluid nav .overlay { +body .container-fluid nav .overlay { height: 100%; width: 0; position: fixed; @@ -207,7 +207,7 @@ body footer .copyright { overflow-x: hidden; transition: 0.5s; } -.container-fluid nav .overlay a { +body .container-fluid nav .overlay a { padding: 8px; text-decoration: none; font-size: 50px; @@ -215,81 +215,81 @@ body footer .copyright { display: block; transition: 0.3s; } -.container-fluid nav .overlay a:hover { +body .container-fluid nav .overlay a:hover { color: #222222; } -.container-fluid nav .overlay a:focus { +body .container-fluid nav .overlay a:focus { color: #222222; } @media screen and (max-height: 450px) { - .container-fluid nav .overlay a { + body .container-fluid nav .overlay a { font-size: 3rem; } } -.container-fluid nav .overlay .closebtn { +body .container-fluid nav .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { - .container-fluid nav .overlay .closebtn { + body .container-fluid nav .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } -.container-fluid nav .overlay-content { +body .container-fluid nav .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } -.container-fluid nav .menu-bar { +body .container-fluid nav .menu-bar { font-size: 30px; cursor: pointer; float: right; padding: 0 1rem; color: white; } -.container-fluid nav .jumbo-image { +body .container-fluid nav .jumbo-image { background: url("../img/services/services-jumbotron.png"); background-size: cover; height: 250px; } -.container-fluid nav .jumbo-image h1 { +body .container-fluid nav .jumbo-image h1 { color: white; padding-top: 30%; padding-left: 5%; font-size: 5rem; } -.tab-container { +body .tab-container { width: auto; height: auto; } -.tab-container .top-p { +body .tab-container .top-p { padding: 60px; } -.tab-container p { +body .tab-container p { margin-top: 5%; } -.tab-container img { +body .tab-container img { width: 30%; } -.tab-container .tab { +body .tab-container .tab { display: flex; padding: 0 60px; justify-content: space-between; align-items: flex-end; } -.tab-container .tab .tablinks { +body .tab-container .tab .tablinks { height: 30%; margin-left: 0; width: 20%; background-color: white; } -.tab-container .tab button { +body .tab-container .tab button { float: left; border: none; outline: none; @@ -303,59 +303,59 @@ body footer .copyright { color: black; width: 40%; } -.tab-container .tab button:hover { +body .tab-container .tab button:hover { background-color: #4e95b0; color: white; } -.tab-container .tabcontent #Pre-construction { +body .tab-container .tabcontent #Pre-construction { display: initial !important; } -.tab-container #Design-Build { +body .tab-container #Design-Build { display: none; } -.tab-container #Construction { +body .tab-container #Construction { display: none; } -.tab-container #Sustainability { +body .tab-container #Sustainability { display: none; } -.tab-container h3 { +body .tab-container h3 { padding-top: 5%; padding-left: 60px; } -.tab-container .inner { +body .tab-container .inner { display: flex; padding: 70px; } -.tab-container .inner p { +body .tab-container .inner p { padding-right: 5%; } -footer { +body footer { background: grey; color: white; } -footer h4 { +body footer h4 { font-size: 20px; } -footer .footer { +body footer .footer { display: flex; justify-content: space-around; font-size: 20px; text-align: left; } -footer .footer .city input { +body footer .footer .city input { padding-top: 10px; display: block; padding: 10px 0; width: 100%; } -footer .footer .city p { +body footer .footer .city p { font-size: 20px; } -footer .footer .city .cityName { +body footer .footer .city .cityName { font-size: 30px; } -footer .copyright { +body footer .copyright { text-align: center; font-size: small; } diff --git a/css/mobile.css b/css/mobile.css deleted file mode 100644 index 743ac581eb..0000000000 --- a/css/mobile.css +++ /dev/null @@ -1,82 +0,0 @@ -@media (max-width: 500px) { - header.close { - height: 100%; - } - main .text { - font-size: 1rem; - top: -80px; - left: 10px; - } - main .block { - padding: 0; - flex-direction: column; - height: auto; - } - main .block .block-text { - width: 100%; - margin: 0 auto; - } - main .block .block-text .button { - margin: 5% auto; - } - main .block.top-block { - top: -60px; - } - main .block.middle-block { - flex-direction: column; - top: -50px; - } - main .block img { - width: 100%; - } - main .projects { - width: 100%; - top: -40px; - } - main .projects .overlay { - font-size: 0.1rem; - width: auto; - height: auto; - top: 0px; - right: 0px; - width: 100%; - } - main .projects .project-info { - width: 100%; - margin: 10% 0, 0, 0; - } - main .projects .outskirts img { - top: 5px; - left: 0px; - } - main .projects .outskirts .overlay { - top: 5px; - left: 0px; - } - main .projects .the-blocks img { - top: 20px; - } - main .projects .the-blocks .overlay { - top: 20px; - } - main .projects img { - width: 100%; - margin: 0 auto; - } - .container footer { - position: relative; - top: 20px; - padding: 0; - height: auto; - } - .container footer h3 { - font-size: 0.7rem; - top: 0px; - } - .container footer.address { - top: 0px; - } - .container footer .copyright { - bottom: 0px; - } -} diff --git a/css/services.css b/css/services.css deleted file mode 100644 index 1b6b8b89d5..0000000000 --- a/css/services.css +++ /dev/null @@ -1,172 +0,0 @@ -.container-fluid nav { - background-color: #8d9aa9; -} -.container-fluid nav .nav-header { - color: white; - font-size: 2rem; - padding-left: 4%; -} -.container-fluid nav .overlay { - height: 100%; - width: 0; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background-color: #000000; - background-color: rgba(81, 89, 112, 0.849); - overflow-x: hidden; - transition: 0.5s; -} -.container-fluid nav .overlay a { - padding: 8px; - text-decoration: none; - font-size: 50px; - color: #ffffff; - display: block; - transition: 0.3s; -} -.container-fluid nav .overlay a:hover { - color: #222222; -} -.container-fluid nav .overlay a:focus { - color: #222222; -} -@media screen and (max-height: 450px) { - .container-fluid nav .overlay a { - font-size: 3rem; - } -} -.container-fluid nav .overlay .closebtn { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; -} -@media screen and (max-height: 450px) { - .container-fluid nav .overlay .closebtn { - font-size: 40px; - top: 15px; - right: 35px; - } -} -.container-fluid nav .overlay-content { - position: relative; - top: 25%; - width: 100%; - text-align: center; - margin-top: 30px; -} -.container-fluid nav .menu-bar { - font-size: 30px; - cursor: pointer; - float: right; - padding: 0 1rem; - color: white; -} -.container-fluid nav .jumbo-image { - background: url("../img/services/services-jumbotron.png"); - background-size: cover; - height: 250px; -} -.container-fluid nav .jumbo-image h1 { - color: white; - padding-top: 30%; - padding-left: 5%; - font-size: 5rem; -} -.tab-container { - width: auto; - height: auto; -} -.tab-container .top-p { - padding: 60px; -} -.tab-container p { - margin-top: 5%; -} -.tab-container img { - width: 30%; -} -.tab-container .tab { - display: flex; - padding: 0 60px; - justify-content: space-between; - align-items: flex-end; -} -.tab-container .tab .tablinks { - height: 30%; - margin-left: 0; - width: 20%; - background-color: white; -} -.tab-container .tab button { - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 14px 16px; - transition: 0.3s; - font-size: 17px; - border: 2px solid black; - padding: 5px; - font-size: 16px; - color: black; - width: 40%; -} -.tab-container .tab button:hover { - background-color: #4e95b0; - color: white; -} -.tab-container .tabcontent #Pre-construction { - display: initial !important; -} -.tab-container #Design-Build { - display: none; -} -.tab-container #Construction { - display: none; -} -.tab-container #Sustainability { - display: none; -} -.tab-container h3 { - padding-top: 5%; - padding-left: 60px; -} -.tab-container .inner { - display: flex; - padding: 70px; -} -.tab-container .inner p { - padding-right: 5%; -} -footer { - background: grey; - color: white; -} -footer h4 { - font-size: 20px; -} -footer .footer { - display: flex; - justify-content: space-around; - font-size: 20px; - text-align: left; -} -footer .footer .city input { - padding-top: 10px; - display: block; - padding: 10px 0; - width: 100%; -} -footer .footer .city p { - font-size: 20px; -} -footer .footer .city .cityName { - font-size: 30px; -} -footer .copyright { - text-align: center; - font-size: small; -} diff --git a/index.html b/index.html index a1b34b1de4..f81a919c76 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ Home - @@ -39,7 +38,7 @@ -
+

Integrity,
Excellence,
Progress.

diff --git a/less/home.less b/less/home.less index 52091c1423..f05a503488 100644 --- a/less/home.less +++ b/less/home.less @@ -64,7 +64,7 @@ padding:0 1rem; color:white; } - .jumbo-image { + .jumbo-image1 { background:url("../img/home/home-jumbotron.png"); background-size: cover; height:800px; diff --git a/less/services.less b/less/services.less index d248e4f2f5..0146c96825 100644 --- a/less/services.less +++ b/less/services.less @@ -1,186 +1,186 @@ -body { +body{ .container-fluid { - nav { - background-color:#8d9aa9; - .nav-header { - color:white; - font-size:1.6rem; - padding-left:4%; + nav { + background-color:#8d9aa9; + .nav-header { + color:white; + font-size:2rem; + padding-left:4%; + } + .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgb(0, 0, 0); + background-color:rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; + a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; + + &:hover{ + color: #222222; + } + &:focus{ + color: #222222; + } + @media screen and (max-height: 450px) { + font-size: 3rem; + } + } + .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + @media screen and (max-height: 450px) { + font-size: 40px; + top: 15px; + right: 35px; + } + } + } + .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; + } + .menu-bar { + font-size:30px; + cursor:pointer; + float:right; + padding:0 1rem; + color:white; + } + .jumbo-image { + background:url("../img/services/services-jumbotron.png"); + background-size: cover; + height:250px; + h1 { + color:white; + padding-top:30%; + padding-left:5%; + font-size:5rem; + } + } + } } - .overlay { - height: 100%; - width: 0; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background-color: rgb(0, 0, 0); - background-color:rgba(81, 89, 112, 0.849); - overflow-x: hidden; - transition: 0.5s; - - a { - padding: 8px; - text-decoration: none; - font-size: 50px; - color: #ffffff; - display: block; - transition: 0.3s; - &:hover{ - color: #222222; - } - &:focus{ - color: #222222; - } - @media screen and (max-height: 450px) { - font-size: 2.4rem; - } - } - .closebtn { - position: absolute; - top: 20px; - right: 45px; - font-size: 60px; - @media screen and (max-height: 450px) { - font-size: 40px; - top: 15px; - right: 35px; - } - } + +.tab-container { + width: auto; + height: auto; + .top-p{ + padding: 60px; } - .overlay-content { - position: relative; - top: 25%; - width: 100%; - text-align: center; - margin-top: 30px; + p{ + margin-top: 5%; + // margin-bottom: 5%; } - .menu-bar { - font-size:30px; - cursor:pointer; - float:right; - padding:0 1rem; - color:white; + img { + width: 30%; + } - .jumbo-image { - background:url("../img/home/home-jumbotron.png"); - background-size: cover; - height:800px; - - h1 { + .tab { + display: flex; + padding: 0 60px; + // margin-bottom: 5%; + justify-content: space-between; + align-items: flex-end; + .tablinks { + height: 30%; + margin-left: 0; + width: 20%; + background-color: white; + } + button{ + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; + } + button:hover{ + background-color:#4e95b0; color:white; - padding-top:30%; - padding-left:5%; - font-size:5rem; - } - } - } } - - -.tab-container { -width: auto; -height: auto; -.top-p{ - padding: 60px; -} -p{ -margin-top: 5%; -// margin-bottom: 5%; -} -img { - width: 30%; - -} -.tab { -display: flex; -// margin-bottom: 5%; -justify-content: space-between; -align-items: flex-end; -.tablinks { - height: 30%; - margin-left: 0; - width: 20%; - background-color: white; -} -button{ - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 14px 16px; - transition: 0.3s; - font-size: 17px; - border: 2px solid black; - padding: 5px; - font-size: 16px; - color: black; - width: 40%; -} -button:hover{ - background-color:#4e95b0; - color:white; -} } .tabcontent - #Pre-construction { - display: initial !important; + #Pre-construction { + display: initial !important; - } - #Design-Build{ - display: none; - } - #Construction{ - display:none; - } - #Sustainability{ - display: none; - } - h3 { - padding-right: 50px; } - .inner{ - display:flex; - // margin-bottom: 10%; - p{ - padding-right: 5%; + #Design-Build{ + display: none; + } + #Construction{ + display:none; + } + #Sustainability{ + display: none; + } + h3 { + padding-top: 5%; + padding-left: 60px; + } + .inner{ + display:flex; + padding: 70px; + p{ + padding-right: 5%; + } } } -} -footer { - background: grey; - color: white; - h4 { - font-size: 20px; - } -.footer { - display: flex; - justify-content: space-around; - font-size: 20px; - text-align: left; - .city { - input { - padding-top: 10px; - display: block; - padding: 10px 0; - width: 100%; - } - - p { + footer { + background:grey; + color: white; + h4 { font-size: 20px; + } + .footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + .city { + input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; + } + + p { + font-size: 20px; + } + + .cityName { + font-size: 30px; + // margin-bottom: 10px; + } + } } - - .cityName { - font-size: 30px; - // margin-bottom: 10px; - } + + .copyright { + text-align: center; + font-size: small; } } - -.copyright { - text-align: center; - font-size: small; -} -} } \ No newline at end of file diff --git a/services.html b/services.html index ebc53afb91..8bf82d2e93 100644 --- a/services.html +++ b/services.html @@ -4,8 +4,7 @@ Services - - + From 558b2f2e03fda5677fa35a17c589fece1f0ee8d1 Mon Sep 17 00:00:00 2001 From: kammagik Date: Thu, 21 Feb 2019 00:42:35 -0800 Subject: [PATCH 26/26] mobile home updated --- css/index.css | 168 +++++++++++++++++++++++------------------------ index.html | 4 +- less/home.less | 55 +++++++++++++++- less/index.less | 3 +- less/mobile.less | 107 ------------------------------ 5 files changed, 140 insertions(+), 197 deletions(-) delete mode 100644 less/mobile.less diff --git a/css/index.css b/css/index.css index c825ba220f..b6921c442e 100644 --- a/css/index.css +++ b/css/index.css @@ -1,6 +1,24 @@ +body { + font-family: 'Roboto'; +} +@media screen and (max-width: 500px) { + body { + width: 630px; + } +} +@media screen and (max-width: 500px) { + body .container-fluid { + width: 630px; + } +} body .container-fluid nav { background-color: #8d9aa9; } +@media screen and (max-width: 500px) { + body .container-fluid nav { + width: 630px; + } +} body .container-fluid nav .nav-header { color: white; font-size: 1.6rem; @@ -68,6 +86,12 @@ body .container-fluid nav .jumbo-image1 { background: url("../img/home/home-jumbotron.png"); background-size: cover; height: 800px; + padding-top: 100px; +} +@media screen and (max-width: 500px) { + body .container-fluid nav .jumbo-image1 { + width: 630px; + } } body .container-fluid nav .jumbo-image1 h1 { color: white; @@ -82,6 +106,13 @@ body .container { padding: 1% 5%; height: auto; } +@media screen and (max-width: 500px) { + body .container { + width: 565px; + flex-direction: column-reverse; + padding-top: 25px; + } +} body .container h2 { margin: 5% 2%; } @@ -104,6 +135,12 @@ body .container .column .button { color: black; width: 40%; } +@media screen and (max-width: 500px) { + body .container .column .button { + width: 339px; + margin-left: 100px; + } +} body .container.right { top: -180; } @@ -112,11 +149,24 @@ body .container.left { flex-direction: row-reverse; top: -180; } +@media screen and (max-width: 500px) { + body .container.left { + width: 565px; + flex-direction: column-reverse; + } +} body .container .img { width: 40%; height: 100%; top: -180; } +@media screen and (max-width: 500px) { + body .container .img { + width: auto; + max-width: 100%; + height: auto; + } +} body .recentprjt-imgs { display: flex; flex-direction: column; @@ -133,6 +183,12 @@ body .block-txt { line-height: 100px; font-size: 30px; } +@media screen and (max-width: 500px) { + body .block-txt { + width: 440px; + margin-right: 100px; + } +} body .outskirts { margin-top: -70px; flex-direction: row; @@ -145,6 +201,12 @@ body .outskirts { line-height: 100px; font-size: 30px; } +@media screen and (max-width: 500px) { + body .outskirts { + width: 440px; + margin-left: 100px; + } +} body .centered { margin-top: 90px; margin-left: auto; @@ -160,6 +222,11 @@ body footer { background: grey; color: white; } +@media screen and (max-width: 500px) { + body footer { + width: 625px; + } +} body footer h4 { font-size: 20px; } @@ -170,16 +237,29 @@ body footer .footer { text-align: left; padding: 50px 0; } -body footer .footer .city input { +@media screen and (max-width: 500px) { + body footer .footer { + flex-direction: column; + padding-left: 15px; + width: 230px; + } +} +@media screen and (max-width: 500px) { + body footer .footer .city1 { + width: 337px; + padding-left: 128px; + } +} +body footer .footer .city1 input { padding-top: 10px; display: block; padding: 10px 0; width: 100%; } -body footer .footer .city p { +body footer .footer .city1 p { font-size: 20px; } -body footer .footer .city .cityName { +body footer .footer .city1 .cityName { font-size: 30px; margin-bottom: 10px; } @@ -359,85 +439,3 @@ body footer .copyright { text-align: center; font-size: small; } -@media (max-width: 500px) { - header.close { - height: 100%; - } - main .text { - font-size: 1rem; - top: -80px; - left: 10px; - } - main .block { - padding: 0; - flex-direction: column; - height: auto; - } - main .block .block-text { - width: 100%; - margin: 0 auto; - } - main .block .block-text .button { - margin: 5% auto; - } - main .block.top-block { - top: -60px; - } - main .block.middle-block { - flex-direction: column; - top: -50px; - } - main .block img { - width: 100%; - } - main .projects { - width: 100%; - top: -40px; - } - main .projects .overlay { - font-size: 0.1rem; - width: auto; - height: auto; - top: 0px; - right: 0px; - width: 100%; - } - main .projects .project-info { - width: 100%; - margin: 10% 0, 0, 0; - } - main .projects .outskirts img { - top: 5px; - left: 0px; - } - main .projects .outskirts .overlay { - top: 5px; - left: 0px; - } - main .projects .the-blocks img { - top: 20px; - } - main .projects .the-blocks .overlay { - top: 20px; - } - main .projects img { - width: 100%; - margin: 0 auto; - } - .container footer { - position: relative; - top: 20px; - padding: 0; - height: auto; - } - .container footer h3 { - font-size: 0.7rem; - top: 0px; - } - .container footer.address { - top: 0px; - } - .container footer .copyright { - bottom: 0px; - } -} diff --git a/index.html b/index.html index f81a919c76..5335b81631 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +