From 277e751f26844074c10433fb828611547035dda3 Mon Sep 17 00:00:00 2001 From: Dexter Lewis Date: Mon, 11 Feb 2019 21:42:53 -0500 Subject: [PATCH 01/17] initial commit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 17aecb1714..a1616da957 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ You will use Trello to report your progress on the MVP and any extra features yo - Use past solutions from the previous weeks to accomplish harder tasks - Commit every time you accomplish any new functionality or layout. Get in the habit of frequent commits so you have a record of your work. Push up your commits every day to showcase your progress to your PM - After 20 minutes of being stuck on something, reach out to your PM -- Don't overplan, start coding as soon as you can and adjust accordingly. Trello is there as a guide not as a distraction +- Don't overplan, start coding as soon as you can and adjust accordingly. Trello is there as a guide not as a distraction. ## Trello Set Up: * [ ] Create a [Trello account](https://trello.com/) From ea20f15b3bfaa6290704a27fd7749295538d3a6f Mon Sep 17 00:00:00 2001 From: Dexter Lewis Date: Mon, 11 Feb 2019 23:37:59 -0500 Subject: [PATCH 02/17] HTML structure for homepage and add less files --- css/index.css | 169 ++++++++++++++++++++++++++++++++++++++++++++++- index.html | 142 +++++++++++++++++++++++++-------------- less/footer.less | 6 ++ less/home.less | 34 ++++++++++ less/index.less | 12 +++- less/mixins.less | 4 ++ 6 files changed, 315 insertions(+), 52 deletions(-) create mode 100644 less/footer.less create mode 100644 less/home.less create mode 100644 less/mixins.less diff --git a/css/index.css b/css/index.css index e6b2b589c1..d5fe855384 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,168 @@ -/* 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; + font-family: 'Roboto', sans-serif; +} +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 */ +.cta { + margin: 0 auto; + width: 960px; + overflow: hidden; +} +.cta h1 { + font-weight: bold; + font-size: 16px; + line-height: 75px; +} +.home { + padding: 0 52.5px; +} +.home .services { + display: flex; + padding-left: 52.5px; + padding-right: 35px; +} +.home .recent-projects { + padding: 0 52.5px; +} +footer { + display: flex; + color: #fff; + background-color: #828282; +} +.container { + margin: 0 auto; + width: 960px; + max-width: 100%; +} diff --git a/index.html b/index.html index 8a84a17304..c446f31ab9 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,7 @@ -

You got this! Good luck.

- - +
+ +
+ +

Integrity,

+

Excellence,

+

Progress.

- -Et sed autem causae appareat, tempor abhorreant te mei, facer facilisis sit ea. Eu timeam vidisse consectetuer sed. Duo etiam laboramus dissentiet in, nec no errem -View Designs -Recent Projects -THE VILLAS -The Villas bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. -Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. -OUTSKIRTS -The Outskirts are amazing to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. -Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. - -THE BLOCKS + - diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..7653e9f71d --- /dev/null +++ b/less/footer.less @@ -0,0 +1,6 @@ +footer { + display: flex; + color: #fff; + background-color: #828282 + +} \ No newline at end of file diff --git a/less/home.less b/less/home.less new file mode 100644 index 0000000000..60adf2bb1d --- /dev/null +++ b/less/home.less @@ -0,0 +1,34 @@ +.cta { + margin: 0 auto; + width: 960px; + overflow: hidden; + + + h1 { + font-weight: bold; + font-size: 16px; + line-height: 75px; + + + } +} + +.home { + padding: 0 52.5px; + + + + .services { + display: flex; + padding-left: 52.5px; + padding-right: 35px; + } + + .recent-projects { + padding: 0 52.5px; + + h2 { + + } + } +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..67d4116dc0 100644 --- a/less/index.less +++ b/less/index.less @@ -33,6 +33,7 @@ footer,header,hgroup,menu,nav,section{ } body{ line-height:1; + font-family: 'Roboto', sans-serif; } ol,ul{ list-style:none; @@ -57,4 +58,13 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +@import 'mixins'; +@import 'home'; +@import 'footer'; +.container { + .margin-auto(); + width: 960px; + max-width: 100%; + +} \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..c023979416 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,4 @@ +.margin-auto() { + margin: 0 auto; + +} \ No newline at end of file From 22e8c90136f8f2a83b59e12566854cd3e2b94bd1 Mon Sep 17 00:00:00 2001 From: Dexter Lewis Date: Tue, 12 Feb 2019 21:47:56 -0500 Subject: [PATCH 03/17] Finished dekstop styling of homepage --- css/index.css | 170 ++++++++++++++++++++++--- index.html | 292 ++++++++++++++++++++++++++----------------- less/footer.less | 49 +++++++- less/home.less | 101 +++++++++++---- less/index.less | 31 ++++- less/mixins.less | 8 +- less/navigation.less | 21 ++++ 7 files changed, 507 insertions(+), 165 deletions(-) create mode 100644 less/navigation.less diff --git a/css/index.css b/css/index.css index d5fe855384..8c5d192be9 100644 --- a/css/index.css +++ b/css/index.css @@ -108,6 +108,7 @@ section { body { line-height: 1; font-family: 'Roboto', sans-serif; + font-size: 62.5%; } ol, ul { @@ -135,34 +136,173 @@ table { border-spacing: 0; } /* Your Code Goes Here */ -.cta { - margin: 0 auto; - width: 960px; - overflow: hidden; +footer { + color: #fff; + background-color: #828282; + padding-top: 60px; + padding-bottom: 10px; + padding-left: 84.5px; + padding-right: 84.5px; +} +footer .locations { + display: flex; + justify-content: space-between; } -.cta h1 { +footer .locations p { + font-size: 14px; +} +footer .locations .footer-heading { font-weight: bold; - font-size: 16px; - line-height: 75px; + font-size: 20px; + line-height: 24px; +} +footer .locations input { + width: 100%; + border-radius: 5px; + height: 30px; + padding-left: 5px; + margin-top: 10px; + margin-bottom: 10px; +} +footer .locations .email p { + font-weight: bold; + font-size: 2em; + line-height: 24px; +} +footer .locations .email .email-text { + font-size: 1em; + font-weight: normal; +} +footer .cr { + text-align: center; + margin-top: 20px; + font-size: 1em !important; } .home { - padding: 0 52.5px; + padding-left: 84.5px; + padding-right: 84.5px; +} +.home h2 { + padding-bottom: 15px; +} +.home .cta { + position: relative; + margin-bottom: 40px; +} +.home .cta .jumbotron { + width: 100%; + height: auto; +} +.home .cta .jumbo-text { + padding-left: 84.5px; + padding-right: 84.5px; + position: absolute; + font-weight: bold; + font-size: 6.4em; + line-height: 75px; + top: 325px; +} +.home .cta .jumbo-text h1 { + color: #fff; } .home .services { display: flex; - padding-left: 52.5px; - padding-right: 35px; + align-items: center; + padding-left: 84.5px; + padding-right: 84.5px; + margin-bottom: 70px; +} +.home .services button { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; +} +.home .services .services-img1 { + margin-left: 35px; +} +.home .services .services-img2 { + margin-right: 35px; } .home .recent-projects { - padding: 0 52.5px; + padding-left: 84.5px; + padding-right: 84.5px; } -footer { +.home .recent-projects h2:nth-child(1) { + margin-bottom: 25px; +} +.home .recent-projects .project-container { + margin-bottom: 90px; +} +.home .recent-projects .project { + position: relative; +} +.home .recent-projects .project img { + width: 100%; + height: auto; +} +.home .recent-projects .project .project-text { + background-color: #D8D8D8; + width: 280px; + position: absolute; + text-align: center; + padding: 20px; + font-weight: 100; + letter-spacing: 7px; +} +.home .recent-projects .project .proj-right { + right: 0px; + top: 190px; +} +.home .recent-projects .project .proj-left { + left: 0px; + top: 190px; +} +.home .recent-projects .project-paragraph { + margin-top: 90px; + padding-left: 190px; + padding-right: 190px; +} +.home .recent-projects .project-paragraph p { + margin-bottom: 20px; +} +header { + width: 100%; + max-width: 1024px; + background-color: darkgray; + margin: 0 auto; +} +header nav { display: flex; + justify-content: space-between; + padding-left: 84.5px; + padding-right: 84.5px; + padding-top: 10px; + padding-bottom: 10px; + margin-top: 10px; +} +header nav #logo { color: #fff; - background-color: #828282; + font-size: 2.4em; +} +header nav a { + text-decoration: none; } .container { margin: 0 auto; - width: 960px; - max-width: 100%; + width: 100%; + max-width: 1024px; +} +.container p { + line-height: 1.6; + font-size: 1.6em; +} +.container h2 { + font-weight: bold; + font-size: 2.8em; + color: #222222; +} +.container img { + width: 100%; + height: auto; } diff --git a/index.html b/index.html index c446f31ab9..f45f31a56c 100644 --- a/index.html +++ b/index.html @@ -1,127 +1,183 @@ - - - Home - - - - - - - - + + + + - -
- -
- -

Integrity,

-

Excellence,

-

Progress.

- -
- - -
- -
- - -
-
-

Smith & Jones Architects

-

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

- -
-
- -
- -
-
-
- -
-
-

Futuristic Designs

-

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

- -
-
-
-

Recent Projects

-
- -

THE VILLAS

-

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

-

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

-
-
- -

OUTSKIRTS

-

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

-

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

-
-
- -

THE BLOCKS

-

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

-

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

+
+ +
+
+
+ +
+ +

Integrity,

+

Excellence,

+

Progress.

- -
-
-
-

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

-

New York

-

202 555 0144

-
-
-

Florida

-

Ocean Drive

-

Suite 201

-

Orlando, FL 22345

-

502 555 0144

-
-
-

California

-

Mountain Street

-

Suite 105

-

San Diego, CA 22345

-

702 555 0144

-
-

Copyright © 2018 Smith and Jones

-
- -
- - - - - - - - - - + + - - - \ No newline at end of file + + + diff --git a/less/footer.less b/less/footer.less index 7653e9f71d..2511d993d5 100644 --- a/less/footer.less +++ b/less/footer.less @@ -1,6 +1,51 @@ footer { - display: flex; + color: #fff; - background-color: #828282 + background-color: #828282; + padding-top: 60px; + padding-bottom: 10px; + .padding-indent(); + + .locations { + display: flex; + justify-content: space-between; + p { + font-size: 14px; + } + .footer-heading { + font-weight: bold; + font-size: 20px; + line-height: 24px; + } + input { + width: 100%; + border-radius: 5px; + height: 30px; + padding-left: 5px; + margin-top: 10px; + margin-bottom: 10px; + } + .email { + p { + font-weight: bold; + font-size: 2em; + line-height: 24px; + + } + .email-text { + font-size: 1em; + font-weight: normal; + } + } + + } + + + .cr { + text-align: center; + margin-top: 20px; + font-size: 1em !important; + } + } \ No newline at end of file diff --git a/less/home.less b/less/home.less index 60adf2bb1d..cb63e7ef2a 100644 --- a/less/home.less +++ b/less/home.less @@ -1,34 +1,89 @@ -.cta { - margin: 0 auto; - width: 960px; - overflow: hidden; - - h1 { - font-weight: bold; - font-size: 16px; - line-height: 75px; - - - } -} .home { - padding: 0 52.5px; - - + .padding-indent(); + h2 { + padding-bottom: 15px; + } + .cta { + position: relative; + margin-bottom: 40px; + .jumbotron { + width: 100%; + height: auto; + } + .jumbo-text { + .padding-indent(); + position: absolute; + font-weight: bold; + font-size: 6.4em; + line-height: 75px; + top: 325px; + h1 { + color: #fff + } + } + } .services { display: flex; - padding-left: 52.5px; - padding-right: 35px; + align-items: center; + .padding-indent(); + margin-bottom: 70px; + button { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; + } + .services-img1 { + margin-left: 35px; + } + .services-img2 { + margin-right: 35px; + } } - .recent-projects { - padding: 0 52.5px; - - h2 { - + .padding-indent(); + h2:nth-child(1) { + margin-bottom: 25px; + } + .project-container { + margin-bottom: 90px; + } + .project { + position: relative; + img { + width: 100%; + height: auto; + } + + .project-text { + background-color: #D8D8D8; + width: 280px; + position: absolute; + text-align: center; + padding: 20px; + font-weight: 100; + letter-spacing: 7px; + } + .proj-right { + right: 0px; + top: 190px; + } + .proj-left { + left: 0px; + top: 190px; + } + + } + .project-paragraph { + margin-top: 90px; + padding-left: 190px; + padding-right: 190px; + p{ + margin-bottom: 20px; + } } } } \ No newline at end of file diff --git a/less/index.less b/less/index.less index 67d4116dc0..8c58aabf57 100644 --- a/less/index.less +++ b/less/index.less @@ -34,6 +34,7 @@ footer,header,hgroup,menu,nav,section{ body{ line-height:1; font-family: 'Roboto', sans-serif; + font-size: 62.5%; } ol,ul{ list-style:none; @@ -60,11 +61,31 @@ table{ /* Your Code Goes Here */ @import 'mixins'; -@import 'home'; @import 'footer'; +@import 'home'; +@import 'navigation'; + .container { - .margin-auto(); - width: 960px; - max-width: 100%; + margin: 0 auto; + width: 100%; + max-width: 1024px; + + + p { + line-height: 1.6; + + font-size: 1.6em; + } + + h2 { + font-weight: bold; + font-size: 2.8em; + color: #222222; + } + img{ + width: 100%; + height: auto; + } + +} -} \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index c023979416..eca00e1aa9 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1,4 +1,8 @@ .margin-auto() { - margin: 0 auto; - + margin: 20px auto; +} + +.padding-indent() { + padding-left: 84.5px; + padding-right: 84.5px; } \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..0f7d38db40 --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,21 @@ +header { + width: 100%; + max-width: 1024px; + background-color: darkgray; + margin: 0 auto; + nav { + display: flex; + justify-content: space-between; + .padding-indent(); + padding-top: 10px; + padding-bottom: 10px; + margin-top: 10px; + #logo { + color: #fff; + font-size: 2.4em; + } + a { + text-decoration: none; + } + } +} \ No newline at end of file From de5d6c7b3559bb508774245707194c41925b6244 Mon Sep 17 00:00:00 2001 From: Dexter Lewis Date: Wed, 13 Feb 2019 21:26:46 -0500 Subject: [PATCH 04/17] Complete mobile and desktop view of homepage. --- css/index.css | 161 ++++++++++++++++++++++++++++++- index.html | 39 ++++---- less/footer.less | 18 +++- less/home.less | 81 +++++++++++++--- less/index.less | 224 ++++++++++++++++++++++++++++++------------- less/mixins.less | 19 ++++ less/navigation.less | 6 +- less/variables.less | 1 + 8 files changed, 449 insertions(+), 100 deletions(-) create mode 100644 less/variables.less diff --git a/css/index.css b/css/index.css index 8c5d192be9..7e7754df7f 100644 --- a/css/index.css +++ b/css/index.css @@ -173,15 +173,42 @@ footer .locations .email .email-text { font-size: 1em; font-weight: normal; } +@media (max-width: 500px) { + footer .locations { + flex-direction: column; + } + footer .locations div { + margin-bottom: 20px; + } + footer .locations input { + width: 80%; + } +} footer .cr { text-align: center; - margin-top: 20px; + margin-top: 30px; font-size: 1em !important; } +@media (max-width: 500px) { + footer .cr { + margin-bottom: 20px; + } +} +@media (max-width: 500px) { + footer { + padding-left: 20px; + padding-right: 20px; + } +} .home { padding-left: 84.5px; padding-right: 84.5px; } +@media (max-width: 500px) { + .home { + padding: 0; + } +} .home h2 { padding-bottom: 15px; } @@ -205,6 +232,14 @@ footer .cr { .home .cta .jumbo-text h1 { color: #fff; } +@media (max-width: 500px) { + .home .cta .jumbo-text { + padding-left: 20px; + font-size: 4em; + line-height: 50px; + top: 120px; + } +} .home .services { display: flex; align-items: center; @@ -218,12 +253,74 @@ footer .cr { font-size: 1.6em; margin-top: 15px; } +@media (max-width: 500px) { + .home .services button { + width: 100%; + margin-bottom: 25px; + background-color: #fff; + } +} .home .services .services-img1 { margin-left: 35px; } -.home .services .services-img2 { +@media (max-width: 500px) { + .home .services .services-img1 { + margin-left: 0; + margin-bottom: 40px; + } +} +@media (max-width: 500px) { + .home .services { + flex-direction: column-reverse; + padding: 0; + padding-left: 20px; + padding-right: 20px; + margin-bottom: 20px; + } + .home .services p { + margin-bottom: 20px; + } +} +.home .services2 { + display: flex; + align-items: center; + padding-left: 84.5px; + padding-right: 84.5px; + margin-bottom: 70px; +} +.home .services2 button { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; +} +@media (max-width: 500px) { + .home .services2 button { + width: 100%; + margin-bottom: 25px; + background-color: #fff; + } +} +.home .services2 .services-img2 { margin-right: 35px; } +@media (max-width: 500px) { + .home .services2 .services-img2 { + margin-right: 0; + margin-bottom: 40px; + } +} +@media (max-width: 500px) { + .home .services2 { + flex-direction: column; + margin-bottom: 40px; + padding-left: 20px; + padding-right: 20px; + } + .home .services2 p { + margin-bottom: 20px; + } +} .home .recent-projects { padding-left: 84.5px; padding-right: 84.5px; @@ -231,9 +328,22 @@ footer .cr { .home .recent-projects h2:nth-child(1) { margin-bottom: 25px; } +@media (max-width: 500px) { + .home .recent-projects h2:nth-child(1) { + padding-left: 20px; + padding-right: 20px; + } +} .home .recent-projects .project-container { margin-bottom: 90px; } +@media (max-width: 500px) { + .home .recent-projects .project-container { + display: flex; + flex-direction: column; + margin-bottom: 40px; + } +} .home .recent-projects .project { position: relative; } @@ -254,18 +364,42 @@ footer .cr { right: 0px; top: 190px; } +@media (max-width: 500px) { + .home .recent-projects .project .proj-right { + right: 25px; + top: 210px; + } +} .home .recent-projects .project .proj-left { left: 0px; top: 190px; } +@media (max-width: 500px) { + .home .recent-projects .project .proj-left { + left: 25px; + top: 210px; + } +} .home .recent-projects .project-paragraph { margin-top: 90px; padding-left: 190px; padding-right: 190px; } +@media (max-width: 500px) { + .home .recent-projects .project-paragraph { + padding-left: 20px; + padding-right: 20px; + margin-top: 70px; + } +} .home .recent-projects .project-paragraph p { margin-bottom: 20px; } +@media (max-width: 500px) { + .home .recent-projects { + padding: 0; + } +} header { width: 100%; max-width: 1024px; @@ -279,7 +413,6 @@ header nav { padding-right: 84.5px; padding-top: 10px; padding-bottom: 10px; - margin-top: 10px; } header nav #logo { color: #fff; @@ -288,6 +421,12 @@ header nav #logo { header nav a { text-decoration: none; } +@media (max-width: 500px) { + header nav { + padding-left: 20px; + padding-right: 20px; + } +} .container { margin: 0 auto; width: 100%; @@ -306,3 +445,19 @@ header nav a { width: 100%; height: auto; } +.container .hidden-desktop { + display: none; +} +@media (max-width: 500px) { + .container .hidden-desktop { + display: block; + } +} +.container .hidden-mobile { + display: block; +} +@media (max-width: 500px) { + .container .hidden-mobile { + display: none; + } +} diff --git a/index.html b/index.html index f45f31a56c..debb892499 100644 --- a/index.html +++ b/index.html @@ -22,17 +22,19 @@ Services Contact --> -
- -
+
+
+ +
- + +

Integrity,

@@ -52,10 +54,12 @@

Smith & Jones Architects

- + +
-
- +
+ +

Futuristic Designs

@@ -64,14 +68,15 @@

Futuristic Designs

facilisis sit ea. Eu timeam vidisse consectetuer sed. Duo etiam laboramus dissentiet in, nec no errem

- +

Recent Projects

- + +

THE VILLAS

@@ -95,7 +100,8 @@

THE VILLAS

- + +

OUTSKIRTS

@@ -118,7 +124,8 @@

OUTSKIRTS

- + +

THE BLOCKS

diff --git a/less/footer.less b/less/footer.less index 2511d993d5..d918dcc597 100644 --- a/less/footer.less +++ b/less/footer.less @@ -37,15 +37,29 @@ footer { font-weight: normal; } } + @media @mobile { + flex-direction: column; + div { + margin-bottom: 20px; + } + input { + width: 80%; + } + } } .cr { text-align: center; - margin-top: 20px; + margin-top: 30px; font-size: 1em !important; + @media @mobile { + margin-bottom: 20px; + } + } + @media @mobile { + .mobile-padding(); } - } \ No newline at end of file diff --git a/less/home.less b/less/home.less index cb63e7ef2a..86becb3dec 100644 --- a/less/home.less +++ b/less/home.less @@ -1,9 +1,11 @@ - - .home { .padding-indent(); + @media @mobile { + padding: 0; + } h2 { padding-bottom: 15px; + } .cta { position: relative; @@ -12,17 +14,22 @@ width: 100%; height: auto; } - .jumbo-text { .padding-indent(); position: absolute; font-weight: bold; font-size: 6.4em; line-height: 75px; - top: 325px; + top: 325px; h1 { color: #fff } + @media @mobile { + padding-left: 20px; + font-size: 4em; + line-height: 50px; + top: 120px; + } } } .services { @@ -30,26 +37,61 @@ align-items: center; .padding-indent(); margin-bottom: 70px; - button { - border: 2px solid #222222; - padding: 10px; - font-size: 1.6em; - margin-top: 15px; - } + .btn(); .services-img1 { margin-left: 35px; + @media @mobile { + margin-left: 0; + margin-bottom: 40px; + } + } + @media @mobile { + flex-direction: column-reverse; + padding: 0; + .mobile-padding(); + margin-bottom: 20px; + p { + margin-bottom: 20px; + } } + } + .services2 { + display: flex; + align-items: center; + .padding-indent(); + margin-bottom: 70px; + .btn(); .services-img2 { margin-right: 35px; + @media @mobile { + margin-right: 0; + margin-bottom: 40px; + } + } + @media @mobile { + flex-direction: column; + margin-bottom: 40px; + .mobile-padding(); + p { + margin-bottom: 20px; + } } } .recent-projects { .padding-indent(); h2:nth-child(1) { margin-bottom: 25px; + @media @mobile { + .mobile-padding(); + } } .project-container { margin-bottom: 90px; + @media @mobile { + display: flex; + flex-direction: column; + margin-bottom: 40px; + } } .project { position: relative; @@ -57,7 +99,6 @@ width: 100%; height: auto; } - .project-text { background-color: #D8D8D8; width: 280px; @@ -70,20 +111,34 @@ .proj-right { right: 0px; top: 190px; + @media @mobile { + right: 25px; + top: 210px; + } } .proj-left { left: 0px; top: 190px; + @media @mobile { + left: 25px; + top: 210px; + } } - } .project-paragraph { margin-top: 90px; padding-left: 190px; padding-right: 190px; - p{ + @media @mobile { + .mobile-padding(); + margin-top: 70px; + } + p { margin-bottom: 20px; } } + @media @mobile { + padding: 0; + } } } \ No newline at end of file diff --git a/less/index.less b/less/index.less index 8c58aabf57..a386ea9a8d 100644 --- a/less/index.less +++ b/less/index.less @@ -1,91 +1,187 @@ /*------------------------------------*\ 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; +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ -article,aside,details,figcaption,figure, -footer,header,hgroup,menu,nav,section{ - display:block; + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } -body{ - line-height:1; - font-family: 'Roboto', sans-serif; - font-size: 62.5%; + +body { + line-height: 1; + font-family: 'Roboto', sans-serif; + font-size: 62.5%; } -ol,ul{ - list-style:none; + +ol, +ul { + list-style: none; } -blockquote,q{ - quotes:none; + +blockquote, +q { + quotes: none; } -blockquote:before,blockquote:after, -q:before,q:after{ - content:’’; - content:none; + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; } -ins{ - text-decoration:none; + +ins { + text-decoration: none; } -del{ - text-decoration:line-through; + +del { + text-decoration: line-through; } -table{ - border-collapse:collapse; - border-spacing:0; +table { + border-collapse: collapse; + border-spacing: 0; } /* Your Code Goes Here */ + +@import 'variables'; @import 'mixins'; @import 'footer'; @import 'home'; @import 'navigation'; - .container { - margin: 0 auto; - width: 100%; - max-width: 1024px; - - - p { - line-height: 1.6; - - font-size: 1.6em; - } - - h2 { - font-weight: bold; - font-size: 2.8em; - color: #222222; - } - img{ + margin: 0 auto; width: 100%; - height: auto; - } - -} - + max-width: 1024px; + p { + line-height: 1.6; + font-size: 1.6em; + } + h2 { + font-weight: bold; + font-size: 2.8em; + color: #222222; + } + img { + width: 100%; + height: auto; + } + @media @mobile {} + .hidden-desktop { + display: none; + @media @mobile { + display: block; + } + } + .hidden-mobile { + display: block; + @media @mobile { + display: none; + } + } +} \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index eca00e1aa9..a368d565d0 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -5,4 +5,23 @@ .padding-indent() { padding-left: 84.5px; padding-right: 84.5px; +} + +.mobile-padding() { + padding-left: 20px; + padding-right: 20px; +} + +.btn() { + button { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; + @media @mobile { + width: 100%; + margin-bottom: 25px; + background-color: #fff + } + } } \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index 0f7d38db40..5906c41b8a 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -9,13 +9,15 @@ header { .padding-indent(); padding-top: 10px; padding-bottom: 10px; - margin-top: 10px; - #logo { + #logo { color: #fff; font-size: 2.4em; } a { text-decoration: none; } + @media @mobile { + .mobile-padding(); + } } } \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..a643773f02 --- /dev/null +++ b/less/variables.less @@ -0,0 +1 @@ +@mobile: ~"(max-width: 500px)"; \ No newline at end of file From 2162c77b48865379765c16e88b04f14544da4508 Mon Sep 17 00:00:00 2001 From: Dexter Lewis Date: Wed, 13 Feb 2019 22:03:40 -0500 Subject: [PATCH 05/17] Complete HTML contact page structure --- contact.html | 192 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 135 insertions(+), 57 deletions(-) diff --git a/contact.html b/contact.html index 868844fe14..bf942515a9 100644 --- a/contact.html +++ b/contact.html @@ -1,61 +1,139 @@ - - - Contact Us - - - - + + + + Contact Us + + + + - + +
+
+
+ +
+ +

Contact Us

+
+
+

Get In Touch

+
+
+
+ + +

We'll never share your email with anyone else

+
+
+ + +
+
+ + +
+
+ + I am a small + business
+ I am a + residential owner
+ I am a corporation +
+ +
+
+

Where We Work

+
+
+

New York

+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

New York

+

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

+

New York

+

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

+
+
+ -

Contact

- - - - - - \ No newline at end of file + + + From 79904dd547f4968656537d346e2de6a2f4ce746d Mon Sep 17 00:00:00 2001 From: Dexter Lewis Date: Wed, 13 Feb 2019 22:16:42 -0500 Subject: [PATCH 06/17] fixed issue with mixins --- contact.html | 2 +- css/index.css | 13 +++++++++++++ less/home.less | 9 ++++++--- less/mixins.less | 6 +++--- 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/contact.html b/contact.html index bf942515a9..f5a360b80f 100644 --- a/contact.html +++ b/contact.html @@ -65,7 +65,7 @@

Get In Touch

residential owner
I am a corporation - +

Where We Work

diff --git a/css/index.css b/css/index.css index 7e7754df7f..8b22e8293a 100644 --- a/css/index.css +++ b/css/index.css @@ -136,6 +136,19 @@ table { border-spacing: 0; } /* Your Code Goes Here */ +.btn { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; +} +@media (max-width: 500px) { + .btn { + width: 100%; + margin-bottom: 25px; + background-color: #fff; + } +} footer { color: #fff; background-color: #828282; diff --git a/less/home.less b/less/home.less index 86becb3dec..2df9ccbe9a 100644 --- a/less/home.less +++ b/less/home.less @@ -5,7 +5,6 @@ } h2 { padding-bottom: 15px; - } .cta { position: relative; @@ -37,7 +36,9 @@ align-items: center; .padding-indent(); margin-bottom: 70px; - .btn(); + button { + .btn(); + } .services-img1 { margin-left: 35px; @media @mobile { @@ -60,7 +61,9 @@ align-items: center; .padding-indent(); margin-bottom: 70px; - .btn(); + button { + .btn(); + } .services-img2 { margin-right: 35px; @media @mobile { diff --git a/less/mixins.less b/less/mixins.less index a368d565d0..a911bd8b6c 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -12,8 +12,8 @@ padding-right: 20px; } -.btn() { - button { +.btn { + border: 2px solid #222222; padding: 10px; font-size: 1.6em; @@ -23,5 +23,5 @@ margin-bottom: 25px; background-color: #fff } - } + } \ No newline at end of file From 9917321566622d8e540a3263173d33d71fb792b7 Mon Sep 17 00:00:00 2001 From: Dexter Lewis Date: Thu, 14 Feb 2019 18:05:22 -0500 Subject: [PATCH 07/17] Finished html structure for Services page --- css/index.css | 69 ++++++++++++++++++++++++++ less/index.less | 1 + less/services.less | 73 +++++++++++++++++++++++++++ services.html | 121 ++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 262 insertions(+), 2 deletions(-) create mode 100644 less/services.less diff --git a/css/index.css b/css/index.css index 8b22e8293a..9507d33a6f 100644 --- a/css/index.css +++ b/css/index.css @@ -413,6 +413,75 @@ footer .cr { padding: 0; } } +.services .cta { + position: relative; +} +.services .jumbo-text { + position: absolute; + top: 160px; + font-size: 6.4em; + font-weight: bold; +} +.services .jumbo-text h1 { + padding-left: 84.5px; + padding-right: 84.5px; + color: #fff; +} +.services .services-text { + padding-left: 84.5px; + padding-right: 84.5px; + margin-top: 40px; +} +.services .tabs-links { + display: flex; + justify-content: space-between; + padding-left: 84.5px; + padding-right: 84.5px; +} +.services .tabs-link { + width: 150px; + text-align: center; + border: 2px solid #000; + padding: 10px; + font-size: 1.6em; + font-weight: bold; + margin-top: 40px; + margin-bottom: 40px; +} +.services .tabs-link:hover { + background-color: #5E9FB9; + cursor: pointer; +} +.services .tabs-link-selected { + background-color: #5E9FB9; +} +.services .tabs-item { + display: none; + margin-bottom: 40px; +} +.services .tabs-item-selected { + display: block; +} +.services .tab-item-content { + display: flex; +} +.services .tab-item-description { + padding-left: 84.5px; + padding-right: 84.5px; + width: 50%; + padding-right: 20px; +} +.services .tab-item-description p { + margin-bottom: 20px; +} +.services .tab-item-description h3 { + font-size: 1.8em; + font-weight: bold; + margin-bottom: 20px; +} +.services .tab-item-image { + padding-right: 84.5px; +} header { width: 100%; max-width: 1024px; diff --git a/less/index.less b/less/index.less index a386ea9a8d..572b7f079b 100644 --- a/less/index.less +++ b/less/index.less @@ -153,6 +153,7 @@ table { @import 'mixins'; @import 'footer'; @import 'home'; +@import 'services'; @import 'navigation'; .container { margin: 0 auto; diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..2170a28a47 --- /dev/null +++ b/less/services.less @@ -0,0 +1,73 @@ +.services { + .cta { + position: relative; + + } + .jumbo-text { + position: absolute; + top: 160px; + font-size: 6.4em; + font-weight: bold; + h1 { + .padding-indent(); + color: #fff; + + } + } + .services-text { + .padding-indent(); + margin-top: 40px; + } + .tabs-links { + display: flex; + justify-content: space-between; + .padding-indent(); + + } + .tabs-link { + width: 150px; + text-align: center; + border: 2px solid #000; + padding: 10px; + font-size: 1.6em; + font-weight: bold; + margin-top: 40px; + margin-bottom: 40px; + } + .tabs-link:hover { + background-color: #5E9FB9; + cursor: pointer; + } + .tabs-link-selected { + background-color: #5E9FB9; + } + .tabs-item { + display: none; + margin-bottom: 40px; + } + + .tabs-item-selected { + display: block; + } + + + .tab-item-content{ + display: flex; + } + .tab-item-description { + .padding-indent(); + width: 50%; + padding-right: 20px; + p { + margin-bottom: 20px; + } + h3 { + font-size: 1.8em; + font-weight: bold; + margin-bottom: 20px; + } + } + .tab-item-image { + padding-right: 84.5px; + } +} \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..f6f75cefd3 100644 --- a/services.html +++ b/services.html @@ -12,12 +12,129 @@ -

Services

+
+ +
+ +
+ +
+ + +
+

Services

+
+
+
+

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

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

Pre-Construction

+

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

+

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

+
+
+ + +
+
+
+
+
+
+

Construction

+

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

+

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

+
+
+ + +
+
+
+
+
+
+

Design Build

+

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

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

+
+
+ + +
+
+
+
+
+
+

Sustainability

+

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

+

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

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

New York

+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

New York

+

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

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

Integrity,

-

Excellence,

-

Progress.

-
+ + +
+

Integrity,

+

Excellence,

+

Progress.

+
@@ -66,12 +68,28 @@

Smith & Jones Architects

- - + +
- - + +

Futuristic Designs

@@ -87,75 +105,93 @@

Futuristic Designs

Recent Projects

- - -

THE VILLAS

-
-
- -

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

-

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

-
- + + +

THE VILLAS

+
+
+

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

+

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

+
-
- - - -

OUTSKIRTS

-
-
- -

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

-
+
+ + +

OUTSKIRTS

+
+
+

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

+

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

+
-
- - - -

THE BLOCKS

-
-
- -

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

-

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

-
+
+ + +

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

+