├── asset ├── img │ ├── 1.jpg │ ├── 2.jpg │ ├── 2 (1).jpg │ ├── profit.jpg │ ├── upleft.png │ ├── topleft.png │ ├── 2-pic-left.png │ ├── 2-pic-right.png │ ├── bottemleft.png │ ├── bottemright.png │ ├── 1.svg │ └── 2.svg └── css │ ├── resetcss.css │ └── style.css ├── README.md └── index.html /asset/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/1.jpg -------------------------------------------------------------------------------- /asset/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/2.jpg -------------------------------------------------------------------------------- /asset/img/2 (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/2 (1).jpg -------------------------------------------------------------------------------- /asset/img/profit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/profit.jpg -------------------------------------------------------------------------------- /asset/img/upleft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/upleft.png -------------------------------------------------------------------------------- /asset/img/topleft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/topleft.png -------------------------------------------------------------------------------- /asset/img/2-pic-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/2-pic-left.png -------------------------------------------------------------------------------- /asset/img/2-pic-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/2-pic-right.png -------------------------------------------------------------------------------- /asset/img/bottemleft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/bottemleft.png -------------------------------------------------------------------------------- /asset/img/bottemright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alikhazaeii/simple-flex-grid-project/HEAD/asset/img/bottemright.png -------------------------------------------------------------------------------- /asset/css/resetcss.css: -------------------------------------------------------------------------------- 1 | *,*::after,*::before{margin: 0;padding: 0;box-sizing: border-box;} 2 | body{ 3 | font-family: Arial; 4 | width: 100%; 5 | font-size: 100%; 6 | overflow-x: hidden; 7 | } 8 | .row{ 9 | display: flex; 10 | flex-wrap: wrap; 11 | width: 100%; 12 | } 13 | li{ 14 | list-style-type: none; 15 | } 16 | a{ 17 | text-decoration: none; 18 | color: inherit; 19 | &:active{ 20 | color: inherit; 21 | } 22 | &:visited{ 23 | color: inherit; 24 | } 25 | } -------------------------------------------------------------------------------- /asset/img/1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # simple-flex-grid-project 2 | 3 | [Demo Project](https://alikhazaeii.github.io/simple-flex-grid-project/) 4 | 5 | - 💬 Ask me about **html5,css3,** 6 | 7 | - 📫 How to reach me **ali.tradding021@gmail.com** 8 | 9 |

Connect with me:

10 |

11 | ali-khazaei021 12 | ali_khazaei_developer 13 |

14 | 15 | 16 | 17 | 18 | 19 | ![image](https://github.com/user-attachments/assets/da7b1db6-c58f-461e-9584-929126157530) 20 | 21 | ![2](https://github.com/user-attachments/assets/cb047053-d53b-4416-bac6-881cdca56a69) 22 | 23 | 24 | ![3](https://github.com/user-attachments/assets/1f778355-a7f0-4749-b3fe-db581a8399b4) 25 | -------------------------------------------------------------------------------- /asset/img/2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |

disgning a better 17 |
world today 18 |

19 |
20 | 48 |
49 |
50 | 51 |
52 |
53 | 65 |
66 | 67 | 68 | 69 | 70 | 71 |
72 | 111 |
112 |
113 | 114 |
115 |
116 |
117 |

discover
our studio

118 |

119 | At our design studio, we are a collective of talented individuals ignited by our unwavering passion for 120 | transforming ideas into reality. With a harmonious blend of diverse backgrounds and a vast array of skill 121 | sets, we join forces to create compelling solutions for our esteemed clients. 122 |


123 | Collaboration is at the heart of what we do. Our team thrives on the synergy that arises when unique 124 | perspectives converge, fostering an environment of boundless creativity. By harnessing our collective 125 | expertise, we produce extraordinary results that consistently surpass expectations 126 |

127 |
128 | 129 |
130 |

lPassionately Creating Design Wonders: Unleashing Boundless Creativity 131 |

132 |
133 |
134 |
135 |
136 | 137 |
138 |
139 |
140 | 141 | 142 |
143 |
144 |
145 |

Professionals focused on helping your brand 146 | grow and move forward.

147 |
148 | 149 |
150 |
151 | 152 |
153 |
154 |
155 | 156 |
157 |

Unique Ideas

158 | 159 |

For Your Business.

160 | 161 | what we do 162 | 163 | 164 |
165 |
166 | 167 |
168 |
169 |
170 |

branding and identity design

171 |

our creative agency is a team of professionals fouces on helping you...

172 | 173 | 174 | 175 |
176 |
177 |

Website Design 178 | and Development

179 |

our creative agency is a team of professionals fouces on helping you...

180 | 181 | 182 | 183 |
184 |
185 |

Advertising 186 | and Marketing Campaigns

187 |

our creative agency is a team of professionals fouces on helping you...

188 | 189 | 190 | 191 |
192 |
193 |

Creative Consulting 194 | and Concept Development

195 |

our creative agency is a team of professionals fouces on helping you...

196 | 197 | 198 | 199 |
200 |
201 |
202 | 203 | 204 |
205 |
206 |
207 |

Meet 208 | Our Team

209 |

210 | We are talented individuals who are passionate about bringing ideas to life. With a diverse range of 211 | backgrounds and skill sets, we collaborate to produce effective solutions for our clients. 212 |


213 | 214 | Together, our creative team is committed to delivering impactful work that exceeds expectations. 215 |

216 | 217 | 218 | read more 219 | 220 | 221 |

Wedelivering

222 |

exceptional results. 223 |

224 |
225 |
226 |
227 |
228 | 229 |
230 |

anna oldman

231 |

art director

232 |
233 | 234 | 235 | 236 | 237 |
238 | 239 |
240 |
241 |
242 |
243 |
244 | 245 |
246 |

anna oldman

247 |

art director

248 |
249 | 250 | 251 | 252 | 253 |
254 | 255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 | 263 |
264 |

anna oldman

265 |

art director

266 |
267 | 268 | 269 | 270 | 271 |
272 | 273 |
274 |
275 |
276 |
277 |
278 | 279 |
280 |

anna oldman

281 |

art director

282 |
283 | 284 | 285 | 286 | 287 |
288 | 289 |
290 |
291 |
292 |
293 |
294 |
295 | 296 |
297 |
298 |
299 |
300 |

Professionals focused on helping your brand 301 | grow and move forward.

302 |
303 | 304 |
305 |
306 |
307 |
308 |
309 |

310 | Customer Voices: 311 | Hear What They Say! 312 | 313 |

314 | 317 |
318 |
319 |
320 |
321 |
322 | 323 |
324 |
325 | 326 |
327 |
328 | 329 |
330 |
331 |
332 |
333 |

Paul Trueman

334 |

eqanta app

335 |

Working with Courtney Davis as our UI designer was an absolute pleasure. Her attention to detail 336 | and creative approach brought our vision to life. The user interface she designed exceeded our expectations, and 337 | we received positive feedback from our clients. Highly recommended!

338 |
339 |
340 |
341 |
342 | 343 |
344 |
345 | 346 |
347 |
348 | 349 |
350 |
351 | 352 |
353 |
354 |
355 | 356 | 357 |
358 |

359 | Popular Publications: 360 |

361 |
362 | 363 | 364 |
365 |
366 |
367 | 368 |
369 |

code april , 2022

370 |

5 step to creat on outstanding marketing plan

371 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, repudiandae.

372 | 373 | read more 374 | 375 | 376 |
377 |
378 |
379 | 380 |
381 |

art april , 2022

382 |

play to your strengths and supercharge your business

383 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, repudiandae.

384 | 385 | read more 386 | 387 | 388 |
389 |
390 |
391 |
392 | 393 | 445 | 446 | 447 |
448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 |
458 |
459 |
460 | 461 | 462 | 463 | 464 | -------------------------------------------------------------------------------- /asset/css/style.css: -------------------------------------------------------------------------------- 1 | header { 2 | width: 100%; 3 | height: 250px; 4 | /* border: 2px sol#ff0000red; */ 5 | background-color: black; 6 | 7 | >.row { 8 | width: 100%; 9 | height: 100%; 10 | 11 | * { 12 | height: 100%; 13 | } 14 | 15 | >div { 16 | width: 70%; 17 | /* border: 2px solid yellow; */ 18 | justify-content: center; 19 | align-items: center; 20 | 21 | >h1 { 22 | color: white; 23 | font-size: 70px; 24 | text-transform: capitalize; 25 | font-weight: 300; 26 | margin: 2% 0 0 20%; 27 | 28 | >strong { 29 | color: yellow; 30 | } 31 | } 32 | 33 | } 34 | 35 | >.menu { 36 | width: 30%; 37 | height: 600px; 38 | 39 | /* border: 2px solid green; */ 40 | >.one { 41 | /* border: 2px solid green; */ 42 | display: flex; 43 | justify-content: end; 44 | align-items: center; 45 | width: 100%; 46 | height: 200px; 47 | 48 | >li { 49 | /* border: 2px solid red; */ 50 | display: flex; 51 | justify-content: center; 52 | margin: 0 20% 10% 0; 53 | width: 100%; 54 | height: 50px; 55 | position: relative; 56 | 57 | &:hover { 58 | >.two { 59 | right: 0; 60 | transition: 1s; 61 | } 62 | } 63 | 64 | >a { 65 | /* display: flex; */ 66 | height: 100%; 67 | /* border: 2px solid rgb(138, 104, 104); */ 68 | color: white; 69 | font-size: 50px; 70 | 71 | >i { 72 | width: 100%; 73 | height: 100%; 74 | } 75 | 76 | } 77 | 78 | >.two { 79 | position: absolute; 80 | width: 400px; 81 | height: 500px; 82 | /* border: 2px solid yellow; */ 83 | background-color: rgb(0, 0, 0); 84 | right: -1500px; 85 | transition: 3s; 86 | 87 | /* top: 200px; */ 88 | >li { 89 | width: 100%; 90 | height: 80px; 91 | /* border: 2px solid red; */ 92 | display: flex; 93 | align-items: center; 94 | position: relative; 95 | transition: 0.4s; 96 | 97 | &:nth-of-type(1) { 98 | >a { 99 | color: yellow; 100 | } 101 | 102 | } 103 | 104 | /* &:hover::before { 105 | width: 50px; 106 | } 107 | 108 | &::before { 109 | content: ''; 110 | display: flex; 111 | left: 0; 112 | top: 0; 113 | width: 5px; 114 | height: 5px; 115 | background-color: red; 116 | transition: 2s; 117 | } */ 118 | >a { 119 | display: flex; 120 | align-items: center; 121 | height: 30%; 122 | font-size: 45px; 123 | margin-left: 20px; 124 | /* border: 2px solid rgb(161, 118, 118); */ 125 | color: white; 126 | position: absolute; 127 | transition: 2s; 128 | font-size: 20px; 129 | text-transform: uppercase; 130 | } 131 | 132 | &:hover { 133 | margin-left: 40px; 134 | } 135 | 136 | } 137 | 138 | } 139 | } 140 | } 141 | } 142 | } 143 | } 144 | 145 | /* ---------------------end------------------------- */ 146 | main { 147 | width: 100%; 148 | height: 350px; 149 | background-color: rgb(0, 0, 0); 150 | 151 | .row { 152 | width: 100%; 153 | height: 100%; 154 | /* border: 2px solid rgb(0, 0, 0); */ 155 | display: flex; 156 | justify-content: space-between; 157 | 158 | * { 159 | display: flex; 160 | justify-content: space-evenly; 161 | } 162 | 163 | >article { 164 | width: 35%; 165 | height: 100%; 166 | padding: 50px 0 0 40px; 167 | /* border: 2px solid red; */ 168 | flex-wrap: wrap; 169 | margin-left: 200px; 170 | text-transform: capitalize; 171 | 172 | >p { 173 | color: rgb(107, 75, 75); 174 | 175 | } 176 | 177 | >.aleft { 178 | width: 200px; 179 | height: 70px; 180 | /* border: 2px solid yellow; */ 181 | background-color: yellow; 182 | border-radius: 50px; 183 | 184 | &:hover { 185 | width: 202px; 186 | height: 72px; 187 | 188 | >.right { 189 | width: 30%; 190 | height: 50px; 191 | margin-top: 10px; 192 | 193 | } 194 | } 195 | 196 | * { 197 | justify-content: center; 198 | align-items: center; 199 | } 200 | 201 | >.left { 202 | align-items: center; 203 | /* border: 2px solid red; */ 204 | width: 70%; 205 | height: 100%; 206 | color: rgb(0, 0, 0); 207 | font-size: 18px; 208 | 209 | } 210 | 211 | >.right { 212 | align-items: center; 213 | /* border: 2px solid red; */ 214 | margin-top: 7%; 215 | width: 20%; 216 | height: 40px; 217 | color: rgb(186, 187, 120); 218 | background-color: black; 219 | border-radius: 50px; 220 | font-size: 25px; 221 | transition: .4s; 222 | 223 | } 224 | } 225 | 226 | >.aright { 227 | width: 200px; 228 | height: 70px; 229 | /* border: 2px solid yellow; */ 230 | background-color: rgb(0, 0, 0); 231 | border-radius: 50px; 232 | 233 | &:hover { 234 | width: 202px; 235 | height: 72px; 236 | 237 | >.right { 238 | width: 30%; 239 | height: 50px; 240 | margin-top: 10px; 241 | 242 | } 243 | } 244 | 245 | * { 246 | justify-content: center; 247 | align-items: center; 248 | } 249 | 250 | >.left { 251 | align-items: center; 252 | /* border: 2px solid red; */ 253 | width: 70%; 254 | height: 100%; 255 | color: rgb(255, 255, 255); 256 | font-size: 18px; 257 | 258 | } 259 | 260 | >.right { 261 | align-items: center; 262 | /* border: 2px solid red; */ 263 | margin-top: 7%; 264 | width: 20%; 265 | height: 40px; 266 | color: rgb(186, 187, 120); 267 | background-color: rgb(85, 66, 66); 268 | border-radius: 50px; 269 | font-size: 15px; 270 | transition: .4s; 271 | 272 | } 273 | } 274 | } 275 | 276 | >.icon { 277 | /* border: 2px solid green; */ 278 | width: 30%; 279 | height: 100%; 280 | display: flex; 281 | justify-content: center; 282 | align-items: center; 283 | 284 | * { 285 | display: flex; 286 | align-items: center; 287 | border-radius: 100px; 288 | 289 | } 290 | 291 | >a { 292 | background-color: yellow; 293 | width: 150px; 294 | height: 150px; 295 | 296 | /* border: 2px solid yellow; */ 297 | &:hover { 298 | >span { 299 | width: 80%; 300 | height: 80%; 301 | font-size: 80px; 302 | } 303 | } 304 | 305 | >span { 306 | width: 50%; 307 | height: 50%; 308 | background-color: black; 309 | color: yellow; 310 | font-size: 40px; 311 | transition: 1s; 312 | /* --------------------put href in a for down the page----------------------------- */ 313 | } 314 | 315 | } 316 | } 317 | 318 | >.verticalmenu { 319 | width: 20%; 320 | height: 80%; 321 | /* border: 2px solid yellow; */ 322 | justify-content: end; 323 | 324 | * { 325 | display: flex; 326 | align-items: center; 327 | font-size: 25px; 328 | } 329 | 330 | >ul { 331 | 332 | /* border: 1px solid wheat; */ 333 | background-color: rgba(168, 165, 165, 0.658); 334 | width: 15%; 335 | height: 85%; 336 | display: block; 337 | 338 | >li { 339 | border-bottom: 2px solid rgb(0, 0, 0); 340 | width: 100%; 341 | height: 20%; 342 | position: relative; 343 | 344 | >a { 345 | width: 100%; 346 | height: 100%; 347 | /* border: 1px solid red; */ 348 | 349 | } 350 | 351 | &:hover { 352 | background-color: white; 353 | 354 | >h4 { 355 | opacity: 1; 356 | } 357 | } 358 | 359 | >h4 { 360 | transition: .4s; 361 | width: 100px; 362 | height: 35px; 363 | position: absolute; 364 | color: white; 365 | /* border: 1px solid red; */ 366 | background-color: rgb(77, 82, 82); 367 | right: 55px; 368 | font-size: 10px; 369 | text-transform: capitalize; 370 | top: 50%; 371 | transform: translateY(-50%); 372 | opacity: 0; 373 | 374 | >i { 375 | color: rgb(77, 82, 82); 376 | position: absolute; 377 | right: -5px; 378 | top: 50%; 379 | transform: translateY(-50%); 380 | } 381 | } 382 | } 383 | } 384 | } 385 | } 386 | } 387 | 388 | /* ------------------end------------------------- */ 389 | 390 | .part2 { 391 | width: 100%; 392 | height: 800px; 393 | display: flex; 394 | justify-content: center; 395 | margin-top: 150px; 396 | 397 | /* background-color: rgb(143, 135, 135); */ 398 | >.row { 399 | /* border: 2px solid red; */ 400 | justify-content: space-around; 401 | 402 | width: 80%; 403 | height: 800px; 404 | 405 | * { 406 | width: 40%; 407 | height: 100%; 408 | } 409 | 410 | >article { 411 | width: 45%; 412 | 413 | /* border: 2px solid red; */ 414 | >h2 { 415 | font-size: 60px; 416 | text-transform: capitalize; 417 | /* border: 2px solid red; */ 418 | width: 100%; 419 | height: 100px; 420 | font-weight: 100; 421 | 422 | 423 | } 424 | 425 | >p { 426 | width: 80%; 427 | height: 450px; 428 | margin-top: 80px; 429 | /* border: 2px solid red; */ 430 | line-height: 30px; 431 | color: gray; 432 | 433 | } 434 | 435 | >figure { 436 | width: 100%; 437 | height: 100px; 438 | /* border: 2px solid red; */ 439 | border-radius: 50px; 440 | position: relative; 441 | overflow: hidden; 442 | 443 | >img { 444 | width: 20%; 445 | height: 100%; 446 | } 447 | 448 | >figcaption { 449 | position: absolute; 450 | display: flex; 451 | justify-content: start; 452 | width: 100%; 453 | font-size: 15px; 454 | /* border: 2px solid red; */ 455 | top: -0px; 456 | margin: 10px 0 0 120px; 457 | } 458 | } 459 | } 460 | 461 | >figure { 462 | 463 | /* border: 2px solid yellow; */ 464 | >img { 465 | width: 100%; 466 | object-fit: cover; 467 | } 468 | } 469 | } 470 | } 471 | 472 | /* -----------------------------part2 end------------------- */ 473 | 474 | 475 | .part3 { 476 | width: 100%; 477 | height: 250px; 478 | border: 2px solid rgb(0, 0, 0); 479 | background: black; 480 | margin-top: 100px; 481 | 482 | 483 | >.row { 484 | height: 200px; 485 | /* border: 2px solid red; */ 486 | margin-top: 100px; 487 | justify-content: end; 488 | 489 | >div { 490 | width: 25%; 491 | height: 100%; 492 | /* border: 2px solid yellow; */ 493 | 494 | >p { 495 | color: white; 496 | text-transform: capitalize; 497 | line-height: 30px; 498 | color: rgb(110, 89, 89); 499 | direction: rtl; 500 | font-size: 15px; 501 | } 502 | } 503 | 504 | >span { 505 | position: relative; 506 | top: 14px; 507 | width: 30%; 508 | height: 100%; 509 | border-top: 1px solid rgb(110, 89, 89); 510 | margin-left: 20px; 511 | } 512 | } 513 | } 514 | 515 | /* ------------------------part3--------------------- */ 516 | .part4 { 517 | width: 100%; 518 | height: 200px; 519 | /* border: 2px solid red; */ 520 | display: flex; 521 | justify-content: center; 522 | 523 | >.row { 524 | width: 75%; 525 | height: 100px; 526 | /* border: 2px solid red; */ 527 | justify-content: end; 528 | 529 | >figure { 530 | width: 25%; 531 | height: 100px; 532 | /* border: 2px solid red; */ 533 | border-radius: 50px; 534 | margin-left: 100px; 535 | overflow: hidden; 536 | position: relative; 537 | 538 | &:hover { 539 | >img { 540 | width: 120%; 541 | height: 120%; 542 | left: -10%; 543 | bottom: -10%; 544 | transition: .4s; 545 | } 546 | } 547 | 548 | >img { 549 | position: absolute; 550 | width: 100%; 551 | height: 100%; 552 | object-fit: cover; 553 | left: 0; 554 | bottom: 0; 555 | transition: .4s; 556 | 557 | 558 | } 559 | } 560 | 561 | >h3 { 562 | width: 50%; 563 | height: 100%; 564 | /* border: 2px solid red; */ 565 | color: white; 566 | font-size: 70px; 567 | font-weight: 200; 568 | margin-right: 80px; 569 | } 570 | 571 | >h4 { 572 | width: 70%; 573 | height: 100%; 574 | /* border: 2px solid red; */ 575 | color: white; 576 | font-size: 70px; 577 | font-weight: 200; 578 | } 579 | 580 | >.aleft { 581 | width: 200px; 582 | height: 70px; 583 | /* border: 2px solid yellow; */ 584 | background-color: yellow; 585 | border-radius: 50px; 586 | 587 | &:hover { 588 | width: 202px; 589 | height: 72px; 590 | 591 | >.right { 592 | width: 30%; 593 | height: 50px; 594 | margin-top: 10px; 595 | 596 | } 597 | } 598 | 599 | * { 600 | justify-content: center; 601 | align-items: center; 602 | } 603 | 604 | >.left { 605 | align-items: center; 606 | /* border: 2px solid red; */ 607 | width: 70%; 608 | height: 100%; 609 | color: rgb(0, 0, 0); 610 | font-size: 18px; 611 | 612 | } 613 | 614 | >.right { 615 | align-items: center; 616 | /* border: 2px solid red; */ 617 | margin-top: 7%; 618 | width: 20%; 619 | height: 40px; 620 | color: rgb(186, 187, 120); 621 | background-color: black; 622 | border-radius: 50px; 623 | font-size: 25px; 624 | transition: .4s; 625 | 626 | } 627 | } 628 | 629 | } 630 | 631 | } 632 | 633 | /* -----------------------------part4-------------------- */ 634 | 635 | .part5 { 636 | width: 100%; 637 | height: 500px; 638 | display: flex; 639 | justify-content: center; 640 | background-color: black; 641 | 642 | >.row { 643 | width: 80%; 644 | height: 400px; 645 | /* border: 1px solid rgb(110, 110, 110); */ 646 | margin-top: 100px; 647 | 648 | >div { 649 | width: 25%; 650 | height: 100%; 651 | border: 1px solid rgb(110, 110, 110); 652 | display: block; 653 | position: relative; 654 | 655 | * { 656 | margin: 50px 40px 0 40px; 657 | transition: 1s; 658 | } 659 | 660 | >h2 { 661 | color: white; 662 | } 663 | 664 | >p { 665 | color: rgb(116, 110, 110); 666 | line-height: 25px; 667 | opacity: 0; 668 | } 669 | 670 | >a { 671 | width: 20px; 672 | height: 20px; 673 | color: rgb(19, 18, 18); 674 | background-color: rgb(88, 88, 82); 675 | border-radius: 50px; 676 | position: relative; 677 | 678 | >i { 679 | position: absolute; 680 | bottom: 10%; 681 | } 682 | } 683 | 684 | &:hover { 685 | >p { 686 | opacity: 1; 687 | /* transition: 1.5s; */ 688 | } 689 | 690 | >a { 691 | width: 60px; 692 | height: 60px; 693 | background-color: yellow; 694 | 695 | /* transition: 1s; */ 696 | >i { 697 | bottom: 18%; 698 | font-size: 40px; 699 | /* transition: 1s; */ 700 | 701 | } 702 | } 703 | } 704 | 705 | &::before { 706 | content: ''; 707 | display: flex; 708 | position: absolute; 709 | width: 0px; 710 | height: 5px; 711 | background-color: rgb(238, 255, 0); 712 | left: 0; 713 | top: 0; 714 | transition: 1s; 715 | } 716 | 717 | &:hover::before { 718 | width: 100%; 719 | } 720 | } 721 | } 722 | } 723 | 724 | /* -------------------------------end part5------------------- */ 725 | 726 | .part6 { 727 | width: 100%; 728 | height: 800px; 729 | /* border: 2px solid red; */ 730 | background-color: white; 731 | display: flex; 732 | justify-content: center; 733 | margin-top: 100px; 734 | 735 | >.row { 736 | width: 80%; 737 | height: 100%; 738 | /* border: 10px solid rgb(189, 25, 25); */ 739 | display: flex; 740 | 741 | >.para { 742 | width: 50%; 743 | height: 100%; 744 | display: block; 745 | padding-left: 10%; 746 | 747 | /* border: 2px solid red; */ 748 | * { 749 | width: 100%; 750 | height: 35%; 751 | } 752 | 753 | >h2 { 754 | width: 20%; 755 | /* border: 2px solid red; */ 756 | font-size: 80px; 757 | font-weight: 400; 758 | } 759 | 760 | >p { 761 | width: 60%; 762 | height: 20%; 763 | line-height: 20px; 764 | margin-top: 60px; 765 | color: gray; 766 | /* border: 2px solid black; */ 767 | } 768 | 769 | >.aleft { 770 | width: 200px; 771 | height: 70px; 772 | margin: 100px 0 40px 0; 773 | /* border: 2px solid yellow; */ 774 | background-color: yellow; 775 | border-radius: 50px; 776 | 777 | &:hover { 778 | width: 202px; 779 | height: 72px; 780 | 781 | >.right { 782 | width: 30%; 783 | height: 50px; 784 | margin-top: 10px; 785 | 786 | } 787 | } 788 | 789 | * { 790 | justify-content: center; 791 | align-items: center; 792 | } 793 | 794 | >.left { 795 | align-items: center; 796 | /* border: 2px solid red; */ 797 | width: 70%; 798 | height: 100%; 799 | color: rgb(0, 0, 0); 800 | font-size: 18px; 801 | 802 | } 803 | 804 | >.right { 805 | align-items: center; 806 | /* border: 2px solid red; */ 807 | margin-top: 7%; 808 | width: 20%; 809 | height: 40px; 810 | color: rgb(186, 187, 120); 811 | background-color: black; 812 | border-radius: 50px; 813 | font-size: 25px; 814 | transition: .4s; 815 | 816 | } 817 | } 818 | 819 | >h3 { 820 | height: 5%; 821 | width: 40%; 822 | /* border: 2px solid red; */ 823 | font-weight: 400; 824 | font-size: 28px; 825 | 826 | } 827 | } 828 | 829 | >.pictureone { 830 | margin-top: 100px; 831 | width: 20%; 832 | height: 70%; 833 | /* border: 2px solid yellow; */ 834 | display: grid; 835 | grid-template-columns: repeat(1, 100%); 836 | grid-template-rows: repeat(2, 45%); 837 | 838 | gap: 20px; 839 | 840 | /* *{width: 100%; 841 | height: 100%;} */ 842 | >div { 843 | 844 | >figure { 845 | width: 100%; 846 | height: 100%; 847 | /* border: 2px solid rgb(179, 255, 0); */ 848 | position: relative; 849 | overflow: hidden; 850 | 851 | * { 852 | position: absolute; 853 | } 854 | 855 | &:hover::after { 856 | height: 100%; 857 | } 858 | 859 | &::after { 860 | content: ''; 861 | display: flex; 862 | position: absolute; 863 | width: 100%; 864 | height: 0; 865 | bottom: 0; 866 | background-color: rgba(0, 0, 0, 0.425); 867 | transition: .4s; 868 | 869 | } 870 | 871 | 872 | &:hover { 873 | >img { 874 | transform: scale(1.1); 875 | transition: 0.4s; 876 | 877 | } 878 | 879 | >figcaption { 880 | opacity: 1; 881 | 882 | } 883 | 884 | } 885 | 886 | >img { 887 | transition: 0.4s; 888 | width: 100%; 889 | height: 100%; 890 | /* border: 2px solid red; */ 891 | 892 | object-fit: cover; 893 | 894 | } 895 | 896 | >figcaption { 897 | width: 100%; 898 | height: 100%; 899 | opacity: 0; 900 | transition: .4s; 901 | 902 | /* border: 2px solid red; */ 903 | * { 904 | color: rgba(255, 255, 255, 0.726); 905 | text-transform: uppercase; 906 | 907 | } 908 | 909 | >h3 { 910 | width: 100%; 911 | height: 20%; 912 | /* border: 2px solid rgb(229, 255, 0); */ 913 | margin-top: 50%; 914 | z-index: 10; 915 | } 916 | 917 | >p { 918 | width: 100%; 919 | height: 20%; 920 | margin-top: 65%; 921 | color: rgb(255, 255, 255); 922 | 923 | /* border: 2px solid rgb(0, 255, 21); */ 924 | 925 | } 926 | 927 | >.icon { 928 | width: 100%; 929 | height: 50%; 930 | display: flex; 931 | justify-content: space-evenly; 932 | margin-top: 80%; 933 | 934 | /* border: 2px solid rgb(255, 0, 0); */ 935 | :nth-of-type(1) { 936 | margin-right: 45%; 937 | font-size: 20px; 938 | } 939 | 940 | :nth-of-type(2) { 941 | margin-right: 15%; 942 | font-size: 20px; 943 | } 944 | 945 | :nth-of-type(3) { 946 | margin-right: -15%; 947 | font-size: 20px; 948 | } 949 | 950 | :nth-of-type(4) { 951 | margin-right: -45%; 952 | font-size: 20px; 953 | } 954 | 955 | 956 | >a { 957 | width: 10%; 958 | height: 20%; 959 | /* border: 2px solid rgb(255, 153, 0); */ 960 | 961 | z-index: 10; 962 | 963 | >i { 964 | font-size: 20px; 965 | color: rgb(255, 255, 255); 966 | 967 | &:hover { 968 | color: yellow; 969 | } 970 | } 971 | 972 | } 973 | 974 | } 975 | 976 | &::before { 977 | content: ''; 978 | display: flex; 979 | position: absolute; 980 | width: 0px; 981 | height: 5px; 982 | bottom: 0; 983 | left: 0; 984 | z-index: 20; 985 | /* border: 2px solid red; */ 986 | background-color: rgb(229, 255, 0); 987 | transition: 1s; 988 | } 989 | 990 | &:hover::before { 991 | width: 100%; 992 | } 993 | } 994 | 995 | } 996 | 997 | } 998 | 999 | } 1000 | 1001 | 1002 | >.picturetwo { 1003 | margin-top: 160px; 1004 | width: 20%; 1005 | height: 70%; 1006 | /* border: 2px solid yellow; */ 1007 | display: grid; 1008 | grid-template-columns: repeat(1, 100%); 1009 | grid-template-rows: repeat(2, 45%); 1010 | 1011 | gap: 20px; 1012 | 1013 | /* *{width: 100%; 1014 | height: 100%;} */ 1015 | >div { 1016 | 1017 | >figure { 1018 | width: 100%; 1019 | height: 100%; 1020 | /* border: 2px solid rgb(179, 255, 0); */ 1021 | position: relative; 1022 | overflow: hidden; 1023 | 1024 | * { 1025 | position: absolute; 1026 | } 1027 | 1028 | &:hover::after { 1029 | height: 100%; 1030 | } 1031 | 1032 | &::after { 1033 | content: ''; 1034 | display: flex; 1035 | position: absolute; 1036 | width: 100%; 1037 | height: 0; 1038 | bottom: 0; 1039 | background-color: rgba(0, 0, 0, 0.425); 1040 | transition: .4s; 1041 | 1042 | } 1043 | 1044 | &:hover { 1045 | >img { 1046 | transform: scale(1.1); 1047 | transition: 0.4s; 1048 | 1049 | } 1050 | 1051 | >figcaption { 1052 | opacity: 1; 1053 | 1054 | } 1055 | } 1056 | 1057 | >img { 1058 | transition: 0.4s; 1059 | width: 100%; 1060 | height: 100%; 1061 | /* border: 2px solid red; */ 1062 | 1063 | object-fit: cover; 1064 | } 1065 | 1066 | >figcaption { 1067 | width: 100%; 1068 | height: 100%; 1069 | opacity: 0; 1070 | transition: .4s; 1071 | 1072 | /* border: 2px solid red; */ 1073 | * { 1074 | color: rgba(255, 255, 255, 0.726); 1075 | text-transform: uppercase; 1076 | 1077 | } 1078 | 1079 | >h3 { 1080 | width: 100%; 1081 | height: 20%; 1082 | /* border: 2px solid rgb(229, 255, 0); */ 1083 | margin-top: 50%; 1084 | z-index: 10; 1085 | 1086 | 1087 | } 1088 | 1089 | >p { 1090 | width: 100%; 1091 | height: 20%; 1092 | margin-top: 65%; 1093 | color: rgb(255, 255, 255); 1094 | 1095 | /* border: 2px solid rgb(0, 255, 21); */ 1096 | 1097 | } 1098 | 1099 | >.icon { 1100 | width: 100%; 1101 | height: 50%; 1102 | display: flex; 1103 | justify-content: space-evenly; 1104 | margin-top: 80%; 1105 | 1106 | /* border: 2px solid rgb(255, 0, 0); */ 1107 | :nth-of-type(1) { 1108 | margin-right: 45%; 1109 | font-size: 20px; 1110 | } 1111 | 1112 | :nth-of-type(2) { 1113 | margin-right: 15%; 1114 | font-size: 20px; 1115 | } 1116 | 1117 | :nth-of-type(3) { 1118 | margin-right: -15%; 1119 | font-size: 20px; 1120 | } 1121 | 1122 | :nth-of-type(4) { 1123 | margin-right: -45%; 1124 | font-size: 20px; 1125 | } 1126 | 1127 | 1128 | >a { 1129 | width: 10%; 1130 | height: 20%; 1131 | /* border: 2px solid rgb(255, 153, 0); */ 1132 | 1133 | z-index: 10; 1134 | 1135 | >i { 1136 | font-size: 20px; 1137 | color: rgb(255, 255, 255); 1138 | 1139 | &:hover { 1140 | color: yellow; 1141 | } 1142 | } 1143 | 1144 | } 1145 | } 1146 | 1147 | &::before { 1148 | content: ''; 1149 | display: flex; 1150 | position: absolute; 1151 | width: 0px; 1152 | height: 5px; 1153 | bottom: 0; 1154 | left: 0; 1155 | z-index: 20; 1156 | /* border: 2px solid red; */ 1157 | background-color: rgb(255, 230, 0); 1158 | transition: 1s; 1159 | } 1160 | 1161 | &:hover::before { 1162 | width: 100%; 1163 | } 1164 | } 1165 | } 1166 | } 1167 | } 1168 | 1169 | 1170 | } 1171 | } 1172 | 1173 | /* ************************end***************************** */ 1174 | 1175 | .part7 { 1176 | width: 100%; 1177 | height: 250px; 1178 | /* border: 2px solid rgb(0, 0, 0); */ 1179 | background: rgb(242, 242, 242); 1180 | padding-top: 20px; 1181 | margin-top: 100px; 1182 | 1183 | >.part7-1 { 1184 | 1185 | >.row { 1186 | height: 200px; 1187 | /* border: 2px solid red; */ 1188 | margin-top: 100px; 1189 | justify-content: end; 1190 | 1191 | >div { 1192 | width: 25%; 1193 | height: 100%; 1194 | /* border: 2px solid yellow; */ 1195 | 1196 | >p { 1197 | color: white; 1198 | text-transform: capitalize; 1199 | line-height: 30px; 1200 | color: rgb(110, 89, 89); 1201 | direction: rtl; 1202 | font-size: 15px; 1203 | } 1204 | } 1205 | 1206 | >span { 1207 | position: relative; 1208 | top: 14px; 1209 | width: 30%; 1210 | height: 100%; 1211 | border-top: 1px solid rgb(110, 89, 89); 1212 | margin-left: 20px; 1213 | } 1214 | } 1215 | } 1216 | } 1217 | 1218 | .part7-2 { 1219 | padding-top: 200px; 1220 | width: 100%; 1221 | height: 700px; 1222 | margin-top: -150px; 1223 | display: flex; 1224 | justify-content: center; 1225 | /* border: 2px solid black; */ 1226 | background: rgb(242, 242, 242); 1227 | 1228 | >.row { 1229 | height: 100%; 1230 | justify-content: center; 1231 | 1232 | >h3 { 1233 | display: flex; 1234 | flex-wrap: wrap; 1235 | color: black; 1236 | font-size: 60px; 1237 | text-transform: uppercase; 1238 | width: 100%; 1239 | height: 100px; 1240 | /* border: 2px solid black; */ 1241 | padding: 0 25%; 1242 | font-weight: 200; 1243 | 1244 | } 1245 | } 1246 | } 1247 | 1248 | .part7-3 { 1249 | width: 100%; 1250 | height: 300px; 1251 | margin-top: -400px; 1252 | /* border: 2px solid red; */ 1253 | display: flex; 1254 | justify-content: center; 1255 | align-items: center; 1256 | 1257 | .row { 1258 | width: 90%; 1259 | height: 250px; 1260 | justify-content: center; 1261 | align-items: center; 1262 | /* border: 2px solid red; */ 1263 | 1264 | >figure { 1265 | width: 10%; 1266 | height: 50%; 1267 | border-radius: 50%; 1268 | overflow: hidden; 1269 | padding: 7px; 1270 | 1271 | &:first-child { 1272 | border: 4px outset rgb(21, 22, 17); 1273 | } 1274 | 1275 | >img { 1276 | width: 100%; 1277 | height: 100%; 1278 | border-radius: 50%; 1279 | } 1280 | 1281 | &:nth-of-type(2) { 1282 | margin-top: 100px; 1283 | } 1284 | } 1285 | } 1286 | } 1287 | 1288 | .part7-4 { 1289 | width: 100%; 1290 | height: 300px; 1291 | /* border: 2px solid red; */ 1292 | background: rgb(242, 242, 242); 1293 | 1294 | * { 1295 | width: 100%; 1296 | height: 15%; 1297 | /* border: 2px solid red; */ 1298 | text-align: center; 1299 | color: rgb(110, 89, 89); 1300 | 1301 | } 1302 | 1303 | >h2 { 1304 | text-transform: uppercase; 1305 | color: black; 1306 | } 1307 | 1308 | >.first { 1309 | font-size: 15px; 1310 | } 1311 | 1312 | >.second { 1313 | width: 42%; 1314 | align-items: center; 1315 | margin-left: 50%; 1316 | transform: translateX(-50%); 1317 | line-height: 40px; 1318 | font-size: 20px; 1319 | } 1320 | 1321 | } 1322 | 1323 | .part7-5 { 1324 | width: 100%; 1325 | height: 200px; 1326 | /* border: 2px solid red; */ 1327 | display: flex; 1328 | justify-content: center; 1329 | background: rgb(242, 242, 242); 1330 | 1331 | >.row { 1332 | /* border: 2px solid red; */ 1333 | width: 90%; 1334 | height: 100%; 1335 | justify-content: center; 1336 | align-items: center; 1337 | 1338 | >figure { 1339 | width: 20%; 1340 | height: 50%; 1341 | /* border: 2px solid red; */ 1342 | display: flex; 1343 | justify-content: center; 1344 | align-items: center; 1345 | 1346 | >img { 1347 | width: 50%; 1348 | height: 50%; 1349 | } 1350 | } 1351 | } 1352 | } 1353 | 1354 | /* *********************end**************** */ 1355 | 1356 | .popular { 1357 | width: 100%; 1358 | height: 200px; 1359 | /* border: 2px solid red; */ 1360 | font-size: 30px; 1361 | padding-left: 7%; 1362 | display: flex; 1363 | align-items: end; 1364 | } 1365 | 1366 | 1367 | 1368 | 1369 | /* ******************2 pic**************** */ 1370 | .picture { 1371 | width: 100%; 1372 | height: 700px; 1373 | /* border: 2px solid red; */ 1374 | 1375 | >.row { 1376 | width: 100%; 1377 | height: 100%; 1378 | background-color: white; 1379 | justify-content: space-evenly; 1380 | 1381 | >figure { 1382 | width: 40%; 1383 | height: 100%; 1384 | /* border: 2px solid black; */ 1385 | display: block; 1386 | overflow: hidden; 1387 | position: relative; 1388 | 1389 | &:hover { 1390 | >img { 1391 | width: 110%; 1392 | height: 60%; 1393 | left: -5%; 1394 | bottom: -5%; 1395 | } 1396 | 1397 | >figcaption { 1398 | >.readmore { 1399 | opacity: 1; 1400 | } 1401 | } 1402 | } 1403 | 1404 | * { 1405 | width: 100%; 1406 | height: 50%; 1407 | /* border: 2px solid rgb(23, 139, 160); */ 1408 | } 1409 | 1410 | >img { 1411 | /* empty */ 1412 | transition: 1s; 1413 | bottom: 0; 1414 | left: 0; 1415 | 1416 | } 1417 | 1418 | >figcaption { 1419 | display: block; 1420 | height: 20%; 1421 | margin-top: 50px; 1422 | 1423 | * { 1424 | display: flex; 1425 | justify-content: start; 1426 | text-transform: capitalize; 1427 | font-size: 12px; 1428 | } 1429 | 1430 | >h4 { 1431 | width: 100%; 1432 | text-transform: uppercase; 1433 | color: rgb(110, 89, 89); 1434 | 1435 | >span { 1436 | text-transform: uppercase; 1437 | 1438 | color: rgb(151, 151, 27); 1439 | width: 10%; 1440 | } 1441 | } 1442 | 1443 | >h2 { 1444 | font-size: 30px; 1445 | font-weight: 600; 1446 | } 1447 | 1448 | >p { 1449 | font-size: 20px; 1450 | color: rgb(110, 89, 89); 1451 | margin-top: 40px; 1452 | 1453 | } 1454 | 1455 | >.readmore { 1456 | /* border: 2px solid red; */ 1457 | width: 100%; 1458 | height: 100%; 1459 | display: flex; 1460 | opacity: 0; 1461 | transition: 1s; 1462 | 1463 | &:hover { 1464 | >i { 1465 | transform: rotateZ(90deg); 1466 | transition: 1s; 1467 | background-color: yellow; 1468 | } 1469 | } 1470 | 1471 | * { 1472 | width: 100%; 1473 | font-size: 18px; 1474 | justify-content: center; 1475 | align-items: center; 1476 | height: 6%; 1477 | position: absolute; 1478 | z-index: 0; 1479 | top: 50%; 1480 | left: 25%; 1481 | margin-left: 50px; 1482 | 1483 | 1484 | } 1485 | 1486 | >a { 1487 | /* border: 2px solid red; */ 1488 | width: 20%; 1489 | } 1490 | 1491 | >i { 1492 | 1493 | /* border: 2px solid red; */ 1494 | width: 8%; 1495 | color: black; 1496 | background-color: rgba(128, 128, 128, 0.459); 1497 | border-radius: 50%; 1498 | margin: 0 5px; 1499 | cursor: pointer; 1500 | margin-left: 30%; 1501 | transition: 1s; 1502 | } 1503 | 1504 | } 1505 | } 1506 | } 1507 | } 1508 | } 1509 | 1510 | /* **************************************************** */ 1511 | footer { 1512 | width: 100%; 1513 | height: 800px; 1514 | background-color: black; 1515 | display: flex; 1516 | justify-content: center; 1517 | margin-top: 50px; 1518 | 1519 | >.row { 1520 | width: 90%; 1521 | height: 100%; 1522 | /* border: 2px solid white; */ 1523 | margin-top: 150px; 1524 | 1525 | >.first { 1526 | width: 100%; 1527 | height: 45%; 1528 | /* border: 2px solid red; */ 1529 | display: flex; 1530 | 1531 | >.firstdiv { 1532 | width: 33.33%; 1533 | height: 100%; 1534 | /* border: 2px solid yellow; */ 1535 | 1536 | >h2 { 1537 | color: white; 1538 | font-size: 50px; 1539 | text-transform: capitalize; 1540 | font-weight: 400; 1541 | } 1542 | 1543 | >p { 1544 | color: gray; 1545 | font-size: 15px; 1546 | margin-top: 40px; 1547 | } 1548 | 1549 | >form { 1550 | width: 100%; 1551 | height: 20%; 1552 | /* border: 2px solid red; */ 1553 | display: flex; 1554 | justify-content: center; 1555 | align-items: center; 1556 | position: relative; 1557 | margin-top: 50px; 1558 | 1559 | * { 1560 | position: absolute; 1561 | } 1562 | 1563 | >input { 1564 | width: 80%; 1565 | height: 100%; 1566 | border-radius: 50px; 1567 | background-color: rgba(128, 128, 128, 0.404); 1568 | transition: 1s; 1569 | 1570 | &:hover { 1571 | background-color: white; 1572 | } 1573 | } 1574 | 1575 | >a { 1576 | width: 12%; 1577 | height: 65%; 1578 | /* border: 2px solid red; */ 1579 | z-index: 10; 1580 | margin-left: 55%; 1581 | transition: 0.4s; 1582 | 1583 | &:hover { 1584 | transform: scale(1.2); 1585 | } 1586 | 1587 | >i { 1588 | width: 100%; 1589 | height: 100%; 1590 | font-size: 20px; 1591 | display: flex; 1592 | justify-content: center; 1593 | align-items: center; 1594 | background-color: yellow; 1595 | border-radius: 50%; 1596 | } 1597 | } 1598 | } 1599 | } 1600 | 1601 | >.seconddiv { 1602 | width: 33.33%; 1603 | height: 100%; 1604 | 1605 | /* border: 2px solid yellow; */ 1606 | >ul { 1607 | width: 100%; 1608 | height: 100%; 1609 | padding-left: 40%; 1610 | /* border: 2px solid red; */ 1611 | 1612 | >li { 1613 | width: 100%; 1614 | height: 15%; 1615 | /* border: 2px solid yellow; */ 1616 | margin: 10px 0; 1617 | transition: .4s; 1618 | 1619 | &:nth-of-type(1) { 1620 | >a { 1621 | color: orangered; 1622 | } 1623 | 1624 | } 1625 | 1626 | &:hover { 1627 | margin-left: 20px; 1628 | 1629 | >a { 1630 | color: orangered; 1631 | 1632 | } 1633 | } 1634 | 1635 | >a { 1636 | color: white; 1637 | font-size: 30px; 1638 | 1639 | } 1640 | } 1641 | } 1642 | } 1643 | 1644 | >.thirddiv { 1645 | width: 33.33%; 1646 | height: 100%; 1647 | /* border: 2px solid yellow; */ 1648 | 1649 | >ul { 1650 | width: 100%; 1651 | height: 100%; 1652 | padding: 15px 0 0 100px; 1653 | 1654 | >li { 1655 | width: 100%; 1656 | height: 10%; 1657 | margin: 20px 0; 1658 | 1659 | &:hover { 1660 | >a { 1661 | color: white; 1662 | } 1663 | } 1664 | 1665 | >a { 1666 | color: gray; 1667 | font-size: 18px; 1668 | text-transform: capitalize; 1669 | 1670 | } 1671 | } 1672 | } 1673 | } 1674 | } 1675 | 1676 | >.second { 1677 | width: 100%; 1678 | height: 200px; 1679 | /* border: 2px solid red; */ 1680 | margin-bottom: 50px; 1681 | 1682 | >.row { 1683 | width: 100%; 1684 | height: 100%; 1685 | 1686 | >.left { 1687 | width: 33.33%; 1688 | height: 100%; 1689 | 1690 | /* border: 2px solid yellow; */ 1691 | >ul { 1692 | width: 50%; 1693 | height: 20%; 1694 | /* border: 2px solid red; */ 1695 | display: flex; 1696 | 1697 | * { 1698 | width: 20%; 1699 | height: 20%; 1700 | } 1701 | 1702 | >li { 1703 | /* border: 2px solid rgb(233, 233, 233); */ 1704 | 1705 | 1706 | >a { 1707 | 1708 | /* border: 2px solid yellow; */ 1709 | >i { 1710 | color: white; 1711 | font-size: 20px; 1712 | transition: 1s; 1713 | 1714 | } 1715 | } 1716 | 1717 | &:hover { 1718 | >a { 1719 | >i { 1720 | color: orangered; 1721 | } 1722 | } 1723 | } 1724 | } 1725 | } 1726 | 1727 | >p { 1728 | color: rgba(255, 255, 255, 0.61); 1729 | margin-top: 20%; 1730 | text-transform: capitalize; 1731 | font-size: 25px; 1732 | } 1733 | } 1734 | 1735 | >.center { 1736 | width: 33.33%; 1737 | height: 100%; 1738 | /* border: 2px solid yellow; */ 1739 | 1740 | * { 1741 | color: rgba(255, 255, 255, 0.404); 1742 | text-transform: capitalize; 1743 | display: flex; 1744 | justify-content: center; 1745 | } 1746 | 1747 | >h2 { 1748 | /* empty */ 1749 | } 1750 | 1751 | >p { 1752 | /* border: 2px solid yellow; */ 1753 | width: 50%; 1754 | margin: 15% 0 0 25%; 1755 | line-height: 30px; 1756 | } 1757 | } 1758 | } 1759 | } 1760 | } 1761 | } 1762 | 1763 | /* ---------------profile----------------- */ 1764 | .box { 1765 | width: 200px; 1766 | height: 200px; 1767 | position: fixed; 1768 | right: 20px; 1769 | bottom: 20px; 1770 | z-index: 100; 1771 | 1772 | /* border: 1px solid red; */ 1773 | >div { 1774 | width: 100%; 1775 | height: 100%; 1776 | /* background-color: red; */ 1777 | position: absolute; 1778 | bottom: 0; 1779 | left: 0; 1780 | 1781 | &:first-of-type { 1782 | background-color: rgb(0, 0, 0); 1783 | border-radius: 27% 73% 19% 81% / 75% 26% 74% 25% ; 1784 | animation: anime2 infinite alternate 2s; 1785 | 1786 | } 1787 | 1788 | &:last-of-type { 1789 | background-image: url(../img/profit.jpg); 1790 | background-position: 0px -70px; 1791 | background-size: cover; 1792 | border-radius: 34% 66% 36% 64% / 59% 38% 62% 41% ; 1793 | animation: anime1 infinite alternate 2s; 1794 | } 1795 | } 1796 | &:hover{ 1797 | >a{ 1798 | left: -50px; 1799 | } 1800 | } 1801 | >a{ 1802 | position: absolute; 1803 | text-decoration: none; 1804 | font-size: 30px; 1805 | left: 100px; 1806 | transition: .4s; 1807 | &:nth-of-type(1){ 1808 | top: 30px; 1809 | /* left: -10px; */ 1810 | transition: 1s; 1811 | } 1812 | &:nth-of-type(2){ 1813 | top: 70px; 1814 | transition: 1.5s; 1815 | } 1816 | &:nth-of-type(3){ 1817 | top: 110px; 1818 | transition: 2s; 1819 | } 1820 | } 1821 | } 1822 | 1823 | @keyframes anime1 { 1824 | to { 1825 | border-radius: 52% 48% 27% 73% / 43% 20% 80% 57%; 1826 | } 1827 | } 1828 | 1829 | @keyframes anime2 { 1830 | to { 1831 | border-radius: 69% 31% 85% 15% / 16% 61% 39% 84%; 1832 | } 1833 | } 1834 | /* ---------------------------------------------------- */ --------------------------------------------------------------------------------