diff --git a/contact.html b/contact.html index 868844fe14..8e241897d4 100644 --- a/contact.html +++ b/contact.html @@ -12,50 +12,154 @@ -

Contact

+
- + +
+

S&J

+
+
Dropdown
+ Home + Services + Contact +
+
+ + -Email Address -Enter Email -We'll never share your email with anyone else. + +
+ contactUsImage +
Contact Us
+
-How many buildings do you need planned? -1-5 +
-Provide a brief overview of your project needs: +
+

Get In Touch

+ + + + +
+

How many buildings do you need planned?

+
+ +
+
+ +
+

Provide a brief overview of your project needs:

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

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

+
+
+
+ -Submit +
-Where We Work -New York -123 Lane -Suite 100 -Albany, NY 12345 -202 555 0144 + + \ No newline at end of file diff --git a/css/index.css b/css/index.css index e6b2b589c1..2542459ff3 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,417 @@ -/* 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 */ +@villas Mobile: + +* { + box-sizing: border-box; +} +.container { + max-width: 880px; + margin: 0 auto; + padding: 20px 1.25%; + font-family: Roboto; + border: 1px solid black; +} +.header-container { + width: 100%; + height: 70px; + border-bottom: 1px solid #ffffff; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #828282; +} +.header-container .header { + height: 30px; +} +.header-container h2 { + margin: 0 25px; + font-weight: bold; + color: #FFFFFF; +} +img { + width: 100%; + height: auto; +} +/*Dropdown Content*/ +.dropdown { + z-index: 2; + position: absolute; + top: 10px; + right: 425px; + cursor: pointer; +} +.dropdown .dropdown-button { + padding: 15px; + border: 3px solid #ffffff; + color: #FFFFFF; + font-size: 2rem; + font-weight: bold; +} +.dropdown .dropdown-button:hover { + background-color: #FFFFFF; + color: #828282; +} +.dropdown .dropdown-content { + width: 100%; + position: absolute; + background-color: #828282; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; + border: 2.5px solid #828282; +} +.dropdown .dropdown-link { + width: 100%; + text-align: center; + padding: 15px 0; + font-size: 1.8rem; + text-decoration: none; + color: #FFFFFF; +} +.dropdown .dropdown-link:hover { + color: #ffffff; + background-color: #828282; +} +.dropdown .dropdown-hidden { + display: none; +} +/* Dropdown Content End*/ +.jumbotron { + position: relative; + text-align: center; +} +.jumbotron .top-left { + position: absolute; + top: 270px; + left: 20px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFFFFF; +} +.jumbotron .center { + position: absolute; + top: 340px; + left: 20px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFFFFF; +} +.jumbotron .bottom-left { + position: absolute; + top: 410px; + left: 20px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFFFFF; +} +.subHeaders { + display: flex; + padding: 30px; + justify-content: space-around; +} +.subHeaders img { + width: 350px; +} +.subHeaders p { + width: 250px; +} +button { + background: #FFFFFF; +} +.main-content { + justify-content: center; +} +.subHeaders h2, +.main-content h2 { + font-weight: bold; + font-size: 28px; +} +.title { + display: flex; +} +.right-bottom, +.left-bottom { + position: absolute; + width: 200px; + font-family: Arial; + font-size: 28px; + background: #D8D8D8; +} +.main-content .right-bottom { + position: absolute; + padding: 20px; + right: 325px; +} +.main-content .left-bottom { + position: absolute; + padding: 20px; + left: 325px; +} +.villas-text, +.outskirts-text, +.blocks-text { + width: 100%; + text-align: center; +} +.villas-text p, +.outskirts-text p, +.blocks-text p { + font-family: Arial; + margin: 10px 180px; + padding: 20px; + width: 400px; + line-height: 1.25; +} +footer h3 { + font-size: 20px; + line-height: 24px; + color: #FFFFFF; +} +footer { + background: #828282; + display: flex; + justify-content: space-between; + padding: 15px; + height: 175px; +} +footer p { + font-size: 14px; + line-height: 26px; + color: #FFFFFF; +} +@media (max-width: 500px) { + .container { + width: 500px; + } + .header .dropdown-button { + width: 100%; + display: flex; + flex-direction: column; + margin: 0; + align-items: center; + padding: 0; + } + .jumbotron { + width: 75%; + } + .subHeaders { + display: flex; + flex-direction: column; + } + .right.bottom, + .left-bottom { + display: flex; + flex-direction: column; + justify-content: center; + } + .title { + width: 25%; + display: flex; + justify-conten: center; + } +} +/*Services Page*/ +.services-heading { + position: relative; + text-align: center; + margin: 0 0 20px 0; +} +.services-heading .bottom-left { + position: absolute; + top: 120px; + left: 60px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFFFFF; +} +.container .description p { + display: flex; + margin: 15px 30px; +} +.tabs img { + width: 50%; + height: auto; +} +.tabs .tabs-items { + display: flex; + width: 100%; + height: 450px; + justify-content: center; +} +.tabs .tabs-item { + display: none; + width: 75%; + padding: 30px; +} +.tabs .tabs-item .tabs-item-title { + font-size: 24px; + font-weight: bold; + padding-bottom: 10px; +} +.tabs .tabs-item-selected { + display: block; +} +.tabs .tabs-links { + display: flex; + justify-content: space-between; +} +.tabs .tabs-link { + padding: 20px 25px; + display: flex; + font-size: 20px; + font-weight: bold; + border: 1px solid #5E9F89; + cursor: pointer; +} +.tabs .tabs-link:hover { + background-color: #5E9F89; +} +.tabs .tabs-link-selected { + z-index: 2; + border-right: 1px solid #5E9F89; + background-color: #5E9F89; + color: black; +} +.tabs .tabs-link-selected:hover { + background-color: #5E9F89; +} diff --git a/index.html b/index.html index 8a84a17304..f64a9fbbf6 100644 --- a/index.html +++ b/index.html @@ -12,85 +12,137 @@ -

You got this! Good luck.

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

+ + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js index bb3d341cf0..bf6617ef39 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,69 @@ -// JS goes here \ No newline at end of file +// JS goes here + +//Hamburger Button +function myFunction(x) { + x.classList.toggle("change"); +} +//Hamburger End + +//Service page +class TabLink { + constructor(element) { + this.element = element; + this.data = this.element.dataset.tab; + this.item = document.querySelector(`.tabs-item[data-tab="${this.data}"]`); + this.tabItem = new TabItem(this.item); + this.element.addEventListener("click", () => { + this.select() + }) + }; + + select() { + const links = document.querySelectorAll(".tabs-link"); + links.forEach( link => { + link.classList.remove('tabs-link-selected') + }); + this.element.classList.add('tabs-link-selected'); + this.tabItem.select(); + } + } + + class TabItem { + constructor(element) { + this.element = element; + } + + select() { + const items = document.querySelectorAll('.tabs-item'); + items.forEach( item => { + item.classList.remove('tabs-item-selected'); + }) + this.element.classList.add('tabs-item-selected') + } + } + + const links = document.querySelectorAll(".tabs-link"); + links.forEach(link => new TabLink(link)); + + //Dropdown + + class Dropdown { + constructor(element) { + this.element = element; + this.button = this.element.querySelector(".dropdown-button"); + this.content = this.element.querySelector(".dropdown-content"); + this.button.addEventListener('click', () => { + this.toggleContent()}); + } + + toggleContent() { + this.content.classList.toggle("dropdown-hidden") + } + } + + + let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown)); + + + //Hamburger Menu + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..c71f134ddf 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,329 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +@villasMobile: + +* { + box-sizing: border-box; +} + + +.container { + max-width: 880px; + margin: 0 auto; + padding: 20px 1.25%; + font-family: Roboto; + border: 1px solid black; +} + +.header-container { + width: 100%; + height: 70px; + border-bottom: 1px solid #ffffff; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #828282; +} +.header-container .header { + height: 30px; +} + +.header-container h2 { + margin: 0 25px; + font-weight: bold; + color:#FFFFFF +} + +img { + width: 100%; + height: auto; +} + +/*Dropdown Content*/ + +.dropdown { + z-index: 2; + position: absolute; + top: 10px; + right: 425px; + cursor: pointer; +} +.dropdown .dropdown-button { + padding: 15px; + border: 3px solid #ffffff; + color: #FFFFFF; + font-size: 2rem; + font-weight: bold; +} +.dropdown .dropdown-button:hover { + background-color: #FFFFFF; + color:#828282; +} +.dropdown .dropdown-content { + width: 100%; + position: absolute; + background-color: #828282; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; + border: 2.5px solid #828282;; +} +.dropdown .dropdown-link { + width: 100%; + text-align: center; + padding: 15px 0; + font-size: 1.8rem; + text-decoration: none; + color: #FFFFFF; +} +.dropdown .dropdown-link:hover { + color: #ffffff; + background-color: #828282;; +} +.dropdown .dropdown-hidden { + display: none; +} + +/* Dropdown Content End*/ + +.jumbotron { + position: relative; + text-align: center; +} + +.jumbotron .top-left { + position: absolute; + top: 270px; + left: 20px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFFFFF; +} + +.jumbotron .center { + position: absolute; + top: 340px; + left: 20px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFFFFF; +} + +.jumbotron .bottom-left { + position: absolute; + top: 410px; + left: 20px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFFFFF; +} + +.subHeaders { + display: flex; + padding: 30px; + justify-content: space-around; +} + +.subHeaders img { + width: 350px; +} + +.subHeaders p { + width: 250px; +} + +button { + background: #FFFFFF; +} + +.main-content { + justify-content: center; + //border: 2px dashed cyan; +} + + +.subHeaders h2, .main-content h2 { + font-weight: bold; + font-size: 28px; +} +.title { + display: flex; +} + +.right-bottom, .left-bottom { + position: absolute; + width: 200px; + font-family: Arial; + font-size: 28px; + background: #D8D8D8; +} + +.main-content .right-bottom{ + position: absolute; + padding: 20px; + right: 325px; + //border: 2px dashed purple; + } + +.main-content .left-bottom { + position: absolute; + padding: 20px; + left: 325px; + //border: 2px dashed purple; +} +.villas-text, .outskirts-text, .blocks-text { + width: 100%; + text-align: center; + + p { + font-family: Arial; + margin: 10px 180px; + padding: 20px; + width: 400px; + line-height: 1.25; + //border: 2px solid deeppink; + } +} + +footer h3 { + font-size: 20px; + line-height: 24px; + color: #FFFFFF; +} + +footer { + background: #828282; + display: flex; + justify-content: space-between; + padding: 15px; + height: 175px; +} + +footer p { + font-size: 14px; + line-height: 26px; + color: #FFFFFF; +} +//****************************************** + +@media(max-width: 500px) { +.container { + width:500px; +} + +// .header-container { +// flex-wrap: wrap; +// justify-content:center; +// } + +.header .dropdown-button { + width: 100%; + display: flex; + flex-direction: column; + margin: 0; + align-items: center; + padding: 0; +} +.jumbotron { + width: 75%; +} + +.subHeaders { + display: flex; + flex-direction: column; +} + +.right.bottom, .left-bottom { + display: flex; + flex-direction: column; + justify-content: center; +} + .title { + width: 25%; + display: flex; + justify-conten: center; + } +} +//************************************************ +/*Services Page*/ + +.services-heading { + position: relative; + text-align: center; + margin: 0 0 20px 0; +} + +.services-heading .bottom-left { + position: absolute; + top: 120px; + left: 60px; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFFFFF; + } + + .container .description p { + display: flex; + margin: 15px 30px; + } + + +.tabs img { + width: 50%; + height: auto; + +} +.tabs .tabs-items { + display: flex; + width: 100%; + height: 450px; + justify-content: center; +} +.tabs .tabs-item { + display: none; + width: 75%; + padding: 30px; + +} +.tabs .tabs-item .tabs-item-title { + font-size: 24px; + font-weight: bold; + padding-bottom: 10px; +} +.tabs .tabs-item-selected { + display: block; + } +.tabs .tabs-links { + display: flex; + justify-content: space-between; +} +.tabs .tabs-link { + padding: 20px 25px; + display: flex; + font-size: 20px; + font-weight: bold; + border: 1px solid #5E9F89; + cursor: pointer; + +} +.tabs .tabs-link:hover { + background-color:#5E9F89; +} +.tabs .tabs-link-selected { + z-index: 2; + border-right: 1px solid #5E9F89; + background-color:#5E9F89; + color: black; +} +.tabs .tabs-link-selected:hover { + background-color: #5E9F89; +} + +//Contact \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..700c71062d 100644 --- a/services.html +++ b/services.html @@ -12,27 +12,140 @@ -

Services

+
- + - - - +
+ +

S&J

+
+
Menu
+
+ Home + Services + Contact +
+
+

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