From c418698fe395ee5b99dbc0e3756c427eed8b6d92 Mon Sep 17 00:00:00 2001 From: amberm Date: Mon, 10 Dec 2018 13:05:45 -0700 Subject: [PATCH 01/19] Top part of main page done --- css/index.css | 203 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 43 ++++++++-- less/index.less | 78 ++++++++++++++++++- 3 files changed, 316 insertions(+), 8 deletions(-) diff --git a/css/index.css b/css/index.css index e6b2b589c1..bf2efe199c 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,202 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; +} +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Your Code Goes Here */ +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', Arial, sans-serif; +} +.container { + display: flex; + justify-content: center; + max-width: 800px; + margin: 0 auto; +} +@media (max-width: 600px) { + .container { + max-width: 490px; + width: 98%; + margin: 0 auto; + } +} +.allstuff { + position: relative; + text-align: center; + color: white; + border-bottom: 50px; +} +.leftish { + position: absolute; + text-align: left; + font-size: 6.5rem; + font-weight: bold; + bottom: 58px; + left: -20px; +} +.splitter { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + width: 95%; + margin-bottom: 50px; +} +.splitter h2 { + font-size: 2.5rem; + font-weight: bold; + padding-bottom: 20px; +} +.splitter p { + font-size: 1.7rem; + padding-bottom: 20px; +} +.splitter .part { + width: 44%; + text-align: left; + justify-content: center; +} +.splitter .part .butt { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} diff --git a/index.html b/index.html index 8a84a17304..5e182f592b 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,12 @@ + Home + @@ -12,8 +14,6 @@ -

You got this! Good luck.

- +
+ + +
Integrity,
Excellence,
Progress.
+ +
+ +
- + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..ff4af18747 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,80 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +html { + font-size: 62.5%; +} + +html, body { + font-family: 'Roboto', Arial, sans-serif; +} + +.container { + display: flex; + justify-content: center; + max-width: 800px; + margin: 0 auto; + + @media (max-width: 600px) { + max-width: 490px; + width: 98%; + margin: 0 auto; + } +} + +.allstuff { + position: relative; + text-align: center; + color: white; + border-bottom: 50px; +} + +.leftish { + position: absolute; + text-align: left; + font-size: 6.5rem; + + font-weight: bold; + bottom: 58px; + left: -20px; +} + +.splitter { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + width: 95%; + margin-bottom: 50px; + + h2 { + font-size: 2.5rem; + font-weight: bold; + padding-bottom: 20px; + } + + p { + font-size: 1.7rem; + padding-bottom: 20px; + } + + .part { + width: 44%; + text-align: left; + justify-content: center; + + + .butt { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + } + +} \ No newline at end of file From 08796d3b3ad6362a9eaebad165f54828d3dfd3e9 Mon Sep 17 00:00:00 2001 From: amberm Date: Mon, 10 Dec 2018 14:21:28 -0700 Subject: [PATCH 02/19] layout mostly done, gotta update content and footer --- css/index.css | 36 +++++++++++++++++++++++++++++ index.html | 61 ++++++++++++++++++++++++++++++++++++++----------- less/index.less | 53 ++++++++++++++++++++++++++++++++++++++---- 3 files changed, 133 insertions(+), 17 deletions(-) diff --git a/css/index.css b/css/index.css index bf2efe199c..8e58a64e5e 100644 --- a/css/index.css +++ b/css/index.css @@ -141,6 +141,11 @@ html, body { font-family: 'Roboto', Arial, sans-serif; } +h2 { + font-size: 2.5rem; + font-weight: bold; + text-align: left; +} .container { display: flex; justify-content: center; @@ -154,6 +159,9 @@ body { margin: 0 auto; } } +.aligner1 { + justify-content: left; +} .allstuff { position: relative; text-align: center; @@ -168,6 +176,34 @@ body { bottom: 58px; left: -20px; } +.allstuff2 { + position: relative; + text-align: center; + width: 88%; + color: white; + border-bottom: 50px; +} +.allstuff2 .right1 { + position: absolute; + bottom: -40px; + right: -23px; + letter-spacing: 8px; + font-size: 2.5rem; + background-color: #D8D8D8; + border: 3px; + color: black; + padding: 30px 72px; + text-align: center; + text-decoration: none; + display: inline-block; +} +.projectp { + font-size: 1.8rem; + width: 25%; + padding-top: 80px; + padding-bottom: 20px; + line-height: 150%; +} .splitter { display: flex; justify-content: space-between; diff --git a/index.html b/index.html index 5e182f592b..2040a843a1 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@

Smith & Jones Artchitects

-


+
@@ -56,22 +56,57 @@

Futuristic Designs

+

- + diff --git a/less/index.less b/less/index.less index 7d988fab8e..3bc3f7c53d 100644 --- a/less/index.less +++ b/less/index.less @@ -210,7 +210,17 @@ h2 { h2 { font-size: 2rem; - padding-bottom: 20px; + //padding-bottom: 20px; + } + + input[type=text], select { + width: 90%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; } } @@ -227,4 +237,13 @@ h2 { line-height: 170%; } } +} + +.boot2{ + display: flex; + width:100%; + justify-content: center; + background-color: gray; + color: white; + padding: 8px 50px; } \ No newline at end of file From 63aa0e26440b95e231e5f01cec23504905d99914 Mon Sep 17 00:00:00 2001 From: amberm Date: Mon, 10 Dec 2018 16:46:00 -0700 Subject: [PATCH 05/19] mobile main site half done --- css/index.css | 101 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 6 ++- less/index.less | 94 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 198 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index f0bb636689..6125bbd91c 100644 --- a/css/index.css +++ b/css/index.css @@ -226,6 +226,15 @@ h2 { width: 95%; margin-bottom: 50px; } +@media (max-width: 600px) { + .splitter { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column-reverse; + padding-top: 25px; + } +} .splitter h2 { font-size: 2.5rem; font-weight: bold; @@ -240,6 +249,11 @@ h2 { text-align: left; justify-content: center; } +@media (max-width: 600px) { + .splitter .part { + width: 90%; + } +} .splitter .part .butt { background-color: white; border-color: black; @@ -250,6 +264,52 @@ h2 { display: inline-block; font-size: 16px; } +.splitter1 { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + width: 95%; + margin-bottom: 50px; +} +@media (max-width: 600px) { + .splitter1 { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column; + padding-top: 25px; + } +} +.splitter1 h2 { + font-size: 2.5rem; + font-weight: bold; + padding-bottom: 20px; +} +.splitter1 p { + font-size: 1.7rem; + padding-bottom: 20px; +} +.splitter1 .part { + width: 44%; + text-align: left; + justify-content: center; +} +@media (max-width: 600px) { + .splitter1 .part { + width: 90%; + } +} +.splitter1 .part .butt { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} .boot { display: flex; width: 100%; @@ -258,12 +318,30 @@ h2 { color: white; padding: 50px; } +@media (max-width: 600px) { + .boot { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column; + } +} .boot .piece1 { width: 38%; } +@media (max-width: 600px) { + .boot .piece1 { + width: 90%; + } +} .boot .piece1 h2 { font-size: 2rem; } +@media (max-width: 600px) { + .boot .piece1 h2 { + font-size: 3rem; + } +} .boot .piece1 input[type=text], .boot .piece1 select { width: 90%; @@ -277,14 +355,30 @@ h2 { .boot .piece2 { width: 16%; } +@media (max-width: 600px) { + .boot .piece2 { + width: 90%; + padding: 3%; + } +} .boot .piece2 h2 { padding-bottom: 8px; font-size: 2rem; } +@media (max-width: 600px) { + .boot .piece2 h2 { + font-size: 3rem; + } +} .boot .piece2 h3 { font-size: 1.4rem; line-height: 170%; } +@media (max-width: 600px) { + .boot .piece2 h3 { + font-size: 2rem; + } +} .boot2 { display: flex; width: 100%; @@ -293,3 +387,10 @@ h2 { color: white; padding: 8px 50px; } +@media (max-width: 600px) { + .boot2 { + width: 90%; + font-size: 1.3rem; + text-align: left; + } +} diff --git a/index.html b/index.html index d1b722b40f..06c2174166 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@

Smith & Jones Artchitects


-
+
@@ -148,7 +148,9 @@

202-555-0144

-
Copyright © 2018 Smith and Jones
+
+

Copyright © 2018 Smith and Jones

+
diff --git a/less/index.less b/less/index.less index 3bc3f7c53d..6214f4d83c 100644 --- a/less/index.less +++ b/less/index.less @@ -167,6 +167,63 @@ h2 { width: 95%; margin-bottom: 50px; + @media (max-width: 600px) { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column-reverse; + padding-top: 25px; + } + + h2 { + font-size: 2.5rem; + font-weight: bold; + padding-bottom: 20px; + } + + p { + font-size: 1.7rem; + padding-bottom: 20px; + } + + .part { + width: 44%; + text-align: left; + justify-content: center; + + @media (max-width: 600px) { + width: 90%; + } + + .butt { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + } +} + +.splitter1 { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + width: 95%; + margin-bottom: 50px; + + @media (max-width: 600px) { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column; + padding-top: 25px; + } + h2 { font-size: 2.5rem; font-weight: bold; @@ -183,6 +240,9 @@ h2 { text-align: left; justify-content: center; + @media (max-width: 600px) { + width: 90%; + } .butt { background-color: white; @@ -205,12 +265,26 @@ h2 { color: white; padding: 50px; + @media (max-width: 600px) { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column; + } + .piece1 { width: 38%; + + @media (max-width: 600px){ + width: 90%; + } h2 { font-size: 2rem; - //padding-bottom: 20px; + + @media (max-width: 600px){ + font-size: 3rem; + } } input[type=text], select { @@ -227,14 +301,26 @@ h2 { .piece2 { width: 16%; + @media (max-width: 600px){ + width: 90%; + padding: 3%; + } h2{ padding-bottom: 8px; font-size: 2rem; + + @media (max-width: 600px){ + font-size: 3rem; + } } h3{ font-size: 1.4rem; line-height: 170%; + + @media (max-width: 600px){ + font-size: 2rem; + } } } } @@ -246,4 +332,10 @@ h2 { background-color: gray; color: white; padding: 8px 50px; + + @media (max-width: 600px){ + width: 90%; + font-size: 1.3rem; + text-align: left; + } } \ No newline at end of file From 9f360eaa3ce802e0fa7be2bfba8ab66cc027f468 Mon Sep 17 00:00:00 2001 From: amberm Date: Mon, 10 Dec 2018 18:09:46 -0700 Subject: [PATCH 06/19] now done with mobile version of index --- css/index.css | 104 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 18 ++++++--- less/index.less | 103 ++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 217 insertions(+), 8 deletions(-) diff --git a/css/index.css b/css/index.css index 6125bbd91c..47ea7903fd 100644 --- a/css/index.css +++ b/css/index.css @@ -149,6 +149,7 @@ h2 { .container { display: flex; justify-content: center; + align-content: center; max-width: 800px; margin: 0 auto; } @@ -176,6 +177,13 @@ h2 { bottom: 58px; left: -20px; } +@media (max-width: 600px) { + .leftish { + font-size: 4.8rem; + bottom: 58px; + left: 35px; + } +} .allstuff2 { position: relative; text-align: center; @@ -197,6 +205,12 @@ h2 { text-decoration: none; display: inline-block; } +@media (max-width: 600px) { + .allstuff2 .right1 { + bottom: -30px; + right: unset; + } +} .allstuff2 .left1 { position: absolute; bottom: -40px; @@ -211,6 +225,12 @@ h2 { text-decoration: none; display: inline-block; } +@media (max-width: 600px) { + .allstuff2 .left1 { + bottom: -30px; + left: unset; + } +} .projectp { font-size: 1.8rem; width: 25%; @@ -218,6 +238,11 @@ h2 { padding-bottom: 20px; line-height: 150%; } +@media (max-width: 600px) { + .projectp { + width: 88%; + } +} .splitter { display: flex; justify-content: space-between; @@ -324,6 +349,7 @@ h2 { width: 98%; margin: 0 auto; flex-direction: column; + padding: 40px 30px; } } .boot .piece1 { @@ -358,7 +384,7 @@ h2 { @media (max-width: 600px) { .boot .piece2 { width: 90%; - padding: 3%; + padding-top: 10px; } } .boot .piece2 h2 { @@ -392,5 +418,81 @@ h2 { width: 90%; font-size: 1.3rem; text-align: left; + padding: 5px 30px; + } +} +.img1 { + display: unset; +} +@media (max-width: 600px) { + .img1 { + display: none; + } +} +.img1a { + display: none; +} +@media (max-width: 600px) { + .img1a { + display: unset; + width: 99%; + height: 360px; + } +} +.img2 { + display: unset; +} +@media (max-width: 600px) { + .img2 { + display: none; + } +} +.img2a { + display: none; +} +@media (max-width: 600px) { + .img2a { + display: unset; + width: 99%; + height: 360px; + padding-bottom: 10px; + } +} +.img3 { + display: unset; +} +@media (max-width: 600px) { + .img3 { + display: none; + } +} +.img3a { + display: none; +} +@media (max-width: 600px) { + .img3a { + display: unset; + width: 99%; + height: 360px; + padding-bottom: 10px; + } +} +.img4 { + display: unset; +} +@media (max-width: 600px) { + .img4 { + display: none; + } +} +.img4a { + display: none; +} +@media (max-width: 600px) { + .img4a { + display: unset; + width: 90%; + height: 360px; + padding-bottom: 10px; } } diff --git a/index.html b/index.html index 06c2174166..c8245721ad 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,8 @@
- + +
Integrity,
Excellence,
Progress.
@@ -38,7 +39,8 @@

Smith & Jones Artchitects

- + +
@@ -46,7 +48,8 @@

Smith & Jones Artchitects

- + +
@@ -64,7 +67,8 @@

Recent Projects




- + +
THE VILLAS

@@ -79,7 +83,8 @@

Recent Projects




- + +
OUTSKIRTS

@@ -94,7 +99,8 @@

Recent Projects




- + +
THE BLOCKS

diff --git a/less/index.less b/less/index.less index 6214f4d83c..a92a626492 100644 --- a/less/index.less +++ b/less/index.less @@ -75,6 +75,7 @@ h2 { .container { display: flex; justify-content: center; + align-content: center; max-width: 800px; margin: 0 auto; @@ -103,6 +104,12 @@ h2 { font-weight: bold; bottom: 58px; left: -20px; + + @media (max-width: 600px){ + font-size: 4.8rem; + bottom: 58px; + left: 35px; + } } .allstuff2{ @@ -128,6 +135,10 @@ h2 { text-decoration: none; display: inline-block; + @media (max-width: 600px){ + bottom: -30px; + right: unset; + } } .left1 { @@ -146,6 +157,10 @@ h2 { text-decoration: none; display: inline-block; + @media (max-width: 600px){ + bottom: -30px; + left: unset; + } } } @@ -156,6 +171,10 @@ h2 { padding-top: 80px; padding-bottom: 20px; line-height: 150%; + + @media (max-width: 600px){ + width:88%; + } } @@ -172,6 +191,7 @@ h2 { width: 98%; margin: 0 auto; flex-direction: column-reverse; + padding-top: 25px; } @@ -270,6 +290,7 @@ h2 { width: 98%; margin: 0 auto; flex-direction: column; + padding: 40px 30px; } .piece1 { @@ -303,7 +324,8 @@ h2 { @media (max-width: 600px){ width: 90%; - padding: 3%; + padding-top: 10px; + } h2{ padding-bottom: 8px; @@ -337,5 +359,84 @@ h2 { width: 90%; font-size: 1.3rem; text-align: left; + padding: 5px 30px; + } +} + +.img1 { + display:unset; + + @media (max-width: 600px){ + display:none; + } +} + +.img1a { + display:none; + + @media (max-width: 600px){ + display:unset; + width: 99%; + height: 360px; + } +} + +.img2 { + display:unset; + + @media (max-width: 600px){ + display:none; + } +} + +.img2a { + display:none; + + @media (max-width: 600px){ + display:unset; + //justify-content: center; + width: 99%; + height: 360px; + padding-bottom: 10px; + } +} + +.img3 { + display:unset; + + @media (max-width: 600px){ + display:none; + } +} + +.img3a { + display:none; + + @media (max-width: 600px){ + display:unset; + + width: 99%; + height: 360px; + padding-bottom: 10px; + } +} + +.img4 { + display:unset; + + @media (max-width: 600px){ + display:none; + } +} + +.img4a { + display:none; + + @media (max-width: 600px){ + display:unset; + + width: 90%; + height: 360px; + padding-bottom: 10px; } } \ No newline at end of file From 0cf430f60bcb64d1a3a06574e4611e382c688559 Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 09:49:10 -0700 Subject: [PATCH 07/19] made services page, but inside nav nonfunc --- css/index.css | 25 ++++++++++++++++++ less/index.less | 32 +++++++++++++++++++++++ services.html | 68 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 124 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index 47ea7903fd..d8abaf25c1 100644 --- a/css/index.css +++ b/css/index.css @@ -243,6 +243,13 @@ h2 { width: 88%; } } +.projectp2 { + font-size: 1.8rem; + width: 100%; + padding-top: 50px; + padding-bottom: 20px; + line-height: 150%; +} .splitter { display: flex; justify-content: space-between; @@ -496,3 +503,21 @@ h2 { padding-bottom: 10px; } } +.divider { + display: flex; + justify-content: space-between; + width: 100%; + padding-top: 20px; + padding-bottom: 20px; +} +.divider .divbut { + width: 18%; + border: 2px solid black; + background-color: white; + color: black; + padding: 15px 15px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} diff --git a/less/index.less b/less/index.less index a92a626492..dc58282ef2 100644 --- a/less/index.less +++ b/less/index.less @@ -177,6 +177,18 @@ h2 { } } +.projectp2 { + font-size: 1.8rem; + width: 100%; + padding-top: 50px; + padding-bottom: 20px; + line-height: 150%; + + //@media (max-width: 600px){ + // width:88%; + //} +} + .splitter { display: flex; @@ -439,4 +451,24 @@ h2 { height: 360px; padding-bottom: 10px; } +} + +.divider { + display: flex; + justify-content: space-between; + width: 100%; + padding-top: 20px; + padding-bottom: 20px; + + .divbut { + width: 18%; + border: 2px solid black; + background-color: white; + color: black; + padding: 15px 15px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } } \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..24dec38c57 100644 --- a/services.html +++ b/services.html @@ -11,8 +11,28 @@ +
+ + + +

Services

+ +
+ +
+

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

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

Services

+
+ +
+

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

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+

California

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+
+

Copyright © 2018 Smith and Jones

+
+ From 6abfcf8d42b73cce80217df237982863ce98738d Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 11:41:42 -0700 Subject: [PATCH 08/19] got a bar at the top, gotta make it better though --- css/index.css | 11 +++++++++++ index.html | 12 +++++------- less/index.less | 17 +++++++++++++++++ 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/css/index.css b/css/index.css index d8abaf25c1..7792ab216c 100644 --- a/css/index.css +++ b/css/index.css @@ -160,6 +160,17 @@ h2 { margin: 0 auto; } } +.navbarthingy { + background-color: #D8D8D8; + position: fixed; + top: 0; + height: 50px; + width: 1024px; + color: white; + display: flex; + align-content: center; + z-index: 2; +} .aligner1 { justify-content: left; } diff --git a/index.html b/index.html index c8245721ad..7573748829 100644 --- a/index.html +++ b/index.html @@ -12,15 +12,13 @@ - - +
+

S&J

+
+ +
diff --git a/less/index.less b/less/index.less index dc58282ef2..bba812b233 100644 --- a/less/index.less +++ b/less/index.less @@ -66,6 +66,7 @@ html, body { font-family: 'Roboto', Arial, sans-serif; } + h2 { font-size: 2.5rem; font-weight: bold; @@ -86,6 +87,22 @@ h2 { } } +.navbarthingy { + //overflow: hidden; + background-color: #D8D8D8; + position: fixed; + top: 0; + height: 50px; + width:1024px; + color: white; + display:flex; + + align-content: center; + z-index:2; +} + + + .aligner1 { justify-content: left; } From 8fd4efc5e954abbb7291c5e850e7c7af79681c11 Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 12:05:48 -0700 Subject: [PATCH 09/19] top bar looking good, now to make it function --- css/index.css | 23 ++++++++++++++++++++--- index.html | 10 +++++++--- less/index.less | 29 ++++++++++++++++++++++++----- services.html | 9 +++++++++ 4 files changed, 60 insertions(+), 11 deletions(-) diff --git a/css/index.css b/css/index.css index 7792ab216c..21ed5c9607 100644 --- a/css/index.css +++ b/css/index.css @@ -160,17 +160,34 @@ h2 { margin: 0 auto; } } -.navbarthingy { +.topalign { + display: flex; + justify-content: center; + align-content: center; +} +.topalign .navbarthingy { background-color: #D8D8D8; position: fixed; top: 0; - height: 50px; + height: 40px; width: 1024px; color: white; display: flex; - align-content: center; + justify-content: space-between; + align-content: baseline; + padding-top: 15px; z-index: 2; } +.topalign .navbarthingy .nav1 { + width: 10%; + padding-left: 100px; +} +.topalign .navbarthingy .nav2 { + width: 10%; +} +.topalign .navbarthingy .navie { + display: unset; +} .aligner1 { justify-content: left; } diff --git a/index.html b/index.html index 7573748829..a16b393046 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,13 @@ - -
-

S&J

+
+
+

S&J

+
+ +
+
diff --git a/less/index.less b/less/index.less index bba812b233..09e00f7dec 100644 --- a/less/index.less +++ b/less/index.less @@ -87,20 +87,39 @@ h2 { } } -.navbarthingy { +.topalign { + display:flex; + justify-content: center; + align-content: center; + + .navbarthingy { //overflow: hidden; background-color: #D8D8D8; position: fixed; top: 0; - height: 50px; + height: 40px; width:1024px; color: white; display:flex; - - align-content: center; + justify-content: space-between; + align-content: baseline; + padding-top: 15px; z-index:2; -} + .nav1 { + width: 10%; + padding-left: 100px; + } + + .nav2 { + width:10%; + } + + .navie{ + display: unset; + } + } +} .aligner1 { diff --git a/services.html b/services.html index 24dec38c57..951031f86d 100644 --- a/services.html +++ b/services.html @@ -10,6 +10,15 @@ +
+
+

S&J

+
+ +
+
+
+
From 75c012fc52b03c184a4d0c2357aef9f42f09499c Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 13:34:21 -0700 Subject: [PATCH 10/19] nav bar fully working with popup stuff too :) --- css/index.css | 52 ++++++++++++++++++++++++++++++++++++ index.html | 24 +++++++++++++++-- js/index.js | 13 ++++++++- less/index.less | 71 +++++++++++++++++++++++++++++++++++++++++++++++++ services.html | 24 ++++++++++++++++- 5 files changed, 180 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 21ed5c9607..b51a528f48 100644 --- a/css/index.css +++ b/css/index.css @@ -188,6 +188,32 @@ h2 { .topalign .navbarthingy .navie { display: unset; } +.topalign2 { + display: flex; + justify-content: center; + align-content: top; +} +.topalign2 .navbarthingy2 { + background-color: #D8D8D8; + top: 0; + height: 40px; + width: 1024px; + color: white; + display: flex; + justify-content: space-between; + align-content: flex-start; + padding-top: 15px; +} +.topalign2 .navbarthingy2 .nav1 { + width: 10%; + padding-left: 100px; +} +.topalign2 .navbarthingy2 .nav2 { + width: 10%; +} +.topalign2 .navbarthingy2 .navie { + display: unset; +} .aligner1 { justify-content: left; } @@ -549,3 +575,29 @@ h2 { display: inline-block; font-size: 16px; } +.overlay { + height: 0; + width: 100%; + position: fixed; + z-index: 3; + left: 0; + top: 0; + background-color: #D8D8D8; + overflow-x: hidden; + transition: 0.7s; +} +.overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; +} +.overlay-content a { + text-decoration: none; + font-size: 48px; + color: #FFFFFF; + line-height: 85px; +} +.overlay-content a:hover { + color: #222222; +} diff --git a/index.html b/index.html index a16b393046..58ffffcc8d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - Home + + S&J Home @@ -17,11 +18,30 @@

S&J

- +
+
+ +
+
+

S&J

+
+ +
+
+
+ +
+ + Home
+ Services
+ Contact
+
+
+
diff --git a/js/index.js b/js/index.js index bb3d341cf0..0a9a079021 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,12 @@ -// JS goes here \ No newline at end of file +// JS goes here + + + +function openNav() { + document.getElementById("myNav").style.height = "100%"; +} + +function closeNav() { + document.getElementById("myNav").style.height = "0%"; +} + diff --git a/less/index.less b/less/index.less index 09e00f7dec..110f4fc679 100644 --- a/less/index.less +++ b/less/index.less @@ -119,6 +119,43 @@ h2 { display: unset; } } + +} + + +.topalign2 { + display:flex; + justify-content: center; + align-content: top; + + .navbarthingy2 { + //overflow: hidden; + background-color: #D8D8D8; + //position: fixed; + top: 0; + height: 40px; + width:1024px; + color: white; + display:flex; + justify-content: space-between; + align-content: flex-start; + padding-top: 15px; + //z-index:2; + + .nav1 { + width: 10%; + padding-left: 100px; + } + + .nav2 { + width:10%; + } + + .navie{ + display: unset; + } + } + } @@ -507,4 +544,38 @@ h2 { display: inline-block; font-size: 16px; } +} + +.overlay { + + height: 0; + width: 100%; + position: fixed; + z-index: 3; + left: 0; + top: 0; + background-color: #D8D8D8; + + overflow-x: hidden; + transition: 0.7s; +} + +.overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + + a { + text-decoration: none; + font-size: 48px; + color: #FFFFFF; + line-height: 85px; + + + } + + a:hover { + color: #222222; + } } \ No newline at end of file diff --git a/services.html b/services.html index 951031f86d..b9a4b546a6 100644 --- a/services.html +++ b/services.html @@ -14,11 +14,33 @@

S&J

- +
+ +
+ +
+
+

S&J

+
+ +
+
+
+ +
+ + Home
+ Services
+ Contact
+
+
+ + +
From 51330ffc16d96109f8d6f3f299e2dab5ac41dcda Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 14:55:27 -0700 Subject: [PATCH 11/19] have services nav area layed out, now to js it! --- css/index.css | 16 ++++++++++ less/index.less | 21 +++++++++++++ services.html | 78 ++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 102 insertions(+), 13 deletions(-) diff --git a/css/index.css b/css/index.css index b51a528f48..4426063496 100644 --- a/css/index.css +++ b/css/index.css @@ -601,3 +601,19 @@ h2 { .overlay-content a:hover { color: #222222; } +.displayarea { + width: 100%; + height: 550px; +} +#precon { + display: flex; +} +#cons { + display: none; +} +#desi { + display: none; +} +#sust { + display: none; +} diff --git a/less/index.less b/less/index.less index 110f4fc679..1489d58ec5 100644 --- a/less/index.less +++ b/less/index.less @@ -578,4 +578,25 @@ h2 { a:hover { color: #222222; } +} + +.displayarea { + width:100%; + height: 550px; +} + +#precon { + display: flex; +} + +#cons { + display: none; +} + +#desi { + display: none; +} + +#sust { + display: none; } \ No newline at end of file diff --git a/services.html b/services.html index b9a4b546a6..9162aca6dd 100644 --- a/services.html +++ b/services.html @@ -57,19 +57,75 @@
-
Pre-Construction
-
Construction
-
Design Build
-
Sustainability
+
Pre-Construction
+
Construction
+
Design Build
+
Sustainability
+ +
+ +
+ +
+ +
+

Pre-Construction

+

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

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

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

Construction

+

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

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

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

Design Build

+

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

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

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

Sustainability

+

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

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

+
+ +
+ + +
+ +
- +
From 0a526d0e85445725a90c3f84e283b64e81ee2202 Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 15:43:24 -0700 Subject: [PATCH 12/19] mvp done, though in a very simplistic way, gonna do a loop later --- css/index.css | 7 ++++- js/index.js | 69 +++++++++++++++++++++++++++++++++++++++++++++++-- less/index.less | 9 ++++++- services.html | 21 +++++++++------ 4 files changed, 94 insertions(+), 12 deletions(-) diff --git a/css/index.css b/css/index.css index 4426063496..d1b1af90f5 100644 --- a/css/index.css +++ b/css/index.css @@ -502,6 +502,7 @@ h2 { } .img2 { display: unset; + width: 100%; } @media (max-width: 600px) { .img2 { @@ -521,6 +522,7 @@ h2 { } .img3 { display: unset; + width: 100%; } @media (max-width: 600px) { .img3 { @@ -565,7 +567,7 @@ h2 { padding-bottom: 20px; } .divider .divbut { - width: 18%; + width: 20%; border: 2px solid black; background-color: white; color: black; @@ -575,6 +577,9 @@ h2 { display: inline-block; font-size: 16px; } +.divider .divbut .divbut:hover { + background-color: #222222; +} .overlay { height: 0; width: 100%; diff --git a/js/index.js b/js/index.js index 0a9a079021..b0a5128014 100644 --- a/js/index.js +++ b/js/index.js @@ -1,7 +1,5 @@ // JS goes here - - function openNav() { document.getElementById("myNav").style.height = "100%"; } @@ -10,3 +8,70 @@ function closeNav() { document.getElementById("myNav").style.height = "0%"; } + + + + +function precon() { + document.getElementById("precon").style.display = "flex"; + document.getElementById("cons").style.display ="none"; + document.getElementById("desi").style.display ="none"; + document.getElementById("sust").style.display ="none"; + + document.getElementById("yo1").style.color="white"; + document.getElementById("yo1").style.backgroundColor="#5E9FB9" + document.getElementById("yo2").style.color="black"; + document.getElementById("yo2").style.backgroundColor="white" + document.getElementById("yo3").style.color="black"; + document.getElementById("yo3").style.backgroundColor="white" + document.getElementById("yo4").style.color="black"; + document.getElementById("yo4").style.backgroundColor="white" +} + +function cons() { + document.getElementById("precon").style.display = "none"; + document.getElementById("cons").style.display ="flex"; + document.getElementById("desi").style.display ="none"; + document.getElementById("sust").style.display ="none"; + + document.getElementById("yo2").style.color="white"; + document.getElementById("yo2").style.backgroundColor="#5E9FB9" + document.getElementById("yo1").style.color="black"; + document.getElementById("yo1").style.backgroundColor="white" + document.getElementById("yo3").style.color="black"; + document.getElementById("yo3").style.backgroundColor="white" + document.getElementById("yo4").style.color="black"; + document.getElementById("yo4").style.backgroundColor="white" +} + +function desi() { + document.getElementById("precon").style.display = "none"; + document.getElementById("cons").style.display ="none"; + document.getElementById("desi").style.display ="flex"; + document.getElementById("sust").style.display ="none"; + + document.getElementById("yo3").style.color="white"; + document.getElementById("yo3").style.backgroundColor="#5E9FB9" + document.getElementById("yo1").style.color="black"; + document.getElementById("yo1").style.backgroundColor="white" + document.getElementById("yo2").style.color="black"; + document.getElementById("yo2").style.backgroundColor="white" + document.getElementById("yo4").style.color="black"; + document.getElementById("yo4").style.backgroundColor="white" +} + +function sust() { + document.getElementById("precon").style.display = "none"; + document.getElementById("cons").style.display ="none"; + document.getElementById("desi").style.display ="none"; + document.getElementById("sust").style.display ="flex"; + + document.getElementById("yo4").style.color="white"; + document.getElementById("yo4").style.backgroundColor="#5E9FB9" + document.getElementById("yo1").style.color="black"; + document.getElementById("yo1").style.backgroundColor="white" + document.getElementById("yo2").style.color="black"; + document.getElementById("yo2").style.backgroundColor="white" + document.getElementById("yo3").style.color="black"; + document.getElementById("yo3").style.backgroundColor="white" +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 1489d58ec5..32f1484f7e 100644 --- a/less/index.less +++ b/less/index.less @@ -468,6 +468,7 @@ h2 { .img2 { display:unset; + width: 100%; @media (max-width: 600px){ display:none; @@ -488,6 +489,7 @@ h2 { .img3 { display:unset; + width: 100%; @media (max-width: 600px){ display:none; @@ -534,7 +536,7 @@ h2 { padding-bottom: 20px; .divbut { - width: 18%; + width: 20%; border: 2px solid black; background-color: white; color: black; @@ -543,6 +545,11 @@ h2 { text-decoration: none; display: inline-block; font-size: 16px; + + .divbut:hover { + background-color:#222222; + + } } } diff --git a/services.html b/services.html index 9162aca6dd..3528020132 100644 --- a/services.html +++ b/services.html @@ -56,11 +56,16 @@
+ + + + + -
Pre-Construction
-
Construction
-
Design Build
-
Sustainability
+ +
@@ -70,7 +75,7 @@

Pre-Construction

-

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

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

+

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

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

@@ -84,7 +89,7 @@

Pre-Construction

Construction

-

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

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

+

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

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

@@ -98,7 +103,7 @@

Construction

Design Build

-

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

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

+

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

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

@@ -112,7 +117,7 @@

Design Build

Sustainability

-

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

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

+

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

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

From 73a454f57e4733cdadef52564c7bfae577c5630a Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 16:05:18 -0700 Subject: [PATCH 13/19] got almost all of service page working for mobile --- css/index.css | 16 ++++++++++++++++ js/index.js | 3 ++- less/index.less | 15 +++++++++++++++ services.html | 8 ++++---- 4 files changed, 37 insertions(+), 5 deletions(-) diff --git a/css/index.css b/css/index.css index d1b1af90f5..c2aee28416 100644 --- a/css/index.css +++ b/css/index.css @@ -566,6 +566,12 @@ h2 { padding-top: 20px; padding-bottom: 20px; } +@media (max-width: 600px) { + .divider { + flex-direction: column; + padding-bottom: 50px; + } +} .divider .divbut { width: 20%; border: 2px solid black; @@ -577,6 +583,11 @@ h2 { display: inline-block; font-size: 16px; } +@media (max-width: 600px) { + .divider .divbut { + width: 90%; + } +} .divider .divbut .divbut:hover { background-color: #222222; } @@ -610,6 +621,11 @@ h2 { width: 100%; height: 550px; } +@media (max-width: 600px) { + .displayarea { + padding-bottom: 120px; + } +} #precon { display: flex; } diff --git a/js/index.js b/js/index.js index b0a5128014..3b867b0473 100644 --- a/js/index.js +++ b/js/index.js @@ -9,7 +9,8 @@ function closeNav() { } - +document.getElementById("yo1").style.color="white"; +document.getElementById("yo1").style.backgroundColor="#5E9FB9" function precon() { diff --git a/less/index.less b/less/index.less index 32f1484f7e..2990caead6 100644 --- a/less/index.less +++ b/less/index.less @@ -535,6 +535,12 @@ h2 { padding-top: 20px; padding-bottom: 20px; + @media (max-width: 600px){ + flex-direction: column; + padding-bottom: 50px; + + } + .divbut { width: 20%; border: 2px solid black; @@ -546,6 +552,11 @@ h2 { display: inline-block; font-size: 16px; + @media (max-width: 600px){ + width:90%; + + } + .divbut:hover { background-color:#222222; @@ -590,6 +601,10 @@ h2 { .displayarea { width:100%; height: 550px; + + @media (max-width: 600px){ + padding-bottom:120px; + } } #precon { diff --git a/services.html b/services.html index 3528020132..cbe8a4b326 100644 --- a/services.html +++ b/services.html @@ -71,7 +71,7 @@
-
+

Pre-Construction

@@ -85,7 +85,7 @@

Pre-Construction

-
+

Construction

@@ -99,7 +99,7 @@

Construction

-
+

Design Build

@@ -113,7 +113,7 @@

Design Build

-
+

Sustainability

From 5e4e46d30947c770681fc1888a8e3aeb0f8c56f4 Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 16:36:36 -0700 Subject: [PATCH 14/19] index & services, deskt & mobile, with navs/tabs, done. looks good --- css/index.css | 19 ++++++++++++++++--- less/index.less | 28 ++++++++++++++++++++++------ 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index c2aee28416..3e2273f7ea 100644 --- a/css/index.css +++ b/css/index.css @@ -178,10 +178,21 @@ h2 { padding-top: 15px; z-index: 2; } +@media (max-width: 600px) { + .topalign .navbarthingy { + height: 50px; + width: 490px; + } +} .topalign .navbarthingy .nav1 { width: 10%; padding-left: 100px; } +@media (max-width: 600px) { + .topalign .navbarthingy .nav1 { + padding-left: 30px; + } +} .topalign .navbarthingy .nav2 { width: 10%; } @@ -570,6 +581,8 @@ h2 { .divider { flex-direction: column; padding-bottom: 50px; + justify-content: center; + width: 100%; } } .divider .divbut { @@ -579,16 +592,16 @@ h2 { color: black; padding: 15px 15px; text-align: center; - text-decoration: none; display: inline-block; font-size: 16px; } @media (max-width: 600px) { .divider .divbut { - width: 90%; + width: 100%; + margin-bottom: 15px; } } -.divider .divbut .divbut:hover { +.divider .divbut :hover { background-color: #222222; } .overlay { diff --git a/less/index.less b/less/index.less index 2990caead6..0ba7afd515 100644 --- a/less/index.less +++ b/less/index.less @@ -92,6 +92,8 @@ h2 { justify-content: center; align-content: center; + + .navbarthingy { //overflow: hidden; background-color: #D8D8D8; @@ -106,9 +108,19 @@ h2 { padding-top: 15px; z-index:2; + @media (max-width: 600px){ + height: 50px; + width: 490px; + + } + .nav1 { width: 10%; padding-left: 100px; + + @media (max-width: 600px){ + padding-left: 30px; + } } .nav2 { @@ -538,6 +550,8 @@ h2 { @media (max-width: 600px){ flex-direction: column; padding-bottom: 50px; + justify-content: center; + width:100%; } @@ -548,20 +562,22 @@ h2 { color: black; padding: 15px 15px; text-align: center; - text-decoration: none; + //text-decoration: none; display: inline-block; font-size: 16px; @media (max-width: 600px){ - width:90%; + width:100%; + margin-bottom:15px; } + } - .divbut:hover { - background-color:#222222; - - } + .divbut :hover { + background-color:#222222; + } + } .overlay { From bfb1a8c7c597b675873530e74048ae72d305111b Mon Sep 17 00:00:00 2001 From: amberm Date: Tue, 11 Dec 2018 17:40:17 -0700 Subject: [PATCH 15/19] fixed hover issue on nav tabs --- css/index.css | 4 +++- js/index.js | 1 - less/index.less | 5 +++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 3e2273f7ea..8e188a40e4 100644 --- a/css/index.css +++ b/css/index.css @@ -586,6 +586,7 @@ h2 { } } .divider .divbut { + text-decoration: none; width: 20%; border: 2px solid black; background-color: white; @@ -601,8 +602,9 @@ h2 { margin-bottom: 15px; } } -.divider .divbut :hover { +.divider .divbut:hover { background-color: #222222; + color: white; } .overlay { height: 0; diff --git a/js/index.js b/js/index.js index 3b867b0473..6ac269c134 100644 --- a/js/index.js +++ b/js/index.js @@ -8,7 +8,6 @@ function closeNav() { document.getElementById("myNav").style.height = "0%"; } - document.getElementById("yo1").style.color="white"; document.getElementById("yo1").style.backgroundColor="#5E9FB9" diff --git a/less/index.less b/less/index.less index 0ba7afd515..1bd948b8d7 100644 --- a/less/index.less +++ b/less/index.less @@ -556,13 +556,13 @@ h2 { } .divbut { + text-decoration: none; width: 20%; border: 2px solid black; background-color: white; color: black; padding: 15px 15px; text-align: center; - //text-decoration: none; display: inline-block; font-size: 16px; @@ -573,8 +573,9 @@ h2 { } } - .divbut :hover { + .divbut:hover { background-color:#222222; + color: white; } From 101934d1de04c9f0ca19629929d069b7a34bd488 Mon Sep 17 00:00:00 2001 From: amberm Date: Wed, 12 Dec 2018 15:49:49 -0700 Subject: [PATCH 16/19] most of contact page done --- contact.html | 116 +++++++++++++++++++++++++++++++++++++++++++++++- css/index.css | 21 +++++++++ index.html | 2 +- less/index.less | 26 +++++++++++ services.html | 2 +- 5 files changed, 164 insertions(+), 3 deletions(-) diff --git a/contact.html b/contact.html index 868844fe14..6c51554bea 100644 --- a/contact.html +++ b/contact.html @@ -10,10 +10,78 @@ +
+
+

S&J

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

S&J

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

Contact

+
+ + + +

Services

+ +
+ +
+ +
+
+ +
+

Where We Work

+


+

New York

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+


+

Florida

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+


+

California

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+
+ +
+

Interested in starting a project?

+

Let’s talk:

+
+
+
+

We'll never share your email with anyone else.

+
+ +
+

New York

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+

Florida

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+

California

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+
+

Copyright © 2018 Smith and Jones

+
+ diff --git a/css/index.css b/css/index.css index 8e188a40e4..8df2e26fcf 100644 --- a/css/index.css +++ b/css/index.css @@ -653,3 +653,24 @@ h2 { #sust { display: none; } +.bigbreak { + display: flex; + justify-content: space-around; + align-items: center; + margin-top: 50px; + width: 92%; + margin-bottom: 50px; +} +.bigbreak .piece1b { + width: 65%; +} +.bigbreak .piece2b { + width: 30%; +} +.bigbreak .piece2b h1 { + font-size: 3rem; + font-weight: bold; +} +.bigbreak .piece2b h3 { + font-size: 1.7rem; +} diff --git a/index.html b/index.html index 58ffffcc8d..1bd793fef3 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,7 @@ Home
Services
- Contact
+ Contact
diff --git a/less/index.less b/less/index.less index 1bd948b8d7..4b49fa8170 100644 --- a/less/index.less +++ b/less/index.less @@ -638,4 +638,30 @@ h2 { #sust { display: none; +} + +.bigbreak { + display: flex; + justify-content: space-around; + align-items: center; + margin-top: 50px; + width: 92%; + margin-bottom: 50px; + + .piece1b { + width:65%; + } + + .piece2b { + width:30%; + + h1{ + font-size: 3rem; + font-weight: bold; + } + + h3{ + font-size:1.7rem; + } + } } \ No newline at end of file diff --git a/services.html b/services.html index cbe8a4b326..7fd1401715 100644 --- a/services.html +++ b/services.html @@ -35,7 +35,7 @@ Home
Services
- Contact
+ Contact
From b593803fc3b8944a8e1f135687942bb037ceeb97 Mon Sep 17 00:00:00 2001 From: amberm Date: Thu, 13 Dec 2018 10:58:15 -0700 Subject: [PATCH 17/19] done with contact desk&mobile, looks good --- contact.html | 33 ++++++++++++++++++++++++-- css/index.css | 63 +++++++++++++++++++++++++++++++++++++++++++++++++ less/index.less | 63 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 157 insertions(+), 2 deletions(-) diff --git a/contact.html b/contact.html index 6c51554bea..61cb46bf5d 100644 --- a/contact.html +++ b/contact.html @@ -45,13 +45,42 @@ -

Services

+

Contact

-
+
+

Get In Touch

+

+

E-Mail Address

+
+
+
+

We'll never share your email with anyone else.

+

+

How Many Buildings Do You Need Planned?

+
+ +

+

Provide a brief overview of your project needs:

+
+ +
+
+ Small Business
+ Residential
+ corporation
+
+


+
diff --git a/css/index.css b/css/index.css index 8df2e26fcf..4e2cd881e3 100644 --- a/css/index.css +++ b/css/index.css @@ -661,12 +661,65 @@ h2 { width: 92%; margin-bottom: 50px; } +@media (max-width: 600px) { + .bigbreak { + flex-direction: column; + } +} .bigbreak .piece1b { width: 65%; } +@media (max-width: 600px) { + .bigbreak .piece1b { + width: 95%; + padding-bottom: 15px; + } +} +.bigbreak .piece1b h3 { + font-size: 1.7rem; +} +.bigbreak .piece1b h1 { + font-size: 3rem; + font-weight: bold; +} +.bigbreak input[type=text], +.bigbreak select { + width: 60%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} +@media (max-width: 600px) { + .bigbreak input[type=text], + .bigbreak select { + width: 95%; + } +} +.bigbreak textarea[type=stuff] { + width: 60%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} +@media (max-width: 600px) { + .bigbreak textarea[type=stuff] { + width: 95%; + } +} .bigbreak .piece2b { width: 30%; } +@media (max-width: 600px) { + .bigbreak .piece2b { + width: 95%; + } +} .bigbreak .piece2b h1 { font-size: 3rem; font-weight: bold; @@ -674,3 +727,13 @@ h2 { .bigbreak .piece2b h3 { font-size: 1.7rem; } +.woober { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} diff --git a/less/index.less b/less/index.less index 4b49fa8170..350184ec7c 100644 --- a/less/index.less +++ b/less/index.less @@ -648,13 +648,65 @@ h2 { width: 92%; margin-bottom: 50px; + @media (max-width: 600px){ + flex-direction: column; + } + .piece1b { width:65%; + + @media (max-width: 600px){ + width:95%; + padding-bottom: 15px; + + } + + h3{ + font-size:1.7rem; + } + h1{ + font-size: 3rem; + font-weight: bold; + } + } + + input[type=text], select { + width: 60%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + + @media (max-width: 600px){ + width:95% + } + + } + + textarea[type=stuff] { + width: 60%; + + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + + @media (max-width: 600px){ + width:95% + } } .piece2b { width:30%; + @media (max-width: 600px){ + width:95% + } + h1{ font-size: 3rem; font-weight: bold; @@ -664,4 +716,15 @@ h2 { font-size:1.7rem; } } +} + +.woober { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; } \ No newline at end of file From 50776e3408b9a3a4fd052a65b838f2e6e68ef717 Mon Sep 17 00:00:00 2001 From: amberm Date: Thu, 13 Dec 2018 14:51:27 -0700 Subject: [PATCH 18/19] probably final commit --- js/index.js | 46 +++++++++++++++++++++++++++++++++++++++++++++- services.html | 4 ++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/js/index.js b/js/index.js index 6ac269c134..53b17f8471 100644 --- a/js/index.js +++ b/js/index.js @@ -74,4 +74,48 @@ function sust() { document.getElementById("yo2").style.backgroundColor="white" document.getElementById("yo3").style.color="black"; document.getElementById("yo3").style.backgroundColor="white" -} \ No newline at end of file +} + + +/* +class Tab { + constructor(tabs){ + this.tab= (tabs); + + this.tabContent= document.querySelector(`.tab-content[data-tab="${this.tab.dataset.tab}"]`); + + } + setActive(start) { + if (start){ + this.tab.classList.add("begin"); + + this.tabContent.classList.add("begin"); + } else { + this.tab.classList.remove("begin"); + this.tabContent.classList.remove("begin"); + } + } +} + +class TabNavigator { + constructor(tabNavigatorName) { + this.tabNavigator = document.querySelector(tabNavigatorName); + this.tabs= this.tabNavigator.querySelectorAll(".tab"); + this.tabs= Array.from(this.tabs).map(tab => new Tab(tab)); + this.tabs.forEach(tab => tab.tab.addEventListener("click", element => this.select(element))); + } + + select(element) { + this.tabs.forEach(tab => { + if(tab.tab.dataset.tab === element.target.dataset.tab) tab.setActive(true); + else tab.setActive(false); + }); + } +} + +const menu = new Menu(".menu", ".menu-button"); + +const tabNavigator = new TabNavigator(".tab-nav"); +*/ + +const tabNavs = new TabNavi(); \ No newline at end of file diff --git a/services.html b/services.html index 7fd1401715..7f6fa411f5 100644 --- a/services.html +++ b/services.html @@ -63,7 +63,11 @@ + + From 621685d09647d4bc04df82032caa6dbe556c7559 Mon Sep 17 00:00:00 2001 From: amberm Date: Thu, 13 Dec 2018 15:12:18 -0700 Subject: [PATCH 19/19] now I'm done, I think --- js/index.js | 86 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 54 insertions(+), 32 deletions(-) diff --git a/js/index.js b/js/index.js index 53b17f8471..4df6dfede1 100644 --- a/js/index.js +++ b/js/index.js @@ -76,46 +76,68 @@ function sust() { document.getElementById("yo3").style.backgroundColor="white" } +class TabLink { + constructor(tabElement){ + + this.tabElement = tabElement; + + this.tabData = this.tabElement.dataset.tab; + + if(this.tabData == 'all'){ + + this.cards = document.querySelectorAll('.card'); + //console.log(this.cards); -/* -class Tab { - constructor(tabs){ - this.tab= (tabs); - - this.tabContent= document.querySelector(`.tab-content[data-tab="${this.tab.dataset.tab}"]`); + } else { + this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); + //console.log(this.cards); } - setActive(start) { - if (start){ - this.tab.classList.add("begin"); - - this.tabContent.classList.add("begin"); - } else { - this.tab.classList.remove("begin"); - this.tabContent.classList.remove("begin"); - } - } + + this.cards = Array.from(this.cards).map( function (card){ + return new TabCard(card); + }); + + console.log(this.cards); + + this.tabElement.addEventListener('click', this.selectTab.bind(this) ); } -class TabNavigator { - constructor(tabNavigatorName) { - this.tabNavigator = document.querySelector(tabNavigatorName); - this.tabs= this.tabNavigator.querySelectorAll(".tab"); - this.tabs= Array.from(this.tabs).map(tab => new Tab(tab)); - this.tabs.forEach(tab => tab.tab.addEventListener("click", element => this.select(element))); - } +selectTab(){ + const tabs = document.querySelectorAll('.tab'); + + tabs.forEach(function(e){ + e.classList.remove("active-tab") + }); + + const cards = document.querySelectorAll('.card'); - select(element) { - this.tabs.forEach(tab => { - if(tab.tab.dataset.tab === element.target.dataset.tab) tab.setActive(true); - else tab.setActive(false); - }); +cards.forEach(function(e){ + //console.log(e); + e.style.display = 'none'; + }); + + this.tabElement.classList.add(".active-tab"); + +this.cards.forEach(card => card.selectCard()); } } -const menu = new Menu(".menu", ".menu-button"); +class TabCard { +constructor(cardElement){ + // Assign this.cardElement to the cardElement DOM reference + this.cardElement = cardElement; + +} +selectCard(){ + // Update the style of this.cardElement to display = "flex" + this.cardElement.style.display ='flex'; +} + +} -const tabNavigator = new TabNavigator(".tab-nav"); -*/ +let tabs = document.querySelectorAll('.tab'); -const tabNavs = new TabNavi(); \ No newline at end of file +tabs.forEach( function(e) { +return new TabLink(e); +}); \ No newline at end of file