├── asset ├── img │ ├── part2.png │ ├── profit.jpg │ ├── mainpart3-two.png │ ├── mainpart4-left.png │ ├── mainpart5-left.png │ ├── mainpart6-left.png │ ├── mainport3-one.png │ ├── lea-00-teaser-hd.webp │ ├── mainpart1-part1.png │ ├── mainpart1-part2.jpg │ ├── mainpart4-center.png │ ├── mainpart4-right.png │ ├── mainpart5-righ1.png │ ├── mainpart5-right2.png │ ├── mainpart6-center.png │ ├── mainpart6-right.png │ └── logo-light.svg └── css │ ├── cssreset.css │ └── style.css ├── README.md └── index.html /asset/img/part2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/part2.png -------------------------------------------------------------------------------- /asset/img/profit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/profit.jpg -------------------------------------------------------------------------------- /asset/img/mainpart3-two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart3-two.png -------------------------------------------------------------------------------- /asset/img/mainpart4-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart4-left.png -------------------------------------------------------------------------------- /asset/img/mainpart5-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart5-left.png -------------------------------------------------------------------------------- /asset/img/mainpart6-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart6-left.png -------------------------------------------------------------------------------- /asset/img/mainport3-one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainport3-one.png -------------------------------------------------------------------------------- /asset/img/lea-00-teaser-hd.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/lea-00-teaser-hd.webp -------------------------------------------------------------------------------- /asset/img/mainpart1-part1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart1-part1.png -------------------------------------------------------------------------------- /asset/img/mainpart1-part2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart1-part2.jpg -------------------------------------------------------------------------------- /asset/img/mainpart4-center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart4-center.png -------------------------------------------------------------------------------- /asset/img/mainpart4-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart4-right.png -------------------------------------------------------------------------------- /asset/img/mainpart5-righ1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart5-righ1.png -------------------------------------------------------------------------------- /asset/img/mainpart5-right2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart5-right2.png -------------------------------------------------------------------------------- /asset/img/mainpart6-center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart6-center.png -------------------------------------------------------------------------------- /asset/img/mainpart6-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/bmw/HEAD/asset/img/mainpart6-right.png -------------------------------------------------------------------------------- /asset/css/cssreset.css: -------------------------------------------------------------------------------- 1 | *,*::after,*::before{ 2 | margin: 0;padding: 0;box-sizing: border-box; 3 | } 4 | body{ 5 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 6 | font-size: 100%; 7 | width: 100%; 8 | /* overflow-x: 0; به خاطر هاور عکس سایت */ 9 | } 10 | .row{ 11 | display: flex; 12 | flex-wrap: wrap; 13 | width: 100%; 14 | } 15 | li{ 16 | list-style-type: none; 17 | } 18 | a{ 19 | text-decoration: none; 20 | color: inherit; 21 | &:active{ 22 | color: inherit; 23 | } 24 | &:visited{ 25 | color: inherit; 26 | } 27 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bmw 2 | 3 | [Demo peroject](https://alikhazaeii.github.io/bmw/) 4 | - 💬 Ask me about **html5,css3,** 5 | 6 | - 📫 How to reach me **ali.tradding021@gmail.com** 7 | 8 |

Connect with me:

9 |

10 | ali-khazaei021 11 | ali_khazaei_developer 12 |

13 | 14 | ![bmw1](https://github.com/user-attachments/assets/1e0fb527-f9dc-438c-871a-bc022cba52a4) 15 | 16 | 17 | 18 | ![bmw2](https://github.com/user-attachments/assets/e3c36748-c006-456f-832e-61e8b17ef177) 19 | 20 | -------------------------------------------------------------------------------- /asset/img/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | bmw 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 26 |
27 | 28 |
29 |
30 |
31 |
32 |
33 |

bmw welt , bmw museum , bmw m driving academy

34 |

bmw munich experiance

35 | read more 36 |
37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

wild at art

45 |

the history of the bmw art cars

46 | read more 47 |
48 |
49 | 50 |
51 | 52 |
53 |

bmw consept skytop

54 |

the fusion of tradition and modernity

55 | read more 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 | 
LEARN EVERYTHING ABOUT 
 84 |        BMW HERE
85 |
86 |
87 | 88 |
89 | 90 | 91 |
92 |
93 |
94 | 95 |
96 |

the all-new bmw m5

97 |
98 |
99 |
100 | 101 |
102 |

bmw explained
learn everything about bmw here

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

THE BMW PODCAST: CHANGING LANES

114 | 115 |

116 | Changing Lanes is the official podcast from BMW. In these audio series, we take you with us on new journeys 117 | through the BMW universe. Find out more about sustainability, innovation, technology, mobility and the latest 118 | trends. You can find and subscribe to Changing Lanes on all major podcast platforms, so tune in! 119 |

120 | listen now 121 |
122 |
123 |
124 | 125 |
126 | 127 |

Exclusive BMW insights

128 |
129 |
130 |
131 | 132 |
133 |

the future according to...

134 |
135 |
136 |
137 | 138 |
139 |

free paia podcast

140 |
141 |
142 |
143 |
144 |
145 | 146 | 147 | 148 |
149 |
150 |
151 |

BMW in your country

152 |

ALL BMW MODELS

153 | ⇛ find your BMW 154 |
155 |
156 |
157 | 158 | 159 | 160 | 161 |
162 |
163 |
164 | 165 |
166 |

bmw art car #20

167 |
168 |
169 |
170 |
171 | 172 |
173 |

the bmw xm

174 |
175 |
176 |
177 | 178 |
179 |

accept no limitations

180 |
181 |
182 |
183 |
184 |
185 | 186 |
187 |
188 |
189 |
190 | 191 |
192 | 193 |

the future of luxury

194 |
195 |
196 |
197 | 198 |
199 |

bmw vision neue klosse x

200 |
201 |
202 |
203 | 204 |
205 |

tactile frascination

206 |
207 |
208 |
209 |
210 |
211 | 212 | 213 | 214 | 288 | 289 | 290 | 291 | 292 | -------------------------------------------------------------------------------- /asset/css/style.css: -------------------------------------------------------------------------------- 1 | .header { 2 | /* border: 2px solid red; */ 3 | width: 100%; 4 | height: 80px; 5 | display: flex; 6 | justify-content: center; 7 | background-image: url(../img/lea-00-teaser-hd.webp 8 | ); 9 | background-size: cover; 10 | 11 | .row { 12 | border-bottom: 2px solid rgb(0, 0, 0); 13 | background-color: rgba(0, 0, 0, 0.288); 14 | justify-content: space-between; 15 | width: 66%; 16 | height: 80px; 17 | /* margin: 0 50px; */ 18 | 19 | * { 20 | /* border: 2px solid red; */ 21 | color: rgb(0, 0, 0); 22 | height: 100%; 23 | width: 100%; 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | 28 | } 29 | 30 | 31 | >.menu { 32 | width: 70%; 33 | 34 | >ul { 35 | 36 | /* border: 2px solid yellow; */ 37 | >li { 38 | /* border: 2px solid red; */ 39 | margin: 0 5px; 40 | 41 | &:first-child { 42 | >a { 43 | color: red; 44 | } 45 | } 46 | 47 | &:hover { 48 | >a { 49 | color: red; 50 | border-bottom: 2px solid blue; 51 | transition: 0.2s; 52 | 53 | } 54 | } 55 | 56 | >a { 57 | font-size: 12px; 58 | font-weight: bolder; 59 | margin: 0 8px; 60 | height: 50%; 61 | 62 | 63 | } 64 | } 65 | 66 | 67 | 68 | } 69 | } 70 | 71 | >.navimg { 72 | width: 15%; 73 | height: 100%; 74 | } 75 | } 76 | } 77 | 78 | /* head-buttom */ 79 | 80 | .head-buttom { 81 | width: 100%; 82 | height: 80vh; 83 | background-image: url(../img/lea-00-teaser-hd.webp); 84 | background-size: cover; 85 | display: flex; 86 | align-items: center; 87 | 88 | >.row { 89 | width: 70%; 90 | height: 30%; 91 | /* border: 2px solid red; */ 92 | align-items: end; 93 | justify-content: start; 94 | 95 | * { 96 | color: rgb(0, 0, 0); 97 | text-transform: capitalize; 98 | /* padding: 0 0 0 50px; */ 99 | margin: 25px 0 0 50px; 100 | /* line-height: 20px; */ 101 | 102 | } 103 | 104 | >h2 { 105 | font-size: 28px; 106 | /* border: 2px solid red; */ 107 | 108 | } 109 | 110 | >h1 { 111 | /* border: 2px solid red; */ 112 | 113 | font-size: 50px; 114 | } 115 | 116 | >a { 117 | 118 | width: 30%; 119 | font-size: 28px; 120 | border: 2px solid #808080; 121 | color: #808080; 122 | display: flex; 123 | justify-content: center; 124 | padding: 20px; 125 | border-radius: 40px; 126 | transition: .4s; 127 | 128 | &:hover { 129 | color: white; 130 | background-color: #808080; 131 | } 132 | } 133 | } 134 | } 135 | 136 | /* -----end header------- */ 137 | 138 | .mainpart1 { 139 | width: 100%; 140 | height: 600px; 141 | /* border: 2px solid red; */ 142 | 143 | >.row { 144 | width: 100%; 145 | justify-content: space-between; 146 | /* border: 2px solid yellow; */ 147 | height: 100%; 148 | 149 | >figure { 150 | /* border: 2px solid yellow; */ 151 | position: relative; 152 | width: 49.8%; 153 | height: 100%; 154 | overflow: hidden; 155 | 156 | &:hover { 157 | >img { 158 | width: 150%; 159 | height: 150%; 160 | left: -25%; 161 | top: -25%; 162 | transition: 10s; 163 | /* z-index: -1; */ 164 | 165 | } 166 | } 167 | 168 | * { 169 | width: 100%; 170 | height: 100%; 171 | position: absolute; 172 | left: 0; 173 | bottom: 0; 174 | color: wheat; 175 | text-transform: capitalize; 176 | 177 | } 178 | 179 | >img { 180 | object-fit: cover; 181 | width: 100%; 182 | height: 100%; 183 | top: 0; 184 | left: 0; 185 | transition: 10s; 186 | 187 | 188 | } 189 | 190 | >figcaption { 191 | /* border: 2px solid rgb(251, 255, 0); */ 192 | width: 90%; 193 | height: 40%; 194 | margin: 0 0 10% 10%; 195 | 196 | 197 | 198 | >p { 199 | /* border: 2px solid rgb(251, 255, 0); */ 200 | place-content: top; 201 | font-size: 30px; 202 | 203 | } 204 | 205 | >h2 { 206 | /* border: 2px solid rgb(251, 255, 0); */ 207 | place-content: center; 208 | font-size: 50px; 209 | } 210 | 211 | >a { 212 | /* border-radius: 2px solid red; */ 213 | /* place-content: buttom; */ 214 | display: flex; 215 | align-items: center; 216 | justify-content: center; 217 | width: 150px; 218 | height: 50px; 219 | border: 2px solid white; 220 | transition: 0.4s; 221 | 222 | &:hover { 223 | color: black; 224 | background-color: white; 225 | } 226 | } 227 | } 228 | } 229 | } 230 | } 231 | 232 | 233 | /* ----------end mainpar1 -------------*/ 234 | 235 | 236 | .mainpart2 { 237 | width: 100%; 238 | height: 300px; 239 | /* border: 2px solid red; */ 240 | background-color: wheat; 241 | 242 | >.row { 243 | width: 100%; 244 | height: 300px; 245 | 246 | 247 | * { 248 | display: flex; 249 | justify-content: center; 250 | align-items: center; 251 | width: 100%; 252 | height: 100%; 253 | } 254 | 255 | >.text { 256 | /* border: 2px solid yellow; */ 257 | margin: 0 5%; 258 | padding-left: 2%; 259 | 260 | >pre { 261 | /* justify-content: center; */ 262 | 263 | text-transform: capitalize; 264 | font-size: 90px; 265 | font-weight: 500; 266 | color: rgb(61, 58, 58); 267 | } 268 | } 269 | 270 | } 271 | } 272 | 273 | /* ----------------mainport2-------------- */ 274 | 275 | /* ---------------profile----------------- */ 276 | .box { 277 | width: 200px; 278 | height: 200px; 279 | position: fixed; 280 | right: 20px; 281 | bottom: 20px; 282 | z-index: 10; 283 | 284 | /* border: 1px solid red; */ 285 | >div { 286 | width: 100%; 287 | height: 100%; 288 | /* background-color: red; */ 289 | position: absolute; 290 | bottom: 0; 291 | left: 0; 292 | 293 | &:first-of-type { 294 | background-color: rgb(0, 0, 0); 295 | border-radius: 27% 73% 19% 81% / 75% 26% 74% 25% ; 296 | animation: anime2 infinite alternate 2s; 297 | 298 | } 299 | 300 | &:last-of-type { 301 | background-image: url(../img/profit.jpg); 302 | background-position: 0px -70px; 303 | background-size: cover; 304 | border-radius: 34% 66% 36% 64% / 59% 38% 62% 41% ; 305 | animation: anime1 infinite alternate 2s; 306 | } 307 | } 308 | &:hover{ 309 | >a{ 310 | left: -50px; 311 | } 312 | } 313 | >a{ 314 | position: absolute; 315 | text-decoration: none; 316 | font-size: 30px; 317 | left: 100px; 318 | transition: .4s; 319 | &:nth-of-type(1){ 320 | top: 30px; 321 | /* left: -10px; */ 322 | transition: 1s; 323 | } 324 | &:nth-of-type(2){ 325 | top: 70px; 326 | transition: 1.5s; 327 | } 328 | &:nth-of-type(3){ 329 | top: 110px; 330 | transition: 2s; 331 | } 332 | } 333 | } 334 | 335 | @keyframes anime1 { 336 | to { 337 | border-radius: 52% 48% 27% 73% / 43% 20% 80% 57%; 338 | } 339 | } 340 | 341 | @keyframes anime2 { 342 | to { 343 | border-radius: 69% 31% 85% 15% / 16% 61% 39% 84%; 344 | } 345 | } 346 | /* ---------------------------------------------------- */ 347 | 348 | .mainpart3 { 349 | width: 100%; 350 | height: 300px; 351 | 352 | /* background-color: rgb(241, 8, 8); */ 353 | >.row { 354 | /* border: 2px solid yellow; */ 355 | width: 100%; 356 | height: 100%; 357 | justify-content: space-evenly; 358 | 359 | >figure { 360 | position: relative; 361 | width: 49.5%; 362 | height: 100%; 363 | overflow: hidden; 364 | 365 | &:hover { 366 | >img { 367 | width: 110%; 368 | height: 110%; 369 | left: -5%; 370 | bottom: -5%; 371 | transition: 2s; 372 | /* z-index: -1; */ 373 | 374 | /* overflow: hidden; */ 375 | 376 | 377 | } 378 | } 379 | 380 | * { 381 | position: absolute; 382 | width: 100%; 383 | height: 100%; 384 | left: 0; 385 | bottom: 0; 386 | } 387 | 388 | >img { 389 | width: 100%; 390 | height: 100%; 391 | left: 0; 392 | bottom: 0; 393 | object-fit: cover; 394 | transition: 2s; 395 | 396 | /* border: 2px solid yellow; */ 397 | /* overflow: hidden; */ 398 | } 399 | 400 | >figcaption { 401 | /* border: 2px solid yellow; */ 402 | width: 90%; 403 | height: 20%; 404 | color: white; 405 | font-size: 12px; 406 | text-transform: capitalize; 407 | margin-left: 20px; 408 | } 409 | } 410 | } 411 | } 412 | 413 | /* ----------------end--------------------- */ 414 | 415 | 416 | .mainpart4 { 417 | width: 100%; 418 | height: 500px; 419 | background-color: #262626; 420 | margin-top: 5px; 421 | 422 | >.row { 423 | height: 100%; 424 | justify-content: space-evenly; 425 | 426 | * { 427 | width: 100%; 428 | height: 100%; 429 | margin-top: 10px; 430 | } 431 | 432 | >.text { 433 | /* border: 2px solid yellow; */ 434 | width: 30%; 435 | height: 100%; 436 | display: flex; 437 | flex-wrap: wrap; 438 | justify-content: center; 439 | 440 | * { 441 | height: 20%; 442 | display: flex; 443 | color: antiquewhite; 444 | text-transform: capitalize; 445 | margin-left: 30px; 446 | } 447 | 448 | >h2 { 449 | /* border: 2px solid gold; */ 450 | font-size: 40px; 451 | text-transform: uppercase; 452 | } 453 | 454 | >p { 455 | /* border: 2px solid red; */ 456 | font-size: 20px; 457 | } 458 | 459 | >a { 460 | width: 50%; 461 | height: 10%; 462 | display: flex; 463 | color: white; 464 | border: 2px solid rgb(255, 255, 255); 465 | justify-content: center; 466 | align-items: center; 467 | margin: 100px 30% 0 0; 468 | 469 | &:hover { 470 | background-color: white; 471 | color: black; 472 | transition: 1s; 473 | } 474 | 475 | } 476 | } 477 | 478 | >.picture { 479 | display: flex; 480 | justify-content: space-evenly; 481 | /* border: 2px solid green; */ 482 | width: 70%; 483 | height: 70%; 484 | 485 | >figure { 486 | display: flex; 487 | align-items: end; 488 | /* border: 2px solid red; */ 489 | width: 30%; 490 | height: 100%; 491 | position: relative; 492 | 493 | * { 494 | display: flex; 495 | width: 100%; 496 | height: 100%; 497 | position: absolute; 498 | } 499 | 500 | >img { 501 | left: 0; 502 | bottom: 0; 503 | } 504 | 505 | >figcaption { 506 | /* border: 2px solid red; */ 507 | height: 20%; 508 | 509 | >p { 510 | font-size: 20px; 511 | color: rgb(87, 84, 84); 512 | text-transform: capitalize; 513 | } 514 | } 515 | } 516 | } 517 | } 518 | } 519 | 520 | /* ----------------------end-------------------- */ 521 | 522 | .para2 { 523 | width: 100%; 524 | height: 300px; 525 | 526 | /* background-color: rgb(221, 186, 186); */ 527 | >.row { 528 | width: 100%; 529 | height: 100%; 530 | 531 | /* border: 2px solid rgb(0, 0, 0); */ 532 | * { 533 | /* border: 2px solid green; */ 534 | 535 | width: 100%; 536 | display: flex; 537 | justify-content: center; 538 | align-items: center; 539 | text-transform: capitalize; 540 | margin: 20px 0; 541 | color: #262626; 542 | } 543 | 544 | >.text { 545 | display: block; 546 | 547 | >p { 548 | font-size: 40px; 549 | } 550 | 551 | >h1 { 552 | font-size: 80px; 553 | font-weight: 500; 554 | } 555 | 556 | >a { 557 | font-size: 40px; 558 | 559 | &:hover { 560 | color: blue; 561 | } 562 | } 563 | } 564 | } 565 | } 566 | 567 | /* -------------end------------- */ 568 | 569 | .mainpart5 { 570 | /* border: 2px solid red; */ 571 | width: 100%; 572 | height: 500px; 573 | 574 | >.row { 575 | height: 100%; 576 | justify-content: space-evenly; 577 | 578 | >.left { 579 | /* border: 2px solid green; */ 580 | width: 64%; 581 | height: 100%; 582 | display: flex; 583 | align-items: end; 584 | position: relative; 585 | overflow: hidden; 586 | 587 | &:hover { 588 | >img { 589 | width: 120%; 590 | height: 120%; 591 | left: -10%; 592 | bottom: -10%; 593 | transition: 1s; 594 | 595 | } 596 | } 597 | 598 | * { 599 | width: 100%; 600 | height: 100%; 601 | display: flex; 602 | position: absolute; 603 | } 604 | 605 | >img { 606 | transition: 1s; 607 | left: 0; 608 | bottom: 0; 609 | } 610 | 611 | >figcaption { 612 | /* border: 2px solid green; */ 613 | align-items: end; 614 | height: 20%; 615 | 616 | >p { 617 | color: antiquewhite; 618 | text-transform: capitalize; 619 | font-size: 30px; 620 | } 621 | } 622 | } 623 | 624 | >.right { 625 | /* border: 2px solid black; */ 626 | width: 35%; 627 | height: 100%; 628 | 629 | >figure { 630 | /* border: 2px solid yellow; */ 631 | width: 100%; 632 | height: 50%; 633 | position: relative; 634 | overflow: hidden; 635 | 636 | &:hover { 637 | >img { 638 | width: 120%; 639 | height: 120%; 640 | transition: 2s; 641 | left: -10%; 642 | bottom: -10%; 643 | } 644 | } 645 | 646 | * { 647 | display: flex; 648 | width: 100%; 649 | height: 100%; 650 | position: absolute; 651 | align-items: end; 652 | 653 | } 654 | 655 | >img { 656 | height: 100%; 657 | left: 0; 658 | bottom: 0; 659 | transition: 2s; 660 | } 661 | 662 | >figcaption { 663 | /* border: 2px solid yellow; */ 664 | 665 | display: flex; 666 | height: 100%; 667 | align-items: end; 668 | 669 | >p { 670 | color: antiquewhite; 671 | text-transform: capitalize; 672 | font-size: 20px; 673 | margin: 0 0 20px 20px; 674 | 675 | } 676 | } 677 | } 678 | } 679 | } 680 | 681 | } 682 | 683 | /* --------------------end------------------- */ 684 | 685 | .mainpart6 { 686 | width: 100%; 687 | height: 242px; 688 | margin-top: 2px; 689 | 690 | >.row { 691 | height: 100%; 692 | 693 | >.picture { 694 | display: flex; 695 | justify-content: space-between; 696 | /* border: 2px solid green; */ 697 | width: 100%; 698 | height: 300px; 699 | 700 | >figure { 701 | display: flex; 702 | align-items: end; 703 | /* border: 2px solid red; */ 704 | width: 33.3%; 705 | height: 80%; 706 | position: relative; 707 | overflow: hidden; 708 | 709 | &:hover { 710 | >img { 711 | width: 110%; 712 | height: 110%; 713 | left: -5%; 714 | bottom: -5%; 715 | transition: 1s; 716 | } 717 | } 718 | 719 | * { 720 | display: flex; 721 | width: 100%; 722 | height: 100%; 723 | position: absolute; 724 | } 725 | 726 | >img { 727 | left: 0; 728 | bottom: 0; 729 | transition: 1s; 730 | } 731 | 732 | >figcaption { 733 | /* border: 2px solid red; */ 734 | height: 20%; 735 | 736 | >p { 737 | font-size: 20px; 738 | color: rgb(253, 253, 253); 739 | text-transform: capitalize; 740 | margin-left: 20px; 741 | } 742 | } 743 | } 744 | } 745 | } 746 | } 747 | 748 | /* ------------------end-------------------- */ 749 | 750 | footer { 751 | width: 100%; 752 | height: 700px; 753 | background: #262626; 754 | 755 | >.row { 756 | height: 100%; 757 | 758 | * { 759 | display: flex; 760 | } 761 | 762 | >.language { 763 | /* border: 2px solid yellow; */ 764 | width: 50%; 765 | height: 10%; 766 | margin: 5% 0 0 10%; 767 | 768 | >ul { 769 | /* border:2px solid red; */ 770 | width: 100%; 771 | height: 100%; 772 | 773 | >li { 774 | /* border: 1px solid green; */ 775 | width: 15%; 776 | height: 50%; 777 | 778 | &:first-child { 779 | >a { 780 | color: wheat; 781 | } 782 | 783 | } 784 | 785 | >a { 786 | /* border: 2px solid blue; */ 787 | align-items: center; 788 | color: rgb(119, 112, 112); 789 | 790 | &:hover { 791 | color: white; 792 | } 793 | 794 | } 795 | } 796 | } 797 | } 798 | 799 | .menu{ 800 | /* border: 2px solid red; */ 801 | width: 100%; 802 | height: 550px; 803 | >.row{ 804 | height: 100%; 805 | >div{ 806 | /* border:2px solid white; */ 807 | width: 25%; 808 | height: 100%; 809 | >ul{ 810 | display: block; 811 | margin-left: 60px; 812 | width: 100%; 813 | height: 100%; 814 | /* border: 2px solid red; */ 815 | >p{ 816 | display: flex; 817 | 818 | text-transform: capitalize; 819 | color: white; 820 | width: 60%; 821 | height: 5%; 822 | border-bottom: 1px solid wheat; 823 | } 824 | >li{ 825 | /* border: 2px solid yellow; */ 826 | width: 100%; 827 | height: 8%; 828 | >a{ 829 | align-items: center; 830 | color: rgb(119, 112, 112); 831 | &:hover{ 832 | color: white; 833 | } 834 | } 835 | } 836 | >h1{ 837 | color: white; 838 | text-transform: capitalize; 839 | margin: 15px; 840 | font-size: 20px; 841 | } 842 | } 843 | } 844 | } 845 | } 846 | 847 | } 848 | } 849 | /* ----------------------------------------------- */ --------------------------------------------------------------------------------