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. +
+
diff --git a/css/index.css b/css/index.css index e6b2b589c1..8c56374e0e 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,564 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +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 */ +.header { + width: 100%; + position: fixed; + z-index: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + background-color: #9aa4ad; + padding: 1.1rem 8%; +} +.header .logo { + color: #fff; + font-size: 2.4rem; + font-weight: 700; +} +.header .nav { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} +.header .nav .hamburger .hide { + display: none; +} +.hamburger-expanded { + width: 100%; + height: 100vh; + position: fixed; + top: 5rem; + z-index: 2; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: #9aa4ad; + padding-bottom: 5rem; +} +.hamburger-expanded .links a { + text-decoration: none; + line-height: 1.8; + color: #fff; + font-weight: 700; + font-size: 4.8rem; +} +.hamburger-expanded .links .hover { + color: #222222; +} +.hide { + display: none; +} +/*global */ +html { + font-size: 62.5%; +} +body { + font-size: 1.6rem; + color: #222222; + font-family: 'Roboto', Arial, sans-serif; + line-height: 1.2; +} +* { + box-sizing: border-box; +} +/* main */ +.jumbotron { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + max-width: 1024px; + margin: 0 auto; + position: relative; +} +@media (max-width: 650px) { + .jumbotron { + max-width: 320px; + } +} +.jumbotron img { + max-width: 100%; +} +.jumbotron h1 { + color: #fff; + font-size: 6.4rem; + font-weight: 700; + line-height: 1.175; + position: absolute; + bottom: 5rem; + left: 8.15rem; +} +@media (max-width: 650px) { + .jumbotron h1 { + font-size: 3.6rem; + bottom: 2.5rem; + left: 1.5rem; + } +} +.jumbotron .services-text { + bottom: 2rem; +} +.main-content { + margin: 0 auto; + max-width: 855px; +} +@media (max-width: 650px) { + .main-content { + max-width: 320px; + margin-bottom: 7.5rem; + } +} +.main-content .intro .box { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 5rem 0; +} +@media (max-width: 650px) { + .main-content .intro .box { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + margin: 3.5rem 0; + padding: 0; + } +} +@media (max-width: 650px) { + .main-content .intro .box img { + order: -1; + } +} +.main-content .intro .box .text-content { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + padding-right: 2rem; +} +@media (max-width: 650px) { + .main-content .intro .box .text-content { + padding: 2rem; + } +} +.main-content .intro .box .text-content h2 { + font-size: 2.4rem; + font-weight: 700; +} +.main-content .intro .box .text-content p { + line-height: 1.5; +} +.main-content .intro .box .text-content .btn { + margin-top: 1rem; + display: inline-block; + border: 1px solid black; + padding: 1.3rem 2.7rem; + text-align: center; +} +@media (max-width: 650px) { + .main-content .intro .box .text-content .btn { + width: 100%; + } +} +.main-content .intro .designs .text-content { + padding: 0; + padding-left: 3rem; +} +@media (max-width: 650px) { + .main-content .intro .designs .text-content { + padding: 2rem; + } +} +.main-content .projects { + max-width: 855px; +} +.main-content .projects h2 { + font-size: 2.4rem; + font-weight: 700; + padding: 4.6rem 0; +} +@media (max-width: 650px) { + .main-content .projects h2 { + padding: 0 2rem; + } +} +.main-content .projects .project { + position: relative; +} +.main-content .projects .project img { + padding: 0.4rem 0; +} +.main-content .projects .project .overlay { + background-color: #d8d8d8; + width: 315px; + padding: 3.2rem 0; + border: 1px solid #fff; + text-align: center; + font-size: 2.4rem; + text-transform: uppercase; + letter-spacing: 0.8rem; + position: absolute; + bottom: 43rem; + right: 0; +} +@media (max-width: 650px) { + .main-content .projects .project .overlay { + width: 295px; + bottom: 46rem; + right: 1.2rem; + } +} +.main-content .projects .project .left { + left: 1.2rem; +} +.main-content .projects .project .content { + margin: 0 auto; + width: 52%; + padding: 8.9rem 0; + font-size: 1.8rem; + line-height: 1.35; +} +@media (max-width: 650px) { + .main-content .projects .project .content { + margin-top: 11rem; + margin-bottom: 4rem; + padding: 0; + width: 89%; + } +} +/* Services */ +.services { + max-width: 895px; + line-height: 1.65; + padding: 0 2rem; +} +@media (max-width: 650px) { + .services { + padding: 0 1.5rem; + max-width: 320px; + margin-bottom: 7.5rem; + } +} +.services .intro { + margin-top: 5rem; +} +@media (max-width: 650px) { + .services .intro { + margin-top: 3rem; + } +} +.services .tabs { + margin-top: 4.2rem; + margin-bottom: 9rem; +} +@media (max-width: 650px) { + .services .tabs { + margin-top: 2.8rem; + } +} +.services .tabs .tab-links { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.services .tabs .tab-links .tab-link { + width: 185px; + border: 1px solid #000; + padding: 0.75rem; + font-size: 2rem; + font-weight: 700; + text-align: center; +} +@media (max-width: 800px) { + .services .tabs .tab-links { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .services .tabs .tab-links .tab-link { + width: 100%; + margin: 1rem; + } +} +.services .tabs .clicked { + background-color: #5E9FB9; + color: #000; +} +.services .tabs .hover { + background-color: #222222; + color: #FFF; +} +.services .tabs .tab-contents .tab-content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 6.5rem; +} +@media (max-width: 800px) { + .services .tabs .tab-contents .tab-content { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin-top: 5rem; + } +} +.services .tabs .tab-contents .tab-content .text h2 { + line-height: 0; + font-size: 2.4rem; + font-weight: 700; +} +.services .tabs .tab-contents .tab-content .text p { + padding: 0.3rem 0; + margin-top: 2.1rem; +} +@media (max-width: 650px) { + .services .tabs .tab-contents .tab-content .text p { + padding: 0; + margin-top: 3.1rem; + } +} +.services .tabs .tab-contents .tab-content img { + padding-left: 3rem; +} +@media (max-width: 800px) { + .services .tabs .tab-contents .tab-content img { + padding: 2rem 0; + } +} +.services .tabs .tab-contents .hide { + display: none; +} +.footer-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} +@media (max-width: 650px) { + .footer-content { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + } +} +.footer-content .contact-us { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: baseline; + width: 100%; + padding: 5rem; + background: #828282; + color: #fff; +} +@media (max-width: 650px) { + .footer-content .contact-us { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-start; + padding: 1rem 0; + padding-bottom: 5rem; + max-width: 320px; + } +} +.footer-content .contact-us .email-us { + padding: 1rem; +} +.footer-content .contact-us .email-us h3 { + font-size: 2rem; + font-weight: 700; + line-height: 1.2; +} +.footer-content .contact-us .email-us .form { + width: 280px; + margin-top: 10px; + margin-bottom: 5px; + background-color: #fff; + border-radius: 5px; + color: gray; + padding: 1rem; +} +.footer-content .contact-us .email-us span { + font-size: 1.3rem; +} +.footer-content .contact-us .office-location { + padding: 0.5rem; + font-size: 1.4rem; + line-height: 2; +} +@media (max-width: 650px) { + .footer-content .contact-us .office-location { + padding-left: 3rem; + } +} +.footer-content .contact-us .office-location h3 { + font-size: 2rem; + font-weight: 700; +} +.footer-content footer { + position: absolute; + bottom: 2rem; + z-index: 1; + font-size: 1.3rem; + color: #fff; +} +@media (max-width: 650px) { + .footer-content footer { + bottom: 1rem; + } +} +.desktop { + display: block; +} +@media (max-width: 650px) { + .desktop { + display: none; + } +} +.mobile { + display: none; +} +@media (max-width: 650px) { + .mobile { + display: block; + } +} diff --git a/index.html b/index.html index 8a84a17304..a58c6fb19e 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,11 @@ +
+
+ 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. +
+
+
+
+ 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. +
+
+
+ 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 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 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. +
+