├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── images ├── landing.jpg ├── landing.webp ├── cabinets-m.jpg ├── cabinets2.jpg ├── landing-m.jpg ├── landing-m.webp ├── logo-blue.png ├── logo-light.png ├── cabinets2-m.jpg ├── cabinets2-m.webp ├── construction.jpg ├── construction-m.jpg ├── construction-m.webp ├── portfolio │ ├── port1.jpg │ ├── port2.jpg │ ├── port3.jpg │ ├── port4.jpg │ ├── port5.jpg │ ├── port6.jpg │ ├── port7.jpg │ ├── port8.jpg │ ├── port9.jpg │ ├── port1-m.jpg │ ├── port2-m.jpg │ ├── port3-m.jpg │ ├── port4-m.jpg │ ├── port5-m.jpg │ ├── port6-m.jpg │ ├── port7-m.jpg │ ├── port8-m.jpg │ └── port9-m.jpg ├── service2.svg ├── moon.svg ├── service1.svg ├── check.svg ├── profile-woman.svg ├── profile.svg ├── service3.svg ├── sun.svg ├── stars.svg ├── sun-icon.svg └── content-circles.svg ├── mstile-150x150.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-384x384.png ├── fonts ├── roboto-v29-latin-700.woff ├── roboto-v29-latin-900.woff ├── roboto-v29-latin-700.woff2 ├── roboto-v29-latin-900.woff2 ├── roboto-v29-latin-regular.woff └── roboto-v29-latin-regular.woff2 ├── browserconfig.xml ├── css ├── nav.js ├── dark.css ├── dark.less ├── projects.css ├── critical.css ├── reviews.css ├── about.css ├── critical.less ├── projects.less ├── about.less ├── reviews.less ├── contact.css ├── local.css ├── contact.less ├── local.less ├── mobile-nav-options.css └── mobile-nav-options.less ├── nav.js ├── site.webmanifest ├── dark.js ├── LICENSE ├── README.md ├── contact.html ├── about.html └── projects.html /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/favicon.ico -------------------------------------------------------------------------------- /favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/favicon-16x16.png -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/favicon-32x32.png -------------------------------------------------------------------------------- /images/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/landing.jpg -------------------------------------------------------------------------------- /images/landing.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/landing.webp -------------------------------------------------------------------------------- /mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/mstile-150x150.png -------------------------------------------------------------------------------- /apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/apple-touch-icon.png -------------------------------------------------------------------------------- /images/cabinets-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/cabinets-m.jpg -------------------------------------------------------------------------------- /images/cabinets2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/cabinets2.jpg -------------------------------------------------------------------------------- /images/landing-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/landing-m.jpg -------------------------------------------------------------------------------- /images/landing-m.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/landing-m.webp -------------------------------------------------------------------------------- /images/logo-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/logo-blue.png -------------------------------------------------------------------------------- /images/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/logo-light.png -------------------------------------------------------------------------------- /images/cabinets2-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/cabinets2-m.jpg -------------------------------------------------------------------------------- /images/cabinets2-m.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/cabinets2-m.webp -------------------------------------------------------------------------------- /images/construction.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/construction.jpg -------------------------------------------------------------------------------- /android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/android-chrome-192x192.png -------------------------------------------------------------------------------- /android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/android-chrome-384x384.png -------------------------------------------------------------------------------- /images/construction-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/construction-m.jpg -------------------------------------------------------------------------------- /images/construction-m.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/construction-m.webp -------------------------------------------------------------------------------- /images/portfolio/port1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port1.jpg -------------------------------------------------------------------------------- /images/portfolio/port2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port2.jpg -------------------------------------------------------------------------------- /images/portfolio/port3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port3.jpg -------------------------------------------------------------------------------- /images/portfolio/port4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port4.jpg -------------------------------------------------------------------------------- /images/portfolio/port5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port5.jpg -------------------------------------------------------------------------------- /images/portfolio/port6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port6.jpg -------------------------------------------------------------------------------- /images/portfolio/port7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port7.jpg -------------------------------------------------------------------------------- /images/portfolio/port8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port8.jpg -------------------------------------------------------------------------------- /images/portfolio/port9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port9.jpg -------------------------------------------------------------------------------- /images/portfolio/port1-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port1-m.jpg -------------------------------------------------------------------------------- /images/portfolio/port2-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port2-m.jpg -------------------------------------------------------------------------------- /images/portfolio/port3-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port3-m.jpg -------------------------------------------------------------------------------- /images/portfolio/port4-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port4-m.jpg -------------------------------------------------------------------------------- /images/portfolio/port5-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port5-m.jpg -------------------------------------------------------------------------------- /images/portfolio/port6-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port6-m.jpg -------------------------------------------------------------------------------- /images/portfolio/port7-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port7-m.jpg -------------------------------------------------------------------------------- /images/portfolio/port8-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port8-m.jpg -------------------------------------------------------------------------------- /images/portfolio/port9-m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/images/portfolio/port9-m.jpg -------------------------------------------------------------------------------- /fonts/roboto-v29-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/fonts/roboto-v29-latin-700.woff -------------------------------------------------------------------------------- /fonts/roboto-v29-latin-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/fonts/roboto-v29-latin-900.woff -------------------------------------------------------------------------------- /fonts/roboto-v29-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/fonts/roboto-v29-latin-700.woff2 -------------------------------------------------------------------------------- /fonts/roboto-v29-latin-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/fonts/roboto-v29-latin-900.woff2 -------------------------------------------------------------------------------- /fonts/roboto-v29-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/fonts/roboto-v29-latin-regular.woff -------------------------------------------------------------------------------- /fonts/roboto-v29-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Oak-Harbor-Kits/Starter-KitV3/HEAD/fonts/roboto-v29-latin-regular.woff2 -------------------------------------------------------------------------------- /browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /css/nav.js: -------------------------------------------------------------------------------- 1 | 2 | // Toggle navigation open 3 | 4 | const navbarMenu = document.querySelector("#navigation #navbar-menu"); 5 | const hamburgerMenu = document.querySelector("#navigation .hamburger-menu"); 6 | 7 | hamburgerMenu.addEventListener('click', function() { 8 | navbarMenu.classList.toggle("open"); 9 | }); -------------------------------------------------------------------------------- /nav.js: -------------------------------------------------------------------------------- 1 | // 2 | // Toggle Mobile Navigation 3 | // 4 | const navbarMenu = document.querySelector("#navigation #navbar-menu"); 5 | const hamburgerMenu = document.querySelector("#navigation .hamburger-menu"); 6 | 7 | hamburgerMenu.addEventListener('click', function() { 8 | navbarMenu.classList.toggle("open"); 9 | hamburgerMenu.classList.toggle("clicked"); 10 | }); 11 | -------------------------------------------------------------------------------- /images/service2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /images/moon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-384x384.png", 12 | "sizes": "384x384", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /images/service1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /dark.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // 4 | // The Dark Mode System 5 | // 6 | 7 | /* Body and Toggle */ 8 | var body = document.querySelector("body"); 9 | const darkModeToggle = document.querySelector("#dark-mode-toggle"); 10 | 11 | // Get Status of Dark Mode 12 | let darkMode = localStorage.getItem("darkMode"); 13 | 14 | // Enable Dark Mode 15 | const enableDarkMode = () => { 16 | body.classList.add("dark-mode"); 17 | localStorage.setItem("darkMode", "enabled") 18 | } 19 | 20 | // Disable Dark mode 21 | const disableDarkMode = () => { 22 | body.classList.remove("dark-mode"); 23 | localStorage.setItem("darkMode", null) 24 | } 25 | 26 | // Check the state of dark mode in local storage 27 | if (darkMode == "enabled") { 28 | enableDarkMode(); 29 | } 30 | 31 | // add event listener to the dark mode button toggle 32 | darkModeToggle.addEventListener('click', () => { 33 | // on click, check localstorage for the dark mode value 34 | darkMode = localStorage.getItem("darkMode"); 35 | if (darkMode !== "enabled") { 36 | // if dark mode is not enabled, run this function to set it to enabled 37 | enableDarkMode(); 38 | } else { 39 | // if dark mode is enabled, run this function to set it to disabled 40 | disableDarkMode(); 41 | } 42 | }) -------------------------------------------------------------------------------- /images/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /images/profile-woman.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /images/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /images/service3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /css/dark.css: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Core Dark Styles --> 3 | <--- -------------------------- -*/ 4 | /* Mobile */ 5 | @media only screen and (min-width: 0em) { 6 | :root { 7 | --dark: #082032; 8 | --medium: #2C394B; 9 | --accent: #334756; 10 | } 11 | body.dark-mode { 12 | background-color: var(--dark); 13 | } 14 | body.dark-mode p, 15 | body.dark-mode li, 16 | body.dark-mode h1, 17 | body.dark-mode h2, 18 | body.dark-mode h3, 19 | body.dark-mode h4, 20 | body.dark-mode h5, 21 | body.dark-mode h6 { 22 | color: #fff; 23 | } 24 | body.dark-mode .light { 25 | display: none; 26 | } 27 | body.dark-mode .dark { 28 | display: block !important; 29 | } 30 | .dark { 31 | display: none; 32 | } 33 | } 34 | /*-- -------------------------- --> 35 | <--- Dark Mode Toggle --> 36 | <--- -------------------------- -*/ 37 | /* Mobile */ 38 | @media only screen and (min-width: 0em) { 39 | body.dark-mode #dark-mode-toggle .sun { 40 | transform: translate(-50%, -50%); 41 | opacity: 1; 42 | } 43 | body.dark-mode #dark-mode-toggle .moon { 44 | transform: translate(-50%, -150%); 45 | opacity: 0; 46 | } 47 | #dark-mode-toggle { 48 | display: block; 49 | position: absolute; 50 | top: 50%; 51 | transform: translateY(-50%); 52 | right: 3.75em; 53 | width: 3em; 54 | height: 3em; 55 | background: transparent; 56 | border: none; 57 | overflow: hidden; 58 | padding: 0; 59 | } 60 | #dark-mode-toggle img, 61 | #dark-mode-toggle svg { 62 | position: absolute; 63 | top: 50%; 64 | left: 50%; 65 | transform: translate(-50%, -50%); 66 | width: 1.5625em; 67 | height: 1.5625em; 68 | pointer-events: none; 69 | } 70 | #dark-mode-toggle .moon { 71 | z-index: 2; 72 | transition: transform .3s, opacity .3s, fill .3s; 73 | fill: #000; 74 | } 75 | #dark-mode-toggle .sun { 76 | z-index: 1; 77 | transform: translate(-50%, 100%); 78 | opacity: 0; 79 | transition: transform .3s, opacity .3s; 80 | } 81 | } 82 | /* Desktop */ 83 | @media only screen and (min-width: 64em) { 84 | #dark-mode-toggle { 85 | position: relative; 86 | top: auto; 87 | right: auto; 88 | transform: none; 89 | margin-left: 1.875em; 90 | margin-bottom: 0em; 91 | } 92 | #dark-mode-toggle .moon { 93 | fill: #fff; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /images/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /images/stars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /css/dark.less: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Core Dark Styles --> 3 | <--- -------------------------- -*/ 4 | 5 | /* Mobile */ 6 | @media only screen and (min-width: 0em) { 7 | 8 | // Dark Mode Color Scheme 9 | :root { 10 | --dark: #082032; 11 | --medium: #2C394B; 12 | --accent: #334756; 13 | } 14 | 15 | body.dark-mode { 16 | background-color: var(--dark); 17 | 18 | p, li, h1, h2, h3, h4, h5, h6 { 19 | color: #fff; 20 | } 21 | 22 | // hide all light classes 23 | .light { 24 | display: none; 25 | } 26 | 27 | // show all dark classes 28 | .dark { 29 | display: block !important; 30 | } 31 | } 32 | 33 | .dark { 34 | display: none; 35 | } 36 | } 37 | 38 | /*-- -------------------------- --> 39 | <--- Dark Mode Toggle --> 40 | <--- -------------------------- -*/ 41 | 42 | /* Mobile */ 43 | @media only screen and (min-width: 0em) { 44 | 45 | // Dark Mode Toggle Switch Animation 46 | body.dark-mode { 47 | #dark-mode-toggle { 48 | .sun { 49 | transform: translate(-50%, -50%); 50 | opacity: 1; 51 | } 52 | 53 | .moon { 54 | transform: translate(-50%, -150%); 55 | opacity: 0; 56 | } 57 | } 58 | } 59 | 60 | // Toggle 61 | #dark-mode-toggle { 62 | display: block; 63 | position: absolute; 64 | top: 50%; 65 | transform: translateY(-50%); 66 | right: 60/16em; 67 | width: 48/16em; 68 | height: 48/16em; 69 | background: transparent; 70 | border: none; 71 | overflow: hidden; 72 | padding: 0; 73 | 74 | //center image inside button 75 | img, svg { 76 | position: absolute; 77 | top: 50%; 78 | left: 50%; 79 | transform: translate(-50%, -50%); 80 | width: 25/16em; 81 | height: 25/16em; 82 | pointer-events: none; 83 | 84 | } 85 | 86 | .moon { 87 | z-index: 2; 88 | // Transition properties 89 | transition: transform .3s, opacity .3s, fill .3s; 90 | fill: #000; // --> change the color of the moon graphic based ont he background being lighter or darker 91 | } 92 | 93 | .sun { 94 | z-index: 1; 95 | // Transition property 96 | transform: translate(-50%, 100%); 97 | opacity: 0; 98 | transition: transform .3s, opacity .3s; 99 | } 100 | 101 | } 102 | } 103 | 104 | /* Desktop */ 105 | @media only screen and (min-width: 64em) { 106 | #dark-mode-toggle { 107 | position: relative; 108 | top: auto; 109 | right: auto; 110 | transform: none; 111 | margin-left: 30/16em; 112 | margin-bottom: 0/16em; 113 | 114 | .moon { 115 | fill: #fff; 116 | } 117 | } 118 | } -------------------------------------------------------------------------------- /images/sun-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/projects.css: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Portfolio --> 3 | <--- -------------------------- -*/ 4 | /* Mobile */ 5 | @media only screen and (min-width: 0em) { 6 | #portfolio { 7 | padding-top: 3.125em; 8 | padding-bottom: 35%; 9 | position: relative; 10 | z-index: 5; 11 | } 12 | #portfolio .container { 13 | width: 96%; 14 | max-width: 82.625em; 15 | padding: 0; 16 | margin: auto; 17 | display: -webkit-box; 18 | display: -ms-flexbox; 19 | display: flex; 20 | -webkit-box-pack: center; 21 | -ms-flex-pack: center; 22 | justify-content: center; 23 | -webkit-box-align: start; 24 | -ms-flex-align: start; 25 | align-items: flex-start; 26 | -ms-flex-wrap: wrap; 27 | flex-wrap: wrap; 28 | gap: 1.875em; 29 | font-size: min(1.3vw, 1em); 30 | } 31 | #portfolio .container .row { 32 | display: -webkit-box; 33 | display: -ms-flexbox; 34 | display: flex; 35 | -webkit-box-orient: vertical; 36 | -webkit-box-direction: normal; 37 | -ms-flex-direction: column; 38 | flex-direction: column; 39 | -webkit-box-pack: start; 40 | -ms-flex-pack: start; 41 | justify-content: flex-start; 42 | gap: 1.875em; 43 | } 44 | #portfolio .container .row:nth-of-type(1) picture:nth-of-type(1) { 45 | width: 26.25em; 46 | height: 35.4375em; 47 | } 48 | #portfolio .container .row:nth-of-type(1) picture:nth-of-type(2) { 49 | width: 26.25em; 50 | height: 39.3125em; 51 | } 52 | #portfolio .container .row:nth-of-type(1) picture:nth-of-type(3) { 53 | width: 26.25em; 54 | height: 32em; 55 | } 56 | #portfolio .container .row:nth-of-type(2) picture:nth-of-type(1) { 57 | width: 26.25em; 58 | height: 30.75em; 59 | } 60 | #portfolio .container .row:nth-of-type(2) picture:nth-of-type(2) { 61 | width: 26.25em; 62 | height: 32.3125em; 63 | } 64 | #portfolio .container .row:nth-of-type(2) picture:nth-of-type(3) { 65 | width: 26.25em; 66 | height: 39.3125em; 67 | } 68 | #portfolio .container .row:nth-of-type(3) picture:nth-of-type(1) { 69 | width: 26.25em; 70 | height: 39.0625em; 71 | } 72 | #portfolio .container .row:nth-of-type(3) picture:nth-of-type(2) { 73 | width: 26.25em; 74 | height: 28.25em; 75 | } 76 | #portfolio .container .row:nth-of-type(3) picture:nth-of-type(3) { 77 | width: 26.25em; 78 | height: 39.3125em; 79 | } 80 | #portfolio .container .row picture { 81 | position: relative; 82 | display: block; 83 | } 84 | #portfolio .container .row picture img { 85 | position: absolute; 86 | top: 0; 87 | left: 0; 88 | height: 100%; 89 | width: 100%; 90 | -o-object-fit: cover; 91 | object-fit: cover; 92 | border-radius: 0.5em; 93 | } 94 | } 95 | /* Small Desktop */ 96 | @media only screen and (min-width: 64em) { 97 | #portfolio { 98 | padding: 9.375em 0; 99 | } 100 | } 101 | /*-- -------------------------- --> 102 | <--- Final Call To Action --> 103 | <--- -------------------------- -*/ 104 | /* Mobile */ 105 | @media only screen and (min-width: 0em) { 106 | #cta { 107 | position: relative; 108 | padding: 3.125em 0; 109 | } 110 | #cta:before { 111 | content: ''; 112 | position: absolute; 113 | display: block; 114 | height: 100%; 115 | width: 100%; 116 | background: #000; 117 | opacity: .7; 118 | top: 0; 119 | left: 0; 120 | z-index: -1; 121 | } 122 | #cta .container { 123 | text-align: center; 124 | } 125 | #cta picture { 126 | position: absolute; 127 | top: 0; 128 | left: 0; 129 | height: 100%; 130 | width: 100%; 131 | z-index: -2; 132 | } 133 | #cta picture img { 134 | position: absolute; 135 | top: 0; 136 | left: 0; 137 | height: 100%; 138 | width: 100%; 139 | -o-object-fit: cover; 140 | object-fit: cover; 141 | } 142 | #cta .title { 143 | font-weight: 900; 144 | font-size: min(9vw, 3em); 145 | line-height: 1.20833333; 146 | color: #fff; 147 | position: relative; 148 | margin-bottom: 0.75em; 149 | text-align: center; 150 | } 151 | #cta p { 152 | color: #fff; 153 | text-align: center; 154 | opacity: 1; 155 | margin: auto; 156 | margin-bottom: 2em; 157 | width: 96%; 158 | max-width: 33.22222222em; 159 | } 160 | } 161 | /* Small Desktop */ 162 | @media only screen and (min-width: 64em) { 163 | #cta { 164 | padding: 10.5em 0; 165 | } 166 | } 167 | /* Large Desktop */ 168 | @media only screen and (min-width: 1300px) { 169 | #cta { 170 | position: relative; 171 | margin-top: 6.25em; 172 | } 173 | #cta:before { 174 | display: none; 175 | } 176 | #cta:after { 177 | content: ''; 178 | position: absolute; 179 | display: block; 180 | height: 69.25em; 181 | width: 125em; 182 | background: url("../images/cta-squares.svg"); 183 | background-size: contain; 184 | background-position: center; 185 | background-repeat: no-repeat; 186 | opacity: 1; 187 | bottom: 0; 188 | left: 50%; 189 | -webkit-transform: translateX(-50%); 190 | transform: translateX(-50%); 191 | z-index: -3; 192 | } 193 | #cta .container { 194 | width: 90.0625%; 195 | margin: auto; 196 | } 197 | #cta picture { 198 | width: 90.0625%; 199 | left: 50%; 200 | -webkit-transform: translateX(-50%); 201 | transform: translateX(-50%); 202 | } 203 | #cta picture:before { 204 | content: ''; 205 | position: absolute; 206 | display: block; 207 | height: 100%; 208 | width: 100%; 209 | background: #000; 210 | opacity: .7; 211 | top: 0; 212 | left: 0; 213 | z-index: 1; 214 | } 215 | } 216 | /* Dark Mode */ 217 | @media only screen and (min-width: 0em) { 218 | body.dark-mode #cta:after { 219 | display: none; 220 | } 221 | } 222 | -------------------------------------------------------------------------------- /css/critical.css: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Landing --> 3 | <--- -------------------------- -*/ 4 | /* Mobile */ 5 | @media only screen and (min-width: 0em) { 6 | #hero { 7 | font-size: inherit; 8 | padding-bottom: 16.875em; 9 | padding-top: 9.375em; 10 | position: relative; 11 | z-index: 1; 12 | } 13 | #hero:before { 14 | content: ''; 15 | position: absolute; 16 | display: block; 17 | height: 100%; 18 | width: 100%; 19 | background: #000; 20 | opacity: .65; 21 | top: 0; 22 | left: 0; 23 | z-index: -10; 24 | } 25 | #hero picture { 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | height: 100%; 30 | width: 100%; 31 | z-index: -11; 32 | } 33 | #hero picture img { 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | height: 100%; 38 | width: 100%; 39 | -o-object-fit: cover; 40 | object-fit: cover; 41 | } 42 | #hero .hero-content { 43 | width: 96%; 44 | max-width: 71.5em; 45 | margin: auto; 46 | position: relative; 47 | z-index: 10; 48 | text-align: center; 49 | } 50 | #hero .hero-content { 51 | padding: 0; 52 | } 53 | #hero .heroText { 54 | width: 100%; 55 | margin: auto; 56 | max-width: 56.875em; 57 | } 58 | #hero h1 { 59 | font-weight: bold; 60 | font-size: min(12vw, 4em); 61 | color: #fff; 62 | text-align: center; 63 | line-height: 1.203125; 64 | margin: auto; 65 | width: 100%; 66 | max-width: 14.125em; 67 | margin-bottom: 1.4375em; 68 | position: relative; 69 | } 70 | #hero h1:before { 71 | content: ''; 72 | position: absolute; 73 | display: block; 74 | height: 0.0625em; 75 | width: 1.515625em; 76 | background: var(--primary); 77 | opacity: 1; 78 | bottom: -0.25em; 79 | left: 50%; 80 | -webkit-transform: translateX(-50%); 81 | transform: translateX(-50%); 82 | } 83 | #hero p { 84 | line-height: 1.55em; 85 | margin: auto; 86 | margin-bottom: 1.72222222em; 87 | color: #fff; 88 | width: 100%; 89 | text-align: center; 90 | max-width: 34.27777778em; 91 | opacity: 1; 92 | } 93 | #hero .button-solid { 94 | margin: auto; 95 | display: inline-block; 96 | width: auto; 97 | } 98 | } 99 | /* Tablet */ 100 | @media only screen and (min-width: 48em) { 101 | #hero { 102 | padding: 12.5em 0 18.75em 0; 103 | z-index: 1; 104 | overflow: hidden; 105 | } 106 | #hero .hero-content { 107 | display: -webkit-box; 108 | display: -ms-flexbox; 109 | display: flex; 110 | -webkit-box-pack: justify; 111 | -ms-flex-pack: justify; 112 | justify-content: space-between; 113 | position: relative; 114 | } 115 | } 116 | /* Small Desktop */ 117 | @media only screen and (min-width: 1300px) { 118 | #hero { 119 | padding-top: 17.0625em; 120 | padding-bottom: 19.1875em; 121 | background: url("../images/landing.jpg"); 122 | background-size: cover; 123 | background-position: center; 124 | background-repeat: no-repeat; 125 | background-attachment: fixed; 126 | } 127 | #hero picture { 128 | display: none; 129 | } 130 | } 131 | /*-- -------------------------- --> 132 | <--- Services --> 133 | <--- -------------------------- -*/ 134 | /* Mobile */ 135 | @media only screen and (min-width: 0em) { 136 | .services { 137 | border-radius: 0.3125em; 138 | margin: auto; 139 | margin-top: -10.4375em; 140 | position: relative; 141 | z-index: 100; 142 | background: #fff; 143 | width: 90%; 144 | max-width: 82.5em; 145 | padding: 3.125em 1.25em; 146 | border-top: 0.375em solid var(--primary); 147 | -webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05); 148 | box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05); 149 | margin-bottom: 3.125em; 150 | } 151 | .services .card { 152 | display: block; 153 | width: 100%; 154 | max-width: 22.3125em; 155 | margin: auto; 156 | margin-bottom: 3.125em; 157 | } 158 | .services .card:last-of-type { 159 | margin-bottom: 0; 160 | } 161 | .services .card picture { 162 | background: var(--primary); 163 | width: 5.5em; 164 | height: 5.5em; 165 | display: -webkit-box; 166 | display: -ms-flexbox; 167 | display: flex; 168 | -webkit-box-pack: center; 169 | -ms-flex-pack: center; 170 | justify-content: center; 171 | -webkit-box-align: center; 172 | -ms-flex-align: center; 173 | align-items: center; 174 | margin: auto; 175 | margin-bottom: 1.4375em; 176 | border-radius: 50%; 177 | } 178 | .services .card picture img { 179 | width: 3em; 180 | height: 3em; 181 | } 182 | .services .card h2 { 183 | text-align: center; 184 | font-size: 2em; 185 | line-height: 1.35em; 186 | font-weight: 700; 187 | color: #1a1a1a; 188 | margin-bottom: 0.65em; 189 | } 190 | .services .card p { 191 | text-align: center; 192 | line-height: 1.33333333em; 193 | width: 100%; 194 | opacity: .7; 195 | } 196 | } 197 | /* Inbetween */ 198 | @media only screen and (min-width: 768px) { 199 | .services { 200 | font-size: min(1.8vw, 1em); 201 | display: -webkit-box; 202 | display: -ms-flexbox; 203 | display: flex; 204 | -webkit-box-pack: justify; 205 | -ms-flex-pack: justify; 206 | justify-content: space-between; 207 | -webkit-box-align: start; 208 | -ms-flex-align: start; 209 | align-items: flex-start; 210 | width: 98%; 211 | } 212 | .services .card { 213 | margin: 0; 214 | max-width: 20.3125em; 215 | } 216 | } 217 | /* Large Desktop */ 218 | @media only screen and (min-width: 1300px) { 219 | .services { 220 | padding: 3.125em 5em; 221 | } 222 | .services .card { 223 | max-width: 22.3125em; 224 | } 225 | } 226 | /* Dark mode */ 227 | @media only screen and (min-width: 0em) { 228 | body.dark-mode #services { 229 | background: var(--medium); 230 | } 231 | body.dark-mode #services picture { 232 | background: var(--primaryDark); 233 | } 234 | body.dark-mode #services h2 { 235 | color: #fff; 236 | font-weight: bold; 237 | } 238 | } 239 | -------------------------------------------------------------------------------- /css/reviews.css: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Reviews --> 3 | <--- -------------------------- -*/ 4 | /* Mobile */ 5 | @media only screen and (min-width: 0em) { 6 | #reviews { 7 | padding-top: 7.5em; 8 | padding-bottom: 3.125em; 9 | margin: auto; 10 | } 11 | #reviews .container { 12 | width: 96%; 13 | max-width: 82.5em; 14 | } 15 | #reviews .review { 16 | padding: 4em 1.875em 1.125em 1.875em; 17 | -webkit-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05); 18 | box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05); 19 | width: 100%; 20 | max-width: 25.625em; 21 | margin: auto; 22 | margin-bottom: 6.25em; 23 | border-radius: 0.3125em; 24 | position: relative; 25 | background: #fff; 26 | display: -webkit-box; 27 | display: -ms-flexbox; 28 | display: flex; 29 | -webkit-box-orient: vertical; 30 | -webkit-box-direction: normal; 31 | -ms-flex-direction: column; 32 | flex-direction: column; 33 | } 34 | #reviews .review:last-of-type { 35 | margin-bottom: 0; 36 | } 37 | #reviews .review .profile { 38 | display: block; 39 | height: 6.1875em; 40 | width: 6.1875em; 41 | margin-left: 0; 42 | border-radius: 50%; 43 | margin-bottom: 1em; 44 | position: absolute; 45 | left: 1.875em; 46 | top: -3.1875em; 47 | } 48 | #reviews .review p { 49 | line-height: 1.33333333; 50 | margin-bottom: 1.55555556em; 51 | text-align: left; 52 | } 53 | #reviews .review .star-group { 54 | border-top: 1px solid #E7E7E7; 55 | padding-top: 1em; 56 | display: -webkit-box; 57 | display: -ms-flexbox; 58 | display: flex; 59 | -webkit-box-pack: justify; 60 | -ms-flex-pack: justify; 61 | justify-content: space-between; 62 | -webkit-box-align: center; 63 | -ms-flex-align: center; 64 | align-items: center; 65 | -ms-flex-wrap: nowrap; 66 | flex-wrap: nowrap; 67 | margin-top: auto; 68 | } 69 | #reviews .review .star-group .name { 70 | color: #1A1A1A; 71 | line-height: 1.33333333em; 72 | text-align: left; 73 | font-weight: bold; 74 | display: block; 75 | } 76 | #reviews .review .star-group .desc { 77 | color: #575757; 78 | font-weight: 400; 79 | display: block; 80 | } 81 | #reviews .review .star-group img { 82 | display: block; 83 | width: 5.6875em; 84 | height: 0.9375em; 85 | margin: 0; 86 | } 87 | } 88 | /* Tablet */ 89 | @media only screen and (min-width: 48em) { 90 | #reviews { 91 | padding-top: 9.375em; 92 | padding-bottom: 3.125em; 93 | } 94 | #reviews .container { 95 | font-size: min(1.4vw, 1em); 96 | display: -webkit-box; 97 | display: -ms-flexbox; 98 | display: flex; 99 | -webkit-box-pack: center; 100 | -ms-flex-pack: center; 101 | justify-content: center; 102 | -ms-flex-wrap: wrap; 103 | flex-wrap: wrap; 104 | padding: 0; 105 | -webkit-column-gap: 1.875em; 106 | column-gap: 1.875em; 107 | } 108 | #reviews .review { 109 | margin: 0; 110 | margin-bottom: 9.375em; 111 | } 112 | #reviews .review:last-of-type { 113 | margin-bottom: 9.375em; 114 | } 115 | } 116 | /* Dark Mode */ 117 | @media only screen and (min-width: 0em) { 118 | body.dark-mode #reviews .review { 119 | background: var(--medium); 120 | } 121 | body.dark-mode #reviews .review .name { 122 | color: #fff; 123 | } 124 | body.dark-mode #reviews .review .desc { 125 | color: #fff; 126 | opacity: .7; 127 | } 128 | } 129 | /*-- -------------------------- --> 130 | <--- Final Call To Action --> 131 | <--- -------------------------- -*/ 132 | /* Mobile */ 133 | @media only screen and (min-width: 0em) { 134 | #cta { 135 | position: relative; 136 | padding: 3.125em 0; 137 | } 138 | #cta:before { 139 | content: ''; 140 | position: absolute; 141 | display: block; 142 | height: 100%; 143 | width: 100%; 144 | background: #000; 145 | opacity: .7; 146 | top: 0; 147 | left: 0; 148 | z-index: -1; 149 | } 150 | #cta .container { 151 | text-align: center; 152 | } 153 | #cta picture { 154 | position: absolute; 155 | top: 0; 156 | left: 0; 157 | height: 100%; 158 | width: 100%; 159 | z-index: -2; 160 | } 161 | #cta picture img { 162 | position: absolute; 163 | top: 0; 164 | left: 0; 165 | height: 100%; 166 | width: 100%; 167 | -o-object-fit: cover; 168 | object-fit: cover; 169 | } 170 | #cta .title { 171 | font-weight: 900; 172 | font-size: min(9vw, 3em); 173 | line-height: 1.20833333; 174 | color: #fff; 175 | position: relative; 176 | margin-bottom: 0.75em; 177 | text-align: center; 178 | } 179 | #cta p { 180 | color: #fff; 181 | text-align: center; 182 | opacity: 1; 183 | margin: auto; 184 | margin-bottom: 2em; 185 | width: 96%; 186 | max-width: 33.22222222em; 187 | } 188 | } 189 | /* Small Desktop */ 190 | @media only screen and (min-width: 64em) { 191 | #cta { 192 | padding: 10.5em 0; 193 | } 194 | } 195 | /* Large Desktop */ 196 | @media only screen and (min-width: 1300px) { 197 | #cta { 198 | position: relative; 199 | margin-top: 6.25em; 200 | } 201 | #cta:before { 202 | display: none; 203 | } 204 | #cta:after { 205 | content: ''; 206 | position: absolute; 207 | display: block; 208 | height: 69.25em; 209 | width: 125em; 210 | background: url("../images/cta-squares.svg"); 211 | background-size: contain; 212 | background-position: center; 213 | background-repeat: no-repeat; 214 | opacity: 1; 215 | bottom: 0; 216 | left: 50%; 217 | -webkit-transform: translateX(-50%); 218 | transform: translateX(-50%); 219 | z-index: -3; 220 | } 221 | #cta .container { 222 | width: 90.0625%; 223 | margin: auto; 224 | } 225 | #cta picture { 226 | width: 90.0625%; 227 | left: 50%; 228 | -webkit-transform: translateX(-50%); 229 | transform: translateX(-50%); 230 | } 231 | #cta picture:before { 232 | content: ''; 233 | position: absolute; 234 | display: block; 235 | height: 100%; 236 | width: 100%; 237 | background: #000; 238 | opacity: .7; 239 | top: 0; 240 | left: 0; 241 | z-index: 1; 242 | } 243 | } 244 | /* Dark Mode */ 245 | @media only screen and (min-width: 0em) { 246 | body.dark-mode #cta:after { 247 | display: none; 248 | } 249 | } 250 | -------------------------------------------------------------------------------- /css/about.css: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Side By Side --> 3 | <--- -------------------------- -*/ 4 | /* Mobile */ 5 | @media only screen and (min-width: 0em) { 6 | #sidebyside { 7 | padding: 50px 0; 8 | } 9 | #sidebyside .container { 10 | display: -webkit-box; 11 | display: -ms-flexbox; 12 | display: flex; 13 | -webkit-box-pack: center; 14 | -ms-flex-pack: center; 15 | justify-content: center; 16 | -webkit-box-orient: vertical; 17 | -webkit-box-direction: normal; 18 | -ms-flex-direction: column; 19 | flex-direction: column; 20 | -webkit-box-align: center; 21 | -ms-flex-align: center; 22 | align-items: center; 23 | } 24 | #sidebyside .content { 25 | -webkit-box-ordinal-group: 3; 26 | -ms-flex-order: 2; 27 | order: 2; 28 | margin: auto; 29 | margin-top: 4.6875em; 30 | max-width: 38.1875em; 31 | } 32 | #sidebyside .content h2 { 33 | font-size: 3em; 34 | margin-bottom: 0.875em; 35 | } 36 | #sidebyside .content p { 37 | margin-bottom: 1.11111111em; 38 | } 39 | #sidebyside .content ul { 40 | padding-left: 1.25em; 41 | margin-bottom: 1.25em; 42 | } 43 | #sidebyside .content ul li { 44 | list-style: none; 45 | display: -webkit-box; 46 | display: -ms-flexbox; 47 | display: flex; 48 | -webkit-box-pack: start; 49 | -ms-flex-pack: start; 50 | justify-content: flex-start; 51 | -webkit-box-align: start; 52 | -ms-flex-align: start; 53 | align-items: flex-start; 54 | } 55 | #sidebyside .content ul li img { 56 | margin-right: 0.625em; 57 | margin-top: 0.22222222em; 58 | } 59 | #sidebyside .content .button-solid { 60 | margin-top: 1.78571429em; 61 | } 62 | #sidebyside .image-box { 63 | display: block; 64 | position: relative; 65 | margin: auto; 66 | width: 38.1875em; 67 | height: 53.8125em; 68 | font-size: min(1.4vw, 1em); 69 | } 70 | #sidebyside .image-box:before { 71 | content: ''; 72 | position: absolute; 73 | display: block; 74 | height: 100%; 75 | width: 100%; 76 | background: var(--primary); 77 | opacity: 1; 78 | top: 2.5em; 79 | left: -2.5em; 80 | } 81 | #sidebyside .image-box:after { 82 | content: ''; 83 | position: absolute; 84 | display: block; 85 | height: 32.25em; 86 | width: 28.75em; 87 | background: url("/images/content-circles.svg"); 88 | background-size: contain; 89 | background-position: center; 90 | background-repeat: no-repeat; 91 | opacity: 1; 92 | top: -14.125em; 93 | right: -6.8125em; 94 | z-index: -1; 95 | } 96 | #sidebyside .image-box img { 97 | position: absolute; 98 | top: 0; 99 | left: 0; 100 | height: 100%; 101 | width: 100%; 102 | -o-object-fit: cover; 103 | object-fit: cover; 104 | } 105 | } 106 | /* Inbetween */ 107 | @media only screen and (min-width: 666px) { 108 | #sidebyside { 109 | padding: 6.25em 0; 110 | } 111 | } 112 | /* Small Desktop */ 113 | @media only screen and (min-width: 1300px) { 114 | #sidebyside { 115 | padding: 9.375em 0; 116 | } 117 | #sidebyside .container { 118 | max-width: 86.9375em; 119 | -webkit-box-orient: horizontal; 120 | -webkit-box-direction: normal; 121 | -ms-flex-direction: row; 122 | flex-direction: row; 123 | -webkit-box-pack: justify; 124 | -ms-flex-pack: justify; 125 | justify-content: space-between; 126 | -webkit-box-align: start; 127 | -ms-flex-align: start; 128 | align-items: flex-start; 129 | } 130 | #sidebyside .content { 131 | margin: 0; 132 | width: 60%; 133 | } 134 | #sidebyside .image-box { 135 | margin: 0; 136 | margin-right: 10.625em; 137 | } 138 | } 139 | /*-- -------------------------- --> 140 | <--- Final Call To Action --> 141 | <--- -------------------------- -*/ 142 | /* Mobile */ 143 | @media only screen and (min-width: 0em) { 144 | #cta { 145 | position: relative; 146 | padding: 3.125em 0; 147 | } 148 | #cta:before { 149 | content: ''; 150 | position: absolute; 151 | display: block; 152 | height: 100%; 153 | width: 100%; 154 | background: #000; 155 | opacity: .7; 156 | top: 0; 157 | left: 0; 158 | z-index: -1; 159 | } 160 | #cta .container { 161 | text-align: center; 162 | } 163 | #cta picture { 164 | position: absolute; 165 | top: 0; 166 | left: 0; 167 | height: 100%; 168 | width: 100%; 169 | z-index: -2; 170 | } 171 | #cta picture img { 172 | position: absolute; 173 | top: 0; 174 | left: 0; 175 | height: 100%; 176 | width: 100%; 177 | -o-object-fit: cover; 178 | object-fit: cover; 179 | } 180 | #cta .title { 181 | font-weight: 900; 182 | font-size: min(9vw, 3em); 183 | line-height: 1.20833333; 184 | color: #fff; 185 | position: relative; 186 | margin-bottom: 0.75em; 187 | text-align: center; 188 | } 189 | #cta p { 190 | color: #fff; 191 | text-align: center; 192 | opacity: 1; 193 | margin: auto; 194 | margin-bottom: 2em; 195 | width: 96%; 196 | max-width: 33.22222222em; 197 | } 198 | } 199 | /* Small Desktop */ 200 | @media only screen and (min-width: 64em) { 201 | #cta { 202 | padding: 10.5em 0; 203 | } 204 | } 205 | /* Large Desktop */ 206 | @media only screen and (min-width: 1300px) { 207 | #cta { 208 | position: relative; 209 | margin-top: 6.25em; 210 | } 211 | #cta:before { 212 | display: none; 213 | } 214 | #cta:after { 215 | content: ''; 216 | position: absolute; 217 | display: block; 218 | height: 69.25em; 219 | width: 125em; 220 | background: url("../images/cta-squares.svg"); 221 | background-size: contain; 222 | background-position: center; 223 | background-repeat: no-repeat; 224 | opacity: 1; 225 | bottom: 0; 226 | left: 50%; 227 | -webkit-transform: translateX(-50%); 228 | transform: translateX(-50%); 229 | z-index: -3; 230 | } 231 | #cta .container { 232 | width: 90.0625%; 233 | margin: auto; 234 | } 235 | #cta picture { 236 | width: 90.0625%; 237 | left: 50%; 238 | -webkit-transform: translateX(-50%); 239 | transform: translateX(-50%); 240 | } 241 | #cta picture:before { 242 | content: ''; 243 | position: absolute; 244 | display: block; 245 | height: 100%; 246 | width: 100%; 247 | background: #000; 248 | opacity: .7; 249 | top: 0; 250 | left: 0; 251 | z-index: 1; 252 | } 253 | } 254 | /* Dark Mode */ 255 | @media only screen and (min-width: 0em) { 256 | body.dark-mode #cta:after { 257 | display: none; 258 | } 259 | } 260 | -------------------------------------------------------------------------------- /css/critical.less: -------------------------------------------------------------------------------- 1 | 2 | /*-- -------------------------- --> 3 | <--- Landing --> 4 | <--- -------------------------- -*/ 5 | 6 | /* Mobile */ 7 | @media only screen and (min-width: 0em) { 8 | 9 | #hero { 10 | font-size: inherit; 11 | padding-bottom: 270/16em; 12 | padding-top: 150/16em; 13 | position: relative; 14 | z-index: 1; 15 | 16 | &:before { 17 | content: ''; 18 | position: absolute; 19 | display: block; 20 | height: 100%; 21 | width: 100%; 22 | background: #000; 23 | opacity: .65; 24 | top: 0; 25 | left: 0; 26 | z-index: -10; 27 | } 28 | 29 | picture { 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | height: 100%; 34 | width: 100%; 35 | z-index: -11; 36 | 37 | img { 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | height: 100%; 42 | width: 100%; 43 | object-fit: cover; 44 | } 45 | } 46 | 47 | .hero-content { 48 | width: 96%; 49 | max-width: 1144/16em; 50 | margin: auto; 51 | position: relative; 52 | z-index: 10; 53 | text-align: center; 54 | } 55 | 56 | .hero-content { 57 | padding: 0; 58 | } 59 | 60 | .heroText { 61 | width: 100%; 62 | margin: auto; 63 | max-width: 910/16em; 64 | } 65 | 66 | h1 { 67 | font-weight: bold; 68 | font-size:~"min(12vw, 4em)"; 69 | color: #fff; 70 | text-align: center; 71 | line-height: 77/64; 72 | margin: auto; 73 | width: 100%; 74 | max-width: 904/64em; 75 | margin-bottom: 92/64em; 76 | position: relative; 77 | 78 | &:before { 79 | content: ''; 80 | position: absolute; 81 | display: block; 82 | height: 4/64em; 83 | width: 97/64em; 84 | background: var(--primary); 85 | opacity: 1; 86 | bottom: -16/64em; 87 | left: 50%; 88 | transform: translateX(-50%); 89 | } 90 | } 91 | 92 | p { 93 | line-height: 1.55em; 94 | margin: auto; 95 | margin-bottom: 31/18em; 96 | color: #fff; 97 | width: 100%; 98 | text-align: center; 99 | max-width: 617/18em; 100 | opacity: 1; 101 | } 102 | 103 | .button-solid { 104 | margin: auto; 105 | display: inline-block; 106 | width: auto; 107 | } 108 | } 109 | 110 | } 111 | 112 | /* Tablet */ 113 | @media only screen and (min-width: 48em) { 114 | 115 | #hero { 116 | padding: 200/16em 0 300/16em 0; 117 | z-index: 1; 118 | overflow: hidden; 119 | 120 | .hero-content { 121 | display: flex; 122 | justify-content: space-between; 123 | position: relative; 124 | } 125 | } 126 | } 127 | 128 | /* Small Desktop */ 129 | @media only screen and (min-width: 1300px) { 130 | 131 | #hero { 132 | padding-top: 273/16em; 133 | padding-bottom: 307/16em; 134 | background: url("../images/landing.jpg"); 135 | background-size: cover; 136 | background-position: center; 137 | background-repeat: no-repeat; 138 | background-attachment: fixed; 139 | 140 | picture { 141 | display: none; 142 | } 143 | } 144 | } 145 | 146 | /*-- -------------------------- --> 147 | <--- Services --> 148 | <--- -------------------------- -*/ 149 | 150 | /* Mobile */ 151 | @media only screen and (min-width: 0em) { 152 | 153 | .services { 154 | border-radius: 5/16em; 155 | margin: auto; 156 | margin-top: -167/16em; 157 | position: relative; 158 | z-index: 100; 159 | background: #fff; 160 | width: 90%; 161 | max-width: 1320/16em; 162 | padding: 50/16em 20/16em; 163 | border-top: 6/16em solid var(--primary); 164 | box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05); 165 | margin-bottom: 50/16em; 166 | .card { 167 | display: block; 168 | width: 100%; 169 | max-width: 357/16em; 170 | margin: auto; 171 | margin-bottom: 50/16em; 172 | &:last-of-type { 173 | margin-bottom: 0; 174 | } 175 | 176 | picture { 177 | background: var(--primary); 178 | width: 88/16em; 179 | height: 88/16em; 180 | display: flex; 181 | justify-content: center; 182 | align-items: center; 183 | margin: auto; 184 | margin-bottom: 23/16em; 185 | border-radius: 50%; 186 | 187 | img { 188 | width: 48/16em; 189 | height: 48/16em; 190 | } 191 | } 192 | h2 { 193 | text-align: center; 194 | font-size: 32/16em; 195 | line-height: 27/20em; 196 | font-weight: 700; 197 | color: #1a1a1a; 198 | margin-bottom: 13/20em; 199 | } 200 | p { 201 | text-align: center; 202 | line-height: 24/18em; 203 | width: 100%; 204 | opacity: .7; 205 | } 206 | } 207 | } 208 | } 209 | 210 | /* Inbetween */ 211 | @media only screen and (min-width: 768px) { 212 | .services { 213 | font-size:~"min(1.8vw, 1em)"; 214 | display: flex; 215 | justify-content: space-between; 216 | align-items: flex-start; 217 | width: 98%; 218 | 219 | .card { 220 | margin: 0; 221 | max-width: 325/16em; 222 | } 223 | } 224 | } 225 | 226 | /* Large Desktop */ 227 | @media only screen and (min-width: 1300px) { 228 | .services { 229 | padding: 50/16em 80/16em; 230 | 231 | .card { 232 | max-width: 357/16em; 233 | } 234 | } 235 | } 236 | 237 | /* Dark mode */ 238 | @media only screen and (min-width: 0em) { 239 | body.dark-mode { 240 | #services { 241 | background: var(--medium); 242 | 243 | picture { 244 | background: var(--primaryDark); 245 | } 246 | 247 | h2 { 248 | color: #fff; 249 | font-weight: bold; 250 | } 251 | } 252 | } 253 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /css/projects.less: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Portfolio --> 3 | <--- -------------------------- -*/ 4 | 5 | /* Mobile */ 6 | @media only screen and (min-width: 0em) { 7 | #portfolio { 8 | padding-top: 50/16em; 9 | padding-bottom: 35%; 10 | position: relative; 11 | z-index: 5; 12 | 13 | .container { 14 | width: 96%; 15 | max-width: 1322/16em; 16 | padding: 0; 17 | margin: auto; 18 | display: flex; 19 | justify-content: center; 20 | align-items: flex-start; 21 | flex-wrap: wrap; 22 | gap: 30/16em; 23 | font-size:~"min(1.3vw, 1em)"; 24 | 25 | .row { 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: flex-start; 29 | gap: 30/16em; 30 | 31 | &:nth-of-type(1) { 32 | picture { 33 | &:nth-of-type(1) { 34 | width: 420/16em; 35 | height: 567/16em; 36 | } 37 | 38 | &:nth-of-type(2) { 39 | width: 420/16em; 40 | height: 629/16em; 41 | } 42 | 43 | &:nth-of-type(3) { 44 | width: 420/16em; 45 | height: 512/16em; 46 | } 47 | 48 | 49 | } 50 | } 51 | 52 | &:nth-of-type(2) { 53 | picture { 54 | &:nth-of-type(1) { 55 | width: 420/16em; 56 | height: 492/16em; 57 | } 58 | 59 | &:nth-of-type(2) { 60 | width: 420/16em; 61 | height: 517/16em; 62 | } 63 | 64 | &:nth-of-type(3) { 65 | width: 420/16em; 66 | height: 629/16em; 67 | } 68 | } 69 | } 70 | 71 | &:nth-of-type(3) { 72 | picture { 73 | &:nth-of-type(1) { 74 | width: 420/16em; 75 | height: 625/16em; 76 | } 77 | 78 | &:nth-of-type(2) { 79 | width: 420/16em; 80 | height: 452/16em; 81 | } 82 | 83 | &:nth-of-type(3) { 84 | width: 420/16em; 85 | height: 629/16em; 86 | } 87 | } 88 | } 89 | 90 | picture { 91 | position: relative; 92 | display: block; 93 | img { 94 | position: absolute; 95 | top: 0; 96 | left: 0; 97 | height: 100%; 98 | width: 100%; 99 | object-fit: cover; 100 | border-radius: 8/16em; 101 | } 102 | } 103 | } 104 | } 105 | } 106 | } 107 | 108 | /* Small Desktop */ 109 | @media only screen and (min-width: 64em) { 110 | #portfolio { 111 | padding: 150/16em 0; 112 | } 113 | } 114 | 115 | /*-- -------------------------- --> 116 | <--- Final Call To Action --> 117 | <--- -------------------------- -*/ 118 | 119 | /* Mobile */ 120 | @media only screen and (min-width: 0em) { 121 | #cta { 122 | position: relative; 123 | padding: 50/16em 0; 124 | 125 | &:before { 126 | content: ''; 127 | position: absolute; 128 | display: block; 129 | height: 100%; 130 | width: 100%; 131 | background: #000; 132 | opacity: .7; 133 | top: 0; 134 | left: 0; 135 | z-index: -1; 136 | } 137 | 138 | .container { 139 | text-align: center; 140 | } 141 | 142 | picture { 143 | position: absolute; 144 | top: 0; 145 | left: 0; 146 | height: 100%; 147 | width: 100%; 148 | z-index: -2; 149 | 150 | img { 151 | position: absolute; 152 | top: 0; 153 | left: 0; 154 | height: 100%; 155 | width: 100%; 156 | object-fit: cover; 157 | } 158 | } 159 | 160 | .title { 161 | font-weight: 900; 162 | font-size:~"min(9vw, 3em)"; 163 | line-height: 58/48; 164 | color: #fff; 165 | position: relative; 166 | margin-bottom: 36/48em; 167 | text-align: center; 168 | } 169 | 170 | p { 171 | color: #fff; 172 | text-align: center; 173 | opacity: 1; 174 | margin: auto; 175 | margin-bottom: 36/18em; 176 | width: 96%; 177 | max-width: 598/18em; 178 | 179 | } 180 | } 181 | } 182 | 183 | /* Small Desktop */ 184 | @media only screen and (min-width: 64em) { 185 | #cta { 186 | padding: 168/16em 0; 187 | } 188 | } 189 | 190 | /* Large Desktop */ 191 | @media only screen and (min-width: 1300px) { 192 | #cta { 193 | position: relative; 194 | margin-top: 100/16em; 195 | &:before { 196 | display: none; 197 | } 198 | &:after { 199 | content: ''; 200 | position: absolute; 201 | display: block; 202 | height: 1108/16em; 203 | width: 2000/16em; 204 | background: url("../images/cta-squares.svg"); 205 | background-size: contain; 206 | background-position: center; 207 | background-repeat: no-repeat; 208 | opacity: 1; 209 | bottom: 0; 210 | left: 50%; 211 | transform: translateX(-50%); 212 | z-index: -3; 213 | } 214 | .container { 215 | width: 90.0625%; 216 | margin: auto; 217 | } 218 | 219 | picture { 220 | width: 90.0625%; 221 | left: 50%; 222 | transform: translateX(-50%); 223 | 224 | &:before { 225 | content: ''; 226 | position: absolute; 227 | display: block; 228 | height: 100%; 229 | width: 100%; 230 | background: #000; 231 | opacity: .7; 232 | top: 0; 233 | left: 0; 234 | z-index: 1; 235 | } 236 | } 237 | } 238 | } 239 | 240 | /* Dark Mode */ 241 | @media only screen and (min-width: 0em) { 242 | body.dark-mode { 243 | #cta { 244 | &:after { 245 | display: none; 246 | } 247 | } 248 | } 249 | } -------------------------------------------------------------------------------- /images/content-circles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /css/about.less: -------------------------------------------------------------------------------- 1 | 2 | /*-- -------------------------- --> 3 | <--- Side By Side --> 4 | <--- -------------------------- -*/ 5 | 6 | /* Mobile */ 7 | @media only screen and (min-width: 0em) { 8 | #sidebyside { 9 | padding: 50px 0; 10 | .container { 11 | display: flex; 12 | justify-content: center; 13 | flex-direction: column; 14 | align-items: center; 15 | } 16 | 17 | .content { 18 | order: 2; 19 | margin: auto; 20 | margin-top: 75/16em; 21 | max-width: 611/16em; 22 | 23 | h2 { 24 | font-size: 48/16em; 25 | margin-bottom: 42/48em; 26 | } 27 | 28 | p { 29 | margin-bottom: 20/18em; 30 | } 31 | 32 | ul { 33 | padding-left: 20/16em; 34 | margin-bottom: 20/16em; 35 | 36 | li { 37 | list-style: none; 38 | display: flex; 39 | justify-content: flex-start; 40 | align-items: flex-start; 41 | 42 | img { 43 | margin-right: 10/16em; 44 | margin-top: 4/18em; 45 | } 46 | } 47 | } 48 | 49 | .button-solid { 50 | margin-top: 25/14em; 51 | } 52 | } 53 | 54 | .image-box { 55 | display: block; 56 | position: relative; 57 | margin: auto; 58 | width: 611/16em; 59 | height: 861/16em; 60 | font-size:~"min(1.4vw, 1em)"; // scales the image-box down 61 | 62 | &:before { 63 | content: ''; 64 | position: absolute; 65 | display: block; 66 | height: 100%; 67 | width: 100%; 68 | background: var(--primary); 69 | opacity: 1; 70 | top: 40/16em; 71 | left: -40/16em; 72 | } 73 | 74 | &:after { 75 | content: ''; 76 | position: absolute; 77 | display: block; 78 | height: 516/16em; 79 | width: 460/16em; 80 | background: url("/images/content-circles.svg"); 81 | background-size: contain; 82 | background-position: center; 83 | background-repeat: no-repeat; 84 | opacity: 1; 85 | top: -226/16em; 86 | right: -109/16em; 87 | z-index: -1; 88 | } 89 | 90 | img { 91 | position: absolute; 92 | top: 0; 93 | left: 0; 94 | height: 100%; 95 | width: 100%; 96 | object-fit: cover; 97 | } 98 | } 99 | } 100 | } 101 | 102 | /* Inbetween */ 103 | @media only screen and (min-width: 666px) { 104 | #sidebyside { 105 | padding: 100/16em 0; 106 | } 107 | } 108 | 109 | /* Small Desktop */ 110 | @media only screen and (min-width: 1300px) { 111 | #sidebyside { 112 | padding: 150/16em 0; 113 | .container { 114 | max-width: 1391/16em; 115 | flex-direction: row; 116 | justify-content: space-between; 117 | align-items: flex-start; 118 | } 119 | 120 | .content { 121 | margin: 0; 122 | width: 60%; 123 | } 124 | 125 | .image-box { 126 | margin: 0; 127 | margin-right: 170/16em; 128 | } 129 | } 130 | } 131 | 132 | /*-- -------------------------- --> 133 | <--- Final Call To Action --> 134 | <--- -------------------------- -*/ 135 | 136 | /* Mobile */ 137 | @media only screen and (min-width: 0em) { 138 | #cta { 139 | position: relative; 140 | padding: 50/16em 0; 141 | 142 | &:before { 143 | content: ''; 144 | position: absolute; 145 | display: block; 146 | height: 100%; 147 | width: 100%; 148 | background: #000; 149 | opacity: .7; 150 | top: 0; 151 | left: 0; 152 | z-index: -1; 153 | } 154 | 155 | .container { 156 | text-align: center; 157 | } 158 | 159 | picture { 160 | position: absolute; 161 | top: 0; 162 | left: 0; 163 | height: 100%; 164 | width: 100%; 165 | z-index: -2; 166 | 167 | img { 168 | position: absolute; 169 | top: 0; 170 | left: 0; 171 | height: 100%; 172 | width: 100%; 173 | object-fit: cover; 174 | } 175 | } 176 | 177 | .title { 178 | font-weight: 900; 179 | font-size:~"min(9vw, 3em)"; 180 | line-height: 58/48; 181 | color: #fff; 182 | position: relative; 183 | margin-bottom: 36/48em; 184 | text-align: center; 185 | } 186 | 187 | p { 188 | color: #fff; 189 | text-align: center; 190 | opacity: 1; 191 | margin: auto; 192 | margin-bottom: 36/18em; 193 | width: 96%; 194 | max-width: 598/18em; 195 | 196 | } 197 | } 198 | } 199 | 200 | /* Small Desktop */ 201 | @media only screen and (min-width: 64em) { 202 | #cta { 203 | padding: 168/16em 0; 204 | } 205 | } 206 | 207 | /* Large Desktop */ 208 | @media only screen and (min-width: 1300px) { 209 | #cta { 210 | position: relative; 211 | margin-top: 100/16em; 212 | &:before { 213 | display: none; 214 | } 215 | &:after { 216 | content: ''; 217 | position: absolute; 218 | display: block; 219 | height: 1108/16em; 220 | width: 2000/16em; 221 | background: url("../images/cta-squares.svg"); 222 | background-size: contain; 223 | background-position: center; 224 | background-repeat: no-repeat; 225 | opacity: 1; 226 | bottom: 0; 227 | left: 50%; 228 | transform: translateX(-50%); 229 | z-index: -3; 230 | } 231 | .container { 232 | width: 90.0625%; 233 | margin: auto; 234 | } 235 | 236 | picture { 237 | width: 90.0625%; 238 | left: 50%; 239 | transform: translateX(-50%); 240 | 241 | &:before { 242 | content: ''; 243 | position: absolute; 244 | display: block; 245 | height: 100%; 246 | width: 100%; 247 | background: #000; 248 | opacity: .7; 249 | top: 0; 250 | left: 0; 251 | z-index: 1; 252 | } 253 | } 254 | } 255 | } 256 | 257 | /* Dark Mode */ 258 | @media only screen and (min-width: 0em) { 259 | body.dark-mode { 260 | #cta { 261 | &:after { 262 | display: none; 263 | } 264 | } 265 | } 266 | } -------------------------------------------------------------------------------- /css/reviews.less: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Reviews --> 3 | <--- -------------------------- -*/ 4 | 5 | /* Mobile */ 6 | @media only screen and (min-width: 0em) { 7 | #reviews { 8 | padding-top: 120/16em; 9 | padding-bottom: 50/16em; 10 | margin: auto; 11 | 12 | .container { 13 | width: 96%; 14 | max-width: 1320/16em; 15 | } 16 | 17 | .review { 18 | padding: 64/16em 30/16em 18/16em 30/16em; 19 | box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05); 20 | width: 100%; 21 | max-width: 410/16em; 22 | margin: auto; 23 | margin-bottom: 100/16em; 24 | border-radius: 5/16em; 25 | position: relative; 26 | background: #fff; 27 | display: flex; 28 | flex-direction: column; 29 | &:last-of-type { 30 | margin-bottom: 0; 31 | } 32 | 33 | .profile { 34 | display: block; 35 | height: 99/16em; 36 | width: 99/16em; 37 | margin-left: 0; 38 | border-radius: 50%; 39 | margin-bottom: 16/16em; 40 | position: absolute; 41 | left: 30/16em; 42 | top: -51/16em; 43 | } 44 | 45 | p { 46 | line-height: 24/18; 47 | margin-bottom: 28/18em; 48 | text-align: left; 49 | } 50 | 51 | .star-group { 52 | border-top: 1px solid #E7E7E7; 53 | padding-top: 16/16em; 54 | display: flex; 55 | justify-content: space-between; 56 | align-items: center; 57 | flex-wrap: nowrap; 58 | margin-top: auto; 59 | 60 | .name { 61 | color: #1A1A1A; 62 | line-height: 24/18em; 63 | text-align: left; 64 | font-weight: bold; 65 | display: block; 66 | } 67 | 68 | .desc { 69 | color: #575757; 70 | font-weight: 400; 71 | display: block; 72 | } 73 | 74 | img { 75 | display: block; 76 | width: 91/16em; 77 | height: 15/16em; 78 | margin: 0; 79 | } 80 | } 81 | } 82 | } 83 | } 84 | 85 | /* Tablet */ 86 | @media only screen and (min-width: 48em) { 87 | 88 | #reviews { 89 | padding-top: 150/16em; 90 | padding-bottom: 50/16em; 91 | 92 | .container { 93 | font-size:~"min(1.4vw, 1em)"; 94 | display: flex; 95 | justify-content: center; 96 | flex-wrap: wrap; 97 | padding: 0; 98 | column-gap: 30/16em; 99 | } 100 | 101 | .review { 102 | margin: 0; 103 | margin-bottom: 150/16em; 104 | 105 | &:last-of-type { 106 | margin-bottom: 150/16em; 107 | } 108 | } 109 | } 110 | } 111 | 112 | /* Dark Mode */ 113 | @media only screen and (min-width: 0em) { 114 | body.dark-mode { 115 | #reviews { 116 | .review { 117 | background: var(--medium); 118 | 119 | .name { 120 | color: #fff; 121 | } 122 | 123 | .desc { 124 | color: #fff; 125 | opacity: .7; 126 | } 127 | } 128 | } 129 | } 130 | } 131 | 132 | /*-- -------------------------- --> 133 | <--- Final Call To Action --> 134 | <--- -------------------------- -*/ 135 | 136 | /* Mobile */ 137 | @media only screen and (min-width: 0em) { 138 | #cta { 139 | position: relative; 140 | padding: 50/16em 0; 141 | 142 | &:before { 143 | content: ''; 144 | position: absolute; 145 | display: block; 146 | height: 100%; 147 | width: 100%; 148 | background: #000; 149 | opacity: .7; 150 | top: 0; 151 | left: 0; 152 | z-index: -1; 153 | } 154 | 155 | .container { 156 | text-align: center; 157 | } 158 | 159 | picture { 160 | position: absolute; 161 | top: 0; 162 | left: 0; 163 | height: 100%; 164 | width: 100%; 165 | z-index: -2; 166 | 167 | img { 168 | position: absolute; 169 | top: 0; 170 | left: 0; 171 | height: 100%; 172 | width: 100%; 173 | object-fit: cover; 174 | } 175 | } 176 | 177 | .title { 178 | font-weight: 900; 179 | font-size:~"min(9vw, 3em)"; 180 | line-height: 58/48; 181 | color: #fff; 182 | position: relative; 183 | margin-bottom: 36/48em; 184 | text-align: center; 185 | } 186 | 187 | p { 188 | color: #fff; 189 | text-align: center; 190 | opacity: 1; 191 | margin: auto; 192 | margin-bottom: 36/18em; 193 | width: 96%; 194 | max-width: 598/18em; 195 | 196 | } 197 | } 198 | } 199 | 200 | /* Small Desktop */ 201 | @media only screen and (min-width: 64em) { 202 | #cta { 203 | padding: 168/16em 0; 204 | } 205 | } 206 | 207 | /* Large Desktop */ 208 | @media only screen and (min-width: 1300px) { 209 | #cta { 210 | position: relative; 211 | margin-top: 100/16em; 212 | &:before { 213 | display: none; 214 | } 215 | &:after { 216 | content: ''; 217 | position: absolute; 218 | display: block; 219 | height: 1108/16em; 220 | width: 2000/16em; 221 | background: url("../images/cta-squares.svg"); 222 | background-size: contain; 223 | background-position: center; 224 | background-repeat: no-repeat; 225 | opacity: 1; 226 | bottom: 0; 227 | left: 50%; 228 | transform: translateX(-50%); 229 | z-index: -3; 230 | } 231 | .container { 232 | width: 90.0625%; 233 | margin: auto; 234 | } 235 | 236 | picture { 237 | width: 90.0625%; 238 | left: 50%; 239 | transform: translateX(-50%); 240 | 241 | &:before { 242 | content: ''; 243 | position: absolute; 244 | display: block; 245 | height: 100%; 246 | width: 100%; 247 | background: #000; 248 | opacity: .7; 249 | top: 0; 250 | left: 0; 251 | z-index: 1; 252 | } 253 | } 254 | } 255 | } 256 | 257 | /* Dark Mode */ 258 | @media only screen and (min-width: 0em) { 259 | body.dark-mode { 260 | #cta { 261 | &:after { 262 | display: none; 263 | } 264 | } 265 | } 266 | } -------------------------------------------------------------------------------- /css/contact.css: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Form --> 3 | <--- -------------------------- -*/ 4 | /* Mobile */ 5 | @media only screen and (min-width: 0em) { 6 | #form { 7 | padding: 3.125em 0; 8 | margin: auto; 9 | position: relative; 10 | padding-bottom: 36%; 11 | } 12 | #form .top-wave { 13 | position: absolute; 14 | width: 100%; 15 | top: -0.125em; 16 | height: auto; 17 | left: 0; 18 | } 19 | #form .title { 20 | font-weight: 900; 21 | font-size: min(9vw, 2.4em); 22 | line-height: 1.20833333; 23 | color: #1A1A1A; 24 | position: relative; 25 | margin-bottom: 0.875em; 26 | text-align: left; 27 | } 28 | #form p { 29 | line-height: 1.5; 30 | max-width: 27.77777778em; 31 | color: #595959; 32 | margin-bottom: 2.66666667em; 33 | } 34 | #form .left-section { 35 | width: 96%; 36 | margin: auto; 37 | margin-top: 15%; 38 | max-width: 37.5em; 39 | } 40 | #form #contact { 41 | margin: auto; 42 | margin-bottom: 6.25em; 43 | } 44 | #form #contact .input-group { 45 | display: -webkit-box; 46 | display: -ms-flexbox; 47 | display: flex; 48 | -webkit-box-orient: vertical; 49 | -webkit-box-direction: normal; 50 | -ms-flex-direction: column; 51 | flex-direction: column; 52 | margin-bottom: 1.875em; 53 | } 54 | #form #contact .input-group label { 55 | font-weight: bold; 56 | font-size: 1em; 57 | margin-bottom: 0.375em; 58 | } 59 | #form #contact .input-group input[type="text"], 60 | #form #contact .input-group input[type="email"], 61 | #form #contact .input-group input[type="tel"], 62 | #form #contact .input-group input[type="url"], 63 | #form #contact .input-group textarea { 64 | font-size: 1em; 65 | height: 4.1875em; 66 | border: none; 67 | border-bottom: 0.0625em solid #d4d4d4; 68 | background: transparent; 69 | } 70 | #form #contact .input-group input:focus { 71 | border: 0.0625em solid var(--primary); 72 | } 73 | #form #contact .input-group textarea { 74 | min-height: 12.5em; 75 | padding-top: 1.25em; 76 | } 77 | #form #contact .input-group ::-webkit-input-placeholder { 78 | color: #d4d4d4; 79 | font-family: "Roboto", sans-serif; 80 | } 81 | #form #contact .input-group :-ms-input-placeholder { 82 | color: #d4d4d4; 83 | font-family: "Roboto", sans-serif; 84 | } 85 | #form #contact .input-group ::-ms-input-placeholder { 86 | color: #d4d4d4; 87 | font-family: "Roboto", sans-serif; 88 | } 89 | #form #contact .input-group ::placeholder { 90 | color: #d4d4d4; 91 | font-family: "Roboto", sans-serif; 92 | } 93 | #form #contact .button-solid { 94 | border: none; 95 | } 96 | #form .contact-right { 97 | background: #1a1a1a; 98 | padding: 2.8125em 2.125em; 99 | width: 100%; 100 | max-width: 18.75em; 101 | margin: auto; 102 | border-radius: 0.3125em; 103 | } 104 | #form .contact-right .heading { 105 | color: #fff; 106 | font-size: 1.5em; 107 | line-height: 1.2em; 108 | font-weight: bold; 109 | padding-left: 0.83333333em; 110 | border-left: 0.20833333em solid var(--primary); 111 | display: block; 112 | margin-bottom: 0.83333333em; 113 | } 114 | #form .contact-right .info-group { 115 | margin-bottom: 2.25em; 116 | } 117 | #form .contact-right .info-group:last-of-type { 118 | margin-bottom: 0; 119 | } 120 | #form .contact-right .info { 121 | font-size: 1em; 122 | line-height: 1.75; 123 | color: #fff; 124 | opacity: .9; 125 | text-decoration: none; 126 | display: block; 127 | } 128 | } 129 | /* Mobile Landscape */ 130 | @media only screen and (min-width: 568px) { 131 | #form #contact { 132 | max-width: 43.75em; 133 | } 134 | #form .contact-right { 135 | max-width: 43.75em; 136 | display: -webkit-box; 137 | display: -ms-flexbox; 138 | display: flex; 139 | -webkit-box-pack: center; 140 | -ms-flex-pack: center; 141 | justify-content: center; 142 | -ms-flex-wrap: wrap; 143 | flex-wrap: wrap; 144 | } 145 | #form .contact-right .info-group { 146 | width: 40%; 147 | margin-left: 3.125em; 148 | } 149 | #form .contact-right .info-group:nth-of-type(3) { 150 | margin-bottom: 0; 151 | } 152 | } 153 | /* Tablet */ 154 | @media only screen and (min-width: 48em) { 155 | #form #contact { 156 | display: -webkit-box; 157 | display: -ms-flexbox; 158 | display: flex; 159 | -webkit-box-pack: justify; 160 | -ms-flex-pack: justify; 161 | justify-content: space-between; 162 | -webkit-box-orient: horizontal; 163 | -webkit-box-direction: normal; 164 | -ms-flex-direction: row; 165 | flex-direction: row; 166 | -ms-flex-wrap: wrap; 167 | flex-wrap: wrap; 168 | } 169 | #form #contact .input-group { 170 | width: 48%; 171 | margin-bottom: 3.125em; 172 | position: relative; 173 | } 174 | #form #contact .input-group:nth-of-type(5) { 175 | width: 100%; 176 | } 177 | #form #contact .input-group:last-of-type { 178 | width: 100%; 179 | } 180 | #form #contact .input-group:hover .hover-box { 181 | height: 4.1875em; 182 | border: 0.0625em solid var(--primary); 183 | pointer-events: none; 184 | } 185 | #form #contact .input-group:hover input[type="text"], 186 | #form #contact .input-group:hover input[type="email"], 187 | #form #contact .input-group:hover input[type="tel"], 188 | #form #contact .input-group:hover input[type="url"], 189 | #form #contact .input-group:hover textarea { 190 | padding-left: 1.25em; 191 | } 192 | #form #contact .input-group input[type="text"], 193 | #form #contact .input-group input[type="email"], 194 | #form #contact .input-group input[type="tel"], 195 | #form #contact .input-group input[type="url"], 196 | #form #contact .input-group textarea { 197 | border-bottom: none; 198 | position: relative; 199 | -webkit-transition: padding .3s; 200 | transition: padding .3s; 201 | background: transparent; 202 | } 203 | #form #contact .input-group .hover-box { 204 | position: absolute; 205 | display: block; 206 | height: 0.0625em; 207 | width: 100%; 208 | background: transparent; 209 | border: 0.0625em solid #e9e8e8; 210 | opacity: 1; 211 | bottom: -0.0625em; 212 | left: 0; 213 | z-index: 10; 214 | -webkit-transition: height .3s, border .3s; 215 | transition: height .3s, border .3s; 216 | z-index: -1; 217 | } 218 | #form #contact .textarea:hover .hover-box { 219 | height: 10.5em; 220 | } 221 | #form #contact .form-submit { 222 | margin-left: auto; 223 | } 224 | } 225 | /* Small Desktop */ 226 | @media only screen and (min-width: 64em) { 227 | #form { 228 | display: -webkit-box; 229 | display: -ms-flexbox; 230 | display: flex; 231 | -webkit-box-pack: center; 232 | -ms-flex-pack: center; 233 | justify-content: center; 234 | -ms-flex-line-pack: start; 235 | align-content: flex-start; 236 | font-size: 1.5vw; 237 | width: 100%; 238 | padding: 9.375em 0; 239 | } 240 | #form .left-section { 241 | width: 46.875em; 242 | margin: 0; 243 | margin-left: 0; 244 | margin-right: 4.6875em; 245 | } 246 | #form #contact { 247 | margin: 0; 248 | margin-right: 0; 249 | max-width: none; 250 | } 251 | #form .contact-right { 252 | -webkit-box-orient: vertical; 253 | -webkit-box-direction: normal; 254 | -ms-flex-direction: column; 255 | flex-direction: column; 256 | max-width: 18.75em; 257 | margin: 0; 258 | height: 34.625em; 259 | } 260 | #form .contact-right .info-group { 261 | margin-left: 0; 262 | width: 100%; 263 | } 264 | #form .contact-right .info-group:nth-of-type(3), 265 | #form .contact-right .info-group:last-of-type { 266 | margin-bottom: 2.25em; 267 | } 268 | } 269 | /* Large Desktop */ 270 | @media only screen and (min-width: 1300px) { 271 | #form { 272 | font-size: inherit; 273 | } 274 | } 275 | /* Dark Mode */ 276 | @media only screen and (min-width: 0px) { 277 | body.dark-mode #form .title { 278 | color: #fff; 279 | } 280 | body.dark-mode #form p { 281 | color: #fff; 282 | } 283 | body.dark-mode #form .input-group label { 284 | color: #fff; 285 | } 286 | body.dark-mode #form .input-group input, 287 | body.dark-mode #form .input-group textarea { 288 | color: #fff; 289 | } 290 | body.dark-mode #form .contact-right { 291 | background: var(--medium); 292 | } 293 | } 294 | -------------------------------------------------------------------------------- /css/local.css: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Side By Side --> 3 | <--- -------------------------- -*/ 4 | /* Mobile */ 5 | @media only screen and (min-width: 0em) { 6 | #sidebyside { 7 | padding: 50px 0; 8 | } 9 | #sidebyside .container { 10 | display: flex; 11 | justify-content: center; 12 | flex-direction: column; 13 | align-items: center; 14 | } 15 | #sidebyside .content { 16 | order: 2; 17 | margin: auto; 18 | margin-top: 4.6875em; 19 | max-width: 38.1875em; 20 | } 21 | #sidebyside .content h2 { 22 | font-size: 3em; 23 | margin-bottom: 0.875em; 24 | } 25 | #sidebyside .content p { 26 | margin-bottom: 1.11111111em; 27 | } 28 | #sidebyside .content ul { 29 | padding-left: 1.25em; 30 | margin-bottom: 1.25em; 31 | } 32 | #sidebyside .content ul li { 33 | list-style: none; 34 | display: flex; 35 | justify-content: flex-start; 36 | align-items: flex-start; 37 | } 38 | #sidebyside .content ul li img { 39 | margin-right: 0.625em; 40 | margin-top: 0.22222222em; 41 | } 42 | #sidebyside .content .button-solid { 43 | margin-top: 1.78571429em; 44 | } 45 | #sidebyside .image-box { 46 | display: block; 47 | position: relative; 48 | margin: auto; 49 | width: 38.1875em; 50 | height: 53.8125em; 51 | font-size: min(1.4vw, 1em); 52 | } 53 | #sidebyside .image-box:before { 54 | content: ''; 55 | position: absolute; 56 | display: block; 57 | height: 100%; 58 | width: 100%; 59 | background: var(--primary); 60 | opacity: 1; 61 | top: 2.5em; 62 | left: -2.5em; 63 | } 64 | #sidebyside .image-box:after { 65 | content: ''; 66 | position: absolute; 67 | display: block; 68 | height: 32.25em; 69 | width: 28.75em; 70 | background: url("/images/content-circles.svg"); 71 | background-size: contain; 72 | background-position: center; 73 | background-repeat: no-repeat; 74 | opacity: 1; 75 | top: -14.125em; 76 | right: -6.8125em; 77 | z-index: -1; 78 | } 79 | #sidebyside .image-box img { 80 | position: absolute; 81 | top: 0; 82 | left: 0; 83 | height: 100%; 84 | width: 100%; 85 | object-fit: cover; 86 | } 87 | } 88 | /* Inbetween */ 89 | @media only screen and (min-width: 666px) { 90 | #sidebyside { 91 | padding: 6.25em 0; 92 | } 93 | } 94 | /* Small Desktop */ 95 | @media only screen and (min-width: 1300px) { 96 | #sidebyside { 97 | padding: 9.375em 0; 98 | } 99 | #sidebyside .container { 100 | max-width: 86.9375em; 101 | flex-direction: row; 102 | justify-content: space-between; 103 | align-items: flex-start; 104 | } 105 | #sidebyside .content { 106 | margin: 0; 107 | width: 60%; 108 | } 109 | #sidebyside .image-box { 110 | margin: 0; 111 | margin-right: 10.625em; 112 | } 113 | } 114 | /*-- -------------------------- --> 115 | <--- Side By Side Reverse --> 116 | <--- -------------------------- -*/ 117 | /* Mobile */ 118 | @media only screen and (min-width: 0em) { 119 | #sidebyside-reverse { 120 | padding: 50px 0; 121 | } 122 | #sidebyside-reverse .container { 123 | display: flex; 124 | justify-content: center; 125 | flex-direction: column; 126 | align-items: center; 127 | } 128 | #sidebyside-reverse .content { 129 | order: 2; 130 | margin: auto; 131 | margin-top: 4.6875em; 132 | max-width: 38.1875em; 133 | } 134 | #sidebyside-reverse .content h2 { 135 | font-size: 3em; 136 | margin-bottom: 0.875em; 137 | } 138 | #sidebyside-reverse .content p { 139 | margin-bottom: 1.11111111em; 140 | } 141 | #sidebyside-reverse .content ul { 142 | padding-left: 1.25em; 143 | margin-bottom: 1.25em; 144 | } 145 | #sidebyside-reverse .content ul li { 146 | list-style: none; 147 | display: flex; 148 | justify-content: flex-start; 149 | align-items: flex-start; 150 | } 151 | #sidebyside-reverse .content ul li img { 152 | margin-right: 0.625em; 153 | margin-top: 0.22222222em; 154 | } 155 | #sidebyside-reverse .content .button-solid { 156 | margin-top: 1.78571429em; 157 | } 158 | #sidebyside-reverse .image-box { 159 | display: block; 160 | position: relative; 161 | margin: auto; 162 | width: 38.1875em; 163 | height: 53.8125em; 164 | font-size: min(1.4vw, 1em); 165 | } 166 | #sidebyside-reverse .image-box:before { 167 | content: ''; 168 | position: absolute; 169 | display: block; 170 | height: 100%; 171 | width: 100%; 172 | background: var(--primary); 173 | opacity: 1; 174 | top: 2.5em; 175 | left: -2.5em; 176 | } 177 | #sidebyside-reverse .image-box:after { 178 | content: ''; 179 | position: absolute; 180 | display: block; 181 | height: 32.25em; 182 | width: 28.75em; 183 | background: url("/images/content-circles.svg"); 184 | background-size: contain; 185 | background-position: center; 186 | background-repeat: no-repeat; 187 | opacity: 1; 188 | top: -14.125em; 189 | right: -6.8125em; 190 | z-index: -1; 191 | } 192 | #sidebyside-reverse .image-box img { 193 | position: absolute; 194 | top: 0; 195 | left: 0; 196 | height: 100%; 197 | width: 100%; 198 | object-fit: cover; 199 | } 200 | } 201 | /* Inbetween */ 202 | @media only screen and (min-width: 666px) { 203 | #sidebyside-reverse { 204 | padding: 6.25em 0; 205 | } 206 | } 207 | /* Small Desktop */ 208 | @media only screen and (min-width: 1300px) { 209 | #sidebyside-reverse { 210 | padding: 9.375em 0; 211 | } 212 | #sidebyside-reverse .container { 213 | max-width: 86.9375em; 214 | flex-direction: row; 215 | justify-content: space-between; 216 | align-items: flex-start; 217 | } 218 | #sidebyside-reverse .content { 219 | margin: 0; 220 | width: 60%; 221 | order: 1; 222 | } 223 | #sidebyside-reverse .image-box { 224 | margin: 0; 225 | margin-left: 10.625em; 226 | order: 2; 227 | } 228 | #sidebyside-reverse .image-box:before { 229 | left: auto; 230 | right: -2.5em; 231 | } 232 | #sidebyside-reverse .image-box:after { 233 | right: auto; 234 | left: -6.8125em; 235 | } 236 | } 237 | /*-- -------------------------- --> 238 | <--- Final Call To Action --> 239 | <--- -------------------------- -*/ 240 | /* Mobile */ 241 | @media only screen and (min-width: 0em) { 242 | #cta { 243 | position: relative; 244 | padding: 3.125em 0; 245 | } 246 | #cta:before { 247 | content: ''; 248 | position: absolute; 249 | display: block; 250 | height: 100%; 251 | width: 100%; 252 | background: #000; 253 | opacity: .7; 254 | top: 0; 255 | left: 0; 256 | z-index: -1; 257 | } 258 | #cta .container { 259 | text-align: center; 260 | } 261 | #cta picture { 262 | position: absolute; 263 | top: 0; 264 | left: 0; 265 | height: 100%; 266 | width: 100%; 267 | z-index: -2; 268 | } 269 | #cta picture img { 270 | position: absolute; 271 | top: 0; 272 | left: 0; 273 | height: 100%; 274 | width: 100%; 275 | object-fit: cover; 276 | } 277 | #cta .title { 278 | font-weight: 900; 279 | font-size: min(9vw, 3em); 280 | line-height: 1.20833333; 281 | color: #fff; 282 | position: relative; 283 | margin-bottom: 0.75em; 284 | text-align: center; 285 | } 286 | #cta p { 287 | color: #fff; 288 | text-align: center; 289 | opacity: 1; 290 | margin: auto; 291 | margin-bottom: 2em; 292 | width: 96%; 293 | max-width: 33.22222222em; 294 | } 295 | } 296 | /* Small Desktop */ 297 | @media only screen and (min-width: 64em) { 298 | #cta { 299 | padding: 10.5em 0; 300 | } 301 | } 302 | /* Large Desktop */ 303 | @media only screen and (min-width: 1300px) { 304 | #cta { 305 | position: relative; 306 | margin-top: 6.25em; 307 | } 308 | #cta:before { 309 | display: none; 310 | } 311 | #cta:after { 312 | content: ''; 313 | position: absolute; 314 | display: block; 315 | height: 69.25em; 316 | width: 125em; 317 | background: url("../images/cta-squares.svg"); 318 | background-size: contain; 319 | background-position: center; 320 | background-repeat: no-repeat; 321 | opacity: 1; 322 | bottom: 0; 323 | left: 50%; 324 | transform: translateX(-50%); 325 | z-index: -3; 326 | } 327 | #cta .container { 328 | width: 90.0625%; 329 | margin: auto; 330 | } 331 | #cta picture { 332 | width: 90.0625%; 333 | left: 50%; 334 | transform: translateX(-50%); 335 | } 336 | #cta picture:before { 337 | content: ''; 338 | position: absolute; 339 | display: block; 340 | height: 100%; 341 | width: 100%; 342 | background: #000; 343 | opacity: .7; 344 | top: 0; 345 | left: 0; 346 | z-index: 1; 347 | } 348 | } 349 | /* Dark Mode */ 350 | @media only screen and (min-width: 0em) { 351 | body.dark-mode #cta:after { 352 | display: none; 353 | } 354 | } 355 | -------------------------------------------------------------------------------- /css/contact.less: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Form --> 3 | <--- -------------------------- -*/ 4 | 5 | /* Mobile */ 6 | @media only screen and (min-width: 0em) { 7 | 8 | #form { 9 | padding: 50/16em 0; 10 | margin: auto; 11 | position: relative; 12 | padding-bottom: 36%; 13 | 14 | .top-wave { 15 | position: absolute; 16 | width: 100%; 17 | top: -2/16em; 18 | height: auto; 19 | left: 0; 20 | } 21 | 22 | 23 | .title { 24 | font-weight: 900; 25 | font-size:~"min(9vw, 2.4em)"; 26 | line-height: 58/48; 27 | color: #1A1A1A; 28 | position: relative; 29 | margin-bottom: 42/48em; 30 | text-align: left; 31 | } 32 | 33 | p { 34 | line-height: 27/18; 35 | max-width: 500/18em; 36 | color: #595959; 37 | margin-bottom: 48/18em; 38 | } 39 | 40 | .left-section { 41 | width: 96%; 42 | margin: auto; 43 | margin-top: 15%; 44 | max-width: 600/16em; 45 | } 46 | 47 | #contact { 48 | margin: auto; 49 | margin-bottom: 100/16em; 50 | .input-group { 51 | display: flex; 52 | flex-direction: column; 53 | margin-bottom: 30/16em; 54 | 55 | label { 56 | font-weight: bold; 57 | font-size: 16/16em; 58 | margin-bottom: 6/16em; 59 | } 60 | 61 | input[type="text"], 62 | input[type="email"], 63 | input[type="tel"], 64 | input[type="url"], 65 | textarea { 66 | font-size: 16/16em; 67 | height: 67/16em; 68 | border: none; 69 | border-bottom: 1/16em solid #d4d4d4; 70 | background: transparent; 71 | } 72 | 73 | input:focus { 74 | border: 1/16em solid var(--primary); 75 | } 76 | 77 | textarea { 78 | min-height: 200/16em; 79 | padding-top: 20/16em; 80 | } 81 | 82 | ::placeholder { 83 | color: #d4d4d4; 84 | font-family: "Roboto", sans-serif; 85 | } 86 | } 87 | 88 | .button-solid { 89 | border: none; 90 | } 91 | } 92 | 93 | .contact-right { 94 | background: #1a1a1a; 95 | padding: 45/16em 34/16em; 96 | width: 100%; 97 | max-width: 300/16em; 98 | margin: auto; 99 | border-radius: 5/16em; 100 | 101 | .heading { 102 | color: #fff; 103 | font-size: 24/16em; 104 | line-height: 1.2em; 105 | font-weight: bold; 106 | padding-left: 20/24em; 107 | border-left: 5/24em solid var(--primary); 108 | display: block; 109 | margin-bottom: 20/24em; 110 | } 111 | 112 | .info-group { 113 | margin-bottom: 36/16em; 114 | 115 | &:last-of-type { 116 | margin-bottom: 0; 117 | } 118 | } 119 | 120 | .info { 121 | font-size: 16/16em; 122 | line-height: 28/16; 123 | color: #fff; 124 | opacity: .9; 125 | text-decoration: none; 126 | display: block; 127 | } 128 | } 129 | } 130 | } 131 | 132 | /* Mobile Landscape */ 133 | @media only screen and (min-width: 568px) { 134 | 135 | #form { 136 | #contact { 137 | max-width: 700/16em; 138 | } 139 | .contact-right { 140 | max-width: 700/16em; 141 | display: flex; 142 | justify-content: center; 143 | flex-wrap: wrap; 144 | 145 | .info-group { 146 | width: 40%; 147 | margin-left: 50/16em; 148 | &:nth-of-type(3) { 149 | margin-bottom: 0; 150 | } 151 | } 152 | } 153 | } 154 | } 155 | 156 | /* Tablet */ 157 | @media only screen and (min-width: 48em) { 158 | 159 | #form { 160 | #contact { 161 | display: flex; 162 | justify-content: space-between; 163 | flex-direction: row; 164 | flex-wrap: wrap; 165 | 166 | .input-group { 167 | width: 48%; 168 | margin-bottom: 50/16em; 169 | position: relative; 170 | 171 | &:nth-of-type(5) { 172 | width: 100%; 173 | } 174 | 175 | &:last-of-type { 176 | width: 100%; 177 | } 178 | 179 | &:hover { 180 | .hover-box { 181 | height: 67/16em; 182 | border: 1/16em solid var(--primary); 183 | pointer-events: none; 184 | } 185 | 186 | input[type="text"], 187 | input[type="email"], 188 | input[type="tel"], 189 | input[type="url"], 190 | textarea { 191 | padding-left: 20/16em; 192 | } 193 | } 194 | 195 | input[type="text"], 196 | input[type="email"], 197 | input[type="tel"], 198 | input[type="url"], 199 | textarea { 200 | border-bottom: none; 201 | position: relative; 202 | transition: padding .3s; 203 | background: transparent; 204 | } 205 | 206 | .hover-box { 207 | position: absolute; 208 | display: block; 209 | height: 1/16em; 210 | width: 100%; 211 | background: transparent; 212 | border: 1/16em solid #e9e8e8; 213 | opacity: 1; 214 | bottom: -1/16em; 215 | left: 0; 216 | z-index: 10; 217 | transition: height .3s, border .3s; 218 | z-index: -1; 219 | } 220 | } 221 | 222 | .textarea { 223 | &:hover { 224 | .hover-box { 225 | height: 168/16em; 226 | } 227 | } 228 | } 229 | 230 | .form-submit { 231 | margin-left: auto; 232 | } 233 | 234 | } 235 | } 236 | } 237 | 238 | /* Small Desktop */ 239 | @media only screen and (min-width: 64em) { 240 | 241 | #form { 242 | display: flex; 243 | justify-content: center; 244 | align-content: flex-start; 245 | font-size: 1.5vw; 246 | width: 100%; 247 | padding: 150/16em 0; 248 | 249 | .left-section { 250 | width: 750/16em; 251 | margin: 0; 252 | margin-left: 0; 253 | margin-right: 75/16em; 254 | } 255 | 256 | #contact { 257 | margin: 0; 258 | margin-right: 0; 259 | max-width: none; 260 | } 261 | 262 | .contact-right { 263 | flex-direction: column; 264 | max-width: 300/16em; 265 | margin: 0; 266 | height: 554/16em; 267 | 268 | .info-group { 269 | margin-left: 0; 270 | width: 100%; 271 | 272 | &:nth-of-type(3), &:last-of-type { 273 | margin-bottom: 36/16em; 274 | } 275 | } 276 | } 277 | } 278 | } 279 | 280 | /* Large Desktop */ 281 | @media only screen and (min-width: 1300px) { 282 | 283 | #form { 284 | font-size: inherit; 285 | } 286 | } 287 | 288 | /* Dark Mode */ 289 | @media only screen and (min-width: 0px) { 290 | body.dark-mode { 291 | #form { 292 | .title { 293 | color: #fff; 294 | } 295 | 296 | p { 297 | color: #fff; 298 | } 299 | 300 | .input-group { 301 | label { 302 | color: #fff; 303 | } 304 | 305 | input, textarea { 306 | color: #fff; 307 | } 308 | } 309 | 310 | .contact-right { 311 | background: var(--medium); 312 | } 313 | } 314 | } 315 | } -------------------------------------------------------------------------------- /css/local.less: -------------------------------------------------------------------------------- 1 | /*-- -------------------------- --> 2 | <--- Side By Side --> 3 | <--- -------------------------- -*/ 4 | 5 | /* Mobile */ 6 | @media only screen and (min-width: 0em) { 7 | #sidebyside { 8 | padding: 50px 0; 9 | .container { 10 | display: flex; 11 | justify-content: center; 12 | flex-direction: column; 13 | align-items: center; 14 | } 15 | 16 | .content { 17 | order: 2; 18 | margin: auto; 19 | margin-top: 75/16em; 20 | max-width: 611/16em; 21 | 22 | h2 { 23 | font-size: 48/16em; 24 | margin-bottom: 42/48em; 25 | } 26 | 27 | p { 28 | margin-bottom: 20/18em; 29 | } 30 | 31 | ul { 32 | padding-left: 20/16em; 33 | margin-bottom: 20/16em; 34 | 35 | li { 36 | list-style: none; 37 | display: flex; 38 | justify-content: flex-start; 39 | align-items: flex-start; 40 | 41 | img { 42 | margin-right: 10/16em; 43 | margin-top: 4/18em; 44 | } 45 | } 46 | } 47 | 48 | .button-solid { 49 | margin-top: 25/14em; 50 | } 51 | } 52 | 53 | .image-box { 54 | display: block; 55 | position: relative; 56 | margin: auto; 57 | width: 611/16em; 58 | height: 861/16em; 59 | font-size:~"min(1.4vw, 1em)"; // scales the image-box down 60 | 61 | &:before { 62 | content: ''; 63 | position: absolute; 64 | display: block; 65 | height: 100%; 66 | width: 100%; 67 | background: var(--primary); 68 | opacity: 1; 69 | top: 40/16em; 70 | left: -40/16em; 71 | } 72 | 73 | &:after { 74 | content: ''; 75 | position: absolute; 76 | display: block; 77 | height: 516/16em; 78 | width: 460/16em; 79 | background: url("/images/content-circles.svg"); 80 | background-size: contain; 81 | background-position: center; 82 | background-repeat: no-repeat; 83 | opacity: 1; 84 | top: -226/16em; 85 | right: -109/16em; 86 | z-index: -1; 87 | } 88 | 89 | img { 90 | position: absolute; 91 | top: 0; 92 | left: 0; 93 | height: 100%; 94 | width: 100%; 95 | object-fit: cover; 96 | } 97 | } 98 | } 99 | } 100 | 101 | /* Inbetween */ 102 | @media only screen and (min-width: 666px) { 103 | #sidebyside { 104 | padding: 100/16em 0; 105 | } 106 | } 107 | 108 | /* Small Desktop */ 109 | @media only screen and (min-width: 1300px) { 110 | #sidebyside { 111 | padding: 150/16em 0; 112 | .container { 113 | max-width: 1391/16em; 114 | flex-direction: row; 115 | justify-content: space-between; 116 | align-items: flex-start; 117 | } 118 | 119 | .content { 120 | margin: 0; 121 | width: 60%; 122 | } 123 | 124 | .image-box { 125 | margin: 0; 126 | margin-right: 170/16em; 127 | } 128 | } 129 | } 130 | 131 | /*-- -------------------------- --> 132 | <--- Side By Side Reverse --> 133 | <--- -------------------------- -*/ 134 | 135 | /* Mobile */ 136 | @media only screen and (min-width: 0em) { 137 | #sidebyside-reverse { 138 | padding: 50px 0; 139 | .container { 140 | display: flex; 141 | justify-content: center; 142 | flex-direction: column; 143 | align-items: center; 144 | } 145 | 146 | .content { 147 | order: 2; 148 | margin: auto; 149 | margin-top: 75/16em; 150 | max-width: 611/16em; 151 | 152 | h2 { 153 | font-size: 48/16em; 154 | margin-bottom: 42/48em; 155 | } 156 | 157 | p { 158 | margin-bottom: 20/18em; 159 | } 160 | 161 | ul { 162 | padding-left: 20/16em; 163 | margin-bottom: 20/16em; 164 | 165 | li { 166 | list-style: none; 167 | display: flex; 168 | justify-content: flex-start; 169 | align-items: flex-start; 170 | 171 | img { 172 | margin-right: 10/16em; 173 | margin-top: 4/18em; 174 | } 175 | } 176 | } 177 | 178 | .button-solid { 179 | margin-top: 25/14em; 180 | } 181 | } 182 | 183 | .image-box { 184 | display: block; 185 | position: relative; 186 | margin: auto; 187 | width: 611/16em; 188 | height: 861/16em; 189 | font-size:~"min(1.4vw, 1em)"; // scales the image-box down 190 | 191 | &:before { 192 | content: ''; 193 | position: absolute; 194 | display: block; 195 | height: 100%; 196 | width: 100%; 197 | background: var(--primary); 198 | opacity: 1; 199 | top: 40/16em; 200 | left: -40/16em; 201 | } 202 | 203 | &:after { 204 | content: ''; 205 | position: absolute; 206 | display: block; 207 | height: 516/16em; 208 | width: 460/16em; 209 | background: url("/images/content-circles.svg"); 210 | background-size: contain; 211 | background-position: center; 212 | background-repeat: no-repeat; 213 | opacity: 1; 214 | top: -226/16em; 215 | right: -109/16em; 216 | z-index: -1; 217 | } 218 | 219 | img { 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | height: 100%; 224 | width: 100%; 225 | object-fit: cover; 226 | } 227 | } 228 | } 229 | } 230 | 231 | /* Inbetween */ 232 | @media only screen and (min-width: 666px) { 233 | #sidebyside-reverse { 234 | padding: 100/16em 0; 235 | } 236 | } 237 | 238 | /* Small Desktop */ 239 | @media only screen and (min-width: 1300px) { 240 | #sidebyside-reverse { 241 | padding: 150/16em 0; 242 | .container { 243 | max-width: 1391/16em; 244 | flex-direction: row; 245 | justify-content: space-between; 246 | align-items: flex-start; 247 | } 248 | 249 | .content { 250 | margin: 0; 251 | width: 60%; 252 | order: 1; 253 | } 254 | 255 | .image-box { 256 | margin: 0; 257 | margin-left: 170/16em; 258 | order: 2; 259 | 260 | &:before { 261 | left: auto; 262 | right: -40/16em; 263 | } 264 | 265 | &:after { 266 | right: auto; 267 | left: -109/16em; 268 | } 269 | } 270 | } 271 | } 272 | 273 | /*-- -------------------------- --> 274 | <--- Final Call To Action --> 275 | <--- -------------------------- -*/ 276 | 277 | /* Mobile */ 278 | @media only screen and (min-width: 0em) { 279 | #cta { 280 | position: relative; 281 | padding: 50/16em 0; 282 | 283 | &:before { 284 | content: ''; 285 | position: absolute; 286 | display: block; 287 | height: 100%; 288 | width: 100%; 289 | background: #000; 290 | opacity: .7; 291 | top: 0; 292 | left: 0; 293 | z-index: -1; 294 | } 295 | 296 | .container { 297 | text-align: center; 298 | } 299 | 300 | picture { 301 | position: absolute; 302 | top: 0; 303 | left: 0; 304 | height: 100%; 305 | width: 100%; 306 | z-index: -2; 307 | 308 | img { 309 | position: absolute; 310 | top: 0; 311 | left: 0; 312 | height: 100%; 313 | width: 100%; 314 | object-fit: cover; 315 | } 316 | } 317 | 318 | .title { 319 | font-weight: 900; 320 | font-size:~"min(9vw, 3em)"; 321 | line-height: 58/48; 322 | color: #fff; 323 | position: relative; 324 | margin-bottom: 36/48em; 325 | text-align: center; 326 | } 327 | 328 | p { 329 | color: #fff; 330 | text-align: center; 331 | opacity: 1; 332 | margin: auto; 333 | margin-bottom: 36/18em; 334 | width: 96%; 335 | max-width: 598/18em; 336 | 337 | } 338 | } 339 | } 340 | 341 | /* Small Desktop */ 342 | @media only screen and (min-width: 64em) { 343 | #cta { 344 | padding: 168/16em 0; 345 | } 346 | } 347 | 348 | /* Large Desktop */ 349 | @media only screen and (min-width: 1300px) { 350 | #cta { 351 | position: relative; 352 | margin-top: 100/16em; 353 | &:before { 354 | display: none; 355 | } 356 | &:after { 357 | content: ''; 358 | position: absolute; 359 | display: block; 360 | height: 1108/16em; 361 | width: 2000/16em; 362 | background: url("../images/cta-squares.svg"); 363 | background-size: contain; 364 | background-position: center; 365 | background-repeat: no-repeat; 366 | opacity: 1; 367 | bottom: 0; 368 | left: 50%; 369 | transform: translateX(-50%); 370 | z-index: -3; 371 | } 372 | .container { 373 | width: 90.0625%; 374 | margin: auto; 375 | } 376 | 377 | picture { 378 | width: 90.0625%; 379 | left: 50%; 380 | transform: translateX(-50%); 381 | 382 | &:before { 383 | content: ''; 384 | position: absolute; 385 | display: block; 386 | height: 100%; 387 | width: 100%; 388 | background: #000; 389 | opacity: .7; 390 | top: 0; 391 | left: 0; 392 | z-index: 1; 393 | } 394 | } 395 | } 396 | } 397 | 398 | /* Dark Mode */ 399 | @media only screen and (min-width: 0em) { 400 | body.dark-mode { 401 | #cta { 402 | &:after { 403 | display: none; 404 | } 405 | } 406 | } 407 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Starter-KitV3 2 | This is the latest version of my starter kit that I will be using from now on to build all my websites. It has a completely remade responsive navigation that is much simpler, and easier to edit and customize. 3 | 4 | 5 | # Switching between top drop down mobile and and side pop out mobile nav 6 | 7 | I built my mobile navs with a max-width media query so I can make any edits I want to them and not affect the desktop design. This also allows me to swap in different code for different mobile styles and animations. There is a mobile-nav-options.css file that contains seperate code for top drop down and side pop out. They're wrapped in a max-width: 1023px media query. Just copy and paste the one you want to sue and it will change the mobile nav from a top drop down to a side pop out one. No extra work needed! 8 | 9 | 10 | # Simplified dark mode system. 11 | 12 | My previous one had a bunch of messy code that wasn't organized very well, so I simplified it and removed all the classes you don't need. I abstracted the toggle code into it's own group and put the core styles in another labeled grouping. I also added a new dark mode color palette that is much more modern and better on the eye and not as harsh as the straight blacks I was using before. 13 | 14 | 15 | # How to use the dark mode functionality 16 | 17 | Here's the link to read about how it works and even download the code yourself to add to new projects or existing projects 18 | 19 | https://www.oakharborwebdesigns.com/blog/2020/december/how-to-add-dark-mode-to-a-website#blog-post 20 | 21 | In the LESS file (dark.less), choose the screen size you want to target and inside the body.dark-mode brackets just start adding you new style declarations for dark mode and that’s it! 22 | 23 | 24 | # SET UP LESS 25 | 26 | This new starter kit is based on ems for more responsive design. I have utilized the LESS preprocessor to use its ability to do em calculations. I use the Koala App to choose the css file I want to watch and I click the .less files I want to auto compile and hit the compile button. This will now continuously watch for changes in your .less file inside the css folder and compile the .less into it's own .css file to load instantly on save every time in your local server. 27 | 28 | Here is the link to download Koala: 29 | 30 | http://koala-app.com/ 31 | 32 | You can have it watch multiple .less files and multiple folders at once. You just have to select each .less file individually and hit the compile button in the lower right. 33 | 34 | INSTALL LESS 35 | 36 | To install the LESS preprocessor, you first must download and install npm so you can install any program you want with one line of code: 37 | 38 | https://nodejs.org/en/download/ 39 | 40 | Once that is downloaded and installed, download and install GIT terminal or just use your default terminal window on your computer 41 | 42 | Download GIT 43 | https://gitforwindows.org/ 44 | 45 | OR 46 | 47 | Open the default terminal on your computer 48 | https://www.ionos.com/help/email/troubleshooting-mail-basicmail-business/access-the-command-prompt-or-terminal/ 49 | 50 | Then open your GIT terminal or default computer terminal and copy and paste this in your terminal and hit enter to install LESS 51 | 52 | npm install less 53 | 54 | Now you have LESS on your machine! Hopefully that wasn't too bad. It was a little tricky for me to get started too but I used the resources I linked here to figure it out. 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | # CALCULATING THE EM UNITS 63 | 64 | Introduction: 65 | As you may or may not know, em units are based on the font size of its parent element. If the parent element does not have a declared font size in your css, then the next parent element with a declared font size will be it's base. Since I am not declaring a font size on any containers, literally everything on the page will look up to the body tag for a font size, and since we declared a font size of 20px that is what they will divide themselves by to get the em value. So I just set the font size on the to be 15px on mobile, tablet, and small desktop up to 1023px wide. Then on 1024px wide it is set 20 the actual default of 20px. 66 | 67 | 68 | 69 | Here's a video of me building a website using these em calculations and showing you exactly how it all works with a real project. 70 | 71 | https://youtu.be/gUakUDC8UdE 72 | 73 | 74 | 75 | # Explanation of how this system works 76 | 77 | What happens here, is every single element's measurements that would be in pixels will now be in ems divided 20 (the default font size on desktop). So when we have an element that is 100px wide, in the .less file we write it as 100/20em, and the compiler will compile it in css as 5em. Since that em calculation is based on the 20px, when we change the body font size to 15px it will shrink EVERYTHING because the em calculations are on a smaller font size, and will scale down proportionally. 78 | 79 | For example, if an element is 20px wide, it will be written as 20/20em in your .less file, and compile to 1em in your .css file. That is it's ratio. When we change the font size of the body (the main parent of everything) to a smaller number on mobile (15px), it's scaling the size of 1em to fit in a 15px based font instead of a 20px. 1em would technically be 15/15em, which means by reducing the font size of the body by 5px, EVERYTHING that is based off it's 20px font size will also reduce themselves by 5px in scale. 80 | 81 | Both instances of 15/15 and 20/20 result in 1em. The base font size of the parent determines how big the 1em value is scaled up or down by default. Think of ems as the ratio of the measurement and it's parent font size, and the body font size is telling everything how big or small they need to be. We are setting the ratio to be based on desktop styles and measurements. 82 | 83 | The higher the font size, the larger 1em is scaled by. Smaller font sizes scale down the size of 1em. This is how we can control mobile scaling. You don't have to write separate css styles for your mobile and make larger sizes on desktop. By writing all our css properties' px values in x/20em, everything will scale itself down on mobile and grow into it's final em scale size at the 20px font size. 84 | 85 | Here is an example of this method at work. All of the css styles are set with the desktop widths, heights, and other dimensions. I built it once and scaled it down for mobile. 86 | 87 | https://responsive-circle.netlify.app/ 88 | 89 | Inspect the page and resize it manually from 320px to desktop and watch it grow. The ems and the body font size scale down the entire design proportionally to each other. 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | # IMPORTANT!! ******* MUST READ AND UNDERSTAND HOW TO MAKE THIS WORK 98 | 99 | For this to work properly and scale PRECISELY, we need the .less calculation system to make this easier. So if we have an H1 text that is supposed to be 50px, we would write it as 50/20em. Just like we would normally. HOWEVER, any of it's properties and children need to be divided by the new declared font size. So if it has a margin-bottom of 20px, it will be 20/50em, NOT 20/20em. Their parent has their own font size declared now. Here's an example of how this will look in .less: 100 | 101 | ``` 102 | h2 { 103 | color: #fff; 104 | font-size: 24/20em; <--- new declared font size 105 | line-height: 28/24; <--- Everything inside the h1 is divided by this new font size (line height does not need the em unit added to it) 106 | margin-bottom: 15/24em; <--- Everything inside the h1 is divided by this new font size 107 | 108 | span { 109 | display: block; 110 | color: #fff; 111 | margin-bottom: 50/24em; <--- Everything inside the h1 is divided by this new font size 112 | } 113 | } 114 | ``` 115 | 116 | 117 | Also, if this span had a different font size than the h1, we set the new font size divided by the parents new font size. 118 | 119 | ``` 120 | h2 { 121 | font-size: 24/20em; <--- new font size 122 | 123 | span { 124 | display: block; 125 | color: #fff; 126 | font-size: 50/24em <--- new font size declared, divided by the parents' font size 127 | margin-bottom: 50/50em; <--- Everything inside the span is divided by this new font size 128 | } 129 | } 130 | ``` 131 | This is what we have to do to maintain the ratio. The h1 font size is based on the body, and since it has a new font size, its properties and children will now be based on its new font size, and so on. Think of them all as working together. The spans font size is getting their information from the H1s font size, and that H1 is getting its info from the body. This maintains the proportions of what 1em is scaled to. 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | # THE PAYOFF - HOW TO GET 100% TRUE RESPONSIVE BEHAVIOR 140 | Why is this important? Because at 1500px or however wide your design ends up being, you can set the body font size to 1vw, which is the width of the viewport (screen). When the body size is now determined by the screen size, EVERY element will now grow proportionally with the growth of the screen size. This is what I mean when I say TRUELY 100% responsive - it responds to the size of the screen and every single element on the page will grow proportionally with each to fit the screen size. 141 | 142 | Here's an example showing this in action. This is a demo link of the current Starter Kit as of November 5, 2021. 143 | 144 | https://body-vw-example.netlify.app/ 145 | 146 | Inspect the page, and set the the viewport at the top to "Dimensions: Responsive" and pull the edge of the screen out to grow the website's width. At 2000px is where I set the body to font-size: 1vw; and every pixel you make the screen wider by after that you'll notice that every single element on the page is growing at the same scale relative to each other. The ENTIRE site is now responding to the width of the screen and growing to fit it. This creates a uniform website experience for everyone, no matter how big their screen is. This site will look the same viewed on a laptop and a 50in tv without hvaing to write any extra code or using the zoom property, which isn't supported by Firefox. 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | # MORE USES FOR THE VW UNIT 155 | Lets say you have a section of 4 cards that you'd like to have displayed in 2 rows of two on mobile. When you write the styles with the desktop sizes and do your flexboxing but the boxes are still too big fit next to each other on a mobile screen, you can use vw units to scale down the elements. On the parent container for the items, set the font size with a min/max calculation here: 156 | 157 | LESS min/max calculation 158 | font-size:~"min(1.4vw, 1em)"; 159 | 160 | This is how you have to do calulations in LESS, because otherwise it wont work. What's happening is we are setting the minimum font size to be the 1.4vw unit, and we can make it however big or small we need. The smaller the value, the smaller the entire section scales down and vice versa. 1em is the maximum. So it will start small, and scale up until it reaches the size it's supposed to be at 1em (the body font size) and stop. 161 | 162 | Example - Start at 320px wide and drag the screen to make it larger. You'll notice that the circle and all the elements inside of it are growing together proportionally. This is what happens when you use vw units on the container and ems for everything. 163 | 164 | https://responsive-circle.netlify.app/ 165 | 166 | So instead of writing new css styles to shrink every element to be smaller, all we have to do is write one line of code and the entire container shrinks proportionally together and maintains their scale from mobile to desktop. This is the true power of using ems properly and mathematically. 167 | -------------------------------------------------------------------------------- /css/mobile-nav-options.css: -------------------------------------------------------------------------------- 1 | /* Mobile - Top Drop Down */ 2 | @media only screen and (max-width: 1023px) { 3 | #navigation { 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | z-index: 10000; 9 | height: auto; 10 | } 11 | #navigation .background-color-div { 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | background-color: #fff; 16 | width: 100%; 17 | height: 100%; 18 | -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 19 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 20 | } 21 | #navigation .container { 22 | padding: 0.8125em 0; 23 | width: 96%; 24 | } 25 | #navigation .logo { 26 | display: inline-block; 27 | height: 1.875em; 28 | width: auto; 29 | } 30 | #navigation .logo img { 31 | width: auto; 32 | height: 100%; 33 | } 34 | #navigation .logo .light { 35 | display: none; 36 | } 37 | #navigation .logo .dark { 38 | display: block; 39 | } 40 | #navigation .hamburger-menu { 41 | position: absolute; 42 | right: 0em; 43 | border: none; 44 | height: 3em; 45 | width: 3em; 46 | z-index: 100; 47 | display: block; 48 | background: transparent; 49 | padding: 0; 50 | top: 50%; 51 | -webkit-transform: translateY(-50%); 52 | transform: translateY(-50%); 53 | -webkit-transition: top .3s; 54 | transition: top .3s; 55 | } 56 | #navigation .hamburger-menu span { 57 | height: 2px; 58 | width: 1.875em; 59 | background-color: #000; 60 | display: block; 61 | position: absolute; 62 | left: 50%; 63 | -webkit-transform: translateX(-50%); 64 | transform: translateX(-50%); 65 | -webkit-transition: background-color 0.3s; 66 | transition: background-color 0.3s; 67 | } 68 | #navigation .hamburger-menu span:before { 69 | content: ''; 70 | position: absolute; 71 | display: block; 72 | height: 2px; 73 | width: 80%; 74 | background: #000; 75 | opacity: 1; 76 | top: -6px; 77 | left: 0; 78 | -webkit-transition: width .3s, left .3s, top .3s, -webkit-transform .5s; 79 | transition: width .3s, left .3s, top .3s, -webkit-transform .5s; 80 | transition: width .3s, left .3s, top .3s, transform .5s; 81 | transition: width .3s, left .3s, top .3s, transform .5s, -webkit-transform .5s; 82 | } 83 | #navigation .hamburger-menu span:after { 84 | content: ''; 85 | position: absolute; 86 | display: block; 87 | height: 2px; 88 | width: 80%; 89 | background: #000; 90 | opacity: 1; 91 | top: 6px; 92 | left: 0; 93 | -webkit-transition: width .3s, left .3s, top .3s, -webkit-transform .3s; 94 | transition: width .3s, left .3s, top .3s, -webkit-transform .3s; 95 | transition: width .3s, left .3s, top .3s, transform .3s; 96 | transition: width .3s, left .3s, top .3s, transform .3s, -webkit-transform .3s; 97 | } 98 | #navigation .hamburger-menu.clicked span { 99 | background-color: transparent; 100 | } 101 | #navigation .hamburger-menu.clicked span:before { 102 | width: 100%; 103 | -webkit-transform: translate(-50%, -50%) rotate(225deg); 104 | transform: translate(-50%, -50%) rotate(225deg); 105 | left: 50%; 106 | top: 50%; 107 | } 108 | #navigation .hamburger-menu.clicked span:after { 109 | width: 100%; 110 | -webkit-transform: translate(-50%, -50%) rotate(-225deg); 111 | transform: translate(-50%, -50%) rotate(-225deg); 112 | left: 50%; 113 | top: 50%; 114 | } 115 | #navigation #navbar-menu { 116 | position: fixed; 117 | right: 0; 118 | padding: 0; 119 | width: 100%; 120 | border-radius: 0 0 0.375em 0.375em; 121 | z-index: -1; 122 | overflow: hidden; 123 | -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 124 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 125 | background-color: #fff; 126 | top: 4em; 127 | padding-top: 0; 128 | height: 0; 129 | -webkit-transition: height 0.3s, padding-top 0.3s, top 0.3s; 130 | transition: height 0.3s, padding-top 0.3s, top 0.3s; 131 | } 132 | #navigation #navbar-menu ul { 133 | padding: 0; 134 | -webkit-perspective: 700px; 135 | perspective: 700px; 136 | } 137 | #navigation #navbar-menu ul li { 138 | list-style: none; 139 | margin-bottom: 1.5em; 140 | text-align: center; 141 | -webkit-transform-style: preserve-3d; 142 | transform-style: preserve-3d; 143 | opacity: 0; 144 | -webkit-transform: translateY(-0.4375em) rotateX(90deg); 145 | transform: translateY(-0.4375em) rotateX(90deg); 146 | -webkit-transition: opacity .5s, -webkit-transform .5s; 147 | transition: opacity .5s, -webkit-transform .5s; 148 | transition: opacity .5s, transform .5s; 149 | transition: opacity .5s, transform .5s, -webkit-transform .5s; 150 | } 151 | #navigation #navbar-menu ul li:nth-of-type(1) { 152 | -webkit-transition-delay: .1s; 153 | transition-delay: .1s; 154 | } 155 | #navigation #navbar-menu ul li:nth-of-type(2) { 156 | -webkit-transition-delay: .2s; 157 | transition-delay: .2s; 158 | } 159 | #navigation #navbar-menu ul li:nth-of-type(3) { 160 | -webkit-transition-delay: .3s; 161 | transition-delay: .3s; 162 | } 163 | #navigation #navbar-menu ul li:nth-of-type(4) { 164 | -webkit-transition-delay: .4s; 165 | transition-delay: .4s; 166 | } 167 | #navigation #navbar-menu ul li:nth-of-type(5) { 168 | -webkit-transition-delay: .5s; 169 | transition-delay: .5s; 170 | } 171 | #navigation #navbar-menu ul li a { 172 | text-decoration: none; 173 | text-transform: uppercase; 174 | color: #000; 175 | font-size: 1.1875em; 176 | text-align: center; 177 | display: inline-block; 178 | position: relative; 179 | font-weight: bold; 180 | } 181 | #navigation #navbar-menu ul li a.active:before { 182 | content: ''; 183 | position: absolute; 184 | display: block; 185 | height: 0.42105263em; 186 | background: var(--primary); 187 | opacity: 1; 188 | bottom: 0.26315789em; 189 | border-radius: 0.21052632em; 190 | left: -0.31578947em; 191 | right: -0.31578947em; 192 | z-index: -1; 193 | } 194 | #navigation #navbar-menu.open { 195 | height: 19.125em; 196 | padding-top: 1.25em; 197 | z-index: -100; 198 | } 199 | #navigation #navbar-menu.open ul li { 200 | opacity: 1; 201 | -webkit-transform: translateY(0) rotateX(0); 202 | transform: translateY(0) rotateX(0); 203 | } 204 | } 205 | /* Mobile - Side Pop Out */ 206 | @media only screen and (max-width: 1023px) { 207 | #navigation { 208 | position: fixed; 209 | top: 0; 210 | left: 0; 211 | width: 100%; 212 | z-index: 10000; 213 | height: auto; 214 | } 215 | #navigation .background-color-div { 216 | position: absolute; 217 | top: 0; 218 | left: 0; 219 | background-color: #fff; 220 | width: 100%; 221 | height: 100%; 222 | -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 223 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 224 | } 225 | #navigation .container { 226 | padding: 0.8125em 0; 227 | width: 96%; 228 | } 229 | #navigation .logo { 230 | display: inline-block; 231 | height: 1.875em; 232 | width: auto; 233 | } 234 | #navigation .logo img { 235 | width: auto; 236 | height: 100%; 237 | } 238 | #navigation .logo .light { 239 | display: none; 240 | } 241 | #navigation .logo .dark { 242 | display: block; 243 | } 244 | #navigation .hamburger-menu { 245 | position: absolute; 246 | right: 0em; 247 | border: none; 248 | height: 3em; 249 | width: 3em; 250 | z-index: 100; 251 | display: block; 252 | background: transparent; 253 | padding: 0; 254 | top: 50%; 255 | -webkit-transform: translateY(-50%); 256 | transform: translateY(-50%); 257 | -webkit-transition: top .3s; 258 | transition: top .3s; 259 | } 260 | #navigation .hamburger-menu span { 261 | height: 2px; 262 | width: 1.875em; 263 | background-color: #000; 264 | display: block; 265 | position: absolute; 266 | left: 50%; 267 | -webkit-transform: translateX(-50%); 268 | transform: translateX(-50%); 269 | -webkit-transition: background-color 0.3s; 270 | transition: background-color 0.3s; 271 | } 272 | #navigation .hamburger-menu span:before { 273 | content: ''; 274 | position: absolute; 275 | display: block; 276 | height: 2px; 277 | width: 80%; 278 | background: #000; 279 | opacity: 1; 280 | top: -6px; 281 | left: 0; 282 | -webkit-transition: width .3s, left .3s, top .3s, -webkit-transform .5s; 283 | transition: width .3s, left .3s, top .3s, -webkit-transform .5s; 284 | transition: width .3s, left .3s, top .3s, transform .5s; 285 | transition: width .3s, left .3s, top .3s, transform .5s, -webkit-transform .5s; 286 | } 287 | #navigation .hamburger-menu span:after { 288 | content: ''; 289 | position: absolute; 290 | display: block; 291 | height: 2px; 292 | width: 80%; 293 | background: #000; 294 | opacity: 1; 295 | top: 6px; 296 | left: 0; 297 | -webkit-transition: width .3s, left .3s, top .3s, -webkit-transform .3s; 298 | transition: width .3s, left .3s, top .3s, -webkit-transform .3s; 299 | transition: width .3s, left .3s, top .3s, transform .3s; 300 | transition: width .3s, left .3s, top .3s, transform .3s, -webkit-transform .3s; 301 | } 302 | #navigation .hamburger-menu.clicked span { 303 | background-color: transparent; 304 | } 305 | #navigation .hamburger-menu.clicked span:before { 306 | width: 100%; 307 | -webkit-transform: translate(-50%, -50%) rotate(225deg); 308 | transform: translate(-50%, -50%) rotate(225deg); 309 | left: 50%; 310 | top: 50%; 311 | } 312 | #navigation .hamburger-menu.clicked span:after { 313 | width: 100%; 314 | -webkit-transform: translate(-50%, -50%) rotate(-225deg); 315 | transform: translate(-50%, -50%) rotate(-225deg); 316 | left: 50%; 317 | top: 50%; 318 | } 319 | #navigation #navbar-menu { 320 | position: fixed; 321 | right: 0; 322 | padding: 0; 323 | height: 100%; 324 | border-radius: 0 0 0.375em 0.375em; 325 | z-index: -1; 326 | overflow: hidden; 327 | -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 328 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 329 | background-color: #fff; 330 | top: 4em; 331 | padding-top: 0; 332 | width: 0em; 333 | -webkit-transition: width .3s; 334 | transition: width .3s; 335 | } 336 | #navigation #navbar-menu ul { 337 | padding: 0; 338 | -webkit-perspective: 700px; 339 | perspective: 700px; 340 | padding-right: 1.25em; 341 | padding-top: 3.125em; 342 | } 343 | #navigation #navbar-menu ul li { 344 | list-style: none; 345 | margin-bottom: 1.5em; 346 | text-align: right; 347 | -webkit-transform-style: preserve-3d; 348 | transform-style: preserve-3d; 349 | opacity: 0; 350 | -webkit-transform: translateY(-0.4375em) rotateX(0deg); 351 | transform: translateY(-0.4375em) rotateX(0deg); 352 | -webkit-transition: opacity .5s, -webkit-transform .5s; 353 | transition: opacity .5s, -webkit-transform .5s; 354 | transition: opacity .5s, transform .5s; 355 | transition: opacity .5s, transform .5s, -webkit-transform .5s; 356 | } 357 | #navigation #navbar-menu ul li:nth-of-type(1) { 358 | -webkit-transition-delay: .1s; 359 | transition-delay: .1s; 360 | } 361 | #navigation #navbar-menu ul li:nth-of-type(2) { 362 | -webkit-transition-delay: .2s; 363 | transition-delay: .2s; 364 | } 365 | #navigation #navbar-menu ul li:nth-of-type(3) { 366 | -webkit-transition-delay: .3s; 367 | transition-delay: .3s; 368 | } 369 | #navigation #navbar-menu ul li:nth-of-type(4) { 370 | -webkit-transition-delay: .4s; 371 | transition-delay: .4s; 372 | } 373 | #navigation #navbar-menu ul li:nth-of-type(5) { 374 | -webkit-transition-delay: .5s; 375 | transition-delay: .5s; 376 | } 377 | #navigation #navbar-menu ul li a { 378 | text-decoration: none; 379 | text-transform: uppercase; 380 | color: #000; 381 | font-size: 1.1875em; 382 | text-align: center; 383 | display: inline-block; 384 | position: relative; 385 | font-weight: bold; 386 | } 387 | #navigation #navbar-menu ul li a.active:before { 388 | content: ''; 389 | position: absolute; 390 | display: block; 391 | height: 0.42105263em; 392 | background: var(--primary); 393 | opacity: 1; 394 | bottom: 0.26315789em; 395 | border-radius: 0.21052632em; 396 | left: -0.31578947em; 397 | right: -0.31578947em; 398 | z-index: -1; 399 | } 400 | #navigation #navbar-menu.open { 401 | width: 15.625em; 402 | z-index: -100; 403 | } 404 | #navigation #navbar-menu.open ul li { 405 | opacity: 1; 406 | -webkit-transform: translateY(0) rotateX(0); 407 | transform: translateY(0) rotateX(0); 408 | } 409 | } 410 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | Company Name | Contact Us | Town and State 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 |
100 |

Contact Us

101 | 102 | 103 | 104 | 105 | 106 |
107 | 108 | 109 | 110 | 111 | 112 |
113 |
114 |

Send a Message

115 |

If you have any questions or concerns please feel free to reach out to us. We respond to every call and email.

116 |
117 |
118 | 119 | 120 | 121 |
122 | 123 |
124 | 125 | 126 | 127 |
128 | 129 |
130 | 131 | 132 | 133 |
134 |
135 | 136 | 137 | 138 |
139 |
140 | 141 | 142 | 143 |
144 |
145 | 146 | 147 | 148 |
149 |

150 | 151 |

152 |
153 |
154 |
155 |
156 | Location 157 | Denver, CO 158 |
159 |
160 | Phone 161 | (555) 779-4407 162 |
163 |
164 | Email 165 | Click to Email 166 |
167 |
168 | Hours 169 | Mon to Fri: 8am to 6pm 170 |
171 |
172 |
173 | 174 |
175 | 176 | 177 | 178 | 179 | 180 | 220 | 221 | 222 | 223 | 228 | 238 | 239 | 240 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | Company Name | About Us | Town and State 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 |
100 |

About Us

101 | 102 | 103 | 104 | 105 | 106 |
107 | 108 | 109 | 110 | 111 | 112 |
113 |
114 |
115 |

Lorem ipsum dolor sit amet consectetur.

116 |

117 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam debitis dolor consectetur dolorem inventore modi tenetur ex odit, amet beatae ad, doloribus tempora quae ab nulla minus temporibus at veritatis! 118 |

119 |

120 | List if you need it: 121 |

122 |
    123 |
  • 124 | 125 | List item about something 126 |
    • 127 |
  • 128 | 129 | List item about something 130 |
    • 131 |
  • 132 | 133 | List item about something 134 |
    • 135 |
  • 136 | 137 | List item about something 138 |
    • 139 |
  • 140 | 141 | List item about something 142 |
    • 143 |
144 |

145 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium saepe laborum nam consequuntur porro inventore odio? Quod autem alias ratione cum reiciendis qui quaerat, sequi voluptatum voluptatibus, iusto itaque sed ullam. Quis, maiores corrupti. Rerum quo laudantium vero magnam tempora! 146 |

147 | Get Free Quote 148 |
149 | 150 | 151 | 152 | 153 | 154 |
155 |
156 | 157 | 158 | 159 | 160 | 161 |
162 |
163 |

Get It Done
With Us Today

164 |

165 | Say something catchy, informative, and encouraging to click the button to go to the contact page. I like to add these to the bottom of all pages. 166 |

167 | Free Estimate 168 |
169 | 170 | 171 | 172 | 173 | 174 |
175 | 176 |
177 | 178 | 179 | 180 | 181 | 182 | 222 | 223 | 224 | 225 | 230 | 240 | 241 | 242 | -------------------------------------------------------------------------------- /projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | Company Name | Projects | Town and State 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 |
100 |

Our Projects

101 | 102 | 103 | 104 | 105 | 106 |
107 | 108 | 109 | 110 | 111 | 112 |
113 |
114 |
115 | 116 | 117 | 118 | new hallway 119 | 120 | 121 | 122 | 123 | new home construction 124 | 125 | 126 | 127 | 128 | building a new wall 129 | 130 |
131 |
132 | 133 | 134 | 135 | new kitchen 136 | 137 | 138 | 139 | 140 | apartment addition 141 | 142 | 143 | 144 | 145 | kew kitchen cabinets 146 | 147 |
148 |
149 | 150 | 151 | 152 | new black window structure 153 | 154 | 155 | 156 | 157 | 158 | kitchen rebovation 159 | 160 | 161 | 162 | 163 | 164 | 165 | bathroom renovation 166 | 167 |
168 |
169 |
170 | 171 | 172 | 173 | 174 | 175 |
176 |
177 |

Get It Done
With Us Today

178 |

179 | Say something catchy, informative, and encouraging to click the button to go to the contact page. I like to add these to the bottom of all pages. 180 |

181 | Free Estimate 182 |
183 | 184 | 185 | 186 | 187 | 188 |
189 | 190 |
191 | 192 | 193 | 194 | 195 | 196 | 236 | 237 | 238 | 239 | 244 | 254 | 255 | 256 | -------------------------------------------------------------------------------- /css/mobile-nav-options.less: -------------------------------------------------------------------------------- 1 | /* Mobile - Top Drop Down */ 2 | @media only screen and (max-width: 1023px) { 3 | 4 | //Navigation Styles 5 | #navigation { 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | z-index: 10000; 11 | height: auto; 12 | 13 | .background-color-div { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | background-color: #fff; 18 | width: 100%; 19 | height: 100%; 20 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 21 | } 22 | 23 | .container { 24 | padding: 13/16em 0; 25 | width: 96%; 26 | } 27 | 28 | // Logo 29 | .logo { 30 | display: inline-block; 31 | height: 30/16em ; 32 | width: auto; 33 | 34 | img { 35 | width: auto; 36 | height: 100%; 37 | } 38 | 39 | .light { 40 | display: none; 41 | } 42 | 43 | .dark { 44 | display: block; 45 | } 46 | } 47 | 48 | // Hamburger Menu Default State 49 | .hamburger-menu { 50 | position: absolute; 51 | right: 0/16em; 52 | border: none; 53 | height: 48/16em; 54 | width: 48/16em; 55 | z-index: 100; 56 | display: block; 57 | background: transparent; 58 | padding: 0; 59 | top: 50%; 60 | transform: translateY(-50%); 61 | transition: top .3s; 62 | 63 | span { 64 | height: 2px; 65 | width: 30/16em; 66 | background-color: #000; 67 | display: block; 68 | position: absolute; 69 | left: 50%; 70 | transform: translateX(-50%); 71 | 72 | //transition properties 73 | transition: background-color .3s; 74 | 75 | &:before { 76 | content: ''; 77 | position: absolute; 78 | display: block; 79 | height: 2px; 80 | width: 80%; 81 | background: #000; 82 | opacity: 1; 83 | top: -6px; 84 | left: 0; 85 | 86 | //transition properties 87 | transition: width .3s, left .3s, top .3s, transform .5s; 88 | } 89 | 90 | &:after { 91 | content: ''; 92 | position: absolute; 93 | display: block; 94 | height: 2px; 95 | width: 80%; 96 | background: #000; 97 | opacity: 1; 98 | top: 6px; 99 | left: 0; 100 | 101 | //transition properties 102 | transition: width .3s, left .3s, top .3s, transform .3s; 103 | } 104 | } 105 | } 106 | 107 | // Hamburger Menu Open State 108 | .hamburger-menu.clicked { 109 | span { 110 | background-color: transparent; 111 | &:before { 112 | width: 100%; 113 | transform: translate(-50%, -50%) rotate(225deg); 114 | left: 50%; 115 | top: 50%; 116 | } 117 | 118 | &:after { 119 | width: 100%; 120 | transform: translate(-50%, -50%) rotate(-225deg); 121 | left: 50%; 122 | top: 50%; 123 | } 124 | } 125 | } 126 | 127 | // Navbar Menu Default State 128 | #navbar-menu { 129 | position: fixed; 130 | right: 0; 131 | padding: 0; 132 | width: 100%; 133 | border-radius: 0 0 6/16em 6/16em; 134 | z-index: -1; 135 | overflow: hidden; 136 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 137 | background-color: #fff; 138 | top: 64/16em; // same as #navigation height 139 | 140 | //Transition Properties 141 | padding-top: 0; 142 | height: 0; 143 | transition: height .3s, padding-top .3s, top .3s; 144 | 145 | 146 | ul { 147 | padding: 0; 148 | perspective: 700px; 149 | li { 150 | list-style: none; 151 | margin-bottom: 24/16em; 152 | text-align: center; 153 | //Transition Properties 154 | transform-style: preserve-3d; 155 | opacity: 0; 156 | transform: translateY(-7/16em) rotateX(90deg); 157 | transition: opacity .5s, transform .5s; 158 | 159 | //Staggar their transitions 160 | &:nth-of-type(1) { 161 | transition-delay: .1s; 162 | } 163 | &:nth-of-type(2) { 164 | transition-delay: .2s; 165 | } 166 | &:nth-of-type(3) { 167 | transition-delay: .3s; 168 | } 169 | &:nth-of-type(4) { 170 | transition-delay: .4s; 171 | } 172 | &:nth-of-type(5) { 173 | transition-delay: .5s; 174 | } 175 | a { 176 | text-decoration: none; 177 | text-transform: uppercase; 178 | color: #000; 179 | font-size: 19/16em; 180 | text-align: center; 181 | display: inline-block; 182 | position: relative; 183 | font-weight: bold; 184 | 185 | // Active State 186 | &.active { 187 | &:before { 188 | content: ''; 189 | position: absolute; 190 | display: block; 191 | height: 8/19em; 192 | background: var(--primary); 193 | opacity: 1; 194 | bottom: 5/19em; 195 | border-radius: 4/19em; 196 | left: -6/19em; 197 | right: -6/19em; 198 | z-index: -1; 199 | } 200 | } 201 | } 202 | } 203 | } 204 | } 205 | 206 | // Navbar Menu Open State 207 | #navbar-menu.open { 208 | height: 306/16em; 209 | padding-top: 20/16em; 210 | z-index: -100; 211 | 212 | ul { 213 | li { 214 | opacity: 1; 215 | transform: translateY(0) rotateX(0); 216 | } 217 | } 218 | } 219 | } 220 | } 221 | 222 | 223 | // ---------------------------------------------------------- 224 | 225 | 226 | /* Mobile - Side Pop Out */ 227 | @media only screen and (max-width: 1023px) { 228 | 229 | //Navigation Styles 230 | #navigation { 231 | position: fixed; 232 | top: 0; 233 | left: 0; 234 | width: 100%; 235 | z-index: 10000; 236 | height: auto; 237 | 238 | .background-color-div { 239 | position: absolute; 240 | top: 0; 241 | left: 0; 242 | background-color: #fff; 243 | width: 100%; 244 | height: 100%; 245 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 246 | } 247 | 248 | .container { 249 | padding: 13/16em 0; 250 | width: 96%; 251 | } 252 | 253 | // Logo 254 | .logo { 255 | display: inline-block; 256 | height: 30/16em ; 257 | width: auto; 258 | 259 | img { 260 | width: auto; 261 | height: 100%; 262 | } 263 | 264 | .light { 265 | display: none; 266 | } 267 | 268 | .dark { 269 | display: block; 270 | } 271 | } 272 | 273 | // Hamburger Menu Default State 274 | .hamburger-menu { 275 | position: absolute; 276 | right: 0/16em; 277 | border: none; 278 | height: 48/16em; 279 | width: 48/16em; 280 | z-index: 100; 281 | display: block; 282 | background: transparent; 283 | padding: 0; 284 | top: 50%; 285 | transform: translateY(-50%); 286 | transition: top .3s; 287 | 288 | span { 289 | height: 2px; 290 | width: 30/16em; 291 | background-color: #000; 292 | display: block; 293 | position: absolute; 294 | left: 50%; 295 | transform: translateX(-50%); 296 | 297 | //transition properties 298 | transition: background-color .3s; 299 | 300 | &:before { 301 | content: ''; 302 | position: absolute; 303 | display: block; 304 | height: 2px; 305 | width: 80%; 306 | background: #000; 307 | opacity: 1; 308 | top: -6px; 309 | left: 0; 310 | 311 | //transition properties 312 | transition: width .3s, left .3s, top .3s, transform .5s; 313 | } 314 | 315 | &:after { 316 | content: ''; 317 | position: absolute; 318 | display: block; 319 | height: 2px; 320 | width: 80%; 321 | background: #000; 322 | opacity: 1; 323 | top: 6px; 324 | left: 0; 325 | 326 | //transition properties 327 | transition: width .3s, left .3s, top .3s, transform .3s; 328 | } 329 | } 330 | } 331 | 332 | // Hamburger Menu Open State 333 | .hamburger-menu.clicked { 334 | span { 335 | background-color: transparent; 336 | &:before { 337 | width: 100%; 338 | transform: translate(-50%, -50%) rotate(225deg); 339 | left: 50%; 340 | top: 50%; 341 | } 342 | 343 | &:after { 344 | width: 100%; 345 | transform: translate(-50%, -50%) rotate(-225deg); 346 | left: 50%; 347 | top: 50%; 348 | } 349 | } 350 | } 351 | 352 | // Navbar Menu Default State 353 | #navbar-menu { 354 | position: fixed; 355 | right: 0; 356 | padding: 0; 357 | height: 100%; 358 | border-radius: 0 0 6/16em 6/16em; 359 | z-index: -1; 360 | overflow: hidden; 361 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 362 | background-color: #fff; 363 | top: 64/16em; // same as #navigation height 364 | 365 | //Transition Properties 366 | padding-top: 0; 367 | width: 0/16em; 368 | transition: width .3s; 369 | 370 | 371 | ul { 372 | padding: 0; 373 | perspective: 700px; 374 | padding-right: 20/16em; 375 | padding-top: 50/16em; 376 | li { 377 | list-style: none; 378 | margin-bottom: 24/16em; 379 | text-align: right; 380 | //Transition Properties 381 | transform-style: preserve-3d; 382 | opacity: 0; 383 | transform: translateY(-7/16em) rotateX(00deg); 384 | transition: opacity .5s, transform .5s; 385 | 386 | //Staggar their transitions 387 | &:nth-of-type(1) { 388 | transition-delay: .1s; 389 | } 390 | &:nth-of-type(2) { 391 | transition-delay: .2s; 392 | } 393 | &:nth-of-type(3) { 394 | transition-delay: .3s; 395 | } 396 | &:nth-of-type(4) { 397 | transition-delay: .4s; 398 | } 399 | &:nth-of-type(5) { 400 | transition-delay: .5s; 401 | } 402 | a { 403 | text-decoration: none; 404 | text-transform: uppercase; 405 | color: #000; 406 | font-size: 19/16em; 407 | text-align: center; 408 | display: inline-block; 409 | position: relative; 410 | font-weight: bold; 411 | 412 | // Active State 413 | &.active { 414 | &:before { 415 | content: ''; 416 | position: absolute; 417 | display: block; 418 | height: 8/19em; 419 | background: var(--primary); 420 | opacity: 1; 421 | bottom: 5/19em; 422 | border-radius: 4/19em; 423 | left: -6/19em; 424 | right: -6/19em; 425 | z-index: -1; 426 | } 427 | } 428 | } 429 | } 430 | } 431 | } 432 | 433 | // Navbar Menu Open State 434 | #navbar-menu.open { 435 | width: 250/16em; 436 | z-index: -100; 437 | 438 | ul { 439 | li { 440 | opacity: 1; 441 | transform: translateY(0) rotateX(0); 442 | } 443 | } 444 | } 445 | } 446 | } --------------------------------------------------------------------------------