+ 
+
+
+ S&J
+
+
+ 
+
+ 
+ 
+
+
+
+
+
+
+
+ Contact Us
+Get In Touch
+ +
+
+
+
+ +
+
+ + +
We'll never share your email with anyone else.
+
+
+
+ How many buildings do you need planned?
+ + +
+
+
+
+ Provide a brief overview of your project needs:
+ ++
+ I am a small business
+ I am a residential owner
+ I am a corporation
+
+ +
+
+
+ + I am a residential owner
+ I am a corporation
+
+ +
+
+
+
+
+
diff --git a/css/index.css b/css/index.css
index e6b2b589c1..54c3202901 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,861 @@
-/* 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: 8.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;
+ line-height: 2.4rem;
+ color: #FFFFFF;
+ 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;
+}
+.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: 16px;
+ padding-bottom: 28px;
+}
+.CTA button {
+ background: #FFFFFF;
+ font-size: 16px;
+ 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: 22px;
+ }
+}
+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;
+ }
+}
+/*
+footer {
+ width: 100%;
+ background-color: #828282;
+
+ h6 {
+ font-size: 1.9rem;
+ color: #FFFFFF;
+ }
+
+ p {
+ font-size: 1.2rem;
+ color: #FFFFFF;
+ letter-spacing: .1rem;
+ font-weight: normal;
+ }
+ .footer-content {
+ padding: 5%;
+ display: flex;
+
+ .footer-address {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ }
+ }
+
+ .copyright {
+ text-align: center;
+}
+
+}
+*/
+.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;
+ }
+}
+/*
+.menu-container {
+ background-color: #99A4AF;
+ position: relative;
+ height: 50px;
+ width: 99.99%;
+ z-index: 999;
+
+ .menu-container::after {
+ content: '';
+ clear: both;
+ display: block;
+}
+
+ .logo {
+ float: left;
+ padding: 1% 0 0 8.2%;
+ margin: 0;
+ z-index: 2;
+ }
+
+ .menu .content {
+ display: block;
+ transition: 0.3s all ease;
+ position: absolute;
+ top: 100%;
+ padding: 17.4%;
+ right: 0;
+ left: 0;
+ background: #99A4AE;
+ opacity: 0.9;
+ }
+
+ .menu .site-nav {
+ display: none;
+ }
+
+ .site-nav--open {
+ }
+
+ .site-nav ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ .content .nav-link{
+ color: #FFFFFF;
+ padding-left: 36.5%;
+ text-decoration: none;
+ font-size: 4.5rem;
+ line-height: 81px;
+ letter-spacing: 2px;
+ z-index: 1;
+ cursor: pointer;
+ }
+
+ .site-nav .nav-link:first-child {
+ padding-top: 5%;
+ }
+
+ &:hover {
+ color: #504446;
+ }
+
+ .menu-toggle {
+ padding: 2rem;
+ position: absolute;
+ top: 4%;
+ right: 6%;
+ cursor: pointer;
+ }
+
+ .hamburger,
+ .hamburger::before,
+ .hamburger::after {
+ content: '';
+ display: block;
+ background: #FFFFFf;
+ height: 3px;
+ width: 2.5rem;
+ border-radius: 3px;
+ transition: all ease-in-out 500ms;
+ }
+
+ .hamburger::before {
+ transform: translateY(-7px);
+ }
+
+ .hamburger::after {
+ transform: translateY(4px);
+ }
+
+ .open .hamburger {
+ transform: rotate(45deg);
+ }
+
+ .open .hamburger::before {
+ opacity: 0;
+ }
+
+ .open .hamburger::after {
+ transform: translateY(-3px) rotate(-90deg);
+ }
+
+}
+*/
+.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%;
+ }
+}
+/*
+.rp-title {
+ width: 100%;
+ padding: 6.5% 0 4.5% 8.5%;
+}
+
+.recent-projects {
+ width: 100%;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+
+ .project-img {
+ position: relative;
+ text-align: center;
+ }
+
+ .mobile-villas-img,
+ .mobile-outskirts-img,
+ .mobile-blocks-img {
+ display: none;
+ }
+}
+
+.box-title {
+ width: 30%;
+ // position: absolute;
+ top: 80%;
+ left: 70%;
+}
+
+h4 {
+ text-align: center;
+ font-weight: normal;
+ font-size: 2.5rem;
+ letter-spacing: 6px;
+ padding: 35px 0px;
+ background-color: #D8D8D8;
+}
+*/
+html {
+ font-size: 62.5%;
+}
+html,
+body {
+ font-family: 'Roboto', Arial, sans-serif;
+}
+h1 {
+ font-size: 25px;
+ font-weight: bold;
+ color: #ffffff;
+}
+h2 {
+ font-size: 20px;
+ line-height: 24px;
+ color: #ffffff;
+ font-weight: normal;
+}
+h3 {
+ font-size: 20px;
+ font-weight: bold;
+ color: #222222;
+}
+h4 {
+ font-size: 2rem;
+ font-weight: bold;
+}
+h5 {
+ font-size: 20px;
+ line-height: 24px;
+ color: #ffffff;
+ font-weight: normal;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
diff --git a/guild.html b/guild.html
new file mode 100644
index 0000000000..bdc52cd708
--- /dev/null
+++ b/guild.html
@@ -0,0 +1,200 @@
+
+ Where We Work
+ +
+
+ New York
+123 Lane
+ Suite 100
+ Albany, NY 12345
+ 202 555 0144
Florida
+Ocean Drive
+ Suite 201
+ Orlando, FL 22345
+ 502 555 0144
California
+Mountain Street
+ Suite 105
+ San Diego, CA 22345
+ 702 555 0144
+ 
+ 
+
+
+
+
+
+
+
+
+ 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.
+ +