diff --git a/contact.html b/contact.html index 868844fe14..7aa4118d92 100644 --- a/contact.html +++ b/contact.html @@ -12,7 +12,116 @@ -

Contact

+
+ + +
+ Abstract Buildings + abstract img +
+

Contact Us

+
+
+ +
+
+

Get In Touch

+ +

Email

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

Submit

+
+ +
+

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

+
+
+ +
+ + +
- -

You got this! Good luck.

- - - - - - - +
+ + +
+ Abstract Buildings + +
+

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

+
+
blueprint
+
blueprint
+ +
+
+
Waterfront View
+
blueprint
+ +
+

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

+
+
+ Image of the 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 outskirts + +
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..30176c353d 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,61 @@ -// JS goes here \ No newline at end of file +class Tab{ + constructor(tab){ + this.tab = tab; + this.data = this.tab.dataset.tab; + this.selectedTab = document.querySelector(`.button[data-tab = "${this.data}"]`) + + + this.selectedTab = new TabContent(this.data); + + this.tab.addEventListener('click',()=>this.select()) + } + + select(){ + document.querySelectorAll('.button').forEach(tab => tab.classList.remove('selected')) + this.tab.classList.add('selected') + + this.selectedTab.select(); + } +} + +class TabContent{ + constructor(content){ + this.content = content; + } + + select(){ + const cards = document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('selected')) + const cardToDisplay = document.querySelector(`.tab-content[data-tab = "${this.content}"]`) + cardToDisplay.classList.add('selected') + } +} + +//grab all the tab elements and pass to Tab class +tabs = document.querySelectorAll('.button').forEach(tab => new Tab(tab)) + +class NavButton{ + constructor(button){ + this.button = button; + this.button.addEventListener('click', ()=>this.handleClick()) + } + + handleClick(){ + document.querySelectorAll('.navigation-button').forEach(button => button.classList.toggle('active')) + const navItems = document.querySelector('.nav-items') + // navItems.classList.toggle('active') + + if(navItems.classList.contains('active')){ + TweenMax.to(".nav-items", .75, {autoAlpha: 0,transform: 'translateY(0vh)',ease: Sine.easeOut}) + setTimeout(()=>navItems.classList.toggle('active'),750) + + }else{ + navItems.classList.toggle('active') + TweenMax.to(".nav-items", .75, {autoAlpha:.95,transform: 'translateY(10vh)', ease: Sine.easeOut}); + + } + } +} + + +const menuButton = document.querySelectorAll('.navigation-button').forEach(button => new NavButton(button)) + diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..da994493e7 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,814 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +body{ + display: flex; + justify-content: center; + font-size: 62.5%; + font-family: 'Roboto', 'Arial', sans-serif; + box-sizing: border-box; + + .container{ + width: 72%; + display: flex; + flex-direction: column; + align-items: center; + + @media (max-width: 500px) { + width: 100%; + } + } +} + +.navigation{ + position: fixed; + display: flex; + justify-content: space-between; + height: 50px; + width: 72%; + background-color: #99A4AF; + font-size: 1.5rem; + z-index: 1; + + @media (max-width: 500px){ + align-items: center; + height: 70px; + width: 100%; + } + + h1{ + padding-top: 12px; + font-size: 1.4; + font-weight: 600; + margin-left: 18%; + color: #FFFFFF; + z-index: 2; + + @media (max-width: 500px){ + font-size: 2rem; + padding: 0; + margin-left: 30px; + } + } + + .nav-items{ + display: none; + position: absolute; + flex-direction: column; + justify-content: center; + align-items: baseline; + top: -25vh; + left: 0; + height: 125vh; + width:71.25vw; + opacity: 0; //original .95 + background-color: #99A4AF; + + @media (max-width: 500px) { + width: 100vw; + } + + a{ + font-size: 3rem; + text-decoration: none; + font-weight: 600; + margin-bottom: 5%; + color: #FFFFFF; + margin-left: 43%; + + @media (max-width: 500px){ + margin-left: 10%; + } + + &:hover{ + color: #504545; + } + + @media (max-width: 500px){ + font-size: 5rem; + margin-bottom: 10%; + } + } + } + + .active{ + display: flex; + } + + .not-active{ + opacity: 0; + } + + + img{ + margin-right: 18%; + padding-top: 12px; + height: 21px; + widows: 32px; + display: none; + z-index: 2; + cursor: pointer; + + + @media (max-width: 500px){ + padding: 0; + margin-right: 30px + } + } + +} + +.jumbotron{ + height: 550px; + margin-top: 50px; + + @media (max-width: 500px){ + height: 5.5%; + margin-bottom: 7%; + width: 100%; + } + + img{ + height: 100%; + width: 100%; + + @media (max-width: 500px){ + width: 100%; + height: 100%; + } + } + + .home-jumbotron{ + + @media(max-width: 500px){ + display:none; + } + } + + .home-jumbotron-mobile{ + display: none; + + @media (max-width: 500px){ + display: block; + height: 300px; + width: 100%; + } + } + + .jumbotron-text{ + font-size: 4rem; //this is correct font size + margin: -275px 0 0 5%; + font-weight: 600; + width: 300px; + color: #FFFFFF; + + @media (max-width: 500px){ + font-size: 3rem; + margin: -200px 0 0 10px; + } + + p{ + margin: 10px; + } + } +} + +.learn-more{ + display:flex; + flex-direction: column; + align-items: center; + + @media (max-width: 500px){ + height: 1400px; + margin-top: 50px; + width: 95%; + } + + .learn-more-card{ + display: flex; + justify-content: space-between; + width: 83%; + padding: 25px, 0; + margin: 50px 0; + + @media (max-width: 500px){ + flex-direction: column; + height: 650px; + margin: 0 0 25px 0; + } + + .learn-more-img{ + + @media (max-width: 500px){ + order: 1; + display: none; + } + + img{ + @media (max-width: 500px){ + + } + } + } + + .learn-more-img-mobile{ + display: none; + + @media (max-width: 500px) { + display: block; + } + + img{ + @media (max-width: 500px){ + width: 100%; + } + } + } + + .learn-more-content { + display: flex; + flex-direction: column; + margin: 45px 0; + width: 50%; + + @media (max-width: 500px){ + order: 2; + width: 100%; + height: 350px; + margin: 0; + } + + h2{ + font-size: 1.5rem; + font-weight: 600; + + @media (max-width: 500px){ + font-size: 1.8rem; + margin: 30px 0 10px 0; + width: 100%; + } + } + + p{ + font-size: 1rem; + line-height: 1.5rem; + margin-top: 25px; + + @media (max-width: 500px){ + font-size: 1.15rem; + line-height: 1.5rem; + margin-bottom: 15px; + + } + } + + .button{ + display: flex; + justify-content: center; + align-items: center; + border: 1px solid black; + height: 40px; + width: 135px; + cursor: pointer; + + &:hover{ + background-color: black; + color:#FFFFFF; + } + + @media (max-width: 500px){ + width: 100%; + height: 20%; + } + + } + } + } +} + +.projects{ + width: 83%; + display: flex; + flex-direction: column; + + h3{ + font-size: 1.5rem; + font-weight: 600; + margin: 50px 0 50px 0; + + @media(max-width: 500px){ + font-size: 2rem; + margin: 0 0 30px 0; + } + } + + .project-card{ + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 75px; + + @media (max-width: 500px){ + margin-bottom: 25px; + } + + div{ + + .project-img{ + @media (max-width: 500px){ + display:none; + } + } + + .project-mobile-img{ + display: none; + + @media (max-width: 500px){ + display: block + } + } + + img{ + width: 100%; + margin-bottom: 100px; + + } + + div{ //this is for img text + border: 1px solid green; + display: flex; + position: absolute; + justify-content: center; + letter-spacing: .5rem; + align-items: center; + font-size: 1.5rem; //this is correct font size + margin: -160px 0 0px 38%; + width: 310px; + height: 95px; + border: 1px solid #FFFFFF; + background-color: #DCDCDC; + + @media(max-width: 500px){ + margin: -110px 0 0 3.5%; + width: 290px; + } + } + + } + + .outskirts{ + div{ + margin: -160px 0 0px 0; + + @media(max-width: 500px){ + margin: -110px 0 0 3.5%; + width: 290px; + } + } + + } + + p{ + width: 52.5%; + font-size: 1.1rem; + letter-spacing: .01rem; + line-height: 1.5rem; + margin-bottom: 25px; + + @media(max-width: 500px){ + width: 80%; + } + } + } +} + +footer{ + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #828282; + width: 100%; + height: 190px; + padding: 6% 0 0 0; + color: #FFFFFF; + + @media (max-width: 500px) { + height: 675px; + width: 100%; + } + + .footer-content{ + display: flex; + justify-content: space-around; + margin: 0 2% 0 2%; + + @media (max-width: 500px) { + flex-direction: column; + height: 750px; + padding: 15px; + } + + h4{ + font-size: 1.2rem; + font-weight: 600; + + } + + p{ + font-size: .75rem; + } + + .contact-form{ + input{ + margin: 5% 0 3% 0; + width: 100%; + height: 35%; + border-radius: 5px; + padding-left: 3%; + color: #828282; + + @media (max-width: 500px) { + width: 85%; + height: 40px; + margin: 7% 0 5% 0; + } + } + } + + address{ + h4{ + + @media (max-width: 500px){ + margin-top: 10%; + } + } + + p{ + line-height: 1.5rem; + letter-spacing: .08rem; + + @media (max-width: 500px){ + letter-spacing: .05rem; + } + } + } + } + + small{ + display: flex; + justify-content: center; + height: 10%; + font-size: .7rem; + + @media (max-width: 500px){ + height: 45px; + justify-content: flex-start; + align-items: center; + margin-left: 5%; + + } + } +} + +//Services page +.services-jumbotron{ + height: 190px; + width: 100%; + margin-top: 50px; + + img{ + height: 100%; + width: 100%; + + @media (max-width: 500px){ + + } + } + + .services-jumbo-img{ + + @media(max-width: 500px){ + display:none; + } + } + + .services-jumbo-mobile-img{ + display: none; + + @media (max-width: 500px){ + display: block; + height: 300px; + } + } + + .services-jumbotron-text{ + font-size: 4rem; //this is correct font size + margin: -8% 0 0 5%; + font-weight: 600; + width: 300px; + color: #FFFFFF; + + @media (max-width: 500px){ + margin: -25% 0 0 5%; + } + + p{ + margin: 10px; + } + } +} + +.about-services{ + height: 70px; + width: 85%; + margin: 5% 0; + + @media (max-width: 500px){ + margin: 150px 0; + } + + p{ + font-size: 1.01rem; + line-height: 1.5rem; + } +} + +.services-tabs{ + + width: 85%; + + @media (max-width: 500px){ + height:1150px; + } + .tabs{ + display: flex; + justify-content: space-between; + + @media (max-width: 500px) { + flex-direction: column; + } + .button{ + display: flex; + justify-content: center; + align-items: center; + height: 50px; + width: 22%; + border: 1px solid black; + cursor: pointer; + + @media (max-width: 500px) { + width: 100%; + margin-bottom: 25px; + } + } + p{ + font-size: 1.3rem; + font-weight: 600; + } + + .selected{ + background-color: #5E9FB9; + color: #FFFFFF; + } + } + + .service-tabs-contents{ + + + .tab-content{ + display: none; + height: 380px; + padding: 5% 0; + + + @media(max-width: 500px) { + flex-direction: column; + height: 750px; + } + + .tab-text{ + width: 50%; + + @media (max-width: 500px) { + width: 100%; + } + h2{ + font-size: 1.6rem; + font-weight: 600; + margin-bottom: 2%; + + @media(max-width: 500px){ + margin-bottom: 20px; + } + } + p{ + font-size: 1rem; + line-height: 1.7rem; + margin-bottom: 5%; + + @media (max-width: 500px) { + font-size: 1.2rem; + } + } + } + + img{ + margin: 5% 0 10% 0; + + } + } + + .selected{ + display: flex; + justify-content: space-between; + + + } + } + +} + +//Contact page + +.contact-jumbotron{ + height: 190px; + width: 100%; + margin-top: 50px; + + img{ + height: 100%; + width: 100%; + + @media (max-width: 500px){ + + } + } + + .contact-jumbo-img{ + + @media(max-width: 500px){ + display:none; + } + } + + .contact-jumbo-mobile-img{ + display: none; + + @media (max-width: 500px){ + display: block; + height: 300px; + } + } + + .contact-jumbotron-text{ + font-size: 4rem; //this is correct font size + margin: -90px 0 0 25px; + font-weight: 600; + width: 350px; + color: #FFFFFF; + + @media (max-width: 500px){ + margin: -75px 0 0 20px; + font-size: 3rem; + } + + p{ + margin: 10px; + } + } +} + +.contact-content{ + height: 650px; + display: flex; + justify-content: center; + width: 100%; + + @media (max-width: 700px){ + flex-direction: column; + justify-content: space-around; + height: 1200px; + width: 90%; + } + + + .contact-form{ + display: flex; + flex-direction: column; + margin: 40px 0; + width: 55%; + + @media (max-width: 700px){ + width: 100%; + height: 575px; + margin: 150px 0 0 0; + } + + + h2{ + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 25px; + } + h4{ + font-size: .9rem; + font-weight: 600; + margin-bottom: 5px; + } + input{ + width: 75%; + height: 35px; + border: 1px solid #828282; + color: #828282; + padding-left: 10px; + border-radius: 5px; + margin-bottom: 5px; + } + + input[type=number]::-webkit-inner-spin-button, + input[type=number]::-webkit-outer-spin-button{ + opacity: 1; + height:35px; + } + small{ + margin-bottom: 30px; + color: #828282; + } + + textarea{ + width: 75%; + border-radius: 5px; + margin-bottom: 30px; + + } + + form{ + margin-bottom: 30px; + .radio-button{ + margin: 3px 3px 5px 0; + width: 3%; + height: 15px; + vertical-align: middle; + + } + } + + .button{ + display: flex; + justify-content: center; + align-items: center; + height: 40px; + width: 20%; + border: 1px solid black; + font-size: .8rem; + font-weight: 600; + } + + .how-Many{ + margin-bottom: 30px; + } + } + + .contact-location{ + width: 35%; + margin-top: 50px; + + @media (max-width: 500px){ + width: 100%; + } + + h2{ + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 30px; + } + + address{ + margin-bottom: 35px; + + + h3{ + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 12px; + } + + p{ + font-size: .8rem; + margin-bottom: 12px; + font-weight: 600; + } + } + } +} + +.testdiv{ + width: 100%; + .test{ + border:1px solid red; + font-size: 5rem; + width: 50%; + } + +} diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/services.html b/services.html index fb5a79e18a..32c92d250b 100644 --- a/services.html +++ b/services.html @@ -5,33 +5,123 @@ Services + + +
+ + +
+ Abstract Buildings + abstract img +
+

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

+

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.

+
+ Image of blueprint +
+ +
+
+

Contruction

+

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.

+
+ Image of blueprint +
-

Services

+
+
+

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.

+
+ Image of blueprint +
- +
+
+

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.

+
+ Image of blueprint +
- + Copyright © 2018 Smith and Jones + +
diff --git a/test.html b/test.html new file mode 100644 index 0000000000..b3cc0e93f3 --- /dev/null +++ b/test.html @@ -0,0 +1,24 @@ + + + + + Home + + + + + + + + + +
+

S&J

+
+ + + + + \ No newline at end of file