diff --git a/README.md b/README.md index 17aecb1714..acd63721e6 100644 --- a/README.md +++ b/README.md @@ -12,12 +12,12 @@ You will use Trello to report your progress on the MVP and any extra features yo - Don't overplan, start coding as soon as you can and adjust accordingly. Trello is there as a guide not as a distraction ## Trello Set Up: -* [ ] Create a [Trello account](https://trello.com/) -* [ ] Create a new public board called "S&J Architects - By Your Name" -* [ ] Create lists titled ```backlog```,```To Do```, ```In Progress```, and ```Done``` -* [ ] Fill in the ```To Do``` list with the MVP features listed below -* [ ] Fill in the ```backlog``` list with all the extra features listed below -* [ ] Share your board with the Project Manager that has been assigned to you. If you have not been assigned yet, reach out to your lead TA for guidance +* [x] Create a [Trello account](https://trello.com/) +* [x] Create a new public board called "S&J Architects - By Your Name" +* [x] Create lists titled ```backlog```,```To Do```, ```In Progress```, and ```Done``` +* [x] Fill in the ```To Do``` list with the MVP features listed below +* [x] Fill in the ```backlog``` list with all the extra features listed below +* [x] Share your board with the Project Manager that has been assigned to you. If you have not been assigned yet, reach out to your lead TA for guidance ## Assets Provided: * [Style guide:](/DesignFiles/style-guide.md) This file will help you identify font sizes, colors, and font families across the site. diff --git a/css/index.css b/css/index.css index e6b2b589c1..190517de21 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,485 @@ -/* 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; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html body { + font-family: 'Roboto', Ariel, sans-serif; + max-width: 100%; + width: 100%; + background-color: #FFFFFF; + color: #222222; + font-size: 1.6em; + line-height: 2.4em; + display: flex; + flex-direction: column; + margin: auto; +} +h1, +h2, +h3, +h4, +h5 { + font-weight: bold; + font-size: 2.8em; +} +.container-top { + position: fixed; + max-width: 100%; + width: 100%; + background-color: #828282; + z-index: 5; +} +.container-top .title-menu-bar { + display: flex; + justify-content: space-between; + max-width: 100%; + margin: auto; +} +.container-top .title-menu-bar .logo { + color: #FFF; + font-size: 2.4rem; + font-weight: bold; + padding-left: 5%; +} +.container-top .title-menu-bar .dropdown { + z-index: 101; + padding-right: 5%; + cursor: pointer; +} +.container-top .title-menu-bar .dropdown .dropdown-button { + color: #FFF; + font-size: 4.8rem; + font-weight: bold; +} +.container-top .title-menu-bar .dropdown .dropdown-content { + width: 100%; + height: 100%; + margin: auto; + left: 0; + top: 38px; + position: fixed; + display: flex; + flex-direction: column; + justify-content: center; + background: #828282; + opacity: 0.96; + z-index: 5; +} +.container-top .title-menu-bar .dropdown .dropdown-link { + width: 100%; + text-align: center; + line-height: 7.8rem; + font-size: 4.8rem; + text-decoration: none; + color: #FFF; +} +.container-top .title-menu-bar .dropdown .dropdown-link:hover { + color: #222222; +} +.container-top .title-menu-bar .dropdown .dropdown-hidden { + display: none; +} +.mainContent .jumbotron { + position: relative; + max-width: 1024px; + max-height: 598px; + padding-top: 37px; + margin: auto; +} +.mainContent .jumbotron img { + width: 100%; +} +.mainContent .jumbotron p { + position: absolute; + bottom: 5%; + left: 5%; + color: #FFFFFF; + font-size: 6.4rem; + font-weight: bold; + line-height: 7.5rem; +} +@media (max-width: 599px) { + .mainContent .jumbotron p { + font-size: 4.8rem; + line-height: 5.8rem; + } +} +.mainContent .features { + max-width: 855px; + margin: auto; + padding-top: 5%; +} +.mainContent .features .featureContent { + display: flex; + align-items: center; + padding-top: 5%; +} +@media (max-width: 599px) { + .mainContent .features .featureContent { + flex-direction: column; + } +} +.mainContent .features .featureContent .featureText { + max-width: 48%; + margin: 1%; +} +@media (max-width: 599px) { + .mainContent .features .featureContent .featureText { + max-width: 68%; + } +} +.mainContent .features .featureContent .featureText h1 { + font-size: 2.8rem; +} +.mainContent .features .featureContent .featureText p { + font-size: 1.6rem; + line-height: 2.4rem; +} +.mainContent .features .featureContent .featureText button { + background-color: #FFFFFF; + border: 1px solid #222222; + font-size: 1.8rem; + margin-top: 8%; + padding: 4%; +} +@media (max-width: 599px) { + .mainContent .features .featureContent .featureText button { + width: 100%; + } +} +.mainContent .features .featureContent .featureImage { + max-width: 48%; + margin: 1%; +} +@media (max-width: 599px) { + .mainContent .features .featureContent .featureImage { + max-width: 100%; + } +} +.mainContent .features .featureContent .featureImage img { + max-width: 100%; +} +.mainContent .recentProjects { + max-width: 855px; + margin: auto; +} +@media (max-width: 599px) { + .mainContent .recentProjects { + padding: 5%; + } +} +.mainContent .recentProjects h2 { + font-size: 2.8rem; + padding-bottom: 4%; +} +.mainContent .recentProjects div .projectImage { + position: relative; +} +.mainContent .recentProjects div .projectImage img { + max-width: 100%; +} +.mainContent .recentProjects div .projectImage h2 { + position: absolute; + color: #222222; + background-color: #d7d7d7; + bottom: -5%; + padding: 3%; +} +@media (max-width: 599px) { + .mainContent .recentProjects div .projectImage h2 { + right: 25%; + padding-right: 10%; + padding-left: 10%; + } +} +.mainContent .recentProjects div .projectImage .right { + right: 0%; +} +@media (max-width: 599px) { + .mainContent .recentProjects div .projectImage .right { + right: 35%; + } +} +.mainContent .recentProjects div .projectContent { + display: flex; + flex-direction: column; + margin: auto; + max-width: 60%; + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} +.mainContent .recentProjects div .projectContent p { + justify-content: center; + font-size: 1.8rem; + line-height: 2rem; + padding: 0.5rem; +} +footer { + display: flex; + justify-content: space-around; + background-color: #828282; + color: #FFFFFF; +} +@media (max-width: 599px) { + footer { + flex-direction: column; + } +} +footer .contactForm { + padding: 2%; +} +footer .contactForm h3 { + font-size: 2rem; + line-height: 2.4rem; +} +footer .location { + padding: 2%; +} +footer .location h4 { + font-size: 2rem; + line-height: 2.4rem; +} +footer .location p { + font-size: 1.4rem; + line-height: 2.6rem; +} +.copyright { + display: flex; + justify-content: center; + background-color: #828282; + color: #FFFFFF; +} +.servicesText { + max-width: 855px; + margin: auto; +} +.servicesText p { + font-size: 1.8rem; + line-height: 2.4rem; + padding: 4%; +} +.service-main { + max-width: 1024px; + margin: auto; +} +.service-main .services-intro { + width: 100%; +} +.service-main .services-intro p { + line-height: 2.5rem; + padding-top: 5%; +} +.service-main .services-content { + display: flex; + flex-direction: column; + align-items: center; + width: 90%; + margin: auto; +} +@media (max-width: 599px) { + .service-main .services-content { + width: 98%; + } +} +.service-main .services-content .services-content-menu { + display: flex; + justify-content: space-between; + padding-top: 5%; +} +@media (max-width: 599px) { + .service-main .services-content .services-content-menu { + flex-direction: column; + align-items: center; + } +} +.service-main .services-content .services-content-menu .service-item { + flex-direction: row; + text-align: center; + width: 200px; + font-weight: bold; + border: 1px solid #222222; +} +.service-main .services-content .services-content-menu .service-item:hover { + background-color: #222222; + color: #FFF; +} +.service-main .services-content .services-content-menu .service-item-selected { + z-index: 2; + background-color: #5E9FB9; +} +.service-main .services-content .services-content-items { + padding-top: 5%; + margin: auto; +} +.service-main .services-content .services-content-items .card { + display: none; +} +.service-main .services-content .services-content-items .card .content-text { + width: 50%; + padding: 2%; +} +@media (max-width: 599px) { + .service-main .services-content .services-content-items .card .content-text { + width: 90%; + } +} +.service-main .services-content .services-content-items .card .content-text h2 { + font-size: 2.4rem; +} +.service-main .services-content .services-content-items .card .content-text p { + font-size: 1.6rem; + line-height: 1.95rem; + padding-top: 2%; +} +.service-main .services-content .services-content-items .card .content-img { + align-items: center; + width: 50%; + padding: 2%; +} +.service-main .services-content .services-content-items .card-item-selected { + display: flex; +} +@media (max-width: 599px) { + .service-main .services-content .services-content-items .card-item-selected { + flex-direction: column; + align-items: center; + max-width: 599px; + } +} diff --git a/index.html b/index.html index 8a84a17304..bd687d0a0a 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,147 @@ + - Home + S&J Architects + + - -

You got this! Good luck.

- - - - - + +
+ Home + Services + Contact +
+ + + +
+
+ +

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

+ +
+
+ architectural drawing +
+
+
+
+ commercial building with infinity pool +
+
+

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.

+
+
+
+ + +
+
+

Copyright © 2018 Smith and Jones

+
-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 - -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 - -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 diff --git a/js/card.js b/js/card.js new file mode 100644 index 0000000000..75a5dffa0f --- /dev/null +++ b/js/card.js @@ -0,0 +1,39 @@ + +class CardLink { + constructor(element) { + this.element = element; + this.data = this.element.dataset.tab; + this.item = document.querySelector(`.card[data-tab="${this.data}"]`); + this.cardItem = new Card(this.item); + this.element.addEventListener('click', () => {this.select() + }); + }; + + select() { + const links = document.querySelectorAll('.service-item'); + links.forEach( link => { + link.classList.remove('service-item-selected') + }); + this.element.classList.add('service-item-selected'); + this.cardItem.select(); + } +} + +class Card { + constructor(element) { + this.element = element; + } + + select() { + const items = document.querySelectorAll('.card'); + items.forEach( item => { + item.classList.remove('card-item-selected'); + }) + this.element.classList.add('card-item-selected'); + } +} + +let links = document.querySelectorAll('.service-item'); +links = Array.from(links).map( link => new CardLink(link)); + +links[0].select() \ No newline at end of file diff --git a/js/index.js b/js/index.js deleted file mode 100644 index bb3d341cf0..0000000000 --- a/js/index.js +++ /dev/null @@ -1 +0,0 @@ -// JS goes here \ No newline at end of file diff --git a/js/menudrop.js b/js/menudrop.js new file mode 100644 index 0000000000..5fd8a2448b --- /dev/null +++ b/js/menudrop.js @@ -0,0 +1,30 @@ +class Dropdown { + constructor(element) { + + // Assign this.element to the dropdown element + this.element = element; + + // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context) + this.button = this.element.querySelector(".dropdown-button"); + + + // assign the reference to the ".dropdown-content" class found in the dropdown element + this.content = this.element.querySelector(".dropdown-content"); + + // Add a click handler to the button reference and call the toggleContent method. + this.button.addEventListener('click', () => {this.toggleContent(); + }); + } + + toggleContent() { + + // Toggle the ".dropdown-hidden" class off and on + this.content.classList.toggle("dropdown-hidden"); + } + } + + // Nothing to do here, just study what the code is doing and move on to the Dropdown class + let dropdowns = document.querySelectorAll('.dropdown'); +// console.log(dropdowns); + + dropdowns = Array.from(dropdowns).map( dropdown => new Dropdown(dropdown)); \ No newline at end of file diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..1f57cac5ae --- /dev/null +++ b/less/footer.less @@ -0,0 +1,34 @@ +footer { + display: flex; + justify-content: space-around; + background-color: #828282; + color: #FFFFFF; + @media @mobile { + flex-direction: column; + } + .contactForm{ + padding: 2%; + h3{ + font-size: 2.0rem; + line-height: 2.4rem; + } + } + .location { + padding: 2%; + h4{ + font-size: 2.0rem; + line-height: 2.4rem; + } + p{ + font-size: 1.4rem; + line-height: 2.6rem; + } + } +} + +.copyright { + display: flex; + justify-content: center; + background-color: #828282; + color: #FFFFFF; +} \ No newline at end of file diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..62320b2cc7 --- /dev/null +++ b/less/global.less @@ -0,0 +1,28 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; + + +} + +html body { + font-family: 'Roboto', Ariel, sans-serif; + max-width: 100%; + width: 100%; + background-color: #FFFFFF; + color: #222222; + font-size: 1.6em; + line-height: 2.4em; + display: flex; + flex-direction: column; + margin: auto; +} + +h1, h2, h3, h4, h5 { + font-weight: bold; + font-size: 2.8em; + +} diff --git a/less/header.less b/less/header.less new file mode 100644 index 0000000000..ebf7d1150b --- /dev/null +++ b/less/header.less @@ -0,0 +1,57 @@ +.container-top { + position: fixed; + max-width: 100%; + width: 100%; + background-color: #828282; + z-index: 5; + .title-menu-bar { + display: flex; + justify-content: space-between; + max-width: 100%; + margin: auto; + .logo { + color: #FFF; + font-size: 2.4rem; + font-weight: bold; + padding-left: 5%; + } + .dropdown { + z-index: 101; + padding-right: 5%; + cursor: pointer; + .dropdown-button { + color: #FFF; + font-size: 4.8rem; + font-weight: bold; + } + .dropdown-content { + width: 100%; + height: 100%; + margin: auto; + left: 0; + top: 38px; + position: fixed; + display: flex; + flex-direction: column; + justify-content: center; + background: #828282; + opacity: 0.96; + z-index: 5; + } + .dropdown-link { + width: 100%; + text-align: center; + line-height: 7.8rem; + font-size: 4.8rem; + text-decoration: none; + color: #FFF; + &:hover { + color: #222222; + } + } + .dropdown-hidden { + display: none; + } + } + } +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..157c814b2c 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,15 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ +//setup less -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; -} +@import "reset.less"; -table{ - border-collapse:collapse; - border-spacing:0; -} +//global -/* Your Code Goes Here */ \ No newline at end of file +@import "global.less"; + +//specific + +@import "variables.less"; +@import "header.less"; +@import "mainContent.less"; +@import "footer.less"; +@import "services.less"; \ No newline at end of file diff --git a/less/mainContent.less b/less/mainContent.less new file mode 100644 index 0000000000..9532bf9dfa --- /dev/null +++ b/less/mainContent.less @@ -0,0 +1,124 @@ +.mainContent { + .jumbotron { + position: relative; + max-width: 1024px; + max-height: 598px; + padding-top: 37px; + margin: auto; + img { + width: 100%; + } + p { + position: absolute; + bottom: 5%; + left: 5%; + color: #FFFFFF; + font-size: 6.4rem; + font-weight: bold; + line-height: 7.5rem; + @media @mobile { + font-size: 4.8rem; + line-height: 5.8rem; + } + } + } + .features { + max-width: 855px; + margin: auto; + padding-top: 5%; + .featureContent { + display: flex; + align-items: center; + padding-top: 5%; + @media @mobile { + flex-direction: column; + } + .featureText { + max-width: 48%; + margin: 1%; + @media @mobile { + max-width: 68%; + } + h1 { + font-size: 2.8rem; + } + p { + font-size: 1.6rem; + line-height: 2.4rem; + } + button { + background-color: #FFFFFF; + border: 1px solid #222222; + font-size: 1.8rem; + margin-top: 8%; + padding: 4%; + @media @mobile{ + width: 100%; + } + } + } + .featureImage { + max-width: 48%; + margin: 1%; + @media @mobile{ + max-width: 100%; + } + img { + max-width: 100%; + } + } + } + } + .recentProjects { + max-width: 855px; + margin: auto; + @media @mobile{ + padding: 5%; + } + h2 { + font-size: 2.8rem; + padding-bottom: 4%; + + } + div { + .projectImage { + position: relative; + img { + max-width: 100%; + } + h2 { + position: absolute; + color: #222222; + background-color: #d7d7d7; + bottom: -5%; + padding: 3%; + @media @mobile { + right: 25%; + padding-right: 10%; + padding-left: 10%; + } + } + .right { + right: 0%; + @media @mobile { + right: 35%; + } + } + } + .projectContent { + display: flex; + flex-direction: column; + margin: auto; + max-width: 60%; + padding-top: 1.5rem; + padding-bottom: 1.5rem; + p { + justify-content: center; + font-size: 1.8rem; + line-height: 2.0rem; + padding: .5rem; + } + } + } + } +} \ No newline at end of file diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000000..83a4d32775 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,58 @@ +/*------------------------------------*\ +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..ae845b45e3 --- /dev/null +++ b/less/services.less @@ -0,0 +1,93 @@ +.servicesText { + max-width: 855px; + margin: auto; + p { + font-size: 1.8rem; + line-height: 2.4rem; + padding: 4%; + } +} +.service-main { + max-width: 1024px; + margin: auto; + .services-intro { + width: 100%; + + p { + line-height: 2.5rem; + padding-top: 5%; + } + } + .services-content { + display: flex; + flex-direction: column; + align-items: center; + width: 90%; + margin: auto; + @media @mobile { + width: 98%; + } + .services-content-menu { + display: flex; + + justify-content: space-between; + padding-top: 5%; + @media @mobile { + flex-direction: column; + align-items: center; + } + .service-item { + flex-direction: row; + text-align: center; + width: 200px; + + font-weight: bold; + border: 1px solid @generaltext; + &:hover{ + background-color: @cardhoverbackground; + color: @cardhovercolor; + } + } + .service-item-selected{ + z-index: 2; + background-color: @cardselected; + + } + } + .services-content-items { + padding-top: 5%; + margin: auto; + .card { + display: none; + .content-text { + width: 50%; + padding: 2%; + @media @mobile { + width: 90%; + } + h2 { + font-size: 2.4rem; + } + p { + font-size: 1.6rem; + line-height: 1.95rem; + padding-top: 2%; + } + } + .content-img { + align-items: center; + width: 50%; + padding: 2%; + } + } + .card-item-selected{ + display: flex; + @media @mobile { + flex-direction: column; + align-items: center; + max-width: 599px; + } + } + } + } +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..90ad7858e7 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,21 @@ +//Media Settings + +@mobile: ~"(max-width: 599px)"; + +//background colors + +@bodybackground: #FFFFFF; +@headerbarbackground: #96a2ad; +@recentprojectsnamebackground: #d8d8d8; +@footerbackground: #828282; + +//text colors + +@generaltext: #222222; +@whitetext: #FFFFFF; + +//services page colors +@cardselected: #5E9FB9; +@cardhoverbackground: #222222; +@cardhovercolor: #FFF; + diff --git a/services.html b/services.html index fb5a79e18a..be3155d342 100644 --- a/services.html +++ b/services.html @@ -1,5 +1,6 @@ + Services @@ -8,31 +9,156 @@ + + + +
+
+ +
+
+ +
+
+ Home + Services + Contact +
+
+
+
+
+
+ +

Services

+
+
+
+
+

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

+

Pre-Construction 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

+

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

+
+
+ +
+
-

Services

- - - - - - +
+
+

Copyright © 2018 Smith and Jones

+
+ \ No newline at end of file