├── .gitignore ├── README.md ├── assets ├── fonts │ ├── Lufga-Bold.woff │ ├── Lufga-Bold.woff2 │ ├── Lufga-Medium.woff │ ├── Lufga-Medium.woff2 │ ├── Lufga-Regular.woff │ ├── Lufga-Regular.woff2 │ ├── Lufga-SemiBold.woff │ └── Lufga-SemiBold.woff2 ├── images │ ├── banner-image-2.jpg │ ├── banner-image.jpg │ ├── countrie-img-1.jpg │ ├── countrie-img-2.jpg │ ├── countrie-img-3.jpg │ ├── countrie-img-4.jpg │ └── logo.svg ├── js │ └── setting.js └── scss │ ├── _base.scss │ ├── _bs-variables.scss │ ├── _buttons.scss │ ├── _custom-font.scss │ ├── _mixins.scss │ ├── _title.scss │ ├── _variables.scss │ ├── components │ ├── _banner.scss │ ├── _countries-section.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _recently-added.scss │ ├── _social-list.scss │ └── form │ │ ├── _checkbox.scss │ │ └── _form.scss │ └── style.scss ├── gulpfile.js ├── index.html ├── package-lock.json ├── package.json └── vendors ├── css ├── style.css └── style.min.css ├── fonts ├── Lufga-Bold.woff ├── Lufga-Bold.woff2 ├── Lufga-Medium.woff ├── Lufga-Medium.woff2 ├── Lufga-Regular.woff ├── Lufga-Regular.woff2 ├── Lufga-SemiBold.woff └── Lufga-SemiBold.woff2 ├── images ├── banner-image-2.jpg ├── banner-image.jpg ├── countrie-img-1.jpg ├── countrie-img-2.jpg ├── countrie-img-3.jpg ├── countrie-img-4.jpg └── logo.svg └── js ├── script.js └── script.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | /bower_components/ 2 | /node_modules/ 3 | .sass-cache/ 4 | .vscode/ 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Project Setup 2 | ============================= 3 | 4 | A starter setup for a gulp project including: 5 | + JS (lint, minify, and concat) 6 | + SASS (compile) 7 | + CSS (minify) 8 | + Autoprefixer (Vendor Prefixes) 9 | + Images (image compression) 10 | + BrowserSync (css injection) 11 | 12 | ## Requirements 13 | 14 | To use this you'll need the following installed: 15 | 16 | + [NodeJS](http://nodejs.org) - use the installer 17 | + [GulpJS](https://github.com/gulpjs/gulp) - `$ npm install -g gulp` 18 | 19 | ## Setup 20 | 21 | 1. `$ git clone git@github.com:dropways/Real-Estate-Property-Landing-Webpage.git` or download it into a directory of your choice. 22 | 2. Then run `$ npm install` inside that directory. (This should install all the plugins needed) 23 | 24 | ## Usage 25 | 26 | 1. To start the browser syncing and file watching, just run `$ gulp` in the project directory. 27 | 2. Folders and file paths can be changed in gulpfile.js 28 | 29 | **Note:** For WordPress projects, install Gulp into the theme directory 30 | 31 | ## Build Task 32 | 33 | + The build task should be ran when your project is ready for production. 34 | + What does the build task do differently? 35 | + Compress your images 36 | + Minify your CSS and not create sourcemaps 37 | + Not start BrowserSync 38 | -------------------------------------------------------------------------------- /assets/fonts/Lufga-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/fonts/Lufga-Bold.woff -------------------------------------------------------------------------------- /assets/fonts/Lufga-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/fonts/Lufga-Bold.woff2 -------------------------------------------------------------------------------- /assets/fonts/Lufga-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/fonts/Lufga-Medium.woff -------------------------------------------------------------------------------- /assets/fonts/Lufga-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/fonts/Lufga-Medium.woff2 -------------------------------------------------------------------------------- /assets/fonts/Lufga-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/fonts/Lufga-Regular.woff -------------------------------------------------------------------------------- /assets/fonts/Lufga-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/fonts/Lufga-Regular.woff2 -------------------------------------------------------------------------------- /assets/fonts/Lufga-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/fonts/Lufga-SemiBold.woff -------------------------------------------------------------------------------- /assets/fonts/Lufga-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/fonts/Lufga-SemiBold.woff2 -------------------------------------------------------------------------------- /assets/images/banner-image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/images/banner-image-2.jpg -------------------------------------------------------------------------------- /assets/images/banner-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/images/banner-image.jpg -------------------------------------------------------------------------------- /assets/images/countrie-img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/images/countrie-img-1.jpg -------------------------------------------------------------------------------- /assets/images/countrie-img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/images/countrie-img-2.jpg -------------------------------------------------------------------------------- /assets/images/countrie-img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/images/countrie-img-3.jpg -------------------------------------------------------------------------------- /assets/images/countrie-img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/assets/images/countrie-img-4.jpg -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/js/setting.js: -------------------------------------------------------------------------------- 1 | jQuery(window).on("scroll load", function () { 2 | if ($(this).scrollTop() > 0) { 3 | $(".header-wrap").addClass("shrink-nav"); 4 | } else { 5 | $(".header-wrap").removeClass("shrink-nav"); 6 | } 7 | }); 8 | jQuery(document).ready(function () { 9 | jQuery(".menu-toggle").on("click", function () { 10 | jQuery(this).toggleClass("open"); 11 | jQuery(".header-right").toggleClass("show"); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /assets/scss/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | -webkit-text-size-adjust: none; 3 | -webkit-font-smoothing: antialiased; 4 | width: 100%; 5 | height: 100%; 6 | scroll-behavior: auto !important; 7 | scrollbar-color: $dark-color #d1dae5; 8 | scrollbar-width: thin; 9 | } 10 | 11 | input[type="submit"] { 12 | -webkit-appearance: none; 13 | } 14 | 15 | * { 16 | box-sizing: border-box; 17 | margin: 0; 18 | padding: 0; 19 | 20 | &:after { 21 | box-sizing: border-box; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | &:before { 27 | box-sizing: border-box; 28 | margin: 0; 29 | padding: 0; 30 | } 31 | } 32 | 33 | body { 34 | margin: 0; 35 | padding: 0; 36 | font-family: $font-family-sans-serif; 37 | -webkit-font-smoothing: antialiased; 38 | -moz-font-smoothing: antialiased; 39 | width: 100%; 40 | height: 100%; 41 | font-weight: 400; 42 | color: $body-color; 43 | scrollbar-color: $dark-color #d1dae5; 44 | scrollbar-width: thin; 45 | } 46 | 47 | a { 48 | outline: none; 49 | text-decoration: none; 50 | color: $body-color; 51 | &:hover { 52 | text-decoration: none; 53 | outline: none; 54 | outline-offset: 0; 55 | color: $body-color; 56 | } 57 | &:focus { 58 | text-decoration: none; 59 | outline: none; 60 | outline-offset: 0; 61 | color: $body-color; 62 | } 63 | } 64 | 65 | img { 66 | border: 0; 67 | max-width: 100%; 68 | height: auto; 69 | } 70 | 71 | input { 72 | outline: none; 73 | resize: none; 74 | box-shadow: none; 75 | font-family: $font-family-sans-serif; 76 | } 77 | 78 | textarea { 79 | outline: none; 80 | resize: none; 81 | box-shadow: none; 82 | font-family: $font-family-sans-serif; 83 | } 84 | 85 | select { 86 | outline: none; 87 | resize: none; 88 | box-shadow: none; 89 | font-family: $font-family-sans-serif; 90 | } 91 | 92 | strong { 93 | font-weight: 700; 94 | } 95 | button { 96 | box-shadow: none; 97 | &::-moz-focus-inner { 98 | border: 0; 99 | } 100 | } 101 | 102 | .h1, 103 | .h2, 104 | .h3, 105 | .h4, 106 | .h5, 107 | .h6, 108 | h1, 109 | h2, 110 | h3, 111 | h4, 112 | h5, 113 | h6 { 114 | line-height: 1.2; 115 | margin: 0; 116 | font-weight: 700; 117 | font-family: $font-family-sans-serif; 118 | } 119 | 120 | ul { 121 | margin: 0; 122 | padding: 0; 123 | list-style: none; 124 | } 125 | 126 | ol { 127 | margin: 0; 128 | padding: 0; 129 | list-style: none; 130 | } 131 | 132 | p { 133 | margin: 0 0 10px 0; 134 | padding: 0; 135 | } 136 | button:focus { 137 | outline: none; 138 | } 139 | .svg { 140 | path { 141 | @include transition(all 0.3s ease-in-out); 142 | } 143 | } 144 | 145 | ::-webkit-scrollbar { 146 | width: 7px; 147 | height: 7px; 148 | @include border-radius(8px); 149 | } 150 | ::-webkit-scrollbar-track { 151 | background: #d1dae5; 152 | @include border-radius(8px); 153 | } 154 | ::-webkit-scrollbar-thumb { 155 | background: $dark-color; 156 | @include border-radius(8px); 157 | } 158 | ::-webkit-scrollbar-thumb:window-inactive { 159 | background: $dark-color; 160 | } 161 | 162 | .container { 163 | max-width: 1230px; 164 | padding-left: 15px; 165 | padding-right: 15px; 166 | } 167 | 168 | .badge { 169 | font-weight: 700; 170 | padding: 0.75em 1em; 171 | } 172 | 173 | .tick-list { 174 | ul { 175 | li { 176 | padding-left: 30px; 177 | position: relative; 178 | margin-bottom: 12px; 179 | &:before { 180 | content: ""; 181 | width: 7px; 182 | height: 14px; 183 | @include transform-rotate(45deg); 184 | border-bottom: 2px solid $primary; 185 | border-right: 2px solid $primary; 186 | position: absolute; 187 | left: 5px; 188 | top: 4px; 189 | display: block; 190 | } 191 | } 192 | } 193 | } 194 | .number-list { 195 | ol { 196 | counter-reset: item 0; 197 | li { 198 | padding-left: 30px; 199 | position: relative; 200 | margin-bottom: 12px; 201 | &:before { 202 | content: counters(item, ".") ". "; 203 | counter-increment: item 1; 204 | position: absolute; 205 | left: 0; 206 | top: 0px; 207 | font-weight: 600; 208 | display: block; 209 | } 210 | ol { 211 | margin-top: 12px; 212 | li { 213 | padding-left: 0; 214 | &:before { 215 | position: relative; 216 | display: inline; 217 | } 218 | } 219 | ol { 220 | padding-left: 20px; 221 | } 222 | } 223 | } 224 | } 225 | } 226 | -------------------------------------------------------------------------------- /assets/scss/_bs-variables.scss: -------------------------------------------------------------------------------- 1 | // theme colors 2 | $theme-colors: ( 3 | "primary": $primary, 4 | "secondary": $secondary, 5 | "success": $success, 6 | "info": $info, 7 | "warning": $warning, 8 | "danger": $danger, 9 | "light": $light, 10 | "dark": $dark, 11 | ); 12 | $custom-colors: ( 13 | "skyblue": $skyblue, 14 | ); 15 | $theme-colors: map-merge($theme-colors, $custom-colors); 16 | 17 | // Typography 18 | $body-color: #8f90a6 !default; 19 | $dark-color: #110229; 20 | $gray-color: #fbfbfb; 21 | $gray-color-1: #bfbfbf; 22 | 23 | $font-family-sans-serif: "Lufga", -apple-system, BlinkMacSystemFont, "Segoe UI", 24 | Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", 25 | "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; 26 | 27 | $font-weight-light: 300 !default; 28 | // $font-weight-base: 400; 29 | $headings-font-weight: 400 !default; 30 | 31 | // Shadows 32 | $box-shadow-sm: 0 0.125rem 0.25rem 0 rgba($gray-900, 0.2) !default; 33 | $box-shadow: 0 0.15rem 1.75rem 0 rgba($gray-900, 0.15) !default; 34 | // $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; 35 | 36 | // Borders Radius 37 | $border-radius: 0.35rem !default; 38 | $border-color: darken($gray-200, 2%) !default; 39 | 40 | // Spacing Variables 41 | // Change below variable if the height of the navbar changes 42 | $topbar-base-height: 4.375rem !default; 43 | 44 | // Card 45 | $card-cap-bg: $white !default; 46 | $card-border-width: 1px; 47 | $card-border-radius: 8px; 48 | $card-border-color: $gray-300; 49 | 50 | // Adjust column spacing for symmetry 51 | $spacer: 1rem !default; 52 | $grid-gutter-width: 30px !default; 53 | 54 | // Button 55 | $btn-padding-y: 13px; 56 | $btn-padding-x: 30px; 57 | $btn-border-width: 2px; 58 | $btn-border-radius: 14px; 59 | $btn-padding-y-sm: 7px; 60 | $btn-padding-x-sm: 20px; 61 | 62 | // Transitions 63 | $transition-collapse: height 0.15s ease !default; 64 | 65 | // Dropdowns 66 | $dropdown-font-size: 0.85rem !default; 67 | $dropdown-border-width: 1px !default; 68 | 69 | $dropdown-link-color: $gray-900; 70 | $dropdown-link-hover-color: $dark-color; 71 | $dropdown-link-hover-bg: $gray-100; 72 | $dropdown-link-disabled-color: $gray-500; 73 | $dropdown-item-padding-y: 0.6rem; 74 | $dropdown-item-padding-x: 1rem; 75 | $dropdown-header-color: $dark-color; 76 | $dropdown-divider-bg: $gray-500 !default; 77 | 78 | $tooltip-bg: $dark-color; 79 | 80 | // List Group 81 | $list-group-item-padding-y: 0.8rem; 82 | $list-group-item-padding-x: 1rem; 83 | 84 | // accordion color 85 | $accordion-padding-y: 1.2rem; 86 | $accordion-button-color: $dark-color; 87 | $accordion-transition: all 0.3s ease-in-out; 88 | $accordion-button-active-bg: $primary; 89 | $accordion-button-active-color: $white; 90 | $accordion-button-focus-box-shadow: none; 91 | $accordion-icon-width: 1.15rem; 92 | 93 | // scss-docs-start display-headings 94 | $display-font-sizes: ( 95 | 1: 4.4rem, 96 | 2: 4rem, 97 | 3: 3.5rem, 98 | 4: 3rem, 99 | 5: 2.5rem, 100 | 6: 2rem, 101 | ) !default; 102 | 103 | $display-font-weight: 600 !default; 104 | 105 | // Spacing 106 | $spacer: 1rem !default; 107 | $spacers: ( 108 | 0: 0, 109 | 1: $spacer / 4, 110 | 2: $spacer / 2, 111 | 3: $spacer, 112 | 4: $spacer * 1.5, 113 | 5: $spacer * 3, 114 | 6: $spacer * 3.5, 115 | 7: $spacer * 4, 116 | 8: $spacer * 4.5, 117 | ) !default; 118 | 119 | $position-values: ( 120 | 0: 0, 121 | 20: 20%, 122 | 50: 50%, 123 | 100: 100%, 124 | ); 125 | 126 | $alert-bg-scale: -80%; 127 | $alert-border-scale: -70%; 128 | -------------------------------------------------------------------------------- /assets/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | font-size: 16px; 3 | line-height: 20px; 4 | font-weight: 600; 5 | text-transform: uppercase; 6 | letter-spacing: 0.1em; 7 | box-shadow: none; 8 | @include transition(all 0.3s ease-in-out); 9 | @include breakpoint(max, 1024) { 10 | font-size: 14px; 11 | } 12 | &:focus, 13 | &:hover, 14 | &:active { 15 | box-shadow: none; 16 | &:focus { 17 | box-shadow: none; 18 | } 19 | } 20 | &.btn-lg { 21 | padding: 15px 24px; 22 | font-size: 14px; 23 | } 24 | &.btn-sm { 25 | font-size: 14px; 26 | } 27 | &.btn-xs { 28 | padding: 4px 18px; 29 | font-size: 12px; 30 | &.btn-txt-icon { 31 | i { 32 | font-size: 16px; 33 | } 34 | } 35 | } 36 | &.d-block, 37 | &.btn-block { 38 | width: 100%; 39 | text-align: center; 40 | } 41 | &.btn-md-block { 42 | @include breakpoint(max, 767) { 43 | width: 100%; 44 | text-align: center; 45 | } 46 | } 47 | &.btn-link { 48 | text-transform: capitalize; 49 | letter-spacing: 0; 50 | text-decoration: none; 51 | font-size: 18px; 52 | font-weight: 500; 53 | padding: 0; 54 | } 55 | &.btn-icon { 56 | display: inline-flex; 57 | align-items: center; 58 | justify-content: center; 59 | width: 52px; 60 | height: 52px; 61 | padding: 0; 62 | line-height: 1; 63 | font-size: 20px; 64 | font-weight: 400; 65 | &.btn-md { 66 | width: 40px; 67 | height: 40px; 68 | } 69 | &.btn-sm { 70 | width: 36px; 71 | height: 36px; 72 | } 73 | &.btn-xs { 74 | width: 30px; 75 | height: 30px; 76 | font-size: 16px; 77 | } 78 | } 79 | &.btn-no-arrow { 80 | &:after { 81 | display: none; 82 | } 83 | } 84 | &.btn-clean { 85 | background: transparent !important; 86 | border: transparent !important; 87 | } 88 | &.btn-primary { 89 | color: $white; 90 | } 91 | &.btn-outline-primary { 92 | &:hover { 93 | color: $white; 94 | } 95 | } 96 | &.btn-secondary { 97 | color: $white; 98 | } 99 | &.btn-success { 100 | color: $white; 101 | } 102 | &.btn-outline-success { 103 | &:hover { 104 | color: $white; 105 | } 106 | } 107 | &.btn-danger { 108 | color: $white; 109 | } 110 | &.btn-outline-danger { 111 | &:hover { 112 | color: $white; 113 | } 114 | } 115 | &.btn-warning { 116 | color: $white; 117 | } 118 | &.btn-outline-warning { 119 | &:hover { 120 | color: $white; 121 | } 122 | } 123 | &.btn-txt-icon { 124 | display: inline-flex; 125 | align-items: center; 126 | justify-content: center; 127 | i { 128 | font-size: 18px; 129 | line-height: 1; 130 | margin-right: 8px; 131 | &:before { 132 | display: block; 133 | } 134 | } 135 | &.btn-icon-right { 136 | i { 137 | margin-left: 8px; 138 | margin-right: 0; 139 | } 140 | } 141 | } 142 | &.btn-rounded { 143 | @include border-radius(48px); 144 | } 145 | &.btn-flate { 146 | @include border-radius(0px); 147 | } 148 | 149 | &.btn-google { 150 | background: $brand-google; 151 | color: $white; 152 | } 153 | &.btn-facebook { 154 | background: $brand-facebook; 155 | color: $white; 156 | } 157 | &.btn-twitter { 158 | background: $brand-twitter; 159 | color: $white; 160 | } 161 | &.btn-linkedin { 162 | background: $brand-linkedin; 163 | color: $white; 164 | } 165 | &.btn-instagram { 166 | background: $brand-instagram; 167 | color: $white; 168 | } 169 | &.btn-github { 170 | background: $brand-github; 171 | color: $white; 172 | } 173 | &.btn-pinterest { 174 | background: $brand-pinterest; 175 | color: $white; 176 | } 177 | &.btn-whatsapp { 178 | background: $brand-whatsapp; 179 | color: $white; 180 | } 181 | &.btn-behance { 182 | background: $brand-behance; 183 | color: $white; 184 | } 185 | &.btn-dribbble { 186 | background: $brand-dribbble; 187 | color: $white; 188 | } 189 | &.btn-youtube { 190 | background: $brand-youtube; 191 | color: $white; 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /assets/scss/_custom-font.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Lufga"; 3 | src: url("../fonts/Lufga-Bold.woff2") format("woff2"), 4 | url("../fonts/Lufga-Bold.woff") format("woff"); 5 | font-weight: bold; 6 | font-style: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Lufga"; 12 | src: url("../fonts/Lufga-Regular.woff2") format("woff2"), 13 | url("../fonts/Lufga-Regular.woff") format("woff"); 14 | font-weight: normal; 15 | font-style: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: "Lufga"; 21 | src: url("../fonts/Lufga-SemiBold.woff2") format("woff2"), 22 | url("../fonts/Lufga-SemiBold.woff") format("woff"); 23 | font-weight: 600; 24 | font-style: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: "Lufga"; 30 | src: url("../fonts/Lufga-Medium.woff2") format("woff2"), 31 | url("../fonts/Lufga-Medium.woff") format("woff"); 32 | font-weight: 500; 33 | font-style: normal; 34 | font-display: swap; 35 | } 36 | -------------------------------------------------------------------------------- /assets/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin border-radius($radius) { 2 | border-radius: $radius; 3 | -webkit-border-radius: $radius; 4 | -moz-border-radius: $radius; 5 | } 6 | // @include border-radius(4px); 7 | 8 | @mixin transition($args...) { 9 | transition: $args; 10 | -webkit-transition: $args; 11 | -moz-transition: $args; 12 | -ms-transition: $args; 13 | -o-transition: $args; 14 | } 15 | // @include transition(all 0.3s ease-in-out); 16 | 17 | @mixin box-shadow($args...) { 18 | box-shadow: $args; 19 | -webkit-box-shadow: $args; 20 | -moz-box-shadow: $args; 21 | } 22 | // @include box-shadow(); 23 | 24 | @mixin transform-rotate($args...) { 25 | -webkit-transform: rotate($args); 26 | -moz-transform: rotate($args); 27 | -o-transform: rotate($args); 28 | -ms-transform: rotate($args); 29 | transform: rotate($args); 30 | } 31 | // @include transform-rotate(); 32 | 33 | @mixin transform($args...) { 34 | -webkit-transform: ($args); 35 | -moz-transform: ($args); 36 | -ms-transform: ($args); 37 | -o-transform: ($args); 38 | transform: ($args); 39 | } 40 | // @include transform(); 41 | 42 | @mixin transition-delay($args...) { 43 | -webkit-transition-delay: ($args); 44 | -moz-transition-delay: ($args); 45 | -o-transition-delay: ($args); 46 | transition-delay: ($args); 47 | } 48 | // @include transition-delay(); 49 | 50 | @mixin optional-at-root($sel) { 51 | @at-root #{if(not &, $sel, selector-append(&, $sel))} { 52 | @content; 53 | } 54 | } 55 | 56 | @mixin placeholder { 57 | @include optional-at-root("::-webkit-input-placeholder") { 58 | @content; 59 | } 60 | 61 | @include optional-at-root(":-moz-placeholder") { 62 | @content; 63 | } 64 | 65 | @include optional-at-root("::-moz-placeholder") { 66 | @content; 67 | } 68 | 69 | @include optional-at-root(":-ms-input-placeholder") { 70 | @content; 71 | } 72 | } 73 | // @include placeholder{value}; 74 | 75 | // media min & max 76 | @mixin breakpoint($max_min, $point) { 77 | @if $max_min==min { 78 | @media (min-width: ($point + px)) { 79 | @content; 80 | } 81 | } 82 | @if $max_min==max { 83 | @media (max-width: ($point + px)) { 84 | @content; 85 | } 86 | } 87 | } 88 | // @include breakpoint( max , 767){ 89 | // padding: 10px 25px; 90 | // } 91 | // @include breakpoint( min , 1366){ 92 | // padding: 15px 35px; 93 | // } 94 | 95 | @mixin breakpoint-between($lower, $upper) { 96 | @media (min-width: ($lower + px)) and (max-width: ($upper + px)) { 97 | @content; 98 | } 99 | } 100 | 101 | // @include breakpoint-between( 1025 , 1140){ 102 | // width: 524px 103 | // } 104 | 105 | // max width mixin 106 | $max-width-map: ( 107 | 200: 200px, 108 | 250: 250px, 109 | 300: 300px, 110 | 350: 350px, 111 | 400: 400px, 112 | 450: 450px, 113 | 500: 500px, 114 | 550: 550px, 115 | 600: 600px, 116 | 650: 650px, 117 | 700: 700px, 118 | 750: 750px, 119 | 800: 800px, 120 | 850: 850px, 121 | 900: 900px, 122 | 950: 950px, 123 | 1000: 1000px, 124 | 1050: 1050px, 125 | ); 126 | 127 | @each $name, $width in $max-width-map { 128 | .mx-w-#{$name} { 129 | max-width: $width; 130 | } 131 | } 132 | 133 | // opacity mixin 134 | $opacity-map: ( 135 | 0: 0, 136 | 05: 0.05, 137 | 10: 0.1, 138 | 15: 0.15, 139 | 20: 0.2, 140 | 25: 0.25, 141 | 30: 0.3, 142 | 35: 0.35, 143 | 40: 0.4, 144 | 45: 0.45, 145 | 50: 0.5, 146 | 55: 0.55, 147 | 60: 0.6, 148 | 65: 0.65, 149 | 70: 0.7, 150 | 80: 0.8, 151 | 85: 0.85, 152 | 90: 0.9, 153 | 95: 0.95, 154 | 100: 1, 155 | ); 156 | 157 | @each $name, $opacity in $opacity-map { 158 | .opacity-#{$name} { 159 | opacity: $opacity; 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /assets/scss/_title.scss: -------------------------------------------------------------------------------- 1 | .h1 { 2 | font-size: 56px; 3 | font-weight: 600; 4 | color: $dark-color; 5 | @include breakpoint(max, 991) { 6 | font-size: 40px; 7 | } 8 | } 9 | .h1.large { 10 | font-size: 84px; 11 | line-height: 1.2; 12 | @include breakpoint(max, 1024) { 13 | font-size: 50px; 14 | } 15 | @include breakpoint(max, 767) { 16 | font-size: 40px; 17 | } 18 | } 19 | .h2 { 20 | font-size: 38px; 21 | font-weight: 600; 22 | color: $dark-color; 23 | @include breakpoint(max, 767) { 24 | font-size: 30px; 25 | } 26 | } 27 | .h3 { 28 | font-size: 28px; 29 | font-weight: 600; 30 | color: $dark-color; 31 | @include breakpoint(max, 991) { 32 | font-size: 24px; 33 | } 34 | } 35 | .h4 { 36 | font-size: 20px; 37 | font-weight: 600; 38 | color: $dark-color; 39 | @include breakpoint(max, 767) { 40 | font-size: 18px; 41 | } 42 | } 43 | .h5 { 44 | font-size: 18px; 45 | font-weight: 600; 46 | color: $dark-color; 47 | } 48 | 49 | .text-small { 50 | font-size: 14px; 51 | line-height: 26px; 52 | } 53 | .text-ex-small { 54 | font-size: 12px; 55 | line-height: 1.2; 56 | } 57 | .text-large { 58 | font-size: 18px; 59 | line-height: 1.6; 60 | } 61 | .text-ex-large { 62 | font-size: 22px; 63 | line-height: 36px; 64 | } 65 | 66 | .fw-medium { 67 | font-weight: 500; 68 | } 69 | 70 | .title-line { 71 | padding-bottom: 20px; 72 | position: relative; 73 | &:after { 74 | content: ""; 75 | width: 30px; 76 | height: 4px; 77 | @include border-radius(8px); 78 | position: absolute; 79 | left: 0; 80 | bottom: 5px; 81 | background-color: currentColor; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Override Bootstrap default variables here 2 | // Do not edit any of the files in /vendor/bootstrap/scss/! 3 | 4 | // Color Variables 5 | // Bootstrap Color Overrides 6 | 7 | $white: #fff !default; 8 | $gray-50: #fafafa !default; 9 | $gray-100: #f5f5f5 !default; 10 | $gray-200: #eeeeee !default; 11 | $gray-300: #e0e0e0 !default; 12 | $gray-400: #bdbdbd !default; 13 | $gray-500: #9e9e9e !default; 14 | $gray-600: #757575 !default; 15 | $gray-700: #616161 !default; 16 | $gray-800: #424242 !default; 17 | $gray-900: #212121 !default; 18 | $black: #000 !default; 19 | 20 | $blue: #4e73df !default; 21 | $indigo: #6610f2 !default; 22 | $purple: #6f42c1 !default; 23 | $pink: #e83e8c !default; 24 | $red: #ff001e !default; 25 | $orange: #fd7e14 !default; 26 | $yellow: #f6c23e !default; 27 | $green: #1cc88a !default; 28 | $teal: #20c9a6 !default; 29 | $cyan: #006064 !default; 30 | 31 | // scss-docs-start theme-colors-map 32 | $primary: #1daeff; 33 | $secondary: #d8127e; 34 | $skyblue: #53d8fb; 35 | $danger: #f74641; 36 | $warning: #ffa800; 37 | $info: #8950fc; 38 | $success: #1bc5bd; 39 | $light: #eeeeee; 40 | $dark: #010101; 41 | 42 | // Custom Colors 43 | $input-border-color: #d0d0e3; 44 | $input-border-hover-color: #757575; 45 | $input-label-color: #8c87a6; 46 | $body-bg-color: $gray-100; 47 | 48 | $color_link_water: #ecf1f8; 49 | $color_comet: #585981; 50 | $color_manatee: #8f90a6; 51 | $color_mischka: #dcdceb; 52 | 53 | // Brand Colors 54 | $brand-google: #ea4335 !default; 55 | $brand-facebook: #3b5998 !default; 56 | $brand-twitter: #1da1f2 !default; 57 | $brand-linkedin: #0a66c2 !default; 58 | $brand-instagram: #ec3397 !default; 59 | $brand-github: #000000 !default; 60 | $brand-pinterest: #bd081c !default; 61 | $brand-whatsapp: #25d366 !default; 62 | $brand-behance: #1769ff !default; 63 | $brand-dribbble: #ea4c89 !default; 64 | $brand-youtube: #ff0000 !default; 65 | -------------------------------------------------------------------------------- /assets/scss/components/_banner.scss: -------------------------------------------------------------------------------- 1 | .banner-wrap { 2 | position: relative; 3 | padding-bottom: 50px; 4 | @include breakpoint(max, 767) { 5 | padding-top: 50px; 6 | } 7 | .container { 8 | max-width: 1330px; 9 | } 10 | .banner-box { 11 | position: relative; 12 | background: $color_link_water; 13 | padding: 90px; 14 | @include border-radius(50px); 15 | @include breakpoint(max, 991) { 16 | padding: 40px 30px; 17 | @include border-radius(24px); 18 | } 19 | @include breakpoint(max, 767) { 20 | padding: 40px 15px 15px; 21 | } 22 | &__img { 23 | position: absolute; 24 | left: 0; 25 | top: 0; 26 | width: 100%; 27 | height: 100%; 28 | overflow: hidden; 29 | @include border-radius(50px); 30 | @include breakpoint(max, 991) { 31 | @include border-radius(24px); 32 | } 33 | img { 34 | width: 100%; 35 | height: 100%; 36 | object-fit: cover; 37 | } 38 | } 39 | &__content { 40 | position: relative; 41 | z-index: 1; 42 | @include breakpoint(max, 767) { 43 | padding: 0 15px; 44 | } 45 | } 46 | &__title { 47 | max-width: 490px; 48 | padding-bottom: 38px; 49 | } 50 | &__txt { 51 | color: $color_comet; 52 | max-width: 470px; 53 | padding-bottom: 60px; 54 | } 55 | } 56 | } 57 | 58 | .banner-tab-wrap { 59 | position: relative; 60 | z-index: 1; 61 | max-width: 920px; 62 | .nav { 63 | padding-left: 20px; 64 | .tab-item { 65 | font-size: 14px; 66 | line-height: 24px; 67 | font-weight: 500; 68 | text-transform: uppercase; 69 | letter-spacing: 0.2em; 70 | color: $color_manatee; 71 | padding: 8px 29px; 72 | border: 0; 73 | background: transparent; 74 | @include border-radius(15px 15px 0 0); 75 | @include transition(all 0.3s ease-in-out); 76 | @include breakpoint(max, 767) { 77 | padding: 8px 18px; 78 | } 79 | &:hover { 80 | color: $dark-color; 81 | } 82 | &.active { 83 | background: $white; 84 | color: $dark-color; 85 | } 86 | } 87 | } 88 | .tab-content { 89 | background: rgba($white, 0.8); 90 | box-shadow: 0px 30px 60px -15px rgba(143, 144, 188, 0.15); 91 | backdrop-filter: blur(3px); 92 | padding: 20px 30px; 93 | @include border-radius(20px 20px 20px 20px); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /assets/scss/components/_countries-section.scss: -------------------------------------------------------------------------------- 1 | .countries-wrap { 2 | padding: 50px 0 100px; 3 | @include breakpoint(max, 767) { 4 | padding-bottom: 50px; 5 | } 6 | &__title { 7 | padding-bottom: 56px; 8 | } 9 | } 10 | 11 | .countries-list { 12 | ul { 13 | li { 14 | padding-bottom: 30px; 15 | } 16 | } 17 | } 18 | 19 | .countries-box { 20 | position: relative; 21 | @include transition(all 0.3s ease-in-out); 22 | @include border-radius(30px); 23 | &:hover { 24 | @include transform(translate(0px, -20px)); 25 | @include box-shadow(0px 17px 50px rgba(143, 144, 166, 0.32)); 26 | } 27 | &__title { 28 | position: absolute; 29 | width: 100%; 30 | top: 48px; 31 | left: 0; 32 | text-align: center; 33 | font-size: 24px; 34 | font-weight: 600; 35 | color: $dark-color; 36 | letter-spacing: 0.2em; 37 | text-transform: uppercase; 38 | } 39 | &__img { 40 | img { 41 | width: 100%; 42 | @include border-radius(30px); 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /assets/scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer-wrap { 2 | padding-top: 50px; 3 | padding-bottom: 60px; 4 | @include breakpoint(max, 767) { 5 | padding-bottom: 20px; 6 | } 7 | } 8 | 9 | .quick-links { 10 | padding-top: 15px; 11 | @include breakpoint(max, 767) { 12 | padding-top: 0; 13 | } 14 | ul { 15 | li { 16 | padding-bottom: 20px; 17 | @include breakpoint(max, 767) { 18 | padding-bottom: 10px; 19 | } 20 | a { 21 | display: inline-block; 22 | font-size: 18px; 23 | line-height: 28px; 24 | color: $dark-color; 25 | @include transition(all 0.3s ease-in-out); 26 | &:hover { 27 | color: $primary; 28 | } 29 | @include breakpoint(max, 767) { 30 | font-size: 16px; 31 | } 32 | } 33 | } 34 | } 35 | } 36 | 37 | .subscribe-form-wrap { 38 | padding-top: 15px; 39 | .subscribe-form { 40 | position: relative; 41 | .form-group { 42 | position: relative; 43 | .form-control { 44 | padding-right: 55px; 45 | } 46 | .cta { 47 | position: absolute; 48 | right: 10px; 49 | top: 0px; 50 | height: 52px; 51 | display: flex; 52 | align-items: center; 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /assets/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | .header-wrap { 2 | position: relative; 3 | height: 134px; 4 | @include transition(all 0.3s ease-in-out); 5 | @include breakpoint(max, 767) { 6 | height: 90px; 7 | } 8 | header { 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | height: 134px; 14 | display: flex; 15 | align-items: center; 16 | z-index: 123; 17 | @include transition(all 0.3s ease-in-out); 18 | @include breakpoint(max, 767) { 19 | height: 90px; 20 | background: $white; 21 | @include box-shadow(0px 17px 50px rgba(143, 144, 166, 0.32)); 22 | } 23 | } 24 | .container { 25 | display: flex; 26 | align-items: center; 27 | justify-content: space-between; 28 | } 29 | .logo { 30 | a { 31 | display: inline-block; 32 | } 33 | } 34 | .menu-toggle { 35 | width: 45px; 36 | height: 45px; 37 | border: 0; 38 | background: $white; 39 | display: none; 40 | align-items: center; 41 | justify-content: center; 42 | font-size: 24px; 43 | position: relative; 44 | @include box-shadow(0px 17px 50px rgba(143, 144, 166, 0.32)); 45 | i { 46 | @include transition(all 0.3s ease-in-out); 47 | } 48 | .close-icon { 49 | position: absolute; 50 | left: 0; 51 | top: 0; 52 | width: 100%; 53 | height: 100%; 54 | opacity: 0; 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | } 59 | &.open { 60 | .close-icon { 61 | opacity: 1; 62 | } 63 | .bar-icon { 64 | opacity: 0; 65 | } 66 | } 67 | @include breakpoint(max, 767) { 68 | display: flex; 69 | } 70 | } 71 | .header-right { 72 | display: flex; 73 | align-items: center; 74 | @include breakpoint(max, 767) { 75 | position: fixed; 76 | right: -280px; 77 | top: 90px; 78 | width: 280px; 79 | height: calc(100% - 90px); 80 | background: $white; 81 | display: block; 82 | padding: 30px; 83 | overflow: auto; 84 | @include transition(all 0.3s ease-in-out); 85 | @include box-shadow(0px 17px 50px rgba(143, 144, 166, 0.32)); 86 | &.show { 87 | right: 0; 88 | } 89 | } 90 | .cta { 91 | padding-left: 30px; 92 | @include breakpoint(max, 1024) { 93 | padding-left: 15px; 94 | } 95 | @include breakpoint(max, 767) { 96 | padding-left: 0; 97 | padding-top: 20px; 98 | } 99 | .btn { 100 | @include breakpoint(max, 767) { 101 | display: block; 102 | width: 100%; 103 | } 104 | } 105 | } 106 | } 107 | .menu { 108 | ul { 109 | display: flex; 110 | @include breakpoint(max, 767) { 111 | display: block; 112 | } 113 | li { 114 | padding: 0 30px; 115 | @include breakpoint(max, 1024) { 116 | padding: 0 15px; 117 | } 118 | @include breakpoint(max, 767) { 119 | padding: 15px 0; 120 | } 121 | a { 122 | font-size: 16px; 123 | line-height: 20px; 124 | text-transform: uppercase; 125 | color: $dark-color; 126 | letter-spacing: 0.2em; 127 | font-weight: 500; 128 | @include transition(all 0.3s ease-in-out); 129 | &:hover, 130 | &.active { 131 | color: $primary; 132 | } 133 | @include breakpoint(max, 1024) { 134 | font-size: 14px; 135 | } 136 | @include breakpoint(max, 767) { 137 | font-size: 16px; 138 | } 139 | } 140 | } 141 | } 142 | } 143 | &.shrink-nav { 144 | height: 90px; 145 | header { 146 | height: 90px; 147 | background: $white; 148 | @include box-shadow(0px 17px 50px rgba(143, 144, 166, 0.32)); 149 | } 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /assets/scss/components/_recently-added.scss: -------------------------------------------------------------------------------- 1 | .recently-added-wrap { 2 | padding-bottom: 90px; 3 | @include breakpoint(max, 767) { 4 | padding-bottom: 20px; 5 | } 6 | &__title { 7 | padding-bottom: 36px; 8 | } 9 | } 10 | 11 | .property-list { 12 | ul { 13 | li { 14 | padding-bottom: 30px; 15 | } 16 | } 17 | } 18 | 19 | .property-box { 20 | display: flex; 21 | border: 1px solid $color_mischka; 22 | padding: 30px; 23 | @include border-radius(30px); 24 | @include transition(all 0.3s ease-in-out); 25 | @include breakpoint(max, 1024) { 26 | flex-wrap: wrap; 27 | } 28 | @include breakpoint(max, 767) { 29 | padding: 15px; 30 | } 31 | &:hover { 32 | border-color: $primary; 33 | @include transform(translate(0px, -10px)); 34 | @include box-shadow(0px 17px 50px rgba(143, 144, 166, 0.32)); 35 | } 36 | &__left { 37 | width: 158px; 38 | flex-shrink: 0; 39 | @include breakpoint(max, 1024) { 40 | width: 100%; 41 | height: 158px; 42 | } 43 | img { 44 | width: 100%; 45 | height: 100%; 46 | object-fit: cover; 47 | @include border-radius(20px); 48 | } 49 | } 50 | &__right { 51 | padding-left: 36px; 52 | width: 100%; 53 | display: flex; 54 | flex-direction: column; 55 | @include breakpoint(max, 1024) { 56 | padding-left: 0; 57 | padding-top: 20px; 58 | } 59 | } 60 | &__title { 61 | padding-bottom: 18px; 62 | line-height: 36px; 63 | a { 64 | color: $dark-color; 65 | @include transition(all 0.3s ease-in-out); 66 | &:hover { 67 | color: $primary; 68 | } 69 | } 70 | } 71 | &__amenities { 72 | font-size: 18px; 73 | font-weight: 500; 74 | color: $color_manatee; 75 | padding-bottom: 20px; 76 | @include breakpoint(max, 767) { 77 | font-size: 16px; 78 | padding-bottom: 10px; 79 | } 80 | span { 81 | display: inline-block; 82 | margin-bottom: 10px; 83 | &:not(:last-child) { 84 | margin-right: 30px; 85 | @include breakpoint(max, 767) { 86 | margin-right: 15px; 87 | } 88 | } 89 | } 90 | } 91 | &__post-price { 92 | display: flex; 93 | justify-content: space-between; 94 | align-items: center; 95 | margin-top: auto; 96 | } 97 | &__post-by { 98 | font-size: 18px; 99 | font-weight: 500; 100 | color: $color_manatee; 101 | @include breakpoint(max, 767) { 102 | font-size: 16px; 103 | } 104 | a { 105 | color: $color_manatee; 106 | &:hover { 107 | color: $primary; 108 | } 109 | } 110 | } 111 | &__price { 112 | flex-shrink: 0; 113 | .badge { 114 | background: $color_manatee; 115 | padding: 8px 19px; 116 | font-size: 18px; 117 | line-height: 1.3; 118 | font-weight: 500; 119 | @include border-radius(10px); 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /assets/scss/components/_social-list.scss: -------------------------------------------------------------------------------- 1 | .social-list { 2 | ul { 3 | display: flex; 4 | li { 5 | &:not(:last-child) { 6 | margin-right: 28px; 7 | } 8 | a { 9 | font-size: 24px; 10 | line-height: 1; 11 | display: block; 12 | i { 13 | display: block; 14 | } 15 | &.facebook { 16 | color: $brand-facebook; 17 | } 18 | &.twitter { 19 | color: $brand-twitter; 20 | } 21 | &.instagram { 22 | color: $brand-instagram; 23 | } 24 | &.linkedin { 25 | color: $brand-linkedin; 26 | } 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /assets/scss/components/form/_checkbox.scss: -------------------------------------------------------------------------------- 1 | .form-check { 2 | padding-left: 30px; 3 | min-height: 20px; 4 | .form-check-input { 5 | margin-left: -30px; 6 | } 7 | } 8 | .form-check-input { 9 | width: 20px; 10 | height: 20px; 11 | border-color: $input-border-color; 12 | margin-top: 0; 13 | box-shadow: none; 14 | @include border-radius(4px); 15 | @include transition(all 0.3s ease-in-out); 16 | &:hover { 17 | border: 1px solid $primary; 18 | @include box-shadow(inset 0 0 0 1px $primary); 19 | } 20 | &:checked { 21 | &:focus { 22 | border: 1px solid $primary; 23 | } 24 | } 25 | &:focus { 26 | box-shadow: none; 27 | border: 1px solid $input-border-color; 28 | &:hover { 29 | @include box-shadow(inset 0 0 0 1px $primary); 30 | } 31 | } 32 | &.secondary-checkbox { 33 | &:hover { 34 | border: 1px solid $secondary; 35 | @include box-shadow(inset 0 0 0 1px $secondary); 36 | } 37 | &:checked { 38 | background-color: $secondary; 39 | border-color: $secondary; 40 | &:focus { 41 | border: 1px solid $secondary; 42 | } 43 | } 44 | &:focus { 45 | box-shadow: none; 46 | border: 1px solid $input-border-color; 47 | &:hover { 48 | @include box-shadow(inset 0 0 0 1px $secondary); 49 | } 50 | } 51 | } 52 | &.skyblue-checkbox { 53 | &:hover { 54 | border: 1px solid $skyblue; 55 | @include box-shadow(inset 0 0 0 1px $skyblue); 56 | } 57 | &:checked { 58 | background-color: $skyblue; 59 | border-color: $skyblue; 60 | &:focus { 61 | border: 1px solid $skyblue; 62 | } 63 | } 64 | &:focus { 65 | box-shadow: none; 66 | border: 1px solid $input-border-color; 67 | &:hover { 68 | @include box-shadow(inset 0 0 0 1px $skyblue); 69 | } 70 | } 71 | } 72 | &[type="checkbox"] { 73 | @include border-radius(4px); 74 | } 75 | } 76 | .form-check-label { 77 | font-size: 14px; 78 | color: $gray-700; 79 | a { 80 | color: $secondary; 81 | font-weight: 700; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /assets/scss/components/form/_form.scss: -------------------------------------------------------------------------------- 1 | @import "./checkbox"; 2 | 3 | .form-wrap { 4 | .form-group { 5 | margin-bottom: 20px; 6 | } 7 | .form-label { 8 | font-size: 14px; 9 | font-weight: 500; 10 | color: $dark-color; 11 | margin-bottom: 6px; 12 | } 13 | .form-control { 14 | height: 52px; 15 | width: 100%; 16 | padding: 0px 20px; 17 | border: 1px solid $input-border-color; 18 | font-size: 14px; 19 | font-weight: 400; 20 | color: $color_manatee; 21 | @include border-radius(15px); 22 | @include transition(all 0.3s ease-in-out); 23 | @include placeholder { 24 | color: $color_manatee; 25 | } 26 | &:hover { 27 | border-color: $input-border-hover-color; 28 | } 29 | &:focus { 30 | border: 1px solid $primary; 31 | box-shadow: none; 32 | // @include box-shadow(inset 0 0 0 1px $primary); 33 | } 34 | &.invalid { 35 | border: 1px solid $red; 36 | @include box-shadow(inset 0 0 0 1px $red); 37 | } 38 | } 39 | textarea { 40 | &.form-control { 41 | height: 160px; 42 | padding-top: 15px; 43 | } 44 | } 45 | select { 46 | &.form-control { 47 | background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7952 3.35258L7.00067 9.14854L1.20611 3.35188C0.929841 3.07562 0.482943 3.07562 0.206677 3.35188C-0.0688922 3.62815 -0.0688922 4.07575 0.206677 4.35201L6.50063 10.6481C6.7762 10.9243 7.2238 10.9243 7.49937 10.6481L13.7933 4.35207C14.0689 4.0758 14.0689 3.62751 13.7933 3.35124C13.5185 3.07631 13.0708 3.07631 12.7952 3.35258Z' fill='%235A5C69'/%3E%3C/svg%3E%0A"); 48 | background-position: center right 15px; 49 | background-repeat: no-repeat; 50 | } 51 | } 52 | .form-text { 53 | font-size: 15px; 54 | font-weight: 400; 55 | color: $gray-900; 56 | a { 57 | color: $primary; 58 | text-decoration: underline; 59 | display: inline; 60 | font-weight: 500; 61 | } 62 | } 63 | .form-action { 64 | padding-top: 15px; 65 | } 66 | .form-invalid-feedback { 67 | color: $red; 68 | font-size: 14px; 69 | padding: 10px 0 10px 0; 70 | font-weight: 500; 71 | } 72 | .input-group__item { 73 | position: relative; 74 | &.prepend { 75 | .form-control { 76 | padding-left: 60px; 77 | } 78 | .prepend__item { 79 | position: absolute; 80 | left: 0; 81 | top: 0; 82 | width: 54px; 83 | height: 54px; 84 | display: flex; 85 | align-items: center; 86 | justify-content: center; 87 | padding: 0; 88 | border: 0; 89 | background: transparent; 90 | color: $gray-800; 91 | svg { 92 | width: 18px; 93 | height: 18px; 94 | } 95 | } 96 | } 97 | } 98 | } 99 | 100 | .login-with-google { 101 | &__button { 102 | display: flex; 103 | justify-content: center; 104 | align-items: center; 105 | padding: 13px 10px; 106 | border: 1px solid $input-border-color; 107 | @include border-radius(30px); 108 | @include transition(all 0.3s ease-in-out); 109 | &:hover { 110 | background: $primary; 111 | border: 1px solid $primary; 112 | @include box-shadow(inset 0 0 0 1px $primary); 113 | } 114 | } 115 | &__icon { 116 | margin-right: 15px; 117 | } 118 | &__text { 119 | font-size: 16px; 120 | font-weight: 500; 121 | } 122 | } 123 | 124 | .or-line { 125 | position: relative; 126 | text-align: center; 127 | font-size: 14px; 128 | font-weight: 500; 129 | color: $gray-700; 130 | &:after { 131 | content: ""; 132 | height: 1px; 133 | background: $input-border-color; 134 | width: 100%; 135 | position: absolute; 136 | left: 0; 137 | top: 50%; 138 | margin-top: -1px; 139 | opacity: 0.5; 140 | } 141 | span { 142 | display: inline-block; 143 | background: $white; 144 | position: relative; 145 | z-index: 1; 146 | padding: 0px 10px 2px; 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "./custom-font"; 2 | @import "./variables"; 3 | @import "./bs-variables"; 4 | 5 | @import "../../node_modules/bootstrap/scss/bootstrap.scss"; 6 | 7 | @import "./mixins"; 8 | @import "./base"; 9 | @import "./title"; 10 | @import "./buttons"; 11 | 12 | // Component Style 13 | @import "./components/header"; 14 | @import "./components/footer"; 15 | @import "./components/banner"; 16 | @import "./components/countries-section"; 17 | @import "./components/recently-added"; 18 | @import "./components/form/form"; 19 | @import "./components/social-list"; 20 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var autoprefixer, 2 | browserSync, 3 | concat, 4 | config, 5 | gulp, 6 | imagemin, 7 | minify, 8 | path, 9 | plumber, 10 | rename, 11 | sass, 12 | streamqueue, 13 | uglify, 14 | changed, 15 | reload; 16 | 17 | gulp = require("gulp"); 18 | sass = require("gulp-sass"); 19 | plumber = require("gulp-plumber"); 20 | rename = require("gulp-rename"); 21 | autoprefixer = require("gulp-autoprefixer"); 22 | concat = require("gulp-concat"); 23 | uglify = require("gulp-uglify"); 24 | imagemin = require("gulp-imagemin"); 25 | minify = require("gulp-clean-css"); 26 | streamqueue = require("streamqueue"); 27 | browserSync = require("browser-sync").create(); 28 | changed = require("gulp-changed"); 29 | reload = browserSync.reload; 30 | 31 | config = { 32 | nodeDir: "./node_modules/", 33 | }; 34 | 35 | var path = { 36 | styles: ["assets/scss/**/style.scss"], 37 | scripts: [ 38 | config.nodeDir + "jquery/dist/jquery.js", 39 | config.nodeDir + "bootstrap/dist/js/bootstrap.min.js", // bootstrap js 40 | "assets/js/setting.js", // all setting js 41 | ], 42 | fonts: ["assets/fonts/**/*.*"], 43 | images: "assets/images/**/*.*", 44 | php: ["*.html"], 45 | }; 46 | 47 | gulp.task("styles", function () { 48 | var stream; 49 | stream = streamqueue({ 50 | objectMode: true, 51 | }); 52 | stream.queue(gulp.src(path.styles)); 53 | return stream 54 | .done() 55 | .pipe(plumber()) 56 | .pipe(sass()) 57 | .pipe( 58 | autoprefixer({ 59 | browsers: ["last 2 versions"], 60 | cascade: false, 61 | }) 62 | ) 63 | .pipe(concat("style.css")) 64 | .pipe(gulp.dest("vendors/css/")) 65 | .pipe( 66 | minify({ 67 | keepSpecialComments: 0, 68 | }) 69 | ) 70 | .pipe( 71 | rename({ 72 | suffix: ".min", 73 | }) 74 | ) 75 | .pipe(plumber.stop()) 76 | .pipe(gulp.dest("vendors/css/")) 77 | .pipe( 78 | browserSync.reload({ 79 | stream: true, 80 | }) 81 | ); 82 | }); 83 | 84 | gulp.task("scripts", function () { 85 | var stream; 86 | stream = streamqueue({ 87 | objectMode: true, 88 | }); 89 | stream.queue(gulp.src(path.scripts)); 90 | return stream 91 | .done() 92 | .pipe(plumber()) 93 | .pipe(concat("script.js")) 94 | .pipe(gulp.dest("vendors/js/")) 95 | .pipe( 96 | rename({ 97 | suffix: ".min", 98 | }) 99 | ) 100 | .pipe(uglify()) 101 | .pipe(plumber.stop()) 102 | .pipe(gulp.dest("vendors/js/")) 103 | .pipe( 104 | browserSync.reload({ 105 | stream: true, 106 | }) 107 | ); 108 | }); 109 | 110 | gulp.task("images", function () { 111 | var stream; 112 | stream = streamqueue({ 113 | objectMode: true, 114 | }); 115 | stream.queue(gulp.src(path.images)); 116 | return stream 117 | .done() 118 | .pipe(changed("vendors/images/")) 119 | .pipe( 120 | imagemin({ 121 | optimizationLevel: 3, 122 | progressive: true, 123 | interlaced: true, 124 | }) 125 | ) 126 | .pipe(gulp.dest("vendors/images/")); 127 | }); 128 | 129 | gulp.task("php", function () { 130 | var stream; 131 | stream = streamqueue({ 132 | objectMode: true, 133 | }); 134 | stream.queue(gulp.src(path.php)); 135 | return stream.done().pipe( 136 | browserSync.reload({ 137 | stream: true, 138 | }) 139 | ); 140 | }); 141 | 142 | gulp.task("fonts", function () { 143 | var stream; 144 | stream = streamqueue({ 145 | objectMode: true, 146 | }); 147 | stream.queue(gulp.src(path.fonts)); 148 | return stream.done().pipe(gulp.dest("vendors/fonts/")); 149 | }); 150 | 151 | gulp.task("connect-sync", function (done) { 152 | browserSync.reload(); 153 | done(); 154 | browserSync.init({ 155 | proxy: "localhost/real-estate", // Change this value to match your local URL. 156 | socket: { 157 | domain: "localhost:3000", 158 | }, 159 | }); 160 | gulp.watch("*.html").on("change", reload); 161 | gulp.watch("assets/scss/**/*.*").on("change", reload); 162 | }); 163 | 164 | gulp.task("watch", function () { 165 | gulp.watch("assets/scss/**/*.*", gulp.series("styles")); 166 | gulp.watch("assets/fonts/**/*", gulp.series("fonts")); 167 | gulp.watch("assets/js/**/*.js", gulp.series("scripts")); 168 | }); 169 | 170 | gulp.task( 171 | "default", 172 | gulp.series( 173 | gulp.parallel("styles", "fonts", "scripts", ["connect-sync"]), 174 | function () { 175 | gulp.watch("assets/scss/**/*.*", gulp.series("styles")); 176 | gulp.watch("assets/fonts/**/*", gulp.series("fonts")); 177 | gulp.watch("assets/js/**/*.js", gulp.series("scripts")); 178 | } 179 | ) 180 | ); 181 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Real Estate Landing Page 8 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 | 21 | 26 | 27 | 31 |
32 | 33 |
34 | 40 |
41 | 42 | 43 |
44 | Log in 45 |
46 | 47 |
48 |
49 |
50 |
51 | 52 | 53 | 302 | 303 |
304 | 305 |
306 |
307 |
308 |
309 |

310 | We are available in many well-known countries 311 |

312 |
313 |
314 |
315 |
316 | 317 |
    318 |
  • 319 |
    320 |
    America
    321 |
    322 | 323 |
    324 |
    325 |
    • 326 |
  • 327 |
    328 |
    Spain
    329 |
    330 | 331 |
    332 |
    333 |
    • 334 |
  • 335 |
    336 |
    London
    337 |
    338 | 339 |
    340 |
    341 |
    • 342 |
  • 343 |
    344 |
    France
    345 |
    346 | 347 |
    348 |
    349 |
    • 350 |
351 | 352 |
353 |
354 |
355 | 356 | 357 |
358 |
359 |
362 |

Recently Added

363 |
364 | See all 365 |
366 |
367 | 368 |
369 |
    370 |
  • 371 |
    372 |
    373 | 374 |
    375 |
    376 |
    377 | 103/143 West Street, Crows Nest 378 |
    379 |
    380 | 10 Bedroom 381 | 150 M 382 | 2 Garage 383 |
    384 |
    385 |
    386 | Posted by X Builder 387 |
    388 |
    389 | $45,545 390 |
    391 |
    392 |
    393 |
    394 |
    • 395 |
  • 396 |
    397 |
    398 | 399 |
    400 |
    401 |
    402 | 103/143 West Street, Crows Nest 403 |
    404 |
    405 | 10 Bedroom 406 | 150 M 407 | 2 Garage 408 |
    409 |
    410 |
    411 | Posted by X Builder 412 |
    413 |
    414 | $45,545 415 |
    416 |
    417 |
    418 |
    419 |
    • 420 |
  • 421 |
    422 |
    423 | 424 |
    425 |
    426 |
    427 | 103/143 West Street, Crows Nest 428 |
    429 |
    430 | 10 Bedroom 431 | 150 M 432 | 2 Garage 433 |
    434 |
    435 |
    436 | Posted by X Builder 437 |
    438 |
    439 | $45,545 440 |
    441 |
    442 |
    443 |
    444 |
    • 445 |
  • 446 |
    447 |
    448 | 449 |
    450 |
    451 |
    452 | 103/143 West Street, Crows Nest 453 |
    454 |
    455 | 10 Bedroom 456 | 150 M 457 | 2 Garage 458 |
    459 |
    460 |
    461 | Posted by X Builder 462 |
    463 |
    464 | $45,545 465 |
    466 |
    467 |
    468 |
    469 |
    • 470 |
  • 471 |
    472 |
    473 | 474 |
    475 |
    476 |
    477 | 103/143 West Street, Crows Nest 478 |
    479 |
    480 | 10 Bedroom 481 | 150 M 482 | 2 Garage 483 |
    484 |
    485 |
    486 | Posted by X Builder 487 |
    488 |
    489 | $45,545 490 |
    491 |
    492 |
    493 |
    494 |
    • 495 |
  • 496 |
    497 |
    498 | 499 |
    500 |
    501 |
    502 | 103/143 West Street, Crows Nest 503 |
    504 |
    505 | 10 Bedroom 506 | 150 M 507 | 2 Garage 508 |
    509 |
    510 |
    511 | Posted by X Builder 512 |
    513 |
    514 | $45,545 515 |
    516 |
    517 |
    518 |
    519 |
    • 520 |
521 |
522 |
523 |
524 | 525 | 553 | 554 |
555 | 680 |
681 | 682 | 683 | 684 | 685 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Real-Estate-Property-Landing-Webpage", 3 | "version": "1.0.0", 4 | "description": "Real Estate Property Landing Webpage", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "browser-sync": "^2.26.13", 16 | "gulp": "^4.0.2", 17 | "gulp-autoprefixer": "^4.0.0", 18 | "gulp-changed": "^3.1.1", 19 | "gulp-clean-css": "^3.4.1", 20 | "gulp-coffee": "^2.3.2", 21 | "gulp-concat": "^2.6.0", 22 | "gulp-imagemin": "^3.4.0", 23 | "gulp-install": "^1.1.0", 24 | "gulp-plumber": "^1.1.0", 25 | "gulp-rename": "^1.2.2", 26 | "gulp-sass": "^3.1.0", 27 | "gulp-uglify": "^3.0.0", 28 | "jquery": "^3.5.1", 29 | "streamqueue": "^1.1.1" 30 | }, 31 | "dependencies": { 32 | "bootstrap": "^5.1.0", 33 | "graceful-fs": "^4.2.3", 34 | "gulp-install": "^1.1.0", 35 | "install": "^0.12.1", 36 | "jquery-validation": "^1.19.3", 37 | "node-sass": "^5.0.0", 38 | "npm": "^6.14.11", 39 | "onscreen": "^1.1.3" 40 | } 41 | } -------------------------------------------------------------------------------- /vendors/fonts/Lufga-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/fonts/Lufga-Bold.woff -------------------------------------------------------------------------------- /vendors/fonts/Lufga-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/fonts/Lufga-Bold.woff2 -------------------------------------------------------------------------------- /vendors/fonts/Lufga-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/fonts/Lufga-Medium.woff -------------------------------------------------------------------------------- /vendors/fonts/Lufga-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/fonts/Lufga-Medium.woff2 -------------------------------------------------------------------------------- /vendors/fonts/Lufga-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/fonts/Lufga-Regular.woff -------------------------------------------------------------------------------- /vendors/fonts/Lufga-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/fonts/Lufga-Regular.woff2 -------------------------------------------------------------------------------- /vendors/fonts/Lufga-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/fonts/Lufga-SemiBold.woff -------------------------------------------------------------------------------- /vendors/fonts/Lufga-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/fonts/Lufga-SemiBold.woff2 -------------------------------------------------------------------------------- /vendors/images/banner-image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/images/banner-image-2.jpg -------------------------------------------------------------------------------- /vendors/images/banner-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/images/banner-image.jpg -------------------------------------------------------------------------------- /vendors/images/countrie-img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/images/countrie-img-1.jpg -------------------------------------------------------------------------------- /vendors/images/countrie-img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/images/countrie-img-2.jpg -------------------------------------------------------------------------------- /vendors/images/countrie-img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/images/countrie-img-3.jpg -------------------------------------------------------------------------------- /vendors/images/countrie-img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dropways/Real-Estate-Property-Landing-Webpage/44f87faf5ab1fcfd6f1d00e49b3d448290bd5daa/vendors/images/countrie-img-4.jpg -------------------------------------------------------------------------------- /vendors/images/logo.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------