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/contact.html b/contact.html index 868844fe14..59726218cd 100644 --- a/contact.html +++ b/contact.html @@ -1,3 +1,5 @@ + + @@ -11,8 +13,84 @@ +
+
+ +

S&J

+ + +
+
+ + + +
+

S&J +

+ + +
+ jumbo +
+

Contact Us

+ +
+
+ +
+

Get in touch

+ +

Email address

+ +
+ +
+

We'll never share your email with anyone else.

+ +

How many buildings do you need planned?

+ + + +

Provide a breif overview of your project needs

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

Contact

+ +
\ No newline at end of file diff --git a/css/index.css b/css/index.css index e6b2b589c1..f91cc3fc7e 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,868 @@ -/* 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: 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; +} +/* GLOBAL DESIGNS....XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ +* { + box-sizing: border-box; +} +html { + font-family: Roboto, Arial, sans-serif; +} +.container { + width: 1012px; + height: auto; + margin: 0% auto; +} +.container1 { + max-width: 100%; +} +.headwrapper { + display: flex; + justify-content: space-between; + width: 100%; + height: auto; + background-color: #99a3ad; + padding: 1%; +} +.headwrapper img { + max-width: 100%; +} +.container1 h1 { + font-size: 1.5rem; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; + padding-left: 2%; +} +.nav-button { + cursor: pointer; +} +.headwrapper .nav-button { + cursor: pointer; + padding: 0% 0% 0% 0%; +} +.headwrapper2 { + position: relative; + width: 100%; + height: auto; + background-color: #99a3ad; +} +.headwrapper2 img { + margin-left: 92.5%; + position: absolute; + margin-top: 3%; +} +.menu { + display: none; + font-Weight: Bold; + font-Size: 48px; + line-Height: 85px; + color: #FFFFFF; + background: #99a3ad; + opacity: 0.9; + height: 100vh; +} +.menu a:hover { + color: #222222; +} +.menu li:hover { + color: #222222; +} +.menu h1 { + display: flex; + justify-content: space-between; + width: 100%; + background-color: #99a3ad; +} +.menu ul li { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + cursor: pointer; +} +.menu ul a { + list-style-type: none; + font-size: 32px; + padding: 30px 0; + text-align: center; + color: #FFFFFF; + text-decoration: none; + cursor: pointer; +} +.menu--open { + display: block; +} +.text-content { + width: 100%; + 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%; +} +.container2 { + max-width: 100%; + background-color: #FFFFFF; + display: flex; + 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: 35%; + padding-bottom: 2%; + padding-left: 15%; +} +.container2 p { + padding-left: 15%; +} +.container2 button { + width: 28%; + height: 10%; + margin-left: 15%; + margin-top: 7%; + border: 1px solid black; +} +.container3 { + background-color: #FFFFFF; + display: flex; + flex-direction: row; +} +.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%; +} +.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%; +} +.villa-content { + position: absolute; + margin-left: 47%; + margin-top: 27%; + width: 350px; + height: 9%; + background-color: #d8d8d8; +} +.villapic { + position: relative; +} +.villa-content p { + text-align: center; + padding-right: 2%; + padding-top: 7%; + font-size: 1.5rem; + letter-spacing: 7px; +} +.villasp { + display: flex; + flex-direction: column; + margin-right: 20%; + padding-bottom: 5%; + padding: 5% 0% 5% 0%; +} +#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-top: 19%; + width: 350px; + 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: 9%; + line-height: 24px; +} +#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: 13%; + width: 350px; + 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%; +} +#bottom-wrapper { + background-color: #828282; + width: 100%; + height: auto; + display: flex; + flex-direction: row; + padding-top: 5%; + color: white; + line-height: 24px; +} +#bottom-wrapper p { + padding: 1%; + padding-left: 15%; +} +#bottom-wrapper h3 { + padding-left: 15%; +} +.container7 { + padding-left: 3%; + padding-top: 4%; +} +.container8 { + padding-left: 7%; +} +.container9 { + padding-left: 7%; +} +.container10 { + 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: 1.5rem; + position: relative; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; + display: flex; + justify-content: space-between; +} +.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%; +} +.container12 h1 { + font-size: 1.5rem; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; + padding-left: 2%; +} +.container11 p { + padding-top: 16%; +} +.container13 { + max-width: 100%; + background-color: white; + line-height: 24px; + padding: 0% 10% 5% 10%; +} +.tabs-links { + width: 100%; + padding-top: 3%; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.tabs-links button { + width: 20%; + height: auto; + font-size: 1rem; + font-weight: bold; + padding: 2% 0%; +} +.container14 { + width: 132%; + display: flex; + flex-direction: row; + background-color: white; +} +.container14 h3 { + font-size: 1.75rem; + font-weight: bold; + padding-top: 10%; + margin-right: 15%; +} +.text-content2 { + width: 170%; + margin-right: 5%; +} +.construction-pic { + width: 180%; + margin-top: 16%; +} +.container15 { + padding-left: 3%; + padding-top: 4%; +} +.container16 { + padding-left: 7%; +} +.container17 { + padding-left: 7%; +} +.container18 { + padding-left: 7%; +} +.tabs-link:hover { + cursor: pointer; +} +.tabs .tabs-link-selected { + z-index: 1; + 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; +} +#pic2 { + display: none; +} +#bottom { + display: flex; + flex-direction: row; +} +.container12 { + max-width: 100%; + height: auto; + padding: 0% 7% 0% 8%; +} +.container19 p { + margin-top: 15%; +} +.container19 h1 { + font-size: 1.5rem; + position: relative; + font-weight: bold; + background-color: #99a3ad; + Color: #FFFFFF; + display: flex; + justify-content: space-between; +} +.container20 h2 { + 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; +} +.container20 select { + 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; + flex-direction: column; + max-width: 100%; + } + .text-content { + padding: 0% 0% 0% 0%; + margin-bottom: 12%; + } + .text-content p { + font-size: 2rem; + } +} +@media screen and (max-width: 500px) { + .container1 { + max-width: 100%; + display: flex; + flex-direction: column; + } + .container1 header { + width: 100%; + } + .content-wrapper1 { + padding: 2%; + } + #future { + padding-left: 6%; + } + .content-wrapper1 button { + width: 85%; + height: auto; + padding: 5% 0; + margin-left: 7%; + border: 1px solid black; + } + .container2 { + max-width: 100%; + display: flex; + flex-direction: column; + padding: 5%; + } + .container2 img { + margin-top: 10%; + margin-bottom: 2%; + } + .container3 h2 { + padding: 0% 0% 0% 0%; + } + .container3 { + max-width: 100%; + display: flex; + flex-direction: column; + } + .container2 h2 { + padding: 0% 0% 0% 0%; + } + .container4 { + max-width: 100%; + display: flex; + flex-direction: column; + } + .container4 #pic2 { + padding: 0% 0% 0% 0%; + } + .container5 { + max-width: 100%; + display: flex; + flex-direction: column; + } + .container6 { + max-width: 100%; + display: flex; + flex-direction: column; + } + .container7 { + max-width: 100%; + display: flex; + flex-direction: column; + } + #bottom-wrapper { + max-width: 100%; + display: flex; + flex-direction: column; + } + #pic1 { + display: none; + } + #pic2 { + display: inherit; + width: 100%; + } + .picwrapper { + padding: 0% 0% 0% 0%; + } + .content-wrapper1 p { + padding: 0% 0% 0% 0%; + } + .villa-content { + max-width: 100%; + position: absolute; + background-color: #d8d8d8; + margin-top: 67%; + margin-left: 13%; + } + .villapic #pic2 { + position: relative; + padding: 4% 4% 35% 4%; + } + #villas { + padding: 0% 0% 0% 0%; + } + .skirt-content { + margin-top: 55%; + margin-left: 12%; + } + #outskirts { + padding-top: 32%; + } + #outskirts2 { + padding-bottom: 4%; + } + .outskirtsp p { + padding: 0% 15% 0% 0%; + } + #blocks { + margin-top: 19%; + } + .block-content { + margin-top: 48%; + margin-left: 12%; + } + .blocksp p { + padding: 0% 15% 0% 0%; + } + footer { + max-width: 100%; + display: flex; + flex-direction: column; + } + #bottom { + max-width: 100%; + display: flex; + flex-direction: column; + } +} +@media screen and (max-width: 500px) { + header { + display: flex; + 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 8a84a17304..541e9c6459 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,208 @@ + + + + Home + - -

You got this! Good luck.

- - - - - + +