diff --git a/css/index.css b/css/index.css index e6b2b589c1..b6921c442e 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,441 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +body { + font-family: 'Roboto'; +} +@media screen and (max-width: 500px) { + body { + width: 630px; + } +} +@media screen and (max-width: 500px) { + body .container-fluid { + width: 630px; + } +} +body .container-fluid nav { + background-color: #8d9aa9; +} +@media screen and (max-width: 500px) { + body .container-fluid nav { + width: 630px; + } +} +body .container-fluid nav .nav-header { + color: white; + font-size: 1.6rem; + padding-left: 4%; +} +body .container-fluid nav .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #000000; + background-color: rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; +} +body .container-fluid nav .overlay a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; +} +body .container-fluid nav .overlay a:hover { + color: #222222; +} +body .container-fluid nav .overlay a:focus { + color: #222222; +} +@media screen and (max-height: 450px) { + body .container-fluid nav .overlay a { + font-size: 2.4rem; + } +} +body .container-fluid nav .overlay .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} +@media screen and (max-height: 450px) { + body .container-fluid nav .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } +} +body .container-fluid nav .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} +body .container-fluid nav .menu-bar { + font-size: 30px; + cursor: pointer; + float: right; + padding: 0 1rem; + color: white; +} +body .container-fluid nav .jumbo-image1 { + background: url("../img/home/home-jumbotron.png"); + background-size: cover; + height: 800px; + padding-top: 100px; +} +@media screen and (max-width: 500px) { + body .container-fluid nav .jumbo-image1 { + width: 630px; + } +} +body .container-fluid nav .jumbo-image1 h1 { + color: white; + padding-top: 30%; + padding-left: 5%; + font-size: 5rem; +} +body .container { + position: relative; + display: flex; + justify-content: space-between; + padding: 1% 5%; + height: auto; +} +@media screen and (max-width: 500px) { + body .container { + width: 565px; + flex-direction: column-reverse; + padding-top: 25px; + } +} +body .container h2 { + margin: 5% 2%; +} +body .container .column { + display: flex; + flex-direction: column; + justify-content: center; + line-height: 1.7; + margin: 0 2%; + width: auto; +} +body .container .column p { + margin-left: 3%; +} +body .container .column .button { + background-color: white; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; +} +@media screen and (max-width: 500px) { + body .container .column .button { + width: 339px; + margin-left: 100px; + } +} +body .container.right { + top: -180; +} +body .container.left { + display: flex; + flex-direction: row-reverse; + top: -180; +} +@media screen and (max-width: 500px) { + body .container.left { + width: 565px; + flex-direction: column-reverse; + } +} +body .container .img { + width: 40%; + height: 100%; + top: -180; +} +@media screen and (max-width: 500px) { + body .container .img { + width: auto; + max-width: 100%; + height: auto; + } +} +body .recentprjt-imgs { + display: flex; + flex-direction: column; +} +body .block-txt { + margin-top: -70px; + flex-direction: row; + align-self: flex-end; + height: 30%; + width: 30%; + background-color: grey; + text-align: center; + vertical-align: middle; + line-height: 100px; + font-size: 30px; +} +@media screen and (max-width: 500px) { + body .block-txt { + width: 440px; + margin-right: 100px; + } +} +body .outskirts { + margin-top: -70px; + flex-direction: row; + align-self: flex-start; + height: 30%; + width: 30%; + background-color: grey; + text-align: center; + vertical-align: middle; + line-height: 100px; + font-size: 30px; +} +@media screen and (max-width: 500px) { + body .outskirts { + width: 440px; + margin-left: 100px; + } +} +body .centered { + margin-top: 90px; + margin-left: auto; + margin-right: auto; + margin-bottom: 120px; + width: 25em; +} +body .subheader { + font-weight: bold; + font-size: 28px; +} +body footer { + background: grey; + color: white; +} +@media screen and (max-width: 500px) { + body footer { + width: 625px; + } +} +body footer h4 { + font-size: 20px; +} +body footer .footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + padding: 50px 0; +} +@media screen and (max-width: 500px) { + body footer .footer { + flex-direction: column; + padding-left: 15px; + width: 230px; + } +} +@media screen and (max-width: 500px) { + body footer .footer .city1 { + width: 337px; + padding-left: 128px; + } +} +body footer .footer .city1 input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; +} +body footer .footer .city1 p { + font-size: 20px; +} +body footer .footer .city1 .cityName { + font-size: 30px; + margin-bottom: 10px; +} +body footer .copyright { + text-align: center; + font-size: small; +} +body .container-fluid nav { + background-color: #8d9aa9; +} +body .container-fluid nav .nav-header { + color: white; + font-size: 2rem; + padding-left: 4%; +} +body .container-fluid nav .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #000000; + background-color: rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; +} +body .container-fluid nav .overlay a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; +} +body .container-fluid nav .overlay a:hover { + color: #222222; +} +body .container-fluid nav .overlay a:focus { + color: #222222; +} +@media screen and (max-height: 450px) { + body .container-fluid nav .overlay a { + font-size: 3rem; + } +} +body .container-fluid nav .overlay .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} +@media screen and (max-height: 450px) { + body .container-fluid nav .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } +} +body .container-fluid nav .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} +body .container-fluid nav .menu-bar { + font-size: 30px; + cursor: pointer; + float: right; + padding: 0 1rem; + color: white; +} +body .container-fluid nav .jumbo-image { + background: url("../img/services/services-jumbotron.png"); + background-size: cover; + height: 250px; +} +body .container-fluid nav .jumbo-image h1 { + color: white; + padding-top: 30%; + padding-left: 5%; + font-size: 5rem; +} +body .tab-container { + width: auto; + height: auto; +} +body .tab-container .top-p { + padding: 60px; +} +body .tab-container p { + margin-top: 5%; +} +body .tab-container img { + width: 30%; +} +body .tab-container .tab { + display: flex; + padding: 0 60px; + justify-content: space-between; + align-items: flex-end; +} +body .tab-container .tab .tablinks { + height: 30%; + margin-left: 0; + width: 20%; + background-color: white; +} +body .tab-container .tab button { + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; +} +body .tab-container .tab button:hover { + background-color: #4e95b0; + color: white; +} +body .tab-container .tabcontent #Pre-construction { + display: initial !important; +} +body .tab-container #Design-Build { + display: none; +} +body .tab-container #Construction { + display: none; +} +body .tab-container #Sustainability { + display: none; +} +body .tab-container h3 { + padding-top: 5%; + padding-left: 60px; +} +body .tab-container .inner { + display: flex; + padding: 70px; +} +body .tab-container .inner p { + padding-right: 5%; +} +body footer { + background: grey; + color: white; +} +body footer h4 { + font-size: 20px; +} +body footer .footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; +} +body footer .footer .city input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; +} +body footer .footer .city p { + font-size: 20px; +} +body footer .footer .city .cityName { + font-size: 30px; +} +body footer .copyright { + text-align: center; + font-size: small; +} diff --git a/index.html b/index.html index 8a84a17304..5335b81631 100644 --- a/index.html +++ b/index.html @@ -5,92 +5,132 @@ Home + + + + - -

You got this! Good luck.

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

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

+ +
+blueprint image +
+ +
+
+

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

+ +
+bulding image +
+ + +
+

Recent Projects

+
+villas image +
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 Outskirts +
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
+
+

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..e69de29bb2 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +0,0 @@ -// JS goes here \ No newline at end of file diff --git a/less/home.less b/less/home.less new file mode 100644 index 0000000000..138ced9bda --- /dev/null +++ b/less/home.less @@ -0,0 +1,258 @@ + body { + @media screen and (max-width: 500px){ + width:630px; + } + font-family: 'Roboto'; + .container-fluid { + @media screen and (max-width: 500px){ + width:630px; + } + nav { + @media screen and (max-width: 500px){ + width:630px; + } + background-color:#8d9aa9; + .nav-header { + color:white; + font-size:1.6rem; + padding-left:4%; + } + .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgb(0, 0, 0); + background-color:rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; + + a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; + + &:hover{ + color: #222222; + } + &:focus{ + color: #222222; + } + @media screen and (max-height: 450px) { + font-size: 2.4rem; + } + } + .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + + @media screen and (max-height: 450px) { + font-size: 40px; + top: 15px; + right: 35px; + } + } + } + .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; + } + .menu-bar { + font-size:30px; + cursor:pointer; + float:right; + padding:0 1rem; + color:white; + } + .jumbo-image1 { + @media screen and (max-width: 500px){ + width:630px; + } + background:url("../img/home/home-jumbotron.png"); + background-size: cover; + height:800px; + padding-top:100px; + + h1 { + color:white; + padding-top:30%; + padding-left:5%; + font-size:5rem; + } + } + } + } + .container { + @media screen and (max-width: 500px){ + width:565px; + flex-direction: column-reverse; + padding-top: 25px; + } + position: relative; + display: flex; + justify-content: space-between; + padding: 1% 5%; + height: auto; + + h2 { + margin: 5% 2%; + } + .column{ + display: flex; + flex-direction: column; + justify-content: center; + line-height: 1.7; + margin: 0 2%; + width: auto; + + p { + margin-left:3%; + } + ///fix button + .button { + @media screen and (max-width: 500px){ + width: 339px; + margin-left: 100px; + } + background-color: white; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; + // line-height: 5%; + } + } + &.right { + top:-180; + } + &.left{ + @media screen and (max-width: 500px){ + width:565px; + flex-direction: column-reverse; + } + display: flex; + flex-direction: row-reverse; + top:-180; + } + .img{ + @media screen and (max-width: 500px){ + width:auto; + max-width:100%; + height:auto; + } + width:40%; + height:100%; + top:-180; + } + } + .recentprjt-imgs { + display: flex; + flex-direction: column; + } + .block-txt { + @media screen and (max-width: 500px){ + width:440px; + margin-right: 100px; + } + margin-top:-70px; + flex-direction: row; + align-self: flex-end; + height: 30%; + width: 30%; + background-color:grey; + text-align: center; + vertical-align: middle; + line-height: 100px; + font-size: 30px; + } + .outskirts { + @media screen and (max-width: 500px){ + width:440px; + margin-left: 100px; + } + margin-top:-70px; + flex-direction: row; + align-self: flex-start; + height: 30%; + width: 30%; + background-color:grey; + text-align: center; + vertical-align: middle; + line-height: 100px; + font-size: 30px; + } + + .centered { + margin-top: 90px; + margin-left: auto; + margin-right: auto; + margin-bottom: 120px; + width: 25em; + } + + + .subheader { + font-weight: bold; + font-size: 28px; + } + footer { + @media screen and (max-width: 500px){ + width:625px; + } + background: grey; + color: white; + h4 { + font-size: 20px; + } + .footer { + @media screen and (max-width: 500px){ + flex-direction: column; + padding-left: 15px; + width: 230px; + } + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + padding: 50px 0; + .city1 { + @media screen and (max-width: 500px){ + width: 337px; + padding-left: 128px; + } + input { + + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; + } + + p { + font-size: 20px; + } + + .cityName { + font-size: 30px; + margin-bottom: 10px; + } + } + } + + .copyright { + text-align: center; + font-size: small; + } + } + } diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..4d2f1cecda 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,2 @@ -/*------------------------------------*\ -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 +@import "home.less"; +@import "services.less"; \ No newline at end of file diff --git a/less/services.less b/less/services.less new file mode 100644 index 0000000000..0146c96825 --- /dev/null +++ b/less/services.less @@ -0,0 +1,186 @@ +body{ + .container-fluid { + nav { + background-color:#8d9aa9; + .nav-header { + color:white; + font-size:2rem; + padding-left:4%; + } + .overlay { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgb(0, 0, 0); + background-color:rgba(81, 89, 112, 0.849); + overflow-x: hidden; + transition: 0.5s; + a { + padding: 8px; + text-decoration: none; + font-size: 50px; + color: #ffffff; + display: block; + transition: 0.3s; + + &:hover{ + color: #222222; + } + &:focus{ + color: #222222; + } + @media screen and (max-height: 450px) { + font-size: 3rem; + } + } + .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + @media screen and (max-height: 450px) { + font-size: 40px; + top: 15px; + right: 35px; + } + } + } + .overlay-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; + } + .menu-bar { + font-size:30px; + cursor:pointer; + float:right; + padding:0 1rem; + color:white; + } + .jumbo-image { + background:url("../img/services/services-jumbotron.png"); + background-size: cover; + height:250px; + h1 { + color:white; + padding-top:30%; + padding-left:5%; + font-size:5rem; + } + } + } + } + + +.tab-container { + width: auto; + height: auto; + .top-p{ + padding: 60px; + } + p{ + margin-top: 5%; + // margin-bottom: 5%; + } + img { + width: 30%; + + } + .tab { + display: flex; + padding: 0 60px; + // margin-bottom: 5%; + justify-content: space-between; + align-items: flex-end; + .tablinks { + height: 30%; + margin-left: 0; + width: 20%; + background-color: white; + } + button{ + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; + border: 2px solid black; + padding: 5px; + font-size: 16px; + color: black; + width: 40%; + } + button:hover{ + background-color:#4e95b0; + color:white; + } +} +.tabcontent + #Pre-construction { + display: initial !important; + + } + #Design-Build{ + display: none; + } + #Construction{ + display:none; + } + #Sustainability{ + display: none; + } + h3 { + padding-top: 5%; + padding-left: 60px; + } + .inner{ + display:flex; + padding: 70px; + p{ + padding-right: 5%; + } + } + } + footer { + background:grey; + color: white; + h4 { + font-size: 20px; + } + .footer { + display: flex; + justify-content: space-around; + font-size: 20px; + text-align: left; + .city { + input { + padding-top: 10px; + display: block; + padding: 10px 0; + width: 100%; + } + + p { + font-size: 20px; + } + + .cityName { + font-size: 30px; + // margin-bottom: 10px; + } + } + } + + .copyright { + text-align: center; + font-size: small; + } +} +} \ No newline at end of file diff --git a/services.html b/services.html index fb5a79e18a..8bf82d2e93 100644 --- a/services.html +++ b/services.html @@ -1,38 +1,185 @@ + - + 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

+
+

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

+ +
+
+
+

Design Build

+
+

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

+ +
+
+
+

Construction

+
+

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

+ +
+
+
+

Sustainability

+
+

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

+ +
+
+ +
-

Services

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