diff --git a/README.md b/README.md index 17aecb1714..dc272fc5c0 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # User Interface Project Week +First Commit You are to treat this week as if you are working as a front end developer at a web development agency. The instructor is the owner of the agency and is under pressure from the client to deliver the product, a custom marketing website, on time. The project managers are acting as your supervisors. This week you will be building a website for an architectural firm named Smith and Jones Architects. Smith and Jones have requested a minimum viable product to deliver to their board of directors by the end of the week. The requirements are listed below under **MVP Features**. Smith and Jones also have a wish list of extra features they would love to showcase to the board if you can get them done. You will demonstrate your work to the agency owner Thursday afternoon. diff --git a/contact.html b/contact.html index 868844fe14..ff6470d9f6 100644 --- a/contact.html +++ b/contact.html @@ -1,23 +1,169 @@ - - - Contact Us - - - - + + + Contact Us + + + + - + +
+
+

S&J

+
+ +
-

Contact

+ menu-button-expand + menu-button-close +
+ +
+ Jumbotron + Jumbotron +

Contact Us

+
+ +
+
+

Get In Touch

+
+

Email Address

+ +

We'll never share your email with anyone else.

+
+
+

How many building do you need planned?

+ +
+
+

Providue a brief overview of your project needs:

+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+
+ +
+

Where We Work

+
+

New York

+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

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

+
+
+
+ + + + +
- - - \ No newline at end of file + + + diff --git a/css/index.css b/css/index.css index e6b2b589c1..7e4640d948 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,626 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +.flex { + display: flex; +} +@media (max-width: 500px) { + img.img-desktop { + display: none; + } +} +img.img-mobile { + display: none; +} +@media (max-width: 500px) { + img.img-mobile { + display: block; + } +} +.padding-left-right { + padding-left: 5%; + padding-right: 5%; +} +.margin-top-bottom { + margin-top: 5%; + margin-bottom: 5%; +} +.btn { + border: solid 1px #222222; + font-size: 1.6rem; + width: 12rem; + height: 4rem; + text-align: center; + padding-top: 3%; + margin-top: 5%; + margin-bottom: 5%; +} +@media (max-width: 500px) { + .btn { + width: 100%; + height: 5rem; + padding-top: 4%; + } +} +.btn:hover, +.btn:focus { + background-color: #D8D8D8; +} +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +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, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 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; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +html, +body { + font-family: "Roboto", Arial, sans-serif; +} +.container { + max-width: 1024px; + width: 100%; + margin: 0 auto; +} +@media (max-width: 500px) { + .container { + max-width: 500px; + width: 100%; + padding: 0 2%; + } +} +p { + font-size: 1.6rem; + line-height: 2.4rem; +} +h2 { + font-size: 2.8rem; + font-weight: bold; +} +.gray-box { + color: #D8D8D8; +} +header.jumbo-header { + position: relative; + text-align: left; +} +header.jumbo-header img.jumbotron { + width: 100%; +} +header.jumbo-header h1.jumbo-title { + font-weight: bold; + font-size: 6.4rem; + line-height: 6.4rem; + color: #ffffff; + position: absolute; +} +@media (max-width: 500px) { + header.jumbo-header h1.jumbo-title { + font-size: 4.4rem; + line-height: 4.4rem; + } +} +header.jumbo-header h1.bottom-left { + bottom: 10%; + left: 5%; +} +div.content-img { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-top: 5%; + margin-bottom: 5%; + margin-top: 10%; +} +@media (max-width: 500px) { + div.content-img { + flex-direction: column; + align-items: center; + } +} +div.content-img div.title-content-btn { + display: flex; + flex-direction: column; + align-content: space-between; + width: 40%; +} +@media (max-width: 500px) { + div.content-img div.title-content-btn { + width: 90%; + } +} +div.content-img div.title-content-btn h2 { + font-weight: bold; + font-size: 2.8rem; + color: #222222; + margin-top: 5%; + margin-bottom: 5%; +} +div.content-img div.title-content-btn .btn { + padding-top: 3.5%; +} +div.content-img img.top-content-image { + width: 44%; +} +@media (max-width: 500px) { + div.content-img img.top-content-image { + width: 90%; + } +} +@media (max-width: 500px) { + div.Architects { + flex-direction: column-reverse; + } +} +div.three-pic-content { + margin-top: 5%; + margin-bottom: 5%; + margin-top: 10%; +} +div.three-pic-content h2 { + font-weight: bold; + font-size: 2.8rem; + color: #222222; + padding-left: 5%; + margin-top: 5%; + margin-bottom: 5%; +} +div.three-pic-content div.pic-top-word-bottom { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +div.three-pic-content div.pic-top-word-bottom div.two-para { + padding: 2%; + width: 45%; + margin-top: 5%; + margin-bottom: 5%; +} +div.three-pic-content div.pic-top-word-bottom div.two-para p.first-para { + margin-bottom: 5%; +} +@media (max-width: 500px) { + div.three-pic-content div.pic-top-word-bottom div.two-para { + width: 90%; + margin-top: 15%; + } +} +div.three-pic-content div.pic-top-word-bottom div.pic-float-title { + position: relative; + display: flex; + justify-content: center; +} +div.three-pic-content div.pic-top-word-bottom div.pic-float-title img.img-gray-box { + width: 100%; +} +div.three-pic-content div.pic-top-word-bottom div.pic-float-title div.gray-box { + background-color: #D8D8D8; + color: black; + font-size: 2.4rem; + letter-spacing: 5px; + text-align: center; + width: 30%; + padding-top: 2.5rem; + height: 7rem; + position: absolute; + bottom: -15%; + right: 0%; +} +@media (max-width: 500px) { + div.three-pic-content div.pic-top-word-bottom div.pic-float-title div.gray-box { + width: 90%; + right: 5%; + bottom: -20%; + } +} +div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { + bottom: -15%; + left: 0%; +} +@media (max-width: 500px) { + div.three-pic-content div.pic-top-word-bottom div.pic-float-title .outskirts { + left: 5%; + } +} +header.jumbo-header { + position: relative; + text-align: left; +} +header.jumbo-header img.jumbotron { + width: 100%; +} +header.jumbo-header h1.bottom-left { + bottom: 10%; + left: 5%; +} +header.jumbo-header h1.jumbo-title { + font-weight: bold; + font-size: 6.4rem; + line-height: 6.4rem; + color: #ffffff; + position: absolute; +} +@media (max-width: 500px) { + header.jumbo-header h1.jumbo-title { + font-size: 4.4rem; + line-height: 4.4rem; + } +} +div.ptag-container { + display: flex; + justify-content: center; + margin-top: 5%; + margin-bottom: 5%; +} +div.ptag-container p.services-ptag { + font-size: 1.6rem; + padding-left: 5%; + padding-right: 5%; +} +div.tabs { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-top: 5%; + margin-bottom: 5%; +} +@media (max-width: 500px) { + div.tabs { + flex-direction: column; + align-content: center; + align-items: center; + } +} +div.tabs div.tab { + font-weight: bold; + border: solid 1px #222222; + font-size: 2rem; + width: 20rem; + height: 6rem; + text-align: center; + padding-top: 2%; +} +@media (max-width: 500px) { + div.tabs div.tab { + width: 90%; + height: 5rem; + margin-top: 3%; + margin-bottom: 3%; + padding-top: 4%; + } +} +div.tabs .tab:hover, +div.tabs .tab:focus { + background-color: #5da1b7; +} +div.tabs div.active-tab { + background-color: #5da1b7; + color: white; +} +div.content-container div.content { + display: none; +} +div.content-container div.content div.content-words h2.content-title { + font-size: 2.8rem; + font-weight: bold; + margin-bottom: 5%; +} +div.content-container div.content div.content-words p.content-ptag { + font-size: 1.6rem; + width: 80%; +} +@media (max-width: 500px) { + div.content-container div.content div.content-words p.content-ptag { + width: 100%; + margin-bottom: 5%; + } +} +div.content-container div.active-content { + display: flex; + flex-direction: row; + padding-left: 5%; + padding-right: 5%; + margin-bottom: 5%; +} +@media (max-width: 500px) { + div.content-container div.active-content { + flex-direction: column; + align-content: center; + align-items: center; + } +} +div.left-side { + margin-top: 5%; + margin-bottom: 5%; + display: flex; + flex-direction: row; + justify-content: space-between; + padding-left: 5%; + padding-right: 5%; +} +div.left-side div.input-field { + margin-top: 5%; + margin-bottom: 5%; +} +div.left-side div.input-field input.input-box { + width: 100%; + height: 2.5rem; +} +div.left-side div.radio-buttons { + display: flex; + flex-direction: column; + margin-bottom: 5%; + font-size: 1.2rem; +} +div.left-side div.radio-buttons div.radio-button { + display: flex; + flex-direction: row; + margin-bottom: 1%; + align-content: center; + align-items: center; +} +div.left-side div.submit .btn { + margin-top: 0%; + margin-bottom: 0%; + padding-top: 1%; +} +div.right-side { + display: flex; + flex-direction: column; + align-items: flex-start; + align-content: flex-start; + justify-content: flex-start; + padding-right: 5%; +} +div.right-side h3 { + font-size: 2rem; + font-weight: bold; + margin-bottom: 1%; +} +div.right-side div.right-side-text { + margin-top: 10%; + margin-bottom: 10%; +} +.header { + background-color: #98a5ae; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 4.5rem; + padding-left: 5%; + padding-right: 5%; +} +.header img.menu-button-close { + display: none; +} +@media (max-width: 500px) { + .header { + max-width: 500px; + } +} +.header h2.title { + font-weight: bold; + font-size: 2.4rem; + color: #ffffff; + z-index: 2; +} +.nav-overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + left: 0; + top: 0; + background-color: rgba(153, 165, 174, 0.8); + overflow-x: hidden; + /* Disable horizontal scroll */ + transition: 0.5s; +} +.nav-overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} +.nav-overlay a { + font-weight: bold; + padding: 0.8rem; + text-decoration: none; + font-size: 3.6rem; + color: white; + display: block; + /* Display block instead of inline */ + transition: 0.3s; + /* Transition effects on hover (color) */ +} +/* When you mouse over the navigation links, change their color */ +.nav-overlay a:hover, +.nav-overlay a:focus { + color: #504545; +} +/* Position the close button (top right corner) */ +img.menu-button-close { + position: absolute; + top: 0.8%; + right: 5.3%; + font-size: 6rem; + z-index: 2; +} +@media (max-width: 500px) { + img.menu-button-close { + right: 7.5%; + } +} +.footer { + background: #828282; + color: #ffffff; +} +.footer div.footer-flex { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} +@media (max-width: 500px) { + .footer div.footer-flex { + flex-direction: column; + padding-left: 3%; + padding-right: 3%; + } +} +.footer div.footer-flex div.footer-content { + margin-top: 5%; + margin-bottom: 5%; +} +.footer div.footer-flex div.footer-content h3 { + font-size: 2rem; + line-height: 2.4rem; + font-weight: bold; +} +.footer div.footer-flex div.footer-content p { + font-size: 1.4rem; + line-height: 2.6rem; +} +.footer div.footer-flex div.footer-content .footer-input { + width: 100%; + padding: 5%; + border-radius: 5px; + margin-top: 3%; + font-size: 1.6rem; +} +.footer p.copyright { + font-size: 1.2rem; + text-align: center; +} +@media (max-width: 500px) { + .footer p.copyright { + text-align: left; + padding-left: 3%; + } +} diff --git a/index.html b/index.html index 8a84a17304..6376dd65d4 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,235 @@ - - - Home - - - - - - - -

You got this! Good luck.

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

S&J

+
+ +
+ + menu-button-expand + menu-button-close +
+ +
+ Jumbotron + Jumbotron +

+ 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
+
+ Picture of house blueprints + Picture of house blueprints +
+ +
+ Picutre of Futuristic designs + Picutre of Futuristic designs +
+

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 Villa Houses + The Villa Houses +
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. +

+
+
+ +
+
+ The Outskirt Houses + The Outskirt Houses +
OUTSKIRTS
+
+
+

+ The Villas bring to the table win-win survival strategies to + ensure proactive domination. At the end of the day, going forward, + a new normal that has evolved from generation X is on the runway + heading towards a streamlined cloud solution. +

+

+ Capitalize on low hanging fruit to identify a ballpark value added + activity to beta test. Override the digital divide with additional + clickthroughs from DevOps. Nanotechnology immersion along the + information highway will close the loop on focusing solely on the + bottom line. +

+
+
+ +
+
+ The Blocks Houses + The Blocks Houses +
THE BLOCKS
+
+
+

+ The Villas bring to the table win-win survival strategies to + ensure proactive domination. At the end of the day, going forward, + a new normal that has evolved from generation X is on the runway + heading towards a streamlined cloud solution. +

+

+ Capitalize on low hanging fruit to identify a ballpark value added + activity to beta test. Override the digital divide with additional + clickthroughs from DevOps. Nanotechnology immersion along the + information highway will close the loop on focusing solely on the + bottom line. +

+
+
+
+ + +
+ + + diff --git a/js/index.js b/js/index.js index bb3d341cf0..c44b0070a2 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,69 @@ -// JS goes here \ No newline at end of file +// JS goes here +//Navigation Overlay +//Open nav when clickimg on hamburger +function openNav() { + document.querySelector(".nav-overlay").style.width = "100%"; + document.querySelector(".menu-button-close").style.display = "block"; + document.querySelector(".menu-button-expand").style.display = "none"; +} + +/* Close when someone clicks on the "x" symbol inside the overlay */ +function closeNav() { + document.querySelector(".nav-overlay").style.width = "0%"; + document.querySelector(".menu-button-close").style.display = "none"; + document.querySelector(".menu-button-expand").style.display = "block"; +} + +//Services Tab Component +class Tab { + constructor(tab) { + this.tab = tab; + + //Getting the custom data attrs on tab + this.data = this.tab.dataset.tab; + + // Using the custom data attribute get the associated Item element + //selecting each tab using the [data-somthing] for specificty + this.contentElement = document.querySelector( + `.content[data-tab='${this.data}']` + ); + + //Using the data attrs, create a new instance of the TabContent class + this.contentElement = new TabContent(this.contentElement); + + this.tab.addEventListener("click", () => this.select()); + } + select() { + // Get all of the elements with the tab class + const tabs = document.querySelectorAll(".tab"); + // Using a loop or the forEach method remove the 'active-tab' class from all of the links + //This removed + Array.from(tabs).forEach(tab => tab.classList.remove("active-tab")); + + // Add a class named "tabs-link-selected" to this link + this.tab.classList.add("active-tab"); + + // Call the select method on the item associated with this link + this.contentElement.showContent(); + } +} + +class TabContent { + constructor(content) { + this.content = content; + } + + showContent() { + const contents = document.querySelectorAll(".content"); + + //Removing the class "active-content" from each element + Array.from(contents).forEach(content => + content.classList.remove("active-content") + ); + + //Add a class name "active-content" to this element + this.content.classList.add("active-content"); + } +} + +const tabs = document.querySelectorAll(".tab").forEach(tab => new Tab(tab)); diff --git a/less/contact.less b/less/contact.less new file mode 100644 index 0000000000..949cb47791 --- /dev/null +++ b/less/contact.less @@ -0,0 +1,59 @@ +div.left-side { + .margin-top-bottom; + .flex; + flex-direction: row; + justify-content: space-between; + padding-left: 5%; + padding-right: 5%; + + div.input-field { + .margin-top-bottom; + + input.input-box { + width: 100%; + height: 2.5rem; + } + } + + div.radio-buttons { + .flex; + flex-direction: column; + margin-bottom: 5%; + font-size: 1.2rem; + + div.radio-button { + .flex; + flex-direction: row; + margin-bottom: 1%; + align-content: center; + align-items: center; + } + } + + div.submit { + .btn { + margin-top: 0%; + margin-bottom: 0%; + padding-top: 1%; + } + } + +} + +div.right-side { + .flex; + flex-direction: column; + align-items: flex-start; + align-content: flex-start; + justify-content: flex-start; + padding-right: 5%; + h3 { + font-size: 2rem; + font-weight: bold; + margin-bottom: 1%; + } + div.right-side-text { + margin-top: 10%; + margin-bottom: 10%; + } +} \ No newline at end of file diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..e727d54f00 --- /dev/null +++ b/less/footer.less @@ -0,0 +1,46 @@ +.footer { + background: #828282; + color: #ffffff; + + div.footer-flex { + .flex; + flex-direction: row; + justify-content: space-evenly; + + @media @mobile { + flex-direction: column; + padding-left: 3%; + padding-right: 3%; + } + + div.footer-content { + .margin-top-bottom; + h3 { + font-size: 2rem; + line-height: 2.4rem; + font-weight: bold; + } + p { + font-size: 1.4rem; + line-height: 2.6rem; + } + .footer-input { + width: 100%; + padding: 5%; + border-radius: 5px; + margin-top: 3%; + font-size: 1.6rem; + } + } + } + + p.copyright { + font-size: 1.2rem; + text-align: center; + + @media @mobile { + text-align: left; + padding-left: 3%; + } + } +} \ No newline at end of file diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..d195ed0b9c --- /dev/null +++ b/less/global.less @@ -0,0 +1,33 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +html, +body { + font-family: "Roboto", Arial, sans-serif; +} + +.container { + max-width: 1024px; + width: 100%; + margin: 0 auto; + @media @mobile { + max-width: 500px; + width: 100%; + padding: 0 2%; + } +} + +p { + font-size: 1.6rem; + line-height: 2.4rem; +} + +h2 { + font-size: 2.8rem; + font-weight: bold; +} \ No newline at end of file diff --git a/less/home-page.less b/less/home-page.less new file mode 100644 index 0000000000..5e579982bd --- /dev/null +++ b/less/home-page.less @@ -0,0 +1,148 @@ +.gray-box { + color: #D8D8D8 +} + +header.jumbo-header { + position: relative; + text-align: left; + + img.jumbotron { + width: 100%; + } + + h1.jumbo-title{ + font-weight: bold; + font-size: 6.4rem; + line-height: 6.4rem; + color: #ffffff; + position: absolute; + + @media @mobile { + font-size: 4.4rem; + line-height: 4.4rem; + } + } + + h1.bottom-left { + bottom: 10%; + left: 5%; + } +} + +div.content-img { + .flex; + flex-direction: row; + justify-content: space-evenly; + .margin-top-bottom; + margin-top: 10%; + + @media @mobile { + flex-direction: column; + align-items: center; + + } + + + div.title-content-btn { + .flex; + flex-direction: column; + align-content: space-between; + width: 40%; + + @media @mobile { + width: 90%; + } + + h2 { + font-weight: bold; + font-size: 2.8rem; + color: #222222; + .margin-top-bottom; + } + + .btn { + padding-top: 3.5%; + } + } + img.top-content-image { + width: 44%; + @media @mobile { + width: 90%; + } + } +} + +div.Architects { + @media @mobile { + flex-direction: column-reverse; + } +} + +div.three-pic-content { + .margin-top-bottom; + margin-top: 10%; + h2 { + font-weight: bold; + font-size: 2.8rem; + color: #222222; + padding-left: 5%; + .margin-top-bottom; + } + div.pic-top-word-bottom { + .flex; + justify-content: center; + flex-direction: column; + align-items: center; + + div.two-para { + padding: 2%; + width: 45%; + .margin-top-bottom; + p.first-para { + margin-bottom: 5%; + } + + @media @mobile { + width: 90%; + margin-top: 15%; + } + } + div.pic-float-title { + position: relative; + .flex; + justify-content: center; + + img.img-gray-box { + width: 100%; + } + div.gray-box { + background-color: #D8D8D8; + color: black; + font-size: 2.4rem; + letter-spacing: 5px; + text-align: center; + width: 30%; + padding-top: 2.5rem; + height: 7rem; + position: absolute; + bottom: -15%; + right: 0%; + + @media @mobile { + width: 90%; + right: 5%; + bottom: -20%; + } + } + + .outskirts { + bottom: -15%; + left: 0%; + @media @mobile { + left: 5%; + } + } + } + + } +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..c0907df0d8 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,10 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ - -html,body,div,span,applet,object,iframe, -h1,h2,h3,h4,h5,h6,p,blockquote,pre, -a,abbr,acronym,address,big,cite,code, -del,dfn,em,img,ins,kbd,q,s,samp, -small,strike,strong,sub,sup,tt,var, -b,u,i,center, -dl,dt,dd,ol,ul,li, -fieldset,form,label,legend, -table,caption,tbody,tfoot,thead,tr,th,td, -article,aside,canvas,details,figcaption,figure, -footer,header,hgroup,menu,nav,section,summary, -time,mark,audio,video{ - margin:0; - padding:0; - border:0; - outline:0; - font-size:100%; - font:inherit; - vertical-align:baseline; -} -/* HTML5 display-role reset for older browsers */ -article,aside,details,figcaption,figure, -footer,header,hgroup,menu,nav,section{ - display:block; -} -body{ - line-height:1; -} -ol,ul{ - list-style:none; -} -blockquote,q{ - quotes:none; -} -blockquote:before,blockquote:after, -q:before,q:after{ - content:’’; - content:none; -} -ins{ - text-decoration:none; -} -del{ - text-decoration:line-through; -} - -table{ - border-collapse:collapse; - border-spacing:0; -} - -/* Your Code Goes Here */ \ No newline at end of file +// Follow the order in the readme +@import "variables"; +@import "mixins"; +@import "reset"; +@import "global"; +@import "home-page"; +@import "services"; +@import "contact"; +@import "navigation"; +@import "footer"; diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..d6d870f61d --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,33 @@ +// Mixins in here +.padding-left-right { + padding-left: 5%; + padding-right: 5%; +} + +.margin-top-bottom { + margin-top: 5%; + margin-bottom: 5%; +} + + +//Button styles +.btn { + border: solid 1px #222222; + font-size: 1.6rem; + width: 12rem; + height: 4rem; + text-align: center; + padding-top: 3%; + .margin-top-bottom; + + @media @mobile { + width: 100%; + height: 5rem; + padding-top: 4%; + } +} + +.btn:hover, +.btn:focus { + background-color: #D8D8D8; +} \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..41e0f6268b --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,76 @@ +// Navigation Styles here +.header { + background-color: #98a5ae; + .flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 4.5rem; + padding-left: 5%; + padding-right: 5%; + + img.menu-button-close { + display: none; + } + + @media @mobile { + max-width: 500px; + } + + h2.title { + font-weight: bold; + font-size: 2.4rem; + color: #ffffff; + z-index: 2; + } +} + +// Overlay CSS +.nav-overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + left: 0; + top: 0; + background-color: rgba(153, 165, 174, 0.8); + overflow-x: hidden; /* Disable horizontal scroll */ + transition: 0.5s; //Transition effect which times the speed it slides in +} + +.nav-overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} + +.nav-overlay a { + font-weight: bold; + padding: 0.8rem; + text-decoration: none; + font-size: 3.6rem; + color: white; + display: block; /* Display block instead of inline */ + transition: 0.3s; /* Transition effects on hover (color) */ +} + +/* When you mouse over the navigation links, change their color */ +.nav-overlay a:hover, +.nav-overlay a:focus { + color: #504545; +} + +/* Position the close button (top right corner) */ +img.menu-button-close { + position: absolute; + top: 0.8%; + right: 5.3%; + font-size: 6rem; + z-index: 2; + + @media @mobile { + right: 7.5%; + } +} diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000000..af944401f7 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 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; +} +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..80ffee7a78 --- /dev/null +++ b/less/services.less @@ -0,0 +1,118 @@ +header.jumbo-header { + position: relative; + text-align: left; + + img.jumbotron { + width: 100%; + } + + h1.bottom-left { + bottom: 10%; + left: 5%; + } + + h1.jumbo-title { + font-weight: bold; + font-size: 6.4rem; + line-height: 6.4rem; + color: #ffffff; + position: absolute; + + @media @mobile { + font-size: 4.4rem; + line-height: 4.4rem; + } + } +} + +div.ptag-container { + display: flex; + justify-content: center; + .margin-top-bottom; + + p.services-ptag { + font-size: 1.6rem; + padding-left: 5%; + padding-right: 5%; + } +} + +div.tabs { + .flex; + flex-direction: row; + justify-content: space-evenly; + .margin-top-bottom; + + @media @mobile { + flex-direction: column; + align-content: center; + align-items: center; + } + + div.tab { + font-weight: bold; + border: solid 1px #222222; + font-size: 2rem; + width: 20rem; + height: 6rem; + text-align: center; + padding-top: 2%; + + + @media @mobile { + width: 90%; + height: 5rem; + margin-top: 3%; + margin-bottom: 3%; + padding-top: 4%; + } + } + + .tab:hover, + .tab:focus { + background-color: #5da1b7; + } + + div.active-tab { + background-color: #5da1b7; + color: white; + } +} + +div.content-container { + div.content { + display: none; + + div.content-words { + h2.content-title { + font-size: 2.8rem; + font-weight: bold; + margin-bottom: 5%; + } + + p.content-ptag { + font-size: 1.6rem; + width: 80%; + + @media @mobile { + width: 100%; + margin-bottom: 5%; + } + } + } + } + + div.active-content { + display: flex; + flex-direction: row; + padding-left: 5%; + padding-right: 5%; + margin-bottom: 5%; + + @media @mobile { + flex-direction: column; + align-content: center; + align-items: center; + } + } +} diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..5696e9f3e9 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,23 @@ + +.flex { + display: flex; + } + + +// Media Query +@mobile: (max-width: 500px); + + +//Img switching desktop => mobile +img.img-desktop { + @media @mobile { + display: none; + } +} + +img.img-mobile { + display: none; + @media @mobile { + display: block; + } +} \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..6311f36541 100644 --- a/services.html +++ b/services.html @@ -1,38 +1,227 @@ - - - Services - - - - + + + Services + + + + + - + +
+
+

S&J

+
+ +
-

Services

+ menu-button-expand + menu-button-close +
- +
+ Jumbotron + Jumbotron +

Services

+
- +
+
+ Pre-Construction +
+
Construction
+
Design Build
+
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. + +
+
+
+

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

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

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 + sustainability +
- - - \ No newline at end of file + +
+
+ + + +