diff --git a/contact.html b/contact.html index 868844fe14..61cb46bf5d 100644 --- a/contact.html +++ b/contact.html @@ -10,10 +10,107 @@ +
+
+

S&J

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

S&J

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

Contact

+
+ + + +

Contact

+ +
+ +
+ +
+

Get In Touch

+

+

E-Mail Address

+
+
+
+

We'll never share your email with anyone else.

+

+

How Many Buildings Do You Need Planned?

+
+ +

+

Provide a brief overview of your project needs:

+
+ +
+
+ Small Business
+ Residential
+ corporation
+
+


+ +
+ +
+

Where We Work

+


+

New York

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+


+

Florida

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+


+

California

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+
+ +
+

Interested in starting a project?

+

Let’s talk:

+
+
+
+

We'll never share your email with anyone else.

+
+ +
+

New York

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+

Florida

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+

California

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+
+

Copyright © 2018 Smith and Jones

+
+ diff --git a/css/index.css b/css/index.css index e6b2b589c1..4e2cd881e3 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,739 @@ -/* 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 */ +html { + font-size: 62.5%; +} +html, +body { + font-family: 'Roboto', Arial, sans-serif; +} +h2 { + font-size: 2.5rem; + font-weight: bold; + text-align: left; +} +.container { + display: flex; + justify-content: center; + align-content: center; + max-width: 800px; + margin: 0 auto; +} +@media (max-width: 600px) { + .container { + max-width: 490px; + width: 98%; + margin: 0 auto; + } +} +.topalign { + display: flex; + justify-content: center; + align-content: center; +} +.topalign .navbarthingy { + background-color: #D8D8D8; + position: fixed; + top: 0; + height: 40px; + width: 1024px; + color: white; + display: flex; + justify-content: space-between; + align-content: baseline; + padding-top: 15px; + z-index: 2; +} +@media (max-width: 600px) { + .topalign .navbarthingy { + height: 50px; + width: 490px; + } +} +.topalign .navbarthingy .nav1 { + width: 10%; + padding-left: 100px; +} +@media (max-width: 600px) { + .topalign .navbarthingy .nav1 { + padding-left: 30px; + } +} +.topalign .navbarthingy .nav2 { + width: 10%; +} +.topalign .navbarthingy .navie { + display: unset; +} +.topalign2 { + display: flex; + justify-content: center; + align-content: top; +} +.topalign2 .navbarthingy2 { + background-color: #D8D8D8; + top: 0; + height: 40px; + width: 1024px; + color: white; + display: flex; + justify-content: space-between; + align-content: flex-start; + padding-top: 15px; +} +.topalign2 .navbarthingy2 .nav1 { + width: 10%; + padding-left: 100px; +} +.topalign2 .navbarthingy2 .nav2 { + width: 10%; +} +.topalign2 .navbarthingy2 .navie { + display: unset; +} +.aligner1 { + justify-content: left; +} +.allstuff { + position: relative; + text-align: center; + color: white; + border-bottom: 50px; +} +.leftish { + position: absolute; + text-align: left; + font-size: 6.5rem; + font-weight: bold; + bottom: 58px; + left: -20px; +} +@media (max-width: 600px) { + .leftish { + font-size: 4.8rem; + bottom: 58px; + left: 35px; + } +} +.allstuff2 { + position: relative; + text-align: center; + width: 88%; + color: white; + border-bottom: 50px; +} +.allstuff2 .right1 { + position: absolute; + bottom: -40px; + right: -23px; + letter-spacing: 8px; + font-size: 2.5rem; + background-color: #D8D8D8; + border: 3px; + color: black; + padding: 30px 72px; + text-align: center; + text-decoration: none; + display: inline-block; +} +@media (max-width: 600px) { + .allstuff2 .right1 { + bottom: -30px; + right: unset; + } +} +.allstuff2 .left1 { + position: absolute; + bottom: -40px; + left: -23px; + letter-spacing: 8px; + font-size: 2.5rem; + background-color: #D8D8D8; + border: 3px; + color: black; + padding: 30px 72px; + text-align: center; + text-decoration: none; + display: inline-block; +} +@media (max-width: 600px) { + .allstuff2 .left1 { + bottom: -30px; + left: unset; + } +} +.projectp { + font-size: 1.8rem; + width: 25%; + padding-top: 80px; + padding-bottom: 20px; + line-height: 150%; +} +@media (max-width: 600px) { + .projectp { + width: 88%; + } +} +.projectp2 { + font-size: 1.8rem; + width: 100%; + padding-top: 50px; + padding-bottom: 20px; + line-height: 150%; +} +.splitter { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + width: 95%; + margin-bottom: 50px; +} +@media (max-width: 600px) { + .splitter { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column-reverse; + padding-top: 25px; + } +} +.splitter h2 { + font-size: 2.5rem; + font-weight: bold; + padding-bottom: 20px; +} +.splitter p { + font-size: 1.7rem; + padding-bottom: 20px; +} +.splitter .part { + width: 44%; + text-align: left; + justify-content: center; +} +@media (max-width: 600px) { + .splitter .part { + width: 90%; + } +} +.splitter .part .butt { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} +.splitter1 { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + width: 95%; + margin-bottom: 50px; +} +@media (max-width: 600px) { + .splitter1 { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column; + padding-top: 25px; + } +} +.splitter1 h2 { + font-size: 2.5rem; + font-weight: bold; + padding-bottom: 20px; +} +.splitter1 p { + font-size: 1.7rem; + padding-bottom: 20px; +} +.splitter1 .part { + width: 44%; + text-align: left; + justify-content: center; +} +@media (max-width: 600px) { + .splitter1 .part { + width: 90%; + } +} +.splitter1 .part .butt { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} +.boot { + display: flex; + width: 100%; + justify-content: space-around; + background-color: gray; + color: white; + padding: 50px; +} +@media (max-width: 600px) { + .boot { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column; + padding: 40px 30px; + } +} +.boot .piece1 { + width: 38%; +} +@media (max-width: 600px) { + .boot .piece1 { + width: 90%; + } +} +.boot .piece1 h2 { + font-size: 2rem; +} +@media (max-width: 600px) { + .boot .piece1 h2 { + font-size: 3rem; + } +} +.boot .piece1 input[type=text], +.boot .piece1 select { + width: 90%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} +.boot .piece2 { + width: 16%; +} +@media (max-width: 600px) { + .boot .piece2 { + width: 90%; + padding-top: 10px; + } +} +.boot .piece2 h2 { + padding-bottom: 8px; + font-size: 2rem; +} +@media (max-width: 600px) { + .boot .piece2 h2 { + font-size: 3rem; + } +} +.boot .piece2 h3 { + font-size: 1.4rem; + line-height: 170%; +} +@media (max-width: 600px) { + .boot .piece2 h3 { + font-size: 2rem; + } +} +.boot2 { + display: flex; + width: 100%; + justify-content: center; + background-color: gray; + color: white; + padding: 8px 50px; +} +@media (max-width: 600px) { + .boot2 { + width: 90%; + font-size: 1.3rem; + text-align: left; + padding: 5px 30px; + } +} +.img1 { + display: unset; +} +@media (max-width: 600px) { + .img1 { + display: none; + } +} +.img1a { + display: none; +} +@media (max-width: 600px) { + .img1a { + display: unset; + width: 99%; + height: 360px; + } +} +.img2 { + display: unset; + width: 100%; +} +@media (max-width: 600px) { + .img2 { + display: none; + } +} +.img2a { + display: none; +} +@media (max-width: 600px) { + .img2a { + display: unset; + width: 99%; + height: 360px; + padding-bottom: 10px; + } +} +.img3 { + display: unset; + width: 100%; +} +@media (max-width: 600px) { + .img3 { + display: none; + } +} +.img3a { + display: none; +} +@media (max-width: 600px) { + .img3a { + display: unset; + width: 99%; + height: 360px; + padding-bottom: 10px; + } +} +.img4 { + display: unset; +} +@media (max-width: 600px) { + .img4 { + display: none; + } +} +.img4a { + display: none; +} +@media (max-width: 600px) { + .img4a { + display: unset; + width: 90%; + height: 360px; + padding-bottom: 10px; + } +} +.divider { + display: flex; + justify-content: space-between; + width: 100%; + padding-top: 20px; + padding-bottom: 20px; +} +@media (max-width: 600px) { + .divider { + flex-direction: column; + padding-bottom: 50px; + justify-content: center; + width: 100%; + } +} +.divider .divbut { + text-decoration: none; + width: 20%; + border: 2px solid black; + background-color: white; + color: black; + padding: 15px 15px; + text-align: center; + display: inline-block; + font-size: 16px; +} +@media (max-width: 600px) { + .divider .divbut { + width: 100%; + margin-bottom: 15px; + } +} +.divider .divbut:hover { + background-color: #222222; + color: white; +} +.overlay { + height: 0; + width: 100%; + position: fixed; + z-index: 3; + left: 0; + top: 0; + background-color: #D8D8D8; + overflow-x: hidden; + transition: 0.7s; +} +.overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; +} +.overlay-content a { + text-decoration: none; + font-size: 48px; + color: #FFFFFF; + line-height: 85px; +} +.overlay-content a:hover { + color: #222222; +} +.displayarea { + width: 100%; + height: 550px; +} +@media (max-width: 600px) { + .displayarea { + padding-bottom: 120px; + } +} +#precon { + display: flex; +} +#cons { + display: none; +} +#desi { + display: none; +} +#sust { + display: none; +} +.bigbreak { + display: flex; + justify-content: space-around; + align-items: center; + margin-top: 50px; + width: 92%; + margin-bottom: 50px; +} +@media (max-width: 600px) { + .bigbreak { + flex-direction: column; + } +} +.bigbreak .piece1b { + width: 65%; +} +@media (max-width: 600px) { + .bigbreak .piece1b { + width: 95%; + padding-bottom: 15px; + } +} +.bigbreak .piece1b h3 { + font-size: 1.7rem; +} +.bigbreak .piece1b h1 { + font-size: 3rem; + font-weight: bold; +} +.bigbreak input[type=text], +.bigbreak select { + width: 60%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} +@media (max-width: 600px) { + .bigbreak input[type=text], + .bigbreak select { + width: 95%; + } +} +.bigbreak textarea[type=stuff] { + width: 60%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} +@media (max-width: 600px) { + .bigbreak textarea[type=stuff] { + width: 95%; + } +} +.bigbreak .piece2b { + width: 30%; +} +@media (max-width: 600px) { + .bigbreak .piece2b { + width: 95%; + } +} +.bigbreak .piece2b h1 { + font-size: 3rem; + font-weight: bold; +} +.bigbreak .piece2b h3 { + font-size: 1.7rem; +} +.woober { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} diff --git a/index.html b/index.html index 8a84a17304..1bd793fef3 100644 --- a/index.html +++ b/index.html @@ -1,96 +1,187 @@ + - Home + + S&J Home + - - -

You got this! Good luck.

- - +
+
+

S&J

+
+ +
+
+
+ +
+ +
+
+

S&J

+
+ +
+
+
+ +
+ + Home
+ Services
+ Contact
+
+
+ - - - + \ No newline at end of file diff --git a/js/index.js b/js/index.js index bb3d341cf0..4df6dfede1 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,143 @@ -// JS goes here \ No newline at end of file +// JS goes here + +function openNav() { + document.getElementById("myNav").style.height = "100%"; +} + +function closeNav() { + document.getElementById("myNav").style.height = "0%"; +} + +document.getElementById("yo1").style.color="white"; +document.getElementById("yo1").style.backgroundColor="#5E9FB9" + + +function precon() { + document.getElementById("precon").style.display = "flex"; + document.getElementById("cons").style.display ="none"; + document.getElementById("desi").style.display ="none"; + document.getElementById("sust").style.display ="none"; + + document.getElementById("yo1").style.color="white"; + document.getElementById("yo1").style.backgroundColor="#5E9FB9" + document.getElementById("yo2").style.color="black"; + document.getElementById("yo2").style.backgroundColor="white" + document.getElementById("yo3").style.color="black"; + document.getElementById("yo3").style.backgroundColor="white" + document.getElementById("yo4").style.color="black"; + document.getElementById("yo4").style.backgroundColor="white" +} + +function cons() { + document.getElementById("precon").style.display = "none"; + document.getElementById("cons").style.display ="flex"; + document.getElementById("desi").style.display ="none"; + document.getElementById("sust").style.display ="none"; + + document.getElementById("yo2").style.color="white"; + document.getElementById("yo2").style.backgroundColor="#5E9FB9" + document.getElementById("yo1").style.color="black"; + document.getElementById("yo1").style.backgroundColor="white" + document.getElementById("yo3").style.color="black"; + document.getElementById("yo3").style.backgroundColor="white" + document.getElementById("yo4").style.color="black"; + document.getElementById("yo4").style.backgroundColor="white" +} + +function desi() { + document.getElementById("precon").style.display = "none"; + document.getElementById("cons").style.display ="none"; + document.getElementById("desi").style.display ="flex"; + document.getElementById("sust").style.display ="none"; + + document.getElementById("yo3").style.color="white"; + document.getElementById("yo3").style.backgroundColor="#5E9FB9" + document.getElementById("yo1").style.color="black"; + document.getElementById("yo1").style.backgroundColor="white" + document.getElementById("yo2").style.color="black"; + document.getElementById("yo2").style.backgroundColor="white" + document.getElementById("yo4").style.color="black"; + document.getElementById("yo4").style.backgroundColor="white" +} + +function sust() { + document.getElementById("precon").style.display = "none"; + document.getElementById("cons").style.display ="none"; + document.getElementById("desi").style.display ="none"; + document.getElementById("sust").style.display ="flex"; + + document.getElementById("yo4").style.color="white"; + document.getElementById("yo4").style.backgroundColor="#5E9FB9" + document.getElementById("yo1").style.color="black"; + document.getElementById("yo1").style.backgroundColor="white" + document.getElementById("yo2").style.color="black"; + document.getElementById("yo2").style.backgroundColor="white" + document.getElementById("yo3").style.color="black"; + document.getElementById("yo3").style.backgroundColor="white" +} + +class TabLink { + constructor(tabElement){ + + this.tabElement = tabElement; + + this.tabData = this.tabElement.dataset.tab; + + if(this.tabData == 'all'){ + + this.cards = document.querySelectorAll('.card'); + //console.log(this.cards); + + } else { + + this.cards = document.querySelectorAll(`.card[data-tab="${this.tabData}"]`); + //console.log(this.cards); + } + + this.cards = Array.from(this.cards).map( function (card){ + return new TabCard(card); + }); + + console.log(this.cards); + + this.tabElement.addEventListener('click', this.selectTab.bind(this) ); +} + +selectTab(){ + const tabs = document.querySelectorAll('.tab'); + + tabs.forEach(function(e){ + e.classList.remove("active-tab") + }); + + const cards = document.querySelectorAll('.card'); + +cards.forEach(function(e){ + //console.log(e); + e.style.display = 'none'; + }); + + this.tabElement.classList.add(".active-tab"); + +this.cards.forEach(card => card.selectCard()); + } +} + +class TabCard { +constructor(cardElement){ + // Assign this.cardElement to the cardElement DOM reference + this.cardElement = cardElement; + +} +selectCard(){ + // Update the style of this.cardElement to display = "flex" + this.cardElement.style.display ='flex'; +} + +} + +let tabs = document.querySelectorAll('.tab'); + +tabs.forEach( function(e) { +return new TabLink(e); +}); \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..350184ec7c 100644 --- a/less/index.less +++ b/less/index.less @@ -57,4 +57,674 @@ table{ border-spacing:0; } -/* Your Code Goes Here */ \ No newline at end of file +/* Your Code Goes Here */ +html { + font-size: 62.5%; +} + +html, body { + font-family: 'Roboto', Arial, sans-serif; +} + + +h2 { + font-size: 2.5rem; + font-weight: bold; + text-align: left; +} + +.container { + display: flex; + justify-content: center; + align-content: center; + max-width: 800px; + margin: 0 auto; + + @media (max-width: 600px) { + max-width: 490px; + width: 98%; + margin: 0 auto; + } +} + +.topalign { + display:flex; + justify-content: center; + align-content: center; + + + + .navbarthingy { + //overflow: hidden; + background-color: #D8D8D8; + position: fixed; + top: 0; + height: 40px; + width:1024px; + color: white; + display:flex; + justify-content: space-between; + align-content: baseline; + padding-top: 15px; + z-index:2; + + @media (max-width: 600px){ + height: 50px; + width: 490px; + + } + + .nav1 { + width: 10%; + padding-left: 100px; + + @media (max-width: 600px){ + padding-left: 30px; + } + } + + .nav2 { + width:10%; + } + + .navie{ + display: unset; + } + } + +} + + +.topalign2 { + display:flex; + justify-content: center; + align-content: top; + + .navbarthingy2 { + //overflow: hidden; + background-color: #D8D8D8; + //position: fixed; + top: 0; + height: 40px; + width:1024px; + color: white; + display:flex; + justify-content: space-between; + align-content: flex-start; + padding-top: 15px; + //z-index:2; + + .nav1 { + width: 10%; + padding-left: 100px; + } + + .nav2 { + width:10%; + } + + .navie{ + display: unset; + } + } + +} + + +.aligner1 { + justify-content: left; +} + +.allstuff { + position: relative; + text-align: center; + color: white; + border-bottom: 50px; +} + +.leftish { + position: absolute; + text-align: left; + font-size: 6.5rem; + font-weight: bold; + bottom: 58px; + left: -20px; + + @media (max-width: 600px){ + font-size: 4.8rem; + bottom: 58px; + left: 35px; + } +} + +.allstuff2{ + position: relative; + text-align: center; + width: 88%; + color: white; + border-bottom: 50px; + + .right1 { + position: absolute; + bottom: -40px; + right: -23px; + letter-spacing: 8px; + font-size: 2.5rem; + + background-color: #D8D8D8; + border: 3px; + + color: black; + padding: 30px 72px; + text-align: center; + text-decoration: none; + display: inline-block; + + @media (max-width: 600px){ + bottom: -30px; + right: unset; + } + } + + .left1 { + position: absolute; + bottom: -40px; + left: -23px; + letter-spacing: 8px; + font-size: 2.5rem; + + background-color: #D8D8D8; + border: 3px; + + color: black; + padding: 30px 72px; + text-align: center; + text-decoration: none; + display: inline-block; + + @media (max-width: 600px){ + bottom: -30px; + left: unset; + } + } + +} + +.projectp { + font-size: 1.8rem; + width: 25%; + padding-top: 80px; + padding-bottom: 20px; + line-height: 150%; + + @media (max-width: 600px){ + width:88%; + } +} + +.projectp2 { + font-size: 1.8rem; + width: 100%; + padding-top: 50px; + padding-bottom: 20px; + line-height: 150%; + + //@media (max-width: 600px){ + // width:88%; + //} +} + + +.splitter { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + width: 95%; + margin-bottom: 50px; + + @media (max-width: 600px) { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column-reverse; + + padding-top: 25px; + } + + h2 { + font-size: 2.5rem; + font-weight: bold; + padding-bottom: 20px; + } + + p { + font-size: 1.7rem; + padding-bottom: 20px; + } + + .part { + width: 44%; + text-align: left; + justify-content: center; + + @media (max-width: 600px) { + width: 90%; + } + + .butt { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + } +} + +.splitter1 { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 50px; + width: 95%; + margin-bottom: 50px; + + @media (max-width: 600px) { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column; + padding-top: 25px; + } + + h2 { + font-size: 2.5rem; + font-weight: bold; + padding-bottom: 20px; + } + + p { + font-size: 1.7rem; + padding-bottom: 20px; + } + + .part { + width: 44%; + text-align: left; + justify-content: center; + + @media (max-width: 600px) { + width: 90%; + } + + .butt { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + } +} + +.boot { + display: flex; + width:100%; + justify-content: space-around; + background-color: gray; + color: white; + padding: 50px; + + @media (max-width: 600px) { + max-width: 490px; + width: 98%; + margin: 0 auto; + flex-direction: column; + padding: 40px 30px; + } + + .piece1 { + width: 38%; + + @media (max-width: 600px){ + width: 90%; + } + + h2 { + font-size: 2rem; + + @media (max-width: 600px){ + font-size: 3rem; + } + } + + input[type=text], select { + width: 90%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + } + } + + .piece2 { + width: 16%; + + @media (max-width: 600px){ + width: 90%; + padding-top: 10px; + + } + h2{ + padding-bottom: 8px; + font-size: 2rem; + + @media (max-width: 600px){ + font-size: 3rem; + } + } + + h3{ + font-size: 1.4rem; + line-height: 170%; + + @media (max-width: 600px){ + font-size: 2rem; + } + } + } +} + +.boot2{ + display: flex; + width:100%; + justify-content: center; + background-color: gray; + color: white; + padding: 8px 50px; + + @media (max-width: 600px){ + width: 90%; + font-size: 1.3rem; + text-align: left; + padding: 5px 30px; + } +} + +.img1 { + display:unset; + + @media (max-width: 600px){ + display:none; + } +} + +.img1a { + display:none; + + @media (max-width: 600px){ + display:unset; + width: 99%; + height: 360px; + } +} + +.img2 { + display:unset; + width: 100%; + + @media (max-width: 600px){ + display:none; + } +} + +.img2a { + display:none; + + @media (max-width: 600px){ + display:unset; + //justify-content: center; + width: 99%; + height: 360px; + padding-bottom: 10px; + } +} + +.img3 { + display:unset; + width: 100%; + + @media (max-width: 600px){ + display:none; + } +} + +.img3a { + display:none; + + @media (max-width: 600px){ + display:unset; + + width: 99%; + height: 360px; + padding-bottom: 10px; + } +} + +.img4 { + display:unset; + + @media (max-width: 600px){ + display:none; + } +} + +.img4a { + display:none; + + @media (max-width: 600px){ + display:unset; + + width: 90%; + height: 360px; + padding-bottom: 10px; + } +} + +.divider { + display: flex; + justify-content: space-between; + width: 100%; + padding-top: 20px; + padding-bottom: 20px; + + @media (max-width: 600px){ + flex-direction: column; + padding-bottom: 50px; + justify-content: center; + width:100%; + + } + + .divbut { + text-decoration: none; + width: 20%; + border: 2px solid black; + background-color: white; + color: black; + padding: 15px 15px; + text-align: center; + display: inline-block; + font-size: 16px; + + @media (max-width: 600px){ + width:100%; + margin-bottom:15px; + + } + } + + .divbut:hover { + background-color:#222222; + color: white; + + } + +} + +.overlay { + + height: 0; + width: 100%; + position: fixed; + z-index: 3; + left: 0; + top: 0; + background-color: #D8D8D8; + + overflow-x: hidden; + transition: 0.7s; +} + +.overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + + a { + text-decoration: none; + font-size: 48px; + color: #FFFFFF; + line-height: 85px; + + + } + + a:hover { + color: #222222; + } +} + +.displayarea { + width:100%; + height: 550px; + + @media (max-width: 600px){ + padding-bottom:120px; + } +} + +#precon { + display: flex; +} + +#cons { + display: none; +} + +#desi { + display: none; +} + +#sust { + display: none; +} + +.bigbreak { + display: flex; + justify-content: space-around; + align-items: center; + margin-top: 50px; + width: 92%; + margin-bottom: 50px; + + @media (max-width: 600px){ + flex-direction: column; + } + + .piece1b { + width:65%; + + @media (max-width: 600px){ + width:95%; + padding-bottom: 15px; + + } + + h3{ + font-size:1.7rem; + } + h1{ + font-size: 3rem; + font-weight: bold; + } + } + + input[type=text], select { + width: 60%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + + @media (max-width: 600px){ + width:95% + } + + } + + textarea[type=stuff] { + width: 60%; + + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + + @media (max-width: 600px){ + width:95% + } + } + + .piece2b { + width:30%; + + @media (max-width: 600px){ + width:95% + } + + h1{ + font-size: 3rem; + font-weight: bold; + } + + h3{ + font-size:1.7rem; + } + } +} + +.woober { + background-color: white; + border-color: black; + color: black; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..7f6fa411f5 100644 --- a/services.html +++ b/services.html @@ -10,15 +10,131 @@ - +
+
+

S&J

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

S&J

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

Services

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

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.

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

Interested in starting a project?

+

Let’s talk:

+
+
+
+

We'll never share your email with anyone else.

+
+
+

New York

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+

Florida

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+

California

+
+

123 Lane

+

Suite 100

+

Albany, NY 12345

+

202-555-0144

+
+
+ +
+
+

Copyright © 2018 Smith and Jones

+
--->