diff --git a/README.md b/README.md index 17aecb1714..55d82fa528 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# User Interface Project Week +# User Interface Project Week - scott - grobe 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/css/index.css b/css/index.css index e6b2b589c1..61d864390a 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,665 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ’’; + content: none; +} +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Your Code Goes Here */ +.menu-button:hover { + cursor: pointer; +} +.menu-button { + padding-top: 2px; + width: 25px; + height: 18px; +} +@media (max-width: 500px) { + .menu-button { + padding-top: 1%; + height: 15px; + } +} +.menu { + display: none; + position: fixed; + top: 0; + left: 0; + padding: 15px 0 0 0; + opacity: 0.9; + width: 100%; + height: 100vh; + /* This give the height 100% of the screen or, '100% of View Height' */ + background-color: #99a4af; + border: 1px solid #ffffff; + border-left: none; + border-bottom: none; + z-index: 5; + /* This set the layer level of the element, it has precendence over initial level of 1*/ +} +.menu ul li { + list-style-type: none; + font-size: 32px; + font-weight: bold; + padding: 15px 0; + text-align: center; + margin-top: 2%; +} +.menu ul li:hover { + cursor: pointer; +} +.menu ul li:visited { + color: grey; +} +.menu ul { + padding: 125px 0 0 0; +} +@media (max-width: 500px) { + .menu ul { + padding: 100px 0 0 0; + } +} +@media (max-width: 500px) { + .menu li a { + font-size: 5rem; + } +} +.menu--open { + display: block; +} +.hide { + display: none; +} +.menu-header { + position: fixed; + z-index: 3; + background-color: #99a4af; + display: flex; + justify-content: center; + width: 100%; +} +.menu-header h1 { + font-weight: normal; + font-size: 2rem; + line-height: 24px; + color: #ffffff; + width: 75%; +} +.hamburger { + padding-top: 2px; + padding-right: 15px; + width: 18px; + height: 18px; +} +@media (max-width: 500px) { + .hamburger { + padding-top: 1%; + height: 15px; + } +} +html { + font-family: "Roboto", Arial, sans-serif; + font-size: 62.5%; + max-width: 100%; + box-sizing: border-box; +} +.container { + width: 65%; + margin: 10px auto; + border: 1px solid black; + padding: 1px; +} +@media (max-width: 500px) { + .container { + width: 98%; + max-width: 100%; + padding: 1px; + } +} +.container .header { + position: fixed; + z-index: 3; + background-color: #99a4af; + display: flex; + justify-content: space-between; + opacity: 0.9; + padding: 1% 10% 1% 10%; + width: 45%; +} +@media (max-width: 500px) { + .container .header { + padding: 3% 8% 3% 8%; + width: 82%; + } +} +.container .header h1 { + font-weight: normal; + font-size: 2rem; + line-height: 24px; + color: #ffffff; + width: 100%; +} +@media (max-width: 500px) { + .container .header h1 { + font-size: 2.5rem; + } +} +.header-img { + position: relative; + max-width: 100%; +} +.header-img .jumbotron-img { + margin: 0 auto; + width: 100%; +} +@media (max-width: 500px) { + .header-img .jumbotron-img { + display: none; + } +} +.header-img .mobile-jumbotron-img { + margin: 0 auto; + width: 100%; + display: none; +} +@media (max-width: 500px) { + .header-img .mobile-jumbotron-img { + display: flex; + } +} +.header-img .header-text { + color: #ffffff; + font-weight: bold; + position: absolute; + line-height: calc(8px + 4vw); + top: 50%; + left: 10%; + max-width: 100%; + font-size: 4vw; +} +@media (max-width: 500px) { + .header-img .header-text { + line-height: calc(25px + 4vw); + font-size: 9vw; + top: 55%; + } +} +.top-content { + display: flex; +} +@media (max-width: 500px) { + .top-content { + flex-direction: column-reverse; + align-items: center; + } +} +.top-content h2 { + font-size: 1.5rem; + font-weight: bold; + text-align: left; + margin: 40px 10px 10px 0; +} +@media (max-width: 500px) { + .top-content h2 { + text-align: left; + font-size: 2.3rem; + margin: 0 0 10px 0; + padding: 0; + } +} +.top-content p { + line-height: 1.3; + font-size: 1.2rem; +} +@media (max-width: 500px) { + .top-content p { + font-size: 1.7rem; + line-height: 1.5; + } +} +.top-content button { + border: 1px solid black; + padding: 7px 17px 7px 17px; + margin: 10px 0 10px 0; +} +@media (max-width: 500px) { + .top-content button { + font-size: 1.6rem; + margin: 20px 0 20px 0; + padding: 12px 17px 12px 17px; + width: 100%; + } +} +.top-content .article-top-img { + width: 100%; +} +@media (max-width: 500px) { + .top-content .article-top-img { + display: none; + } +} +.top-content .article-top-img-mobile { + width: 100%; + display: none; +} +@media (max-width: 500px) { + .top-content .article-top-img-mobile { + display: flex; + } +} +.top-content .article-second-img { + width: 100%; +} +@media (max-width: 500px) { + .top-content .article-second-img { + display: none; + } +} +.top-content .article-second-img-mobile { + width: 100%; + display: none; +} +@media (max-width: 500px) { + .top-content .article-second-img-mobile { + display: flex; + } +} +.top-content .article-top { + margin: 20px; + width: 50%; +} +@media (max-width: 500px) { + .top-content .article-top { + width: 100%; + margin: 20px 0 0 0; + } +} +.content-container { + margin: 0 auto; + width: 90%; +} +@media (max-width: 500px) { + .second-article { + flex-direction: column; + } +} +.bottom-content { + margin: 20px; +} +@media (max-width: 500px) { + .bottom-content { + display: none; + } +} +.bottom-content h2 { + font-size: 1.5rem; + font-weight: bold; + text-align: left; + margin: 40px 10px 30px 0; +} +.bottom-content p { + line-height: 1.3; + font-size: 1.2rem; + text-align: left; + margin: 20px 125px 20px 125px; +} +.bottom-content .float-padding { + padding-top: 60px; +} +.bottom-content .bottom-content-villas { + position: relative; + width: 100%; + margin-bottom: -35px; +} +.bottom-content .bottom-content-outskirts { + position: relative; + width: 100%; + margin-bottom: -35px; +} +.bottom-content .bottom-content-blocks { + position: relative; + width: 100%; + margin-bottom: -35px; +} +.bottom-content .bottom-article { + margin: 0px 0 50px 0; +} +.villas-text { + position: relative; + border: 1px solid #ffffff; + background: grey; + color: black; + font-size: 2rem; + width: 35%; + padding: 20px 10px 20px 10px; + text-align: center; + float: right; +} +.outskirts-text { + position: relative; + border: 1px solid hsl(0, 0%, 100%); + background: grey; + color: black; + font-size: 2rem; + width: 35%; + padding: 20px 10px 20px 10px; + text-align: center; + left: 0%; +} +.bottom-content-mobile { + display: none; + width: 100%; +} +@media (max-width: 500px) { + .bottom-content-mobile { + display: block; + } +} +.bottom-content-mobile h2 { + font-size: 2.3rem; + font-weight: bold; + text-align: left; + margin: 40px 0 20px 20px; +} +.bottom-content-mobile p { + line-height: 1.3; + font-size: 1.8rem; + text-align: left; + margin: 20px 20px 20px 20px; +} +.bottom-content-mobile .bottom-content-villas-mobile { + position: relative; + width: 100%; + margin-bottom: -4%; +} +.bottom-content-mobile .bottom-content-outskirts-mobile { + position: relative; + width: 100%; + margin-bottom: -4%; +} +.bottom-content-mobile .bottom-content-blocks-mobile { + position: relative; + width: 100%; + margin-bottom: -4%; +} +.villas-text-mobile { + position: relative; + background: lightgrey; + color: black; + font-size: 2rem; + width: 85%; + padding: 20px 10px 20px 10px; + text-align: center; + margin: 0 auto; + letter-spacing: 0.9rem; +} +.footer { + background: darkgrey; + color: lightgrey; + width: 100%; +} +.footer .footer-copyright { + text-align: center; + padding: 10px; + font-size: 0.7rem; +} +@media (max-width: 500px) { + .footer .footer-copyright { + font-size: 1.4rem; + margin: 0 0 0 20px; + padding: 0 0 20px 0; + text-align: left; + } +} +.footer .footer-content { + display: flex; + justify-content: space-around; +} +@media (max-width: 500px) { + .footer .footer-content { + flex-direction: column; + } +} +.footer .footer-content h3 { + color: white; + font-size: 1.4rem; + margin: 0 0 5px 0; +} +@media (max-width: 500px) { + .footer .footer-content h3 { + font-size: 2.3rem; + } +} +.footer .footer-content p { + font-size: 0.1rem; + line-height: 1.8; +} +@media (max-width: 500px) { + .footer .footer-content p { + font-size: 1.4rem; + } +} +.footer .footer-content .footer-item { + margin: 20px; +} +.email-input { + color: lightgrey; + border-radius: 4px; + margin: 10px 0 5px 0; + padding: 5px 2px 5px 2px; + width: 100%; + outline: none; +} +@media (max-width: 500px) { + .email-input { + padding: 15px 5px 15px 5px; + border-radius: 7px; + } +} +input { + border: 1px solid lightgrey; +} +@media (max-width: 500px) { + input { + font-size: 2rem; + } +} +::placeholder { + color: lightgrey; +} +.tab-navigator .tab-links { + margin-top: 20px; + display: flex; + justify-content: space-between; +} +.tab-navigator .tab-links .link { + padding: 5px 8px 5px 8px; + width: 8rem; + background: #5E9FB9; + border: 1px solid black; + cursor: pointer; + text-align: center; +} +.tab-navigator .tab-links .link-selected { + padding: 5px 8px 5px 8px; + width: 8rem; + background: white; + border: 1px solid black; + color: #5E9FB9; + cursor: pointer; + text-align: center; +} +.tab-navigator .tab-content { + display: flex; + width: 100%; + margin-top: 20px; +} +.tab-navigator .tab-content .content { + padding: 20px; + display: none; +} +.tab-navigator .tab-content .content h3 { + font-size: 1.6rem; + font-weight: bold; +} +.tab-navigator .tab-content .change { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: auto; +} +.tab-navigator .tab-content .inner { + display: flex; + flex-direction: column; + align-content: center; + width: 50%; + height: auto; + margin: 0 25px 0 0; +} +.tab-navigator .tab-content .inner-img { + width: 42%; +} +.tab-navigator .tab-content .inner-img img { + width: 100%; + height: auto; +} +a { + text-decoration: none; + color: black; +} +a:hover { + color: white; +} +.services-content { + margin: 20px 0 10px 0; + line-height: 1.5; +} diff --git a/index.html b/index.html index 8a84a17304..2b29c87b53 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,306 @@ - - - Home - - - - + + + Home + + + + + + - + +
+
+

S&J

+ menu button +
-

You got this! Good luck.

+
+ building + building +

+ Integrity,
Excellence,
+ Progress. +

+
- + + - - - - - - \ No newline at end of file + + + diff --git a/js/index.js b/js/index.js index bb3d341cf0..432f1c4482 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,70 @@ -// JS goes here \ No newline at end of file +// JS goes here + + +// Step 3: Create TabLink class definition and pass in the link reference to the DOM element +class TabLink { + // constructor + constructor(element) { + // Step 4: Match the data-set values between our link and the content + // data attribute from link + this.element = element; + this.data = this.element.dataset.tab; + // this.itemElement = document.querySelector(`.tabs-item[data-tab = '${this.data}']`); + this.tabContent = document.querySelector(`.content[data-tab='${this.data}']`); + + // Step 5: Create a new content object from our matched data-set content tab + this.tabContent = new Content(this.tabContent); + + // arrow function using implicit (automatic) value of where itw as called. We call this "lexical scope." + + // Step 8: Add event Listener for our link and pass in the implicit binding of the 'this' keyword using an arrow function + this.element.addEventListener('click', () => this.select() ); + } + // methods + // Step 10: Have the tabContent toggle off and on based on our Content class's method + select() { + const link = document.querySelectorAll('.link'); + console.log(link); + + link.forEach(link => link.classList.remove('link-selected')); + this.element.classList.add('link-selected'); + + this.tabContent.toggleContent(); + } + } + + + // Step 6: Create Content class definition and pass in the tabContent reference to the DOM element + class Content { + constructor(tabElement) { + //console.log(tabElement); + // Step 7: Properly set up the 'this' keyword for the Content class using our tabElement + this.tabElement = tabElement; + } + // methods + // Step 9: Create a method that can be called to toggle our tabElement off and on + toggleContent() { + const items = document.querySelectorAll('.content') + + items.forEach(item => item.classList.remove('change')); + + this.tabElement.classList.add('change'); + + + } + } + + + + + + // Step 1: Get all the elements from the DOM into a NodeList + const links = document.querySelectorAll('.link'); + // Step 2: Iterate over each element from our NodeList and create a new class called TabLink. + links.forEach( link => new TabLink(link)); + // let links = document.getElementsByClassName('link'); + // links = Array.from(links).forEach( link => console.log(link)); + + + // Psuedo Example for data-* + // DOM elements -> NodeList -> TabLink Class -> Finds the custom data-tab -> Uses the custom data-tab to identify the correct tabContent \ No newline at end of file diff --git a/js/menu.js b/js/menu.js new file mode 100644 index 0000000000..08efdaa51d --- /dev/null +++ b/js/menu.js @@ -0,0 +1,35 @@ +const toggleMenu = () => { + // 4. Toggle the "menu--open" class on your menu refence. + menu.classList.toggle('menu--open'); + headerHide.classList.remove('header'); + headerHide.classList.add('hide'); + }; + + const toggleOff = () => { + menu.classList.remove('menu--open'); + headerHide.classList.add('header'); + + }; + + + // Start Here: 1. Create a reference to the ".menu" class + const menu = document.querySelector('.menu'); + console.log(menu, 'menu') + + const headerHide = document.querySelector('.header'); + console.log(headerHide, 'hide') + + + + // 2. create a reference to the ".menu-button" class + const menuButton = document.querySelector('.menu-button'); + console.log(menuButton, 'menuButton') + + const menuOff = document.querySelector('.menu-off') + console.log(menuOff, 'menuOFF') + + // 3. Using your menuButton reference, add a click handler that calls toggleMenu + menuButton.addEventListener('click', toggleMenu); + menuOff.addEventListener('click', toggleOff) + + diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..160326bc33 100644 --- a/less/index.less +++ b/less/index.less @@ -6,55 +6,623 @@ 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 */ + +@import "./mixins.less"; +@import "./menu.less"; + +html { + font-family: "Roboto", Arial, sans-serif; + font-size: 62.5%; + max-width: 100%; + box-sizing: border-box; +} + +.container { + width: 65%; + margin: 10px auto; + border: 1px solid black; + padding: 1px; + + @media @phone { + width: 98%; + max-width: 100%; + padding: 1px; + } + + + + + + .header { + position: fixed; + z-index: 3; + background-color: #99a4af; + display: flex; + justify-content: space-between; + opacity: .9; + padding: 1% 10% 1% 10%; + width: 45%; + + + + @media @phone { + padding: 3% 8% 3% 8%; + width: 82% + } + + h1 { + font-weight: normal; + font-size: 2rem; + line-height: 24px; + color: #ffffff; + width: 100%; + + @media @phone { + font-size: 2.5rem; + } + } + } +} + +.header-img { + position: relative; + max-width: 100%; + + .jumbotron-img { + margin: 0 auto; + width: 100%; + @media @phone { + display: none; + } + } + + .mobile-jumbotron-img { + margin: 0 auto; + width: 100%; + display: none; + @media @phone { + display: flex; + } + } + + .header-text { + color: #ffffff; + font-weight: bold; + position: absolute; + line-height: calc(8px + 4vw); + top: 50%; + left: 10%; + max-width: 100%; + font-size: 4vw; + + @media @phone { + line-height: calc(25px + 4vw); + font-size: 9vw; + top: 55%; + } + } +} + +.top-content { + display: flex; + + @media @phone { + flex-direction: column-reverse; + align-items: center; + } + + h2 { + font-size: 1.5rem; + font-weight: bold; + text-align: left; + margin: 40px 10px 10px 0; + + @media @phone { + text-align: left; + font-size: 2.3rem; + margin: 0 0 10px 0; + padding: 0; + } + } + + p { + line-height: 1.3; + font-size: 1.2rem; + @media @phone { + font-size: 1.7rem; + line-height: 1.5; + } + } + + button { + border: 1px solid black; + padding: 7px 17px 7px 17px; + margin: 10px 0 10px 0; + + @media @phone { + font-size: 1.6rem; + margin: 20px 0 20px 0; + padding: 12px 17px 12px 17px; + width: 100%; + } + } + + .article-top-img { + width: 100%; + @media @phone { + display: none; + } + } + + .article-top-img-mobile { + width: 100%; + display: none; + @media @phone { + display: flex; + } + } + + .article-second-img { + width: 100%; + + @media @phone { + display: none; + } + } + + .article-second-img-mobile { + width: 100%; + display: none; + @media @phone { + display: flex; + } + } + + .article-top { + margin: 20px; + width: 50%; + @media @phone { + width: 100%; + margin: 20px 0 0 0; + } + } +} + +.content-container { + margin: 0 auto; + width: 90%; +} + +.second-article { + @media @phone { + flex-direction: column; + } +} + +.bottom-content { + margin: 20px; + + @media @phone { + display: none; + } + + h2 { + font-size: 1.5rem; + font-weight: bold; + text-align: left; + margin: 40px 10px 30px 0; + } + + p { + line-height: 1.3; + font-size: 1.2rem; + text-align: left; + margin: 20px 125px 20px 125px; + } + .float-padding { + padding-top: 60px; + } + + .bottom-content-villas { + position: relative; + width: 100%; + margin-bottom: -35px; + } + + .bottom-content-outskirts { + position: relative; + width: 100%; + margin-bottom: -35px; + } + + .bottom-content-blocks { + position: relative; + width: 100%; + margin-bottom: -35px; + } + + .bottom-article { + margin: 0px 0 50px 0; + } +} + +.villas-text { + position: relative; + border: 1px solid #ffffff; + background: grey; + color: black; + font-size: 2rem; + width: 35%; + padding: 20px 10px 20px 10px; + text-align: center; + float: right; +} + +.outskirts-text { + position: relative; + border: 1px solid hsl(0, 0%, 100%); + background: grey; + color: black; + font-size: 2rem; + width: 35%; + padding: 20px 10px 20px 10px; + text-align: center; + left: 0%; +} + +//bottom-content-mobile styles + +.bottom-content-mobile { + display: none; + width: 100%; + + @media @phone { + display: block; + } + + h2 { + font-size: 2.3rem; + font-weight: bold; + text-align: left; + margin: 40px 0 20px 20px; + } + + p { + line-height: 1.3; + font-size: 1.8rem; + text-align: left; + margin: 20px 20px 20px 20px; + } + + .bottom-content-villas-mobile { + position: relative; + width: 100%; + margin-bottom: -4%; + } + + .bottom-content-outskirts-mobile { + position: relative; + width: 100%; + margin-bottom: -4%; + } + + .bottom-content-blocks-mobile { + position: relative; + width: 100%; + margin-bottom: -4%; + } +} + +.villas-text-mobile { + position: relative; + background: lightgrey; + color: black; + font-size: 2rem; + width: 85%; + padding: 20px 10px 20px 10px; + text-align: center; + margin: 0 auto; + letter-spacing: 0.9rem; +} + +.footer { + background: darkgrey; + color: lightgrey; + width: 100%; + + .footer-copyright { + text-align: center; + padding: 10px; + font-size: 0.7rem; + + @media @phone { + font-size: 1.4rem; + margin: 0 0 0 20px; + padding: 0 0 20px 0; + text-align: left; + } + } + + .footer-content { + display: flex; + justify-content: space-around; + + @media @phone { + flex-direction: column; + } + + h3 { + color: white; + font-size: 1.4rem; + margin: 0 0 5px 0; + + @media @phone { + font-size: 2.3rem; + } + } + + p { + font-size: 0.1rem; + line-height: 1.8; + + @media @phone { + font-size: 1.4rem; + } + } + + .footer-item { + margin: 20px; + } + } +} + +.email-input { + color: lightgrey; + border-radius: 4px; + margin: 10px 0 5px 0; + padding: 5px 2px 5px 2px; + width: 100%; + outline: none; + + @media @phone { + padding: 15px 5px 15px 5px; + border-radius: 7px; + } +} + +input { + border: 1px solid lightgrey; + + @media @phone { + font-size: 2rem; + } +} + +::placeholder { + color: lightgrey; +} + +//tabs +.tab-navigator { + .tab-links { + margin-top: 20px; + display: flex; + justify-content: space-between; + + .link { + padding: 5px 8px 5px 8px; + width: 8rem; + background: #5E9FB9; + border: 1px solid black; + cursor: pointer; + text-align: center; + } + + .link-selected { + padding: 5px 8px 5px 8px; + width: 8rem; + background: white; + border: 1px solid black; + color: #5E9FB9; + cursor: pointer; + text-align: center; + + } + + } + .tab-content { + display: flex; + width: 100%; + margin-top: 20px; + + .content { + padding: 20px; + display: none; + } + + .content h3 { + font-size: 1.6rem; + font-weight: bold; + } + + .change { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: auto; + } + .inner { + display: flex; + flex-direction: column; + align-content: center; + width: 50%; + height: auto; + margin: 0 25px 0 0; + + // p { + // width: 50%; + // } + + } + .inner-img { + width: 42%; + } + .inner-img img { + width: 100%; + height: auto; + } + + } +} // tab navigator + + + +///links + a { + text-decoration: none; + color: black; + } + +a:hover { + color: white; +} + + +///services +.services-content { + margin: 20px 0 10px 0; + line-height: 1.5; } -/* Your Code Goes Here */ \ No newline at end of file diff --git a/less/menu.less b/less/menu.less new file mode 100644 index 0000000000..2902fe3f62 --- /dev/null +++ b/less/menu.less @@ -0,0 +1,104 @@ +.menu-button:hover { + cursor: pointer; +} + +.menu-button { + padding-top: 2px; + width: 25px; + height: 18px; + @media @phone { + padding-top: 1%; + height: 15px; + } +} + + + +.menu { + display: none; + position: fixed; + top: 0; + left: 0; + padding: 15px 0 0 0; + opacity: .9; + width: 100%; + height: 100vh; /* This give the height 100% of the screen or, '100% of View Height' */ + background-color: #99a4af; + border: 1px solid #ffffff; + border-left: none; + border-bottom: none; + z-index: 5; /* This set the layer level of the element, it has precendence over initial level of 1*/ + +} + +.menu ul li { + list-style-type: none; + font-size: 32px; + font-weight: bold; + padding: 15px 0; + text-align: center; + margin-top: 2%; + + +} + +.menu ul li:hover { + cursor: pointer; +} + +.menu ul li:visited { + color: grey; +} + + +.menu ul { + padding: 125px 0 0 0; + + @media @phone { + padding: 100px 0 0 0; + } +} + +.menu li a { + @media @phone { + font-size: 5rem; + } +} + +.menu--open { + display: block; +} + +.hide { + display: none; + } + +.menu-header { + + position: fixed; + z-index: 3; + background-color: #99a4af; + display: flex; + justify-content: center;; + width: 100%; + + h1 { + font-weight: normal; + font-size: 2rem; + line-height: 24px; + color: #ffffff; + width: 75%; + } + +} + +.hamburger { + padding-top: 2px; + padding-right: 15px; + width: 18px; + height: 18px; + @media @phone { + padding-top: 1%; + height: 15px; + } + } diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..db79780bbd --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,2 @@ +// Mobile var +@phone: (max-width: 500px); \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..477f0edc43 100644 --- a/services.html +++ b/services.html @@ -1,26 +1,249 @@ - - - Services - - - - + + + Services + + + + + + - + +
+
+

S&J

+ menu button +
-

Services

+
+ building + building +

Services

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