From 6b95407d6fed4b180e8622c2c30a33be922e6859 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 11 Feb 2019 19:46:11 -0800 Subject: [PATCH 01/18] complete hompage html --- index.html | 179 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 100 insertions(+), 79 deletions(-) diff --git a/index.html b/index.html index 8a84a17304..8dc840a866 100644 --- a/index.html +++ b/index.html @@ -11,86 +11,107 @@ +
+ + +
+ Abstract Buildings +
Integrity, Excellence, Progress.
+
+ +
+
+ blueprint +
+

Smith & Jones Architects

+

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

+

Learn More

+
+
+
+ +
+

Futuristic Designs

+

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

+

Learn More

+
+
+
+ +

Recent Projects

+ +
+
+
+ Image of the Villas +
THE VILLAS
+
+

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

+

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

+
+ +
+
+ +
OUTSKIRTS
+
+

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

+

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

+
+ +
+
+ +
THE BLOCKS
+
+

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

+

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

+
+
+ +
+
+
+

Interested in starting a project?

+

Let’s talk:

+ +

We'll never share your email with anyone else.

+
+ +
+

New York

+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202 555 0144

+
+ +
+

Florida

+

Ocean Drive

+

Suite 201

+

Orlando, FL 22345

+

502 555 0144

+
+ +
+

California

+

Mountain Street

+

Suite 105

+

San Diego, CA 22345

+

702 555 0144

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

You got this! Good luck.

- - - - - - - \ No newline at end of file From 02e9e2c6346ab29425a9ed12e4586535bd62e264 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 11 Feb 2019 21:40:15 -0800 Subject: [PATCH 02/18] set up layout for nav, completed jumbotron and learn-more section less. --- css/index.css | 220 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 18 ++-- less/index.less | 102 +++++++++++++++++++++- 3 files changed, 331 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index e6b2b589c1..8d08eea9e8 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,219 @@ -/* 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 */ +body { + display: flex; + justify-content: center; + font-size: 62.5%; + font-family: 'Roboto', 'Arial', sans-serif; + box-sizing: border-box; +} +body .container { + width: 72%; +} +.navigation { + display: flex; + justify-content: space-around; + height: 50px; + background-color: #99A4AF; + font-size: 1.5rem; +} +.navigation h1 { + padding-top: 12px; + font-size: 1.4; + font-weight: 600; + color: #FFFFFF; +} +.jumbotron { + height: 550px; +} +.jumbotron img { + height: 550px; + width: 100%; +} +.jumbotron .jumbotron-text { + position: absolute; + bottom: 210px; + left: 275px; + font-size: 4rem; + font-weight: 600; + width: 300px; + color: #FFFFFF; +} +.jumbotron .jumbotron-text p { + margin: 10px; +} +.learn-more { + display: flex; + flex-direction: column; + align-items: center; +} +.learn-more .learn-more-card { + display: flex; + justify-content: space-between; + width: 83%; + height: 275px; + padding: 25px, 0; + margin: 50px 0; +} +.learn-more .learn-more-card .learn-more-content { + display: flex; + flex-direction: column; + margin: 45px 0; + width: 50%; +} +.learn-more .learn-more-card .learn-more-content h2 { + font-size: 1.5rem; + font-weight: 600; +} +.learn-more .learn-more-card .learn-more-content p { + font-size: 1rem; + line-height: 1.5rem; + margin-top: 25px; +} +.learn-more .learn-more-card .learn-more-content .button { + display: flex; + justify-content: center; + align-items: center; + border: 1px solid black; + height: 40px; + width: 135px; +} +h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 50px; +} diff --git a/index.html b/index.html index 8dc840a866..6b976a222d 100644 --- a/index.html +++ b/index.html @@ -19,23 +19,27 @@

S&J

Contact -
+
Abstract Buildings -
Integrity, Excellence, Progress.
+
+

Integrity,

+

Excellence,

+

Progress.

+
-
- blueprint -
+
+

Smith & Jones Architects

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

Learn More

+ blueprint
-
+
-
+

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

Learn More

diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..c62f04aa2c 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,104 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +body{ + display: flex; + justify-content: center; + font-size: 62.5%; + font-family: 'Roboto', 'Arial', sans-serif; + box-sizing: border-box; + + .container{ + width: 72%; + } +} + +.navigation{ + display: flex; + justify-content: space-around; + height: 50px; + background-color: #99A4AF; + font-size: 1.5rem; + + h1{ + padding-top: 12px; + font-size: 1.4; + font-weight: 600; + color: #FFFFFF; + } +} + +.jumbotron{ + height: 550px; + + img{ + height: 550px; + width: 100%; + } + + .jumbotron-text{ + position: absolute; + bottom: 210px; + left: 275px; + font-size: 4rem; //this is correct font size + font-weight: 600; + width: 300px; + color: #FFFFFF; + + p{ + margin: 10px; + } + } +} + +.learn-more{ + display:flex; + flex-direction: column; + align-items: center; + + + .learn-more-card{ + display: flex; + justify-content: space-between; + width: 83%; + height: 275px; + padding: 25px, 0; + margin: 50px 0; + + .learn-more-content { + display: flex; + flex-direction: column; + margin: 45px 0; + width: 50%; + + h2{ + font-size: 1.5rem; + font-weight: 600; + } + + p{ + font-size: 1rem; + line-height: 1.5rem; + margin-top: 25px; + } + + .button{ + display: flex; + justify-content: center; + align-items: center; + border: 1px solid black; + height: 40px; + width: 135px; + + + } + } + } +} + +h3{ + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 50px; +} \ No newline at end of file From fe845405e73f92ee728274194cc8a998a3020afe Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 11 Feb 2019 23:00:59 -0800 Subject: [PATCH 03/18] completed project section, used negative margine + absolute position for the text over the images. --- css/index.css | 64 +++++++++++++++++++++++++++++++++---- index.html | 20 ++++++------ less/index.less | 84 +++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 143 insertions(+), 25 deletions(-) diff --git a/css/index.css b/css/index.css index 8d08eea9e8..92531096e1 100644 --- a/css/index.css +++ b/css/index.css @@ -143,11 +143,15 @@ body { } body .container { width: 72%; + display: flex; + flex-direction: column; + align-items: center; } .navigation { display: flex; - justify-content: space-around; + justify-content: space-between; height: 50px; + width: 100%; background-color: #99A4AF; font-size: 1.5rem; } @@ -155,8 +159,18 @@ body .container { padding-top: 12px; font-size: 1.4; font-weight: 600; + margin-left: 80px; color: #FFFFFF; } +.navigation a { + display: none; +} +.navigation img { + margin-right: 85px; + padding-top: 12px; + height: 21px; + widows: 32px; +} .jumbotron { height: 550px; } @@ -165,10 +179,8 @@ body .container { width: 100%; } .jumbotron .jumbotron-text { - position: absolute; - bottom: 210px; - left: 275px; font-size: 4rem; + margin: -275px 0 0 50px; font-weight: 600; width: 300px; color: #FFFFFF; @@ -212,8 +224,48 @@ body .container { height: 40px; width: 135px; } -h3 { +.projects { + width: 83%; + display: flex; + flex-direction: column; +} +.projects h3 { font-size: 1.5rem; font-weight: 600; - margin-bottom: 50px; + margin: 50px 0 50px 0; +} +.projects .project-card { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 75px; +} +.projects .project-card div img { + width: 100%; + margin-bottom: 100px; +} +.projects .project-card div div { + border: 1px solid green; + display: flex; + position: absolute; + justify-self: flex-end; + justify-content: center; + letter-spacing: 0.5rem; + align-items: center; + font-size: 1.5rem; + margin: -160px 0 0px 38%; + width: 310px; + height: 95px; + border: 1px solid #FFFFFF; + background-color: #DCDCDC; +} +.projects .project-card .outskirts div { + margin: -160px 0 0px 0; +} +.projects .project-card p { + width: 52.5%; + font-size: 1.1rem; + letter-spacing: 0.01rem; + line-height: 1.5rem; + margin-bottom: 25px; } diff --git a/index.html b/index.html index 6b976a222d..9b91d9fb3c 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@

S&J

Home Services Contact + Menu-hamburger
@@ -47,11 +48,10 @@

Futuristic Designs

-

Recent Projects

-
-
-
+

Recent Projects

+
+
Image of the Villas
THE VILLAS
@@ -59,18 +59,18 @@

Recent Projects

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

-
-
- +
+
+ The outskirts
OUTSKIRTS

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

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

-
-
- +
+
+
THE BLOCKS

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

diff --git a/less/index.less b/less/index.less index c62f04aa2c..36c514ef2e 100644 --- a/less/index.less +++ b/less/index.less @@ -67,13 +67,17 @@ body{ .container{ width: 72%; + display: flex; + flex-direction: column; + align-items: center; } } .navigation{ display: flex; - justify-content: space-around; + justify-content: space-between; height: 50px; + width: 100%; background-color: #99A4AF; font-size: 1.5rem; @@ -81,8 +85,20 @@ body{ padding-top: 12px; font-size: 1.4; font-weight: 600; + margin-left: 80px; color: #FFFFFF; } + + a{ + display: none; + } + + img{ + margin-right: 85px; + padding-top: 12px; + height: 21px; + widows: 32px; + } } .jumbotron{ @@ -94,10 +110,8 @@ body{ } .jumbotron-text{ - position: absolute; - bottom: 210px; - left: 275px; font-size: 4rem; //this is correct font size + margin: -275px 0 0 50px; font-weight: 600; width: 300px; color: #FFFFFF; @@ -153,8 +167,60 @@ body{ } } -h3{ - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 50px; -} \ No newline at end of file +.projects{ + width: 83%; + display: flex; + flex-direction: column; + + h3{ + font-size: 1.5rem; + font-weight: 600; + margin: 50px 0 50px 0; + } + + .project-card{ + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 75px; + div{ + + img{ + width: 100%; + margin-bottom: 100px; + } + + div{ //this is for img text + border: 1px solid green; + display: flex; + position: absolute; + justify-self: flex-end; + justify-content: center; + letter-spacing: .5rem; + align-items: center; + font-size: 1.5rem; //this is correct font size + margin: -160px 0 0px 38%; + width: 310px; + height: 95px; + border: 1px solid #FFFFFF; + background-color: #DCDCDC; + } + + } + + .outskirts{ + div{ + margin: -160px 0 0px 0; + } + + } + + p{ + width: 52.5%; + font-size: 1.1rem; + letter-spacing: .01rem; + line-height: 1.5rem; + margin-bottom: 25px; + } + } +} From d3aeca729917ce83dfce0d268247e91ff871a046 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 12 Feb 2019 16:47:25 -0800 Subject: [PATCH 04/18] completed header less --- css/index.css | 40 +++++++++++++++++++++++++++++++++++++ index.html | 4 ++-- less/index.less | 52 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 92531096e1..d280e724f3 100644 --- a/css/index.css +++ b/css/index.css @@ -269,3 +269,43 @@ body .container { line-height: 1.5rem; margin-bottom: 25px; } +footer { + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #828282; + width: 100%; + height: 190px; + padding: 6% 0 0 0; + color: #FFFFFF; +} +footer .footer-content { + display: flex; + justify-content: space-around; + margin: 0 2% 0 2%; +} +footer .footer-content h4 { + font-size: 1.2rem; + font-weight: 600; +} +footer .footer-content p { + font-size: 0.75rem; +} +footer .footer-content .contact-form input { + margin: 5% 0 3% 0; + width: 100%; + height: 35%; + border-radius: 5px; + padding-left: 3%; + color: #828282; +} +footer .footer-content address p { + line-height: 1.5rem; + letter-spacing: 0.08rem; +} +footer small { + display: flex; + justify-content: center; + height: 10%; + font-size: 0.7rem; +} diff --git a/index.html b/index.html index 9b91d9fb3c..a4c95423c9 100644 --- a/index.html +++ b/index.html @@ -79,8 +79,8 @@

Recent Projects