From 714fbdd62c99a57cd0da390ef54cfd9ea382de88 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 31 Dec 2018 10:37:53 -0600 Subject: [PATCH 01/83] first push, working on header for Home page --- README.md | 12 ++--- css/index.css | 143 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 20 ++++++- 3 files changed, 167 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 17aecb1714..8429e5b0c0 100644 --- a/README.md +++ b/README.md @@ -12,12 +12,12 @@ You will use Trello to report your progress on the MVP and any extra features yo - 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/) -* [ ] Create a new public board called "S&J Architects - By Your Name" -* [ ] Create lists titled ```backlog```,```To Do```, ```In Progress```, and ```Done``` -* [ ] Fill in the ```To Do``` list with the MVP features listed below -* [ ] Fill in the ```backlog``` list with all the extra features listed below -* [ ] Share your board with the Project Manager that has been assigned to you. If you have not been assigned yet, reach out to your lead TA for guidance +* [x] Create a [Trello account](https://trello.com/) +* [x] Create a new public board called "S&J Architects - By Your Name" +* [x] Create lists titled ```backlog```,```To Do```, ```In Progress```, and ```Done``` +* [x] Fill in the ```To Do``` list with the MVP features listed below +* [x] Fill in the ```backlog``` list with all the extra features listed below +* [x] Share your board with the Project Manager that has been assigned to you. If you have not been assigned yet, reach out to your lead TA for guidance ## Assets Provided: * [Style guide:](/DesignFiles/style-guide.md) This file will help you identify font sizes, colors, and font families across the site. diff --git a/css/index.css b/css/index.css index e6b2b589c1..d64d8eadef 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,142 @@ -/* 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 */ +* { + box-sizing: border-box; +} +html { + font-family: Roboto, Arial, sans-serif; +} \ No newline at end of file diff --git a/index.html b/index.html index 8a84a17304..b58008c470 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,25 @@ +
+
+
+ jumbo +

Integrity,

-

You got this! Good luck.

+ + + + + +
+ + + + + +
+ +
\ No newline at end of file From de49013788f5532771ba4ff2f05cdff86763a9a5 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 31 Dec 2018 10:55:11 -0600 Subject: [PATCH 02/83] working on header image, nav-bar button and header --- css/index.css | 15 +++++++++++++++ index.html | 10 +++++----- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/css/index.css b/css/index.css index d64d8eadef..0278781cad 100644 --- a/css/index.css +++ b/css/index.css @@ -137,6 +137,21 @@ table { * { box-sizing: border-box; } + html { font-family: Roboto, Arial, sans-serif; +} + +.header-image { + max-width: 100%; + height: auto; + border: 3px solid yellow; +} + +.container { + max-width: 100%; + height: 100%; + padding: 5% 10%; + margin: 0% auto; + border: 2px solid blue; } \ No newline at end of file diff --git a/index.html b/index.html index b58008c470..b70cc970fd 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,10 @@
- jumbo -

Integrity,

- - + jumbo +
+

Integrity,

+ @@ -28,7 +28,7 @@

Integrity,

-
+ - - - - + + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..e06bab8370 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,119 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ + +/* Universal styles */ +* { + box-sizing: border-box; +} + +html { + font-family: Roboto, Arial, sans-serif; +} + +body { + background-color: black; + max-width: 100%; + height: auto; + display: flex; + flex-direction: column; + + +} + +.container { + max-width: 100%; + height: 100%; + padding: 0 10% 5% 10%; + margin: 0% auto; + border: 2px solid blue; + +} + +.container1 { +max-width: 100%; + +} + +/* Header content */ +.top-nav h1 { + border: 2px solid pink; + font-size: 2rem; + padding: 1% 0 1% 5%; + font-weight: bold; + background-color:#99a3ad; + Color: #FFFFFF; +} + +.header-image { + max-width: 100%; + height: auto; + + +} + + +.text-content { + width: 100%; + position: relative; + margin-top: -40%; + padding-top: 15.5%; +} + +.text-content p { + text-align: left; + color: white; + font-size: 4rem; + font-family: Roboto, Arial, sans-serif; + padding-left: 7%; + font-weight: bold; + padding-top: .05% + +} + +/* Main Content */ + +.container2 { + max-width: 100%; + height: auto; + background-color: #FFFFFF; + margin: 0% auto; + border: 3px solid green; + display: flex; + flex-direction: column; + +} + +.container2 h2 { + font-size: 1.5rem; + color: black; + font-weight: bold; + padding-top: 15%; + padding-bottom: 2%; + padding-left: 6%; + +} + +.container2 p { + font-size: 1rem; + padding-bottom: 3%; + width: 48%; + +} + +.container2 button { +width: 10%; + + +} + + +.container2 img { + + max-width: 48%; + + + +} + From 944de3491bd3db97ee2b61bc9383a5b66153307e Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 31 Dec 2018 17:44:35 -0600 Subject: [PATCH 07/83] tweaking the aligment of text and image --- css/index.css | 26 ++++++++++++++++---------- index.html | 41 +++++++++++++++++++++++++++++++++-------- less/index.less | 38 +++++++++++++++++++++----------------- 3 files changed, 70 insertions(+), 35 deletions(-) diff --git a/css/index.css b/css/index.css index eef257e91f..1d8e8d86d6 100644 --- a/css/index.css +++ b/css/index.css @@ -145,8 +145,6 @@ body { background-color: black; max-width: 100%; height: auto; - display: flex; - flex-direction: column; } .container { max-width: 100%; @@ -188,13 +186,12 @@ body { } /* Main Content */ .container2 { - max-width: 100%; - height: auto; + border-top: 2px solid brown; background-color: #FFFFFF; - margin: 0% auto; border: 3px solid green; display: flex; - flex-direction: column; + flex-wrap: wrap; + justify-content: space-between; } .container2 h2 { font-size: 1.5rem; @@ -202,16 +199,25 @@ body { font-weight: bold; padding-top: 15%; padding-bottom: 2%; - padding-left: 6%; + padding-left: 15%; } .container2 p { font-size: 1rem; - padding-bottom: 3%; - width: 48%; + width: 100%; + height: auto; + line-height: 32px; + border: 2px solid red; + padding-left: 15%; } .container2 button { width: 10%; } .container2 img { - max-width: 48%; + padding-top: 10%; + max-width: 50%; + height: auto; + border: 2px solid gold; +} +.main-content .paragraph { + width: 50%; } diff --git a/index.html b/index.html index 46bef504c9..c2bd91ec87 100644 --- a/index.html +++ b/index.html @@ -28,21 +28,46 @@

S&J

- + +
+
+
+

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

+ +
-
-

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

- + penandpad - penandpad +
+ + + + + + + + + + + + + + + + + + + + + +
- - - - - - + diff --git a/less/index.less b/less/index.less index f6cda4af95..a5ee1ae148 100644 --- a/less/index.less +++ b/less/index.less @@ -222,6 +222,8 @@ max-width: 100%; padding-bottom: 1%; padding-left: 7%; } + + .container4 img { padding: 5% 7% 5% 7%; } @@ -232,12 +234,13 @@ max-width: 100%; font-size: 2rem; padding-top: 4%; margin-left: 55%; - color: black; + color: #222222; background-color: #d8d8d8; text-align: justify; margin-top: 12.5%; line-height: 25px; + } .villasp { @@ -366,76 +369,78 @@ max-width: 100%; } + +footer { +display: flex; +flex-direction: row; + +} + .container7 { background-color: #828282; - width: 30%; + width: 50%; height: auto; display: flex; - flex-wrap: wrap; + flex-direction: column; color: white; - padding: 10% 8% 10% 8%; - align-content: center; line-height: 30px; + } +.container7 { + font-size: .75rem; +} - -.container footer { - display: flex; - flex-direction: row; - border: 2px solid gold; +.container8{ + width: 50%; + background-color: #828282; } -.container8 { +.container9{ + width: 50%; background-color: #828282; - width: 25%; - height: auto; - display: flex; - flex-wrap: wrap; - color: white; - padding: 10% 8% 10% 8%; - align-content: center; - + } -.container8 p { - line-height: 25px; + +.container10{ + width: 50%; + background-color: #828282; } -.container9 { - background-color: #828282; - width: 8%; + + + + + +footer { + width: 100%; height: auto; - display: flex; - flex-wrap: wrap; - color: white; - padding: 10% 15% 10% 8%; - align-content: center; - + + color: white; + + } -.container9 p { - line-height: 23px; +footer p{ + line-height: 40px; + padding-left: 30%; +} + +footer h3 { +padding: 0% 0% 2% 30%; } -.container10 { + + + +.copyright h6 { background-color: #828282; - width: 80%; - height: auto; - display: flex; - flex-wrap: wrap; color: white; - border: 2px solid blue; - align-content: center; - } - -.container10 p { - line-height: 30px; - - + padding-left: 38%; } \ No newline at end of file From e3bf76e6e26e1b79d7ab0a7504248bf5e10b31a7 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 1 Jan 2019 21:50:50 -0600 Subject: [PATCH 22/83] working on image sub headers using relative and absolute on divs --- css/index.css | 21 ++++++++--------- index.html | 60 ++++++++++++++++++++++++++----------------------- less/index.less | 28 +++++++++++++---------- 3 files changed, 59 insertions(+), 50 deletions(-) diff --git a/css/index.css b/css/index.css index f54ad78b62..181780745b 100644 --- a/css/index.css +++ b/css/index.css @@ -281,17 +281,18 @@ body { .container4 img { padding: 5% 7% 5% 7%; } -.container4 p { - width: 40%; - height: 40%; - font-size: 2rem; - padding-top: 4%; - margin-left: 55%; - color: #222222; +.villapic { + position: relative; + border: 2px solid gold; +} +.villa-content { + position: absolute; + margin-left: 60%; + margin-top: 31.5%; + width: 20%; + height: 8%; background-color: #d8d8d8; - text-align: justify; - margin-top: 12.5%; - line-height: 25px; + border: 2px solid purple; } .villasp { display: flex; diff --git a/index.html b/index.html index 29ed66d49e..b3d661205a 100644 --- a/index.html +++ b/index.html @@ -58,9 +58,12 @@

Futuristic Designs

Recent Projects

+
+ villas - villas -
+
+ +

T H E V I L L A S

@@ -114,35 +117,36 @@

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
2025550144

- -
- -
-

Florida

-

Ocean Drive
Suite 201
Orlando, FL 22345
5025550144

- -
-
-

California

-

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

- -
- - - -
+
+

New York

+

123 Lane
Suite 100
Albany, NY 12345
2025550144

-
copyright © 2018 Smith and Jones
+
-
+
+

Florida

+

Ocean Drive
Suite 201
Orlando, FL 22345
5025550144

+ +
+
+

California

+

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

+ +
+ + + + + +
+ +
copyright © 2018 Smith and Jones
+ +
@@ -151,7 +155,7 @@
copyright © 2018 Smith and Jones
- - +
diff --git a/less/index.less b/less/index.less index a5ee1ae148..a35768d013 100644 --- a/less/index.less +++ b/less/index.less @@ -228,21 +228,24 @@ max-width: 100%; padding: 5% 7% 5% 7%; } -.container4 p { - width: 40%; - height: 40%; - font-size: 2rem; - padding-top: 4%; - margin-left: 55%; - color: #222222; - background-color: #d8d8d8; - text-align: justify; - margin-top: 12.5%; - line-height: 25px; +.villapic { + position: relative; + border: 2px solid gold; +} +.villa-content { + position: absolute; + margin-left: 60%; + margin-top: 31.5%; + + width: 20%; + height: 8%; + background-color: #d8d8d8; + border: 2px solid purple; } + .villasp { display: flex; flex-direction: column; @@ -384,7 +387,8 @@ flex-direction: row; flex-direction: column; color: white; line-height: 30px; - + + } .container7 { From 621a4720a27ead949ad3cf8fb766b20b3bc4148b Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 1 Jan 2019 23:38:20 -0600 Subject: [PATCH 23/83] finished subheaders, now moving on to mobile design --- css/index.css | 72 ++++++++++++++++++++++----------- index.html | 20 +++++---- less/index.less | 105 ++++++++++++++++++++++++++++++++++++------------ 3 files changed, 140 insertions(+), 57 deletions(-) diff --git a/css/index.css b/css/index.css index 181780745b..4bc58baa0c 100644 --- a/css/index.css +++ b/css/index.css @@ -283,29 +283,36 @@ body { } .villapic { position: relative; - border: 2px solid gold; } .villa-content { position: absolute; - margin-left: 60%; - margin-top: 31.5%; - width: 20%; - height: 8%; + margin-left: 47%; + margin-top: 27%; + width: 28%; + height: 9%; background-color: #d8d8d8; - border: 2px solid purple; +} +.villa-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; } .villasp { display: flex; flex-direction: column; - align-content: center; padding-left: 5%; padding-bottom: 5%; + width: 100%; + padding: 5% 7% 5% 7%; } #villas { font-size: 1.125rem; color: black ; width: 100%; - background-color: #FFFFFF; + padding-left: 28%; + padding-top: 1%; + line-height: 25px; } .container5 img { padding: 5% 7% 5% 7%; @@ -313,26 +320,29 @@ body { .container5 { background-color: #FFFFFF; width: 100%; + height: auto; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; } -.container5 h2 { - width: 30%; - height: 40%; - font-size: 2rem; - color: black; +.skirtpic { + position: relative; +} +.skirt-content { + position: absolute; + margin-right: 47%; + margin-top: 19%; + width: 25%; + height: 9%; background-color: #d8d8d8; - margin-top: 15.5%; - margin-left: 6.5%; - padding: 2% 0 2% 7%; + margin-left: 5%; } -.outskirtsp { - display: flex; - flex-direction: column; - width: 100%; - height: auto; +.skirt-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; } #outskirts { font-size: 1.125rem; @@ -348,7 +358,6 @@ body { width: 100%; padding-left: 28%; padding-top: 3%; - padding-bottom: 2%; line-height: 25px; } .container6 { @@ -360,7 +369,24 @@ body { justify-content: space-between; } .container6 img { - padding: 5% 7% 5% 7%; + padding: 0% 7% 5% 7%; +} +.blockpic { + position: relative; +} +.block-content { + position: absolute; + margin-left: 47%; + margin-top: 15%; + width: 28%; + height: 9%; + background-color: #d8d8d8; +} +.block-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; } .container6 h2 { width: 40%; diff --git a/index.html b/index.html index b3d661205a..f6fb70fc44 100644 --- a/index.html +++ b/index.html @@ -60,11 +60,10 @@

Futuristic Designs

Recent Projects

villas -
-

T H E V I L L A S

+

THE VILLAS

The Villas bring to the table win-win survival strategies
to ensure proactive domination. At @@ -78,9 +77,12 @@

Recent Projects

- pool -
-

OUTSKIRTS

+
+ pool +
+ +
+

OUTSKIRTS

The Outskirts are amazing to the table win-win survival
strategies to ensure proactive @@ -92,9 +94,11 @@

OUTSKIRTS

- bock -
-

THE BLOCKS

+
+ bock +
+
+

THE BLOCKS

The Blocks are amazing to the table win-win survival
strategies to ensure proactive domination. diff --git a/less/index.less b/less/index.less index a35768d013..eb931d0cf8 100644 --- a/less/index.less +++ b/less/index.less @@ -230,28 +230,40 @@ max-width: 100%; .villapic { position: relative; - border: 2px solid gold; + } .villa-content { position: absolute; - margin-left: 60%; - margin-top: 31.5%; - - width: 20%; - height: 8%; + margin-left: 47%; + margin-top: 27%; + width: 28%; + height: 9%; background-color: #d8d8d8; - border: 2px solid purple; + + +} +.villa-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; + } .villasp { display: flex; flex-direction: column; - align-content: center; + padding-left: 5%; padding-bottom: 5%; + + width: 100%; + padding: 5% 7% 5% 7%; + + } @@ -259,42 +271,56 @@ max-width: 100%; font-size: 1.125rem; color: black ; width: 100%; - background-color:#FFFFFF; + padding-left: 28%; + padding-top: 1%; + line-height: 25px; } + .container5 img { padding: 5% 7% 5% 7%; } + .container5 { background-color: #FFFFFF; width: 100%; + height: auto; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; } -.container5 h2 { - width: 30%; - height: 40%; - font-size: 2rem; - color: black; - background-color: #d8d8d8; - margin-top: 15.5%; - margin-left: 6.5%; - padding: 2% 0 2% 7%; + +.skirtpic { + position: relative; } +.skirt-content { + position: absolute; + margin-right: 47%; + margin-top: 19%; + width: 25%; + height: 9%; + background-color: #d8d8d8; + margin-left: 5%; +} -.outskirtsp { - display: flex; - flex-direction: column; - width: 100%; - height: auto; + + +.skirt-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; + } + + + #outskirts { font-size: 1.125rem; color: black ; @@ -311,8 +337,7 @@ max-width: 100%; width: 100%; padding-left: 28%; padding-top: 3%; - padding-bottom: 2%; - line-height: 25px; + line-height: 25px; } .container6 { @@ -325,9 +350,37 @@ max-width: 100%; } .container6 img { - padding: 5% 7% 5% 7%; + padding: 0% 7% 5% 7%; } + +.blockpic { + position: relative; + +} + +.block-content { + position: absolute; + margin-left: 47%; + margin-top: 15%; + width: 28%; + height: 9%; + background-color: #d8d8d8; +} + + +.block-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; + +} + + + + + .container6 h2 { width: 40%; height: 40%; From bbfb623d940f42fc95f53be88e753134f6c9efe5 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 2 Jan 2019 11:08:02 -0600 Subject: [PATCH 24/83] working on mobile design --- css/index.css | 40 +++++++++++++++++++++++++--- index.html | 3 ++- less/index.less | 69 ++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 97 insertions(+), 15 deletions(-) diff --git a/css/index.css b/css/index.css index 4bc58baa0c..70513a8c4b 100644 --- a/css/index.css +++ b/css/index.css @@ -87,7 +87,7 @@ video { padding: 0; border: 0; outline: 0; - font-size: 100%; + font-size: 62.5%; font: inherit; vertical-align: baseline; } @@ -148,10 +148,9 @@ body { } .container { max-width: 100%; - height: 100%; + height: auto; padding: 0 10% 5% 10%; margin: 0% auto; - border: 2px solid blue; } .container1 { max-width: 100%; @@ -458,7 +457,7 @@ footer { color: white; } footer p { - line-height: 40px; + line-height: 24px; padding-left: 30%; } footer h3 { @@ -469,3 +468,36 @@ footer h3 { color: white; padding-left: 38%; } +@media screen and (max-width: 500px) { + .container { + background-color: lightpink; + width: 100%; + padding: 0% 0% 0% 0%; + } + .container1 { + padding: 0% 0% 0% 0%; + } + .top-nav { + width: 100%; + display: flex; + padding: 0% 0% 0% 0%; + } + .top-nav h1 { + display: flex; + flex-direction: column; + max-width: 100%; + border: 2px solid blue; + } + .text-content { + padding: 0% 0% 7% 0%; + } + .text-content p { + font-size: 2rem; + } + .main-content { + display: flex; + align-items: center; + flex-direction: column; + max-width: 100%; + } +} diff --git a/index.html b/index.html index f6fb70fc44..590acfb3b2 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,13 @@

S&J

jumbo +

Integrity,

Excellence,

Progress.

- +
diff --git a/less/index.less b/less/index.less index eb931d0cf8..402c104c3e 100644 --- a/less/index.less +++ b/less/index.less @@ -22,9 +22,11 @@ time,mark,audio,video{ padding:0; border:0; outline:0; - font-size:100%; - font:inherit; + font-size: 62.5%; + font: inherit; vertical-align:baseline; + + } /* HTML5 display-role reset for older browsers */ article,aside,details,figcaption,figure, @@ -79,10 +81,10 @@ body { .container { max-width: 100%; - height: 100%; + height: auto; padding: 0 10% 5% 10%; margin: 0% auto; - border: 2px solid blue; + } @@ -468,21 +470,16 @@ flex-direction: row; } - - - - footer { width: 100%; height: auto; color: white; - } footer p{ - line-height: 40px; + line-height: 24px; padding-left: 30%; } @@ -500,4 +497,56 @@ padding: 0% 0% 2% 30%; padding-left: 38%; } + + +@media screen and (max-width: 500px) { + .container { + background-color: lightpink; + width: 100%; + padding: 0% 0% 0% 0%; + } + + .container1 { + padding: 0% 0% 0% 0%; + } + + + + .top-nav { + width: 100%; + display: flex; + padding: 0% 0% 0% 0%; + } + + + .top-nav h1 { + display: flex; + flex-direction: column; + max-width: 100%; + border: 2px solid blue; + + } + + .text-content { + padding: 0% 0% 7% 0%; + } + + + .text-content p { + font-size: 2rem; + + + + + } + + .main-content { + display: flex; + align-items: center; + flex-direction: column; + max-width: 100%; + + } + +} \ No newline at end of file From 54d374dfd9f9ab6d225f862ed3fe32ac23a0aea6 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 02:13:41 -0600 Subject: [PATCH 25/83] started designs from scratch, making final adjustments and working on mobile media query --- css/index.css | 206 +++++----- index.html | 129 +++---- less/JasonProject.css | 75 ++++ less/Mock project week.css | 481 ++++++++++++++++++++++++ less/Untitled-1.css | 0 less/Untitled-1.html | 0 less/Untitled-1.less | 0 less/index.html | 50 +++ less/index.less | 746 ++++++++++++++++++------------------- less/myIndex.less | 75 ++++ less/test.css | 0 services.html | 100 ++++- 12 files changed, 1289 insertions(+), 573 deletions(-) create mode 100644 less/JasonProject.css create mode 100644 less/Mock project week.css create mode 100644 less/Untitled-1.css create mode 100644 less/Untitled-1.html create mode 100644 less/Untitled-1.less create mode 100644 less/index.html create mode 100644 less/myIndex.less create mode 100644 less/test.css diff --git a/css/index.css b/css/index.css index 70513a8c4b..0d4ab374e7 100644 --- a/css/index.css +++ b/css/index.css @@ -134,7 +134,6 @@ table { border-spacing: 0; } /* Your Code Goes Here */ -/* Universal styles */ * { box-sizing: border-box; } @@ -155,8 +154,7 @@ body { .container1 { max-width: 100%; } -/* Header content */ -.top-nav h1 { +.container h1 { border: 2px solid pink; font-size: 2rem; padding: 1% 0 1% 5%; @@ -164,13 +162,12 @@ body { background-color: #99a3ad; Color: #FFFFFF; } -.header-image { +.container1 img { max-width: 100%; height: auto; } .text-content { width: 100%; - position: relative; margin-top: -40%; padding-top: 15.5%; } @@ -183,78 +180,61 @@ body { font-weight: bold; padding-top: 0.05%; } -/* Main Content */ .container2 { + width: 100%; + height: auto; background-color: #FFFFFF; display: flex; - flex-wrap: wrap; - justify-content: space-between; + flex-direction: row-reverse; +} +.picwrapper { + width: 100%; + padding: 10% 5% 5% 2%; +} +.content-wrapper1 { + width: 100%; + letter-spacing: 20%; + line-height: 24px; } .container2 h2 { font-size: 1.5rem; color: black; font-weight: bold; - padding-top: 15%; + padding-top: 35%; padding-bottom: 2%; padding-left: 15%; } .container2 p { - font-size: 1rem; - width: 100%; - height: auto; - line-height: 25px; padding-left: 15%; } .container2 button { width: 28%; - height: 15%; + height: 10%; margin-left: 15%; margin-top: 7%; border: 1px solid black; } -.container2 img { - padding-top: 10%; - max-width: 50%; - height: auto; - padding-right: 10%; -} -.main-content .paragraph { - width: 50%; - margin-top: 10%; -} -.main-content .paragraph2 { - width: 50%; -} -.main-content .paragraph3 { - width: 80%; - padding-left: 30%; - padding-bottom: 10%; - font-size: 1.5rem; -} .container3 { + width: 100%; + height: auto; background-color: #FFFFFF; display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -.container3 img { - padding-top: 10%; - max-width: 45%; - height: auto; - padding-left: 7%; + flex-direction: row; } -.container3 p { - font-size: 1rem; - width: 100; - height: auto; - line-height: 25px; +.picwrapper2 { + width: 100%; + padding: 5% 5% 5% 5%; } .container3 h2 { font-size: 1.5rem; color: black; font-weight: bold; - padding-top: 30%; + padding-top: 35%; padding-bottom: 2%; + padding-right: 16%; +} +.container2 p { + padding-left: 15%; } .container3 button { width: 28%; @@ -280,9 +260,6 @@ body { .container4 img { padding: 5% 7% 5% 7%; } -.villapic { - position: relative; -} .villa-content { position: absolute; margin-left: 47%; @@ -291,6 +268,9 @@ body { height: 9%; background-color: #d8d8d8; } +.villapic { + position: relative; +} .villa-content p { text-align: center; padding: 7.5%; @@ -423,81 +403,93 @@ body { line-height: 25px; padding-bottom: 2%; } -footer { - display: flex; - flex-direction: row; -} -.container7 { +.bottom-wrapper { background-color: #828282; - width: 50%; + width: 100%; height: auto; display: flex; - flex-direction: column; + flex-direction: row; color: white; line-height: 30px; } -.container7 { - font-size: 0.75rem; -} .container8 { - width: 50%; - background-color: #828282; + padding-left: 7%; } .container9 { - width: 50%; - background-color: #828282; + padding-left: 7%; } .container10 { - width: 50%; + padding-left: 7%; +} +.copyright h6 { background-color: #828282; + color: white; + padding-left: 38%; + padding-top: 3%; + padding-bottom: 3%; +} +.container11 { + max-width: 100%; + padding: 0% 7% 0% 8%; +} +.container11 h1 { + font-size: 2rem; + padding: 1% 0 1% 5%; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; +} +.container11 p { + padding-top: 16%; +} +.container13 { + max-width: 100%; + background-color: white; + line-height: 24px; + padding: 0% 10% 5% 10%; } -footer { +.button-wrapper { width: 100%; + padding-top: 3%; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.button-wrapper button { + width: 20%; height: auto; - color: white; + font-size: 1rem; + font-weight: bold; + padding: 2% 0%; } -footer p { +.container14 { + max-width: 100%; + background-color: white; line-height: 24px; - padding-left: 30%; + display: flex; + flex-direction: row; } -footer h3 { - padding: 0% 0% 2% 30%; +.container14 h2 { + font-size: 1.75rem; + font-weight: bold; + border: 2px solid gold; } -.copyright h6 { - background-color: #828282; - color: white; - padding-left: 38%; +.text-content2 { + width: 40%; + margin-left: 10%; +} +.construction-pic { + width: 43%; + margin-left: 10%; + margin-right: 10%; + margin-top: 7%; } -@media screen and (max-width: 500px) { - .container { - background-color: lightpink; - width: 100%; - padding: 0% 0% 0% 0%; - } - .container1 { - padding: 0% 0% 0% 0%; - } - .top-nav { - width: 100%; - display: flex; - padding: 0% 0% 0% 0%; - } - .top-nav h1 { - display: flex; - flex-direction: column; - max-width: 100%; - border: 2px solid blue; - } - .text-content { - padding: 0% 0% 7% 0%; - } - .text-content p { - font-size: 2rem; - } - .main-content { - display: flex; - align-items: center; - flex-direction: column; - max-width: 100%; - } +.container16 { + padding-left: 7%; +} +.container17 { + padding-left: 7%; +} +.container18 { + padding-left: 7%; } diff --git a/index.html b/index.html index 590acfb3b2..2bfac66f3a 100644 --- a/index.html +++ b/index.html @@ -13,56 +13,54 @@
-
-
-

S&J

-
- jumbo - -
-

Integrity,

-

Excellence,

-

Progress.

-
- -
-
-
+
-
+
+

S&J

+ jumbo + +
+

Integrity,

+

Excellence,

+

Progress.

+
+
+
-
-

Smith & Jones Architects

+
+ penandpad + +
+
+

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

- - -
- - penandpad - +
+ +
- skypic -
+
+ skypic +
+

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

villas
- +

THE VILLAS

@@ -73,15 +71,15 @@

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.

- +
- +
-
+
pool
- +

OUTSKIRTS

@@ -95,7 +93,7 @@

Recent Projects

-
+
bock
@@ -111,35 +109,40 @@

Recent Projects

- -
-
+
-

Interested in starting a project?
Let's talk:

-
- -
-

We'll never share your email with anyone else.

-
+ +
+
+
+ +

Interested in starting a project?
Let's talk:

+
+ +
+

We'll never share your email with anyone else.

+
+
+ +
+ + +
+

New York

+

123 Lane
Suite 100
Albany, NY 12345
2025550144

+ +
+ +
+

Florida

+

Ocean Drive
Suite 201
Orlando, FL 22345
5025550144

+ +
+
+

California

+

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

+
- -
- - -
-

New York

-

123 Lane
Suite 100
Albany, NY 12345
2025550144

- -
- -
-

Florida

-

Ocean Drive
Suite 201
Orlando, FL 22345
5025550144

- -
-
-

California

-

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

diff --git a/less/JasonProject.css b/less/JasonProject.css new file mode 100644 index 0000000000..caf88351ae --- /dev/null +++ b/less/JasonProject.css @@ -0,0 +1,75 @@ +/*------------------------------------*\ +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: 62.5%; + 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; +} + +* { + box-sizing: border-box; + } + + html { + font-family: Roboto, Arial, sans-serif; + } + + body { + background-color: black; + max-width: 100%; + height: auto; + + } \ No newline at end of file diff --git a/less/Mock project week.css b/less/Mock project week.css new file mode 100644 index 0000000000..26a12fcd93 --- /dev/null +++ b/less/Mock project week.css @@ -0,0 +1,481 @@ +/*------------------------------------*\ +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: 62.5%; + 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 */ +/* Universal styles */ +* { + box-sizing: border-box; +} +html { + font-family: Roboto, Arial, sans-serif; +} +body { + background-color: black; + max-width: 100%; + height: auto; +} +.container { + max-width: 100%; + height: auto; + padding: 0 10% 5% 10%; + margin: 0% auto; +} +.container1 { + max-width: 100%; +} +/* Header content */ +.top-nav h1 { + border: 2px solid pink; + font-size: 2rem; + padding: 1% 0 1% 5%; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; +} +.header-image { + max-width: 100%; + height: auto; +} +.text-content { + width: 100%; + position: relative; + margin-top: -40%; + padding-top: 15.5%; +} +.text-content p { + text-align: left; + color: white; + font-size: 4rem; + font-family: Roboto, Arial, sans-serif; + padding-left: 7%; + font-weight: bold; + padding-top: 0.05%; +} +/* Main Content */ +.container2 { + background-color: #FFFFFF; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.container2 h2 { + font-size: 1.5rem; + color: black; + font-weight: bold; + padding-top: 15%; + padding-bottom: 2%; + padding-left: 15%; +} +.container2 p { + font-size: 1rem; + width: 100%; + height: auto; + line-height: 25px; + padding-left: 15%; +} +.container2 button { + width: 28%; + height: 15%; + margin-left: 15%; + margin-top: 7%; + border: 1px solid black; +} +.container11 img { + padding-top: 10%; + max-width: 50%; + height: auto; + padding-left: 10%; + border: solid gold; + +} + + + +.main-content .paragraph { + width: 50%; + margin-top: 10%; +} +.main-content .paragraph2 { + width: 50%; +} +.main-content .paragraph3 { + width: 80%; + padding-left: 30%; + padding-bottom: 10%; + font-size: 1.5rem; +} +.container3 { + background-color: #FFFFFF; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.container3 img { + padding-top: 10%; + max-width: 45%; + height: auto; + padding-left: 7%; +} +.container3 p { + font-size: 1rem; + width: 100; + height: auto; + line-height: 25px; +} +.container3 h2 { + font-size: 1.5rem; + color: black; + font-weight: bold; + padding-top: 30%; + padding-bottom: 2%; +} +.container3 button { + width: 28%; + height: 12%; + margin-top: 7%; + border: 1px solid black; +} +.container4 { + background-color: #FFFFFF; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; +} +.container4 h2 { + font-size: 1.5rem; + color: black; + font-weight: bold; + padding-top: 8%; + padding-bottom: 1%; + padding-left: 7%; +} +.container4 img { + padding: 5% 7% 5% 7%; +} +.villapic { + position: relative; +} +.villa-content { + position: absolute; + margin-left: 47%; + margin-top: 27%; + width: 28%; + height: 9%; + background-color: #d8d8d8; +} +.villa-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; +} +.villasp { + display: flex; + flex-direction: column; + padding-left: 5%; + padding-bottom: 5%; + width: 100%; + padding: 5% 7% 5% 7%; +} +#villas { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 1%; + line-height: 25px; +} +.container5 img { + padding: 5% 7% 5% 7%; +} +.container5 { + background-color: #FFFFFF; + width: 100%; + height: auto; + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: space-between; +} +.skirtpic { + position: relative; +} +.skirt-content { + position: absolute; + margin-right: 47%; + margin-top: 19%; + width: 25%; + height: 9%; + background-color: #d8d8d8; + margin-left: 5%; +} +.skirt-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; +} +#outskirts { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 7%; + line-height: 25px; +} +#outskirts2 { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 3%; + line-height: 25px; +} +.container6 { + background-color: #FFFFFF; + width: 100%; + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: space-between; +} +.container6 img { + padding: 0% 7% 5% 7%; +} +.blockpic { + position: relative; +} +.block-content { + position: absolute; + margin-left: 47%; + margin-top: 15%; + width: 28%; + height: 9%; + background-color: #d8d8d8; +} +.block-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; +} +.container6 h2 { + width: 40%; + height: 40%; + font-size: 2rem; + padding-top: 4%; + padding-left: 8%; + margin-left: 53%; + padding-bottom: 4%; + color: black; + background-color: #d8d8d8; + text-align: justify; + margin-top: 12.5%; +} +.blocksp { + display: flex; + flex-direction: column; + width: 100%; + height: auto; +} +#blocks { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 7%; + line-height: 25px; +} +#blocks2 { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 7%; + line-height: 25px; + padding-bottom: 2%; +} +footer { + display: flex; + flex-direction: row; +} +.container7 { + background-color: #828282; + width: 50%; + height: auto; + display: flex; + flex-direction: column; + color: white; + line-height: 30px; +} +.container7 { + font-size: 0.75rem; +} +.container8 { + width: 50%; + background-color: #828282; +} +.container9 { + width: 50%; + background-color: #828282; +} +.container10 { + width: 50%; + background-color: #828282; +} +footer { + width: 100%; + height: auto; + color: white; +} +footer p { + line-height: 24px; + padding-left: 30%; +} +footer h3 { + padding: 0% 0% 2% 30%; +} +.copyright h6 { + background-color: #828282; + color: white; + padding-left: 38%; +} +@media screen and (max-width: 500px) { + .container { + background-color: lightpink; + max-width: 100%; + padding: 0% 0% 0% 0%; + } diff --git a/less/Untitled-1.css b/less/Untitled-1.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/Untitled-1.html b/less/Untitled-1.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/Untitled-1.less b/less/Untitled-1.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/index.html b/less/index.html new file mode 100644 index 0000000000..ebf5be851e --- /dev/null +++ b/less/index.html @@ -0,0 +1,50 @@ + + + + + + Home + + + + + + +
+
+

S&J

+ jumbo + + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 402c104c3e..b45c835d56 100644 --- a/less/index.less +++ b/less/index.less @@ -61,7 +61,6 @@ table{ /* Your Code Goes Here */ -/* Universal styles */ * { box-sizing: border-box; } @@ -74,8 +73,6 @@ body { background-color: black; max-width: 100%; height: auto; - - } @@ -85,468 +82,447 @@ body { padding: 0 10% 5% 10%; margin: 0% auto; - } .container1 { -max-width: 100%; - -} - -/* Header content */ -.top-nav h1 { - border: 2px solid pink; - font-size: 2rem; - padding: 1% 0 1% 5%; - font-weight: bold; - background-color:#99a3ad; - Color: #FFFFFF; -} - -.header-image { max-width: 100%; - height: auto; - - -} - + } -.text-content { - width: 100%; - position: relative; - margin-top: -40%; - padding-top: 15.5%; -} + .container h1 { + border: 2px solid pink; + font-size: 2rem; + padding: 1% 0 1% 5%; + font-weight: bold; + background-color:#99a3ad; + Color: #FFFFFF; + } -.text-content p { - text-align: left; - color: white; - font-size: 4rem; - font-family: Roboto, Arial, sans-serif; - padding-left: 7%; - font-weight: bold; - padding-top: .05% + .container1 img { + max-width: 100%; + height: auto; + + } -} + .text-content { + width: 100%; + margin-top: -40%; + padding-top: 15.5%; + } -/* Main Content */ + .text-content p { + text-align: left; + color: white; + font-size: 4rem; + font-family: Roboto, Arial, sans-serif; + padding-left: 7%; + font-weight: bold; + padding-top: .05% + + } -.container2 { - background-color: #FFFFFF; - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -.container2 h2 { - font-size: 1.5rem; - color: black; - font-weight: bold; - padding-top: 15%; - padding-bottom: 2%; - padding-left: 15%; -} -.container2 p { - font-size: 1rem; - width: 100%; - height: auto; - line-height: 25px; - padding-left: 15%; -} -.container2 button { - width: 28%; - height: 15%; - margin-left: 15%; - margin-top: 7%; - border: 1px solid black; -} -.container2 img { - padding-top: 10%; - max-width: 50%; - height: auto; - padding-right: 10%; -} -.main-content .paragraph { - width: 50%; - margin-top: 10%; -} -.main-content .paragraph2 { - width: 50%; -} -.main-content .paragraph3 { - width: 80%; - padding-left: 30%; - padding-bottom: 10%; - font-size: 1.5rem; -} -.container3 { - background-color: #FFFFFF; - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -.container3 img { - padding-top: 10%; - max-width: 45%; - height: auto; - padding-left: 7%; -} -.container3 p { - font-size: 1rem; - width: 100; - height: auto; - line-height: 25px; -} -.container3 h2 { - font-size: 1.5rem; - color: black; - font-weight: bold; - padding-top: 30%; - padding-bottom: 2%; -} -.container3 button { - width: 28%; - height: 12%; - margin-top: 7%; - border: 1px solid black; -} -.container4 { - background-color: #FFFFFF; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - width: 100%; -} -.container4 h2 { - font-size: 1.5rem; - color: black; - font-weight: bold; - padding-top: 8%; - padding-bottom: 1%; - padding-left: 7%; -} + .container2 { + width: 100%; + height: auto; + background-color: #FFFFFF; + display: flex; + flex-direction: row-reverse; + + + } + .picwrapper { + width: 100%; + padding: 10% 5% 5% 2%; + + } -.container4 img { - padding: 5% 7% 5% 7%; -} + .content-wrapper1 { + width: 100%; + letter-spacing: 20%; + line-height: 24px; -.villapic { - position: relative; -} + } -.villa-content { - position: absolute; - margin-left: 47%; - margin-top: 27%; - width: 28%; - height: 9%; - background-color: #d8d8d8; - -} + .container2 h2 { + font-size: 1.5rem; + color: black; + font-weight: bold; + padding-top: 35%; + padding-bottom: 2%; + padding-left: 15%; + } -.villa-content p { - text-align: center; - padding: 7.5%; - font-size: 1.5rem; - letter-spacing: 7px; + .container2 p { + padding-left: 15%; + + } -} - + .container2 button { + width: 28%; + height: 10%; + margin-left: 15%; + margin-top: 7%; + border: 1px solid black; + } -.villasp { - display: flex; - flex-direction: column; - - padding-left: 5%; - padding-bottom: 5%; + .container3 { + width: 100%; + height: auto; + background-color: #FFFFFF; + display: flex; + flex-direction: row; + + } - width: 100%; - padding: 5% 7% 5% 7%; - + .picwrapper2 { + width: 100%; + padding: 5% 5% 5% 5%; + + } + + .container3 h2 { + font-size: 1.5rem; + color: black; + font-weight: bold; + padding-top: 35%; + padding-bottom: 2%; + padding-right: 16%; + } -} + .container2 p { + padding-left: 15%; + + } -#villas { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 1%; - line-height: 25px; -} + .container3 button { + width: 28%; + height: 12%; + margin-top: 7%; + border: 1px solid black; + } + .container4 { + background-color: #FFFFFF; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + } -.container5 img { - padding: 5% 7% 5% 7%; -} + .container4 h2 { + font-size: 1.5rem; + color: black; + font-weight: bold; + padding-top: 8%; + padding-bottom: 1%; + padding-left: 7%; + } + .container4 img { + padding: 5% 7% 5% 7%; + } -.container5 { - background-color: #FFFFFF; - width: 100%; - height: auto; - display: flex; - flex-wrap: wrap; - flex-direction: column; - justify-content: space-between; -} - + .villa-content { + position: absolute; + margin-left: 47%; + margin-top: 27%; + width: 28%; + height: 9%; + background-color: #d8d8d8; + } -.skirtpic { - position: relative; - -} + .villapic { + position: relative; + + } -.skirt-content { - position: absolute; - margin-right: 47%; - margin-top: 19%; - width: 25%; - height: 9%; - background-color: #d8d8d8; - margin-left: 5%; -} + .villa-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; + + } + .villasp { + display: flex; + flex-direction: column; + padding-left: 5%; + padding-bottom: 5%; + width: 100%; + padding: 5% 7% 5% 7%; + + } + #villas { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 1%; + line-height: 25px; + } -.skirt-content p { - text-align: center; - padding: 7.5%; - font-size: 1.5rem; - letter-spacing: 7px; + .container5 img { + padding: 5% 7% 5% 7%; + } -} - - - - -#outskirts { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 7%; - line-height: 25px; -} - -#outskirts2 { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 3%; - line-height: 25px; -} - -.container6 { - background-color: #FFFFFF; - width: 100%; - display: flex; - flex-wrap: wrap; - flex-direction: column; - justify-content: space-between; -} - -.container6 img { - padding: 0% 7% 5% 7%; -} - - -.blockpic { - position: relative; + .container5 { + background-color: #FFFFFF; + width: 100%; + height: auto; + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: space-between; + } + + .skirtpic { + position: relative; + + } -} - -.block-content { - position: absolute; - margin-left: 47%; - margin-top: 15%; - width: 28%; - height: 9%; - background-color: #d8d8d8; -} - - -.block-content p { - text-align: center; - padding: 7.5%; - font-size: 1.5rem; - letter-spacing: 7px; + .skirt-content { + position: absolute; + margin-right: 47%; + margin-top: 19%; + width: 25%; + height: 9%; + background-color: #d8d8d8; + margin-left: 5%; + } + + .skirt-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; + + } -} - - - - - -.container6 h2 { - width: 40%; - height: 40%; - font-size: 2rem; - padding-top: 4%; - padding-left: 8%; - margin-left: 53%; - padding-bottom: 4%; - color: black; - background-color: #d8d8d8; - text-align: justify; - margin-top: 12.5%; + #outskirts { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 7%; + line-height: 25px; + + } -} - -.blocksp { - display: flex; - flex-direction: column; - width: 100%; - height: auto; -} - - -#blocks { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 7%; - line-height: 25px; + #outskirts2 { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 3%; + line-height: 25px; + } -} - -#blocks2 { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 7%; - line-height: 25px; - padding-bottom:2%; + .container6 { + background-color: #FFFFFF; + width: 100%; + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: space-between; + } -} - - -footer { -display: flex; -flex-direction: row; - -} + .container6 img { + padding: 0% 7% 5% 7%; + } + + + .blockpic { + position: relative; + + } + + .block-content { + position: absolute; + margin-left: 47%; + margin-top: 15%; + width: 28%; + height: 9%; + background-color: #d8d8d8; + } + + + .block-content p { + text-align: center; + padding: 7.5%; + font-size: 1.5rem; + letter-spacing: 7px; + + } + + .container6 h2 { + width: 40%; + height: 40%; + font-size: 2rem; + padding-top: 4%; + padding-left: 8%; + margin-left: 53%; + padding-bottom: 4%; + color: black; + background-color: #d8d8d8; + text-align: justify; + margin-top: 12.5%; + + } + + .blocksp { + display: flex; + flex-direction: column; + width: 100%; + height: auto; + } + + + #blocks { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 7%; + line-height: 25px; + + } + + #blocks2 { + font-size: 1.125rem; + color: black ; + width: 100%; + padding-left: 28%; + padding-top: 7%; + line-height: 25px; + padding-bottom:2%; + + } -.container7 { +.bottom-wrapper { background-color: #828282; - width: 50%; + width: 100%; height: auto; display: flex; - flex-direction: column; + flex-direction: row; color: white; line-height: 30px; - } -.container7 { - font-size: .75rem; +.container8 { + padding-left: 7%; } -.container8{ - width: 50%; - background-color: #828282; +.container9 { + padding-left: 7%; +} +.container10 { + padding-left: 7%; } -.container9{ - width: 50%; +.copyright h6 { background-color: #828282; + color: white; + padding-left: 38%; + padding-top: 3%; + padding-bottom: 3%; } +// SERVICES -.container10{ - width: 50%; - background-color: #828282; - +.container11 { + max-width: 100%; + + padding: 0% 7% 0% 8%; } +.container11 h1 { + font-size: 2rem; + padding: 1% 0 1% 5%; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; +} -footer { - width: 100%; - height: auto; - - color: white; +.container11 p { + padding-top: 16%; } -footer p{ +.container13 { + max-width: 100%; + background-color: white; line-height: 24px; - padding-left: 30%; + padding: 0% 10% 5% 10%; } -footer h3 { -padding: 0% 0% 2% 30%; +.button-wrapper { + width: 100%; + padding-top: 3%; + display: flex; + flex-direction: row; + justify-content: space-between; } - - -.copyright h6 { - background-color: #828282; - color: white; - padding-left: 38%; +.button-wrapper button { + width: 20%; + height: auto; + font-size: 1rem; + font-weight: bold; + padding: 2% 0%; + } +.container14 { + max-width: 100%; + background-color: white; + line-height: 24px; + display: flex; + flex-direction: row; + + +} -@media screen and (max-width: 500px) { - .container { - background-color: lightpink; - width: 100%; - padding: 0% 0% 0% 0%; - } +.container14 h2 { + font-size: 1.75rem; + font-weight: bold; + border: 2px solid gold; + } - .container1 { - padding: 0% 0% 0% 0%; - } +.text-content2 { + width: 40%; + margin-left: 10%; - - .top-nav { - width: 100%; - display: flex; - padding: 0% 0% 0% 0%; - } - - - .top-nav h1 { - display: flex; - flex-direction: column; - max-width: 100%; - border: 2px solid blue; - - } +} - .text-content { - padding: 0% 0% 7% 0%; - } - +.construction-pic { + width: 43%; + margin-left: 10%; + margin-right: 10%; + margin-top: 7%; - .text-content p { - font-size: 2rem; - - - +} - } +.container16 { + padding-left: 7%; +} - .main-content { - display: flex; - align-items: center; - flex-direction: column; - max-width: 100%; - - } +.container17 { + padding-left: 7%; +} +.container18 { + padding-left: 7%; } - \ No newline at end of file diff --git a/less/myIndex.less b/less/myIndex.less new file mode 100644 index 0000000000..caf88351ae --- /dev/null +++ b/less/myIndex.less @@ -0,0 +1,75 @@ +/*------------------------------------*\ +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: 62.5%; + 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; +} + +* { + box-sizing: border-box; + } + + html { + font-family: Roboto, Arial, sans-serif; + } + + body { + background-color: black; + max-width: 100%; + height: auto; + + } \ No newline at end of file diff --git a/less/test.css b/less/test.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/services.html b/services.html index fb5a79e18a..f1a7406500 100644 --- a/services.html +++ b/services.html @@ -11,28 +11,92 @@ +
+
+

S&J

+ jumbo +
+

Services

+ +
+
+
+

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

+
+ + +
+
-

Services

+
+
+

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 - +
- - - + + + + + + + +
\ No newline at end of file From cd1f23c14c15e16f29a1e46cf125e799359503fd Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 02:44:44 -0600 Subject: [PATCH 26/83] working on mobile design --- css/index.css | 25 ++++++++++++++++++++++++- less/index.less | 7 ++++++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 0d4ab374e7..9bfcc7782c 100644 --- a/css/index.css +++ b/css/index.css @@ -329,7 +329,7 @@ body { width: 100%; padding-left: 28%; padding-top: 7%; - line-height: 25px; + line-height: 24px; } #outskirts2 { font-size: 1.125rem; @@ -493,3 +493,26 @@ body { .container18 { padding-left: 7%; } +@media screen and (max-width: 500px) { + .container { + background-color: lightpink; + + } + .container .top-wrapper { + width: 100%; + display: flex; + flex-direction: column; + + } + + .bottom-wrapper { + width: 100%; + display: flex; + flex-direction: column; + } + + .bottom-wrapper { + font-weight: 200; + border: 2px solid gold; + } + diff --git a/less/index.less b/less/index.less index b45c835d56..af215921d9 100644 --- a/less/index.less +++ b/less/index.less @@ -310,7 +310,7 @@ body { width: 100%; padding-left: 28%; padding-top: 7%; - line-height: 25px; + line-height: 24px; } @@ -498,6 +498,7 @@ body { font-size: 1.75rem; font-weight: bold; border: 2px solid gold; + } .text-content2 { @@ -526,3 +527,7 @@ body { .container18 { padding-left: 7%; } + + + + From 6257f370f36a860c13ad52d4316f69b117efbe4f Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 05:03:48 -0600 Subject: [PATCH 27/83] halfway done with mobile design --- css/index.css | 97 +++++++++++++++++++++++++++--- index.html | 159 ++++++++++++++++++++++++++------------------------ 2 files changed, 171 insertions(+), 85 deletions(-) diff --git a/css/index.css b/css/index.css index 9bfcc7782c..c26f534b55 100644 --- a/css/index.css +++ b/css/index.css @@ -493,26 +493,107 @@ body { .container18 { padding-left: 7%; } + + + @media screen and (max-width: 500px) { .container { background-color: lightpink; - + padding: 0 0 0 0; } - .container .top-wrapper { + + .container1 { + padding: 0 0 0 0; + } + + .container1 .text-content p{ + font-size: 2rem; + + } + .container2 { width: 100%; display: flex; - flex-direction: column; - + flex-direction: column; + padding: 0 0 0 0; } - .bottom-wrapper { + .container2 .content-wrapper1 h2 { width: 100%; + padding: 0 0 4% 0; display: flex; - flex-direction: column; + flex-direction: column; + + align-items: center; + font-size: 2rem; } + + .container2 .content-wrapper1 p { + width: 100%; + padding: 0 0 0 4%; + display: flex; + flex-direction: column; + align-items: center; + font-size: 1rem; + } + + .container2 button { + width: 80%; + height:30%; + font-size: 1rem; + + border: 2px solid gold; + padding: 5%; + + + } + + .container3 { + width: 100%; + display: flex; + flex-direction: column; + padding: 0 0 0 0; + } + + .container3 .content-wrapper1 h2 { + width: 100%; + padding: 0 0 4% 0; + display: flex; + flex-direction: column; + + align-items: center; + font-size: 2rem; + } + + .container3 .content-wrapper1 p { + width: 100%; + padding: 0 0 0 4%; + display: flex; + flex-direction: column; + align-items: center; + font-size: 1rem; + } + + .container3 button { + width: 80%; + height:30%; + font-size: 1rem; + + border: 2px solid gold; + padding: 5%; + + + } + + - .bottom-wrapper { + + .bottom-wrapper { + width: 100%; + display: flex; + flex-direction: column; font-weight: 200; - border: 2px solid gold; + } + + diff --git a/index.html b/index.html index 2bfac66f3a..5be1729347 100644 --- a/index.html +++ b/index.html @@ -26,90 +26,95 @@

S&J

Progress.

- -
-
- penandpad - -
-
-

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

- -
-
- - -
-
- skypic -
-
-

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

- + +
+
+ penandpad + +
+
+

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

+ +
- -
- -
-

Recent Projects

-
- villas + + +
+
+ skypic +
+
+

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

+ +
+
- -
-

THE VILLAS

+ +
+

Recent Projects

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

+ +
+
-
-

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.

- +
+
+ pool +
+ +
+

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.

+
- -
-
-
- pool +
+
+ bock +
+
+

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.

+
-
-

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.

-
-
-
-
- bock -
-
-

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.

-
-
+ -
+ + + +
From 6f83dcc0717d85eaf97e60fd8c6f5c5cd11de791 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 10:50:53 -0600 Subject: [PATCH 28/83] working on navigation button and functionality --- css/index.css | 108 ++---------------------------------------------- index.html | 3 +- less/index.less | 7 +++- 3 files changed, 11 insertions(+), 107 deletions(-) diff --git a/css/index.css b/css/index.css index c26f534b55..4a9115912c 100644 --- a/css/index.css +++ b/css/index.css @@ -155,13 +155,15 @@ body { max-width: 100%; } .container h1 { - border: 2px solid pink; font-size: 2rem; padding: 1% 0 1% 5%; font-weight: bold; background-color: #99a3ad; Color: #FFFFFF; } +.nav-hamburger { + padding-left: 80%; +} .container1 img { max-width: 100%; height: auto; @@ -493,107 +495,3 @@ body { .container18 { padding-left: 7%; } - - - -@media screen and (max-width: 500px) { - .container { - background-color: lightpink; - padding: 0 0 0 0; - } - - .container1 { - padding: 0 0 0 0; - } - - .container1 .text-content p{ - font-size: 2rem; - - } - .container2 { - width: 100%; - display: flex; - flex-direction: column; - padding: 0 0 0 0; - } - - .container2 .content-wrapper1 h2 { - width: 100%; - padding: 0 0 4% 0; - display: flex; - flex-direction: column; - - align-items: center; - font-size: 2rem; - } - - .container2 .content-wrapper1 p { - width: 100%; - padding: 0 0 0 4%; - display: flex; - flex-direction: column; - align-items: center; - font-size: 1rem; - } - - .container2 button { - width: 80%; - height:30%; - font-size: 1rem; - - border: 2px solid gold; - padding: 5%; - - - } - - .container3 { - width: 100%; - display: flex; - flex-direction: column; - padding: 0 0 0 0; - } - - .container3 .content-wrapper1 h2 { - width: 100%; - padding: 0 0 4% 0; - display: flex; - flex-direction: column; - - align-items: center; - font-size: 2rem; - } - - .container3 .content-wrapper1 p { - width: 100%; - padding: 0 0 0 4%; - display: flex; - flex-direction: column; - align-items: center; - font-size: 1rem; - } - - .container3 button { - width: 80%; - height:30%; - font-size: 1rem; - - border: 2px solid gold; - padding: 5%; - - - } - - - - - .bottom-wrapper { - width: 100%; - display: flex; - flex-direction: column; - font-weight: 200; - - } - - - diff --git a/index.html b/index.html index 5be1729347..b4aa0f4b94 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,8 @@
-

S&J

+

S&J +

jumbo
diff --git a/less/index.less b/less/index.less index af215921d9..bd18a6f108 100644 --- a/less/index.less +++ b/less/index.less @@ -89,7 +89,7 @@ body { } .container h1 { - border: 2px solid pink; + font-size: 2rem; padding: 1% 0 1% 5%; font-weight: bold; @@ -97,6 +97,11 @@ body { Color: #FFFFFF; } + .nav-hamburger { + padding-left: 80%; + + } + .container1 img { max-width: 100%; height: auto; From 8f02aeaaf786dec43f50ea4c9b8f734a36018c01 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 11:35:54 -0600 Subject: [PATCH 29/83] got functionality working for home nav menu, now working on design --- css/index.css | 27 ++++++++++++++++++++++++++- index.html | 10 +++++++++- js/index.js | 17 ++++++++++++++++- less/index.less | 32 +++++++++++++++++++++++++++++++- 4 files changed, 82 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 4a9115912c..758a0eae92 100644 --- a/css/index.css +++ b/css/index.css @@ -161,8 +161,33 @@ body { background-color: #99a3ad; Color: #FFFFFF; } -.nav-hamburger { +.nav-button { padding-left: 80%; + cursor: pointer; +} +.menu { + display: none; + position: fixed; + top: 75px; + left: 0; + width: 350px; + height: 100vh; + /* This give the height 100% of the screen or, '100% of View Height' */ + background-color: #81C784; + border: 1px solid #004D40; + border-left: none; + border-bottom: none; + z-index: 2; + /* This set the layer level of the element, it has precendence over initial level of 1*/ +} +.menu ul li { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; +} +.menu--open { + display: block; } .container1 img { max-width: 100%; diff --git a/index.html b/index.html index b4aa0f4b94..1240865969 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,16 @@

S&J -

+ jumbo + +
+
    +
  • Home
    • +
  • Services
    • +
  • Contact
    • +
+

Integrity,

diff --git a/js/index.js b/js/index.js index bb3d341cf0..d9bb6d18ea 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,16 @@ -// JS goes here \ No newline at end of file + +const showNav = () => { + // Toggle the "menu--open" class on your menu refence. + menu.classList.toggle("menu--open"); + } + + + + + +const menu = document.querySelector(".menu"); + + +const hamButton= document.querySelector(".nav-button"); + +hamButton.addEventListener("click", showNav); diff --git a/less/index.less b/less/index.less index bd18a6f108..bd18b69b38 100644 --- a/less/index.less +++ b/less/index.less @@ -97,11 +97,41 @@ body { Color: #FFFFFF; } - .nav-hamburger { + .nav-button { padding-left: 80%; + + cursor: pointer; + + } + .menu { + display: none; + position: fixed; + top: 75px; + left: 0; + width: 350px; + height: 100vh; /* This give the height 100% of the screen or, '100% of View Height' */ + background-color: #81C784; + border: 1px solid #004D40; + border-left: none; + border-bottom: none; + z-index: 2; /* This set the layer level of the element, it has precendence over initial level of 1*/ } + + + .menu ul li{ + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + } + + .menu--open { + display: block; + } + + .container1 img { max-width: 100%; height: auto; From c118a65789419e8470963979e0daf6402844a01d Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 12:19:39 -0600 Subject: [PATCH 30/83] finished expanded view of nav bar, moving on to tab funtion for services page --- css/index.css | 14 ++++++++++---- index.html | 2 ++ js/index.js | 7 +++++-- less/index.less | 21 +++++++++++++++++---- 4 files changed, 34 insertions(+), 10 deletions(-) diff --git a/css/index.css b/css/index.css index 758a0eae92..94345eadaf 100644 --- a/css/index.css +++ b/css/index.css @@ -170,15 +170,21 @@ body { position: fixed; top: 75px; left: 0; - width: 350px; + width: 100%; height: 100vh; - /* This give the height 100% of the screen or, '100% of View Height' */ - background-color: #81C784; + background-color: #99a3ad; border: 1px solid #004D40; border-left: none; border-bottom: none; z-index: 2; - /* This set the layer level of the element, it has precendence over initial level of 1*/ + font-Weight: Bold; + font-Size: 48px; + line-Height: 85px; + color: #FFFFFF; + cursor: pointer; +} +.menu li:hover { + color: #222222; } .menu ul li { list-style-type: none; diff --git a/index.html b/index.html index 1240865969..486a309f50 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,8 @@

S&J jumbo
+

S&J +

  • Home
  • Services
    • diff --git a/js/index.js b/js/index.js index d9bb6d18ea..60d74ab789 100644 --- a/js/index.js +++ b/js/index.js @@ -11,6 +11,9 @@ const showNav = () => { const menu = document.querySelector(".menu"); -const hamButton= document.querySelector(".nav-button"); +const hamButton= document.querySelectorAll(".nav-button"); +for(let i =0; i < hamButton.length; i++) { + hamButton[i].addEventListener("click", showNav); + +} -hamButton.addEventListener("click", showNav); diff --git a/less/index.less b/less/index.less index bd18b69b38..c65e42057a 100644 --- a/less/index.less +++ b/less/index.less @@ -99,6 +99,8 @@ body { .nav-button { padding-left: 80%; + + cursor: pointer; @@ -109,13 +111,24 @@ body { position: fixed; top: 75px; left: 0; - width: 350px; - height: 100vh; /* This give the height 100% of the screen or, '100% of View Height' */ - background-color: #81C784; + width: 100%; + height: 100vh; + background-color: #99a3ad; border: 1px solid #004D40; border-left: none; border-bottom: none; - z-index: 2; /* This set the layer level of the element, it has precendence over initial level of 1*/ + z-index: 2; + font-Weight: Bold; + font-Size: 48px; + line-Height: 85px; + color: #FFFFFF; + + + cursor: pointer; + li:hover { + color: #222222; + } + } From ca18c79f9e62dbb82349e22d5009a2bdd264f7bc Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 13:11:48 -0600 Subject: [PATCH 31/83] working on fixed nav bar --- css/index.css | 6 ++++++ index.html | 7 +++++-- less/index.less | 9 +++++++-- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 94345eadaf..1ec102fab5 100644 --- a/css/index.css +++ b/css/index.css @@ -145,6 +145,12 @@ body { max-width: 100%; height: auto; } +header { + position: fixed; + top: 0%; + width: 100%; + border: 2px solid blue; +} .container { max-width: 100%; height: auto; diff --git a/index.html b/index.html index 486a309f50..e8e1d2c72d 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,11 @@
    -

    S&J -

    +
    +

    S&J +

    + +
    jumbo
    diff --git a/less/index.less b/less/index.less index c65e42057a..0f4da76193 100644 --- a/less/index.less +++ b/less/index.less @@ -76,6 +76,13 @@ body { } +header { + position: fixed; + top: 0%; + width: 100%; + border: 2px solid blue; +} + .container { max-width: 100%; height: auto; @@ -122,8 +129,6 @@ body { font-Size: 48px; line-Height: 85px; color: #FFFFFF; - - cursor: pointer; li:hover { color: #222222; From 41df8fce4db64038dd387b281161909a7e77a0ff Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 14:16:46 -0600 Subject: [PATCH 32/83] trying to get services link to change color on hover --- css/index.css | 15 ++++++++++++++- index.html | 3 ++- less/index.less | 24 ++++++++++++++++++++++-- 3 files changed, 38 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 1ec102fab5..a105d5c936 100644 --- a/css/index.css +++ b/css/index.css @@ -147,8 +147,9 @@ body { } header { position: fixed; + overflow: hidden; top: 0%; - width: 100%; + width: 80%; border: 2px solid blue; } .container { @@ -198,6 +199,18 @@ header { padding: 30px 0; text-align: center; } +.menu ul a { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + color: #FFFFFF; + text-decoration: none; +} +.menu ul a li:hover { + color: #222222; + cursor: pointer; +} .menu--open { display: block; } diff --git a/index.html b/index.html index e8e1d2c72d..791bf00c26 100644 --- a/index.html +++ b/index.html @@ -27,9 +27,10 @@

    S&J

    S&J

    +
    diff --git a/less/index.less b/less/index.less index 0f4da76193..51a5e92f35 100644 --- a/less/index.less +++ b/less/index.less @@ -78,8 +78,9 @@ body { header { position: fixed; + overflow: hidden; top: 0%; - width: 100%; + width: 80%; border: 2px solid blue; } @@ -138,13 +139,32 @@ header { - .menu ul li{ + .menu ul li { list-style-type: none; font-size: 32px; padding: 30px 0; text-align: center; } + .menu ul a { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + color: #FFFFFF; + text-decoration: none; + + li:hover { + color: #222222; + cursor: pointer; + } + + } + + + + + .menu--open { display: block; } From b1eaa3bea0c4c94f70ee40b5b8e36aa46e63f04a Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Jan 2019 14:26:36 -0600 Subject: [PATCH 33/83] got the hover affect to work on all list items including a tag --- css/index.css | 6 +++--- less/index.less | 8 +++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index a105d5c936..2fc8daa473 100644 --- a/css/index.css +++ b/css/index.css @@ -190,6 +190,9 @@ header { color: #FFFFFF; cursor: pointer; } +.menu a:hover { + color: #222222; +} .menu li:hover { color: #222222; } @@ -206,9 +209,6 @@ header { text-align: center; color: #FFFFFF; text-decoration: none; -} -.menu ul a li:hover { - color: #222222; cursor: pointer; } .menu--open { diff --git a/less/index.less b/less/index.less index 51a5e92f35..15b6deb02e 100644 --- a/less/index.less +++ b/less/index.less @@ -131,6 +131,9 @@ header { line-Height: 85px; color: #FFFFFF; cursor: pointer; + a:hover { + color: #222222; + } li:hover { color: #222222; } @@ -154,10 +157,9 @@ header { color: #FFFFFF; text-decoration: none; - li:hover { - color: #222222; + cursor: pointer; - } + } From aa2b1344480387c7a6ea4c3577957a9d58e4d02c Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 4 Jan 2019 00:19:44 -0600 Subject: [PATCH 34/83] working on services tab function --- css/index.css | 44 +++++++---- index.html | 2 +- js/index.js | 81 ++++++++++++++++++-- less/index.less | 71 +++++++++++------- services.html | 196 +++++++++++++++++++++++++++++++++++------------- 5 files changed, 297 insertions(+), 97 deletions(-) diff --git a/css/index.css b/css/index.css index 2fc8daa473..255d03c071 100644 --- a/css/index.css +++ b/css/index.css @@ -150,7 +150,6 @@ header { overflow: hidden; top: 0%; width: 80%; - border: 2px solid blue; } .container { max-width: 100%; @@ -500,14 +499,14 @@ header { line-height: 24px; padding: 0% 10% 5% 10%; } -.button-wrapper { +.tabs-links { width: 100%; padding-top: 3%; display: flex; flex-direction: row; justify-content: space-between; } -.button-wrapper button { +.tabs-links button { width: 20%; height: auto; font-size: 1rem; @@ -515,26 +514,25 @@ header { padding: 2% 0%; } .container14 { - max-width: 100%; + width: 100%; background-color: white; - line-height: 24px; display: flex; flex-direction: row; } -.container14 h2 { +.container14 h3 { font-size: 1.75rem; font-weight: bold; - border: 2px solid gold; + padding-top: 10%; + margin-right: 15%; } .text-content2 { - width: 40%; - margin-left: 10%; + width: 50%; + border: 2px solid gold; } .construction-pic { - width: 43%; - margin-left: 10%; - margin-right: 10%; - margin-top: 7%; + width: 50%; + padding-left: 3.5%; + padding-top: 8%; } .container16 { padding-left: 7%; @@ -545,3 +543,23 @@ header { .container18 { padding-left: 7%; } +.tabs .tabs-link-selected { + z-index: 2; + background-color: #5E9FB9; + color: white; + border: 1px solid black; +} +.tabs .tabs-link-selected .tab:hover { + background: #222222; + color: #FFF; +} +.tabs .tabs-item { + display: none; + width: 75%; +} +.tabs .tabs-item-selected { + display: block; +} +.tabs .tabs-link-selected { + z-index: 2; +} diff --git a/index.html b/index.html index 791bf00c26..edd06acb7b 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@

    S&J

    diff --git a/js/index.js b/js/index.js index 60d74ab789..38b18813a2 100644 --- a/js/index.js +++ b/js/index.js @@ -1,19 +1,88 @@ const showNav = () => { - // Toggle the "menu--open" class on your menu refence. + menu.classList.toggle("menu--open"); } - - - - const menu = document.querySelector(".menu"); - const hamButton= document.querySelectorAll(".nav-button"); for(let i =0; i < hamButton.length; i++) { hamButton[i].addEventListener("click", showNav); } + +class TabLink { + constructor(element) { + // Assign this.element to the passed in DOM element + // this.element; + this.element = element; + // Get the custom data attribute on the Link + // this.data; + this.data = this.element.dataset.tab + // Using the custom data attribute get the associated Item element + // this.itemElement; + this.itemElement = document.querySelector(`.tabs-item[data-tab= '${this.data}']`) + // Using the Item element, create a new instance of the TabItem class + // this.tabItem; + this.tabItem = new TabItem(this.itemElement) + // Add a click event listener on this instance, calling the select method on click + this.element.addEventListener("click", () => { this.select() }) + } + + + select() { + // Get all of the elements with the tabs-link class + // const links; + const links = document.querySelectorAll(".tabs-link"); + // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links + // Array.from(links).forEach(); + for (let i = 0; i < links.length; i++) { + links[i].classList.remove("tabs-link-selected") + } + // Add a class named "tabs-link-selected" to this link + // this.element; + this.element.classList.add("tabs-link-selected") + // Call the select method on the item associated with this link + this.tabItem.select() + + } + }; + class TabItem { + constructor(element) { + // Assign this.element to the passed in element + // this.element; + this.element = element; + } + + select() { + // Select all ".tabs-item" elements from the DOM + const items = document.querySelectorAll(".tabs-item"); + // const items; + for (let i = 0; i < items.length; i ++) { + items[i] + + + // Remove the class "tabs-item-selected" from each element + items[i].classList.remove("tabs-item-slected"); + } // Add a class named "tabs-item-selected" to this element + //this.element; + this.element.classList.add("tabs-item-selected"); + } + } + + /* START HERE: + + - Select all classes named ".tabs-link" and assign that value to the links variable + + - With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList + + - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter + + */ + + links = document.querySelectorAll(".tabs-link"); + links.forEach(function (link) { + return new TabLink(link) + }); diff --git a/less/index.less b/less/index.less index 15b6deb02e..fdaa93e47e 100644 --- a/less/index.less +++ b/less/index.less @@ -81,7 +81,7 @@ header { overflow: hidden; top: 0%; width: 80%; - border: 2px solid blue; + } .container { @@ -156,17 +156,10 @@ header { text-align: center; color: #FFFFFF; text-decoration: none; - - cursor: pointer; - - + } - - - - .menu--open { display: block; } @@ -539,7 +532,7 @@ header { padding: 0% 10% 5% 10%; } -.button-wrapper { +.tabs-links { width: 100%; padding-top: 3%; display: flex; @@ -549,7 +542,7 @@ header { } -.button-wrapper button { +.tabs-links button { width: 20%; height: auto; font-size: 1rem; @@ -559,35 +552,33 @@ header { } .container14 { - max-width: 100%; + width: 100%; background-color: white; - line-height: 24px; - display: flex; + display: flex; flex-direction: row; - - - + } -.container14 h2 { +.container14 h3 { font-size: 1.75rem; font-weight: bold; - border: 2px solid gold; + padding-top: 10%; + margin-right: 15%; } .text-content2 { - width: 40%; - margin-left: 10%; - + width: 50%; + + border: 2px solid gold; } .construction-pic { - width: 43%; - margin-left: 10%; - margin-right: 10%; - margin-top: 7%; + width: 50%; + padding-left: 3.5%; + padding-top: 8%; + } @@ -603,6 +594,34 @@ header { padding-left: 7%; } +.tabs .tabs-link-selected { + z-index: 2; + background-color: #5E9FB9; + color: white; + border: 1px solid black; + .tab:hover { + background: #222222; + color: #FFF; + + + } +} + +.tabs .tabs-item { + display: none; + width: 75%; +} + +.tabs .tabs-item-selected { + display: block; +} + +.tabs .tabs-link-selected { + z-index: 2; + +} + + diff --git a/services.html b/services.html index f1a7406500..ece1bd6539 100644 --- a/services.html +++ b/services.html @@ -1,5 +1,6 @@ + Services @@ -11,78 +12,170 @@ -
    +
    +

    S&J

    jumbo
    -

    Services

    - -
    -
    -
    -

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

    -
    - - -
    +

    Services

    +
    +
    + -
    -
    -

    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.

    +
    +

    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.

    + +
    +
    + + + +
    -
    - construction -
    -
    -
    -
    -
    - -

    Interested in starting a project?
    Let's talk:

    -
    - -
    -

    We'll never share your email with anyone else.

    -
    +
    +
    +
    +
    +

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

    New York

    -

    123 Lane
    Suite 100
    Albany, NY 12345
    2025550144

    - +
    + +
    +
    +
    +

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

    Florida

    -

    Ocean Drive
    Suite 201
    Orlando, FL 22345
    5025550144

    - +
    + +
    +
    +
    +

    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.

    +
    +
    + construction + +
    +
    -
    -

    California

    -

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

    - +
    + +
    +
    +
    +

    Sustainability

    +

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

    +

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

    +
    +
    + construction + +
    +
    -
    - -
    + +
    + + +
    + +
    + + + +
    +
    +
    + +

    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
    2025550144

    + +
    + +
    +

    Florida

    +

    Ocean Drive
    Suite 201
    Orlando, FL 22345
    5025550144

    + +
    +
    +

    California

    +

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

    + +
    + +
    + +
    + + - - - + - +
    + \ No newline at end of file From 5cd43521157f5a472c7cbfba240b304a2326067e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 4 Jan 2019 13:02:51 -0600 Subject: [PATCH 35/83] late push --- css/index.css | 7 ++----- index.html | 3 +++ js/index.js | 48 +++++++++++++----------------------------------- less/index.less | 14 ++++++-------- services.html | 19 ++++++++++++++++++- 5 files changed, 42 insertions(+), 49 deletions(-) diff --git a/css/index.css b/css/index.css index 255d03c071..35d9da043c 100644 --- a/css/index.css +++ b/css/index.css @@ -168,6 +168,7 @@ header { Color: #FFFFFF; } .nav-button { + max-width: 100%; padding-left: 80%; cursor: pointer; } @@ -527,7 +528,6 @@ header { } .text-content2 { width: 50%; - border: 2px solid gold; } .construction-pic { width: 50%; @@ -544,7 +544,7 @@ header { padding-left: 7%; } .tabs .tabs-link-selected { - z-index: 2; + z-index: 1; background-color: #5E9FB9; color: white; border: 1px solid black; @@ -560,6 +560,3 @@ header { .tabs .tabs-item-selected { display: block; } -.tabs .tabs-link-selected { - z-index: 2; -} diff --git a/index.html b/index.html index edd06acb7b..72d680dd6b 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,9 @@ + Home diff --git a/js/index.js b/js/index.js index 38b18813a2..31c7639d21 100644 --- a/js/index.js +++ b/js/index.js @@ -12,75 +12,53 @@ for(let i =0; i < hamButton.length; i++) { } +// SERVICES TABS class TabLink { constructor(element) { - // Assign this.element to the passed in DOM element - // this.element; this.element = element; - // Get the custom data attribute on the Link - // this.data; - this.data = this.element.dataset.tab - // Using the custom data attribute get the associated Item element - // this.itemElement; - this.itemElement = document.querySelector(`.tabs-item[data-tab= '${this.data}']`) - // Using the Item element, create a new instance of the TabItem class - // this.tabItem; + this.data = this.element.dataset.tab + this.itemElement = document.querySelector(`.tabs-item[data-tab= '${this.data}']`) this.tabItem = new TabItem(this.itemElement) - // Add a click event listener on this instance, calling the select method on click - this.element.addEventListener("click", () => { this.select() }) - } + this.element.addEventListener("click", () => { this.select(); }); + }; select() { - // Get all of the elements with the tabs-link class - // const links; + const links = document.querySelectorAll(".tabs-link"); - // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links - // Array.from(links).forEach(); + for (let i = 0; i < links.length; i++) { links[i].classList.remove("tabs-link-selected") } - // Add a class named "tabs-link-selected" to this link - // this.element; + this.element.classList.add("tabs-link-selected") - // Call the select method on the item associated with this link + this.tabItem.select() } }; class TabItem { constructor(element) { - // Assign this.element to the passed in element - // this.element; this.element = element; } select() { - // Select all ".tabs-item" elements from the DOM + const items = document.querySelectorAll(".tabs-item"); - // const items; + for (let i = 0; i < items.length; i ++) { items[i] - // Remove the class "tabs-item-selected" from each element + items[i].classList.remove("tabs-item-slected"); - } // Add a class named "tabs-item-selected" to this element - //this.element; + } this.element.classList.add("tabs-item-selected"); } } - /* START HERE: - - - Select all classes named ".tabs-link" and assign that value to the links variable - - - With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList - - - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter - */ links = document.querySelectorAll(".tabs-link"); links.forEach(function (link) { diff --git a/less/index.less b/less/index.less index fdaa93e47e..502fe9d2ae 100644 --- a/less/index.less +++ b/less/index.less @@ -106,6 +106,7 @@ header { } .nav-button { + max-width: 100%; padding-left: 80%; @@ -570,8 +571,6 @@ header { .text-content2 { width: 50%; - border: 2px solid gold; - } .construction-pic { @@ -595,7 +594,7 @@ header { } .tabs .tabs-link-selected { - z-index: 2; + z-index: 1; background-color: #5E9FB9; color: white; border: 1px solid black; @@ -603,8 +602,9 @@ header { background: #222222; color: #FFF; - } + + } .tabs .tabs-item { @@ -614,14 +614,12 @@ header { .tabs .tabs-item-selected { display: block; -} -.tabs .tabs-link-selected { - z-index: 2; - } + + diff --git a/services.html b/services.html index ece1bd6539..bafeec4836 100644 --- a/services.html +++ b/services.html @@ -14,13 +14,25 @@
    +
    -

    S&J

    +

    S&J

    jumbo

    Services

    + +
    +

    S&J +

    + + +
    @@ -166,6 +178,11 @@

    California

+
+ +
copyright © 2018 Smith and Jones
+ +
From dac1c158a1225da5de6928d23271d73475e7c482 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 4 Jan 2019 13:47:25 -0600 Subject: [PATCH 36/83] working on mobile design now --- css/index.css | 7 ++++++- js/index.js | 26 ++++++++++++-------------- less/index.less | 12 +++++++++++- 3 files changed, 29 insertions(+), 16 deletions(-) diff --git a/css/index.css b/css/index.css index 35d9da043c..5d035893d6 100644 --- a/css/index.css +++ b/css/index.css @@ -325,7 +325,9 @@ header { } .villa-content p { text-align: center; - padding: 7.5%; + padding-right: 28%; + margin-left: 10%; + padding-top: 7%; font-size: 1.5rem; letter-spacing: 7px; } @@ -464,6 +466,9 @@ header { color: white; line-height: 30px; } +.bottom-wrapper h3 { + padding-top: 15%; +} .container8 { padding-left: 7%; } diff --git a/js/index.js b/js/index.js index 31c7639d21..452f0b23d0 100644 --- a/js/index.js +++ b/js/index.js @@ -17,9 +17,9 @@ for(let i =0; i < hamButton.length; i++) { class TabLink { constructor(element) { this.element = element; - this.data = this.element.dataset.tab - this.itemElement = document.querySelector(`.tabs-item[data-tab= '${this.data}']`) - this.tabItem = new TabItem(this.itemElement) + this.data = this.element.dataset.tab; + this.itemElement = document.querySelector(`.tabs-item[data-tab= '${this.data}']`) ; + this.tabItem = new TabItem(this.itemElement); this.element.addEventListener("click", () => { this.select(); }); }; @@ -28,9 +28,9 @@ class TabLink { const links = document.querySelectorAll(".tabs-link"); - for (let i = 0; i < links.length; i++) { - links[i].classList.remove("tabs-link-selected") - } + links.forEach( link => { + link.classList.remove('tabs-link-selected') + }); this.element.classList.add("tabs-link-selected") @@ -47,19 +47,17 @@ class TabLink { const items = document.querySelectorAll(".tabs-item"); - for (let i = 0; i < items.length; i ++) { - items[i] - - - - items[i].classList.remove("tabs-item-slected"); - } - this.element.classList.add("tabs-item-selected"); + items.forEach( item => { + item.classList.remove('tabs-item-selected'); + }) + + this.element.classList.add('tabs-item-selected'); } } + links = document.querySelectorAll(".tabs-link"); links.forEach(function (link) { return new TabLink(link) diff --git a/less/index.less b/less/index.less index 502fe9d2ae..09f2dc20df 100644 --- a/less/index.less +++ b/less/index.less @@ -163,6 +163,7 @@ header { .menu--open { display: block; + } @@ -310,7 +311,9 @@ header { .villa-content p { text-align: center; - padding: 7.5%; + padding-right: 28%; + margin-left: 10%; + padding-top: 7%; font-size: 1.5rem; letter-spacing: 7px; @@ -484,6 +487,12 @@ header { } + +.bottom-wrapper h3 { + padding-top: 15%; + +} + .container8 { padding-left: 7%; } @@ -583,6 +592,7 @@ header { .container16 { padding-left: 7%; + } .container17 { From 4625d640a6f76f3efe38261ff85dd79551b7bbc9 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 4 Jan 2019 14:21:32 -0600 Subject: [PATCH 37/83] made adjustments to footer on services page and added hover cursor on tabs link items --- css/index.css | 20 ++++++++++++++++---- less/index.less | 31 +++++++++++++++++++++++++++---- services.html | 14 +++++++------- 3 files changed, 50 insertions(+), 15 deletions(-) diff --git a/css/index.css b/css/index.css index 5d035893d6..a17f00cbab 100644 --- a/css/index.css +++ b/css/index.css @@ -457,17 +457,22 @@ header { line-height: 25px; padding-bottom: 2%; } -.bottom-wrapper { +#bottom-wrapper { background-color: #828282; width: 100%; height: auto; display: flex; flex-direction: row; + padding-top: 5%; color: white; - line-height: 30px; + line-height: 24px; +} +#bottom-wrapper p { + padding: 1%; } -.bottom-wrapper h3 { - padding-top: 15%; +.container7 { + padding-left: 3%; + padding-top: 4%; } .container8 { padding-left: 7%; @@ -539,6 +544,10 @@ header { padding-left: 3.5%; padding-top: 8%; } +.container15 { + padding-left: 3%; + padding-top: 4%; +} .container16 { padding-left: 7%; } @@ -548,6 +557,9 @@ header { .container18 { padding-left: 7%; } +.tabs-link:hover { + cursor: pointer; +} .tabs .tabs-link-selected { z-index: 1; background-color: #5E9FB9; diff --git a/less/index.less b/less/index.less index 09f2dc20df..366f8b9e8b 100644 --- a/less/index.less +++ b/less/index.less @@ -476,23 +476,34 @@ header { } -.bottom-wrapper { +#bottom-wrapper { background-color: #828282; width: 100%; height: auto; display: flex; flex-direction: row; + padding-top: 5%; + color: white; - line-height: 30px; + line-height: 24px; } +#bottom-wrapper p { + padding: 1%; +} + -.bottom-wrapper h3 { - padding-top: 15%; + + +.container7 { + + padding-left: 3%; + padding-top: 4%; } + .container8 { padding-left: 7%; } @@ -588,6 +599,13 @@ header { padding-top: 8%; +} + +.container15 { + padding-left: 3%; + padding-top: 4%; + + } .container16 { @@ -603,6 +621,10 @@ header { padding-left: 7%; } +.tabs-link:hover { + cursor: pointer; +} + .tabs .tabs-link-selected { z-index: 1; background-color: #5E9FB9; @@ -612,6 +634,7 @@ header { background: #222222; color: #FFF; + } diff --git a/services.html b/services.html index bafeec4836..7f47f1a324 100644 --- a/services.html +++ b/services.html @@ -145,7 +145,7 @@

Sustainability

-
+

Interested in starting a project?
Let's talk:

@@ -159,19 +159,19 @@

We'll never share your email with anyone else.

-

New York

-

123 Lane
Suite 100
Albany, NY 12345
2025550144

+ +

New York
123 Lane
Suite 100
Albany, NY 12345
2025550144

-

Florida

-

Ocean Drive
Suite 201
Orlando, FL 22345
5025550144

+ +

Florida
Ocean Drive
Suite 201
Orlando, FL 22345
5025550144

-

California

-

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

+ +

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

From 8461eb8f4e560bc71f127ef46005ec4f24604c8e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 4 Jan 2019 15:57:16 -0600 Subject: [PATCH 38/83] working on container widths and services drip down menu --- css/index.css | 21 ++++----------------- index.html | 22 +++++++++++----------- less/index.less | 36 ++++++++++++------------------------ 3 files changed, 27 insertions(+), 52 deletions(-) diff --git a/css/index.css b/css/index.css index a17f00cbab..a81f0e038f 100644 --- a/css/index.css +++ b/css/index.css @@ -142,7 +142,6 @@ html { } body { background-color: black; - max-width: 100%; height: auto; } header { @@ -152,14 +151,16 @@ header { width: 80%; } .container { - max-width: 100%; + width: 1012px; height: auto; - padding: 0 10% 5% 10%; margin: 0% auto; } .container1 { max-width: 100%; } +.container1 header { + border: 2px solid gold; +} .container h1 { font-size: 2rem; padding: 1% 0 1% 5%; @@ -168,22 +169,12 @@ header { Color: #FFFFFF; } .nav-button { - max-width: 100%; padding-left: 80%; cursor: pointer; } .menu { display: none; - position: fixed; - top: 75px; - left: 0; - width: 100%; - height: 100vh; background-color: #99a3ad; - border: 1px solid #004D40; - border-left: none; - border-bottom: none; - z-index: 2; font-Weight: Bold; font-Size: 48px; line-Height: 85px; @@ -233,8 +224,6 @@ header { padding-top: 0.05%; } .container2 { - width: 100%; - height: auto; background-color: #FFFFFF; display: flex; flex-direction: row-reverse; @@ -267,8 +256,6 @@ header { border: 1px solid black; } .container3 { - width: 100%; - height: auto; background-color: #FFFFFF; display: flex; flex-direction: row; diff --git a/index.html b/index.html index 72d680dd6b..9dc9d56f67 100644 --- a/index.html +++ b/index.html @@ -24,19 +24,19 @@

S&J

+
+

S&J +

+ + +
jumbo -
-

S&J -

- - -

Integrity,

@@ -136,7 +136,7 @@

Recent Projects

-
+

Interested in starting a project?
Let's talk:

diff --git a/less/index.less b/less/index.less index 366f8b9e8b..7ef104988b 100644 --- a/less/index.less +++ b/less/index.less @@ -71,7 +71,7 @@ html { body { background-color: black; - max-width: 100%; + height: auto; } @@ -85,9 +85,9 @@ header { } .container { - max-width: 100%; + width: 1012px; height: auto; - padding: 0 10% 5% 10%; + margin: 0% auto; } @@ -96,6 +96,11 @@ header { max-width: 100%; } + .container1 header { + + border: 2px solid gold; + } + .container h1 { font-size: 2rem; @@ -106,27 +111,14 @@ header { } .nav-button { - max-width: 100%; - padding-left: 80%; - - - - cursor: pointer; + padding-left: 80%; + cursor: pointer; } .menu { display: none; - position: fixed; - top: 75px; - left: 0; - width: 100%; - height: 100vh; background-color: #99a3ad; - border: 1px solid #004D40; - border-left: none; - border-bottom: none; - z-index: 2; font-Weight: Bold; font-Size: 48px; line-Height: 85px; @@ -141,8 +133,6 @@ header { } - - .menu ul li { list-style-type: none; font-size: 32px; @@ -191,8 +181,7 @@ header { } .container2 { - width: 100%; - height: auto; + background-color: #FFFFFF; display: flex; flex-direction: row-reverse; @@ -238,8 +227,7 @@ header { } .container3 { - width: 100%; - height: auto; + background-color: #FFFFFF; display: flex; flex-direction: row; From 1d7b3898a261fea59b5a102979dc94f0afae37bf Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 4 Jan 2019 17:34:13 -0600 Subject: [PATCH 39/83] trying to get mobile design, getting burned out and need to take break --- css/index.css | 19 +- index.html | 7 +- less/JasonProject.css | 75 ------ less/Mock project week.css | 481 ------------------------------------- less/Untitled-1.css | 0 less/Untitled-1.html | 0 less/index.less | 33 ++- less/myIndex.less | 75 ------ less/test.css | 0 9 files changed, 49 insertions(+), 641 deletions(-) delete mode 100644 less/JasonProject.css delete mode 100644 less/Mock project week.css delete mode 100644 less/Untitled-1.css delete mode 100644 less/Untitled-1.html delete mode 100644 less/myIndex.less delete mode 100644 less/test.css diff --git a/css/index.css b/css/index.css index a81f0e038f..1f2320c039 100644 --- a/css/index.css +++ b/css/index.css @@ -224,6 +224,7 @@ header { padding-top: 0.05%; } .container2 { + max-width: 100%; background-color: #FFFFFF; display: flex; flex-direction: row-reverse; @@ -303,7 +304,7 @@ header { position: absolute; margin-left: 47%; margin-top: 27%; - width: 28%; + width: 350px; height: 9%; background-color: #d8d8d8; } @@ -353,7 +354,7 @@ header { position: absolute; margin-right: 47%; margin-top: 19%; - width: 25%; + width: 350px; height: 9%; background-color: #d8d8d8; margin-left: 5%; @@ -398,7 +399,7 @@ header { position: absolute; margin-left: 47%; margin-top: 15%; - width: 28%; + width: 350px; height: 9%; background-color: #d8d8d8; } @@ -564,3 +565,15 @@ header { .tabs .tabs-item-selected { display: block; } +@media screen and (max-width: 900px) { + .container { + display: flex; + flex-direction: column; + max-width: 100%; + } + .container1 { + display: flex; + flex-direction: column; + max-width: 100%; + } +} diff --git a/index.html b/index.html index 9dc9d56f67..f98ab4e1e7 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,15 @@ + + Home + @@ -35,7 +38,7 @@

S&J

- jumbo + jumbo
@@ -47,7 +50,7 @@

S&J
- penandpad + penandpad
diff --git a/less/JasonProject.css b/less/JasonProject.css deleted file mode 100644 index caf88351ae..0000000000 --- a/less/JasonProject.css +++ /dev/null @@ -1,75 +0,0 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ - -html,body,div,span,applet,object,iframe, -h1,h2,h3,h4,h5,h6,p,blockquote,pre, -a,abbr,acronym,address,big,cite,code, -del,dfn,em,img,ins,kbd,q,s,samp, -small,strike,strong,sub,sup,tt,var, -b,u,i,center, -dl,dt,dd,ol,ul,li, -fieldset,form,label,legend, -table,caption,tbody,tfoot,thead,tr,th,td, -article,aside,canvas,details,figcaption,figure, -footer,header,hgroup,menu,nav,section,summary, -time,mark,audio,video{ - margin:0; - padding:0; - border:0; - outline:0; - font-size: 62.5%; - 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; -} - -* { - box-sizing: border-box; - } - - html { - font-family: Roboto, Arial, sans-serif; - } - - body { - background-color: black; - max-width: 100%; - height: auto; - - } \ No newline at end of file diff --git a/less/Mock project week.css b/less/Mock project week.css deleted file mode 100644 index 26a12fcd93..0000000000 --- a/less/Mock project week.css +++ /dev/null @@ -1,481 +0,0 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 62.5%; - 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 */ -/* Universal styles */ -* { - box-sizing: border-box; -} -html { - font-family: Roboto, Arial, sans-serif; -} -body { - background-color: black; - max-width: 100%; - height: auto; -} -.container { - max-width: 100%; - height: auto; - padding: 0 10% 5% 10%; - margin: 0% auto; -} -.container1 { - max-width: 100%; -} -/* Header content */ -.top-nav h1 { - border: 2px solid pink; - font-size: 2rem; - padding: 1% 0 1% 5%; - font-weight: bold; - background-color: #99a3ad; - Color: #FFFFFF; -} -.header-image { - max-width: 100%; - height: auto; -} -.text-content { - width: 100%; - position: relative; - margin-top: -40%; - padding-top: 15.5%; -} -.text-content p { - text-align: left; - color: white; - font-size: 4rem; - font-family: Roboto, Arial, sans-serif; - padding-left: 7%; - font-weight: bold; - padding-top: 0.05%; -} -/* Main Content */ -.container2 { - background-color: #FFFFFF; - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -.container2 h2 { - font-size: 1.5rem; - color: black; - font-weight: bold; - padding-top: 15%; - padding-bottom: 2%; - padding-left: 15%; -} -.container2 p { - font-size: 1rem; - width: 100%; - height: auto; - line-height: 25px; - padding-left: 15%; -} -.container2 button { - width: 28%; - height: 15%; - margin-left: 15%; - margin-top: 7%; - border: 1px solid black; -} -.container11 img { - padding-top: 10%; - max-width: 50%; - height: auto; - padding-left: 10%; - border: solid gold; - -} - - - -.main-content .paragraph { - width: 50%; - margin-top: 10%; -} -.main-content .paragraph2 { - width: 50%; -} -.main-content .paragraph3 { - width: 80%; - padding-left: 30%; - padding-bottom: 10%; - font-size: 1.5rem; -} -.container3 { - background-color: #FFFFFF; - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} -.container3 img { - padding-top: 10%; - max-width: 45%; - height: auto; - padding-left: 7%; -} -.container3 p { - font-size: 1rem; - width: 100; - height: auto; - line-height: 25px; -} -.container3 h2 { - font-size: 1.5rem; - color: black; - font-weight: bold; - padding-top: 30%; - padding-bottom: 2%; -} -.container3 button { - width: 28%; - height: 12%; - margin-top: 7%; - border: 1px solid black; -} -.container4 { - background-color: #FFFFFF; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - width: 100%; -} -.container4 h2 { - font-size: 1.5rem; - color: black; - font-weight: bold; - padding-top: 8%; - padding-bottom: 1%; - padding-left: 7%; -} -.container4 img { - padding: 5% 7% 5% 7%; -} -.villapic { - position: relative; -} -.villa-content { - position: absolute; - margin-left: 47%; - margin-top: 27%; - width: 28%; - height: 9%; - background-color: #d8d8d8; -} -.villa-content p { - text-align: center; - padding: 7.5%; - font-size: 1.5rem; - letter-spacing: 7px; -} -.villasp { - display: flex; - flex-direction: column; - padding-left: 5%; - padding-bottom: 5%; - width: 100%; - padding: 5% 7% 5% 7%; -} -#villas { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 1%; - line-height: 25px; -} -.container5 img { - padding: 5% 7% 5% 7%; -} -.container5 { - background-color: #FFFFFF; - width: 100%; - height: auto; - display: flex; - flex-wrap: wrap; - flex-direction: column; - justify-content: space-between; -} -.skirtpic { - position: relative; -} -.skirt-content { - position: absolute; - margin-right: 47%; - margin-top: 19%; - width: 25%; - height: 9%; - background-color: #d8d8d8; - margin-left: 5%; -} -.skirt-content p { - text-align: center; - padding: 7.5%; - font-size: 1.5rem; - letter-spacing: 7px; -} -#outskirts { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 7%; - line-height: 25px; -} -#outskirts2 { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 3%; - line-height: 25px; -} -.container6 { - background-color: #FFFFFF; - width: 100%; - display: flex; - flex-wrap: wrap; - flex-direction: column; - justify-content: space-between; -} -.container6 img { - padding: 0% 7% 5% 7%; -} -.blockpic { - position: relative; -} -.block-content { - position: absolute; - margin-left: 47%; - margin-top: 15%; - width: 28%; - height: 9%; - background-color: #d8d8d8; -} -.block-content p { - text-align: center; - padding: 7.5%; - font-size: 1.5rem; - letter-spacing: 7px; -} -.container6 h2 { - width: 40%; - height: 40%; - font-size: 2rem; - padding-top: 4%; - padding-left: 8%; - margin-left: 53%; - padding-bottom: 4%; - color: black; - background-color: #d8d8d8; - text-align: justify; - margin-top: 12.5%; -} -.blocksp { - display: flex; - flex-direction: column; - width: 100%; - height: auto; -} -#blocks { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 7%; - line-height: 25px; -} -#blocks2 { - font-size: 1.125rem; - color: black ; - width: 100%; - padding-left: 28%; - padding-top: 7%; - line-height: 25px; - padding-bottom: 2%; -} -footer { - display: flex; - flex-direction: row; -} -.container7 { - background-color: #828282; - width: 50%; - height: auto; - display: flex; - flex-direction: column; - color: white; - line-height: 30px; -} -.container7 { - font-size: 0.75rem; -} -.container8 { - width: 50%; - background-color: #828282; -} -.container9 { - width: 50%; - background-color: #828282; -} -.container10 { - width: 50%; - background-color: #828282; -} -footer { - width: 100%; - height: auto; - color: white; -} -footer p { - line-height: 24px; - padding-left: 30%; -} -footer h3 { - padding: 0% 0% 2% 30%; -} -.copyright h6 { - background-color: #828282; - color: white; - padding-left: 38%; -} -@media screen and (max-width: 500px) { - .container { - background-color: lightpink; - max-width: 100%; - padding: 0% 0% 0% 0%; - } diff --git a/less/Untitled-1.css b/less/Untitled-1.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/less/Untitled-1.html b/less/Untitled-1.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/less/index.less b/less/index.less index 7ef104988b..cc936d41a0 100644 --- a/less/index.less +++ b/less/index.less @@ -181,7 +181,7 @@ header { } .container2 { - + max-width: 100%; background-color: #FFFFFF; display: flex; flex-direction: row-reverse; @@ -287,7 +287,7 @@ header { position: absolute; margin-left: 47%; margin-top: 27%; - width: 28%; + width: 350px; height: 9%; background-color: #d8d8d8; } @@ -344,13 +344,14 @@ header { .skirtpic { position: relative; + } .skirt-content { position: absolute; margin-right: 47%; margin-top: 19%; - width: 25%; + width: 350px; height: 9%; background-color: #d8d8d8; margin-left: 5%; @@ -406,7 +407,7 @@ header { position: absolute; margin-left: 47%; margin-top: 15%; - width: 28%; + width: 350px; height: 9%; background-color: #d8d8d8; } @@ -625,9 +626,9 @@ header { } - } + .tabs .tabs-item { display: none; width: 75%; @@ -639,8 +640,30 @@ header { } +@media screen and (max-width: 900px) { + .container {display: flex; + flex-direction: column; + max-width: 100%; + + } + + .container1 {display: flex; + flex-direction: column; + max-width: 100%; + + } + +#notepad { + display: none; + border: 2px solid green; +} + + .container2 {display: flex; + flex-direction: column; + max-width: 100%; +} diff --git a/less/myIndex.less b/less/myIndex.less deleted file mode 100644 index caf88351ae..0000000000 --- a/less/myIndex.less +++ /dev/null @@ -1,75 +0,0 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ - -html,body,div,span,applet,object,iframe, -h1,h2,h3,h4,h5,h6,p,blockquote,pre, -a,abbr,acronym,address,big,cite,code, -del,dfn,em,img,ins,kbd,q,s,samp, -small,strike,strong,sub,sup,tt,var, -b,u,i,center, -dl,dt,dd,ol,ul,li, -fieldset,form,label,legend, -table,caption,tbody,tfoot,thead,tr,th,td, -article,aside,canvas,details,figcaption,figure, -footer,header,hgroup,menu,nav,section,summary, -time,mark,audio,video{ - margin:0; - padding:0; - border:0; - outline:0; - font-size: 62.5%; - 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; -} - -* { - box-sizing: border-box; - } - - html { - font-family: Roboto, Arial, sans-serif; - } - - body { - background-color: black; - max-width: 100%; - height: auto; - - } \ No newline at end of file diff --git a/less/test.css b/less/test.css deleted file mode 100644 index e69de29bb2..0000000000 From 6e99d23f097b5174c7b128bf510935b00182a764 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 11:22:22 -0600 Subject: [PATCH 40/83] working on mobile design --- css/index.css | 49 ++++++++++++++++++++++++-- index.html | 5 +-- less/index.less | 92 +++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 127 insertions(+), 19 deletions(-) diff --git a/css/index.css b/css/index.css index 1f2320c039..3b31d108ad 100644 --- a/css/index.css +++ b/css/index.css @@ -565,15 +565,58 @@ header { .tabs .tabs-item-selected { display: block; } -@media screen and (max-width: 900px) { +#pic2 { + display: none; +} +@media screen and (max-width: 500px) { .container { display: flex; flex-direction: column; + align-items: center; max-width: 100%; } - .container1 { +} +@media screen and (max-width: 500px) { + .content-wrapper1 { display: flex; flex-direction: column; - max-width: 100%; + align-items: center; + width: 100%; + } + .container4 { + width: 100%; + border: 2px solid gold; + } + .villa-content { + margin-right: 30%; + margin-top: 70%; + width: 70%; + height: 7%; + background-color: red; + text-align: center; + } + #pic1 { + display: none; + } + #pic2 { + display: inherit; + } + #sub p { + border: 2px solid blue; + } + .villa-content p { + display: flex; + flex-direction: column; + align-items: center; + padding-right: 30px; + border: 2px solid blue; + } +} +@media screen and (max-width: 500px) { + header { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } } diff --git a/index.html b/index.html index f98ab4e1e7..972523793b 100644 --- a/index.html +++ b/index.html @@ -79,10 +79,11 @@

Futuristic Designs

Recent Projects

- villas + villas + mobile villa
-
+

THE VILLAS

diff --git a/less/index.less b/less/index.less index cc936d41a0..99ef047176 100644 --- a/less/index.less +++ b/less/index.less @@ -639,31 +639,95 @@ header { } +#pic2 { + display: none; +} -@media screen and (max-width: 900px) { - .container {display: flex; - flex-direction: column; - max-width: 100%; - - } - .container1 {display: flex; - flex-direction: column; +@media screen and ( max-width: 500px) { + .container { + display: flex; + flex-direction:column; + align-items:center; max-width: 100%; + + } +} +@media screen and (max-width: 500px) { + + .content-wrapper1 { + display: flex; + flex-direction:column; + align-items:center; + width: 100%; + +} + +.container4 { + width: 100%; + border: 2px solid gold; + +} + +.villa-content { - } + margin-right: 30%; + margin-top: 70%; + width: 70%; + height: 7%; + background-color: red; + text-align: center; + +} -#notepad { +#pic1 { display: none; - border: 2px solid green; } - .container2 {display: flex; - flex-direction: column; - max-width: 100%; +#pic2 { + display: inherit; +} + +#sub p { + border: 2px solid blue; + +} +.villa-content p { + display: flex; + flex-direction:column; + align-items:center; + padding-right: 30px; + border: 2px solid blue; } + + + } + + // .menu{ + // width: 100%; + // display: flex; + + // } + + + + + + @media screen and (max-width: 500px) { + header { + + display: flex; + flex-direction:column; + align-items:center; + width: 100% + + } + } + + + From 7dedb56caa7784e2abc8883bbddf5b877d39a283 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 12:48:26 -0600 Subject: [PATCH 41/83] working on centering sub headers and displaying the right mobile size photo --- css/index.css | 23 ++++++++--------------- less/index.less | 30 +++++++++++------------------- 2 files changed, 19 insertions(+), 34 deletions(-) diff --git a/css/index.css b/css/index.css index 3b31d108ad..84b7f79f11 100644 --- a/css/index.css +++ b/css/index.css @@ -572,7 +572,6 @@ header { .container { display: flex; flex-direction: column; - align-items: center; max-width: 100%; } } @@ -585,31 +584,25 @@ header { } .container4 { width: 100%; - border: 2px solid gold; + display: flex; + flex-direction: column; } .villa-content { - margin-right: 30%; - margin-top: 70%; - width: 70%; - height: 7%; - background-color: red; - text-align: center; + position: relative; } #pic1 { display: none; } #pic2 { display: inherit; + position: relative; } - #sub p { - border: 2px solid blue; - } - .villa-content p { + #sub { display: flex; - flex-direction: column; - align-items: center; - padding-right: 30px; + align-content: center; + width: 80%; border: 2px solid blue; + position: absolute; } } @media screen and (max-width: 500px) { diff --git a/less/index.less b/less/index.less index 99ef047176..d54a01ad67 100644 --- a/less/index.less +++ b/less/index.less @@ -648,7 +648,7 @@ header { .container { display: flex; flex-direction:column; - align-items:center; + max-width: 100%; } @@ -665,18 +665,13 @@ header { .container4 { width: 100%; - border: 2px solid gold; + display: flex; + flex-direction: column; } .villa-content { - - margin-right: 30%; - margin-top: 70%; - width: 70%; - height: 7%; - background-color: red; - text-align: center; + position: relative; } @@ -686,20 +681,17 @@ header { #pic2 { display: inherit; -} + position: relative; -#sub p { - - border: 2px solid blue; - } -.villa-content p { +#sub { display: flex; - flex-direction:column; - align-items:center; - padding-right: 30px; - border: 2px solid blue; + align-content: center; + width: 80%; + border: 2px solid blue; + position: absolute; + } From 1f2c9f34f11db4c15768d9b3d42908c81233c92e Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 15:32:13 -0600 Subject: [PATCH 42/83] working on header and first image/paragraph --- css/index.css | 13 ++++++------- index.html | 4 ++-- less/index.less | 24 +++++++++++++++--------- 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/css/index.css b/css/index.css index 84b7f79f11..a6ed3e50ce 100644 --- a/css/index.css +++ b/css/index.css @@ -576,11 +576,10 @@ header { } } @media screen and (max-width: 500px) { - .content-wrapper1 { + .container2 { + border: 2px solid blue; display: flex; flex-direction: column; - align-items: center; - width: 100%; } .container4 { width: 100%; @@ -595,14 +594,14 @@ header { } #pic2 { display: inherit; - position: relative; + padding-left: 10%; + width: 100%; } #sub { - display: flex; - align-content: center; - width: 80%; + width: 60%; border: 2px solid blue; position: absolute; + padding: 0% 0% 0% 0%; } } @media screen and (max-width: 500px) { diff --git a/index.html b/index.html index 972523793b..54f561501e 100644 --- a/index.html +++ b/index.html @@ -50,8 +50,8 @@

S&J
- penandpad - + penandpad + penandpad

Smith & Jones Architects

diff --git a/less/index.less b/less/index.less index d54a01ad67..26d6cfb7f0 100644 --- a/less/index.less +++ b/less/index.less @@ -655,12 +655,11 @@ header { } @media screen and (max-width: 500px) { - .content-wrapper1 { + .container2 { + border: 2px solid blue; display: flex; - flex-direction:column; - align-items:center; - width: 100%; - + flex-direction: column; + } .container4 { @@ -681,16 +680,23 @@ header { #pic2 { display: inherit; - position: relative; + padding-left: 10%; + width: 100%; } +.content-wrapper1 { + +} + + #sub { - display: flex; - align-content: center; - width: 80%; + + + width: 60%; border: 2px solid blue; position: absolute; + padding: 0% 0% 0% 0%; } From 592d8ab6a842a33e79343a9da5d17e35a99ea749 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 16:10:59 -0600 Subject: [PATCH 43/83] working on header and top content --- css/index.css | 15 +++++++++++++-- index.html | 5 +++-- less/index.less | 26 +++++++++++++++++--------- 3 files changed, 33 insertions(+), 13 deletions(-) diff --git a/css/index.css b/css/index.css index a6ed3e50ce..c4dfb2c1cf 100644 --- a/css/index.css +++ b/css/index.css @@ -576,7 +576,13 @@ header { } } @media screen and (max-width: 500px) { + .container1 { + width: 100%; + display: flex; + flex-direction: column; + } .container2 { + max-width: 100%; border: 2px solid blue; display: flex; flex-direction: column; @@ -597,18 +603,23 @@ header { padding-left: 10%; width: 100%; } + .content-wrapper1 p { + padding: 0% 0% 0% 0%; + } #sub { width: 60%; - border: 2px solid blue; position: absolute; padding: 0% 0% 0% 0%; } + #sub p { + border: 2px solid blue; + padding-right: 10%; + } } @media screen and (max-width: 500px) { header { display: flex; flex-direction: column; - align-items: center; width: 100%; } } diff --git a/index.html b/index.html index 54f561501e..5df31f1f37 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

S&J

jumbo - + jumbo2

Integrity,

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

Smith & Jones Architects

- skypic + skypic + skypic

Futuristic Designs

diff --git a/less/index.less b/less/index.less index 26d6cfb7f0..7e875b5dae 100644 --- a/less/index.less +++ b/less/index.less @@ -648,14 +648,20 @@ header { .container { display: flex; flex-direction:column; - max-width: 100%; } } @media screen and (max-width: 500px) { + .container1 { + width: 100%; + display: flex; + flex-direction: column; + } + .container2 { + max-width: 100%; border: 2px solid blue; display: flex; flex-direction: column; @@ -680,26 +686,30 @@ header { #pic2 { display: inherit; - padding-left: 10%; + padding-left: 10%; width: 100%; } -.content-wrapper1 { +.content-wrapper1 p { + + padding: 0% 0% 0% 0%; } #sub { - - width: 60%; - border: 2px solid blue; position: absolute; padding: 0% 0% 0% 0%; } +#sub p { + border: 2px solid blue; + padding-right: 10%; +} + @@ -717,11 +727,9 @@ header { @media screen and (max-width: 500px) { - header { - + header { display: flex; flex-direction:column; - align-items:center; width: 100% } From 0d6e0166b27b4850f02b6753697c09902016caf4 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 16:49:48 -0600 Subject: [PATCH 44/83] still working on top page mobile design --- css/index.css | 7 ++++++- less/index.less | 16 ++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index c4dfb2c1cf..78989d76c4 100644 --- a/css/index.css +++ b/css/index.css @@ -159,7 +159,9 @@ header { max-width: 100%; } .container1 header { + width: 100%; border: 2px solid gold; + overflow: hidden; } .container h1 { font-size: 2rem; @@ -574,10 +576,13 @@ header { flex-direction: column; max-width: 100%; } + .text-content { + font-size: 1rem; + } } @media screen and (max-width: 500px) { .container1 { - width: 100%; + max-width: 100%; display: flex; flex-direction: column; } diff --git a/less/index.less b/less/index.less index 7e875b5dae..106ec36b17 100644 --- a/less/index.less +++ b/less/index.less @@ -97,8 +97,10 @@ header { } .container1 header { - + width: 100%; border: 2px solid gold; + overflow: hidden; + } .container h1 { @@ -113,6 +115,7 @@ header { .nav-button { padding-left: 80%; cursor: pointer; + } @@ -651,11 +654,20 @@ header { max-width: 100%; } + +.text-content { + font-size: 1rem; + + +} + + + } @media screen and (max-width: 500px) { .container1 { - width: 100%; + max-width: 100%; display: flex; flex-direction: column; } From 121237bd788a4f8c781a5f3f5ff05f84b3472265 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 18:38:40 -0600 Subject: [PATCH 45/83] trying to get nav buttton to be responsive when browser size changes. --- css/index.css | 12 ++++++++---- less/index.less | 13 ++++++++++--- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/css/index.css b/css/index.css index 78989d76c4..c71c859ae7 100644 --- a/css/index.css +++ b/css/index.css @@ -159,7 +159,7 @@ header { max-width: 100%; } .container1 header { - width: 100%; + width: 80%; border: 2px solid gold; overflow: hidden; } @@ -570,7 +570,7 @@ header { #pic2 { display: none; } -@media screen and (max-width: 500px) { +@media screen and (max-width: 1011px) { .container { display: flex; flex-direction: column; @@ -580,12 +580,16 @@ header { font-size: 1rem; } } -@media screen and (max-width: 500px) { +@media screen and (max-width: 1011px) { .container1 { max-width: 100%; display: flex; flex-direction: column; } + .container1 header { + width: 100%; + border: 2px solid gold; + } .container2 { max-width: 100%; border: 2px solid blue; @@ -605,7 +609,7 @@ header { } #pic2 { display: inherit; - padding-left: 10%; + width: 100%; } .content-wrapper1 p { diff --git a/less/index.less b/less/index.less index 106ec36b17..36c40b35c4 100644 --- a/less/index.less +++ b/less/index.less @@ -97,7 +97,7 @@ header { } .container1 header { - width: 100%; + width: 80%; border: 2px solid gold; overflow: hidden; @@ -647,7 +647,7 @@ header { } -@media screen and ( max-width: 500px) { +@media screen and ( max-width: 1011px) { .container { display: flex; flex-direction:column; @@ -664,7 +664,7 @@ header { } -@media screen and (max-width: 500px) { +@media screen and (max-width: 1011px) { .container1 { max-width: 100%; @@ -672,6 +672,13 @@ header { flex-direction: column; } + .container1 header { + width: 100%; + border: 2px solid gold; + + + } + .container2 { max-width: 100%; border: 2px solid blue; From 3d828072e051fc03c7bf4302ff6dafcd85747894 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 19:16:47 -0600 Subject: [PATCH 46/83] finishing container and container1, moving on to container2 and 3 --- css/index.css | 18 +++++++++++++++--- index.html | 22 +++++++++++----------- less/index.less | 35 ++++++++++++++++++++++++++++------- 3 files changed, 54 insertions(+), 21 deletions(-) diff --git a/css/index.css b/css/index.css index c71c859ae7..3c1d0d89e5 100644 --- a/css/index.css +++ b/css/index.css @@ -576,8 +576,9 @@ header { flex-direction: column; max-width: 100%; } - .text-content { - font-size: 1rem; + .text-content p { + font-size: 2rem; + border: 2px solid green; } } @media screen and (max-width: 1011px) { @@ -588,6 +589,15 @@ header { } .container1 header { width: 100%; + } + .content-wrapper1 { + padding: 2%; + } + .content-wrapper1 button { + width: 85%; + height: auto; + padding: 5% 0; + margin-left: 7%; border: 2px solid gold; } .container2 { @@ -609,9 +619,11 @@ header { } #pic2 { display: inherit; - width: 100%; } + .picwrapper { + padding: 0% 0% 0% 0%; + } .content-wrapper1 p { padding: 0% 0% 0% 0%; } diff --git a/index.html b/index.html index 5df31f1f37..4df20db07b 100644 --- a/index.html +++ b/index.html @@ -36,19 +36,19 @@

S&J
  • Services
  • Contact
    • -

    - - jumbo - jumbo2 +
    + + jumbo + jumbo2 -
    -

    Integrity,

    -

    Excellence,

    -

    Progress.

    -
    -
    +
    +

    Integrity,

    +

    Excellence,

    +

    Progress.

    +
    +
    +
    -
    penandpad penandpad diff --git a/less/index.less b/less/index.less index 36c40b35c4..fde6cc8865 100644 --- a/less/index.less +++ b/less/index.less @@ -195,6 +195,7 @@ header { .picwrapper { width: 100%; padding: 10% 5% 5% 2%; + } @@ -655,10 +656,11 @@ header { } -.text-content { - font-size: 1rem; - +.text-content p { + font-size: 2rem; + border: 2px solid green; + } @@ -670,15 +672,30 @@ header { max-width: 100%; display: flex; flex-direction: column; + } .container1 header { width: 100%; - border: 2px solid gold; + + } - + .content-wrapper1 { + padding: 2%; + } + + + + .content-wrapper1 button { + width: 85%; + height: auto; + padding: 5% 0; + margin-left: 7%; + border: 2px solid gold; } + + .container2 { max-width: 100%; border: 2px solid blue; @@ -705,13 +722,17 @@ header { #pic2 { display: inherit; - padding-left: 10%; + width: 100%; } +.picwrapper { + padding: 0% 0% 0% 0%; +} + .content-wrapper1 p { - + padding: 0% 0% 0% 0%; } From b8a4c77d4ca2c1617b94455a531f7db4d52bd74a Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 19:23:32 -0600 Subject: [PATCH 47/83] aligning container 3 --- css/index.css | 7 +++++++ less/index.less | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/css/index.css b/css/index.css index 3c1d0d89e5..0de5d96d88 100644 --- a/css/index.css +++ b/css/index.css @@ -602,10 +602,17 @@ header { } .container2 { max-width: 100%; + display: flex; + flex-direction: column; + } + + .container3 { + max-width: 100%; border: 2px solid blue; display: flex; flex-direction: column; } + .container4 { width: 100%; display: flex; diff --git a/less/index.less b/less/index.less index fde6cc8865..064171180b 100644 --- a/less/index.less +++ b/less/index.less @@ -680,6 +680,10 @@ header { } + .text-content { + + } + .content-wrapper1 { padding: 2%; } @@ -702,6 +706,7 @@ header { display: flex; flex-direction: column; + } .container4 { From 835a26b0f76e0e401ce31196d5caf9127cbccec1 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 23:05:54 -0600 Subject: [PATCH 48/83] finishing up mobile design --- css/index.css | 20 ++++++++++++++------ index.html | 2 +- less/index.less | 38 ++++++++++++++++++++++++++++---------- 3 files changed, 43 insertions(+), 17 deletions(-) diff --git a/css/index.css b/css/index.css index 0de5d96d88..80587969a7 100644 --- a/css/index.css +++ b/css/index.css @@ -593,26 +593,34 @@ header { .content-wrapper1 { padding: 2%; } + #future { + padding-left: 6%; + border: 2px solid purple; + } .content-wrapper1 button { width: 85%; height: auto; padding: 5% 0; margin-left: 7%; - border: 2px solid gold; + border: 1px solid black; } .container2 { max-width: 100%; - display: flex; + display: flex; flex-direction: column; + padding: 5%; + } + .container3 h2 { + padding: 0% 0% 0% 0%; } - .container3 { max-width: 100%; - border: 2px solid blue; display: flex; flex-direction: column; } - + .container2 h2 { + padding: 0% 0% 0% 0%; + } .container4 { width: 100%; display: flex; @@ -635,7 +643,7 @@ header { padding: 0% 0% 0% 0%; } #sub { - width: 60%; + width: 80%; position: absolute; padding: 0% 0% 0% 0%; } diff --git a/index.html b/index.html index 4df20db07b..00cac1fd5f 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,7 @@

    Smith & Jones Architects

    skypic skypic
    -
    +

    Futuristic Designs

    Et sed autem causae appareat, tempor abhorreant te mei,
    facer facilisis sit ea. Eu timeam vidisse consectetuer diff --git a/less/index.less b/less/index.less index 064171180b..c3e14a4872 100644 --- a/less/index.less +++ b/less/index.less @@ -680,36 +680,54 @@ header { } - .text-content { - - } + .content-wrapper1 { padding: 2%; } - + #future { + padding-left: 6%; + border: 2px solid purple; + } .content-wrapper1 button { width: 85%; height: auto; padding: 5% 0; margin-left: 7%; - border: 2px solid gold; + border: 1px solid black; } .container2 { max-width: 100%; - border: 2px solid blue; display: flex; flex-direction: column; - - + padding: 5%; + } -.container4 { + + .container3 h2 { + padding: 0% 0% 0% 0%; + + } + + .container3 + { + max-width: 100%; + display: flex; + flex-direction: column; + } + + .container2 h2 { + padding: 0% 0% 0% 0%; + + } + + .container4 { width: 100%; display: flex; flex-direction: column; @@ -744,7 +762,7 @@ header { #sub { - width: 60%; + width: 80%; position: absolute; padding: 0% 0% 0% 0%; From e38ad90515278747a8fd564a76a0b3491383c6cf Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 7 Jan 2019 23:50:46 -0600 Subject: [PATCH 49/83] working on bottom content mobile design --- css/index.css | 21 +++++++++++++++++++-- index.html | 3 ++- less/index.less | 31 ++++++++++++++++++++++++++++--- 3 files changed, 49 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 80587969a7..1ccb6e3c52 100644 --- a/css/index.css +++ b/css/index.css @@ -161,7 +161,6 @@ header { .container1 header { width: 80%; border: 2px solid gold; - overflow: hidden; } .container h1 { font-size: 2rem; @@ -626,6 +625,12 @@ header { display: flex; flex-direction: column; } + .container5 { + max-width: 100%; + display: flex; + flex-direction: column; + border: 2px solid green; + } .villa-content { position: relative; } @@ -648,9 +653,21 @@ header { padding: 0% 0% 0% 0%; } #sub p { - border: 2px solid blue; + position: absolute; + width: 70%; padding-right: 10%; } + .skirt-content { + margin-top: 55%; + margin-left: 16%; + } + #outskirts { + padding-top: 32%; + } + .outskirtsp p { + padding: 0% 15% 0% 0%; + border: 2px solid blue; + } } @media screen and (max-width: 500px) { header { diff --git a/index.html b/index.html index 00cac1fd5f..ab0314919c 100644 --- a/index.html +++ b/index.html @@ -100,7 +100,8 @@

    Recent Projects

    - pool + pool + pool
    diff --git a/less/index.less b/less/index.less index c3e14a4872..13b3f0bac3 100644 --- a/less/index.less +++ b/less/index.less @@ -99,7 +99,7 @@ header { .container1 header { width: 80%; border: 2px solid gold; - overflow: hidden; + } @@ -734,6 +734,13 @@ header { } +.container5 { + max-width: 100%; + display: flex; + flex-direction: column; + border: 2px solid green; + } + .villa-content { position: relative; @@ -745,8 +752,8 @@ header { #pic2 { display: inherit; - width: 100%; + } @@ -769,11 +776,29 @@ header { } #sub p { - border: 2px solid blue; + position: absolute; + width: 70%; padding-right: 10%; + } +.skirt-content { + margin-top: 55%; + margin-left: 16%; +} + +#outskirts { + padding-top: 32%; + +} + +.outskirtsp p { +padding: 0% 15% 0% 0%; + +border: 2px solid blue; + +} From 1fe7dd804d8cdf8b167f995043125fab60eab193 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 8 Jan 2019 00:11:09 -0600 Subject: [PATCH 50/83] working on footer and villas sub header --- css/index.css | 16 +++++++++++++++- index.html | 5 +++-- less/index.less | 26 +++++++++++++++++++++++--- 3 files changed, 41 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 1ccb6e3c52..f4d00f8ad5 100644 --- a/css/index.css +++ b/css/index.css @@ -594,7 +594,6 @@ header { } #future { padding-left: 6%; - border: 2px solid purple; } .content-wrapper1 button { width: 85%; @@ -629,6 +628,11 @@ header { max-width: 100%; display: flex; flex-direction: column; + } + .container6 { + max-width: 100%; + display: flex; + flex-direction: column; border: 2px solid green; } .villa-content { @@ -666,8 +670,18 @@ header { } .outskirtsp p { padding: 0% 15% 0% 0%; + } + #blocks { + margin-top: 19%; border: 2px solid blue; } + .block-content { + margin-top: 48%; + margin-left: 12%; + } + .blocksp p { + padding: 0% 15% 0% 0%; + } } @media screen and (max-width: 500px) { header { diff --git a/index.html b/index.html index ab0314919c..af600c3bb1 100644 --- a/index.html +++ b/index.html @@ -117,8 +117,9 @@

    Recent Projects

    -
    - bock +
    + bock + block

    THE BLOCKS

    diff --git a/less/index.less b/less/index.less index 13b3f0bac3..737b9572f8 100644 --- a/less/index.less +++ b/less/index.less @@ -688,7 +688,7 @@ header { #future { padding-left: 6%; - border: 2px solid purple; + } .content-wrapper1 button { @@ -738,9 +738,17 @@ header { max-width: 100%; display: flex; flex-direction: column; - border: 2px solid green; + } + + .container6 { + max-width: 100%; + display: flex; + flex-direction: column; + border: 2px solid green; + } + .villa-content { position: relative; @@ -795,12 +803,24 @@ header { .outskirtsp p { padding: 0% 15% 0% 0%; +} -border: 2px solid blue; +#blocks { + margin-top: 19%; + border: 2px solid blue; +} +.block-content { + margin-top: 48%; + margin-left: 12%; } +.blocksp p { + padding: 0% 15% 0% 0%; + + +} } From fe4bd08bd6890a1b0690723c774f8668e0a21da2 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 8 Jan 2019 10:43:23 -0600 Subject: [PATCH 51/83] placing everything in place according to mobile design --- css/index.css | 41 ++++++++++++++++++++++++--- index.html | 73 ++++++++++++++----------------------------------- less/index.less | 71 +++++++++++++++++++++++++++++++++++++---------- 3 files changed, 115 insertions(+), 70 deletions(-) diff --git a/css/index.css b/css/index.css index f4d00f8ad5..edd7cb3615 100644 --- a/css/index.css +++ b/css/index.css @@ -569,6 +569,10 @@ header { #pic2 { display: none; } +#bottom { + display: flex; + flex-direction: row; +} @media screen and (max-width: 1011px) { .container { display: flex; @@ -624,6 +628,11 @@ header { display: flex; flex-direction: column; } + .container4 #pic2 { + border: 2px solid purple; + position: relative; + padding-bottom: 25%; + } .container5 { max-width: 100%; display: flex; @@ -633,7 +642,11 @@ header { max-width: 100%; display: flex; flex-direction: column; - border: 2px solid green; + } + .container7 { + max-width: 100%; + display: flex; + flex-direction: column; } .villa-content { position: relative; @@ -651,8 +664,15 @@ header { .content-wrapper1 p { padding: 0% 0% 0% 0%; } + .villa-content { + margin-right: 30%; + } + #villas { + padding: 0% 0% 0% 0%; + border: 2px solid yellow; + } #sub { - width: 80%; + width: 75%; position: absolute; padding: 0% 0% 0% 0%; } @@ -663,17 +683,19 @@ header { } .skirt-content { margin-top: 55%; - margin-left: 16%; + margin-left: 12%; } #outskirts { padding-top: 32%; } + #outskirts2 { + padding-bottom: 4%; + } .outskirtsp p { padding: 0% 15% 0% 0%; } #blocks { margin-top: 19%; - border: 2px solid blue; } .block-content { margin-top: 48%; @@ -682,6 +704,17 @@ header { .blocksp p { padding: 0% 15% 0% 0%; } + footer { + max-width: 100%; + display: flex; + flex-direction: column; + border: 2px solid blue; + } + #bottom { + max-width: 100%; + display: flex; + flex-direction: column; + } } @media screen and (max-width: 500px) { header { diff --git a/index.html b/index.html index af600c3bb1..da327f019c 100644 --- a/index.html +++ b/index.html @@ -156,25 +156,30 @@

    We'll never share your email with anyone else.

    - -
    -

    New York

    -

    123 Lane
    Suite 100
    Albany, NY 12345
    2025550144

    - -
    - -
    -

    Florida

    -

    Ocean Drive
    Suite 201
    Orlando, FL 22345
    5025550144

    - -
    -
    -

    California

    -

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

    + + +
    +

    New York

    +

    123 Lane
    Suite 100
    Albany, NY 12345
    2025550144

    + +
    + +
    +

    Florida

    +

    Ocean Drive
    Suite 201
    Orlando, FL 22345
    5025550144

    + +
    +
    +

    California

    +

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

    + +
    -
    + + + @@ -185,42 +190,6 @@

    California

    copyright © 2018 Smith and Jones
    - - - - - - - - -
    diff --git a/less/index.less b/less/index.less index 737b9572f8..44ccc3dce3 100644 --- a/less/index.less +++ b/less/index.less @@ -648,6 +648,12 @@ header { } +#bottom { + display: flex; + flex-direction: row; +} + + @media screen and ( max-width: 1011px) { .container { display: flex; @@ -734,6 +740,13 @@ header { } +.container4 #pic2 { + border: 2px solid purple; + position: relative; + padding-bottom: 25%; + +} + .container5 { max-width: 100%; display: flex; @@ -746,9 +759,17 @@ header { max-width: 100%; display: flex; flex-direction: column; - border: 2px solid green; + } + .container7 { + max-width: 100%; + display: flex; + flex-direction: column; + + } + + .villa-content { position: relative; @@ -775,11 +796,23 @@ header { } +.villa-content { + margin-right: 30%; + +} + +#villas { + padding: 0% 0% 0% 0%; + border: 2px solid yellow; +} + #sub { - width: 80%; + width: 75%; position: absolute; padding: 0% 0% 0% 0%; + + } @@ -792,7 +825,7 @@ header { .skirt-content { margin-top: 55%; - margin-left: 16%; + margin-left: 12%; } #outskirts { @@ -800,6 +833,11 @@ header { } +#outskirts2 { + padding-bottom: 4%; + +} + .outskirtsp p { padding: 0% 15% 0% 0%; @@ -807,7 +845,8 @@ padding: 0% 15% 0% 0%; #blocks { margin-top: 19%; - border: 2px solid blue; + + } .block-content { @@ -818,22 +857,26 @@ padding: 0% 15% 0% 0%; .blocksp p { padding: 0% 15% 0% 0%; +} +footer { + max-width: 100%; + display: flex; + flex-direction: column; + border: 2px solid blue; +} + +#bottom { + max-width: 100%; + display: flex; + flex-direction: column; } - } - // .menu{ - // width: 100%; - // display: flex; + } - // } - - - - - + @media screen and (max-width: 500px) { header { display: flex; From 7d9e648a5df8531a5b660ee05c1b1b348800621e Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 8 Jan 2019 11:56:47 -0600 Subject: [PATCH 52/83] jplaced max-width on .villa-content --- css/index.css | 11 +++-------- less/index.less | 15 +++++++-------- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/css/index.css b/css/index.css index edd7cb3615..c9624fc40f 100644 --- a/css/index.css +++ b/css/index.css @@ -314,7 +314,6 @@ header { } .villa-content p { text-align: center; - padding-right: 28%; margin-left: 10%; padding-top: 7%; font-size: 1.5rem; @@ -353,7 +352,6 @@ header { } .skirt-content { position: absolute; - margin-right: 47%; margin-top: 19%; width: 350px; height: 9%; @@ -630,7 +628,6 @@ header { } .container4 #pic2 { border: 2px solid purple; - position: relative; padding-bottom: 25%; } .container5 { @@ -648,9 +645,6 @@ header { display: flex; flex-direction: column; } - .villa-content { - position: relative; - } #pic1 { display: none; } @@ -665,11 +659,12 @@ header { padding: 0% 0% 0% 0%; } .villa-content { - margin-right: 30%; + max-width: 50%; + border: 2px solid yellow; + position: relative; } #villas { padding: 0% 0% 0% 0%; - border: 2px solid yellow; } #sub { width: 75%; diff --git a/less/index.less b/less/index.less index 44ccc3dce3..06979b811b 100644 --- a/less/index.less +++ b/less/index.less @@ -303,7 +303,6 @@ header { .villa-content p { text-align: center; - padding-right: 28%; margin-left: 10%; padding-top: 7%; font-size: 1.5rem; @@ -353,7 +352,7 @@ header { .skirt-content { position: absolute; - margin-right: 47%; + margin-top: 19%; width: 350px; height: 9%; @@ -742,9 +741,9 @@ header { .container4 #pic2 { border: 2px solid purple; - position: relative; padding-bottom: 25%; + } .container5 { @@ -770,10 +769,7 @@ header { } -.villa-content { - position: relative; -} #pic1 { display: none; @@ -797,13 +793,16 @@ header { } .villa-content { - margin-right: 30%; + max-width: 50%; + + border: 2px solid yellow; + position: relative; } #villas { padding: 0% 0% 0% 0%; - border: 2px solid yellow; + } From 5feccf62689f83456dbe8c90bea9fe6280a0f947 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 8 Jan 2019 13:19:48 -0600 Subject: [PATCH 53/83] fixed top pic bottom margin --- css/index.css | 6 +++++- less/index.less | 10 ++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index c9624fc40f..b338263176 100644 --- a/css/index.css +++ b/css/index.css @@ -577,9 +577,12 @@ header { flex-direction: column; max-width: 100%; } + .text-content { + padding: 0% 0% 0% 0%; + margin-bottom: 12%; + } .text-content p { font-size: 2rem; - border: 2px solid green; } } @media screen and (max-width: 1011px) { @@ -660,6 +663,7 @@ header { } .villa-content { max-width: 50%; + padding: 0% 0% 0% 0%; border: 2px solid yellow; position: relative; } diff --git a/less/index.less b/less/index.less index 06979b811b..cfeb4a5875 100644 --- a/less/index.less +++ b/less/index.less @@ -661,10 +661,14 @@ header { } +.text-content { + padding: 0% 0% 0% 0%; + margin-bottom: 12%; +} .text-content p { font-size: 2rem; - border: 2px solid green; + } @@ -742,6 +746,7 @@ header { .container4 #pic2 { border: 2px solid purple; padding-bottom: 25%; + } @@ -794,9 +799,10 @@ header { .villa-content { max-width: 50%; - + padding: 0% 0% 0% 0%; border: 2px solid yellow; position: relative; + } From e0cc37ca70357358c881c0e43e9dcd6493192266 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 8 Jan 2019 13:31:47 -0600 Subject: [PATCH 54/83] working on footer mobile design --- css/index.css | 5 +++++ less/index.less | 7 +++++++ 2 files changed, 12 insertions(+) diff --git a/css/index.css b/css/index.css index b338263176..4701a21f2f 100644 --- a/css/index.css +++ b/css/index.css @@ -648,6 +648,11 @@ header { display: flex; flex-direction: column; } + #bottom-wrapper { + max-width: 100%; + display: flex; + flex-direction: column; + } #pic1 { display: none; } diff --git a/less/index.less b/less/index.less index cfeb4a5875..c4705f10fd 100644 --- a/less/index.less +++ b/less/index.less @@ -773,6 +773,13 @@ header { } + #bottom-wrapper { + max-width: 100%; + display: flex; + flex-direction: column; + + } + From 6c16b73569ccf3dd61b19134ef93431b47569d7e Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 8 Jan 2019 14:15:34 -0600 Subject: [PATCH 55/83] added opacity to nav menu open design --- css/index.css | 4 ++++ less/index.less | 10 +++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index 4701a21f2f..0c3cae52d8 100644 --- a/css/index.css +++ b/css/index.css @@ -181,6 +181,7 @@ header { line-Height: 85px; color: #FFFFFF; cursor: pointer; + background: rgba(0, 0, 0, 0.9); } .menu a:hover { color: #222222; @@ -188,6 +189,9 @@ header { .menu li:hover { color: #222222; } +.menu h1 { + background: rgba(0, 0, 0, 0.9); +} .menu ul li { list-style-type: none; font-size: 32px; diff --git a/less/index.less b/less/index.less index c4705f10fd..9a2542fcd5 100644 --- a/less/index.less +++ b/less/index.less @@ -115,7 +115,7 @@ header { .nav-button { padding-left: 80%; cursor: pointer; - + } @@ -133,14 +133,22 @@ header { li:hover { color: #222222; } + background: rgba(0, 0, 0, 0.9); } + .menu h1 { + background: rgba(0, 0, 0, 0.9); + + } + + .menu ul li { list-style-type: none; font-size: 32px; padding: 30px 0; text-align: center; + } .menu ul a { From 3ba6acd6fcb6fc69a83b483b5071ea97dc456c4f Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 8 Jan 2019 16:08:37 -0600 Subject: [PATCH 56/83] fixed the header's responsive design --- css/index.css | 11 ++--------- index.html | 11 +++++++++-- less/index.less | 23 +++++++---------------- 3 files changed, 18 insertions(+), 27 deletions(-) diff --git a/css/index.css b/css/index.css index 0c3cae52d8..d23eee7b2b 100644 --- a/css/index.css +++ b/css/index.css @@ -144,12 +144,6 @@ body { background-color: black; height: auto; } -header { - position: fixed; - overflow: hidden; - top: 0%; - width: 80%; -} .container { width: 1012px; height: auto; @@ -158,9 +152,9 @@ header { .container1 { max-width: 100%; } -.container1 header { - width: 80%; +.headwrapper { border: 2px solid gold; + width: 100%; } .container h1 { font-size: 2rem; @@ -170,7 +164,6 @@ header { Color: #FFFFFF; } .nav-button { - padding-left: 80%; cursor: pointer; } .menu { diff --git a/index.html b/index.html index da327f019c..3036feac61 100644 --- a/index.html +++ b/index.html @@ -24,12 +24,19 @@
    -

    S&J -

    + +
    +

    S&J +

    + +
    + +

    S&J

    +
    • Home
      • diff --git a/less/index.less b/less/index.less index 9a2542fcd5..e8abc15453 100644 --- a/less/index.less +++ b/less/index.less @@ -76,13 +76,7 @@ body { } -header { - position: fixed; - overflow: hidden; - top: 0%; - width: 80%; -} .container { width: 1012px; @@ -96,12 +90,12 @@ header { max-width: 100%; } - .container1 header { - width: 80%; - border: 2px solid gold; - - - } + + + .headwrapper { + border: 2px solid gold; + width: 100%; + } .container h1 { @@ -113,7 +107,7 @@ header { } .nav-button { - padding-left: 80%; + cursor: pointer; @@ -494,9 +488,6 @@ header { } - - - .container7 { padding-left: 3%; From 9bc5179fe50519c1faadc4c3f577f323433da1a7 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 8 Jan 2019 17:04:30 -0600 Subject: [PATCH 57/83] tweaking the header nav button --- css/index.css | 12 +++++++++--- index.html | 4 ++-- less/index.less | 13 ++++++++++--- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/css/index.css b/css/index.css index d23eee7b2b..fd99c8811f 100644 --- a/css/index.css +++ b/css/index.css @@ -153,8 +153,14 @@ body { max-width: 100%; } .headwrapper { - border: 2px solid gold; + display: flex; + justify-content: space-between; width: 100%; + background-color: #99a3ad; + border: 2px solid gold; +} +.headwrapper img { + margin-right: 5%; } .container h1 { font-size: 2rem; @@ -568,7 +574,7 @@ body { display: flex; flex-direction: row; } -@media screen and (max-width: 1011px) { +@media screen and (max-width: 500px) { .container { display: flex; flex-direction: column; @@ -582,7 +588,7 @@ body { font-size: 2rem; } } -@media screen and (max-width: 1011px) { +@media screen and (max-width: 500px) { .container1 { max-width: 100%; display: flex; diff --git a/index.html b/index.html index 3036feac61..1ae52d68b7 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,8 @@
      -

      S&J -

      +

      S&J

      +
      diff --git a/less/index.less b/less/index.less index e8abc15453..e85a822fa4 100644 --- a/less/index.less +++ b/less/index.less @@ -93,8 +93,15 @@ body { .headwrapper { - border: 2px solid gold; + display: flex; + justify-content: space-between; width: 100%; + background-color: #99a3ad; + border: 2px solid gold; + } + + .headwrapper img { + margin-right: 5%; } .container h1 { @@ -652,7 +659,7 @@ body { } -@media screen and ( max-width: 1011px) { +@media screen and ( max-width: 500px) { .container { display: flex; flex-direction:column; @@ -674,7 +681,7 @@ body { } -@media screen and (max-width: 1011px) { +@media screen and (max-width: 500px) { .container1 { max-width: 100%; From 8b07a12d3ac906da14d8c722bf8c84271a8767fa Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 10:42:13 -0600 Subject: [PATCH 58/83] working on villa subheader position --- css/index.css | 16 ++++++++++------ less/index.less | 35 ++++++++++++++++++----------------- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/css/index.css b/css/index.css index fd99c8811f..a82595312f 100644 --- a/css/index.css +++ b/css/index.css @@ -156,18 +156,21 @@ body { display: flex; justify-content: space-between; width: 100%; + height: auto; background-color: #99a3ad; border: 2px solid gold; + padding: 1%; } .headwrapper img { margin-right: 5%; } -.container h1 { - font-size: 2rem; - padding: 1% 0 1% 5%; +.container1 h1 { + font-size: 1.5rem; font-weight: bold; background-color: #99a3ad; Color: #FFFFFF; + padding-left: 2%; + border: 2px solid purple; } .nav-button { cursor: pointer; @@ -670,9 +673,10 @@ body { padding: 0% 0% 0% 0%; } .villa-content { - max-width: 50%; - padding: 0% 0% 0% 0%; - border: 2px solid yellow; + width: 50%; + display: flex; + align-items: center; + border: 2px solid greenyellow; position: relative; } #villas { diff --git a/less/index.less b/less/index.less index e85a822fa4..811b67a84d 100644 --- a/less/index.less +++ b/less/index.less @@ -71,7 +71,6 @@ html { body { background-color: black; - height: auto; } @@ -96,28 +95,28 @@ body { display: flex; justify-content: space-between; width: 100%; + height: auto; background-color: #99a3ad; border: 2px solid gold; + padding: 1%; } .headwrapper img { margin-right: 5%; + } - - .container h1 { - - font-size: 2rem; - padding: 1% 0 1% 5%; + .container1 h1 { + font-size: 1.5rem; font-weight: bold; background-color:#99a3ad; Color: #FFFFFF; + padding-left: 2%; + border: 2px solid purple; } - .nav-button { - + .nav-button { cursor: pointer; - - + } .menu { @@ -144,7 +143,7 @@ body { } - .menu ul li { + .menu ul li { list-style-type: none; font-size: 32px; padding: 30px 0; @@ -631,8 +630,7 @@ body { .tab:hover { background: #222222; color: #FFF; - - + } } @@ -678,9 +676,10 @@ body { } +} + -} @media screen and (max-width: 500px) { .container1 { @@ -811,9 +810,11 @@ body { } .villa-content { - max-width: 50%; - padding: 0% 0% 0% 0%; - border: 2px solid yellow; + width: 50%; + display: flex; + align-items: center; + + border: 2px solid greenyellow; position: relative; From 11e9f3bd3d25cec395d44df79a0aa3a564de4968 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 11:22:03 -0600 Subject: [PATCH 59/83] finally got villas subheader on pic in position for mobile design --- css/index.css | 28 +++++++++++----------------- less/index.less | 43 +++++++++++++++++++------------------------ 2 files changed, 30 insertions(+), 41 deletions(-) diff --git a/css/index.css b/css/index.css index a82595312f..e0be8a7cd5 100644 --- a/css/index.css +++ b/css/index.css @@ -320,7 +320,6 @@ body { } .villa-content p { text-align: center; - margin-left: 10%; padding-top: 7%; font-size: 1.5rem; letter-spacing: 7px; @@ -631,13 +630,13 @@ body { padding: 0% 0% 0% 0%; } .container4 { - width: 100%; + max-width: 100%; display: flex; flex-direction: column; } .container4 #pic2 { border: 2px solid purple; - padding-bottom: 25%; + padding: 0% 0% 0% 0%; } .container5 { max-width: 100%; @@ -673,25 +672,20 @@ body { padding: 0% 0% 0% 0%; } .villa-content { - width: 50%; - display: flex; - align-items: center; - border: 2px solid greenyellow; + max-width: 60%; + position: absolute; + background-color: #d8d8d8; + margin-top: 67%; + margin-left: 20%; + } + .villapic #pic2 { position: relative; + border: 2px solid greenyellow; + padding: 4% 4% 35% 4%; } #villas { padding: 0% 0% 0% 0%; } - #sub { - width: 75%; - position: absolute; - padding: 0% 0% 0% 0%; - } - #sub p { - position: absolute; - width: 70%; - padding-right: 10%; - } .skirt-content { margin-top: 55%; margin-left: 12%; diff --git a/less/index.less b/less/index.less index 811b67a84d..fd403d0ac8 100644 --- a/less/index.less +++ b/less/index.less @@ -293,13 +293,14 @@ body { .container4 img { padding: 5% 7% 5% 7%; + } .villa-content { position: absolute; margin-left: 47%; margin-top: 27%; - width: 350px; + width: 350px; height: 9%; background-color: #d8d8d8; } @@ -311,7 +312,7 @@ body { .villa-content p { text-align: center; - margin-left: 10%; + padding-top: 7%; font-size: 1.5rem; letter-spacing: 7px; @@ -742,7 +743,7 @@ body { } .container4 { - width: 100%; + max-width: 100%; display: flex; flex-direction: column; @@ -750,7 +751,7 @@ body { .container4 #pic2 { border: 2px solid purple; - padding-bottom: 25%; + padding: 0% 0% 0% 0%; @@ -810,37 +811,31 @@ body { } .villa-content { - width: 50%; - display: flex; - align-items: center; - - border: 2px solid greenyellow; - position: relative; - + max-width: 60%; + position: absolute; + background-color: #d8d8d8; + margin-top: 67%; + margin-left: 20%; +} + +.villapic #pic2 { + position: relative; + border: 2px solid greenyellow; + padding: 4% 4% 35% 4%; } + + #villas { padding: 0% 0% 0% 0%; } -#sub { - width: 75%; - position: absolute; - padding: 0% 0% 0% 0%; - - -} -#sub p { - position: absolute; - width: 70%; - padding-right: 10%; - -} + .skirt-content { margin-top: 55%; From 3301c78365ad409eccefa201ec05d42640f9604e Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 11:50:59 -0600 Subject: [PATCH 60/83] finishing mobile design, spacing, margin, and working on dropdown menu header and opacity --- css/index.css | 12 ++++++------ less/index.less | 26 +++++++++++--------------- 2 files changed, 17 insertions(+), 21 deletions(-) diff --git a/css/index.css b/css/index.css index e0be8a7cd5..2c149e4dd5 100644 --- a/css/index.css +++ b/css/index.css @@ -158,7 +158,6 @@ body { width: 100%; height: auto; background-color: #99a3ad; - border: 2px solid gold; padding: 1%; } .headwrapper img { @@ -170,7 +169,6 @@ body { background-color: #99a3ad; Color: #FFFFFF; padding-left: 2%; - border: 2px solid purple; } .nav-button { cursor: pointer; @@ -618,6 +616,10 @@ body { flex-direction: column; padding: 5%; } + .container2 img { + margin-top: 10%; + margin-bottom: 2%; + } .container3 h2 { padding: 0% 0% 0% 0%; } @@ -635,7 +637,6 @@ body { flex-direction: column; } .container4 #pic2 { - border: 2px solid purple; padding: 0% 0% 0% 0%; } .container5 { @@ -672,15 +673,14 @@ body { padding: 0% 0% 0% 0%; } .villa-content { - max-width: 60%; + max-width: 100%; position: absolute; background-color: #d8d8d8; margin-top: 67%; - margin-left: 20%; + margin-left: 13%; } .villapic #pic2 { position: relative; - border: 2px solid greenyellow; padding: 4% 4% 35% 4%; } #villas { diff --git a/less/index.less b/less/index.less index fd403d0ac8..7f64a3241f 100644 --- a/less/index.less +++ b/less/index.less @@ -97,7 +97,6 @@ body { width: 100%; height: auto; background-color: #99a3ad; - border: 2px solid gold; padding: 1%; } @@ -111,7 +110,7 @@ body { background-color:#99a3ad; Color: #FFFFFF; padding-left: 2%; - border: 2px solid purple; + } .nav-button { @@ -722,6 +721,12 @@ body { flex-direction: column; padding: 5%; +} + +.container2 img { + margin-top: 10%; + margin-bottom: 2%; + } @@ -750,11 +755,7 @@ body { } .container4 #pic2 { - border: 2px solid purple; - padding: 0% 0% 0% 0%; - - - + padding: 0% 0% 0% 0%; } .container5 { @@ -811,17 +812,17 @@ body { } .villa-content { - max-width: 60%; + max-width: 100%; position: absolute; background-color: #d8d8d8; margin-top: 67%; - margin-left: 20%; + margin-left: 13%; } .villapic #pic2 { position: relative; - border: 2px solid greenyellow; + padding: 4% 4% 35% 4%; } @@ -832,11 +833,6 @@ body { } - - - - - .skirt-content { margin-top: 55%; margin-left: 12%; From c8dc317d22c8e6891dcb1e5541070c45d4569ea7 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 12:17:53 -0600 Subject: [PATCH 61/83] making final adjustments --- css/index.css | 10 +++++++++- index.html | 9 ++++++--- less/index.less | 20 +++++++++++++++----- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index 2c149e4dd5..93eb607ae3 100644 --- a/css/index.css +++ b/css/index.css @@ -713,7 +713,6 @@ body { max-width: 100%; display: flex; flex-direction: column; - border: 2px solid blue; } #bottom { max-width: 100%; @@ -727,4 +726,13 @@ body { flex-direction: column; width: 100%; } + .container19 { + max-width: 100%; + display: flex; + flex-direction: column; + padding: 0% 0% 0% 0%; + } + .copyright h6 { + padding-left: 7%; + } } diff --git a/index.html b/index.html index 1ae52d68b7..aa0977637e 100644 --- a/index.html +++ b/index.html @@ -192,9 +192,12 @@

      California

    -
    - -
    copyright © 2018 Smith and Jones
    +
    +
    + +
    copyright © 2018 Smith and Jones
    + +
    diff --git a/less/index.less b/less/index.less index 7f64a3241f..90878cb2e3 100644 --- a/less/index.less +++ b/less/index.less @@ -75,8 +75,6 @@ body { } - - .container { width: 1012px; height: auto; @@ -89,8 +87,6 @@ body { max-width: 100%; } - - .headwrapper { display: flex; justify-content: space-between; @@ -873,7 +869,7 @@ footer { max-width: 100%; display: flex; flex-direction: column; - border: 2px solid blue; + } #bottom { @@ -894,6 +890,20 @@ footer { width: 100% } + + .container19 { + max-width: 100%; + display: flex; + flex-direction: column; + + padding: 0% 0% 0% 0%; + + } + + .copyright h6 { + padding-left: 7%; + } + } From 2db3131ade4329b50499392f14d621411b7c6571 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 13:11:54 -0600 Subject: [PATCH 62/83] trying to adjust size of menu close image. --- css/index.css | 13 +++++++++---- index.html | 7 ++++--- less/index.less | 20 +++++++++++++++----- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/css/index.css b/css/index.css index 93eb607ae3..95eea13ff1 100644 --- a/css/index.css +++ b/css/index.css @@ -173,6 +173,11 @@ body { .nav-button { cursor: pointer; } +.headwrapper .nav-button2 { + cursor: pointer; + border: 2px solid green; + padding: 0% 0% 0% 0%; +} .menu { display: none; background-color: #99a3ad; @@ -191,6 +196,10 @@ body { } .menu h1 { background: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: space-between; + width: 100%; + background-color: #99a3ad; } .menu ul li { list-style-type: none; @@ -210,10 +219,6 @@ body { .menu--open { display: block; } -.container1 img { - max-width: 100%; - height: auto; -} .text-content { width: 100%; margin-top: -40%; diff --git a/index.html b/index.html index aa0977637e..88082f251c 100644 --- a/index.html +++ b/index.html @@ -33,9 +33,10 @@

    S&J

    - -

    S&J -

    +
    +

    S&J

    + +
      diff --git a/less/index.less b/less/index.less index 90878cb2e3..c94d2d363c 100644 --- a/less/index.less +++ b/less/index.less @@ -111,9 +111,16 @@ body { .nav-button { cursor: pointer; + } + .headwrapper .nav-button2 { + cursor: pointer; + border: 2px solid green; + padding: 0% 0% 0% 0%; + } + .menu { display: none; background-color: #99a3ad; @@ -121,6 +128,7 @@ body { font-Size: 48px; line-Height: 85px; color: #FFFFFF; + cursor: pointer; a:hover { color: #222222; @@ -130,10 +138,17 @@ body { } background: rgba(0, 0, 0, 0.9); + } .menu h1 { background: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: space-between; + width: 100%; + + background-color: #99a3ad; + } @@ -163,11 +178,6 @@ body { } - .container1 img { - max-width: 100%; - height: auto; - - } .text-content { width: 100%; From ab41e882bdefbec46bb430e345afe11f5bebd670 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 13:47:28 -0600 Subject: [PATCH 63/83] fixed nav close button --- css/index.css | 18 +++++++++++++++--- index.html | 6 +++--- less/index.less | 28 ++++++++++++++++++++++++---- 3 files changed, 42 insertions(+), 10 deletions(-) diff --git a/css/index.css b/css/index.css index 95eea13ff1..8d2128e0b4 100644 --- a/css/index.css +++ b/css/index.css @@ -161,7 +161,7 @@ body { padding: 1%; } .headwrapper img { - margin-right: 5%; + max-width: 100%; } .container1 h1 { font-size: 1.5rem; @@ -173,11 +173,23 @@ body { .nav-button { cursor: pointer; } -.headwrapper .nav-button2 { +.headwrapper .nav-button { cursor: pointer; - border: 2px solid green; padding: 0% 0% 0% 0%; } +.headwrapper2 { + position: relative; + width: 100%; + height: auto; + background-color: #99a3ad; + padding: 1%; +} +.headwrapper2 img { + margin-left: 92.5%; + position: absolute; + margin-top: 3%; + border: 2px solid green; +} .menu { display: none; background-color: #99a3ad; diff --git a/index.html b/index.html index 88082f251c..53b2e0a46d 100644 --- a/index.html +++ b/index.html @@ -33,9 +33,9 @@

      S&J

      -
      -

      S&J

      - +
      +

      S&J +

      diff --git a/less/index.less b/less/index.less index c94d2d363c..48ffe3c8c8 100644 --- a/less/index.less +++ b/less/index.less @@ -97,7 +97,7 @@ body { } .headwrapper img { - margin-right: 5%; + max-width: 100%; } .container1 h1 { @@ -112,15 +112,35 @@ body { .nav-button { cursor: pointer; - } - .headwrapper .nav-button2 { + .headwrapper .nav-button { cursor: pointer; - border: 2px solid green; + padding: 0% 0% 0% 0%; } + .headwrapper2 { + + position: relative; + width: 100%; + height: auto; + background-color: #99a3ad; + padding: 1%; + } + + .headwrapper2 img { + margin-left: 92.5%; + position: absolute; + margin-top: 3%; + + + border: 2px solid green; + + + + } + .menu { display: none; background-color: #99a3ad; From fc417f0838efc7b5c3129344805f213ca9037eb0 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 15:07:26 -0600 Subject: [PATCH 64/83] working on nav menu background color --- css/index.css | 4 +--- less/index.less | 11 ++++------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/css/index.css b/css/index.css index 8d2128e0b4..05378148d1 100644 --- a/css/index.css +++ b/css/index.css @@ -182,13 +182,11 @@ body { width: 100%; height: auto; background-color: #99a3ad; - padding: 1%; } .headwrapper2 img { margin-left: 92.5%; position: absolute; margin-top: 3%; - border: 2px solid green; } .menu { display: none; @@ -198,7 +196,7 @@ body { line-Height: 85px; color: #FFFFFF; cursor: pointer; - background: rgba(0, 0, 0, 0.9); + background: rgba(216, 218, 221, 0.9); } .menu a:hover { color: #222222; diff --git a/less/index.less b/less/index.less index 48ffe3c8c8..515f31f3df 100644 --- a/less/index.less +++ b/less/index.less @@ -126,21 +126,18 @@ body { width: 100%; height: auto; background-color: #99a3ad; - padding: 1%; + } .headwrapper2 img { margin-left: 92.5%; position: absolute; margin-top: 3%; - - - border: 2px solid green; - - } + + .menu { display: none; background-color: #99a3ad; @@ -156,7 +153,7 @@ body { li:hover { color: #222222; } - background: rgba(0, 0, 0, 0.9); + background: rgba(216, 218, 221, 0.9); } From 402c48b7d181a694450efeb8511b034001cd7e07 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 15:48:10 -0600 Subject: [PATCH 65/83] working on services header and services menu header --- css/index.css | 5 ++++- less/Untitled-1.less | 0 less/index.less | 14 +++++++++----- 3 files changed, 13 insertions(+), 6 deletions(-) delete mode 100644 less/Untitled-1.less diff --git a/css/index.css b/css/index.css index 05378148d1..143b95473a 100644 --- a/css/index.css +++ b/css/index.css @@ -501,10 +501,13 @@ body { } .container11 h1 { font-size: 2rem; - padding: 1% 0 1% 5%; + padding: 1% 0 1% 2%; font-weight: bold; background-color: #99a3ad; Color: #FFFFFF; + display: flex; + justify-content: space-between; + padding-right: 2%; } .container11 p { padding-top: 16%; diff --git a/less/Untitled-1.less b/less/Untitled-1.less deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/less/index.less b/less/index.less index 515f31f3df..0dec2f0d11 100644 --- a/less/index.less +++ b/less/index.less @@ -140,7 +140,7 @@ body { .menu { display: none; - background-color: #99a3ad; + background-color: #99a3ad(0, 0, 0, 0.9); font-Weight: Bold; font-Size: 48px; line-Height: 85px; @@ -153,7 +153,7 @@ body { li:hover { color: #222222; } - background: rgba(216, 218, 221, 0.9); + background: #99a3ad; } @@ -163,8 +163,7 @@ body { display: flex; justify-content: space-between; width: 100%; - - background-color: #99a3ad; + background-color: #99a3ad; } @@ -559,8 +558,12 @@ body { font-weight: bold; background-color: #99a3ad; Color: #FFFFFF; + + } + + .container11 p { padding-top: 16%; @@ -589,7 +592,7 @@ body { font-size: 1rem; font-weight: bold; padding: 2% 0%; - + } .container14 { @@ -606,6 +609,7 @@ body { padding-top: 10%; margin-right: 15%; + } .text-content2 { From 89bf7f1dbf77808c6149e858566cdee59c229b60 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 17:23:06 -0600 Subject: [PATCH 66/83] working on sevices menu close image/button --- css/index.css | 26 +++++++++++++++--------- less/index.less | 54 +++++++++++++++++++++++++++++++++++++------------ services.html | 8 +++++++- 3 files changed, 64 insertions(+), 24 deletions(-) diff --git a/css/index.css b/css/index.css index 143b95473a..0bad19283b 100644 --- a/css/index.css +++ b/css/index.css @@ -190,13 +190,11 @@ body { } .menu { display: none; - background-color: #99a3ad; font-Weight: Bold; font-Size: 48px; line-Height: 85px; color: #FFFFFF; - cursor: pointer; - background: rgba(216, 218, 221, 0.9); + background: rgba(151, 153, 161, 0.856); } .menu a:hover { color: #222222; @@ -205,7 +203,6 @@ body { color: #222222; } .menu h1 { - background: rgba(0, 0, 0, 0.9); display: flex; justify-content: space-between; width: 100%; @@ -216,6 +213,7 @@ body { font-size: 32px; padding: 30px 0; text-align: center; + cursor: pointer; } .menu ul a { list-style-type: none; @@ -333,6 +331,7 @@ body { } .villa-content p { text-align: center; + padding-right: 2%; padding-top: 7%; font-size: 1.5rem; letter-spacing: 7px; @@ -342,7 +341,6 @@ body { flex-direction: column; padding-left: 5%; padding-bottom: 5%; - width: 100%; padding: 5% 7% 5% 7%; } #villas { @@ -387,7 +385,7 @@ body { color: black ; width: 100%; padding-left: 28%; - padding-top: 7%; + padding-top: 9%; line-height: 24px; } #outskirts2 { @@ -415,7 +413,7 @@ body { .block-content { position: absolute; margin-left: 47%; - margin-top: 15%; + margin-top: 13%; width: 350px; height: 9%; background-color: #d8d8d8; @@ -500,14 +498,22 @@ body { padding: 0% 7% 0% 8%; } .container11 h1 { - font-size: 2rem; - padding: 1% 0 1% 2%; + font-size: 1.5rem; font-weight: bold; background-color: #99a3ad; Color: #FFFFFF; display: flex; justify-content: space-between; - padding-right: 2%; +} +.container12 { + max-width: 100%; +} +.container12 h1 { + font-size: 1.5rem; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; + padding-left: 2%; } .container11 p { padding-top: 16%; diff --git a/less/index.less b/less/index.less index 0dec2f0d11..41955e401c 100644 --- a/less/index.less +++ b/less/index.less @@ -116,8 +116,8 @@ body { .headwrapper .nav-button { cursor: pointer; - padding: 0% 0% 0% 0%; + } .headwrapper2 { @@ -127,6 +127,7 @@ body { height: auto; background-color: #99a3ad; + } .headwrapper2 img { @@ -140,26 +141,26 @@ body { .menu { display: none; - background-color: #99a3ad(0, 0, 0, 0.9); + font-Weight: Bold; font-Size: 48px; line-Height: 85px; color: #FFFFFF; - cursor: pointer; + a:hover { color: #222222; } li:hover { color: #222222; } - background: #99a3ad; + background: rgba(151, 153, 161, 0.856); } .menu h1 { - background: rgba(0, 0, 0, 0.9); + display: flex; justify-content: space-between; width: 100%; @@ -174,7 +175,7 @@ body { font-size: 32px; padding: 30px 0; text-align: center; - + cursor: pointer; } .menu ul a { @@ -333,7 +334,7 @@ body { .villa-content p { text-align: center; - + padding-right: 2%; padding-top: 7%; font-size: 1.5rem; letter-spacing: 7px; @@ -341,11 +342,12 @@ body { } .villasp { + display: flex; flex-direction: column; padding-left: 5%; padding-bottom: 5%; - width: 100%; + padding: 5% 7% 5% 7%; } @@ -395,7 +397,7 @@ body { padding: 7.5%; font-size: 1.5rem; letter-spacing: 7px; - + } #outskirts { @@ -403,7 +405,7 @@ body { color: black ; width: 100%; padding-left: 28%; - padding-top: 7%; + padding-top: 9%; line-height: 24px; } @@ -439,10 +441,11 @@ body { .block-content { position: absolute; margin-left: 47%; - margin-top: 15%; + margin-top: 13%; width: 350px; height: 9%; background-color: #d8d8d8; + } @@ -553,17 +556,42 @@ body { } .container11 h1 { - font-size: 2rem; - padding: 1% 0 1% 5%; + font-size: 1.5rem; + font-weight: bold; background-color: #99a3ad; Color: #FFFFFF; + display: flex; + justify-content: space-between; + } + + + + + + +.container12 { + max-width: 100%; + } + + .container12 h1 { + font-size: 1.5rem; + font-weight: bold; + background-color:#99a3ad; + Color: #FFFFFF; + padding-left: 2%; + + } + + + + .container11 p { padding-top: 16%; diff --git a/services.html b/services.html index 7f47f1a324..97054ba95f 100644 --- a/services.html +++ b/services.html @@ -14,9 +14,15 @@
      +
      + +

      S&J

      + +
      -

      S&J

      + + jumbo

      Services

      From 5369152d811c78351f6bb12413a86414ee911477 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 17:45:20 -0600 Subject: [PATCH 67/83] final push --- css/index.css | 12 +++++++++--- less/index.less | 28 +++++++++++++--------------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/css/index.css b/css/index.css index 0bad19283b..def985c9f4 100644 --- a/css/index.css +++ b/css/index.css @@ -499,12 +499,18 @@ body { } .container11 h1 { font-size: 1.5rem; + position: relative; font-weight: bold; background-color: #99a3ad; Color: #FFFFFF; display: flex; justify-content: space-between; } +.menu .nav-button { + position: absolute; + margin-left: 94%; + margin-top: 2%; +} .container12 { max-width: 100%; } @@ -552,11 +558,11 @@ body { } .text-content2 { width: 50%; + padding-right: 5%; } .construction-pic { - width: 50%; - padding-left: 3.5%; - padding-top: 8%; + max-width: 100%; + margin-top: 16%; } .container15 { padding-left: 3%; diff --git a/less/index.less b/less/index.less index 41955e401c..430cf058b0 100644 --- a/less/index.less +++ b/less/index.less @@ -557,22 +557,22 @@ body { .container11 h1 { font-size: 1.5rem; - + position: relative; font-weight: bold; background-color: #99a3ad; Color: #FFFFFF; display: flex; justify-content: space-between; - - - -} - - - + +} +.menu .nav-button { + position: absolute; + margin-left: 94%; + margin-top: 2%; +} @@ -589,9 +589,6 @@ body { } - - - .container11 p { padding-top: 16%; @@ -642,14 +639,15 @@ body { .text-content2 { width: 50%; + padding-right:5%; } .construction-pic { - width: 50%; - padding-left: 3.5%; - padding-top: 8%; - + max-width: 100%; + margin-top: 16%; + + } From 561c90e8a9fcc189ae4956b3ef180531bb540acc Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 17:56:23 -0600 Subject: [PATCH 68/83] fixed villas paragraph --- css/index.css | 3 ++- less/index.less | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index def985c9f4..b123961f87 100644 --- a/css/index.css +++ b/css/index.css @@ -341,7 +341,8 @@ body { flex-direction: column; padding-left: 5%; padding-bottom: 5%; - padding: 5% 7% 5% 7%; + margin-left: 15%; + padding: 5% 0% 5% 0%; } #villas { font-size: 1.125rem; diff --git a/less/index.less b/less/index.less index 430cf058b0..4df8bbb4c4 100644 --- a/less/index.less +++ b/less/index.less @@ -347,8 +347,8 @@ body { flex-direction: column; padding-left: 5%; padding-bottom: 5%; - - padding: 5% 7% 5% 7%; + margin-left: 15%; + padding: 5% 0% 5% 0%; } From 1e3aaeb958cce2db9070488ffea30c14014f5780 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 22:09:17 -0600 Subject: [PATCH 69/83] working on opacity for nav menu --- css/index.css | 7 ++----- index.html | 20 ++++++++++---------- less/index.less | 7 ++----- 3 files changed, 14 insertions(+), 20 deletions(-) diff --git a/css/index.css b/css/index.css index b123961f87..0ecb2bcac6 100644 --- a/css/index.css +++ b/css/index.css @@ -140,10 +140,6 @@ table { html { font-family: Roboto, Arial, sans-serif; } -body { - background-color: black; - height: auto; -} .container { width: 1012px; height: auto; @@ -194,7 +190,8 @@ body { font-Size: 48px; line-Height: 85px; color: #FFFFFF; - background: rgba(151, 153, 161, 0.856); + background: #99a3ad; + opacity: 0.5; } .menu a:hover { color: #222222; diff --git a/index.html b/index.html index 53b2e0a46d..8f9b045192 100644 --- a/index.html +++ b/index.html @@ -58,8 +58,8 @@

      S&J
      - penandpad - penandpad + penandpad + penandpad

      Smith & Jones Architects

      @@ -72,8 +72,8 @@

      Smith & Jones Architects

      - skypic - skypic + skypic + skypic

      Futuristic Designs

      @@ -88,8 +88,8 @@

      Futuristic Designs

      Recent Projects

      - villas - mobile villa + villas + mobile villa
      @@ -108,8 +108,8 @@

      Recent Projects

      - pool - pool + pool + pool
      @@ -126,8 +126,8 @@

      Recent Projects

      - bock - block + bock + block

      THE BLOCKS

      diff --git a/less/index.less b/less/index.less index 4df8bbb4c4..e7f2470051 100644 --- a/less/index.less +++ b/less/index.less @@ -69,11 +69,7 @@ html { font-family: Roboto, Arial, sans-serif; } -body { - background-color: black; - height: auto; -} .container { width: 1012px; @@ -154,7 +150,8 @@ body { li:hover { color: #222222; } - background: rgba(151, 153, 161, 0.856); + background: #99a3ad; + opacity: 0.5; } From a43bbe164bcd3c26d3db1f2929b51c56bdd35abd Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jan 2019 22:17:21 -0600 Subject: [PATCH 70/83] set the vh to 100 --- css/index.css | 1 + less/index.less | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index 0ecb2bcac6..e88a640c0f 100644 --- a/css/index.css +++ b/css/index.css @@ -192,6 +192,7 @@ html { color: #FFFFFF; background: #99a3ad; opacity: 0.5; + height: 100vh; } .menu a:hover { color: #222222; diff --git a/less/index.less b/less/index.less index e7f2470051..a83fc9f5ea 100644 --- a/less/index.less +++ b/less/index.less @@ -152,7 +152,7 @@ html { } background: #99a3ad; opacity: 0.5; - + height: 100vh; } From 402781e25f8f1d1bde8b794da405ecb48410687f Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 10:28:44 -0600 Subject: [PATCH 71/83] working on services menu --- css/index.css | 45 ++++++++++++++++++++++++++++++++-- less/index.less | 64 ++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 104 insertions(+), 5 deletions(-) diff --git a/css/index.css b/css/index.css index e88a640c0f..1705704497 100644 --- a/css/index.css +++ b/css/index.css @@ -191,7 +191,7 @@ html { line-Height: 85px; color: #FFFFFF; background: #99a3ad; - opacity: 0.5; + opacity: 0.9; height: 100vh; } .menu a:hover { @@ -505,11 +505,52 @@ html { display: flex; justify-content: space-between; } -.menu .nav-button { +.container12 .menu { + display: none; + font-Weight: Bold; + font-Size: 48px; + line-Height: 85px; + color: #FFFFFF; + background: #99a3ad; + opacity: 0.9; + height: 100vh; +} +.container12 .menu a:hover { + color: #222222; +} +.container12 .menu li:hover { + color: #222222; +} +.container12 .menu h1 { + display: flex; + justify-content: space-between; + width: 100%; + background-color: #99a3ad; +} +.container12 .menu .nav-button { position: absolute; margin-left: 94%; margin-top: 2%; } +.container12 .menu ul li { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + cursor: pointer; +} +.container12 .menu ul a { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + color: #FFFFFF; + text-decoration: none; + cursor: pointer; +} +.container12 .menu--open { + display: block; +} .container12 { max-width: 100%; } diff --git a/less/index.less b/less/index.less index a83fc9f5ea..774a7ce354 100644 --- a/less/index.less +++ b/less/index.less @@ -151,9 +151,8 @@ html { color: #222222; } background: #99a3ad; - opacity: 0.5; + opacity: 0.9; height: 100vh; - } .menu h1 { @@ -564,7 +563,41 @@ html { } -.menu .nav-button { + +.container12 .menu { + display: none; + + font-Weight: Bold; + font-Size: 48px; + line-Height: 85px; + color: #FFFFFF; + + + a:hover { + color: #222222; + } + li:hover { + color: #222222; + } + background: #99a3ad; + opacity: 0.9; + height: 100vh; + +} + +.container12 .menu h1 { + + display: flex; + justify-content: space-between; + width: 100%; + background-color: #99a3ad; + + +} + + + +.container12 .menu .nav-button { position: absolute; margin-left: 94%; margin-top: 2%; @@ -572,6 +605,31 @@ html { } +.container12 .menu ul li { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + cursor: pointer; +} + +.container12 .menu ul a { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + color: #FFFFFF; + text-decoration: none; + cursor: pointer; + +} + +.container12 .menu--open { + display: block; + +} + + .container12 { max-width: 100%; From 90b251291e38f0f7ef6bb48cdea8c98fb86cb236 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 10:34:17 -0600 Subject: [PATCH 72/83] fixed services opacity and positioning, menu covers full screen with 100vh --- services.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/services.html b/services.html index 97054ba95f..7ea8f2c919 100644 --- a/services.html +++ b/services.html @@ -23,24 +23,24 @@

      S&J

      + +
      +

      S&J +

      + + +
      +
      jumbo

      Services

      -
      -

      S&J -

      - - -
      -
      -

      Services include: completely synergize resource taxing relationships via premier niche markets. Professionally From b4dcdc7824c198b35a9c0c94503e01f9a53ae010 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 10:45:35 -0600 Subject: [PATCH 73/83] cleaning up index.less and labeling design segments --- css/index.css | 5 +---- less/index.less | 52 +++++++++++++++++++++++-------------------------- 2 files changed, 25 insertions(+), 32 deletions(-) diff --git a/css/index.css b/css/index.css index 1705704497..a0752f0459 100644 --- a/css/index.css +++ b/css/index.css @@ -133,7 +133,7 @@ table { border-collapse: collapse; border-spacing: 0; } -/* Your Code Goes Here */ +/* GLOBAL DESIGNS....XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ * { box-sizing: border-box; } @@ -289,9 +289,6 @@ html { padding-bottom: 2%; padding-right: 16%; } -.container2 p { - padding-left: 15%; -} .container3 button { width: 28%; height: 12%; diff --git a/less/index.less b/less/index.less index 774a7ce354..1ae060c0a2 100644 --- a/less/index.less +++ b/less/index.less @@ -59,7 +59,7 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ +/* GLOBAL DESIGNS....XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ * { box-sizing: border-box; @@ -79,6 +79,9 @@ html { } +// HOME PAGE.......XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX + + .container1 { max-width: 100%; } @@ -209,6 +212,9 @@ html { } + + // CONTAINER 2... XXXXXXXXXXXXXXX + .container2 { max-width: 100%; background-color: #FFFFFF; @@ -247,6 +253,7 @@ html { padding-left: 15%; } + .container2 button { width: 28%; @@ -256,6 +263,8 @@ html { border: 1px solid black; } +// CONTAINER3........XXXXXXXXXXXXX + .container3 { background-color: #FFFFFF; @@ -280,11 +289,6 @@ html { } - .container2 p { - padding-left: 15%; - - } - .container3 button { width: 28%; height: 12%; @@ -292,6 +296,8 @@ html { border: 1px solid black; } +// CONTAINER4......XXXXXXXXXXXXX + .container4 { background-color: #FFFFFF; display: flex; @@ -357,6 +363,9 @@ html { line-height: 25px; } + + // CONTAINER5......XXXXXXXXXXXX + .container5 img { padding: 5% 7% 5% 7%; } @@ -414,6 +423,9 @@ html { padding-top: 3%; line-height: 25px; } + + + // CONTAINER6....XXXXXXXXX .container6 { background-color: #FFFFFF; @@ -515,6 +527,9 @@ html { } +// CONTAINER7....XXXXXXXXXXXXXXXXX + + .container7 { padding-left: 3%; @@ -596,7 +611,6 @@ html { } - .container12 .menu .nav-button { position: absolute; margin-left: 94%; @@ -629,8 +643,6 @@ html { } - - .container12 { max-width: 100%; } @@ -665,7 +677,6 @@ html { } - .tabs-links button { width: 20%; height: auto; @@ -702,14 +713,11 @@ html { max-width: 100%; margin-top: 16%; - - } .container15 { padding-left: 3%; padding-top: 4%; - } @@ -764,6 +772,7 @@ html { flex-direction: row; } +// MOBILE DESIGN......XXXXXXXXXXXXXXXXXXXXX @media screen and ( max-width: 500px) { .container { @@ -779,15 +788,11 @@ html { } .text-content p { - font-size: 2rem; - - + font-size: 2rem; } } - - @media screen and (max-width: 500px) { .container1 { @@ -821,8 +826,6 @@ html { border: 1px solid black; } - - .container2 { max-width: 100%; display: flex; @@ -837,7 +840,6 @@ html { } - .container3 h2 { padding: 0% 0% 0% 0%; @@ -905,8 +907,6 @@ html { #pic2 { display: inherit; width: 100%; - - } .picwrapper { @@ -964,7 +964,6 @@ padding: 0% 15% 0% 0%; #blocks { margin-top: 19%; - } .block-content { @@ -980,8 +979,7 @@ padding: 0% 15% 0% 0%; footer { max-width: 100%; display: flex; - flex-direction: column; - + flex-direction: column; } #bottom { @@ -990,8 +988,6 @@ footer { flex-direction: column; } - - } From f6c1fcbcdf7049bfcb9ba1a47e2b3205740a1d18 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 11:31:06 -0600 Subject: [PATCH 74/83] fixed the spacing on services page between image and paragraph, also fixed the size --- css/index.css | 10 +++++----- less/index.less | 19 ++++++++++--------- services.html | 22 +++++++++++----------- 3 files changed, 26 insertions(+), 25 deletions(-) diff --git a/css/index.css b/css/index.css index a0752f0459..75fb2c3680 100644 --- a/css/index.css +++ b/css/index.css @@ -582,10 +582,10 @@ html { padding: 2% 0%; } .container14 { - width: 100%; - background-color: white; + width: 132%; display: flex; flex-direction: row; + background-color: white; } .container14 h3 { font-size: 1.75rem; @@ -594,11 +594,11 @@ html { margin-right: 15%; } .text-content2 { - width: 50%; - padding-right: 5%; + width: 170%; + margin-right: 5%; } .construction-pic { - max-width: 100%; + width: 180%; margin-top: 16%; } .container15 { diff --git a/less/index.less b/less/index.less index 1ae060c0a2..b0bd5facd1 100644 --- a/less/index.less +++ b/less/index.less @@ -687,11 +687,11 @@ html { } .container14 { - width: 100%; - background-color: white; - display: flex; + width: 132%; + display: flex; flex-direction: row; - + background-color: white; + } .container14 h3 { @@ -704,15 +704,16 @@ html { } .text-content2 { - width: 50%; - padding-right:5%; - + width: 170%; + margin-right: 5%; + } .construction-pic { - max-width: 100%; + width: 180%; margin-top: 16%; - + + } .container15 { diff --git a/services.html b/services.html index 7ea8f2c919..22080b469d 100644 --- a/services.html +++ b/services.html @@ -34,12 +34,12 @@

      S&J
    • Contact

    -
    - jumbo -
    -

    Services

    - -
    + jumbo +
    +

    Services

    + +
    +
    @@ -69,11 +69,11 @@

    Pre-Construction

    proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.

    -
    -
    - construction - -
    + +
    +
    + construction +
    From ab719207c91656d4bfa7342771f515a74c373645 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 11:54:41 -0600 Subject: [PATCH 75/83] fixed villasp on home page --- css/index.css | 3 +-- index.html | 12 ++++++------ less/index.less | 4 ++-- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/css/index.css b/css/index.css index 75fb2c3680..1430d80fb5 100644 --- a/css/index.css +++ b/css/index.css @@ -334,9 +334,8 @@ html { .villasp { display: flex; flex-direction: column; - padding-left: 5%; + margin-right: 20%; padding-bottom: 5%; - margin-left: 15%; padding: 5% 0% 5% 0%; } #villas { diff --git a/index.html b/index.html index 8f9b045192..e324df2ea8 100644 --- a/index.html +++ b/index.html @@ -96,12 +96,12 @@

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

    +

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

    diff --git a/less/index.less b/less/index.less index b0bd5facd1..f606f11c36 100644 --- a/less/index.less +++ b/less/index.less @@ -347,9 +347,9 @@ html { display: flex; flex-direction: column; - padding-left: 5%; + margin-right: 20%; padding-bottom: 5%; - margin-left: 15%; + padding: 5% 0% 5% 0%; } From d94d1ea6755a578226959c49722f893a9c67dc30 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 12:21:58 -0600 Subject: [PATCH 76/83] fixed foooter spacing on home page --- css/index.css | 4 ++++ less/index.less | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/css/index.css b/css/index.css index 1430d80fb5..b194375b0f 100644 --- a/css/index.css +++ b/css/index.css @@ -467,6 +467,10 @@ html { } #bottom-wrapper p { padding: 1%; + padding-left: 15%; +} +#bottom-wrapper h3 { + padding-left: 15%; } .container7 { padding-left: 3%; diff --git a/less/index.less b/less/index.less index f606f11c36..b42e32d540 100644 --- a/less/index.less +++ b/less/index.less @@ -524,8 +524,13 @@ html { #bottom-wrapper p { padding: 1%; + padding-left: 15%; } +#bottom-wrapper h3 { + + padding-left: 15%; +} // CONTAINER7....XXXXXXXXXXXXXXXXX From b3e553ba73af13c94aa39a645f4e04b5ee8c9f6b Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 13:55:59 -0600 Subject: [PATCH 77/83] working on header on contact page --- contact.html | 42 +++++++++++++++++++++++++++++++++++++++++- css/index.css | 16 ++++++++++++++++ index.html | 2 +- less/index.less | 34 ++++++++++++++++++++++++++++++++++ services.html | 2 +- 5 files changed, 93 insertions(+), 3 deletions(-) diff --git a/contact.html b/contact.html index 868844fe14..1666a67318 100644 --- a/contact.html +++ b/contact.html @@ -1,3 +1,5 @@ + + @@ -11,8 +13,45 @@ +
    +
    + +

    S&J

    + + +
    +
    + + + +
    +

    S&J +

    + + +
    + jumbo +
    +

    Contact Us

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

    Contact

    + +
    \ No newline at end of file diff --git a/css/index.css b/css/index.css index b194375b0f..083791ec77 100644 --- a/css/index.css +++ b/css/index.css @@ -644,6 +644,22 @@ html { display: flex; flex-direction: row; } +.container19 { + max-width: 100%; + padding: 0% 7% 0% 8%; +} +.container19 p { + border: 2px solid gold; +} +.container19 h1 { + font-size: 1.5rem; + position: relative; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; + display: flex; + justify-content: space-between; +} @media screen and (max-width: 500px) { .container { display: flex; diff --git a/index.html b/index.html index e324df2ea8..541e9c6459 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@

    S&J

    diff --git a/less/index.less b/less/index.less index b42e32d540..dc277d6e96 100644 --- a/less/index.less +++ b/less/index.less @@ -778,6 +778,39 @@ html { flex-direction: row; } + +// CONTACT PAGE....XXXXXXXXXXX + +.container19 { + max-width: 100%; + padding: 0% 7% 0% 8%; + +} + +.container19 p { + border: 2px solid gold; + +} + + +.container19 h1 { + font-size: 1.5rem; + position: relative; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; + display: flex; + justify-content: space-between; + + +} + + + + + + + // MOBILE DESIGN......XXXXXXXXXXXXXXXXXXXXX @media screen and ( max-width: 500px) { @@ -799,6 +832,7 @@ html { } + @media screen and (max-width: 500px) { .container1 { diff --git a/services.html b/services.html index 22080b469d..b6b8772197 100644 --- a/services.html +++ b/services.html @@ -31,7 +31,7 @@

    S&J

    jumbo From 8bad7cedd0357f237fbf9571f2d002deda375a8d Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 15:25:56 -0600 Subject: [PATCH 78/83] placed

    contact us on image properly --- contact.html | 4 ++-- css/index.css | 1 + less/index.less | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/contact.html b/contact.html index 1666a67318..060a189ae4 100644 --- a/contact.html +++ b/contact.html @@ -13,14 +13,14 @@ -

    +

    S&J

    -
    +
    diff --git a/css/index.css b/css/index.css index 083791ec77..4454d1b62c 100644 --- a/css/index.css +++ b/css/index.css @@ -650,6 +650,7 @@ html { } .container19 p { border: 2px solid gold; + margin-top: 15%; } .container19 h1 { font-size: 1.5rem; diff --git a/less/index.less b/less/index.less index dc277d6e96..214fb90b6e 100644 --- a/less/index.less +++ b/less/index.less @@ -789,6 +789,7 @@ html { .container19 p { border: 2px solid gold; + margin-top: 15%; } From 11ba25c213a0003e74274c0dee3e14bebab3e87c Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 15:54:54 -0600 Subject: [PATCH 79/83] working on content for contact page --- contact.html | 11 +++++++++++ css/index.css | 12 ++++++++++-- less/index.less | 17 +++++++++++++++-- 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/contact.html b/contact.html index 060a189ae4..3b882bf290 100644 --- a/contact.html +++ b/contact.html @@ -41,6 +41,17 @@

    S&J

    +
    +

    Get in touch

    + +

    Email address

    + +
    + +
    + +
    + diff --git a/css/index.css b/css/index.css index 4454d1b62c..adc1cc99a7 100644 --- a/css/index.css +++ b/css/index.css @@ -644,12 +644,11 @@ html { display: flex; flex-direction: row; } -.container19 { +.container12 { max-width: 100%; padding: 0% 7% 0% 8%; } .container19 p { - border: 2px solid gold; margin-top: 15%; } .container19 h1 { @@ -661,6 +660,15 @@ html { display: flex; justify-content: space-between; } +.container20 h2 { + padding-top: 10%; + padding-left: 7%; + font-size: 2rem; +} +.container20 p { + padding-top: 6%; + padding-left: 8%; +} @media screen and (max-width: 500px) { .container { display: flex; diff --git a/less/index.less b/less/index.less index 214fb90b6e..4ca8ef400d 100644 --- a/less/index.less +++ b/less/index.less @@ -781,14 +781,14 @@ html { // CONTACT PAGE....XXXXXXXXXXX -.container19 { +.container12 { max-width: 100%; padding: 0% 7% 0% 8%; } .container19 p { - border: 2px solid gold; + margin-top: 15%; } @@ -806,6 +806,19 @@ html { } +.container20 h2 { +padding-top:10%; +padding-left: 7%; +font-size: 2rem; +} + + +.container20 p { + padding-top: 6%; + padding-left: 8%; + + } + From fbebe91aad142d7ee09ae597c23da250fa239d05 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 16:16:07 -0600 Subject: [PATCH 80/83] working on second form, contact page --- contact.html | 4 ++++ css/index.css | 11 +++++++++++ less/index.less | 15 +++++++++++++++ 3 files changed, 30 insertions(+) diff --git a/contact.html b/contact.html index 3b882bf290..514d5b8de1 100644 --- a/contact.html +++ b/contact.html @@ -49,6 +49,10 @@

    Get in touch

    +

    We'll never share your email with anyone else.

    + +

    How many buildings do you need planned?

    +
    diff --git a/css/index.css b/css/index.css index adc1cc99a7..1bec096477 100644 --- a/css/index.css +++ b/css/index.css @@ -664,10 +664,21 @@ html { padding-top: 10%; padding-left: 7%; font-size: 2rem; + font-weight: bold; } .container20 p { padding-top: 6%; padding-left: 8%; + font-weight: bold; +} +.container20 form { + padding-top: 1%; + padding-left: 8%; +} +.container20 h3 { + padding-top: 0%; + padding-left: 7.5%; + font-size: 0.75rem; } @media screen and (max-width: 500px) { .container { diff --git a/less/index.less b/less/index.less index 4ca8ef400d..7590d621e1 100644 --- a/less/index.less +++ b/less/index.less @@ -810,15 +810,30 @@ html { padding-top:10%; padding-left: 7%; font-size: 2rem; +font-weight: bold; } .container20 p { padding-top: 6%; padding-left: 8%; + font-weight: bold; } + .container20 form { + + padding-top:1%; + padding-left: 8%; + } + + .container20 h3 { + padding-top: 0%; + padding-left: 7.5%; + font-size: .75rem; + } + + From fa19d4b552bfd8b05f3f7b9a96ef2a179d607af6 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 17:09:43 -0600 Subject: [PATCH 81/83] working on select form , contact page --- contact.html | 2 +- css/index.css | 5 +++++ less/index.less | 7 +++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/contact.html b/contact.html index 514d5b8de1..f7d532fd12 100644 --- a/contact.html +++ b/contact.html @@ -52,7 +52,7 @@

    Get in touch

    We'll never share your email with anyone else.

    How many buildings do you need planned?

    - +
    diff --git a/css/index.css b/css/index.css index 1bec096477..343d3498a0 100644 --- a/css/index.css +++ b/css/index.css @@ -680,6 +680,11 @@ html { padding-left: 7.5%; font-size: 0.75rem; } +.container20 select { + width: 300px; + margin-left: 8%; + margin-top: 1%; +} @media screen and (max-width: 500px) { .container { display: flex; diff --git a/less/index.less b/less/index.less index 7590d621e1..89875edf02 100644 --- a/less/index.less +++ b/less/index.less @@ -833,6 +833,13 @@ font-weight: bold; font-size: .75rem; } + .container20 select { + width: 300px; + margin-left: 8%; + margin-top: 1%; + + } + From b7114b136d78f5f675a18ae093a6cca8d2c30d50 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 17:13:32 -0600 Subject: [PATCH 82/83] figured out number select form, contact page --- contact.html | 7 ++++++- css/index.css | 1 + less/index.less | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/contact.html b/contact.html index f7d532fd12..62484113e5 100644 --- a/contact.html +++ b/contact.html @@ -52,7 +52,12 @@

    Get in touch

    We'll never share your email with anyone else.

    How many buildings do you need planned?

    - +
    diff --git a/css/index.css b/css/index.css index 343d3498a0..ee201ff63d 100644 --- a/css/index.css +++ b/css/index.css @@ -682,6 +682,7 @@ html { } .container20 select { width: 300px; + height: 30px; margin-left: 8%; margin-top: 1%; } diff --git a/less/index.less b/less/index.less index 89875edf02..8715d9939a 100644 --- a/less/index.less +++ b/less/index.less @@ -835,6 +835,7 @@ font-weight: bold; .container20 select { width: 300px; + height: 30px; margin-left: 8%; margin-top: 1%; From 10e1f7ebc7495859c3c82c95b2594012ed312f41 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Jan 2019 18:02:29 -0600 Subject: [PATCH 83/83] final push before project form --- contact.html | 21 ++++++++++++++++++++- css/index.css | 20 +++++++++++++++++++- less/index.less | 23 ++++++++++++++++++++++- 3 files changed, 61 insertions(+), 3 deletions(-) diff --git a/contact.html b/contact.html index 62484113e5..59726218cd 100644 --- a/contact.html +++ b/contact.html @@ -59,7 +59,26 @@

    We'll never share your email with anyone else.

    -
    + +

    Provide a breif overview of your project needs

    + + + + +
    + +
    +
    + I am a small business
    + I am a residential owner
    + I am a corporation +
    + + + + +
    diff --git a/css/index.css b/css/index.css index ee201ff63d..f91cc3fc7e 100644 --- a/css/index.css +++ b/css/index.css @@ -646,6 +646,7 @@ html { } .container12 { max-width: 100%; + height: auto; padding: 0% 7% 0% 8%; } .container19 p { @@ -681,11 +682,28 @@ html { font-size: 0.75rem; } .container20 select { - width: 300px; + width: 400px; height: 30px; margin-left: 8%; margin-top: 1%; } +.container20 textarea { + margin-top: 1%; + margin-left: 8%; +} +.container21 form { + margin-left: 8%; + margin-top: 1%; + padding-bottom: 4%; + font-weight: 600; +} +.container21 button { + width: 150px; + height: 50px; + margin-bottom: 5%; + margin-left: 9%; + border: 1px solid black; +} @media screen and (max-width: 500px) { .container { display: flex; diff --git a/less/index.less b/less/index.less index 8715d9939a..2643b076c4 100644 --- a/less/index.less +++ b/less/index.less @@ -783,6 +783,7 @@ html { .container12 { max-width: 100%; + height: auto; padding: 0% 7% 0% 8%; } @@ -834,13 +835,33 @@ font-weight: bold; } .container20 select { - width: 300px; + width: 400px; height: 30px; margin-left: 8%; margin-top: 1%; } + .container20 textarea { + margin-top: 1%; + margin-left: 8%; + } + + .container21 form { + margin-left: 8%; + margin-top: 1%; + padding-bottom: 4%; + font-weight: 600; + } + + .container21 button { + width: 150px; + height: 50px; + margin-bottom: 5%; + margin-left: 9%; + border: 1px solid black; + } +