diff --git a/contact.html b/contact.html index 868844fe14..a3f16ad39b 100644 --- a/contact.html +++ b/contact.html @@ -9,53 +9,107 @@ - - -

Contact

- - - +
+
+ +
+
+ +

Contact Us

+
+ +
+
+
+

Get In Touch

+ Enter address + +

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 owner
+ 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 102
+ Orlando,FL 22345
+ 502 555 0144

+

California

+

Mountain Street
+ Suite 105
+ San Diego, CA 22345
+ 702 555 0144

+
+
+ + +
Copyright © 2018 Smith and Jones
+
+ + \ No newline at end of file diff --git a/css/index.css b/css/index.css index e6b2b589c1..3ad9258e93 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,572 @@ -/* 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; +} +.container { + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: black; + font-weight: Regular; + font-size: 16px; + line-height: 24px; +} +.container .header { + background-color: lightslategray; + height: 50px; + max-width: 880px; +} +.container .header h1 { + color: white; + padding-left: 50px; + font-size: 20px; +} +.container footer { + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; +} +.container footer .emailQ { + display: flex; + flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; +} +.container footer .email-css { + display: flex; + flex-direction: column; +} +.container footer .location { + display: flex; + justify-content: space-around; + flex-direction: column; +} +.container footer .email-heading { + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF; + align-content: center; + padding-right: 20px; +} +.container footer .email-text { + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF; +} +.container h2 { + Font-Weight: Bold; + Font-Size: 28px; + Color: #222222; + margin-bottom: 30px; + display: flex; + font-family: 'Roboto', sans-serif; +} +.container h3 { + display: flex; + justify-content: flex-end; + font-family: 'Roboto', sans-serif; +} +.container h5 { + display: flex; + justify-content: center; + Background: #828282; + padding-top: 20px; + color: white; + font-family: 'Roboto', sans-serif; +} +@media (max-width: 500px) { + .container .header h1 { + padding: 15px; + font-size: 25px; + } + .container .middle-content { + justify-content: center; + } + .container footer { + display: flex; + flex-direction: column; + } + .container footer .emailQ p { + font-size: 20px; + color: #FFFFFF; + } + .container footer .emailQ .confidential { + font-size: 14px; + display: flex; + justify-content: center; + } + .container footer .email-css { + padding: 0 20px; + } + .container .location { + display: flex; + flex-direction: column; + margin-bottom: 30px; + } + .container .email-heading { + justify-content: flex-start; + } +} +.home { + height: 540px; +} +.home_jumbotron { + position: relative; + bottom: 12px; +} +.recent-projects h3 { + position: relative; + bottom: 2rem; + background-color: #D8D8D8; + font-size: 2rem; +} +.recent-projects p { + width: 50%; + margin: 25px 0px 25px 160px; + text-align: center; + font-family: 'Roboto', sans-serif; +} +button { + border: 2px solid #222222; + border-radius: 4px; + margin-right: 255px; + padding-bottom: 15px; + padding-top: 15px; +} +button:hover { + background-color: black; + color: white; +} +.middle-content { + margin: 30px 0 90px; + display: flex; + justify-content: space-between; +} +.middle-content .text-content { + display: flex; + flex-direction: column; + font-weight: Regular; + font-Size: 16px; + line-Height: 24px; + padding: 0 0 0 10px; +} +.middle-content .pic1 { + padding-right: 45px; + width: 48%; + position: relative; + left: 20px; +} +.middle-content .pic2 { + width: 48%; +} +.left { + margin-left: 480px; + padding-right: 70px; + line-height: 5rem; + letter-spacing: 10px; + font-family: 'Roboto', sans-serif; +} +.container .right { + display: flex; + justify-content: flex-start; + margin-right: 480px; + padding-left: 70px; + line-height: 5rem; + letter-spacing: 10px; + font-family: 'Roboto', sans-serif; +} +@media (max-width: 500px) { + .top-content { + height: 270px; + } + .home-content { + flex-direction: column-reverse; + justify-content: center; + } + .home-content .pic1 { + width: 100%; + padding: 0; + } + .hc2 { + flex-direction: column; + } + .text-content { + margin-top: 20px; + } + .text-content button { + width: 359px; + font-size: 18px; + margin-left: 15px; + } + .recent-projects img { + width: 100%; + height: 210px; + } + .recent-projects p { + margin-left: 50px; + margin-right: 80px; + width: 270px; + } + .recent-projects .left { + margin: 0 20px; + padding: 0; + justify-content: center; + letter-spacing: 10px; + } + .recent-projects .right { + margin: 0 20px; + padding: 0; + justify-content: center; + letter-spacing: 10px; + } + .recent-projects .p-words { + display: flex; + flex-wrap: wrap; + justify-content: center; + } +} +nav { + display: flex; + justify-content: space-between; + width: 860px; + color: #FFFFFF; + height: 50px; + align-items: center; +} +nav .menu { + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; + position: fixed; +} +nav .menu a { + margin: 20% auto; + padding: 20px; + width: 70%; + color: white; + display: flex; + flex-direction: column; +} +nav .menu-button { + width: 31px; + height: 20px; + padding-right: 40px; +} +nav .menu--open { + display: block; +} +nav .close { + display: block; +} +nav nav:hover { + cursor: pointer; +} +@media (max-width: 500px) { + nav { + display: flex; + justify-content: space-between; + width: 380px; + } + nav .menu-button { + padding: 0; + } +} +.tabs .topics { + display: flex; + justify-content: space-between; +} +.tabs .topics .tab { + font-weight: bold; + border: 2px solid black; + background-color: white; + padding: 20px 20px; + color: black; +} +.tabs .topics .tab:hover { + cursor: pointer; +} +.tabs .topics .active-tab { + background-color: lightblue; + color: white; + border: 2px solid black; + justify-content: center; + padding: 20px 20px; +} +.card { + display: none; +} +.card .card_info h1 { + font-weight: bold; + font-size: 20px; +} +.card .card_info p { + font-size: 15px; + line-height: 1.5rem; +} +.active-tab-selected { + display: flex; +} +.services_jumbotron { + position: relative; + bottom: 2rem; + width: 100%; +} +.top-content .services_title { + bottom: 7rem; + font-size: 60px; + left: 4rem; +} +.top-content p { + position: relative; + bottom: 50px; +} +.top-content h1 { + font-size: 48px; + bottom: 15rem; + left: 5rem; + position: relative; + color: white; + line-height: 1.15; +} +.top-content img { + width: 100%; +} +@media (max-width: 500px) { + .tab { + margin-bottom: 20px; + display: flex; + justify-content: center; + } + .card { + display: flex; + flex-direction: column; + } + .top-content img { + width: 100%; + height: 280px; + } + .top-content h1 { + font-size: 3rem; + bottom: 12rem; + left: 1rem; + position: relative; + color: white; + line-height: 1; + } + .services { + height: 440px; + } + .top-content .services_title { + bottom: 107px; + left: 20px; + font-size: 55px; + } + .tabs { + display: flex; + justify-content: center; + } + .topics { + display: flex; + flex-direction: column; + width: 320px; + } + .topics .active-tab { + display: flex; + justify-content: center; + } +} +.contact_us { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.contact_us .get_in_touch { + width: 40%; + line-height: 50px; +} +.contact_us .get_in_touch h2 { + margin-bottom: 0px; +} +.contact_us .get_in_touch .enter_email span { + position: relative; + bottom: 13px; +} +.contact_us .get_in_touch .enter_email p { + font-size: 12px; + position: relative; + bottom: 77px; + color: lightgray; +} +.contact_us .get_in_touch .building_plan { + display: flex; + flex-direction: column; + position: relative; + bottom: 5rem; +} +.contact_us .get_in_touch .project-needs { + position: relative; + bottom: 4rem; +} +.contact_us .where_we_work { + line-height: 2rem; + margin-bottom: 22px; +} +.contact_us .where_we_work h1 { + font-weight: bold; +} +.contact { + font-size: 48px; + bottom: 6rem; + left: 5rem; + position: relative; + color: white; + line-height: 1.15; + font-weight: bold; +} +.email_css { + bottom: 45px; + position: relative; +} diff --git a/index.html b/index.html index 8a84a17304..b70e918fcf 100644 --- a/index.html +++ b/index.html @@ -9,88 +9,99 @@ - - -

You got this! Good luck.

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

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

+
+

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.

+
+
+ +
Copyright © 2018 Smith and Jones
+
+ - \ No newline at end of file diff --git a/js/contact.js b/js/contact.js new file mode 100644 index 0000000000..136c96022b --- /dev/null +++ b/js/contact.js @@ -0,0 +1,73 @@ +// class TabLink { +// constructor(tabElement){ +// // assign this.tabElement to the tabElement DOM reference +// this.tabElement = tabElement; + +// // Get the `data-tab` value from this.tabElement and store it here +// this.tabData = this.tabElement.dataset.tab; +// /* +// // We need to find out if a user clicked 'all' cards or a specific category. Follow the instructions below to accomplish this task: +// // Check to see if this.tabData is equal to 'all' +// if(this.tabData === 'all'){ +// // If `all` is true, select all cards regardless of their data attribute values +// this.cards = document.querySelectorAll(`.card`); +// } else { +// // else if `all` is false, only select the cards with matching this.tabData values +// this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); +// } + +// // Map over the newly converted NodeList we just created in our if statement above. Convert each this.cards element into a new instance of the TabCard class. Pass in a card object to the TabCard class. +// this.cards = Array.from(this.cards).map( card => new TabCard(card)); +// */ +// this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); +// // Add a click event that invokes this.selectTab +// this.tabCard = Array.from(this.cards).map( cards => new TabCard(cards)); +// this.tabElement.addEventListener('click', () => {this.selectTab()}); + +// } + +// selectTab(){ +// // Select all elements with the .tab class on them +// const tabs = document.querySelectorAll(".tab"); + +// // Iterate through the NodeList removing the .active-tab class from each node +// tabs.forEach( tab => { +// tab.classList.remove("active-tab"); +// }) + +// // // Select all of the elements with the .card class on them +// // const cards = document.querySelectorAll('.card'); + +// // // Iterate through the NodeList setting the display style each one to 'none' +// // cards.forEach( card => card.style.display = 'none'); + +// // Add a class of ".active-tab" to this.tabElement +// this.tabElement.classList.add("active-tab"); + +// // Notice we are looping through the this.cards array and invoking selectCard() from the TabCard class. Nothing to update here, the code is written for you to study. +// this.tabCard.select(); +// } +// } + +// class TabCard { +// constructor(cardElement){ +// // Assign this.cardElement to the passed in cardElement. +// this.cardElement = cardElement; +// } +// selectCard(){ +// // Update the style of this.cardElement to display = "flex" +// // Select all ".tabs-item" elements from the DOM +// const items = document.querySelectorAll('.card_info'); +// // Remove the class "tabs-item-selected" from each element +// items.forEach( item => { +// item.classList.remove('active-tab-selected'); +// }) +// // Add a class named "tabs-item-selected" to this element +// this.cardElement.classList.add('active-tab-selected'); +// } +// } + + + +// let tabs = document.querySelectorAll('.tab').forEach(tab => {new TabLink(tab)}); +// // \ No newline at end of file diff --git a/js/index.js b/js/index.js index bb3d341cf0..63fdbd2558 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,63 @@ -// JS goes here \ No newline at end of file + +// class TabLink { +// constructor(element) { +// this.element = element; + +// // Get the custom data attribute on teh Link +// this.data = this.element.dataset.tab; +// // Using the custom data attribute ge tthe associated Item element +// this.item = document.querySelector(`.tabs-item[data-tab="${this.data}"]`); +// // Using the Item element, create a new instance of the TabItem class +// this.tabItem = new TabItem(this.item); + +// this.element.addEventListener('click', () => { +// // Call the select method you define below +// this.select(); +// }); +// }; + +// select() { +// // Get all of the elements with the tabs-link class +// const links = document.querySelectorAll('.tabs-link'); + +// // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links +// links.forEach( link => { +// link.classList.remove('tabs-link-selected') +// }); + +// // Add a class named "tabs-link-selected" to this link +// this.element.classList.add('tabs-link-selected'); + +// // Call the select method on the item associated with this link +// this.tabItem.select(); +// } +// } + +// class TabItem { +// constructor(element) { +// this.element = element; +// } + +// select() { +// // Select all ".tabs-item" elements from the DOM +// const items = document.querySelectorAll('.tabs-item'); +// // Remove the class "tabs-item-selected" from each element +// items.forEach( item => { +// item.classList.remove('tabs-item-selected'); +// }) +// // Add a class named "tabs-item-selected" to this element +// this.element.classList.add('tabs-item-selected'); +// } +// } + +// /* START HERE: + +// - Select all classes named ".tabs-link" and assign that value to the links variable + +// - With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList + +// - In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter + +// */ + +// let links = document.querySelectorAll('.tabs-link').forEach( link => new TabLink(link)); \ No newline at end of file diff --git a/js/nav.js b/js/nav.js new file mode 100644 index 0000000000..d959036dd3 --- /dev/null +++ b/js/nav.js @@ -0,0 +1,16 @@ +const toggleMenu = () => menu.classList.toggle('menu--open'); + // Toggle the "menu--open" class on your menu reference. + + +// Start Here: Create a reference to the ".menu" class +const menu = document.querySelector('.menu'); + // console.log(menu); + +// create a reference to the ".menu-button" class +const menuButton = document.querySelector('.menu-button'); +const closeButton = document.querySelector('.close') + // console.log(menuButton); + +// Using your menuButton reference, add a click handler that calls toggleMenu +menuButton.addEventListener('click', toggleMenu); +closeButton.addEventListener('click', toggleMenu); \ No newline at end of file diff --git a/js/services.js b/js/services.js new file mode 100644 index 0000000000..ffdc5a3ea6 --- /dev/null +++ b/js/services.js @@ -0,0 +1,62 @@ +class TabLink { + constructor(element) { + this.element = element; + + // Get the custom data attribute on teh Link + this.data = this.element.dataset.tab; + // Using the custom data attribute ge tthe associated Item element + this.item = document.querySelector(`.card[data-tab="${this.data}"]`); + // Using the Item element, create a new instance of the TabItem class + this.tabItem = new TabItem(this.item); + + this.element.addEventListener('click', () => { + // Call the select method you define below + this.select(); + }); + }; + + select() { + // Get all of the elements with the tabs-link class + const links = document.querySelectorAll('.tab'); + + // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links + links.forEach( link => { + link.classList.remove('active-tab') + }); + + // Add a class named "tabs-link-selected" to this link + this.element.classList.add('active-tab'); + +// Call the select method on the item associated with this link +this.tabItem.select(); + } +} + +class TabItem { + constructor(element) { + this.element = element; + } + + select() { + // Select all ".tabs-item" elements from the DOM + const items = document.querySelectorAll('.card'); + // Remove the class "tabs-item-selected" from each element + items.forEach( item => { + item.classList.remove('active-tab-selected'); + }) + // Add a class named "tabs-item-selected" to this element + this.element.classList.add('active-tab-selected'); + } +} + +/* START HERE: + +- Select all classes named ".tabs-link" and assign that value to the links variable + +- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList + +- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter + +*/ + +let tabs = document.querySelectorAll('.tab').forEach( tab => new TabLink(tab)); \ No newline at end of file diff --git a/less/contact.less b/less/contact.less new file mode 100644 index 0000000000..037a2fbf6c --- /dev/null +++ b/less/contact.less @@ -0,0 +1,54 @@ +.contact_us{ + display: flex; + flex-direction: row; + justify-content: space-between; + .get_in_touch{ + width: 40%; + line-height: 50px; + h2{ + margin-bottom: 0px; + } + .enter_email{ + span{ + position: relative; + bottom: 13px; + } + p{ + font-size: 12px; + position: relative; + bottom: 77px; + color: lightgray; + } + } + .building_plan{ + display: flex; + flex-direction: column; + position: relative; + bottom: 5rem; + } + .project-needs{ + position: relative; + bottom: 4rem; + } + } + .where_we_work{ + line-height: 2rem; + margin-bottom: 22px; + h1{ + font-weight: bold; + } + } +} +.contact{ + font-size: 48px; + bottom: 6rem; + left: 5rem; + position: relative; + color: white; + line-height: 1.15; + font-weight: bold; +} +.email_css{ + bottom: 45px; + position: relative; +} \ No newline at end of file diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..91f8d1d789 --- /dev/null +++ b/less/global.less @@ -0,0 +1,118 @@ +.container{ + max-width: 880px; + width: 100%; + margin: 0 auto; + Background: #FFFFFF; + Color: black; + font-weight: Regular; + font-size: 16px; + line-height: 24px; + .header{ + background-color: lightslategray; + height: 50px; + max-width: 880px; + h1{ + color: white; + padding-left: 50px; + font-size: 20px; + } + } + footer{ + display: flex; + flex-direction: row; + Background: #828282; + justify-content: space-evenly; + .emailQ{ + display: flex; + flex-direction: column; + Font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF + } + .email-css{ + display: flex; + flex-direction: column; + } + .location{ + display: flex; + justify-content: space-around; + flex-direction: column; + } + .email-heading{ + font-Weight: Regular; + Font-Size: 20px; + Line-Height: 24px; + Color: #FFFFFF; + align-content: center; + padding-right: 20px; + } + .email-text{ + font-Weight: Regular; + font-Size: 14px; + Line-Height: 26px; + Color: #FFFFFF + } + } + h2{ + Font-Weight: Bold; + Font-Size: 28px; + Color: #222222; + margin-bottom: 30px; + display: flex; + font-family: 'Roboto', sans-serif; + } + h3{ + display: flex; + justify-content: flex-end; + font-family: 'Roboto', sans-serif; + } + h5{ + display: flex; + justify-content: center; + Background: #828282; + padding-top: 20px; + color: white; + font-family: 'Roboto', sans-serif; + } + +} +@media(max-width: 500px){ +.container{ + // display:flex; + // flex-direction: column; + // width:100%; + .header h1{ + padding: 15px; + font-size: 25px; + } + .middle-content{ + justify-content: center; + } + footer{ + display: flex; + flex-direction: column; + .emailQ { + p{ + font-size: 20px; + color: #FFFFFF; + } + .confidential{ + font-size: 14px; + display: flex; + justify-content: center; + } + } + .email-css{ + padding: 0 20px; + } + } + .location { + display: flex; + flex-direction: column; + margin-bottom: 30px; + } + .email-heading{ + justify-content: flex-start; + } + } + } \ No newline at end of file diff --git a/less/home.less b/less/home.less new file mode 100644 index 0000000000..d6b1c04500 --- /dev/null +++ b/less/home.less @@ -0,0 +1,124 @@ +.home{ + height: 540px; +} + +.home_jumbotron{ + position: relative; + bottom: 12px; +} +.recent-projects{ + h3{ + position: relative; + bottom: 2rem; + background-color: #D8D8D8; + font-size: 2rem; + } + p{ + width: 50%; + margin: 25px 0px 25px 160px; + text-align: center; + font-family: 'Roboto', sans-serif; + } +} +button{ + border: 2px solid #222222; + border-radius: 4px; + margin-right: 255px; + padding-bottom: 15px; + padding-top: 15px; + &:hover{ + background-color: black; + color: white; + } +} +.middle-content{ + margin: 30px 0 90px; + display: flex; + justify-content: space-between; + .text-content{ + display: flex; + flex-direction: column; + font-weight: Regular; + font-Size: 16px; + line-Height: 24px; + padding: 0 0 0 10px; + } + .pic1{ + padding-right: 45px; + width: 48%; + position: relative; + left: 20px; + } + .pic2{ + width:48%; + } +} +.left{ + margin-left:480px; + padding-right:70px; + line-height: 5rem; + letter-spacing: 10px; + font-family: 'Roboto', sans-serif; +} +.container .right{ + display: flex; + justify-content: flex-start; + margin-right: 480px; + padding-left: 70px; + line-height: 5rem; + letter-spacing: 10px; + font-family: 'Roboto', sans-serif; +} + +@media (max-width: 500px){ + .top-content{ + height: 270px; + } + .home-content{ + flex-direction: column-reverse; + justify-content: center; + .pic1{ + width: 100%; + padding: 0; + } + } + .hc2{ + flex-direction: column; + } + .text-content{ + margin-top: 20px; + button{ + width: 359px; + font-size: 18px; + margin-left: 15px + } + } + .recent-projects{ + img{ + width: 100%; + height: 210px; + } + p{ + margin-left:50px; + margin-right:80px; + width: 270px; + } + .left{ + margin: 0 20px; + padding: 0; + justify-content: center; + letter-spacing: 10px; + } + .right{ + margin: 0 20px; + padding: 0; + justify-content: center; + letter-spacing: 10px; + } + .p-words{ + display: flex; + flex-wrap: wrap; + justify-content: center; + } + } +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..da7525c02c 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,7 @@ -/*------------------------------------*\ -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 */ \ No newline at end of file +@import "reset.less"; +@import "global.less"; +@import "home.less"; +@import "nav.less"; +@import "services.less"; +@import "variables.less"; +@import "contact.less"; \ No newline at end of file diff --git a/less/nav.less b/less/nav.less new file mode 100644 index 0000000000..a4fa592bac --- /dev/null +++ b/less/nav.less @@ -0,0 +1,52 @@ +nav{ + display: flex; + justify-content: space-between; + width: 860px; + color: #FFFFFF; + height: 50px; + align-items: center; + .menu{ + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + z-index: 2; + text-align: center; + margin-top: 30px; + overflow: auto; + position: fixed; + a{ + margin: 20% auto; + padding: 20px; + width: 70%; + color: white; + display: flex; + flex-direction: column; + } +} + .menu-button{ + width: 31px; + height: 20px; + padding-right: 40px; + } + .menu--open{ + display: block; + + } + .close{ + display: block; + } + nav:hover{ + cursor: pointer; + } + @media(max-width: 500px){ + display: flex; + justify-content: space-between; + width: 380px; + .menu-button{ + padding: 0; + } + } +} diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000000..8734ee0b59 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,59 @@ + +/*------------------------------------*\ +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; +} \ No newline at end of file diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..1e7ba1a1ed --- /dev/null +++ b/less/services.less @@ -0,0 +1,122 @@ +.tabs{ + .topics{ + display: flex; + justify-content: space-between; + .tab{ + font-weight: bold; + border: 2px solid black; + background-color: white; + padding: 20px 20px; + color: black; + &:hover { + cursor: pointer; + } + } + .active-tab { + background-color: lightblue; + color:white; + border: 2px solid black; + justify-content: center; + padding: 20px 20px; + } + +} +} + + + +.card{ + display: none; + .card_info h1{ + font-weight: bold; + font-size: 20px; + } + .card_info p{ + font-size: 15px; + line-height: 1.5rem; + } +} +.active-tab-selected{ + display: flex; +} +.services_jumbotron{ + position: relative; + bottom: 2rem; + width: 100%; +} +.top-content .services_title{ + bottom: 7rem; + font-size: 60px; + left: 4rem; +} +.top-content p{ + position: relative; + bottom: 50px; +} + +.top-content{ + h1{ + font-size: 48px; + bottom: 15rem; + left: 5rem; + position: relative; + color: white; + line-height: 1.15; + } + img{ + width:100%; + } + } + +@media (max-width: 500px) { + // .container{ + // width: 90%; + // display: flex; + // flex-direction: column; + // margin: 0 auto; + .tab{ + margin-bottom: 20px; + display: flex; + justify-content: center + } + .card{ + display: flex; + flex-direction: column; + } + .top-content{ + img{ + width: 100%; + height: 280px; + } + h1{ + font-size: 3rem; + bottom: 12rem; + left: 1rem; + position: relative; + color: white; + line-height: 1; + } + } + .services{ + height: 440px; + } + .top-content .services_title { + bottom: 107px; + left: 20px; + font-size: 55px; + } + .tabs{ + display: flex; + justify-content: center; + } + .topics { + display: flex; + flex-direction: column; + width: 320px; + .active-tab{ + display: flex; + justify-content: center + } + } + } + \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..f1f3b157ac --- /dev/null +++ b/less/variables.less @@ -0,0 +1 @@ +@phone: ~"(max-width: 500px)"; \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..3cfa437c19 100644 --- a/services.html +++ b/services.html @@ -9,30 +9,107 @@ - - -

Services

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

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