diff --git a/README.md b/README.md index 17aecb1714..a1616da957 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ You will use Trello to report your progress on the MVP and any extra features yo - Use past solutions from the previous weeks to accomplish harder tasks - Commit every time you accomplish any new functionality or layout. Get in the habit of frequent commits so you have a record of your work. Push up your commits every day to showcase your progress to your PM - After 20 minutes of being stuck on something, reach out to your PM -- Don't overplan, start coding as soon as you can and adjust accordingly. Trello is there as a guide not as a distraction +- 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/) diff --git a/contact.html b/contact.html index 868844fe14..f5a360b80f 100644 --- a/contact.html +++ b/contact.html @@ -1,61 +1,139 @@ - - - Contact Us - - - - + + + + Contact Us + + + + - + +
+
+
+ +
+ +

Contact Us

+
+
+

Get In Touch

+
+
+
+ + +

We'll never share your email with anyone else

+
+
+ + +
+
+ + +
+
+ + I am a small + business
+ I am a + residential owner
+ I am a corporation +
+ +
+
+

Where We Work

+
+
+

New York

+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

New York

+

202 555 0144

+
+
+

Florida

+

Ocean Drive

+

Suite 201

+

Orlando, FL 22345

+

502 555 0144

+
+
+

California

+

Mountain Street

+

Suite 105

+

San Diego, CA 22345

+

702 555 0144

+
+
+
+
+
+ +
+ -

Contact

- - - - - - \ No newline at end of file + + + diff --git a/css/index.css b/css/index.css index e6b2b589c1..7e5004517d 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,615 @@ -/* 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; + font-family: 'Roboto', sans-serif; + font-size: 62.5%; +} +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 */ +.btn { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; + cursor: pointer; +} +.btn:hover { + background-color: black; + color: #fff; +} +@media (max-width: 500px) { + .btn { + width: 100%; + margin-bottom: 25px; + background-color: #fff; + } +} +footer { + color: #fff; + background-color: #828282; + padding-top: 60px; + padding-bottom: 10px; + padding-left: 8%; + padding-right: 8%; +} +footer .locations { + display: flex; + justify-content: space-between; +} +footer .locations p { + font-size: 14px; +} +footer .locations .footer-heading { + font-weight: bold; + font-size: 20px; + line-height: 24px; +} +footer .locations input { + width: 100%; + border-radius: 5px; + height: 30px; + padding-left: 5px; + margin-top: 10px; + margin-bottom: 10px; +} +footer .locations .email p { + font-weight: bold; + font-size: 2em; + line-height: 24px; +} +footer .locations .email .email-text { + font-size: 1em; + font-weight: normal; +} +@media (max-width: 500px) { + footer .locations { + flex-direction: column; + } + footer .locations div { + margin-bottom: 20px; + } + footer .locations input { + width: 80%; + } +} +footer .cr { + text-align: center; + margin-top: 30px; + font-size: 1em !important; +} +@media (max-width: 500px) { + footer .cr { + margin-bottom: 20px; + } +} +.home { + margin-left: 8%; + margin-right: 8%; +} +@media (max-width: 500px) { + .home { + padding: 0; + } +} +.home h2 { + padding-bottom: 15px; +} +.home .cta { + position: relative; + margin-bottom: 40px; +} +.home .cta .jumbotron { + width: 100%; + height: auto; +} +.home .cta .jumbo-text { + margin-left: 8%; + margin-right: 8%; + position: absolute; + font-weight: bold; + font-size: 6.4em; + line-height: 75px; + top: 55%; +} +.home .cta .jumbo-text h1 { + color: #fff; +} +@media (max-width: 500px) { + .home .cta .jumbo-text { + padding-left: 20px; + font-size: 4em; + line-height: 50px; + top: 120px; + } +} +.home .services { + display: flex; + align-items: center; + margin-left: 8%; + margin-right: 8%; + margin-bottom: 70px; +} +.home .services button { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; + cursor: pointer; +} +.home .services button:hover { + background-color: black; + color: #fff; +} +@media (max-width: 500px) { + .home .services button { + width: 100%; + margin-bottom: 25px; + background-color: #fff; + } +} +.home .services .services-img1 { + margin-left: 35px; + width: 100%; + height: auto; +} +@media (max-width: 500px) { + .home .services .services-img1 { + margin-left: 0; + margin-bottom: 40px; + } +} +@media (max-width: 500px) { + .home .services { + flex-direction: column-reverse; + margin: 0; + padding-left: 20px; + padding-right: 20px; + margin-bottom: 20px; + } + .home .services p { + margin-bottom: 20px; + } +} +.home .services2 { + display: flex; + align-items: center; + margin-left: 8%; + margin-right: 8%; + margin-bottom: 70px; +} +.home .services2 button { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; + cursor: pointer; +} +.home .services2 button:hover { + background-color: black; + color: #fff; +} +@media (max-width: 500px) { + .home .services2 button { + width: 100%; + margin-bottom: 25px; + background-color: #fff; + } +} +.home .services2 .services-img2 { + margin-right: 35px; + width: 100%; + height: auto; +} +@media (max-width: 500px) { + .home .services2 .services-img2 { + margin-right: 0; + margin-bottom: 40px; + } +} +@media (max-width: 500px) { + .home .services2 { + flex-direction: column; + margin-bottom: 40px; + margin: 0; + padding-left: 20px; + padding-right: 20px; + } + .home .services2 p { + margin-bottom: 20px; + } +} +.home .recent-projects { + margin-left: 8%; + margin-right: 8%; +} +.home .recent-projects h2:nth-child(1) { + margin-bottom: 25px; +} +@media (max-width: 500px) { + .home .recent-projects h2:nth-child(1) { + padding-left: 8%; + } +} +.home .recent-projects .project-container { + margin-bottom: 90px; +} +@media (max-width: 500px) { + .home .recent-projects .project-container { + display: flex; + flex-direction: column; + margin-bottom: 40px; + } +} +.home .recent-projects .project { + position: relative; +} +.home .recent-projects .project img { + width: 100%; + height: auto; +} +.home .recent-projects .project .project-text { + background-color: #D8D8D8; + width: 280px; + position: absolute; + text-align: center; + padding: 20px; + font-weight: 100; + letter-spacing: 7px; +} +.home .recent-projects .project .proj-right { + right: 0px; + top: 190px; +} +@media (max-width: 500px) { + .home .recent-projects .project .proj-right { + right: 25px; + top: 210px; + } +} +.home .recent-projects .project .proj-left { + left: 0px; + top: 190px; +} +@media (max-width: 500px) { + .home .recent-projects .project .proj-left { + left: 10%; + top: 210px; + } +} +.home .recent-projects .project-paragraph { + margin-top: 90px; + padding-left: 190px; + padding-right: 190px; +} +@media (max-width: 500px) { + .home .recent-projects .project-paragraph { + padding-left: 20px; + padding-right: 20px; + margin-top: 70px; + } +} +.home .recent-projects .project-paragraph p { + margin-bottom: 20px; +} +@media (max-width: 500px) { + .home .recent-projects { + margin: 0; + } +} +.services .cta { + position: relative; +} +.services .jumbo-text { + margin-left: 8%; + margin-right: 8%; + position: absolute; + top: 160px; + font-size: 6.4em; + font-weight: bold; +} +.services .jumbo-text h1 { + color: #fff; +} +.services .services-text { + margin-left: 8%; + margin-right: 8%; + margin-top: 40px; +} +.services .tabs-links { + display: flex; + justify-content: space-between; + margin-left: 8%; + margin-right: 8%; +} +.services .tab-link { + width: 150px; + text-align: center; + border: 2px solid #000; + padding: 10px; + font-size: 1.6em; + font-weight: bold; + margin-top: 40px; + margin-bottom: 40px; +} +.services .tab-link:hover { + background-color: #5E9FB9; + cursor: pointer; +} +.services .tab-link-selected { + background-color: #5E9FB9; +} +.services .tab-item { + display: none; + margin-bottom: 40px; +} +.services .tab-item-selected { + display: block; +} +.services .tab-item-content { + display: flex; +} +.services .tab-item-description { + margin-left: 8%; + margin-right: 8%; + width: 50%; + padding-right: 20px; +} +.services .tab-item-description p { + margin-bottom: 20px; +} +.services .tab-item-description h3 { + font-size: 1.8em; + font-weight: bold; + margin-bottom: 20px; +} +.services .tab-item-image { + padding-right: 84.5px; +} +header { + width: 100%; + max-width: 1024px; + background-color: #9FA9B3; + margin: 0 auto; +} +header nav { + display: flex; + justify-content: space-between; + margin-left: 8%; + margin-right: 8%; + padding-top: 10px; + padding-bottom: 10px; +} +header nav #logo { + color: #fff; + font-size: 2.4em; +} +header nav a { + text-decoration: none; +} +header nav .navigation .menu-open { + cursor: pointer; +} +header nav .navigation .menu { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + width: 100%; + background-color: #9FA9B3; + height: 100vh; + left: 0; + top: 0; + opacity: 0.98; +} +header nav .navigation .menu ul { + display: flex; + flex-direction: column; +} +header nav .navigation .menu .menu-close { + position: fixed; + top: 20px; + width: 20px; + right: 120px; + cursor: pointer; +} +@media (max-width: 500px) { + header nav .navigation .menu .menu-close { + right: 50px; + } +} +header nav .navigation .menu #menu-logo { + font-size: 2.4em; + color: #fff; + position: fixed; + top: 20px; + left: 200px; +} +@media (max-width: 500px) { + header nav .navigation .menu #menu-logo { + left: 50px; + } +} +header nav .navigation .menu a:link, +header nav .navigation .menu a:visited { + color: #ffff; + font-weight: bold; + font-size: 4.8em; + line-height: 85px; +} +header nav .navigation .menu a:hover { + color: #222222; +} +header nav .navigation .menu-hidden { + display: none; +} +@media (max-width: 500px) { + header nav { + padding-left: 20px; + padding-right: 20px; + } +} +.container { + margin: 0 auto; + width: 100%; + max-width: 1024px; +} +.container p { + line-height: 1.6; + font-size: 1.6em; +} +.container h2 { + font-weight: bold; + font-size: 2.8em; + color: #222222; +} +.container img { + width: 100%; + height: auto; +} +.container .hidden-desktop { + display: none; +} +@media (max-width: 500px) { + .container .hidden-desktop { + display: block; + } +} +.container .hidden-mobile { + display: block; +} +@media (max-width: 500px) { + .container .hidden-mobile { + display: none; + } +} diff --git a/index.html b/index.html index 8a84a17304..a9805f317d 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,249 @@ - - - Home - - - - + + + + Home + + + + + + +
+
+ +
+
+ + +
+

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 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/index.js b/js/index.js index bb3d341cf0..aba0141fb9 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,54 @@ -// JS goes here \ No newline at end of file +// JS goes here + +const toggle = () => { + menu.classList.toggle("menu-hidden"); +}; +const menuBtn = document.querySelector(".menu-open"); +const closeBtn = document.querySelector(".menu-close"); +const menu = document.querySelector(".menu-hidden"); + +menuBtn.addEventListener("click", toggle); +closeBtn.addEventListener("click", toggle); + +class TabLinks { + constructor(tabs) { + this.tabs = tabs; + // Add click event listener to all the tabs + this.tabs.addEventListener("click", this.select.bind(this)); + // Store the number of the
Construction
= 2 + this.data = tabs.dataset.tab; + // Store the corresponding tab content + this.dataElement = document.querySelector( + `.tab-item[data-tab="${this.data}"]` + ); + // Craete new tab content class with the corresponding tab content + this.tabContent = new TabContent(this.dataElement); + } + select() { + // Remove the selected class from all tabs + const links = document.querySelectorAll(".tab-link"); + links.forEach(link => { + link.classList.remove("tab-link-selected"); + }); + // Add the selected class to the tab that was clicked + this.tabs.classList.add("tab-link-selected"); + // Call the select method from TabContent class to display the correct tab content when the parent tab is clicked + this.tabContent.select(); + } +} + +class TabContent { + constructor(content) { + this.content = content; + } + select() { + // Store all the tab content + const items = document.querySelectorAll(".tab-item"); + // Remove the select class from all the tab content + items.forEach(item => item.classList.remove("tab-item-selected")); + // Add the selected class to the correct tab content so it displays + this.content.classList.add("tab-item-selected"); + } +} + +document.querySelectorAll(".tab-link").forEach(tab => new TabLinks(tab)); diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..cc8c956179 --- /dev/null +++ b/less/footer.less @@ -0,0 +1,56 @@ +footer { + color: #fff; + background-color: #828282; + padding-top: 60px; + padding-bottom: 10px; + padding-left: 8%; + padding-right: 8%; + .locations { + display: flex; + justify-content: space-between; + p { + font-size: 14px; + } + .footer-heading { + font-weight: bold; + font-size: 20px; + line-height: 24px; + } + input { + width: 100%; + border-radius: 5px; + height: 30px; + padding-left: 5px; + margin-top: 10px; + margin-bottom: 10px; + } + .email { + p { + font-weight: bold; + font-size: 2em; + line-height: 24px; + } + .email-text { + font-size: 1em; + font-weight: normal; + } + } + @media @mobile { + flex-direction: column; + div { + margin-bottom: 20px; + } + input { + width: 80%; + } + } + } + .cr { + text-align: center; + margin-top: 30px; + font-size: 1em !important; + @media @mobile { + margin-bottom: 20px; + } + } +} \ No newline at end of file diff --git a/less/home.less b/less/home.less new file mode 100644 index 0000000000..e7c4719fd2 --- /dev/null +++ b/less/home.less @@ -0,0 +1,153 @@ +.home { + .padding-indent(); + @media @mobile { + padding: 0; + } + h2 { + padding-bottom: 15px; + } + .cta { + position: relative; + margin-bottom: 40px; + .jumbotron { + width: 100%; + height: auto; + } + .jumbo-text { + .padding-indent(); + position: absolute; + font-weight: bold; + font-size: 6.4em; + line-height: 75px; + top: 55%; + ; + h1 { + color: #fff + } + @media @mobile { + padding-left: 20px; + font-size: 4em; + line-height: 50px; + top: 120px; + } + } + } + .services { + display: flex; + align-items: center; + .padding-indent(); + margin-bottom: 70px; + button { + .btn(); + } + .services-img1 { + margin-left: 35px; + width: 100%; + height: auto; + @media @mobile { + margin-left: 0; + margin-bottom: 40px; + } + } + @media @mobile { + flex-direction: column-reverse; + margin: 0; + .mobile-padding(); + margin-bottom: 20px; + p { + margin-bottom: 20px; + } + } + } + .services2 { + display: flex; + align-items: center; + .padding-indent(); + margin-bottom: 70px; + button { + .btn(); + } + .services-img2 { + margin-right: 35px; + width: 100%; + height: auto; + @media @mobile { + margin-right: 0; + margin-bottom: 40px; + } + } + @media @mobile { + flex-direction: column; + margin-bottom: 40px; + margin: 0; + .mobile-padding(); + p { + margin-bottom: 20px; + } + } + } + .recent-projects { + .padding-indent(); + h2:nth-child(1) { + margin-bottom: 25px; + @media @mobile { + padding-left: 8%; + } + } + .project-container { + margin-bottom: 90px; + @media @mobile { + display: flex; + flex-direction: column; + margin-bottom: 40px; + } + } + .project { + position: relative; + img { + width: 100%; + height: auto; + } + .project-text { + background-color: #D8D8D8; + width: 280px; + position: absolute; + text-align: center; + padding: 20px; + font-weight: 100; + letter-spacing: 7px; + } + .proj-right { + right: 0px; + top: 190px; + @media @mobile { + right: 25px; + top: 210px; + } + } + .proj-left { + left: 0px; + top: 190px; + @media @mobile { + left: 10%; + top: 210px; + } + } + } + .project-paragraph { + margin-top: 90px; + padding-left: 190px; + padding-right: 190px; + @media @mobile { + .mobile-padding(); + margin-top: 70px; + } + p { + margin-bottom: 20px; + } + } + @media @mobile { + margin: 0; + } + } +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..572b7f079b 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,188 @@ /*------------------------------------*\ 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; + font-family: 'Roboto', sans-serif; + font-size: 62.5%; } -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 'variables'; +@import 'mixins'; +@import 'footer'; +@import 'home'; +@import 'services'; +@import 'navigation'; +.container { + margin: 0 auto; + width: 100%; + max-width: 1024px; + p { + line-height: 1.6; + font-size: 1.6em; + } + h2 { + font-weight: bold; + font-size: 2.8em; + color: #222222; + } + img { + width: 100%; + height: auto; + } + @media @mobile {} + .hidden-desktop { + display: none; + @media @mobile { + display: block; + } + } + .hidden-mobile { + display: block; + @media @mobile { + display: none; + } + } +} \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..caf7e15f97 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,30 @@ +.margin-auto() { + margin: 20px auto; +} + +.padding-indent() { + margin-left: 8%; + margin-right: 8%; +} + +.mobile-padding() { + padding-left: 20px; + padding-right: 20px; +} + +.btn { + border: 2px solid #222222; + padding: 10px; + font-size: 1.6em; + margin-top: 15px; + cursor: pointer; + &:hover { + background-color: black; + color: #fff; + } + @media @mobile { + width: 100%; + margin-bottom: 25px; + background-color: #fff + } +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..658545da67 --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,78 @@ +header { + width: 100%; + max-width: 1024px; + background-color: #9FA9B3; + margin: 0 auto; + nav { + display: flex; + justify-content: space-between; + .padding-indent(); + padding-top: 10px; + padding-bottom: 10px; + #logo { + color: #fff; + font-size: 2.4em; + } + a { + text-decoration: none; + } + .navigation { + .menu-open { + cursor: pointer; + } + .menu { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + width: 100%; + background-color: #9FA9B3; + height: 100vh; + left: 0; + top: 0; + opacity: .98; + ul { + display: flex; + flex-direction: column; + } + .menu-close { + position: fixed; + top: 20px; + width: 20px; + right: 120px; + cursor: pointer; + @media @mobile { + right: 50px; + } + } + #menu-logo { + font-size: 2.4em; + color: #fff; + position: fixed; + top: 20px; + left: 200px; + @media @mobile { + left: 50px; + } + } + a:link, + a:visited { + color: #ffff; + font-weight: bold; + font-size: 4.8em; + line-height: 85px; + } + a:hover { + color: #222222 + } + } + .menu-hidden { + display: none; + } + } + @media @mobile { + .mobile-padding(); + } + } +} \ No newline at end of file diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..7d70ef247f --- /dev/null +++ b/less/services.less @@ -0,0 +1,67 @@ +.services { + .cta { + position: relative; + } + .jumbo-text { + .padding-indent(); + position: absolute; + top: 160px; + font-size: 6.4em; + font-weight: bold; + h1 { + color: #fff; + } + } + .services-text { + .padding-indent(); + margin-top: 40px; + } + .tabs-links { + display: flex; + justify-content: space-between; + .padding-indent(); + } + .tab-link { + width: 150px; + text-align: center; + border: 2px solid #000; + padding: 10px; + font-size: 1.6em; + font-weight: bold; + margin-top: 40px; + margin-bottom: 40px; + } + .tab-link:hover { + background-color: #5E9FB9; + cursor: pointer; + } + .tab-link-selected { + background-color: #5E9FB9; + } + .tab-item { + display: none; + margin-bottom: 40px; + } + .tab-item-selected { + display: block; + } + .tab-item-content { + display: flex; + } + .tab-item-description { + .padding-indent(); + width: 50%; + padding-right: 20px; + p { + margin-bottom: 20px; + } + h3 { + font-size: 1.8em; + font-weight: bold; + margin-bottom: 20px; + } + } + .tab-item-image { + padding-right: 84.5px; + } +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..a643773f02 --- /dev/null +++ b/less/variables.less @@ -0,0 +1 @@ +@mobile: ~"(max-width: 500px)"; \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..d6add242c6 100644 --- a/services.html +++ b/services.html @@ -12,12 +12,144 @@ -

Services

+
+ +
+ +
+ +
+ + +
+

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.

+
+
+ + +
+
+
+
+
+ +