├── img ├── map-1x.png ├── map-2x.png ├── favicon.png ├── hero-img-1x.png ├── hero-img-2x.png ├── why-us-img-1x.png ├── why-us-img-2x.png ├── mission-img-1x.png ├── mission-img-2x.png └── services-bg-img.png ├── .gitignore ├── sass ├── base │ ├── _animations.scss │ ├── _utilities.scss │ ├── _base.scss │ └── _typography.scss ├── main.scss ├── abstract │ ├── _variables.scss │ └── _mixins.scss ├── components │ ├── _form.scss │ └── _button.scss ├── layout │ ├── _footer.scss │ └── _header.scss └── pages │ └── _home.scss ├── package.json ├── README.md ├── LICENSE ├── css ├── style.min.css └── style.css └── index.html /img/map-1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/map-1x.png -------------------------------------------------------------------------------- /img/map-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/map-2x.png -------------------------------------------------------------------------------- /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/favicon.png -------------------------------------------------------------------------------- /img/hero-img-1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/hero-img-1x.png -------------------------------------------------------------------------------- /img/hero-img-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/hero-img-2x.png -------------------------------------------------------------------------------- /img/why-us-img-1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/why-us-img-1x.png -------------------------------------------------------------------------------- /img/why-us-img-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/why-us-img-2x.png -------------------------------------------------------------------------------- /img/mission-img-1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/mission-img-1x.png -------------------------------------------------------------------------------- /img/mission-img-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/mission-img-2x.png -------------------------------------------------------------------------------- /img/services-bg-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devdesiignn/BuildCo/HEAD/img/services-bg-img.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | css/*.css.map 2 | css/*.css 3 | !css/style.css 4 | !css/style.min.css 5 | img/svg/ 6 | node_modules/ 7 | buildco-ui.png 8 | codes.txt 9 | *.json 10 | !package.json 11 | BuildCo — We construct with Elegance and Class 💯.mp4 -------------------------------------------------------------------------------- /sass/base/_animations.scss: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(100vh); 5 | } 6 | 100% { 7 | opacity: 1; 8 | transform: translateY(0); 9 | } 10 | } 11 | 12 | @keyframes rotate { 13 | 0% { 14 | transform: rotate(0); 15 | } 16 | 20% { 17 | transform: rotate(-90deg); 18 | } 19 | 100% { 20 | transform: rotate(1turn); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | //FONTS 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap"); 3 | 4 | //SASS MINI-FILES 5 | @import "abstract/mixins"; 6 | @import "abstract/variables"; 7 | 8 | @import "base/animations"; 9 | @import "base/base"; 10 | @import "base/typography"; 11 | @import "base/utilities"; 12 | 13 | @import "components/button"; 14 | @import "components/form"; 15 | 16 | @import "layout/header"; 17 | @import "layout/footer"; 18 | 19 | @import "pages/home"; 20 | -------------------------------------------------------------------------------- /sass/abstract/_variables.scss: -------------------------------------------------------------------------------- 1 | $color-primary: #007a69; 2 | $color-primary-dark: #00584c; 3 | 4 | $color-gray-text: #656565; 5 | $color-gray-text-2: #9c9c9c; 6 | 7 | $color-gray-light: #ababab; 8 | 9 | $color-gray-bg: #f9f9fb; 10 | $color-gray-bg-2: #e5e5e5; 11 | 12 | $color-white: #fff; 13 | $color-black: #000; 14 | 15 | $shadow-1: 0 1rem 4rem rgba(0, 0, 0, 0.2); 16 | 17 | $shadow-2: 0 1rem 6rem rgba(0, 0, 0, 0.2); 18 | 19 | $shadow-3: 0 1rem 2rem rgba(0, 0, 0, 0.2); 20 | 21 | $default-size: 1.6rem; 22 | -------------------------------------------------------------------------------- /sass/base/_utilities.scss: -------------------------------------------------------------------------------- 1 | .u-center-text { 2 | text-align: center !important; 3 | } 4 | 5 | .u-margin-top-big { 6 | margin-top: 8rem !important; 7 | } 8 | .u-margin-top-mid { 9 | margin-top: 4rem !important; 10 | } 11 | .u-margin-top-small { 12 | margin-top: 2rem !important; 13 | } 14 | 15 | .u-margin-bottom-big { 16 | margin-bottom: 8rem !important; 17 | } 18 | .u-margin-bottom-mid { 19 | margin-bottom: 4rem !important; 20 | } 21 | .u-margin-bottom-small { 22 | margin-bottom: 2rem !important; 23 | } 24 | -------------------------------------------------------------------------------- /sass/abstract/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin viewport($breakpoint) { 2 | @if $breakpoint == phone { 3 | @media only screen and (max-width: 37.5em) { 4 | @content; 5 | } 6 | } 7 | 8 | @if $breakpoint == tab-port { 9 | @media only screen and (max-width: 56.25em) { 10 | @content; 11 | } 12 | } 13 | 14 | @if $breakpoint == tab-desk { 15 | @media only screen and (max-width: 75em) { 16 | @content; 17 | } 18 | } 19 | 20 | @if $breakpoint == big-desk { 21 | @media only screen and (min-width: 112.5em) { 22 | @content; 23 | } 24 | } 25 | } 26 | 27 | @mixin centerChildren { 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "buildco", 3 | "version": "1.0.0", 4 | "description": "BuildCo - Construction Company Website", 5 | "main": "index.js", 6 | "scripts": { 7 | "watch:sass": "sass sass/main.scss css/style.css -w", 8 | "liveserver": "live-server", 9 | "dev:start": "npm-run-all --parallel liveserver watch:sass", 10 | 11 | "compile:sass": "sass sass/main.scss css/style.comp.css", 12 | "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css", 13 | "compress:css": "sass css/style.prefix.css css/style.min.css --style compressed", 14 | "build:css": "npm-run-all compile:sass prefix:css compress:css liveserver" 15 | }, 16 | "author": "d3vd3511gn", 17 | "license": "ISC", 18 | "devDependencies": { 19 | "autoprefixer": "^10.4.7", 20 | "concat": "^1.0.3", 21 | "npm-run-all": "^4.1.5", 22 | "postcss-cli": "^10.0.0", 23 | "sass": "^1.53.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /sass/components/_form.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | &__col { 3 | display: flex; 4 | 5 | gap: 2rem; 6 | align-items: center; 7 | width: 100%; 8 | 9 | @include viewport(phone){ 10 | flex-wrap: wrap; 11 | } 12 | } 13 | 14 | &__group { 15 | width: 100%; 16 | } 17 | 18 | &__label { 19 | display: block; 20 | font-size: $default-size; 21 | font-weight: 700; 22 | color: $color-black; 23 | font-family: inherit; 24 | margin-bottom: 1rem; 25 | } 26 | 27 | &__input, 28 | &__textarea { 29 | display: block; 30 | width: 100%; 31 | padding: 1.5rem 2rem; 32 | border: 2px solid $color-gray-bg-2; 33 | border-radius: 8px; 34 | font-size: inherit; 35 | font-weight: 300; 36 | font-family: inherit; 37 | transition: all 0.4s; 38 | 39 | background-color: rgba($color-white, 0.5); 40 | 41 | &:focus { 42 | outline-color: $color-primary; 43 | } 44 | &:invalid { 45 | outline-color: red; 46 | } 47 | } 48 | 49 | &__textarea { 50 | height: 24rem; 51 | resize: vertical; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /sass/components/_button.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | font-weight: 300; 3 | padding: 1rem 2rem; 4 | border: none; 5 | border-radius: 8px; 6 | font-family: inherit; 7 | font-size: inherit; 8 | cursor: pointer; 9 | 10 | box-shadow: $shadow-1; 11 | 12 | display: inline-block; 13 | 14 | transition: all 0.4s; 15 | 16 | &:link, 17 | &:visited { 18 | font-weight: 300; 19 | padding: 1rem 2rem; 20 | border-radius: 8px; 21 | 22 | text-decoration: none; 23 | box-shadow: $shadow-1; 24 | 25 | display: inline-block; 26 | 27 | transition: all 0.4s; 28 | } 29 | 30 | @media (hover: hover) { 31 | &:hover { 32 | transform: translateY(-4px); 33 | box-shadow: $shadow-2; 34 | } 35 | } 36 | 37 | &:active { 38 | transform: translateY(1px); 39 | box-shadow: $shadow-3; 40 | } 41 | 42 | &--green { 43 | color: $color-white; 44 | background-color: $color-primary; 45 | border: 1px solid $color-primary; 46 | } 47 | 48 | &--white { 49 | color: $color-primary; 50 | background-color: $color-white; 51 | 52 | border: 1px solid currentColor; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | //1 rem == 10px 3 | font-size: 62.5%; 4 | } 5 | 6 | //PROJECT WIDE DECLARATION 7 | :root { 8 | --color-primary: #007a69; 9 | --color-primary-dark: #00584c; 10 | 11 | --color-gray-text: #757575; 12 | --color-gray-text-2: #9c9c9c; 13 | 14 | --color-gray-light: #ababab; 15 | 16 | --color-gray-bg: #f9f9fb; 17 | --color-gray-bg-2: #e5e5e5; 18 | 19 | --color-white: #fff; 20 | --color-black: #000; 21 | 22 | --shadow-1: 0 1rem 4rem rgba(0, 0, 0, 0.2); 23 | 24 | --shadow-2: 0 1rem 6rem rgba(0, 0, 0, 0.2); 25 | 26 | --shadow-3: 0 1rem 2rem rgba(0, 0, 0, 0.2); 27 | 28 | --default-size: 1.6rem; 29 | } 30 | 31 | body { 32 | font-family: "Poppins", sans-serif; 33 | box-sizing: border-box; 34 | font-size: $default-size; 35 | line-height: 1.6; 36 | 37 | @include viewport(big-desk) { 38 | margin: 0 auto; 39 | } 40 | } 41 | 42 | //BASIC RESET 43 | *, 44 | *::before, 45 | *::after { 46 | margin: 0; 47 | padding: 0; 48 | box-sizing: inherit; 49 | } 50 | 51 | //SELECTING TEXTS 52 | ::selection { 53 | color: $color-white; 54 | background-color: $color-primary-dark; 55 | } 56 | 57 | //COMPONENTS 58 | 59 | //LOGO 60 | .logo, 61 | .icon, 62 | .social-icon, 63 | .arr-down { 64 | display: inline-block; 65 | } 66 | 67 | .logo { 68 | width: 12.5rem; 69 | height: 5rem; 70 | cursor: pointer; 71 | 72 | @media only screen and (max-width: 50em) { 73 | margin-left: 2rem; 74 | } 75 | } 76 | 77 | //ICONS 78 | .icon { 79 | width: 6.4rem; 80 | height: 6.4rem; 81 | 82 | @media (hover: hover) { 83 | &:hover { 84 | //ANIMATION USAGE 85 | animation: rotate 2s ease; 86 | } 87 | } 88 | } 89 | 90 | .social-icon { 91 | width: 3.2rem; 92 | height: 3.2rem; 93 | } 94 | 95 | .arr-down { 96 | width: 3.6rem; 97 | height: 3.6rem; 98 | } 99 | -------------------------------------------------------------------------------- /sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | .heading-primary { 2 | color: $color-black; 3 | line-height: 1.4; 4 | font-size: 4rem; 5 | 6 | @include viewport(tab-port) { 7 | font-size: 3.2rem; 8 | } 9 | 10 | @include viewport(phone) { 11 | font-size: 2.8rem; 12 | } 13 | 14 | @media only screen and (max-width: 25em) { 15 | font-size: 2.6rem; 16 | } 17 | 18 | &--sub { 19 | font-weight: 300; 20 | display: block; 21 | } 22 | 23 | &--main { 24 | font-weight: 700; 25 | display: block; 26 | 27 | .emphasis { 28 | color: $color-primary; 29 | } 30 | } 31 | } 32 | 33 | .heading-sub { 34 | color: $color-gray-text; 35 | font-size: 2rem; 36 | padding-right: 12rem; 37 | 38 | @include viewport(tab-port) { 39 | font-size: $default-size; 40 | } 41 | 42 | @media only screen and (max-width: 50em) { 43 | padding: 0; 44 | } 45 | } 46 | 47 | .heading-tertiary { 48 | font-weight: 300; 49 | font-size: 2rem; 50 | text-transform: uppercase; 51 | color: $color-primary; 52 | 53 | display: inline-block; 54 | position: relative; 55 | 56 | &::after { 57 | content: ""; 58 | position: absolute; 59 | width: 100%; 60 | height: 2px; 61 | bottom: 1px; 62 | left: 0; 63 | background-color: currentColor; 64 | -webkit-transform: scaleX(0); 65 | transform: scaleX(0); 66 | -webkit-transition: transform 0.4s; 67 | transition: transform 0.4s; 68 | -webkit-transform-origin: 100% 0; 69 | transform-origin: 100%; 70 | } 71 | 72 | @media (hover: hover) { 73 | &:hover::after { 74 | transform: scaleX(1); 75 | transform-origin: 0; 76 | } 77 | } 78 | } 79 | 80 | .heading-secondary { 81 | font-weight: 700; 82 | color: $color-black; 83 | font-size: 2.4rem; 84 | } 85 | 86 | .paragraph { 87 | line-height: 2; 88 | color: $color-gray-text; 89 | } 90 | 91 | .copyright { 92 | font-weight: 300; 93 | } 94 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BuildCo - A Construction company with Elegance and Class 💯 2 | ### Who knows about BuildCo? 3 | 4 | BuildCo is a building and construction company dedicated to excellence, who utilize innovative building construction, maintenance, and renovation skills to change and improve the way Projects are designed, managed, and built. 5 | 6 | BuildCo offers services ranging from 7 | 8 | - New building Construction 9 | - Architectural Design 10 | - Roof Installation 11 | - Commercial and Electrical Installations 12 | - Landscaping & External Works and 13 | - Mechanical and Renewables 14 | 15 | **Want to Build with elegance today ?, Contact BuildCo 💯.** 16 | 17 | [Check out their Website](https://devdesiign.github.io/BuildCo/) 18 | 19 | --- 20 | 21 | **Just Kidding* 22 | 23 | Buildco is yet another imaginary concept created by [Derez - A UIUX Designer](https://twitter.com/iamDeRez1?t=iq9Lmucoy-2BoGiiFQb9Ig&s=08) 💪. 24 | 25 | I at the other end was surfing the internet, looking for projects to fuel my range 🔥🔥, then i came across the UI on [Twitter](https://twitter.com/d3vd3511gn)... 26 | 27 | I reached out to [Derez](https://twitter.com/iamDeRez1?t=iq9Lmucoy-2BoGiiFQb9Ig&s=08) and he gave me the link to the design. 28 | 29 | *Celebrate Grace* ✨🤍 30 | 31 | *Here we are !* [BuilCo - A Construction company with Elegance and Class 💯](https://devdesiign.github.io/BuildCo/) 32 | 33 | I'm open to suggestions and reviews. 34 | 35 | ***Reach out to me via [Twitter](https://twitter.com/d3vd3511gn) and [LinkedIn](https://www.linkedin.com/in/muiz-haruna-321841187/)*** 36 | 37 | Thanks ✨ 38 | 39 | 🤍 && 🔥 40 | 41 | [![Total Time spent](https://wakatime.com/badge/user/fb658d00-4e70-4cd7-8cda-72b8f1ef0325/project/fddcb164-d353-4446-bf84-22e8ede6bee9.svg)](https://wakatime.com/badge/user/fb658d00-4e70-4cd7-8cda-72b8f1ef0325/project/fddcb164-d353-4446-bf84-22e8ede6bee9) 42 | --- 43 | 44 | ## A Demo 👇 45 | 46 | https://user-images.githubusercontent.com/57061186/182739165-f889e7d8-06fa-48ee-a09c-ffcdb2012edb.mp4 47 | -------------------------------------------------------------------------------- /sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 4rem; 3 | 4 | @include viewport(phone) { 5 | padding: 2rem; 6 | } 7 | 8 | color: $color-white; 9 | background-color: $color-primary-dark; 10 | 11 | &__row-1 { 12 | display: flex; 13 | justify-content: space-around; 14 | 15 | @include viewport(tab-port) { 16 | justify-content: space-between; 17 | } 18 | 19 | @media only screen and (max-width: 50em) { 20 | justify-content: center; 21 | flex-wrap: wrap; 22 | gap: 2rem; 23 | } 24 | } 25 | 26 | &__box { 27 | @media only screen and (max-width: 50em) { 28 | flex-basis: 45%; 29 | } 30 | } 31 | 32 | &__row-2 { 33 | display: flex; 34 | justify-content: space-between; 35 | align-items: center; 36 | border-top: 1px solid currentColor; 37 | padding-top: 2rem; 38 | 39 | flex-wrap: wrap; 40 | 41 | @media only screen and (max-width: 27.5em) { 42 | justify-content: center; 43 | gap: 2rem; 44 | } 45 | } 46 | 47 | &__social-link { 48 | &:link, 49 | &:visited { 50 | text-decoration: none; 51 | color: currentColor; 52 | } 53 | } 54 | 55 | &__row-3 { 56 | display: flex; 57 | justify-content: center; 58 | align-items: center; 59 | 60 | flex-wrap: wrap; 61 | gap: 2rem; 62 | } 63 | 64 | &__title { 65 | font-size: $default-size; 66 | font-weight: 700; 67 | font-family: inherit; 68 | display: block; 69 | margin-bottom: 2rem; 70 | } 71 | 72 | &__list { 73 | list-style: none; 74 | } 75 | 76 | &__item { 77 | display: block; 78 | margin: 1rem 0; 79 | } 80 | 81 | &__link { 82 | &:link, 83 | &:visited { 84 | font-weight: 300; 85 | color: $color-white; 86 | text-decoration: none; 87 | font-size: 1.4rem; 88 | } 89 | 90 | @media (hover: hover) { 91 | &:hover { 92 | text-decoration: underline; 93 | } 94 | } 95 | } 96 | 97 | &__dropdown { 98 | font-family: inherit; 99 | font-weight: 300; 100 | font-size: 1.4rem; 101 | color: $color-white; 102 | width: 24rem; 103 | padding: 1rem 0; 104 | border-radius: 8px; 105 | border: 2px solid currentColor; 106 | background-color: transparent; 107 | outline-color: currentColor; 108 | cursor: pointer; 109 | 110 | @media only screen and (max-width: 50em) { 111 | width: 100%; 112 | } 113 | } 114 | 115 | &__dropdown-item { 116 | font-family: inherit; 117 | font-weight: 300; 118 | font-size: 1.4rem; 119 | color: $color-white; 120 | background-color: $color-primary; 121 | margin: 1rem 0; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | background-image: url("../img/svg/header-bg-img.svg"); 3 | background-position: center top; 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | background-color: $color-white; 7 | overflow: hidden; 8 | 9 | &__menu-bar { 10 | display: flex; 11 | align-items: center; 12 | justify-content: space-around; 13 | padding: 1rem 0; 14 | 15 | @media only screen and (max-width: 50em) { 16 | display: block; 17 | } 18 | } 19 | 20 | &__nav-list { 21 | @media only screen and (max-width: 50em) { 22 | display: none; 23 | } 24 | 25 | list-style: none; 26 | 27 | display: flex; 28 | align-items: center; 29 | justify-content: space-between; 30 | } 31 | 32 | &__nav-link { 33 | text-decoration: none; 34 | font-weight: 300; 35 | 36 | color: $color-gray-text; 37 | padding: 2rem; 38 | 39 | @include viewport(tab-desk) { 40 | padding: 1rem; 41 | } 42 | 43 | @media (hover: hover) { 44 | &:hover { 45 | color: $color-primary; 46 | font-weight: 400; 47 | } 48 | } 49 | 50 | &--active { 51 | color: $color-primary; 52 | font-weight: 700; 53 | } 54 | } 55 | 56 | &__btn-box { 57 | display: flex; 58 | align-items: center; 59 | justify-content: space-between; 60 | gap: 2rem; 61 | 62 | @include viewport(tab-desk) { 63 | gap: 1rem; 64 | } 65 | 66 | @include viewport(tab-port) { 67 | display: none; 68 | } 69 | } 70 | 71 | &__content { 72 | // ANIMATION USAGE 73 | animation: fadeInUp 2s ease; 74 | 75 | display: flex; 76 | align-items: center; 77 | justify-content: space-between; 78 | 79 | padding-bottom: 4rem; 80 | gap: 16rem; 81 | 82 | @include viewport(tab-desk) { 83 | padding-top: 4rem; 84 | gap: 6rem; 85 | } 86 | 87 | @include viewport(tab-port) { 88 | gap: 4rem; 89 | } 90 | 91 | @media only screen and (max-width: 50em) { 92 | padding: 4rem; 93 | } 94 | 95 | @include viewport(phone) { 96 | padding: 4rem 2rem; 97 | } 98 | } 99 | 100 | &__hero-img-box { 101 | flex: 0 0 35%; 102 | overflow: hidden; 103 | 104 | @media only screen and (max-width: 50em) { 105 | display: none; 106 | } 107 | } 108 | 109 | &__hero-img { 110 | width: 100%; 111 | height: 100%; 112 | display: block; 113 | -o-object-fit: cover; 114 | object-fit: cover; 115 | } 116 | 117 | &__form-input { 118 | border: none; 119 | border-radius: 8px; 120 | box-shadow: $shadow-1; 121 | font-family: inherit; 122 | font-size: inherit; 123 | 124 | width: 32rem; 125 | padding: 1rem 2rem; 126 | margin-right: 2rem; 127 | outline: 2px solid $color-primary; 128 | transition: all 0.4s; 129 | 130 | @include viewport(tab-port) { 131 | width: 28rem; 132 | } 133 | 134 | &::-webkit-input-placeholder { 135 | color: $color-gray-text-2; 136 | } 137 | 138 | &::-moz-placeholder { 139 | color: $color-gray-text-2; 140 | } 141 | 142 | &:-ms-input-placeholder { 143 | color: $color-gray-text-2; 144 | } 145 | 146 | &::-ms-input-placeholder { 147 | color: $color-gray-text-2; 148 | } 149 | 150 | &::placeholder { 151 | color: $color-gray-text-2; 152 | } 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /sass/pages/_home.scss: -------------------------------------------------------------------------------- 1 | .who-we-are { 2 | padding: 8rem; 3 | @include viewport(tab-port) { 4 | padding: 4rem; 5 | } 6 | @include viewport(phone) { 7 | padding: 4rem 2rem; 8 | } 9 | 10 | background-color: $color-gray-bg; 11 | 12 | &__content { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: stretch; 16 | 17 | gap: 20rem; 18 | 19 | @include viewport(tab-desk) { 20 | gap: 12rem; 21 | } 22 | 23 | @include viewport(tab-port) { 24 | gap: 4rem; 25 | flex-wrap: wrap; 26 | } 27 | } 28 | 29 | .emphasis { 30 | font-size: 2rem; 31 | color: $color-primary; 32 | display: block; 33 | font-weight: 700; 34 | } 35 | 36 | &__left { 37 | flex: 0 0 45%; 38 | 39 | @include viewport(tab-port) { 40 | flex-basis: 100%; 41 | } 42 | } 43 | 44 | &__right { 45 | display: flex; 46 | justify-content: space-between; 47 | align-items: flex-start; 48 | 49 | gap: 2rem; 50 | flex-wrap: wrap; 51 | 52 | @include viewport(tab-port) { 53 | flex-basis: 100%; 54 | } 55 | } 56 | 57 | &__paragraph { 58 | flex: 0 0 45%; 59 | } 60 | } 61 | 62 | .what-we-offer { 63 | padding: 12rem 8rem; 64 | 65 | @include viewport(tab-desk) { 66 | padding: 8rem 4rem; 67 | } 68 | @include viewport(phone) { 69 | padding: 4rem 2rem; 70 | } 71 | 72 | background-image: linear-gradient( 73 | rgba($color-white, 0.9), 74 | rgba($color-white, 0.9) 75 | ), 76 | url("../img/services-bg-img.png"); 77 | background-position: center center; 78 | background-size: cover; 79 | 80 | &__content-box { 81 | display: flex; 82 | justify-content: center; 83 | flex-wrap: wrap; 84 | gap: 4rem; 85 | } 86 | 87 | &__content { 88 | padding: 4rem; 89 | flex: 0 0 30%; 90 | background-color: $color-gray-bg; 91 | border-radius: 8px; 92 | box-shadow: $shadow-1; 93 | transition: all 0.4s; 94 | 95 | @include viewport(tab-desk) { 96 | flex: 0 0 45%; 97 | } 98 | 99 | @media only screen and (max-width: 50em) { 100 | flex: 0 0 100%; 101 | } 102 | 103 | @media (hover: hover) { 104 | &:hover { 105 | box-shadow: $shadow-2; 106 | transform: scale(1.05) translateY(4px); 107 | } 108 | } 109 | } 110 | 111 | &__title { 112 | display: flex; 113 | align-items: center; 114 | gap: 2rem; 115 | font-size: 2rem; 116 | 117 | font-weight: 700; 118 | } 119 | 120 | .paragraph { 121 | @include viewport(phone) { 122 | hyphens: auto; 123 | } 124 | } 125 | } 126 | 127 | .mission { 128 | padding: 8rem; 129 | 130 | @media only screen and (max-width: 68.75em) { 131 | padding: 4rem; 132 | } 133 | 134 | @include viewport(phone) { 135 | padding: 4rem 2rem; 136 | } 137 | 138 | background-image: linear-gradient( 139 | to right, 140 | $color-white 0%, 141 | $color-white 50%, 142 | $color-gray-bg 50% 143 | ); 144 | 145 | &__container { 146 | display: flex; 147 | align-items: center; 148 | justify-content: center; 149 | gap: 4rem; 150 | 151 | @media only screen and (max-width: 68.75em) { 152 | flex-wrap: wrap-reverse; 153 | } 154 | } 155 | 156 | &__left { 157 | flex: 0 0 70%; 158 | display: flex; 159 | justify-content: center; 160 | gap: 4rem; 161 | 162 | @media only screen and (max-width: 68.75em) { 163 | gap: 4rem; 164 | flex: 0 0 100%; 165 | flex-wrap: wrap; 166 | } 167 | 168 | @media only screen and (max-width: 50em) { 169 | gap: 4rem; 170 | } 171 | } 172 | 173 | &__img-box { 174 | @media only screen and (max-width: 68.75em) { 175 | height: 40rem; 176 | overflow: hidden; 177 | } 178 | 179 | @include viewport(tab-port) { 180 | height: 28rem; 181 | } 182 | } 183 | 184 | &__img { 185 | display: block; 186 | width: 100%; 187 | object-fit: cover; 188 | object-position: top center; 189 | } 190 | 191 | &__content { 192 | padding: 4rem; 193 | 194 | background-color: $color-gray-bg; 195 | border-radius: 8px; 196 | box-shadow: $shadow-1; 197 | transition: all 0.4s; 198 | 199 | @media only screen and (max-width: 68.75em) { 200 | flex-basis: 80%; 201 | } 202 | 203 | @media only screen and (max-width: 50em) { 204 | flex-basis: 100%; 205 | } 206 | 207 | @media (hover: hover) { 208 | &:hover { 209 | box-shadow: $shadow-2; 210 | transform: scale(1.05) translateY(4px); 211 | } 212 | } 213 | } 214 | 215 | &__title { 216 | font-size: 2rem; 217 | 218 | font-weight: 700; 219 | } 220 | 221 | .paragraph { 222 | @include viewport(phone) { 223 | hyphens: auto; 224 | } 225 | } 226 | } 227 | 228 | .why-us { 229 | padding: 8rem; 230 | 231 | @include viewport(tab-port) { 232 | flex-wrap: wrap; 233 | } 234 | 235 | @include viewport(phone) { 236 | padding: 8rem 2rem; 237 | } 238 | 239 | background-color: $color-white; 240 | 241 | display: flex; 242 | justify-content: center; 243 | align-items: center; 244 | gap: 8rem; 245 | 246 | @media only screen and (max-width: 68.75em) { 247 | gap: 4rem; 248 | } 249 | 250 | &__left { 251 | flex: 0 0 40%; 252 | 253 | @media only screen and (max-width: 68.75em) { 254 | flex: 0 0 50%; 255 | } 256 | 257 | @include viewport(tab-port) { 258 | flex: 0 0 70%; 259 | } 260 | } 261 | 262 | &__img { 263 | display: block; 264 | width: 100%; 265 | } 266 | } 267 | 268 | .contact-us { 269 | padding: 12rem 8rem; 270 | 271 | @include viewport(tab-desk) { 272 | padding: 8rem 4rem; 273 | } 274 | @include viewport(phone) { 275 | padding: 4rem 2rem; 276 | } 277 | 278 | background-color: $color-gray-bg; 279 | 280 | &__title { 281 | display: flex; 282 | align-items: center; 283 | gap: 1rem; 284 | 285 | font-size: 2rem; 286 | font-weight: 700; 287 | } 288 | 289 | &__img-box { 290 | width: 100%; 291 | 292 | @include viewport(tab-desk) { 293 | width: 60%; 294 | } 295 | 296 | @include viewport(tab-port) { 297 | width: 80%; 298 | } 299 | 300 | @include viewport(phone) { 301 | width: 100%; 302 | } 303 | } 304 | 305 | &__img { 306 | width: 100%; 307 | display: block; 308 | } 309 | 310 | &__right { 311 | padding: 4rem; 312 | background-color: $color-gray-bg; 313 | box-shadow: $shadow-1; 314 | border-radius: 8px; 315 | flex: 0 0 55%; 316 | 317 | @include viewport(tab-desk) { 318 | flex: 0 0 100%; 319 | } 320 | } 321 | 322 | &__container { 323 | display: flex; 324 | align-items: center; 325 | justify-content: center; 326 | gap: 8rem; 327 | 328 | @include viewport(tab-desk) { 329 | flex-wrap: wrap; 330 | gap: 4rem; 331 | } 332 | } 333 | } 334 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | -------------------------------------------------------------------------------- /css/style.min.css: -------------------------------------------------------------------------------- 1 | @import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap";@-webkit-keyframes fadeInUp{0%{opacity:0;transform:translateY(100vh)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(100vh)}100%{opacity:1;transform:translateY(0)}}@-webkit-keyframes rotate{0%{transform:rotate(0)}20%{transform:rotate(-90deg)}100%{transform:rotate(1turn)}}@keyframes rotate{0%{transform:rotate(0)}20%{transform:rotate(-90deg)}100%{transform:rotate(1turn)}}html{font-size:62.5%}:root{--color-primary: #007a69;--color-primary-dark: #00584c;--color-gray-text: #757575;--color-gray-text-2: #9c9c9c;--color-gray-light: #ababab;--color-gray-bg: #f9f9fb;--color-gray-bg-2: #e5e5e5;--color-white: #fff;--color-black: #000;--shadow-1: 0 1rem 4rem rgba(0, 0, 0, 0.2);--shadow-2: 0 1rem 6rem rgba(0, 0, 0, 0.2);--shadow-3: 0 1rem 2rem rgba(0, 0, 0, 0.2);--default-size: 1.6rem}body{font-family:"Poppins",sans-serif;box-sizing:border-box;font-size:1.6rem;line-height:1.6}@media only screen and (min-width: 112.5em){body{margin:0 auto}}*,*::before,*::after{margin:0;padding:0;box-sizing:inherit}::-moz-selection{color:#fff;background-color:#00584c}::selection{color:#fff;background-color:#00584c}.logo,.icon,.social-icon,.arr-down{display:inline-block}.logo{width:12.5rem;height:5rem;cursor:pointer}@media only screen and (max-width: 50em){.logo{margin-left:2rem}}.icon{width:6.4rem;height:6.4rem}@media(hover: hover){.icon:hover{-webkit-animation:rotate 2s ease;animation:rotate 2s ease}}.social-icon{width:3.2rem;height:3.2rem}.arr-down{width:3.6rem;height:3.6rem}.heading-primary{color:#000;line-height:1.4;font-size:4rem}@media only screen and (max-width: 56.25em){.heading-primary{font-size:3.2rem}}@media only screen and (max-width: 37.5em){.heading-primary{font-size:2.8rem}}@media only screen and (max-width: 25em){.heading-primary{font-size:2.6rem}}.heading-primary--sub{font-weight:300;display:block}.heading-primary--main{font-weight:700;display:block}.heading-primary--main .emphasis{color:#007a69}.heading-sub{color:#656565;font-size:2rem;padding-right:12rem}@media only screen and (max-width: 56.25em){.heading-sub{font-size:1.6rem}}@media only screen and (max-width: 50em){.heading-sub{padding:0}}.heading-tertiary{font-weight:300;font-size:2rem;text-transform:uppercase;color:#007a69;display:inline-block;position:relative}.heading-tertiary::after{content:"";position:absolute;width:100%;height:2px;bottom:1px;left:0;background-color:currentColor;transform:scaleX(0);transition:transform .4s;transform-origin:100%}@media(hover: hover){.heading-tertiary:hover::after{transform:scaleX(1);transform-origin:0}}.heading-secondary{font-weight:700;color:#000;font-size:2.4rem}.paragraph{line-height:2;color:#656565}.copyright{font-weight:300}.u-center-text{text-align:center !important}.u-margin-top-big{margin-top:8rem !important}.u-margin-top-mid{margin-top:4rem !important}.u-margin-top-small{margin-top:2rem !important}.u-margin-bottom-big{margin-bottom:8rem !important}.u-margin-bottom-mid{margin-bottom:4rem !important}.u-margin-bottom-small{margin-bottom:2rem !important}.btn{font-weight:300;padding:1rem 2rem;border:none;border-radius:8px;font-family:inherit;font-size:inherit;cursor:pointer;box-shadow:0 1rem 4rem rgba(0, 0, 0, 0.2);display:inline-block;transition:all .4s}.btn:link,.btn:visited{font-weight:300;padding:1rem 2rem;border-radius:8px;text-decoration:none;box-shadow:0 1rem 4rem rgba(0, 0, 0, 0.2);display:inline-block;transition:all .4s}@media(hover: hover){.btn:hover{transform:translateY(-4px);box-shadow:0 1rem 6rem rgba(0, 0, 0, 0.2)}}.btn:active{transform:translateY(1px);box-shadow:0 1rem 2rem rgba(0, 0, 0, 0.2)}.btn--green{color:#fff;background-color:#007a69;border:1px solid #007a69}.btn--white{color:#007a69;background-color:#fff;border:1px solid currentColor}.form__col{display:flex;gap:2rem;align-items:center;width:100%}@media only screen and (max-width: 37.5em){.form__col{flex-wrap:wrap}}.form__group{width:100%}.form__label{display:block;font-size:1.6rem;font-weight:700;color:#000;font-family:inherit;margin-bottom:1rem}.form__input,.form__textarea{display:block;width:100%;padding:1.5rem 2rem;border:2px solid #e5e5e5;border-radius:8px;font-size:inherit;font-weight:300;font-family:inherit;transition:all .4s;background-color:rgba(255, 255, 255, 0.5)}.form__input:focus,.form__textarea:focus{outline-color:#007a69}.form__input:invalid,.form__textarea:invalid{outline-color:red}.form__textarea{height:24rem;resize:vertical}.header{background-image:url("../img/svg/header-bg-img.svg");background-position:center top;background-repeat:no-repeat;background-size:cover;background-color:#fff;overflow:hidden}.header__menu-bar{display:flex;align-items:center;justify-content:space-around;padding:1rem 0}@media only screen and (max-width: 50em){.header__menu-bar{display:block}}.header__nav-list{list-style:none;display:flex;align-items:center;justify-content:space-between}@media only screen and (max-width: 50em){.header__nav-list{display:none}}.header__nav-link{text-decoration:none;font-weight:300;color:#656565;padding:2rem}@media only screen and (max-width: 75em){.header__nav-link{padding:1rem}}@media(hover: hover){.header__nav-link:hover{color:#007a69;font-weight:400}}.header__nav-link--active{color:#007a69;font-weight:700}.header__btn-box{display:flex;align-items:center;justify-content:space-between;gap:2rem}@media only screen and (max-width: 75em){.header__btn-box{gap:1rem}}@media only screen and (max-width: 56.25em){.header__btn-box{display:none}}.header__content{-webkit-animation:fadeInUp 2s ease;animation:fadeInUp 2s ease;display:flex;align-items:center;justify-content:space-between;padding-bottom:4rem;gap:16rem}@media only screen and (max-width: 75em){.header__content{padding-top:4rem;gap:6rem}}@media only screen and (max-width: 56.25em){.header__content{gap:4rem}}@media only screen and (max-width: 50em){.header__content{padding:4rem}}@media only screen and (max-width: 37.5em){.header__content{padding:4rem 2rem}}.header__hero-img-box{flex:0 0 35%;overflow:hidden}@media only screen and (max-width: 50em){.header__hero-img-box{display:none}}.header__hero-img{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}.header__form-input{border:none;border-radius:8px;box-shadow:0 1rem 4rem rgba(0, 0, 0, 0.2);font-family:inherit;font-size:inherit;width:32rem;padding:1rem 2rem;margin-right:2rem;outline:2px solid #007a69;transition:all .4s}@media only screen and (max-width: 56.25em){.header__form-input{width:28rem}}.header__form-input::-moz-placeholder{color:#9c9c9c}.header__form-input::placeholder{color:#9c9c9c}.footer{padding:4rem;color:#fff;background-color:#00584c}@media only screen and (max-width: 37.5em){.footer{padding:2rem}}.footer__row-1{display:flex;justify-content:space-around}@media only screen and (max-width: 56.25em){.footer__row-1{justify-content:space-between}}@media only screen and (max-width: 50em){.footer__row-1{justify-content:center;flex-wrap:wrap;gap:2rem}}@media only screen and (max-width: 50em){.footer__box{flex-basis:45%}}.footer__row-2{display:flex;justify-content:space-between;align-items:center;border-top:1px solid currentColor;padding-top:2rem;flex-wrap:wrap}@media only screen and (max-width: 27.5em){.footer__row-2{justify-content:center;gap:2rem}}.footer__social-link:link,.footer__social-link:visited{text-decoration:none;color:currentColor}.footer__row-3{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem}.footer__title{font-size:1.6rem;font-weight:700;font-family:inherit;display:block;margin-bottom:2rem}.footer__list{list-style:none}.footer__item{display:block;margin:1rem 0}.footer__link:link,.footer__link:visited{font-weight:300;color:#fff;text-decoration:none;font-size:1.4rem}@media(hover: hover){.footer__link:hover{text-decoration:underline}}.footer__dropdown{font-family:inherit;font-weight:300;font-size:1.4rem;color:#fff;width:24rem;padding:1rem 0;border-radius:8px;border:2px solid currentColor;background-color:transparent;outline-color:currentColor;cursor:pointer}@media only screen and (max-width: 50em){.footer__dropdown{width:100%}}.footer__dropdown-item{font-family:inherit;font-weight:300;font-size:1.4rem;color:#fff;background-color:#007a69;margin:1rem 0}.who-we-are{padding:8rem;background-color:#f9f9fb}@media only screen and (max-width: 56.25em){.who-we-are{padding:4rem}}@media only screen and (max-width: 37.5em){.who-we-are{padding:4rem 2rem}}.who-we-are__content{display:flex;justify-content:space-between;align-items:stretch;gap:20rem}@media only screen and (max-width: 75em){.who-we-are__content{gap:12rem}}@media only screen and (max-width: 56.25em){.who-we-are__content{gap:4rem;flex-wrap:wrap}}.who-we-are .emphasis{font-size:2rem;color:#007a69;display:block;font-weight:700}.who-we-are__left{flex:0 0 45%}@media only screen and (max-width: 56.25em){.who-we-are__left{flex-basis:100%}}.who-we-are__right{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}@media only screen and (max-width: 56.25em){.who-we-are__right{flex-basis:100%}}.who-we-are__paragraph{flex:0 0 45%}.what-we-offer{padding:12rem 8rem;background-image:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),url("../img/services-bg-img.png");background-position:center center;background-size:cover}@media only screen and (max-width: 75em){.what-we-offer{padding:8rem 4rem}}@media only screen and (max-width: 37.5em){.what-we-offer{padding:4rem 2rem}}.what-we-offer__content-box{display:flex;justify-content:center;flex-wrap:wrap;gap:4rem}.what-we-offer__content{padding:4rem;flex:0 0 30%;background-color:#f9f9fb;border-radius:8px;box-shadow:0 1rem 4rem rgba(0, 0, 0, 0.2);transition:all .4s}@media only screen and (max-width: 75em){.what-we-offer__content{flex:0 0 45%}}@media only screen and (max-width: 50em){.what-we-offer__content{flex:0 0 100%}}@media(hover: hover){.what-we-offer__content:hover{box-shadow:0 1rem 6rem rgba(0, 0, 0, 0.2);transform:scale(1.05) translateY(4px)}}.what-we-offer__title{display:flex;align-items:center;gap:2rem;font-size:2rem;font-weight:700}@media only screen and (max-width: 37.5em){.what-we-offer .paragraph{-webkit-hyphens:auto;hyphens:auto}}.mission{padding:8rem;background-image:linear-gradient(to right, #fff 0%, #fff 50%, #f9f9fb 50%)}@media only screen and (max-width: 68.75em){.mission{padding:4rem}}@media only screen and (max-width: 37.5em){.mission{padding:4rem 2rem}}.mission__container{display:flex;align-items:center;justify-content:center;gap:4rem}@media only screen and (max-width: 68.75em){.mission__container{flex-wrap:wrap-reverse}}.mission__left{flex:0 0 70%;display:flex;justify-content:center;gap:4rem}@media only screen and (max-width: 68.75em){.mission__left{gap:4rem;flex:0 0 100%;flex-wrap:wrap}}@media only screen and (max-width: 50em){.mission__left{gap:4rem}}@media only screen and (max-width: 68.75em){.mission__img-box{height:40rem;overflow:hidden}}@media only screen and (max-width: 56.25em){.mission__img-box{height:28rem}}.mission__img{display:block;width:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top center;object-position:top center}.mission__content{padding:4rem;background-color:#f9f9fb;border-radius:8px;box-shadow:0 1rem 4rem rgba(0, 0, 0, 0.2);transition:all .4s}@media only screen and (max-width: 68.75em){.mission__content{flex-basis:80%}}@media only screen and (max-width: 50em){.mission__content{flex-basis:100%}}@media(hover: hover){.mission__content:hover{box-shadow:0 1rem 6rem rgba(0, 0, 0, 0.2);transform:scale(1.05) translateY(4px)}}.mission__title{font-size:2rem;font-weight:700}@media only screen and (max-width: 37.5em){.mission .paragraph{-webkit-hyphens:auto;hyphens:auto}}.why-us{padding:8rem;background-color:#fff;display:flex;justify-content:center;align-items:center;gap:8rem}@media only screen and (max-width: 56.25em){.why-us{flex-wrap:wrap}}@media only screen and (max-width: 37.5em){.why-us{padding:8rem 2rem}}@media only screen and (max-width: 68.75em){.why-us{gap:4rem}}.why-us__left{flex:0 0 40%}@media only screen and (max-width: 68.75em){.why-us__left{flex:0 0 50%}}@media only screen and (max-width: 56.25em){.why-us__left{flex:0 0 70%}}.why-us__img{display:block;width:100%}.contact-us{padding:12rem 8rem;background-color:#f9f9fb}@media only screen and (max-width: 75em){.contact-us{padding:8rem 4rem}}@media only screen and (max-width: 37.5em){.contact-us{padding:4rem 2rem}}.contact-us__title{display:flex;align-items:center;gap:1rem;font-size:2rem;font-weight:700}.contact-us__img-box{width:100%}@media only screen and (max-width: 75em){.contact-us__img-box{width:60%}}@media only screen and (max-width: 56.25em){.contact-us__img-box{width:80%}}@media only screen and (max-width: 37.5em){.contact-us__img-box{width:100%}}.contact-us__img{width:100%;display:block}.contact-us__right{padding:4rem;background-color:#f9f9fb;box-shadow:0 1rem 4rem rgba(0, 0, 0, 0.2);border-radius:8px;flex:0 0 55%}@media only screen and (max-width: 75em){.contact-us__right{flex:0 0 100%}}.contact-us__container{display:flex;align-items:center;justify-content:center;gap:8rem}@media only screen and (max-width: 75em){.contact-us__container{flex-wrap:wrap;gap:4rem}}/*# sourceMappingURL=style.min.css.map */ 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BuildCo — We construct with Elegance and Class 💯 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 | 23 |
24 | 25 | 49 | 50 |
51 | Login 52 | Sign Up 53 |
54 |
55 |
56 |
57 | BuildCo Hero Image 63 |
64 | 65 |
66 |

67 | If you can Imagine it, 68 | 69 | We can build it. 70 | 71 |

72 |

73 | We are a people-orientated, progressive business, driven by our 74 | values to deliver lasting change for our stakeholders and the 75 | communities we work in. 76 |

77 | 78 |
79 |
80 | 89 | 90 |
91 |
92 |
93 |
94 |
95 | 96 |
97 |
98 |

Builco

99 |
100 |
101 |

Who we are

102 |

103 | We are a well established construction company with over 20 years 104 | experience. Specialising in the public and private sector, We 105 | strive to form close working relationships with clients and 106 | industry professionals to provide a full service that reflects 107 | attention to detail and quality, put simply we build solutions 108 | together. 109 |

110 |
111 | 112 |
113 |

114 | 20 115 | Years of Experience 116 |

117 | 118 |

119 | 40+ 120 | Clients all over the world 121 |

122 | 123 |

124 | 20.2 p 125 | Interim dividend per share up 83.3% 126 |

127 | 128 |

129 | GHc1m 130 | Construction Backlog Revenue 131 |

132 |
133 |
134 |
135 | 136 |
137 |
138 |

Our services

139 |
140 | 141 |

142 | What we do offer 143 |

144 |

145 | As a leader in our industry, we have always worked to develop advanced 146 | technology and innovative methods. 147 |

148 | 149 |
150 |
151 |

152 | 153 | 154 | 155 | 156 | 157 | New Building Construction 158 |

159 |

160 | Whatever your construction requirements we can help you - from new 161 | builds to refurbishments. 162 |

163 |
164 |
165 |

166 | 167 | 168 | 169 | 170 | 171 | Architectural Designs 172 |

173 |

174 | Building Design, Interior Design, Structural Design, 3D 175 | Visualization. 176 |

177 |
178 |
179 |

180 | 181 | 182 | 183 | 184 | 185 | Commercial and Electrical Installations 186 |

187 |

188 | We install and cable associated devices such as switches, 189 | distribution boards, sockets, and light fittings in a structure. 190 |

191 |
192 |
193 |

194 | 195 | 196 | 197 | 198 | 199 | Landscaping & External Works 200 |

201 |

202 | Hard landscaping projects create an interesting outside area to 203 | your property and will add to its value. 204 |

205 |
206 |
207 |

208 | 209 | 210 | 211 | 212 | 213 | Mechanical and Renewables 214 |

215 |

216 | We design, install, commission, maintain and service a vast range 217 | of mechanical equipment in Private Housing, Social Housing and 218 | Commercial properties. 219 |

220 |
221 |
222 |

223 | 224 | 225 | 226 | 227 | 228 | Roofing Installation 229 |

230 |

231 | We provide effective, service-oriented roofing and consistently 232 | providing our clients with materials of the highest quality. 233 |

234 |
235 |
236 |
237 | 238 |
239 |

Our Mission

240 |
241 |
242 |
243 |

Vision

244 |

245 | Our Vision is to be one of the prestigious Building Construction 246 | organizations providing lasting edifice for our clients all over 247 | Africa, with world-class technology at a competitive cost. 248 |

249 |
250 | 251 |
252 |

Mission

253 |

254 | Our mission as an organization is to bridge the gap between 255 | Africa and the western world in terms of quality product, 256 | service delivery. 257 |

258 |
259 |
260 | 261 |
262 |
263 | Mission Image 269 |
270 |
271 |
272 |
273 | 274 |
275 |
276 | Why us 282 |
283 | 284 |
285 |

Why us

286 |

287 | Carbon capabilities and journey to net zero 288 |

289 |

290 | As a progressive business, committed to doing the right thing, 291 | Galliford Try recognises the urgency of the climate change agenda 292 | and champions the role we have to play in decarbonising the economy 293 | for a greener, more sustainable future. As well as driving down our 294 | own carbon footprint, we work with clients to deliver low and net 295 | zero projects and work with suppliers and design consultants to help 296 | everyone in the industry reach their net zero carbon targets. 297 |

298 |
299 |
300 | 301 |
302 |

Contact Us

303 |
304 |
305 |

Let's Talk

306 |

307 | We've found that we deliver the greatest value to our clients when 308 | we establish ongoing relationships that allow us to materially 309 | contribute to their long-term success. 310 |

311 | 312 |
313 |

314 | 315 | 316 | 317 | 318 | 319 | Visit us personally 320 |

321 |

322 | Beside Atta Quarshie Merton Memorial Hospital Ave 2nd Floor, 323 | Kaneshie, Accra. 324 |

325 | 326 |
327 | Our Location 333 |
334 |
335 |
336 | 337 |
338 |
339 |
340 |
341 | 342 | 351 |
352 | 353 |
354 | 355 | 364 |
365 |
366 | 367 |
368 |
369 | 370 | 377 |
378 |
379 | 380 | 381 |
382 |
383 |
384 |
385 |
386 | 387 | 486 | 487 | 488 | 501 | 502 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap"); 2 | @keyframes fadeInUp { 3 | 0% { 4 | opacity: 0; 5 | transform: translateY(100vh); 6 | } 7 | 100% { 8 | opacity: 1; 9 | transform: translateY(0); 10 | } 11 | } 12 | @keyframes rotate { 13 | 0% { 14 | transform: rotate(0); 15 | } 16 | 20% { 17 | transform: rotate(-90deg); 18 | } 19 | 100% { 20 | transform: rotate(1turn); 21 | } 22 | } 23 | html { 24 | font-size: 62.5%; 25 | } 26 | 27 | :root { 28 | --color-primary: #007a69; 29 | --color-primary-dark: #00584c; 30 | --color-gray-text: #757575; 31 | --color-gray-text-2: #9c9c9c; 32 | --color-gray-light: #ababab; 33 | --color-gray-bg: #f9f9fb; 34 | --color-gray-bg-2: #e5e5e5; 35 | --color-white: #fff; 36 | --color-black: #000; 37 | --shadow-1: 0 1rem 4rem rgba(0, 0, 0, 0.2); 38 | --shadow-2: 0 1rem 6rem rgba(0, 0, 0, 0.2); 39 | --shadow-3: 0 1rem 2rem rgba(0, 0, 0, 0.2); 40 | --default-size: 1.6rem; 41 | } 42 | 43 | body { 44 | font-family: "Poppins", sans-serif; 45 | box-sizing: border-box; 46 | font-size: 1.6rem; 47 | line-height: 1.6; 48 | } 49 | @media only screen and (min-width: 112.5em) { 50 | body { 51 | margin: 0 auto; 52 | } 53 | } 54 | 55 | *, 56 | *::before, 57 | *::after { 58 | margin: 0; 59 | padding: 0; 60 | box-sizing: inherit; 61 | } 62 | 63 | ::selection { 64 | color: #fff; 65 | background-color: #00584c; 66 | } 67 | 68 | .logo, 69 | .icon, 70 | .social-icon, 71 | .arr-down { 72 | display: inline-block; 73 | } 74 | 75 | .logo { 76 | width: 12.5rem; 77 | height: 5rem; 78 | cursor: pointer; 79 | } 80 | @media only screen and (max-width: 50em) { 81 | .logo { 82 | margin-left: 2rem; 83 | } 84 | } 85 | 86 | .icon { 87 | width: 6.4rem; 88 | height: 6.4rem; 89 | } 90 | @media (hover: hover) { 91 | .icon:hover { 92 | animation: rotate 2s ease; 93 | } 94 | } 95 | 96 | .social-icon { 97 | width: 3.2rem; 98 | height: 3.2rem; 99 | } 100 | 101 | .arr-down { 102 | width: 3.6rem; 103 | height: 3.6rem; 104 | } 105 | 106 | .heading-primary { 107 | color: #000; 108 | line-height: 1.4; 109 | font-size: 4rem; 110 | } 111 | @media only screen and (max-width: 56.25em) { 112 | .heading-primary { 113 | font-size: 3.2rem; 114 | } 115 | } 116 | @media only screen and (max-width: 37.5em) { 117 | .heading-primary { 118 | font-size: 2.8rem; 119 | } 120 | } 121 | @media only screen and (max-width: 25em) { 122 | .heading-primary { 123 | font-size: 2.6rem; 124 | } 125 | } 126 | .heading-primary--sub { 127 | font-weight: 300; 128 | display: block; 129 | } 130 | .heading-primary--main { 131 | font-weight: 700; 132 | display: block; 133 | } 134 | .heading-primary--main .emphasis { 135 | color: #007a69; 136 | } 137 | 138 | .heading-sub { 139 | color: #656565; 140 | font-size: 2rem; 141 | padding-right: 12rem; 142 | } 143 | @media only screen and (max-width: 56.25em) { 144 | .heading-sub { 145 | font-size: 1.6rem; 146 | } 147 | } 148 | @media only screen and (max-width: 50em) { 149 | .heading-sub { 150 | padding: 0; 151 | } 152 | } 153 | 154 | .heading-tertiary { 155 | font-weight: 300; 156 | font-size: 2rem; 157 | text-transform: uppercase; 158 | color: #007a69; 159 | display: inline-block; 160 | position: relative; 161 | } 162 | .heading-tertiary::after { 163 | content: ""; 164 | position: absolute; 165 | width: 100%; 166 | height: 2px; 167 | bottom: 1px; 168 | left: 0; 169 | background-color: currentColor; 170 | -webkit-transform: scaleX(0); 171 | transform: scaleX(0); 172 | -webkit-transition: transform 0.4s; 173 | transition: transform 0.4s; 174 | -webkit-transform-origin: 100% 0; 175 | transform-origin: 100%; 176 | } 177 | @media (hover: hover) { 178 | .heading-tertiary:hover::after { 179 | transform: scaleX(1); 180 | transform-origin: 0; 181 | } 182 | } 183 | 184 | .heading-secondary { 185 | font-weight: 700; 186 | color: #000; 187 | font-size: 2.4rem; 188 | } 189 | 190 | .paragraph { 191 | line-height: 2; 192 | color: #656565; 193 | } 194 | 195 | .copyright { 196 | font-weight: 300; 197 | } 198 | 199 | .u-center-text { 200 | text-align: center !important; 201 | } 202 | 203 | .u-margin-top-big { 204 | margin-top: 8rem !important; 205 | } 206 | 207 | .u-margin-top-mid { 208 | margin-top: 4rem !important; 209 | } 210 | 211 | .u-margin-top-small { 212 | margin-top: 2rem !important; 213 | } 214 | 215 | .u-margin-bottom-big { 216 | margin-bottom: 8rem !important; 217 | } 218 | 219 | .u-margin-bottom-mid { 220 | margin-bottom: 4rem !important; 221 | } 222 | 223 | .u-margin-bottom-small { 224 | margin-bottom: 2rem !important; 225 | } 226 | 227 | .btn { 228 | font-weight: 300; 229 | padding: 1rem 2rem; 230 | border: none; 231 | border-radius: 8px; 232 | font-family: inherit; 233 | font-size: inherit; 234 | cursor: pointer; 235 | box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2); 236 | display: inline-block; 237 | transition: all 0.4s; 238 | } 239 | .btn:link, 240 | .btn:visited { 241 | font-weight: 300; 242 | padding: 1rem 2rem; 243 | border-radius: 8px; 244 | text-decoration: none; 245 | box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2); 246 | display: inline-block; 247 | transition: all 0.4s; 248 | } 249 | @media (hover: hover) { 250 | .btn:hover { 251 | transform: translateY(-4px); 252 | box-shadow: 0 1rem 6rem rgba(0, 0, 0, 0.2); 253 | } 254 | } 255 | .btn:active { 256 | transform: translateY(1px); 257 | box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); 258 | } 259 | .btn--green { 260 | color: #fff; 261 | background-color: #007a69; 262 | border: 1px solid #007a69; 263 | } 264 | .btn--white { 265 | color: #007a69; 266 | background-color: #fff; 267 | border: 1px solid currentColor; 268 | } 269 | 270 | .form__col { 271 | display: flex; 272 | gap: 2rem; 273 | align-items: center; 274 | width: 100%; 275 | } 276 | @media only screen and (max-width: 37.5em) { 277 | .form__col { 278 | flex-wrap: wrap; 279 | } 280 | } 281 | .form__group { 282 | width: 100%; 283 | } 284 | .form__label { 285 | display: block; 286 | font-size: 1.6rem; 287 | font-weight: 700; 288 | color: #000; 289 | font-family: inherit; 290 | margin-bottom: 1rem; 291 | } 292 | .form__input, 293 | .form__textarea { 294 | display: block; 295 | width: 100%; 296 | padding: 1.5rem 2rem; 297 | border: 2px solid #e5e5e5; 298 | border-radius: 8px; 299 | font-size: inherit; 300 | font-weight: 300; 301 | font-family: inherit; 302 | transition: all 0.4s; 303 | background-color: rgba(255, 255, 255, 0.5); 304 | } 305 | .form__input:focus, 306 | .form__textarea:focus { 307 | outline-color: #007a69; 308 | } 309 | .form__input:invalid, 310 | .form__textarea:invalid { 311 | outline-color: red; 312 | } 313 | .form__textarea { 314 | height: 24rem; 315 | resize: vertical; 316 | } 317 | 318 | .header { 319 | background-image: url("../img/svg/header-bg-img.svg"); 320 | background-position: center top; 321 | background-repeat: no-repeat; 322 | background-size: cover; 323 | background-color: #fff; 324 | overflow: hidden; 325 | } 326 | .header__menu-bar { 327 | display: flex; 328 | align-items: center; 329 | justify-content: space-around; 330 | padding: 1rem 0; 331 | } 332 | @media only screen and (max-width: 50em) { 333 | .header__menu-bar { 334 | display: block; 335 | } 336 | } 337 | .header__nav-list { 338 | list-style: none; 339 | display: flex; 340 | align-items: center; 341 | justify-content: space-between; 342 | } 343 | @media only screen and (max-width: 50em) { 344 | .header__nav-list { 345 | display: none; 346 | } 347 | } 348 | .header__nav-link { 349 | text-decoration: none; 350 | font-weight: 300; 351 | color: #656565; 352 | padding: 2rem; 353 | } 354 | @media only screen and (max-width: 75em) { 355 | .header__nav-link { 356 | padding: 1rem; 357 | } 358 | } 359 | @media (hover: hover) { 360 | .header__nav-link:hover { 361 | color: #007a69; 362 | font-weight: 400; 363 | } 364 | } 365 | .header__nav-link--active { 366 | color: #007a69; 367 | font-weight: 700; 368 | } 369 | .header__btn-box { 370 | display: flex; 371 | align-items: center; 372 | justify-content: space-between; 373 | gap: 2rem; 374 | } 375 | @media only screen and (max-width: 75em) { 376 | .header__btn-box { 377 | gap: 1rem; 378 | } 379 | } 380 | @media only screen and (max-width: 56.25em) { 381 | .header__btn-box { 382 | display: none; 383 | } 384 | } 385 | .header__content { 386 | animation: fadeInUp 2s ease; 387 | display: flex; 388 | align-items: center; 389 | justify-content: space-between; 390 | padding-bottom: 4rem; 391 | gap: 16rem; 392 | } 393 | @media only screen and (max-width: 75em) { 394 | .header__content { 395 | padding-top: 4rem; 396 | gap: 6rem; 397 | } 398 | } 399 | @media only screen and (max-width: 56.25em) { 400 | .header__content { 401 | gap: 4rem; 402 | } 403 | } 404 | @media only screen and (max-width: 50em) { 405 | .header__content { 406 | padding: 4rem; 407 | } 408 | } 409 | @media only screen and (max-width: 37.5em) { 410 | .header__content { 411 | padding: 4rem 2rem; 412 | } 413 | } 414 | .header__hero-img-box { 415 | flex: 0 0 35%; 416 | overflow: hidden; 417 | } 418 | @media only screen and (max-width: 50em) { 419 | .header__hero-img-box { 420 | display: none; 421 | } 422 | } 423 | .header__hero-img { 424 | width: 100%; 425 | height: 100%; 426 | display: block; 427 | -o-object-fit: cover; 428 | object-fit: cover; 429 | } 430 | .header__form-input { 431 | border: none; 432 | border-radius: 8px; 433 | box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2); 434 | font-family: inherit; 435 | font-size: inherit; 436 | width: 32rem; 437 | padding: 1rem 2rem; 438 | margin-right: 2rem; 439 | outline: 2px solid #007a69; 440 | transition: all 0.4s; 441 | } 442 | @media only screen and (max-width: 56.25em) { 443 | .header__form-input { 444 | width: 28rem; 445 | } 446 | } 447 | .header__form-input::-webkit-input-placeholder { 448 | color: #9c9c9c; 449 | } 450 | .header__form-input::-moz-placeholder { 451 | color: #9c9c9c; 452 | } 453 | .header__form-input:-ms-input-placeholder { 454 | color: #9c9c9c; 455 | } 456 | .header__form-input::-ms-input-placeholder { 457 | color: #9c9c9c; 458 | } 459 | .header__form-input::placeholder { 460 | color: #9c9c9c; 461 | } 462 | 463 | .footer { 464 | padding: 4rem; 465 | color: #fff; 466 | background-color: #00584c; 467 | } 468 | @media only screen and (max-width: 37.5em) { 469 | .footer { 470 | padding: 2rem; 471 | } 472 | } 473 | .footer__row-1 { 474 | display: flex; 475 | justify-content: space-around; 476 | } 477 | @media only screen and (max-width: 56.25em) { 478 | .footer__row-1 { 479 | justify-content: space-between; 480 | } 481 | } 482 | @media only screen and (max-width: 50em) { 483 | .footer__row-1 { 484 | justify-content: center; 485 | flex-wrap: wrap; 486 | gap: 2rem; 487 | } 488 | } 489 | @media only screen and (max-width: 50em) { 490 | .footer__box { 491 | flex-basis: 45%; 492 | } 493 | } 494 | .footer__row-2 { 495 | display: flex; 496 | justify-content: space-between; 497 | align-items: center; 498 | border-top: 1px solid currentColor; 499 | padding-top: 2rem; 500 | flex-wrap: wrap; 501 | } 502 | @media only screen and (max-width: 27.5em) { 503 | .footer__row-2 { 504 | justify-content: center; 505 | gap: 2rem; 506 | } 507 | } 508 | .footer__social-link:link, 509 | .footer__social-link:visited { 510 | text-decoration: none; 511 | color: currentColor; 512 | } 513 | .footer__row-3 { 514 | display: flex; 515 | justify-content: center; 516 | align-items: center; 517 | flex-wrap: wrap; 518 | gap: 2rem; 519 | } 520 | .footer__title { 521 | font-size: 1.6rem; 522 | font-weight: 700; 523 | font-family: inherit; 524 | display: block; 525 | margin-bottom: 2rem; 526 | } 527 | .footer__list { 528 | list-style: none; 529 | } 530 | .footer__item { 531 | display: block; 532 | margin: 1rem 0; 533 | } 534 | .footer__link:link, 535 | .footer__link:visited { 536 | font-weight: 300; 537 | color: #fff; 538 | text-decoration: none; 539 | font-size: 1.4rem; 540 | } 541 | @media (hover: hover) { 542 | .footer__link:hover { 543 | text-decoration: underline; 544 | } 545 | } 546 | .footer__dropdown { 547 | font-family: inherit; 548 | font-weight: 300; 549 | font-size: 1.4rem; 550 | color: #fff; 551 | width: 24rem; 552 | padding: 1rem 0; 553 | border-radius: 8px; 554 | border: 2px solid currentColor; 555 | background-color: transparent; 556 | outline-color: currentColor; 557 | cursor: pointer; 558 | } 559 | @media only screen and (max-width: 50em) { 560 | .footer__dropdown { 561 | width: 100%; 562 | } 563 | } 564 | .footer__dropdown-item { 565 | font-family: inherit; 566 | font-weight: 300; 567 | font-size: 1.4rem; 568 | color: #fff; 569 | background-color: #007a69; 570 | margin: 1rem 0; 571 | } 572 | 573 | .who-we-are { 574 | padding: 8rem; 575 | background-color: #f9f9fb; 576 | } 577 | @media only screen and (max-width: 56.25em) { 578 | .who-we-are { 579 | padding: 4rem; 580 | } 581 | } 582 | @media only screen and (max-width: 37.5em) { 583 | .who-we-are { 584 | padding: 4rem 2rem; 585 | } 586 | } 587 | .who-we-are__content { 588 | display: flex; 589 | justify-content: space-between; 590 | align-items: stretch; 591 | gap: 20rem; 592 | } 593 | @media only screen and (max-width: 75em) { 594 | .who-we-are__content { 595 | gap: 12rem; 596 | } 597 | } 598 | @media only screen and (max-width: 56.25em) { 599 | .who-we-are__content { 600 | gap: 4rem; 601 | flex-wrap: wrap; 602 | } 603 | } 604 | .who-we-are .emphasis { 605 | font-size: 2rem; 606 | color: #007a69; 607 | display: block; 608 | font-weight: 700; 609 | } 610 | .who-we-are__left { 611 | flex: 0 0 45%; 612 | } 613 | @media only screen and (max-width: 56.25em) { 614 | .who-we-are__left { 615 | flex-basis: 100%; 616 | } 617 | } 618 | .who-we-are__right { 619 | display: flex; 620 | justify-content: space-between; 621 | align-items: flex-start; 622 | gap: 2rem; 623 | flex-wrap: wrap; 624 | } 625 | @media only screen and (max-width: 56.25em) { 626 | .who-we-are__right { 627 | flex-basis: 100%; 628 | } 629 | } 630 | .who-we-are__paragraph { 631 | flex: 0 0 45%; 632 | } 633 | 634 | .what-we-offer { 635 | padding: 12rem 8rem; 636 | background-image: linear-gradient( 637 | rgba(255, 255, 255, 0.9), 638 | rgba(255, 255, 255, 0.9) 639 | ), 640 | url("../img/services-bg-img.png"); 641 | background-position: center center; 642 | background-size: cover; 643 | } 644 | @media only screen and (max-width: 75em) { 645 | .what-we-offer { 646 | padding: 8rem 4rem; 647 | } 648 | } 649 | @media only screen and (max-width: 37.5em) { 650 | .what-we-offer { 651 | padding: 4rem 2rem; 652 | } 653 | } 654 | .what-we-offer__content-box { 655 | display: flex; 656 | justify-content: center; 657 | flex-wrap: wrap; 658 | gap: 4rem; 659 | } 660 | .what-we-offer__content { 661 | padding: 4rem; 662 | flex: 0 0 30%; 663 | background-color: #f9f9fb; 664 | border-radius: 8px; 665 | box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2); 666 | transition: all 0.4s; 667 | } 668 | @media only screen and (max-width: 75em) { 669 | .what-we-offer__content { 670 | flex: 0 0 45%; 671 | } 672 | } 673 | @media only screen and (max-width: 50em) { 674 | .what-we-offer__content { 675 | flex: 0 0 100%; 676 | } 677 | } 678 | @media (hover: hover) { 679 | .what-we-offer__content:hover { 680 | box-shadow: 0 1rem 6rem rgba(0, 0, 0, 0.2); 681 | transform: scale(1.05) translateY(4px); 682 | } 683 | } 684 | .what-we-offer__title { 685 | display: flex; 686 | align-items: center; 687 | gap: 2rem; 688 | font-size: 2rem; 689 | font-weight: 700; 690 | } 691 | @media only screen and (max-width: 37.5em) { 692 | .what-we-offer .paragraph { 693 | hyphens: auto; 694 | } 695 | } 696 | 697 | .mission { 698 | padding: 8rem; 699 | background-image: linear-gradient(to right, #fff 0%, #fff 50%, #f9f9fb 50%); 700 | } 701 | @media only screen and (max-width: 68.75em) { 702 | .mission { 703 | padding: 4rem; 704 | } 705 | } 706 | @media only screen and (max-width: 37.5em) { 707 | .mission { 708 | padding: 4rem 2rem; 709 | } 710 | } 711 | .mission__container { 712 | display: flex; 713 | align-items: center; 714 | justify-content: center; 715 | gap: 4rem; 716 | } 717 | @media only screen and (max-width: 68.75em) { 718 | .mission__container { 719 | flex-wrap: wrap-reverse; 720 | } 721 | } 722 | .mission__left { 723 | flex: 0 0 70%; 724 | display: flex; 725 | justify-content: center; 726 | gap: 4rem; 727 | } 728 | @media only screen and (max-width: 68.75em) { 729 | .mission__left { 730 | gap: 4rem; 731 | flex: 0 0 100%; 732 | flex-wrap: wrap; 733 | } 734 | } 735 | @media only screen and (max-width: 50em) { 736 | .mission__left { 737 | gap: 4rem; 738 | } 739 | } 740 | @media only screen and (max-width: 68.75em) { 741 | .mission__img-box { 742 | height: 40rem; 743 | overflow: hidden; 744 | } 745 | } 746 | @media only screen and (max-width: 56.25em) { 747 | .mission__img-box { 748 | height: 28rem; 749 | } 750 | } 751 | .mission__img { 752 | display: block; 753 | width: 100%; 754 | object-fit: cover; 755 | object-position: top center; 756 | } 757 | .mission__content { 758 | padding: 4rem; 759 | background-color: #f9f9fb; 760 | border-radius: 8px; 761 | box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2); 762 | transition: all 0.4s; 763 | } 764 | @media only screen and (max-width: 68.75em) { 765 | .mission__content { 766 | flex-basis: 80%; 767 | } 768 | } 769 | @media only screen and (max-width: 50em) { 770 | .mission__content { 771 | flex-basis: 100%; 772 | } 773 | } 774 | @media (hover: hover) { 775 | .mission__content:hover { 776 | box-shadow: 0 1rem 6rem rgba(0, 0, 0, 0.2); 777 | transform: scale(1.05) translateY(4px); 778 | } 779 | } 780 | .mission__title { 781 | font-size: 2rem; 782 | font-weight: 700; 783 | } 784 | @media only screen and (max-width: 37.5em) { 785 | .mission .paragraph { 786 | hyphens: auto; 787 | } 788 | } 789 | 790 | .why-us { 791 | padding: 8rem; 792 | background-color: #fff; 793 | display: flex; 794 | justify-content: center; 795 | align-items: center; 796 | gap: 8rem; 797 | } 798 | @media only screen and (max-width: 56.25em) { 799 | .why-us { 800 | flex-wrap: wrap; 801 | } 802 | } 803 | @media only screen and (max-width: 37.5em) { 804 | .why-us { 805 | padding: 8rem 2rem; 806 | } 807 | } 808 | @media only screen and (max-width: 68.75em) { 809 | .why-us { 810 | gap: 4rem; 811 | } 812 | } 813 | .why-us__left { 814 | flex: 0 0 40%; 815 | } 816 | @media only screen and (max-width: 68.75em) { 817 | .why-us__left { 818 | flex: 0 0 50%; 819 | } 820 | } 821 | @media only screen and (max-width: 56.25em) { 822 | .why-us__left { 823 | flex: 0 0 70%; 824 | } 825 | } 826 | .why-us__img { 827 | display: block; 828 | width: 100%; 829 | } 830 | 831 | .contact-us { 832 | padding: 12rem 8rem; 833 | background-color: #f9f9fb; 834 | } 835 | @media only screen and (max-width: 75em) { 836 | .contact-us { 837 | padding: 8rem 4rem; 838 | } 839 | } 840 | @media only screen and (max-width: 37.5em) { 841 | .contact-us { 842 | padding: 4rem 2rem; 843 | } 844 | } 845 | .contact-us__title { 846 | display: flex; 847 | align-items: center; 848 | gap: 1rem; 849 | font-size: 2rem; 850 | font-weight: 700; 851 | } 852 | .contact-us__img-box { 853 | width: 100%; 854 | } 855 | @media only screen and (max-width: 75em) { 856 | .contact-us__img-box { 857 | width: 60%; 858 | } 859 | } 860 | @media only screen and (max-width: 56.25em) { 861 | .contact-us__img-box { 862 | width: 80%; 863 | } 864 | } 865 | @media only screen and (max-width: 37.5em) { 866 | .contact-us__img-box { 867 | width: 100%; 868 | } 869 | } 870 | .contact-us__img { 871 | width: 100%; 872 | display: block; 873 | } 874 | .contact-us__right { 875 | padding: 4rem; 876 | background-color: #f9f9fb; 877 | box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2); 878 | border-radius: 8px; 879 | flex: 0 0 55%; 880 | } 881 | @media only screen and (max-width: 75em) { 882 | .contact-us__right { 883 | flex: 0 0 100%; 884 | } 885 | } 886 | .contact-us__container { 887 | display: flex; 888 | align-items: center; 889 | justify-content: center; 890 | gap: 8rem; 891 | } 892 | @media only screen and (max-width: 75em) { 893 | .contact-us__container { 894 | flex-wrap: wrap; 895 | gap: 4rem; 896 | } 897 | } 898 | 899 | /* 900 | Copyright 2022 Muiz Kolapo Haruna 901 | 902 | Licensed under the Apache License, Version 2.0 (the "License"); 903 | you may not use this file except in compliance with the License. 904 | You may obtain a copy of the License at 905 | 906 | http://www.apache.org/licenses/LICENSE-2.0 907 | 908 | Unless required by applicable law or agreed to in writing, software 909 | distributed under the License is distributed on an "AS IS" BASIS, 910 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 911 | See the License for the specific language governing permissions and 912 | limitations under the License. 913 | */ 914 | 915 | /*# sourceMappingURL=style.css.map */ 916 | --------------------------------------------------------------------------------