+ +
+
+

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

You got this! Good luck.

- +
+
+

>Recent Projects

+ THE VILLAS - -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 From c2e2da4ec4a8c8c2e4368d02dded953416b21928 Mon Sep 17 00:00:00 2001 From: Bao Pham Date: Mon, 26 Nov 2018 04:11:38 -0600 Subject: [PATCH 2/2] finished mvp --- css/index.css | 565 ++++++++++++++++++++++++++++++++++++++++++- index.html | 313 +++++++++++++----------- js/index.js | 78 +++++- less/index.less | 493 +++++++++++++++++++++++++++++++++---- less/mixins.less | 6 + less/navigation.less | 47 ++++ services.html | 186 ++++++++++++-- 7 files changed, 1482 insertions(+), 206 deletions(-) create mode 100644 less/mixins.less create mode 100644 less/navigation.less diff --git a/css/index.css b/css/index.css index e6b2b589c1..8c56374e0e 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,564 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +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 */ +.header { + width: 100%; + position: fixed; + z-index: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + background-color: #9aa4ad; + padding: 1.1rem 8%; +} +.header .logo { + color: #fff; + font-size: 2.4rem; + font-weight: 700; +} +.header .nav { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} +.header .nav .hamburger .hide { + display: none; +} +.hamburger-expanded { + width: 100%; + height: 100vh; + position: fixed; + top: 5rem; + z-index: 2; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: #9aa4ad; + padding-bottom: 5rem; +} +.hamburger-expanded .links a { + text-decoration: none; + line-height: 1.8; + color: #fff; + font-weight: 700; + font-size: 4.8rem; +} +.hamburger-expanded .links .hover { + color: #222222; +} +.hide { + display: none; +} +/*global */ +html { + font-size: 62.5%; +} +body { + font-size: 1.6rem; + color: #222222; + font-family: 'Roboto', Arial, sans-serif; + line-height: 1.2; +} +* { + box-sizing: border-box; +} +/* main */ +.jumbotron { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + max-width: 1024px; + margin: 0 auto; + position: relative; +} +@media (max-width: 650px) { + .jumbotron { + max-width: 320px; + } +} +.jumbotron img { + max-width: 100%; +} +.jumbotron h1 { + color: #fff; + font-size: 6.4rem; + font-weight: 700; + line-height: 1.175; + position: absolute; + bottom: 5rem; + left: 8.15rem; +} +@media (max-width: 650px) { + .jumbotron h1 { + font-size: 3.6rem; + bottom: 2.5rem; + left: 1.5rem; + } +} +.jumbotron .services-text { + bottom: 2rem; +} +.main-content { + margin: 0 auto; + max-width: 855px; +} +@media (max-width: 650px) { + .main-content { + max-width: 320px; + margin-bottom: 7.5rem; + } +} +.main-content .intro .box { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 5rem 0; +} +@media (max-width: 650px) { + .main-content .intro .box { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + margin: 3.5rem 0; + padding: 0; + } +} +@media (max-width: 650px) { + .main-content .intro .box img { + order: -1; + } +} +.main-content .intro .box .text-content { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + padding-right: 2rem; +} +@media (max-width: 650px) { + .main-content .intro .box .text-content { + padding: 2rem; + } +} +.main-content .intro .box .text-content h2 { + font-size: 2.4rem; + font-weight: 700; +} +.main-content .intro .box .text-content p { + line-height: 1.5; +} +.main-content .intro .box .text-content .btn { + margin-top: 1rem; + display: inline-block; + border: 1px solid black; + padding: 1.3rem 2.7rem; + text-align: center; +} +@media (max-width: 650px) { + .main-content .intro .box .text-content .btn { + width: 100%; + } +} +.main-content .intro .designs .text-content { + padding: 0; + padding-left: 3rem; +} +@media (max-width: 650px) { + .main-content .intro .designs .text-content { + padding: 2rem; + } +} +.main-content .projects { + max-width: 855px; +} +.main-content .projects h2 { + font-size: 2.4rem; + font-weight: 700; + padding: 4.6rem 0; +} +@media (max-width: 650px) { + .main-content .projects h2 { + padding: 0 2rem; + } +} +.main-content .projects .project { + position: relative; +} +.main-content .projects .project img { + padding: 0.4rem 0; +} +.main-content .projects .project .overlay { + background-color: #d8d8d8; + width: 315px; + padding: 3.2rem 0; + border: 1px solid #fff; + text-align: center; + font-size: 2.4rem; + text-transform: uppercase; + letter-spacing: 0.8rem; + position: absolute; + bottom: 43rem; + right: 0; +} +@media (max-width: 650px) { + .main-content .projects .project .overlay { + width: 295px; + bottom: 46rem; + right: 1.2rem; + } +} +.main-content .projects .project .left { + left: 1.2rem; +} +.main-content .projects .project .content { + margin: 0 auto; + width: 52%; + padding: 8.9rem 0; + font-size: 1.8rem; + line-height: 1.35; +} +@media (max-width: 650px) { + .main-content .projects .project .content { + margin-top: 11rem; + margin-bottom: 4rem; + padding: 0; + width: 89%; + } +} +/* Services */ +.services { + max-width: 895px; + line-height: 1.65; + padding: 0 2rem; +} +@media (max-width: 650px) { + .services { + padding: 0 1.5rem; + max-width: 320px; + margin-bottom: 7.5rem; + } +} +.services .intro { + margin-top: 5rem; +} +@media (max-width: 650px) { + .services .intro { + margin-top: 3rem; + } +} +.services .tabs { + margin-top: 4.2rem; + margin-bottom: 9rem; +} +@media (max-width: 650px) { + .services .tabs { + margin-top: 2.8rem; + } +} +.services .tabs .tab-links { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.services .tabs .tab-links .tab-link { + width: 185px; + border: 1px solid #000; + padding: 0.75rem; + font-size: 2rem; + font-weight: 700; + text-align: center; +} +@media (max-width: 800px) { + .services .tabs .tab-links { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .services .tabs .tab-links .tab-link { + width: 100%; + margin: 1rem; + } +} +.services .tabs .clicked { + background-color: #5E9FB9; + color: #000; +} +.services .tabs .hover { + background-color: #222222; + color: #FFF; +} +.services .tabs .tab-contents .tab-content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 6.5rem; +} +@media (max-width: 800px) { + .services .tabs .tab-contents .tab-content { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin-top: 5rem; + } +} +.services .tabs .tab-contents .tab-content .text h2 { + line-height: 0; + font-size: 2.4rem; + font-weight: 700; +} +.services .tabs .tab-contents .tab-content .text p { + padding: 0.3rem 0; + margin-top: 2.1rem; +} +@media (max-width: 650px) { + .services .tabs .tab-contents .tab-content .text p { + padding: 0; + margin-top: 3.1rem; + } +} +.services .tabs .tab-contents .tab-content img { + padding-left: 3rem; +} +@media (max-width: 800px) { + .services .tabs .tab-contents .tab-content img { + padding: 2rem 0; + } +} +.services .tabs .tab-contents .hide { + display: none; +} +.footer-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} +@media (max-width: 650px) { + .footer-content { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + } +} +.footer-content .contact-us { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: baseline; + width: 100%; + padding: 5rem; + background: #828282; + color: #fff; +} +@media (max-width: 650px) { + .footer-content .contact-us { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-start; + padding: 1rem 0; + padding-bottom: 5rem; + max-width: 320px; + } +} +.footer-content .contact-us .email-us { + padding: 1rem; +} +.footer-content .contact-us .email-us h3 { + font-size: 2rem; + font-weight: 700; + line-height: 1.2; +} +.footer-content .contact-us .email-us .form { + width: 280px; + margin-top: 10px; + margin-bottom: 5px; + background-color: #fff; + border-radius: 5px; + color: gray; + padding: 1rem; +} +.footer-content .contact-us .email-us span { + font-size: 1.3rem; +} +.footer-content .contact-us .office-location { + padding: 0.5rem; + font-size: 1.4rem; + line-height: 2; +} +@media (max-width: 650px) { + .footer-content .contact-us .office-location { + padding-left: 3rem; + } +} +.footer-content .contact-us .office-location h3 { + font-size: 2rem; + font-weight: 700; +} +.footer-content footer { + position: absolute; + bottom: 2rem; + z-index: 1; + font-size: 1.3rem; + color: #fff; +} +@media (max-width: 650px) { + .footer-content footer { + bottom: 1rem; + } +} +.desktop { + display: block; +} +@media (max-width: 650px) { + .desktop { + display: none; + } +} +.mobile { + display: none; +} +@media (max-width: 650px) { + .mobile { + display: block; + } +} diff --git a/index.html b/index.html index f7fbc6750a..a58c6fb19e 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Home + - - - - -
-
-

>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. + +
+
+ Home
+ Services
+ Contact +
- - - -
- -
- +
- + +
+
+ +
+

California

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

Florida

+ Ocean Drive
+ Suite 201
+ Orlando, FL 22345
+ 502 555 0144
+
+
+

New York

+ 123 Lane
+ Suite 100
+ Albany, NY 12345
+ 02 555 0144
+
+
+ +
Copyright © 2018 Smith and Jones
+ +
+ + + + + + - Copyright © 2018 Smith and Jones - --> - -
- - + + + + + + + + + + - - - - - - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js index bb3d341cf0..63ec5f9ea4 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,77 @@ -// JS goes here \ No newline at end of file +//services page + +class Tabs { + constructor(tabElement) { + this.tabElement = tabElement; + + // convert array-like to array list + this.links = Array.from(this.tabElement.querySelector('.tab-links').querySelectorAll('.tab-link')).map(newTab => new Link(newTab)); + + // mouse hover over when cycle through each new tab link. + this.links.forEach(mouseHover => { + mouseHover.link.addEventListener('mouseenter', (event) => { + event.target.style.cursor = 'pointer'; + mouseHover.link.classList.add('hover'); + }); + mouseHover.link.addEventListener('mouseleave', (event) => { + mouseHover.link.classList.remove('hover'); + }); + mouseHover.link.addEventListener('click', () => { + mouseHover.link.classList.remove('hover'); + + // cycle through each tab when clicked and hide previous tab + this.links.forEach(hideTab => hideTab.content.classList.add('hide')); + this.links.forEach(removeTab => removeTab.link.classList.remove('clicked')); + + // select method created from below + mouseHover.select(); + }); + }); + this.links[0].select(); + } +} + +class Link { + constructor(link) { + this.link = link; + this.data = this.link.dataset.tab; + this.content = document.querySelector(`.tab-content[data-tab='${this.data}']`); + } + select() { + this.link.classList.add('clicked'); + this.content.classList.remove('hide'); + } +} + + +//home page + +let hamburgerImages = document.querySelectorAll(".hamburger img"); +let hamburgerExpanded = document.querySelector('.hamburger-expanded'); + +hamburgerImages.forEach(selectImg => { + selectImg.addEventListener('click', () => { + hamburgerImages[0].classList.toggle('hide'); + hamburgerImages[1].classList.toggle('hide'); + hamburgerExpanded.classList.toggle('hide'); + }) + + selectImg.addEventListener('mouseenter', () => { + hamburgerImages[0].style.cursor = 'pointer'; + hamburgerImages[1].style.cursor = 'pointer'; + }) +}); +// Micky mouse hand hover when menu expanded +hamburgerExpanded.querySelectorAll('a').forEach(expandMenu => { + expandMenu.addEventListener('mouseenter', () => { + expandMenu.classList.add('hover'); + }) + expandMenu.addEventListener('mouseleave', () => { + expandMenu.classList.remove('hover'); + }); +}); + +let tabs = document.querySelector('.tabs'); +tabs = new Tabs(tabs); + + diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..d6af87f2bc 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,457 @@ -/*------------------------------------*\ -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; +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; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } -body{ - line-height:1; +body { + line-height: 1; } -ol,ul{ - list-style:none; +ol, +ul { + list-style: none; } -blockquote,q{ - quotes:none; +blockquote, +q { + quotes: none; } -blockquote:before,blockquote:after, -q:before,q:after{ - content:’’; - content:none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; } -ins{ - text-decoration:none; +ins { + text-decoration: none; } -del{ - text-decoration:line-through; +del { + text-decoration: line-through; } -table{ - border-collapse:collapse; - border-spacing:0; +table { + border-collapse: collapse; + border-spacing: 0; } -/* Your Code Goes Here */ \ No newline at end of file + +/* Your Code Goes Here */ + + +@import "mixins.less"; +@import "navigation.less"; + +/*global */ + +html { + font-size: 62.5%; +} + +body { + font-size: 1.6rem; + color: #222222; + font-family: 'Roboto', Arial, sans-serif; + line-height: 1.2; +} + +* { + box-sizing: border-box; +} + +/* main */ +.jumbotron { + .flex(row, center, center); + width: 100%; + max-width: 1024px; + margin: 0 auto; + position: relative; + @media (max-width: 650px) { + max-width: 320px; + } + img { + max-width: 100%; + } + h1 { + color: #fff; + font-size: 6.4rem; + font-weight: 700; + line-height: 1.175; + position: absolute; + bottom: 5rem; + left: 8.15rem; + @media (max-width: 650px) { + font-size: 3.6rem; + bottom: 2.5rem; + left: 1.5rem; + } + } + .services-text { + bottom: 2rem; + } +} + + +.main-content { + margin: 0 auto; + max-width: 855px; + @media (max-width: 650px) { + max-width: 320px; + margin-bottom: 7.5rem; + } + .intro { + .box { + .flex(row, space-between, center); + padding: 5rem 0; + @media (max-width: 650px) { + .flex(column, space-around, center); + margin: 3.5rem 0; + padding: 0; + } + img { + @media (max-width: 650px) { + order: -1; + } + } + .text-content { + .flex(column, space-around, flex-start); + padding-right: 2rem; + @media (max-width: 650px) { + padding: 2rem; + } + h2 { + font-size: 2.4rem; + font-weight: 700; + } + p { + line-height: 1.5; + } + .btn { + margin-top: 1rem; + display: inline-block; + border: 1px solid black; + padding: 1.3rem 2.7rem; + text-align: center; + @media (max-width: 650px) { + width: 100%; + } + } + } + } + .designs { + .text-content { + padding: 0; + padding-left: 3rem; + @media (max-width: 650px) { + padding: 2rem; + } + } + } + } + .projects { + max-width: 855px; + h2 { + font-size: 2.4rem; + font-weight: 700; + padding: 4.6rem 0; + @media (max-width: 650px) { + padding: 0 2rem; + } + } + .project { + position: relative; + img { + padding: 0.4rem 0; + } + .overlay { + background-color: #d8d8d8; + width: 315px; + padding: 3.2rem 0; + border: 1px solid #fff; + text-align: center; + font-size: 2.4rem; + text-transform: uppercase; + letter-spacing: 0.8rem; + position: absolute; + bottom: 43rem; + right: 0; + @media (max-width: 650px) { + width: 295px; + bottom: 46rem; + right: 1.2rem; + } + } + .left { + left: 1.2rem; + } + .content { + margin: 0 auto; + width: 52%; + padding: 8.9rem 0; + font-size: 1.8rem; + line-height: 1.35; + @media (max-width: 650px) { + margin-top: 11rem; + margin-bottom: 4rem; + padding: 0; + width: 89%; + } + } + } + } +} + +/* Services */ +.services { + max-width: 895px; + line-height: 1.65; + padding: 0 2rem; + @media (max-width: 650px) { + padding: 0 1.5rem; + max-width: 320px; + margin-bottom: 7.5rem; + } + .intro { + margin-top: 5rem; + @media (max-width: 650px) { + margin-top: 3rem; + } + } + .tabs { + margin-top: 4.2rem; + margin-bottom: 9rem; + @media (max-width: 650px) { + margin-top: 2.8rem; + } + .tab-links { + .flex(row, space-between, center); + .tab-link { + width: 185px; + border: 1px solid #000; + padding: 0.75rem; + font-size: 2rem; + font-weight: 700; + text-align: center; + } + @media (max-width: 800px) { + .flex(column, center, center); + .tab-link { + width: 100%; + margin: 1rem; + } + } + } + .clicked { + background-color: #5E9FB9; + color: #000; + } + .hover { + background-color: #222222; + color: #FFF; + } + .tab-contents { + .tab-content { + .flex(row, space-between, center); + margin-top: 6.5rem; + @media (max-width: 800px) { + .flex(column, space-between, center); + margin-top: 5rem; + } + .text { + h2 { + line-height: 0; + font-size: 2.4rem; + font-weight: 700; + } + p { + padding: 0.3rem 0; + margin-top: 2.1rem; + @media (max-width: 650px) { + padding: 0; + margin-top: 3.1rem; + } + } + } + img { + padding-left: 3rem; + @media (max-width: 800px) { + padding: 2rem 0; + } + } + } + .hide { + display: none; + } + } + } +} + +.footer-content { + .flex(column, center, center); + position: relative; + @media (max-width: 650px) { + .flex(column, space-evenly, center); + } + .contact-us { + .flex(row, space-around, baseline); + width: 100%; + padding: 5rem; + background: #828282; + color: #fff; + @media (max-width: 650px) { + .flex(column, space-evenly, flex-start); + padding: 1rem 0; + padding-bottom: 5rem; + max-width: 320px; + } + .email-us { + padding: 1rem; + h3 { + font-size: 2rem; + font-weight: 700; + line-height: 1.2; + } + .form { + width: 280px; + margin-top: 10px; + margin-bottom: 5px; + background-color: #fff; + border-radius: 5px; + color: gray; + padding: 1rem; + } + span { + font-size: 1.3rem; + } + } + .office-location { + padding: 0.5rem; + font-size: 1.4rem; + line-height: 2; + @media (max-width: 650px) { + padding-left: 3rem; + } + h3 { + font-size: 2rem; + font-weight: 700; + } + } + } + footer { + position: absolute; + bottom: 2rem; + z-index: 1; + font-size: 1.3rem; + color: #fff; + @media (max-width: 650px) { + bottom: 1rem; + } + } +} + +.desktop { + display: block; + @media (max-width: 650px) { + display: none; + } +} + +.mobile { + display: none; + @media (max-width: 650px) { + display: block; + } +} \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..faa35fe5c8 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,6 @@ +.flex(@flex-direction, @justify, @align) { + display: flex; + flex-direction: @flex-direction; + justify-content: @justify; + align-items: @align; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..85da83b48f --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,47 @@ +.header { + width: 100%; + position: fixed; + z-index: 1; + .flex(row, space-between, center); + background-color: #9aa4ad; + padding: 1.1rem 8%; + .logo { + color: #fff; + font-size: 2.4rem; + font-weight: 700; + } + .nav { + .flex(column, space-evenly, center); + .hamburger { + .hide { + display: none; + } + } + } +} + +.hamburger-expanded { + width: 100%; + height: 100vh; + position: fixed; + top: 5rem; + z-index: 2; + .flex(row, center, center); + background-color: #9aa4ad; + padding-bottom: 5rem; + .links { + a { + text-decoration: none; + line-height: 1.8; + color: #fff; + font-weight: 700; + font-size: 4.8rem; + } + .hover { + color: #222222; + } + } +} +.hide { + display: none; +} diff --git a/services.html b/services.html index fb5a79e18a..2ca90c3ec2 100644 --- a/services.html +++ b/services.html @@ -3,6 +3,7 @@ Services + - - + +