+ 
+
+
+ S&J
+
+
+ 
+
+ 
+ 
+
+
+
+
+
+
+
+ Contact Us
+Get In Touch
+ +
+
+
+
+ +
- + +
We'll never share your email with anyone else.
+Contact
+
+
+
\ No newline at end of file
diff --git a/css/global.css b/css/global.css
new file mode 100644
index 0000000000..d8c307751a
--- /dev/null
+++ b/css/global.css
@@ -0,0 +1,50 @@
+* {
+ box-sizing: border-box;
+}
+html {
+ font-size: 62.5%;
+}
+html,
+body {
+ font-family: 'Roboto', Arial, sans-serif;
+}
+h1 {
+ font-size: 2.5rem;
+ font-weight: bold;
+ color: #FFFFFF;
+}
+h2 {
+ font-size: 6.4rem;
+ font-weight: bold;
+ line-height: 75px;
+ color: #FFFFFF;
+}
+h3 {
+ font-size: 2.4rem;
+ font-weight: bold;
+ color: #222222;
+}
+h4 {
+ font-size: 2rem;
+ font-weight: bold;
+}
+h5 {
+ font-size: 2rem;
+ color: #FFFFFF;
+ line-height: 2.4rem;
+ font-weight: normal;
+}
+p {
+ font-size: 1.8rem;
+ line-height: 2.4rem;
+ font-weight: normal;
+}
+.container {
+ max-width: 1025px;
+ width: 100%;
+ margin: 0 auto;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
diff --git a/css/index.css b/css/index.css
index e6b2b589c1..1ae012aedf 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,646 @@
-/* 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;
+ margin: 0;
+ padding: 0;
+}
+* {
+ box-sizing: border-box;
+}
+html {
+ font-size: 62.5%;
+}
+html,
+body {
+ font-family: 'Roboto', Arial, sans-serif;
+}
+h1 {
+ font-size: 2.5rem;
+ font-weight: bold;
+ color: #FFFFFF;
+}
+h2 {
+ font-size: 6.4rem;
+ font-weight: bold;
+ line-height: 75px;
+ color: #FFFFFF;
+}
+h3 {
+ font-size: 2.4rem;
+ font-weight: bold;
+ color: #222222;
+}
+h4 {
+ font-size: 2rem;
+ font-weight: bold;
+}
+h5 {
+ font-size: 2rem;
+ color: #FFFFFF;
+ line-height: 2.4rem;
+ font-weight: normal;
+}
+p {
+ font-size: 1.8rem;
+ line-height: 2.4rem;
+ font-weight: normal;
+}
+.container {
+ border-left: 1px solid white;
+ border-right: 1px solid white;
+ max-width: 1025px;
+ width: 100%;
+ margin: 0 auto;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
+.jumbo-services {
+ width: 100%;
+ position: relative;
+ z-index: -1;
+}
+.jumbo-services .services-title {
+ position: absolute;
+ top: 63.5%;
+ left: 8.5%;
+}
+.mobile-jumbo-services {
+ display: none;
+}
+.services-content p {
+ font-size: 1.6rem;
+ padding: 5% 8% 4.5% 8%;
+}
+.tabs {
+ width: 100%;
+ padding-left: 6%;
+ padding-right: 5%;
+}
+.tabs .tab-titles {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+.tabs .tab {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ border: 1px solid black;
+ width: 189px;
+ height: 50px;
+ background-color: #FFFFFF;
+ font-size: 1.8rem;
+ margin: auto;
+ text-align: center;
+ cursor: pointer;
+ font-weight: bold;
+}
+.tabs .tab:hover {
+ color: #FFFFFF;
+ border-color: #5D9FB9;
+ background-color: #5D9FB9;
+}
+.tabs .selected-tab {
+ background-color: #5D9FB9;
+ border-color: #5D9FB9;
+ color: #FFFFFF;
+}
+.items-container {
+ width: 100%;
+ margin: auto;
+ margin-top: 3%;
+ margin: 30px 0;
+}
+.items-container .item-content {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ padding: 2% 3% 2% 4%;
+}
+.items-container .item-title {
+ padding-top: 22px;
+ padding-left: 8.3%;
+}
+.items-container .item {
+ display: none;
+}
+.items-container .selected-item {
+ display: block;
+}
+.items-container p {
+ font-size: 1.6rem;
+ width: 40%;
+}
+.items-container .item-mobile-img {
+ display: none;
+}
+@media (max-width: 525px) {
+ .services {
+ width: 100%;
+ padding: 1%;
+ }
+ .services-jumbo-img {
+ display: none;
+ }
+ .mobile-jumbo-services {
+ display: block;
+ width: 100%;
+ }
+ .services .services-content p {
+ width: 100%;
+ padding: 6%;
+ }
+ .services .tab-titles {
+ flex-wrap: wrap;
+ }
+ .services .tab {
+ width: 100%;
+ margin-top: 3%;
+ }
+ .item-dekstop-img {
+ display: none;
+ }
+ .services .item-title {
+ padding-left: 5%;
+ }
+ .item-content {
+ flex-direction: column;
+ }
+ .services .item-content p {
+ padding: 1%;
+ width: 100%;
+ margin-bottom: 5%;
+ }
+ .item-mobile-img {
+ width: 100%;
+ display: block;
+ }
+}
+.jumbo-contact {
+ width: 100%;
+ position: relative;
+}
+.jumbo-contact .contact-title {
+ position: absolute;
+ top: 61.5%;
+ left: 8.5%;
+}
+.jumbo-contact .mobile-contact-img {
+ display: none;
+}
+h3 {
+ padding: 4%;
+}
+.CTA {
+ width: 100%;
+ margin-top: 3%;
+ margin: 30px 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+.CTA .cta-content {
+ width: 50%;
+ padding: 7% 1% 0% 8%;
+}
+.CTA h3 {
+ padding-bottom: 21px;
+}
+.CTA p {
+ font-size: 1.6rem;
+ padding-bottom: 28px;
+}
+.CTA button {
+ background: #FFFFFF;
+ font-size: 1.6rem;
+ padding: 3% 7%;
+ text-align: center;
+ cursor: pointer;
+}
+.CTA .smith-jones-img {
+ padding-top: 5%;
+ padding-right: 17%;
+}
+.CTA .futuristic-img {
+ padding-top: 13%;
+ padding-left: 17%;
+}
+.CTA .futuristic {
+ padding: 10% 0 2% 1%;
+}
+.CTA .mobile-sj-img,
+.CTA .mobile-futuristic-img {
+ display: none;
+}
+@media (max-width: 525px) {
+ .CTA {
+ flex-wrap: wrap-reverse;
+ padding: 2%;
+ }
+ .CTA .smith-jones-img,
+ .CTA .futuristic-img {
+ width: 100%;
+ padding: 2%;
+ }
+ .home .cta-content {
+ width: 100%;
+ padding: 2%;
+ }
+ .home .cta-content button {
+ width: 100%;
+ }
+ .home .cta-content h3 {
+ font-size: 2.2rem;
+ }
+}
+footer {
+ width: 100%;
+ background-color: #828282;
+}
+footer .footer-email {
+ width: 45%;
+}
+footer h6 {
+ padding-bottom: 5px;
+ font-size: 1.9rem;
+ color: #FFFFFF;
+ margin-bottom: 2%;
+}
+footer p {
+ font-size: 1.3rem;
+ color: #FFFFFF;
+ font-weight: normal;
+}
+footer input {
+ font-size: 1.5rem;
+ padding: 4%;
+ width: 100%;
+ border-radius: 5px;
+ margin-top: 5px;
+}
+footer .footer-content {
+ padding: 5%;
+ display: flex;
+}
+footer .footer-content .footer-address {
+ width: 100%;
+ display: flex;
+ justify-content: space-evenly;
+}
+footer .copyright {
+ font-size: 1.3rem;
+ text-align: center;
+}
+@media (max-width: 525px) {
+ footer {
+ width: 100%;
+ }
+ footer .footer-content {
+ display: flex;
+ flex-direction: column;
+ }
+ footer .footer-email {
+ width: 100%;
+ padding-bottom: 3%;
+ }
+ footer .footer-address {
+ padding-top: 3%;
+ padding-bottom: 5%;
+ display: flex;
+ flex-direction: column;
+ }
+ footer h5 {
+ font-size: 2.3rem;
+ font-weight: 400;
+ padding-bottom: 3%;
+ }
+ footer h6 {
+ font-weight: 400;
+ font-size: 2.3rem;
+ }
+ footer p {
+ padding-top: 2%;
+ padding-bottom: 5%;
+ font-weight: normal;
+ }
+}
+.jumbotron {
+ width: 100%;
+ position: relative;
+ z-index: -1;
+}
+.jumbotron .jumbotron h2 {
+ position: absolute;
+ top: 54%;
+ left: 8.1%;
+ z-index: 1;
+}
+.jumbotron .jumbo-services {
+ width: 100%;
+ position: relative;
+ z-index: -1;
+}
+.jumbotron .jumbo-contact {
+ width: 100%;
+ position: relative;
+}
+.jumbotron h2 {
+ position: absolute;
+ top: 54%;
+ left: 7.7%;
+ z-index: 1;
+}
+.jumbotron .mobile-jumbo {
+ display: none;
+}
+.menucontainer {
+ background-color: #99A4AF;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.2% 7.75%;
+ width: 100%;
+ z-index: 1;
+}
+.menucontainer .hamburger {
+ cursor: pointer;
+}
+.menucontainer .nav-content {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 1px;
+ left: 0;
+ background: #99A4AE;
+ opacity: 0.9;
+ transition: all 0.4s ease;
+ z-index: 2;
+}
+.menucontainer .expanded-menu {
+ background-color: #99A4AE;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.75% 19.9%;
+ width: 100%;
+ z-index: 2;
+}
+.menucontainer .expanded-menu .close {
+ cursor: pointer;
+ padding-right: 0.6%;
+}
+.menucontainer .nav-links {
+ padding-top: 15%;
+}
+.menucontainer .nav-link {
+ color: #FFFFFF;
+ padding-left: 43.5%;
+ text-decoration: none;
+ list-style: none;
+ place-items: center;
+ text-align: center;
+ font-size: 4.5rem;
+ line-height: 81px;
+ letter-spacing: 2px;
+ cursor: pointer;
+}
+.menucontainer .nav-link:hover {
+ color: #504446;
+}
+.menucontainer .hidden {
+ display: none;
+}
+.mobile-jumbo-img {
+ display: none;
+}
+@media (max-width: 525px) {
+ .container {
+ width: 100%;
+ padding: 1%;
+ }
+ .container .logo {
+ padding: 1.2% 7.75%;
+ }
+ .jumbo-img {
+ display: none;
+ }
+ .mobile-jumbo-img {
+ display: block;
+ width: 100%;
+ }
+ .jumbo-title {
+ font-size: 4rem;
+ line-height: 1.2em;
+ }
+}
+.rp-title {
+ width: 100%;
+ padding: 6.5% 0 4.5% 8.5%;
+}
+.recent-projects {
+ width: 100%;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+}
+.recent-projects .project-img {
+ position: relative;
+ text-align: center;
+}
+.recent-projects .mobile-villas-img,
+.recent-projects .mobile-outskirts-img,
+.recent-projects .mobile-blocks-img {
+ display: none;
+}
+.recent-projects p {
+ padding: 9% 28%;
+}
+.box-title {
+ width: 31%;
+ position: absolute;
+ top: 75%;
+ right: 8.2%;
+ bottom: 2%;
+}
+.box-title h4 {
+ text-align: center;
+ font-weight: normal;
+ font-size: 2.5rem;
+ letter-spacing: 7.3px;
+ padding: 35px 0px;
+ background-color: #D8D8D8;
+}
+.outskirts {
+ position: absolute;
+ left: 8.2%;
+}
+@media (max-width: 525px) {
+ .home .recent-projects {
+ width: 100%;
+ padding: 2%;
+ }
+ .home .recent-projects .rp-title {
+ font-size: 2.2rem;
+ text-align: left;
+ padding: 6.5% 0 4.5% 1.5%;
+ }
+ .home .recent-projects p {
+ font-size: 1.6rem;
+ width: 100%;
+ margin-top: 6%;
+ padding: 10% 2%;
+ }
+ .home .recent-projects .villas-img,
+ .home .recent-projects .outskirts-img,
+ .home .recent-projects .blocks-img {
+ display: none;
+ }
+ .home .recent-projects .mobile-villas-img,
+ .home .recent-projects .mobile-outskirts-img,
+ .home .recent-projects .mobile-blocks-img {
+ display: block;
+ width: 100%;
+ }
+ .home .recent-projects .box-title {
+ width: 100%;
+ padding: 2%;
+ left: 0.1%;
+ }
+}
diff --git a/css/services.css b/css/services.css
new file mode 100644
index 0000000000..11c1dfc069
--- /dev/null
+++ b/css/services.css
@@ -0,0 +1,71 @@
+.jumbo-services {
+ width: 100%;
+ position: relative;
+ z-index: -1;
+}
+.jumbo-services .services-title {
+ position: absolute;
+ top: 65.5%;
+ left: 8.5%;
+}
+.mobile-jumbo-services {
+ display: none;
+}
+.services-content p {
+ font-size: 1.6rem;
+ padding: 28% 8% 4.5% 8%;
+}
+.tabs {
+ width: 100%;
+}
+.tabs .tab-titles {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+.tabs .tab {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ border: 1px solid black;
+ width: 189px;
+ height: 50px;
+ background-color: #FFFFFF;
+ font-size: 1.8rem;
+ margin: auto;
+ text-align: center;
+ cursor: pointer;
+ font-weight: bold;
+}
+.tabs .tab:hover {
+ color: #FFFFFF;
+ background-color: #5D9FB9;
+}
+.items-container {
+ width: 100%;
+ margin: auto;
+ margin-top: 3%;
+ margin: 30px 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+.items-container .item-content {
+ width: 100%;
+ padding: 2% 1% 0% 8%;
+}
+.items-container h3 {
+ padding-bottom: 22px;
+}
+.items-container p {
+ font-size: 1.6rem;
+ width: 45%;
+}
+.items-container .item-desktop-img {
+ padding-top: 5%;
+ padding-right: 17%;
+}
+.items-container .item-mobile-img {
+ display: none;
+}
diff --git a/index.html b/index.html
index 8a84a17304..77b1019e2c 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,10 @@
+
+
+
How many buildings do you need planned?
- ---> + + + + +You got this! Good luck.
- - - - - - - - +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index bb3d341cf0..3792ffde4d 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1 +1,27 @@
-// JS goes here
\ No newline at end of file
+// JS goes here
+
+class Dropdown {
+ constructor(element) {
+ this.element = element;
+ this.button = this.element.querySelector('.hamburger')
+ this.closebutton = this.element.querySelector('.close')
+ this.content = this.element.querySelector('.nav-content');
+ this.closebuttoncontent = document.querySelector('.nav-content');
+
+
+ this.button.addEventListener('click', (event) => { this.toggleContent(event) })
+ this.closebutton.addEventListener('click', (event) => { this.closeContent(event) })
+
+ }
+
+ toggleContent(event) {
+ this.content.classList.toggle('hidden');
+ }
+
+ closeContent(event) {
+ this.closebuttoncontent.classList.toggle('hidden');
+ }
+}
+
+let dropdowns = document.querySelectorAll('.menucontainer');
+dropdowns = Array.from(dropdowns).map(dropdown => new Dropdown(dropdown));
diff --git a/js/tabs.js b/js/tabs.js
new file mode 100644
index 0000000000..45f3aac987
--- /dev/null
+++ b/js/tabs.js
@@ -0,0 +1,49 @@
+class TabLink {
+ constructor(element) {
+ this.element = element;
+ this.tabData = this.element.dataset.tab;
+ if (this.tabData === 'all') {
+ this.items = document.querySelectorAll(`.item`);
+ } else {
+ this.items = document.querySelectorAll(`.item[data-tab="${this.tabData}"]`)
+ }
+ this.items = Array.from(this.items).map(item => new TabItem(item));
+ this.element.addEventListener('click', (event) => {
+
+ this.selectTab(event);
+ });
+ }
+ selectTab(event) {
+
+
+ const tabs = document.querySelectorAll('.tab');
+ tabs.forEach(link => {
+ link.classList.remove('selected-tab')
+ });
+ this.element.classList.add('selected-tab');
+ const items = document.querySelectorAll('.item');
+ items.forEach(item => {
+ item.style.display = 'none';
+ });
+
+ this.items.forEach(item => item.selectItem());
+ }
+}
+
+class TabItem {
+ constructor(element) {
+
+ this.element = element;
+ }
+ selectItem() {
+
+ this.element.style.display = 'block';
+ }
+}
+
+
+let tabs = document.querySelectorAll('.tab');
+tabs = Array.from(tabs).map(link => new TabLink(link));
+
+tabs[0].selectTab();
+
diff --git a/less/contact.less b/less/contact.less
new file mode 100644
index 0000000000..46f2da4f2e
--- /dev/null
+++ b/less/contact.less
@@ -0,0 +1,18 @@
+.jumbo-contact {
+ width: 100%;
+ position: relative;
+
+ .contact-title {
+ position: absolute;
+ top: 61.5%;
+ left: 8.5%;
+ }
+
+ .mobile-contact-img {
+ display: none;
+ }
+}
+
+h3 {
+ padding: 4%;
+}
diff --git a/less/global.less b/less/global.less
new file mode 100644
index 0000000000..5a22e89ded
--- /dev/null
+++ b/less/global.less
@@ -0,0 +1,62 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 62.5%;
+}
+
+html, body {
+ font-family: 'Roboto', Arial, sans-serif;
+
+}
+
+h1 {
+ font-size: 2.5rem;
+ font-weight: bold;
+ color: #FFFFFF;
+}
+
+h2 {
+ font-size: 6.4rem;
+ font-weight: bold;
+ line-height: 75px;
+ color: #FFFFFF;
+}
+
+h3 {
+ font-size: 2.4rem;
+ font-weight: bold;
+ color: #222222;
+}
+h4 {
+ font-size: 2rem;
+ font-weight: bold;
+}
+
+h5 {
+ font-size: 2rem;
+ color: #FFFFFF;
+ line-height: 2.4rem;
+ font-weight: normal;
+}
+
+
+p {
+ font-size: 1.8rem;
+ line-height: 2.4rem;
+ font-weight: normal;
+}
+
+.container {
+ border-left: 1px solid white;
+ border-right: 1px solid white;
+ max-width: 1025px;
+ width: 100%;
+ margin: 0 auto;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
diff --git a/less/index.less b/less/index.less
index 6d3fc81ef9..05e5f99157 100644
--- a/less/index.less
+++ b/less/index.less
@@ -57,4 +57,19 @@ table{
border-spacing:0;
}
-/* Your Code Goes Here */
\ No newline at end of file
+/* Your Code Goes Here */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+@import './global.less';
+@import './services.less';
+@import './contact.less';
+@import '../components/CTA/cta.less';
+@import '../components/Footer/footer.less';
+@import '../components/Jumbotron/jumbotron.less';
+@import '../components/Navigation/navigation.less';
+@import '../components/RecentProjects/recentProjects.less';
+
diff --git a/less/services.less b/less/services.less
new file mode 100644
index 0000000000..d7c8aede31
--- /dev/null
+++ b/less/services.less
@@ -0,0 +1,151 @@
+.jumbo-services {
+ width: 100%;
+ position: relative;
+ z-index: -1;
+
+ .services-title {
+ position: absolute;
+ top: 63.5%;
+ left: 8.5%;
+ }
+
+}
+
+.mobile-jumbo-services {
+ display: none;
+ }
+
+.services-content p{
+ font-size: 1.6rem;
+ padding: 5% 8% 4.5% 8%;
+}
+
+.tabs {
+ width: 100%;
+ padding-left: 6%;
+ padding-right: 5%;
+
+ .tab-titles {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .tab {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ border: 1px solid black;
+ width: 189px;
+ height: 50px;
+ background-color: #FFFFFF;
+ font-size: 1.8rem;
+ margin: auto;
+ text-align: center;
+ cursor: pointer;
+ font-weight: bold;
+
+ &:hover {
+ color: #FFFFFF;
+ border-color: #5D9FB9;
+ background-color: #5D9FB9;
+ }
+ }
+
+ .selected-tab {
+ background-color:#5D9FB9;
+ border-color:#5D9FB9;
+ color: #FFFFFF;
+ }
+}
+
+.items-container {
+ width: 100%;
+ margin: auto;
+ margin-top: 3%;
+ margin: 30px 0;
+
+ .item-content {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ padding: 2% 3% 2% 4%;
+ }
+
+ .item-title {
+ padding-top: 22px;
+ padding-left: 8.3%;
+ }
+
+ .item {
+ display: none;
+ }
+
+ .selected-item {
+ display: block;
+ }
+
+ p {
+ font-size: 1.6rem;
+ width: 40%;
+
+ }
+
+ .item-mobile-img {
+ display: none;
+ }
+}
+
+@media (max-width: 525px) {
+ .services {
+ width: 100%;
+ padding: 1%;
+ }
+
+ .services-jumbo-img {
+ display: none;
+ }
+
+ .mobile-jumbo-services {
+ display: block;
+ width: 100%;
+ }
+
+ .services .services-content p {
+ width: 100%;
+ padding: 6%;
+ }
+
+ .services .tab-titles {
+ flex-wrap: wrap;
+ }
+
+ .services .tab {
+ width: 100%;
+ margin-top: 3%;
+ }
+
+ .item-dekstop-img {
+ display: none;
+ }
+
+ .services .item-title {
+ padding-left: 5%;
+ }
+
+ .item-content {
+ flex-direction: column;
+ }
+
+ .services .item-content p {
+ padding: 1%;
+ width: 100%;
+ margin-bottom: 5%;
+ }
+
+ .item-mobile-img {
+ width: 100%;
+ display: block;
+ }
+
+}
\ No newline at end of file
diff --git a/services.html b/services.html
index fb5a79e18a..ff7f6775c9 100644
--- a/services.html
+++ b/services.html
@@ -1,38 +1,204 @@
+
+
+
+
+
+
+ S&J
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+ Integrity,
+
+ Integrity,
Excellence,
Progress.
+
+
+ Smith & Jones Architects
+Et sed autem causae appareat, tempor abhorreant te mei, facer facilisis sit ea. Eu timeam vidisse + consectetuer + sed. + Duo etiam laboramus dissentiet in, nec no errem
+ +
+ 
+ 
+
+
+
+
+ 
+ 
+
+
+
+
+
+ Futuristic Designs
+Et sed autem causae appareat, tempor abhorreant te mei, facer facilisis sit ea. Eu timeam vidisse + consectetuer + sed. + Duo etiam laboramus dissentiet in, nec no errem
+ +
+
+ Recent Projects
+
+ 
+ 
+
+
+
+
+
+ THE VILLAS
+The Villas bring to the table win-win survival strategies to ensure proactive domination. At the end of the
+ day,
+ going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined
+ cloud solution.
+
+
+
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the
+ digital
+ divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will
+ close
+ the loop on focusing solely on the bottom line.
+ 
+ 
+
+
+
+
+
+ OUTSKIRTS
+The Outskirts are amazing to the table win-win survival strategies to ensure proactive domination. At the end
+ of
+ the
+ day, going forward, a new normal that has evolved from generation X is on the runway heading towards a
+ streamlined
+ cloud solution.
+
+
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the
+ digital
+ divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will
+ close
+ the loop on focusing solely on the bottom line.
+ 
+ 
+
+
+
+
+
+ THE BLOCKS
+The Blocks are amazing to the table win-win survival strategies to ensure proactive domination. At the end of
+ the
+ day, going forward, a new normal that has evolved from generation X is on the runway heading towards a
+ streamlined
+ cloud solution.
+
+
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the
+ digital
+ divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will
+ close
+ the loop on focusing solely on the bottom line.
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
+
+
+
+ S&J
+
+
+
+ 
+ 
+
+
-
+
+
+
+ Services
+Services
+ +
+
-
+
-
+ Services include: completely synergize resource taxing relationships via premier niche markets. + Professionally + cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer + service + for + state of the art customer service.
+
+
- Pre-Construction
- Construction
- Design Build
- Sustainability
+
+
+
+ Pre-Construction
+ 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.
+
+