├── images ├── banner.png ├── house1.png ├── house2.png ├── house3.png ├── banner1.png ├── area.svg ├── bed.svg ├── arrow.svg ├── size.svg ├── home1.svg ├── location.svg └── money.svg ├── README.md ├── app.js ├── media.css ├── index.html └── style.css /images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abirhasn07/T-House/HEAD/images/banner.png -------------------------------------------------------------------------------- /images/house1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abirhasn07/T-House/HEAD/images/house1.png -------------------------------------------------------------------------------- /images/house2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abirhasn07/T-House/HEAD/images/house2.png -------------------------------------------------------------------------------- /images/house3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abirhasn07/T-House/HEAD/images/house3.png -------------------------------------------------------------------------------- /images/banner1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abirhasn07/T-House/HEAD/images/banner1.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | House Rent Website Using HTML ,CSS & GSAP 2 | ![T-House](https://user-images.githubusercontent.com/75903935/167697865-aad5f60a-6a9c-484d-8bdb-09c9443a286f.png) 3 | -------------------------------------------------------------------------------- /images/area.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /images/bed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/size.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/home1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /images/location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const line1=document.querySelector('.line1'); 2 | const line2=document.querySelector('.line2'); 3 | const line3=document.querySelector('.line3'); 4 | const sidebar=document.querySelector('.nav-list'); 5 | 6 | 7 | const showMenu=()=>{ 8 | line1.classList.toggle('active'); 9 | line2.classList.toggle('active'); 10 | line3.classList.toggle('active'); 11 | sidebar.classList.toggle("active") 12 | 13 | } 14 | 15 | 16 | TweenMax.from('.navbar',1,{ 17 | delay:.3, 18 | x:-40, 19 | opacity:0, 20 | ease:Expo.easeInOut 21 | }) 22 | TweenMax.from('.header-headline',2,{ 23 | delay:.5, 24 | y:80, 25 | opacity:0, 26 | ease:Expo.easeInOut 27 | }) 28 | TweenMax.from('.header-subtitle',3,{ 29 | delay:.5, 30 | y:20, 31 | opacity:0, 32 | ease:Expo.easeInOut 33 | }) 34 | TweenMax.from('.cta',4,{ 35 | delay:.5, 36 | y:20, 37 | opacity:0, 38 | ease:Expo.easeInOut 39 | }) 40 | TweenMax.from('form',5,{ 41 | delay:0.3, 42 | y:80, 43 | opacity:0, 44 | ease:Expo.easeInOut 45 | }) 46 | TweenMax.from('.product-info',6,{ 47 | delay:0.5, 48 | x:-100, 49 | opacity:0, 50 | ease:Expo.easeInOut 51 | }) 52 | TweenMax.from('.product-card',7,{ 53 | delay:0.5, 54 | y:200, 55 | opacity:0, 56 | ease:Expo.easeInOut 57 | }) -------------------------------------------------------------------------------- /images/money.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /media.css: -------------------------------------------------------------------------------- 1 | @media (max-width:600px) { 2 | .navbar { 3 | 4 | box-shadow: 2px 2px 2px rgba(80, 80, 80, 0.15); 5 | min-height: 80px; 6 | z-index: 9999; 7 | } 8 | 9 | .logo { 10 | color: #fff; 11 | } 12 | 13 | 14 | 15 | 16 | .nav-list { 17 | position: absolute; 18 | flex-direction: column; 19 | align-items: start; 20 | top: -50vh; 21 | gap: 2rem; 22 | left: 0%; 23 | padding-left: 0; 24 | transition: opacity 200ms ease-in-out; 25 | background-color: #505050; 26 | width: 100%; 27 | opacity: 0; 28 | justify-content: start; 29 | 30 | 31 | 32 | 33 | } 34 | 35 | .nav-list :last-child { 36 | padding-bottom: 1rem; 37 | 38 | } 39 | 40 | .nav-list.active { 41 | opacity: 1; 42 | top: 60px; 43 | padding-left: 1rem; 44 | padding-top: 1rem; 45 | z-index: 9999; 46 | 47 | } 48 | 49 | 50 | .contact { 51 | background-color: transparent; 52 | padding-left: 0; 53 | } 54 | 55 | .mobile-menu { 56 | display: block; 57 | position: relative; 58 | height: 35px; 59 | width: 35px; 60 | /* background-color: rgb(224, 228, 13); */ 61 | display: flex; 62 | justify-content: center; 63 | align-items: center; 64 | flex-direction: column; 65 | gap: 0.5rem; 66 | margin-right: 1rem; 67 | 68 | } 69 | 70 | .line { 71 | width: 90%; 72 | height: 4px; 73 | background-color: #fff; 74 | border-radius: 5px; 75 | position: absolute; 76 | transition: transform 300ms ease-in-out; 77 | } 78 | 79 | .line1 { 80 | top: 3px; 81 | } 82 | 83 | .line1.active { 84 | transform: rotate(49deg); 85 | top: 15px; 86 | } 87 | 88 | .line2.active { 89 | transform: translateX(30px); 90 | opacity: 0; 91 | } 92 | 93 | .line3 { 94 | bottom: 3px; 95 | 96 | } 97 | 98 | .line3.active { 99 | 100 | transform: rotate(-49deg); 101 | bottom: 16px; 102 | 103 | } 104 | 105 | 106 | 107 | 108 | 109 | .header { 110 | height: 600px; 111 | /* z-index: -1; */ 112 | } 113 | 114 | .header.container { 115 | width: 100%; 116 | z-index: -99; 117 | } 118 | .header-info{ 119 | z-index: 989; 120 | } 121 | 122 | .header-headline { 123 | font-size: 2.5rem; 124 | /* text-align: left; */ 125 | width: 100%; 126 | padding: 0; 127 | line-height: 140%; 128 | font-weight: 900; 129 | } 130 | 131 | .header-subtitle { 132 | width: 100%; 133 | font-size: 0.825rem; 134 | padding: 1rem; 135 | } 136 | 137 | .cta { 138 | width: 100px; 139 | font-size: 0.825rem; 140 | } 141 | 142 | form{ 143 | width: 100%; 144 | display: block; 145 | margin-top: -100px; 146 | border-radius: 0; 147 | } 148 | form .container{ 149 | width: 100%; 150 | border-top-right-radius: 0; 151 | border-top-left-radius: 0; 152 | box-shadow: 0px 5px 10px rgba(80, 80, 80, 0.15); 153 | padding-block: 2rem; 154 | } 155 | 156 | .input{ 157 | flex-basis: 70%; 158 | } 159 | #product { 160 | 161 | } 162 | 163 | .product-info{ 164 | width: 90%; 165 | flex-direction: column; 166 | justify-content: center; 167 | /* background-color: red; */ 168 | } 169 | 170 | .product-info .product-title{ 171 | font-size: 1.5rem; 172 | width: 100%; 173 | flex-basis: 100%; 174 | text-align: center; 175 | } 176 | .product-btn{ 177 | width: 350px; 178 | } 179 | #product .container{ 180 | gap: 2rem; 181 | } 182 | 183 | .product-card{ 184 | flex-basis: 100%; 185 | } 186 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | House Rent Services 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 38 | 39 | 40 | 41 |
42 |
43 |
44 |

your perfect home waiting for you

45 |

46 | we help you get your dream house with us. 47 | We are professional house consultant 48 |

49 | 50 | Explore Now 51 |
52 |
53 |
54 | 55 | 56 | 57 |
58 |
59 |
60 | 61 | 62 |
63 |
64 | 65 | 66 |
67 |
68 | 69 | 70 |
71 |
72 | 73 | 74 |
75 |
76 |
77 | 78 | 79 | 80 |
81 |
82 |

83 | our Popular Residence 84 |

85 | 86 | 87 | Explore All 88 | 89 | 90 |
91 |
92 |
93 | 94 |
95 | 96 |
97 | 98 |

jakarta barat indonesia

99 |
100 |
101 |
102 | 103 |

4 Bed

104 |
105 |
106 | 107 |

10x10m

108 |
109 |
110 | 111 |

14000M

112 |
113 |
114 |
115 |

$540000

116 | Book Now 117 |
118 | 119 |
120 |
121 |
122 | 123 |
124 | 125 |
126 | 127 |

jakarta barat indonesia

128 |
129 |
130 |
131 | 132 |

4 Bed

133 |
134 |
135 | 136 |

10x10m

137 |
138 |
139 | 140 |

14000M

141 |
142 |
143 |
144 |

$540000

145 | Book Now 146 |
147 | 148 |
149 |
150 |
151 | 152 |
153 | 154 |
155 | 156 |

jakarta barat indonesia

157 |
158 |
159 |
160 | 161 |

4 Bed

162 |
163 |
164 | 165 |

10x10m

166 |
167 |
168 | 169 |

14000M

170 |
171 |
172 |
173 |

$540000

174 | Book Now 175 |
176 | 177 |
178 |
179 |
180 |
181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* google font */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap'); 3 | /* google font */ 4 | 5 | /* 6 | 2. Remove default margin 7 | */ 8 | * { 9 | margin: 0; 10 | } 11 | 12 | /* 13 | 3. Allow percentage-based heights in the application 14 | */ 15 | html, 16 | body { 17 | height: 100%; 18 | font-family: 'Poppins', sans-serif; 19 | font-size: 16px; 20 | } 21 | 22 | /* 23 | Typographic tweaks! 24 | 4. Add accessible line-height 25 | 5. Improve text rendering 26 | */ 27 | body { 28 | line-height: 1.5; 29 | -webkit-font-smoothing: antialiased; 30 | 31 | 32 | } 33 | 34 | /* 35 | 6. Improve media defaults 36 | */ 37 | img, 38 | picture, 39 | video, 40 | canvas, 41 | svg { 42 | display: block; 43 | max-width: 100%; 44 | } 45 | 46 | /* 47 | 7. Remove built-in form typography styles 48 | */ 49 | input, 50 | button, 51 | textarea, 52 | select { 53 | font: inherit; 54 | } 55 | 56 | /* 57 | 8. Avoid text overflows 58 | */ 59 | p, 60 | h1, 61 | h2, 62 | h3, 63 | h4, 64 | h5, 65 | h6 { 66 | overflow-wrap: break-word; 67 | } 68 | 69 | li { 70 | list-style: none; 71 | } 72 | 73 | a { 74 | text-decoration: none; 75 | color: inherit; 76 | } 77 | 78 | /* navbar style */ 79 | nav { 80 | width: 100%; 81 | max-width: 1980px; 82 | position: absolute; 83 | inset: 0 0 100% 0; 84 | 85 | } 86 | 87 | nav .container { 88 | width: 90%; 89 | margin: 0 auto; 90 | min-height: 80px; 91 | background-color: transparent; 92 | display: flex; 93 | justify-content: space-between; 94 | align-items: center; 95 | } 96 | 97 | .logo { 98 | font-weight: 600; 99 | font-size: 1.5rem; 100 | color: #fff; 101 | } 102 | 103 | .nav-list { 104 | flex-basis: 50%; 105 | display: flex; 106 | justify-content: space-between; 107 | align-items: center; 108 | } 109 | 110 | .list-item { 111 | color: #fff; 112 | font-size: 1.2rem; 113 | font-weight: 500; 114 | transition: opacity 300ms ease; 115 | } 116 | 117 | .list-item:hover { 118 | opacity: 0.8; 119 | } 120 | 121 | .contact { 122 | background-color: #505050; 123 | padding: 0.5rem 0.8rem; 124 | border-radius: 5px; 125 | } 126 | 127 | 128 | .mobile-menu{ 129 | display: none; 130 | } 131 | /* navbar style */ 132 | 133 | .header { 134 | width: 100%; 135 | max-width: 1980px; 136 | background-image: url(./images/banner1.png); 137 | height: 100vh; 138 | background-size: cover; 139 | background-position: center; 140 | background-repeat: no-repeat; 141 | z-index: 2; 142 | 143 | } 144 | 145 | .header .container { 146 | width: 90%; 147 | margin: 0 auto; 148 | display: flex; 149 | justify-content: space-between; 150 | align-items: center; 151 | height: 100%; 152 | } 153 | 154 | .header-info { 155 | width: 90%; 156 | margin-inline: auto; 157 | display: flex; 158 | justify-content: center; 159 | align-items: center; 160 | flex-direction: column; 161 | height: 100%; 162 | z-index: 2; 163 | 164 | } 165 | 166 | .header-headline { 167 | font-size: 6rem; 168 | text-align: center; 169 | font-weight: 900; 170 | line-height: 110%; 171 | text-transform: capitalize; 172 | color: white; 173 | padding-block: 1rem; 174 | } 175 | 176 | .header-subtitle { 177 | font-size: 1.5rem; 178 | width: 60%; 179 | text-align: center; 180 | color: #f1f1f1; 181 | text-transform: capitalize; 182 | padding-bottom: 2rem; 183 | } 184 | 185 | .cta { 186 | width: 200px; 187 | background-color: #505050; 188 | color: #fff; 189 | text-align: center; 190 | padding: 0.8rem 1rem; 191 | border-radius: 5px; 192 | font-size: 2rem; 193 | } 194 | 195 | form { 196 | max-width: 1980px; 197 | width: 100%; 198 | margin-top: -50px; 199 | } 200 | 201 | form .container { 202 | width: 80%; 203 | margin-inline: auto; 204 | background-color: #fff; 205 | box-shadow: 0px 5px 10px rgba(80, 80, 80, 0.30); 206 | display: flex; 207 | justify-content: center; 208 | flex-wrap: wrap; 209 | align-items: center; 210 | min-height: 100px; 211 | gap: 2rem; 212 | border-radius: 0.6rem; 213 | } 214 | 215 | .input { 216 | flex-basis: 22%; 217 | background-color: transparent; 218 | height: 100%; 219 | display: flex; 220 | justify-content: center; 221 | align-items: center; 222 | border: 0.3px solid rgba(80, 80, 80, .30); 223 | padding: 0.5rem 0; 224 | border-radius: 5px; 225 | } 226 | 227 | .input input { 228 | outline: 0; 229 | border: 0; 230 | background-color: transparent; 231 | text-transform: uppercase; 232 | font-size: 1rem; 233 | 234 | } 235 | 236 | .search { 237 | background-color: #505050; 238 | flex-basis: 15%; 239 | border-radius: 5px; 240 | cursor: pointer; 241 | transition: opacity 300ms; 242 | 243 | } 244 | 245 | .search>* { 246 | color: #fff; 247 | text-transform: uppercase; 248 | cursor: pointer; 249 | 250 | } 251 | 252 | .search:hover { 253 | opacity: 0.8; 254 | } 255 | 256 | 257 | /* product */ 258 | #product { 259 | width: 100%; 260 | max-width: 1980px; 261 | padding-block: 4rem; 262 | } 263 | 264 | .product-info { 265 | width: 80%; 266 | margin: 0 auto; 267 | display: flex; 268 | justify-content: space-between; 269 | padding-bottom: 2rem; 270 | } 271 | 272 | .product-info .product-title { 273 | font-size: 2.8rem; 274 | font-weight: 500; 275 | text-transform: capitalize; 276 | color: #505050; 277 | width: 70%; 278 | } 279 | 280 | .product-btn { 281 | background-color: transparent; 282 | color: #505050; 283 | font-size: 1.5rem; 284 | display: flex; 285 | width: 20%; 286 | justify-content: center; 287 | align-items: center; 288 | min-height: 20px; 289 | transition: color 300ms; 290 | } 291 | 292 | .product-btn:hover { 293 | color: #000; 294 | } 295 | 296 | #product .container { 297 | width: 90%; 298 | margin-inline: auto; 299 | display: flex; 300 | justify-content: center; 301 | align-items: center; 302 | flex-wrap: wrap; 303 | gap: 1rem; 304 | } 305 | 306 | .product-card { 307 | flex-basis: 28%; 308 | /* background-color: royalblue; */ 309 | border-radius: 10px; 310 | display: flex; 311 | justify-content: center; 312 | align-items: flex-start; 313 | flex-direction: column; 314 | /* border: 0.5px solid rgba(80, 80, 80, 0.30); */ 315 | box-shadow: 0px 5px 10px rgba(80, 80, 80, 0.20); 316 | padding-bottom: 1rem; 317 | overflow: hidden; 318 | 319 | } 320 | 321 | .product-card:hover .product-img{ 322 | transform: scale(1.035); 323 | } 324 | 325 | .product-img { 326 | flex-basis: 100%; 327 | object-fit: cover; 328 | transition: 300ms ease; 329 | } 330 | 331 | .card-info { 332 | display: flex; 333 | justify-content: center; 334 | align-items: center; 335 | 336 | flex-direction: column; 337 | /* background-color: red; */ 338 | width: 100%; 339 | gap: 1rem; 340 | padding-top: 0.5rem; 341 | } 342 | 343 | .card-info-content { 344 | display: flex; 345 | text-transform: uppercase; 346 | min-height: 20px; 347 | justify-self: center; 348 | align-items: center; 349 | gap: 0.5rem; 350 | /* background-color: yellow; */ 351 | width: 90%; 352 | margin-inline: auto; 353 | 354 | } 355 | 356 | .content { 357 | flex-basis: 30%; 358 | display: flex; 359 | justify-content: start; 360 | min-height: 20px; 361 | align-items: center; 362 | } 363 | 364 | .content p { 365 | font-size: 1rem; 366 | } 367 | 368 | .price { 369 | display: flex; 370 | justify-content: space-between; 371 | width: 90%; 372 | margin-inline: auto; 373 | 374 | gap: 10px; 375 | 376 | } 377 | 378 | .price p { 379 | font-size: 1.5rem; 380 | flex-basis: 30%; 381 | 382 | } 383 | 384 | .booking-btn { 385 | color: #fff; 386 | background-color: #505050; 387 | flex-basis: 50%; 388 | padding: 0.5rem 0.5rem; 389 | text-align: center; 390 | font-size: 1rem; 391 | border-radius: 5px; 392 | } 393 | 394 | 395 | /* product */ --------------------------------------------------------------------------------