diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..23fd35f0e0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/contact.html b/contact.html index 868844fe14..93970ae473 100644 --- a/contact.html +++ b/contact.html @@ -1,5 +1,6 @@ + Contact Us @@ -10,11 +11,119 @@ - + + + + + +
+ + + + + +
+ Home + Services + Contact +
+ +
+ + + + + -

Contact

+ - + + + + + + + - - -

You got this! Good luck.

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

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..3b34076417 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,74 @@ -// JS goes here \ No newline at end of file +// JS goes here +class TabLink { + constructor(element) { + this.element = element; + + // Get the custom data attribute on teh Link + this.data = this.element.dataset.tab; + // Using the custom data attribute ge tthe associated Item element + this.item = document.querySelector(`.tabs-item[data-tab="${this.data}"]`); + // Using the Item element, create a new instance of the TabItem class + this.tabItem = new TabItem(this.item); + + this.element.addEventListener('click', () => { + // Call the select method you define below + this.select(); + }); + }; + + select() { + // Get all of the elements with the tabs-link class + const links = document.querySelectorAll('.tabs-link'); + + // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links + links.forEach(link => { + link.classList.remove('tabs-link-selected') + }); + + // Add a class named "tabs-link-selected" to this link + this.element.classList.add('tabs-link-selected'); + + // Call the select method on the item associated with this link + this.tabItem.select(); + } +} + +class TabItem { + constructor(element) { + this.element = element; + } + + select() { + // Select all ".tabs-item" elements from the DOM + const items = document.querySelectorAll('.tabs-item'); + // Remove the class "tabs-item-selected" from each element + items.forEach(item => { + item.classList.remove('tabs-item-selected'); + }) + // Add a class named "tabs-item-selected" to this element + this.element.classList.add('tabs-item-selected'); + } +} + +// ======================================================== OVERLAY START =========================================================================== +const openMenu = document.querySelector(".open"); +const closeMenu = document.querySelector(".close"); +/* Open */ +function openNav() { + document.getElementById("myNav").style.height = "100%"; + openMenu.classList.toggle("close-menu"); + closeMenu.classList.toggle("close-menu"); +} + +/* Close */ +function closeNav() { + document.getElementById("myNav").style.height = "0%"; + openMenu.classList.toggle("close-menu"); + closeMenu.classList.toggle("close-menu"); +} + +// ======================================================= OVERLAY END =============================================================================== + + + +let links = document.querySelectorAll('.tabs-link').forEach(link => new TabLink(link)); \ No newline at end of file diff --git a/less/contact.less b/less/contact.less new file mode 100644 index 0000000000..a6661c0a1d --- /dev/null +++ b/less/contact.less @@ -0,0 +1,82 @@ +.main-img .contact { + width: 100%; + position: relative; + top: 50px; + z-index: -1; +} + +// .main-content { +// border: 2px solid greenyellow; +// } + +.middle-content { + display: flex; + justify-content: space-between; + // border: 2px solid hotpink; + margin-top: 40px; +} + +.left-side { + // border: 2px solid red; + width: 40%; + margin-left: 50px; + margin-top: 50px; +} + +.contact-email { + font-size: 16px; +} + +.left-side input { + height: 25px; + width: 100%; + padding: 15px 0 15px 10px; + font-size: 15px; +} + +.buildings, .overview { + padding-bottom: 5px; +} + +.no-share { + color: rgb(165, 164, 164); +} + +.overview { + padding-top: 35px; +} + +.left-side .radio { + // margin: 0; + height: 10px; + width: 10px; + // border: 20px solid greenyellow; +} + +.left-side textarea { + margin-bottom: 25px; +} + +.left-side .submit { + // border: 1px solid black; + font-size: 12px; + width: 33%; + padding-bottom: 25px; + margin: 20px 0 40px 0; + background: #fff; +} + +.right-side { + // border: 2px solid blue; + width: 40%; + margin-top: 50px; +} + +.right-side h3 { + font-size: 24px; +} + +.right-side p { + line-height: 30px; + padding-top: 5px; +} \ No newline at end of file diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000000..4bd0334b0c --- /dev/null +++ b/less/footer.less @@ -0,0 +1,78 @@ +// ### Footer Headings +// - Font Weight: Regular +// - Font Size: 20px +// - Line Height: 24px +// - Color: #FFFFFF + +// ### Footer Text +// - Font Weight: Regular +// - Font Size: 14px +// - Line Height: 26px +// - Color: #FFFFFF + +// ## Footer +// Background: #828282 + +// ===================== Start Redo project starting 12/26/2018 ========================= +.footer { + background-color: @footer-background; + width: 100%; + display: flex; + flex-wrap: wrap; + font-weight: regular; + font-size: 14px; + line-height: 26px; + color: #FFF; +} + +.footer h3 { + color: #fff; + font-size: 20px; + line-height: 24px; + font-weight: regular; +} + +.copyright { + margin: 0 auto; + display: flex; +} + +.size { + padding: 45px 25px 0; +} + +.footer h3 { + font-weight: bold; +} + +.email { + width: 33%; +} + +.email input { + padding: 5px 0; + width: 95%; + font-size: 16px; + border-radius: 5px; +} + +.california { + width: 22%; +} + +.new-york { + width: 22%; +} + +.florida { + width: 22%; +} + +.copyright { + font-size: 12px; +} + +.mobile { + display: none; +} +// ====================== End Redo project starting 12/26/2018 ========================== diff --git a/less/home-page.less b/less/home-page.less new file mode 100644 index 0000000000..0470df26e9 --- /dev/null +++ b/less/home-page.less @@ -0,0 +1,277 @@ +// ===================== Start Redo project starting 12/26/2018 ========================= +// ### Home Page +// - Recent Projects Gray Square: #D8D8D8 +// - Button borders: #222222 + +// ### Jumbotron Headers +// - Font Weight: Bold +// - Font Size: 64px +// - Line Height: 75px +// - Color: #FFFFFF + + + +.main-content { + display: flex; + flex-direction: column; + position: relative; + align-items: center; +} + +.main-header { + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #fff; + position: absolute; + top: 200px; + left: 50px; +} + +.main-img img { + width: 100%; + position: relative; + top: -50px; + z-index: -1; +} + +.smith-jones { + display: flex; + // border: 2px solid red; + padding-bottom: 75px; + width: 85%; +} + + .text { + // border: 2px solid black; + padding: 50px 40px; + font-size: 16px; + line-height: 24px; +} + + h2 { + padding-bottom: 20px; +} + + button { + border: 1px solid #222; + background-color: #fff; + height: 35px; + width: 100px; +} + + p { + padding-bottom: 25px; +} + + .img { + display: flex; +} + +.future-designs { + display: flex; + padding-bottom: 75px; + // border: 2px solid greenyellow; + width: 85%; +} + +.the-villas p, .the-outskirts p, .the-blocks p { + width: 50%; + margin: 0 auto; + font-size: 16px; + line-height: 24px; + padding: 75px 0; +} + +.the-villas h2 { + padding-bottom: 50px; + padding-left: 75px; +} + +.recent-projects, .the-villas, .the-outskirts, .the-blocks { + position: relative; + // border: 2px solid greenyellow; + display: flex; + flex-wrap: wrap; +} + +// .the-villas img, .the-outskirts img, .the-blocks img { +// margin: 0 auto; +// border: 2px solid hotpink; +// width: 85%; +// } + + + +.rp-img { + display: flex; + position: relative; + display: flex; + margin: 0 auto; + width: 85%; +} + +.rp-img img { + width: 100%; +} + + +.box { + display: flex; + justify-content: center; + align-items: center; + background-color: #d8d8d8; + border: 1px solid #fff; + color: #222; + height: 100px; + width: 320px; + // font-weight: bold; + letter-spacing: 5px; + font-size: 24px; +} + +.villas { + position: absolute; + right: 2px; + top: 175px; +} + +.outskirts { + position: absolute; + top: 175px; +} + +.blocks { + position: absolute; + top: 175px; +} + + + + +// ====================== End Redo project starting 12/26/2018 ========================== + + + +.mobile { + display: none; +} + +// ================================================ MOBILE ================================================================== + + + +@media(max-width: 500px) { + .container { + // background-color: hotpink; + // border: 2px solid black; + flex-direction: column; + } + + .nav-container { + width: 482px; + } + + + .main-header { + font-size: 52px; + line-height: 60px; + margin: -75px 0 0 -20px; + } + + .main-img img { + display: none; + } + + .main-img .mobile { + display: block; + width: 482px; + // border: 2px solid greenyellow; + position: relative; + top: -50px; + left: 0; + } + + .smith-jones { + flex-direction: column-reverse; + } + + .future-designs { + flex-direction: column; + } + + button { + width: 100%; + } + + .img img { + display: none; + } + + .rp-img img { + display: none; + } + + + .rp-img .mobile, .img .mobile { + display: block; + width: 100%; + } + + .rp-img .mobile { + margin-bottom: 35px; + } + + .villas { + right: 40px; + top: 185px; + } + + .blocks, .outskirts { + left: 45px; + top: 185px; + } + + .footer { + flex-direction: column; + } + + .footer .email { + width: 100%; + } + + .footer .email h3 { + font-size: 30px; + line-height: 35px; + } + + .footer input { + width: 100%; + height: 40px; + border-radius: 5px; + font-size: 20px; + margin: 15px 0; + padding: 15px 10px; + } + + .footer p { + font-size: 18px; + } + + .footer .new-york, .footer .florida, .footer .california { + width: 100%; + line-height: 30px; + } + + .footer .new-york h3, .footer .florida h3, .footer .california h3 { + font-size: 25px; + padding-bottom: 10px; + } + + .footer .copyright { + padding-top: 45px; + margin-left: 25px; + } + + +} diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..ad15b5f297 100644 --- a/less/index.less +++ b/less/index.less @@ -6,55 +6,184 @@ 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 */ + +// ===================== Start Redo project starting 12/26/2018 ========================= + +// ### General Text +// - Font Weight: Regular +// - Font Size: 16px +// - Line Height: 24px + + + +// ### Sub Headers +// - Font Weight: Bold +// - Font Size: 28px +// - Color: #222222 + +* { + box-sizing: border-box; +} + +.container { + color: #222; + font-family: Roboto, Arial, sans-serif; + margin: 0 auto; + max-width: 1024px; + font-weight: regular; + font-size: 16px; + line-height: 24px; + // border: 2px solid red; +} + +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + font-size: 28px; + color: #222; +} + + + +// ====================== End Redo project starting 12/26/2018 ========================== + +@import "/navigation.less"; +@import "/variables.less"; +@import "/home-page.less"; +@import "/services-page.less"; +@import "/contact.less"; +@import "/footer.less"; diff --git a/less/navigation.less b/less/navigation.less new file mode 100644 index 0000000000..917d624e28 --- /dev/null +++ b/less/navigation.less @@ -0,0 +1,126 @@ +// ### Navigation Logo +// - Font Weight: Bold +// - Font Size: 24px +// - Color: #FFFFFF + +// ### Navigation Text (Expanded) +// - Font Weight: Bold +// - Font Size: 48px +// - Line Height: 85px +// - Color: #FFFFFF +// - Hover Color: #222222 + +// ===================== Start Redo project starting 12/26/2018 ========================= +.nav-container { + // border: 2px solid black; + display: flex; + justify-content: space-between; + background-color: rgb(195, 196, 200); + width: 1024px; + position: fixed; + z-index: 10; +} + +.nav { + display: flex; + justify-content: space-between; + // border: 2px solid hotpink; + height: 50px; + align-items: center; + margin: 0 75px; + width: 100%; + z-index: 1; +} + +.name h2 { + font-weight: bold; + font-size: 24px; + color: #fff; + padding: 0; +} + +.open-hamburger { + display: flex; +} + +.open-menu { + display: flex; +} + +.close-menu { + display: none; + border: 2px solid hotpink; +} + +// ===================================================== OVERLAY START ========================================================================= + +/* The Overlay (background) */ +.overlay { + /* Height & width depends on how you want to reveal the overlay (see JS below) */ + height: 0; + width: 100%; + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + background-color: rgb(0,0,0); /* Black fallback color */ + background-color: rgb(195, 196, 200); + // background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ + overflow-x: hidden; /* Disable horizontal scroll */ + transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ + } + + /* Position the content inside the overlay */ + .overlay-content { + position: relative; + top: 25%; /* 25% from the top */ + width: 100%; /* 100% width */ + text-align: center; /* Centered text/links */ + margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ + } + // ### Navigation Text (Expanded) +// - Font Weight: Bold +// - Font Size: 48px +// - Line Height: 85px +// - Color: #FFFFFF +// - Hover Color: #222222 + /* The navigation links inside the overlay */ + .overlay a { + padding: 8px; + text-decoration: none; + font-size: 48px; + line-height: 85px; + font-weight: bold; + color: #fff; + 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 */ + .overlay a:hover, .overlay a:focus { + color: #222; + } + + /* Position the close button (top right corner) */ +// .overlay .closebtn { +// // position: absolute; +// // top: 20px; +// // right: 45px; +// // font-size: 60px; +// } + + + + /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ + @media screen and (max-height: 450px) { + .overlay a {font-size: 20px} + .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } + } + + // ============================================================ OVERLAY END ======================================================================= + +// ====================== End Redo project starting 12/26/2018 ========================== diff --git a/less/services-page.less b/less/services-page.less new file mode 100644 index 0000000000..c41584fffd --- /dev/null +++ b/less/services-page.less @@ -0,0 +1,111 @@ +// ===================== Start Redo project starting 12/26/2018 ========================= +// ### Services Page +// - Tab selected background: #5E9FB9 +// - Tab Hover background: #222222 +// - Tab Hover color: #FFF; + + +.main-img-services { + position: relative; + // top: -50px; + z-index: -1; +} + +.main-header-services { + position: relative; + font-weight: bold; + font-size: 64px; + line-height: 75px; + color: #FFF; + position: absolute; + top: 160px; + left: 75px; +} + +.top-paragraph { + width: 90%; + margin: 0 auto; + padding: 0 40px; + font-weight: regular; + font-size: 16px; + line-height: 24px; + } + + .top-paragraph p { + padding: 50px 0 25px; + } + + .tabs-links { + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding: 25px 0; + // border: 2px solid greenyellow; + } + +// - Tab selected background: #5E9FB9 +// - Tab Hover background: #222222 +// - Tab Hover color: #FFF; + + .tabs-link { + border: 1px solid black; + padding: 10px 20px; + font-weight: bold; + } + + .tabs-link:hover { + background-color: #222; + color: #FFF; + } + + .tabs-link-selected { + background-color: #5E9FB9; + } + + .tabs-items { + display: flex; + flex-direction: row; + // width: 80%; + // border: 2px solid hotpink; + } + +// .tabs-item { +// display: flex; +// flex-direction: row; +// border: 2px solid blue; +// } + +.tabs-item-title { + font-weight: bold; + font-size: 20px; +} + +.tabs-item { + display: none; +} + +.tabs-item-selected { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + padding: 50px 0; + width: 90%; + margin: 0 auto; + + .tabs-item-description { + width: 40%; + margin: 0; + padding-right: 20px; + } + .tabs-item-title { + padding-bottom: 25px; + width: 100%; + margin-left: 37px; + } + +} +// ====================== End Redo project starting 12/26/2018 ========================== + + + + diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..4bda09aada --- /dev/null +++ b/less/variables.less @@ -0,0 +1 @@ +@footer-background: #828282; \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..9dd6ffa4a4 100644 --- a/services.html +++ b/services.html @@ -1,5 +1,6 @@ + Services @@ -10,17 +11,184 @@ - + + + + + +
+ + + + + +
+ Home + Services + Contact +
+ +
+ + + + + + + + + + + + + + + -

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