diff --git a/README.md b/README.md index 17aecb1714..7b3e0458b8 100644 --- a/README.md +++ b/README.md @@ -5,29 +5,29 @@ This week you will be building a website for an architectural firm named Smith a You will use Trello to report your progress on the MVP and any extra features you accomplish to your project managers every day during standup. This project is meant to be worked on by yourself. Do not pair program this week as this challenge is meant to show you where you can improve and what you have learned on your own. -## Pro Tips For This Week: +### Pro Tips For This Week: - Use past solutions from the previous weeks to accomplish harder tasks - Commit every time you accomplish any new functionality or layout. Get in the habit of frequent commits so you have a record of your work. Push up your commits every day to showcase your progress to your PM - After 20 minutes of being stuck on something, reach out to your PM - Don't overplan, start coding as soon as you can and adjust accordingly. Trello is there as a guide not as a distraction -## 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 +### Trello Set Up: +* [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: +### Assets Provided: * [Style guide:](/DesignFiles/style-guide.md) This file will help you identify font sizes, colors, and font families across the site. * [Images for both desktop and mobile](/img). Mobile images have been provided to match the design files. * Content has been provided on each page inside of comment tags * [Design Files](/DesignFiles) have been provided as guides for what the pages should look like on desktop and mobile. Ignore tablet until you get MVP done. -## MVP Features: +### MVP Features: These MVP features represent the fundamental knowledge you should have obtained throughout the last 4 weeks. If you cannot accomplish all of the MVP tasks listed here, you may be a candidate for the mastery based program. -* [ ] Build layout **HTML/LESS**: [Home page desktop design](/DesignFiles/Home/home-desktop.png) +* [X] Build layout **HTML/LESS**: [Home page desktop design](/DesignFiles/Home/home-desktop.png) * [ ] Build layout **HTML/LESS**: [Home page mobile design](/DesignFiles/Home/home-mobile.png) * [ ] Build layout **HTML/LESS**: [Services page **desktop design only**](/DesignFiles/Services/services-desktop.png) * [ ] Build layout **HTML/LESS/JavaScript**: [Navigation system design](DesignFiles/Navigation) diff --git a/css/index.css b/css/index.css index e6b2b589c1..234399e531 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,492 @@ -/* 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 */ +header { + display: flex; + align-items: center; + background-color: #9aa5b0; + width: 100%; +} +@media max-width:500px { + header { + flex-direction: column; + margin: 0 0 0 4%; + } +} +.logo { + font-size: 2.5rem; + color: white; + text-decoration: none; +} +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 13px 8%; +} +.menu-button { + height: 20px; +} +.menu { + display: none; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: Arial, sans-serif, Roboto; + height: 100%; +} +html h2, +body h2 { + font-size: 2.6rem; + font-weight: bold; + color: black; + margin-bottom: 20px; +} +@media (max-width:500px) { + html h2, + body h2 { + margin-bottom: 25px; + margin-left: 5%; + margin-right: 5%; + } +} +html p, +body p { + line-height: 1.5; + font-size: 1.6rem; + padding-bottom: 10px; +} +.container { + max-width: 875px; + width: 100%; + margin: 0 auto; +} +.button { + height: 50px; + width: 150px; + margin-top: 20px; + padding: 15px; + font-size: 1.6rem; + text-align: center; + border: 1px solid black; +} +@media (max-width:500px) { + .button { + width: 100%; + margin-top: 0px; + } +} +.imgDesktop { + display: block; +} +@media (max-width:500px) { + .imgDesktop { + display: none; + } +} +.imgMobile { + display: none; +} +@media (max-width:500px) { + .imgMobile { + width: 100%; + display: block; + } +} +.topImgMobile { + display: none; +} +@media (max-width:500px) { + .topImgMobile { + width: 100%; + display: block; + margin: 0px 20px 0px 20px; + } +} +.banner { + background: url(/img/home/home-mobile-jumbotron.png); + background-size: cover; + background-position: center bottom; + position: relative; + margin: 0 auto; + height: 70%; +} +@media (max-width:500px) { + .banner { + background: url(../img/home/home-mobile-jumbotron.png) no-repeat center bottom; + background-size: cover; + max-height: 260px; + } +} +h1 { + position: absolute; + bottom: 8%; + left: 8%; + z-index: 0; + font-size: 6.4rem; + line-height: 7.5rem; + font-weight: bold; + color: white; +} +@media (max-width:500px) { + h1 { + left: 5%; + font-size: 3.6rem; + line-height: 4.4rem; + } +} +@media (max-width:500px) { + .flipMobile { + display: flex; + } +} +@media (max-width:500px) { + .imgContent { + margin-right: 50px; + } +} +.projectContent { + position: relative; +} +.bottomLeft { + width: 250px; + height: 75px; + text-align: center; + padding: 30px; + font-size: 2.8rem; + background: #d8d8d8; + position: absolute; + top: 175px; +} +@media (max-width:500px) { + .bottomLeft { + width: 85%; + top: 17%; + right: 7%; + } +} +.bottomRight { + width: 250px; + height: 75px; + text-align: center; + padding: 30px; + font-size: 2.8rem; + background: #d8d8d8; + position: absolute; + top: 175px; + right: 16px; +} +@media (max-width:500px) { + .bottomRight { + width: 85%; + top: 11%; + right: 7%; + } +} +.blocks { + width: 250px; + height: 75px; + text-align: center; + padding: 30px; + font-size: 2.8rem; + background: #d8d8d8; + position: absolute; + top: 175px; + right: 16px; +} +@media (max-width:500px) { + .blocks { + width: 85%; + top: 34%; + right: 7%; + } +} +.topSide { + margin: 50px 0; + display: flex; + justify-content: space-between; +} +@media (max-width:500px) { + .topSide { + padding: 10px; + flex-direction: column; + } +} +.side { + margin: 50px 0; + display: flex; + justify-content: space-between; +} +@media (max-width:500px) { + .side { + flex-direction: column; + } +} +.side img { + margin: 0 30px; +} +.textContent { + margin: 30px; +} +@media (max-width:500px) { + .textContent { + order: 1; + } +} +.projectText { + width: 50%; + margin: 50px auto; +} +footer { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + height: 30%; + width: 100%; + background: #828282; + padding: 30px 30px 0 30px; + color: white; +} +@media (max-width:500px) { + footer { + height: 100%; + padding: 25px; + } +} +footer h4 { + font-size: 1.6rem; + font-weight: bold; +} +footer p { + font-size: 1.2rem; + font-weight: normal; + line-height: 2rem; +} +@media (max-width:500px) { + footer p { + font-size: 1.6rem; + line-height: 2.6rem; + } +} +.addresses { + width: 61%; + display: flex; + justify-content: space-between; +} +@media (max-width:500px) { + .addresses { + flex-direction: column; + align-items: flex-start; + } +} +.copyright { + text-align: center; + background: #828282; + font-size: 1.4rem; + color: white; +} +@media (max-width:500px) { + .copyright { + padding: 30px 30px 20px 25px; + text-align: left; + } +} +.emailInput { + margin: 10px 0; + width: 87%; + height: 40px; + color: #828282; + font-size: 1.6rem; +} +@media (max-width:500px) { + .emailInput { + width: 430px; + height: 50px; + } +} +.serviceBanner { + background: url(/img/services/services-jumbotron.png); + background-size: cover; + background-position: center bottom; + position: relative; + margin: 0 auto; + height: 30%; +} +@media (max-width:500px) { + .serviceBanner { + background: url(../img/home/home-mobile-jumbotron.png) no-repeat center bottom; + background-size: cover; + max-height: 260px; + } +} +.tabLinks { + display: flex; + justify-content: space-between; + font-weight: bold; +} +.link { + height: 50px; + width: 170px; + margin-top: 20px; + padding: 15px; + font-size: 1.6rem; + text-align: center; + border: 1px solid black; + cursor: pointer; +} +.link:hover { + background-color: #222222; +} +.tabContent { + margin-top: 50px; +} +.tabContent .content { + padding: 20px; + display: none; +} +.tabContent .active { + display: flex; +} +.tabText { + width: 50%; +} diff --git a/index.html b/index.html index 8a84a17304..af07e656c0 100644 --- a/index.html +++ b/index.html @@ -11,86 +11,133 @@ - -

You got this! Good luck.

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

Smith & Jones Architects


+ +

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

+ +
Learn More
+
+
+ + +
+
+
-Integrity, -Excellence, -Progress. - -Smith & Jones Architects - -Et sed autem causae appareat, tempor abhorreant te mei, facer facilisis sit ea. Eu timeam vidisse consectetuer sed. Duo etiam laboramus dissentiet in, nec no errem - -Learn More - -Futuristic Designs - -Et sed autem causae appareat, tempor abhorreant te mei, facer facilisis sit ea. Eu timeam vidisse consectetuer sed. Duo etiam laboramus dissentiet in, nec no errem - -View Designs - -Recent Projects - -THE VILLAS - -The Villas bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. +
+
+ + +
+
+

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

+
View Designs
+
+
+

Recent Projects

+
+
+ + +
THE VILLAS
+
+
+

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

+ +

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

+
+
+
+ + +
OUTSKIRTS
+
+
+

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

+ +

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

+
+
+
+ + +
THE BLOCKS
+
+ +
+

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.

+
+
+ + + + + +
Copyright © 2018 Smith and Jones
-Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. -OUTSKIRTS - -The Outskirts are amazing to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. - -Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. - -THE BLOCKS - -The Blocks are amazing to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. - -Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. - ---> - - - \ No newline at end of file + + diff --git a/js/index.js b/js/index.js index bb3d341cf0..262d4bc661 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,42 @@ -// JS goes here \ No newline at end of file +// JS goes here// + + +//Tab menu from Services.html// + + +class TabLink { + constructor (tab) { + + this.tab = tab; + this.tabData = this.tab.dataset.tab; + this.tabContent = document.querySelector(`.content[data-tab="${this.tabData}"]`); + this.tabContent = new TabContent(this.tabContent); + this.tab.addEventListener('click', (e) => this.tabClick()); + } + + // method + tabClick() { + // toggleContent method is toggling the classlist + this.tabContent.toggleContent(); + } + } + + + class TabContent { + constructor (content) { + this.content = content + } + // this method that actually changes the classList + toggleContent () { + document.querySelectorAll('.tabContent .content').forEach(content => { + content.classList.remove('active') + }) + this.content.classList.toggle('active') + } + } + + const tabs = document.querySelectorAll('.tabLinks .link').forEach(tab => new TabLink(tab)); + + + // const classNameTabs = document.getElementsByClassName('link') + diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..401879e618 --- /dev/null +++ b/less/footer.less @@ -0,0 +1,81 @@ +footer{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + height: 30%; + width: 100%; + background: #828282; + padding: 30px 30px 0 30px; + color: white; + + @media (@mobile) { + + height: 100%; + padding: 25px; + + } + + + & h4{ + font-size:1.6rem; + font-weight: bold; + } + + & p { + font-size: 1.2rem; + font-weight: normal; + line-height: 2rem; + + @media (@mobile) { + font-size:1.6rem; + line-height: 2.6rem; + + + + } + } +} + +.addresses { + width: 61%; + display: flex; + justify-content: space-between; + + @media (@mobile) { + flex-direction: column; + align-items: flex-start; + + + } +} + +.copyright { + text-align: center; + background: #828282; + font-size: 1.4rem; + color: white; + @media (@mobile) { + padding: 30px 30px 20px 25px; + text-align: left; + } + +} + +.emailInput{ + margin: 10px 0; + width: 87%; + height: 40px; + color: #828282; + font-size: 1.6rem; + + @media (@mobile) { + width: 430px; + height: 50px; + + } + +} + + + + \ No newline at end of file diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..1f122b6e28 --- /dev/null +++ b/less/global.less @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; + +} + +html { + font-size: 62.5%; +} + +html, +body { + font-family: Arial, sans-serif, Roboto; + height: 100%; + & h2 { + font-size: 2.6rem; + font-weight: bold; + color: black; + margin-bottom: 20px; + + @media (@mobile) { + margin-bottom: 25px; + margin-left: 5%; + margin-right: 5%; + } + } + & p { + line-height: 1.5; + font-size: 1.6rem; + padding-bottom: 10px; + } + + +} +.container{ + max-width: 875px; + width: 100%; + margin: 0 auto; + + + + } + + .button{ + height: 50px; + width: 150px; + margin-top: 20px; + padding: 15px; + font-size: 1.6rem; + text-align: center; + border: 1px solid black; + + @media (@mobile) { + width: 100%; + margin-top: 0px; + } + +} + +.imgDesktop { + display: block; + + @media (@mobile) { + display: none; + } + +} +.imgMobile { + display: none; + + @media (@mobile) { + width: 100%; + display: block; + } +} + +.topImgMobile { + display: none; + + @media (@mobile) { + width: 100%; + display: block; + margin: 0px 20px 0px 20px; + + } +} diff --git a/less/homepage.less b/less/homepage.less new file mode 100644 index 0000000000..5c446bd615 --- /dev/null +++ b/less/homepage.less @@ -0,0 +1,151 @@ +.banner{ + background: url(/img/home/home-mobile-jumbotron.png); + background-size: cover; + background-position: center bottom; + position: relative; + margin: 0 auto; + height: 70%; + + @media (@mobile) { + background: url(../img/home/home-mobile-jumbotron.png) no-repeat center + bottom; + background-size: cover; + max-height: 260px; + } + +} + +h1 { + position: absolute; + bottom: 8%; + left: 8%; + z-index: 0; + font-size: 6.4rem; + line-height: 7.5rem; + font-weight: bold; + color: white; + + @media (@mobile) { + left: 5%; + font-size: 3.6rem; + line-height: 4.4rem; + } + +} + +.flipMobile{ + @media (@mobile) { + display: flex; + } +} + + +.imgContent{ + + @media (@mobile){ + margin-right: 50px; + } + +} +.projectContent{ + position: relative; +} + +.bottomLeft { + width: 250px; + height: 75px; + text-align: center; + padding: 30px; + font-size: 2.8rem; + background: #d8d8d8; + position: absolute; + top: 175px; + + @media (@mobile) { + width: 85%; + top: 17%; + right: 7%; + } +} + +.bottomRight { + width: 250px; + height: 75px; + text-align: center; + padding: 30px; + font-size: 2.8rem; + background: #d8d8d8; + position: absolute; + top: 175px; + right: 16px; + + @media (@mobile) { + width: 85%; + top: 11%; + right: 7%; + } +} + +.blocks{ + width: 250px; + height: 75px; + text-align: center; + padding: 30px; + font-size: 2.8rem; + background: #d8d8d8; + position: absolute; + top: 175px; + right: 16px; + + @media (@mobile) { + width: 85%; + top: 34%; + right: 7%; + } +} + +.topSide{ + display: flex; + margin: 50px 0; + display: flex; + justify-content: space-between; + + @media (@mobile) { + padding: 10px; + flex-direction: column; + + } + +} +.side{ + display: flex; + margin: 50px 0; + display: flex; + justify-content: space-between; + + @media (@mobile) { + flex-direction: column; + } + + +} +.side img{ + margin: 0 30px; +} +.textContent { + margin: 30px; + @media (@mobile) { + order: 1; + } + } + + .projectText{ + width: 50%; + margin: 50px auto; + + + + } + + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..220fabfea4 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,11 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ + +@import "navigation.less"; +@import "variables.less"; +@import "global.less"; +@import "homepage.less"; +@import "footer.less"; +@import "services.less"; \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..bd3fed1a92 --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,33 @@ +header{ + display:flex; + align-items: center; + background-color: #9aa5b0; + width: 100%; + + + @media @mobile{ + flex-direction: column; + margin:0 0 0 4%; +} +} +.logo{ + font-size: 2.5rem; + color: white; + text-decoration: none; + +} +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 13px 8%; +} + +.menu-button { + height: 20px; + } + +.menu{ + display: none; +} diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..140f7f2d90 --- /dev/null +++ b/less/services.less @@ -0,0 +1,55 @@ +.serviceBanner{ + background: url(/img/services/services-jumbotron.png); + background-size: cover; + background-position: center bottom; + position: relative; + margin: 0 auto; + height: 30%; + + @media (@mobile) { + background: url(../img/home/home-mobile-jumbotron.png) no-repeat center + bottom; + background-size: cover; + max-height: 260px; + } + +} + +.tabLinks{ + display: flex; + justify-content: space-between; + font-weight: bold; +} +.link{ + height: 50px; + width: 170px; + margin-top: 20px; + padding: 15px; + font-size: 1.6rem; + text-align: center; + border: 1px solid black; + cursor: pointer; +} + .link:hover{ + background-color: #222222; + } + + + .tabContent { + margin-top: 50px; + + + .content { + padding: 20px; + display: none; + } + + .active{ + display: flex; + } + } + + .tabText{ + width: 50%; + } + diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..974c7d90a3 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,6 @@ + + + +//Media Queries +@mobile: ~'max-width:500px'; +@tablet: ~'max-width:700px'; \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..2fda860b82 100644 --- a/services.html +++ b/services.html @@ -12,27 +12,139 @@ -

Services

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

Services

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

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

- +
+
Pre-Construction
+
Construction
+
Design Build
+
Sustainability
+
+ + +
- 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. +
+
+

Pre-Construction

+

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

+ +

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

+
+
+ +
+
+ +
+
+

Construction

+

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

+ +

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

+
+
+ +
+ +
+ +
+
+

Design Build

+

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

+ +

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

+
+
+ +
+ +
+ +
+
+

Sustainability

+

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

+ +

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

+
+
+ +
+ +
+ +
+ + +
+ ---> + +
Copyright © 2018 Smith and Jones
\ No newline at end of file