diff --git a/contact.html b/contact.html index 868844fe14..47a84f9f92 100644 --- a/contact.html +++ b/contact.html @@ -12,7 +12,19 @@ -

Contact

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

S&J

+
+ + + + \ No newline at end of file diff --git a/css/index.css b/css/index.css index e6b2b589c1..77a9b80dd4 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,693 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/* Your Code Goes Here */ +/*------------------------------------*\ +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; + margin: 0; + padding: 0; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', sans-serif; + background: #FFFFFF; + color: #222222; + max-width: 100%; +} +img { + max-width: 100%; + height: auto; +} +h1 { + font-size: 55px; +} +p { + line-height: 24px; + font-weight: regular; + font-size: 16px; +} +.Navbar { + display: flex; +} +.Navbar { + background-color: grey; + display: flex; + padding: 16px; + font-family: sans-serif; + color: white; +} +.Navbar__Items { + display: flex; +} +.Navbar__Link { + padding-right: 8px; +} +.Navbar__Items--right { + margin-left: auto; +} +.footer { + width: 100%; + background: #828282; +} +@media (max-width: 500px) { + .footer { + display: flex; + flex-direction: column; + padding-left: 30px; + } + .footer h4 { + padding-top: 30px; + } + .footer .footerBottom { + display: flex; + flex-direction: column; + } +} +.footer .footerBottom { + display: flex; + justify-content: space-evenly; + color: #FFFFFF; + padding-top: 4%; +} +.footer .footerBottom .states h4 { + font-size: 20px; + font-weight: regular; + line-height: 24px; + color: #FFFFFF; + padding-bottom: 4%; +} +.footer .footerBottom .states p { + font-size: 14px; + font-weight: regular; + line-height: 26px; + color: #FFFFFF; +} +.footer .copyright { + text-align: center; + color: #FFFFFF; + padding: 20px; +} +@media (max-width: 500px) { + .footer .copyright { + display: flex; + justify-content: flex-start; + padding: 0; + padding-top: 20px; + } + .footer .copyright p { + display: flex; + } +} +.footer .copyright p { + font-size: 10px; +} +body { + box-sizing: border-box; + margin: 0; +} +@media (max-width: 500px) { + body { + overflow-x: hidden; + } +} +.header-container p { + color: #FFFFFF; + position: absolute; + left: 65px; + font-weight: bold; + font-family: sans-serif; + font-size: 24px; +} +.dropdown { + z-index: 2; + position: absolute; + background-color: #828282; + font-family: sans-serif; + right: 85px; + cursor: pointer; +} +.dropdown .dropdown-button { + padding: 15px; + color: #FFFFFF; + font-size: 24px; + font-weight: bold; +} +.dropdown .dropdown-button:hover { + color: black; +} +.dropdown .dropdown-content { + width: 1025px; + height: 600px; + position: absolute; + right: 1px; + background-color: rgba(153, 166, 177, 0.9); + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; +} +.dropdown .dropdown-content span { + color: #FFFFFF; + font-weight: bold; + font-size: 24px; +} +@media (max-width: 500px) { + .dropdown .dropdown-content span { + font-size: 20px; + } +} +@media (max-width: 500px) { + .dropdown .dropdown-content img { + height: 20px; + } +} +.dropdown .dropdown-content .dropdown-buttonClose { + display: flex; + justify-content: space-between; + padding-top: 20px; + width: 900px; +} +@media (max-width: 500px) { + .dropdown .dropdown-content .dropdown-buttonClose { + width: 200px; + } +} +.dropdown .dropdown-content p { + padding-top: 20px; +} +@media (max-width: 500px) { + .dropdown .dropdown-content p { + position: absolute; + left: 10px; + } +} +@media (max-width: 500px) { + .dropdown .dropdown-content { + width: 300px; + height: 400px; + right: 5px; + left: -275px; + } +} +.dropdown .dropdown-link { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 55px 0; + font-size: 48px; + font-weight: bold; + line-height: 85px; + text-decoration: none; + color: #FFFFFF; +} +.dropdown .dropdown-link:hover { + color: #222222; +} +@media (max-width: 500px) { + .dropdown .dropdown-link { + font-size: 24px; + } +} +.dropdown .dropdown-hidden { + display: none; +} +.header-container { + width: 100%; + height: 70px; + display: flex; + justify-content: center; + align-items: center; + background-color: grey; +} +.header-container .header { + height: 50px; +} +@media (max-width: 500px) { + .container-home { + width: 100%; + display: flex; + flex-direction: column; + align-content: center; + } +} +.container-home .header { + position: relative; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; + padding-top: 0; + display: flex; + justify-content: space-evenly; +} +.container-home .header img { + width: 100%; +} +.bottom-left { + position: absolute; + bottom: 8px; + left: 16px; + font-size: 75px; + font-weight: bold; + color: #FFFFFF; + padding-bottom: 4%; + padding-left: 4%; +} +@media (max-width: 500px) { + .bottom-left { + width: 100%; + } +} +.content-top { + margin: 50px 0; + padding-left: 13%; + padding-right: 13%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +@media (max-width: 500px) { + .content-top { + background: #FFFFFF; + padding: 0; + margin: 0 0; + display: flex; + flex-direction: column-reverse; + align-content: center; + } +} +.content-top .text-content { + width: 48%; + padding-right: 1%; + padding-top: 4%; +} +@media (max-width: 500px) { + .content-top .text-content { + width: 100%; + display: flex; + flex-direction: column; + padding: 40px; + } +} +.content-top h2 { + font-size: 28px; + color: #222222; + font-weight: bold; + padding-bottom: 16px; + padding-top: 20px; +} +.content-top .btn { + background-color: white; + color: black; + border: 1px solid black; + font-size: 15px; + text-align: center; + padding-top: 4%; + padding-bottom: 4%; + margin-top: 5%; + width: 150px; + cursor: pointer; +} +@media (max-width: 500px) { + .content-top .btn { + width: 100%; + } +} +.content-top .btn:hover { + background-color: #222222; + color: white; +} +@media (max-width: 500px) { + .content-top img { + object-fit: cover; + width: 450px; + height: 400px; + display: flex; + padding: 0; + position: relative; + left: 15px; + top: 25px; + } +} +.designs-content-section { + margin: 30px 0; + padding-left: 13%; + padding-right: 13%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +@media (max-width: 500px) { + .designs-content-section { + width: 100%; + padding: 0; + background-color: #FFFFFF; + } +} +.designs-content-section .text-content { + width: 48%; + padding-right: 1%; + padding-top: 4%; +} +@media (max-width: 500px) { + .designs-content-section .text-content { + width: 100%; + padding: 40px; + } +} +.designs-content-section h2 { + font-size: 28px; + color: #222222; + font-weight: bold; + padding-bottom: 16px; +} +.designs-content-section .btn { + background-color: white; + color: black; + border: 1px solid black; + font-size: 15px; + text-align: center; + padding-top: 4%; + padding-bottom: 4%; + margin-top: 5%; + width: 150px; + cursor: pointer; +} +@media (max-width: 500px) { + .designs-content-section .btn { + width: 100%; + } +} +.designs-content-section .btn:hover { + background-color: #222222; + color: white; +} +@media (max-width: 500px) { + .designs-content-section img { + object-fit: cover; + width: 450px; + height: 400px; + padding: 0; + position: relative; + left: 15px; + } +} +.main-content-section { + width: 75%; + margin: auto; +} +@media (max-width: 500px) { + .main-content-section { + width: 100%; + background-color: #FFFFFF; + } +} +.main-content-section h2 { + font-size: 24px; + color: #222222; + font-weight: bold; + padding-top: 3%; + padding-bottom: 3%; +} +@media (max-width: 500px) { + .main-content-section h2 { + width: 100%; + display: flex; + padding: 40px; + } +} +.main-content-section p { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding-left: 200px; + padding-right: 200px; + padding-top: 30px; + padding-bottom: 60px; +} +@media (max-width: 500px) { + .main-content-section p { + width: 100%; + display: flex; + padding: 0; + padding-bottom: 40px; + padding-left: 25px; + padding-right: 25px; + } +} +.main-content-section h3 { + position: relative; + bottom: 45px; + background-color: #D8D8D8; + height: 90px; + width: 35%; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + letter-spacing: 7px; +} +@media (max-width: 500px) { + .main-content-section h3 { + width: 100%; + display: flex; + } +} +.main-content-section h5 { + position: relative; + bottom: 45px; + left: 542px; + background-color: #D8D8D8; + height: 90px; + width: 35%; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + letter-spacing: 7px; +} +@media (max-width: 500px) { + .main-content-section h5 { + width: 100%; + left: 0; + display: flex; + justify-content: center; + padding: 0; + } +} +@media (max-width: 500px) { + .main-content-section img { + object-fit: cover; + width: 500px; + height: 250px; + } +} +.box-description { + width: 70%; + margin: 45px auto; + overflow: hidden; + font-size: 16px; + line-height: 24px; + font-weight: regular; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.tabs { + width: 100%; + padding-top: 40px; + padding-bottom: 130px; +} +.tabs .tabs-items { + width: 100%; + height: 300px; + display: flex; + justify-content: center; + padding-top: 60px; +} +.tabs .tabs-items p { + padding: 35px; +} +.tabs .tabs-item { + display: none; + width: 75%; +} +.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-evenly; + align-content: center; + background-color: #FFFFFF; +} +.tabs .tabs-link { + padding: 20px 25px; + font-size: 24px; + background-color: #FFFFFF; + border: 1px solid #222222; + color: #222222; + cursor: pointer; +} +.tabs .tabs-link:hover { + background-color: #222222; + color: #FFFFFF; +} +.tabs .tabs-link-selected { + z-index: 2; + border: 1px solid #222222; + background-color: #5E9FB9; + color: #FFFFFF; +} +.tabs .tabs-link-selected:hover { + background-color: #FFFFFF; + color: #222222; +} +.tabs-item-description { + font-size: 16px; + font-weight: regular; + line-height: 24px; + display: flex; + flex-direction: row; + align-items: center; +} diff --git a/index.html b/index.html index 8a84a17304..939b457b3b 100644 --- a/index.html +++ b/index.html @@ -12,85 +12,132 @@ -

You got this! Good luck.

+
+
+
+ +
+ +
+ S&J + +
+ + Home + Services + Contact +
+
+ +

S&J

+
+ + +
+
+ photo +
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
+
+
+ home1 +
+
+ +
+
+ home2 +
+
+

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

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

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

+
+ +
+ blocks +
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..6e9b36cf31 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,112 @@ -// JS goes here \ No newline at end of file +// JS goes here +class TabLink { + constructor(element) { + + this.element = element; + + + this.data = this.element.dataset.tab; + + + this.itemElement = document.querySelector(`.tabs-item[data-tab = '${this.data}']`); + + + this.tabItem = new TabItem(this.itemElement); + + + this.element.addEventListener("click", () => this.select()); + }; + + select() { + + const links = document.querySelectorAll(".tabs-link"); + + + Array.from(links).forEach(tab => tab.classList.remove("tabs-link-selected") + + ); + + + this.element.classList.add("tabs-link-selected"); + + + this.tabItem.select(this.itemElement); + + } + } + + 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"); + } + } + + + links = document.querySelectorAll(".tabs-link") + .forEach(link => new TabLink(link)); + + //=====NAV + + 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)); + + + + + + var buttonOther = document.getElementById("buttonClose"), + + menuConent = document.getElementById("menuContent"); + + + buttonClose.addEventListener("click", function(){ + + if (menuContent.style.display == 'none') { + + menuContent.style.display = 'block'; + + } else { + + menuContent.style.display = 'none'; + + } + +}, false); + + + + + + + diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..52ae0a589f --- /dev/null +++ b/less/footer.less @@ -0,0 +1,72 @@ +.footer { + width: 100%; + background: @grey; + + @media(max-width: 500px) { + display: flex; + flex-direction: column; + padding-left: 30px; + + h4 { + padding-top: 30px; + } + + .footerBottom { + display: flex; + flex-direction: column; + } + } + + .footerBottom { + display: flex; + justify-content: space-evenly; + color: @white; + padding-top: 4%; + + .states { + + h4 { + font-size: 20px; + font-weight: regular; + line-height: 24px; + color: @white; + padding-bottom: 4%; + } + + p { + font-size: 14px; + font-weight: regular; + line-height: 26px; + color: @white; + + } + + } + + } + + + + .copyright { + text-align: center; + color: @white; + padding: 20px; + + @media(max-width: 500px) { + display: flex; + justify-content: flex-start; + padding: 0; + padding-top: 20px; + + p { + display: flex; + + + } + } + + p { + font-size: 10px; + } + } + } \ No newline at end of file diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..b7a68b6a21 --- /dev/null +++ b/less/global.less @@ -0,0 +1,36 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html { + font-size: 62.5%; + } + + html, body { + font-family: 'Roboto', sans-serif; + color: @nero; + background: @white; + color: @nero; + max-width: 100%; + // width: 100%; + // height: 100%; + + } + + img { + max-width: 100%; + height: auto; + } + + + h1 { + font-size: 55px; + } + + p { + line-height: 24px; + font-weight: regular; + font-size: 16px; + } diff --git a/less/home-page.less b/less/home-page.less new file mode 100644 index 0000000000..8c3e2d5596 --- /dev/null +++ b/less/home-page.less @@ -0,0 +1,442 @@ +body { + box-sizing: border-box; + margin: 0; + + @media(max-width: 500px) { + overflow-x: hidden; + } + +} + + +//==========================NAV + +.header-container { + + p { + color: @white; + position: absolute; + left: 65px; + font-weight: bold; + font-family: sans-serif; + font-size: 24px; + } +} + +.dropdown { + z-index: 2; + position: absolute; + background-color: @grey; + font-family: sans-serif; + right: 85px; + cursor: pointer; + + .dropdown-button { + padding: 15px; + color: @white; + font-size: 24px; + font-weight: bold; + &:hover { + color: black; + } + } + .dropdown-content { + width: 1025px; + // width: 150vh; + height: 600px; + position: absolute; + right: 1px; + background-color: rgba(153,166,177,0.9); + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; + + span { + color: @white; + font-weight: bold; + font-size: 24px; + + @media(max-width: 500px) { + font-size: 20px; + } + + } + + img { + @media(max-width: 500px) { + height: 20px; + } + } + + + + .dropdown-buttonClose { + display: flex; + justify-content: space-between; + padding-top: 20px; + width: 900px; + + @media(max-width: 500px) { + width: 200px; + } + + + + } + + // .dropdown-button { + // display: none; + // } + + p { + padding-top: 20px; + + @media(max-width: 500px) { + position: absolute; + left: 10px; + } + + } + + @media(max-width: 500px) { + width: 300px; + height: 400px; + right: 5px; + left: -275px; + } + } + .dropdown-link { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 55px 0; + font-size: 48px; + font-weight: bold; + line-height: 85px; + text-decoration: none; + color: #FFFFFF; + &:hover { + color: @nero; + } + + @media(max-width: 500px) { + font-size: 24px; + } + } + .dropdown-hidden { + display: none; + } + } + + .header-container { + width: 100%; + height: 70px; + display: flex; + justify-content: center; + align-items: center; + background-color: grey; + .header { + height: 50px; + } + } + + + +//========================= HEADER + +.container-home { + + + @media(max-width: 500px) { + width: 100%; + display: flex; + flex-direction: column; + align-content: center; + + } + + .header { + position: relative; + // width: 100%; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; + padding-top: 0; + display: flex; + justify-content: space-evenly; + + img { + width: 100%; + // height: auto; + + } + + } + +} + +//========================== BOTTOM-LEFT + +.bottom-left { + position: absolute; + bottom: 8px; + left: 16px; + font-size: 75px; + font-weight: bold; + color: @white; + padding-bottom: 4%; + padding-left: 4%; + + @media(max-width: 500px) { + width: 100%; + } +} + +//============================= TOP-CONTENT + +.content-top { + margin: 50px 0; + padding-left: 13%; + padding-right: 13%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + @media(max-width: 500px) { + background: @white; + padding: 0; + margin: 0 0; + display: flex; + flex-direction: column-reverse; + align-content: center; + + } + + .text-content { + width: 48%; + padding-right: 1%; + padding-top: 4%; + + @media(max-width: 500px) { + width: 100%; + display: flex; + flex-direction: column; + padding: 40px; + } + } + + h2 { + font-size: 28px; + color: @nero; + font-weight: bold; + padding-bottom: 16px; + padding-top: 20px; + } + + .btn { + background-color: white; + color: black; + border: 1px solid black; + font-size: 15px; + text-align: center; + padding-top: 4%; + padding-bottom: 4%; + margin-top: 5%; + width: 150px; + cursor: pointer; + + @media(max-width: 500px) { + width: 100%; + } + } + + .btn:hover { + background-color: @nero; + color: white; + } + + img { + @media(max-width: 500px) { + object-fit: cover; + width: 450px; + height: 400px; + display: flex; + padding: 0; + position: relative; + left: 15px; + top: 25px; + } + } + +} + +//============================== DESIGN-CONTENT-SECTION + +.designs-content-section { + margin: 30px 0; + padding-left: 13%; + padding-right: 13%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + @media(max-width: 500px) { + width: 100%; + padding: 0; + background-color: @white; + } + + + .text-content { + width: 48%; + padding-right: 1%; + padding-top: 4%; + + @media(max-width: 500px) { + width: 100%; + padding: 40px; + } + } + + h2 { + font-size: 28px; + color: @nero; + font-weight: bold; + padding-bottom: 16px; + } + + .btn { + background-color: white; + color: black; + border: 1px solid black; + font-size: 15px; + text-align: center; + padding-top: 4%; + padding-bottom: 4%; + margin-top: 5%; + width: 150px; + cursor: pointer; + + @media(max-width: 500px) { + width: 100%; + } + } + + .btn:hover { + background-color: @nero; + color: white; + } + + img { + @media(max-width: 500px) { + object-fit: cover; + width: 450px; + height: 400px; + padding: 0; + position: relative; + left: 15px; + } + } + +} + +//========================= MAIN-CONTENT-SECTION + +.main-content-section { + width: 75%; + margin: auto; + + @media(max-width: 500px) { + width: 100%; + background-color: @white; + } + + h2 { + font-size: 24px; + color: @nero; + font-weight: bold; + padding-top: 3%; + padding-bottom: 3%; + + @media(max-width: 500px) { + width: 100%; + display: flex; + padding: 40px; + } + } + + p { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding-left: 200px; + padding-right: 200px; + padding-top: 30px; + padding-bottom: 60px; + + @media(max-width: 500px) { + width: 100%; + display: flex; + padding: 0; + padding-bottom: 40px; + padding-left: 25px; + padding-right: 25px; + } + + } + + h3 { + position: relative; + bottom: 45px; + background-color: @gainsboro; + height: 90px; + width: 35%; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + letter-spacing: 7px; + + @media(max-width: 500px) { + width: 100%; + display: flex; + } + } + + h5 { + position: relative; + bottom: 45px; + left: 542px; + background-color: @gainsboro; + height: 90px; + width: 35%; + display: flex; + justify-content: center; + align-items: center; + font-size: 25px; + letter-spacing: 7px; + + @media(max-width: 500px) { + width: 100%; + left: 0; + display: flex; + justify-content: center; + padding: 0; + + } + } + + img { + @media(max-width: 500px) { + object-fit: cover; + width: 500px; + height: 250px; + + } + + } + + +} diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..94001b62f3 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,17 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ +/* Your Code Goes Here */ -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; -} +// Variables and Mixins +@import 'variables.less'; +@import 'mixins.less'; -table{ - border-collapse:collapse; - border-spacing:0; -} +// Reset and Global Styles +@import 'reset.less'; +@import 'global.less'; -/* Your Code Goes Here */ \ No newline at end of file +// Reusable components +@import 'navigation.less'; +@import 'footer.less'; + +// Page Specific +@import 'home-page.less'; +@import 'service.less'; diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..92668ac309 --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,23 @@ +.Navbar { + display: flex; + } + + .Navbar { + background-color: grey; + display: flex; + padding: 16px; + font-family: sans-serif; + color: white; + } + + .Navbar__Items { + display:flex; + } + + .Navbar__Link { + padding-right: 8px; + } + + .Navbar__Items--right { + margin-left:auto; + } 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/service.less b/less/service.less new file mode 100644 index 0000000000..200d07f8d5 --- /dev/null +++ b/less/service.less @@ -0,0 +1,92 @@ + + .box-description { + width: 70%; + margin: 45px auto; + overflow: hidden; + font-size: 16px; + line-height: 24px; + font-weight: regular; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + +} + + +.tabs { + width: 100%; + padding-top: 40px; + padding-bottom: 130px; + + .tabs-items { + width: 100%; + height: 300px; + display: flex; + justify-content: center; + padding-top: 60px; + + p { + padding: 35px; + } + + + } + + .tabs-item { + display: none; + width: 75%; + .tabs-item-title { + font-size: 24px; + font-weight: bold; + padding-bottom: 10px; + } + + } + .tabs-item-selected { + display: block; + } + + .tabs-links { + display: flex; + display: flex; + justify-content: space-evenly; + align-content: center; + background-color: @white; + } + + .tabs-link { + padding: 20px 25px; + font-size: 24px; + background-color: @white; + border: 1px solid @nero; + color: @nero; + cursor: pointer; + &:hover { + background-color: @nero; + color: @white; + } + } + .tabs-link-selected { + z-index: 2; + border: 1px solid @nero; + background-color: @blueish; + color: @white; + &:hover { + background-color: @white; + color: @nero; + } + } + } + + + +.tabs-item-description { + font-size: 16px; + font-weight: regular; + line-height: 24px; + display: flex; + flex-direction: row; + align-items: center; + +} diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..a7076da8d1 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,14 @@ +// Font family can be found here: https://fonts.google.com/specimen/Roboto + +// Color assignments +@footer-bg: @grey; +@recent-projects-gray-square: @gainsboro; +@button-borders: @nero; + +// Colors +@WHITE: #FFF; +@white: #FFFFFF; +@gainsboro: #D8D8D8; +@grey: #828282; +@nero: #222222; +@blueish: #5E9FB9; \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..55f145e550 100644 --- a/services.html +++ b/services.html @@ -12,27 +12,137 @@ -

Services

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

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

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

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