├── assets
    └── css
    │   └── main.css
└── contact.html


/assets/css/main.css:
--------------------------------------------------------------------------------
   1 | @import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,500,600,700|Poppins:300,400,600,700&display=swap");
   2 | @import url("https://fonts.googleapis.com/css2?family=Aladin&display=swap");
   3 | 
   4 | html,
   5 | body {
   6 |   padding: 0;
   7 |   margin: 0;
   8 |   -webkit-box-sizing: border-box;
   9 |   box-sizing: border-box;
  10 |   -webkit-font-smoothing: antialiased;
  11 |   scroll-behavior: smooth;
  12 |   font-family: "Josefin Sans", sans-serif;
  13 | }
  14 | body a,
  15 | body button {
  16 |   text-decoration: none;
  17 |   font-family: "Josefin Sans", sans-serif;
  18 | }
  19 | body a:hover {
  20 |   text-decoration: none;
  21 |   color: unset;
  22 | }
  23 | input:focus,
  24 | select:focus,
  25 | button:focus,
  26 | textarea:focus {
  27 |   outline: none;
  28 | }
  29 | h1,
  30 | h2,
  31 | h3,
  32 | h4,
  33 | h5,
  34 | h6,
  35 | p,
  36 | span,
  37 | a {
  38 |   margin: 0;
  39 |   padding: 0;
  40 |   font-family: "Josefin Sans", sans-serif;
  41 | }
  42 | .container {
  43 |   width: 100%;
  44 |   -webkit-box-pack: center;
  45 |   -ms-flex-pack: center;
  46 |   justify-content: center;
  47 |   -webkit-box-align: center;
  48 |   -ms-flex-align: center;
  49 |   align-items: center;
  50 |   -webkit-box-orient: vertical;
  51 |   -webkit-box-direction: normal;
  52 |   -ms-flex-direction: column;
  53 |   flex-direction: column;
  54 |   display: -webkit-box;
  55 |   display: -ms-flexbox;
  56 |   display: flex;
  57 | }
  58 | .rows {
  59 |   width: 100%;
  60 |   -webkit-box-align: center;
  61 |   -ms-flex-align: center;
  62 |   align-items: center;
  63 |   display: -webkit-box;
  64 |   display: -ms-flexbox;
  65 |   display: flex;
  66 |   -ms-flex-wrap: wrap;
  67 |   flex-wrap: wrap;
  68 |   -webkit-box-pack: center;
  69 |   -ms-flex-pack: center;
  70 |   justify-content: center;
  71 |   align-items: center;
  72 | }
  73 | .App {
  74 |   display: flex;
  75 |   flex-direction: column;
  76 |   min-height: 100vh;
  77 |   width: 100%;
  78 | }
  79 | main {
  80 |   flex-grow: 1;
  81 | }
  82 | .alert {
  83 |   padding: 1rem;
  84 |   border: 0.5rem solid transparent;
  85 |   border-radius: 0.5rem;
  86 |   width: 100%;
  87 |   margin-top: 2rem;
  88 |   margin-bottom: 2rem;
  89 | }
  90 | .alert-info {
  91 |   color: #2020a0;
  92 |   background-color: #ebebeb;
  93 |   text-align: center;
  94 | }
  95 | .alert-success {
  96 |   color: #549400;
  97 |   background-color: #eaf5eb;
  98 |   text-align: center;
  99 | }
 100 | .alert-danger {
 101 |   color: rgb(165, 14, 14);
 102 |   background-color: #f3e6e6;
 103 |   text-align: center;
 104 | }
 105 | .hrizontalLine {
 106 |   width: 40%;
 107 |   height: 3px;
 108 |   background-color: #046fc7;
 109 |   margin-top: 6%;
 110 | }
 111 | .diff {
 112 |   width: 50%;
 113 |   background-color: orange;
 114 | }
 115 | /*---------------------------------------------------------*/
 116 | /* HEADER                                 */
 117 | /*---------------------------------------------------------*/
 118 | header {
 119 |   padding-top: 1%;
 120 |   padding-bottom: 1%;
 121 | }
 122 | .header-white {
 123 |   background-color: white;
 124 | }
 125 | .header-black {
 126 |   background-color: #001517;
 127 | }
 128 | .header-black .menu a {
 129 |   color: white;
 130 | }
 131 | .nav {
 132 |   width: 100%;
 133 |   -webkit-box-pack: justify;
 134 |   -ms-flex-pack: justify;
 135 |   justify-content: space-between;
 136 |   -webkit-box-align: center;
 137 |   -ms-flex-align: center;
 138 |   align-items: center;
 139 |   display: -webkit-box;
 140 |   display: -ms-flexbox;
 141 |   display: flex;
 142 | }
 143 | .nav2 {
 144 |   width: 40%;
 145 |   -webkit-box-pack: justify;
 146 |   -ms-flex-pack: justify;
 147 |   justify-content: space-between;
 148 |   -webkit-box-align: center;
 149 |   -ms-flex-align: center;
 150 |   align-items: center;
 151 |   display: -webkit-box;
 152 |   display: -ms-flexbox;
 153 |   display: flex;
 154 |   height: 50px;
 155 | }
 156 | .menu {
 157 |   width: 20%;
 158 |   -webkit-box-pack: center;
 159 |   -ms-flex-pack: center;
 160 |   justify-content: center;
 161 |   -webkit-box-align: center;
 162 |   -ms-flex-align: center;
 163 |   align-items: center;
 164 |   display: -webkit-box;
 165 |   display: -ms-flexbox;
 166 |   display: flex;
 167 |   height: 50px;
 168 | }
 169 | .nav1 {
 170 |   display: -webkit-box;
 171 |   display: -ms-flexbox;
 172 |   display: flex;
 173 |   -webkit-box-pack: start;
 174 |   -ms-flex-pack: start;
 175 |   justify-content: flex-start;
 176 |   -webkit-box-align: center;
 177 |   -ms-flex-align: center;
 178 |   align-items: center;
 179 |   width: 25%;
 180 | }
 181 | .nav1 a img {
 182 |   width: 20%;
 183 |   height: 50px;
 184 |   -o-object-fit: contain;
 185 |   object-fit: contain;
 186 | }
 187 | .menu:hover a,
 188 | .buttonMain a:hover {
 189 |   color: orange;
 190 |   -webkit-transition: 0.5s linear;
 191 |   -o-transition: 0.5s linear;
 192 |   transition: 0.5s linear;
 193 | }
 194 | .menu a {
 195 |   font-size: 15px;
 196 |   color: rgb(0, 0, 0);
 197 |   text-transform: capitalize;
 198 | }
 199 | /*---------------------------------------------------------*/
 200 | /* HEADER END                                 */
 201 | /*---------------------------------------------------------*/
 202 | 
 203 | .Mainbackground {
 204 |   width: 100%;
 205 |   display: -webkit-box;
 206 |   display: -ms-flexbox;
 207 |   display: flex;
 208 |   -webkit-box-orient: vertical;
 209 |   -webkit-box-direction: normal;
 210 |   -ms-flex-direction: column;
 211 |   flex-direction: column;
 212 |   -webkit-box-pack: center;
 213 |   -ms-flex-pack: center;
 214 |   justify-content: center;
 215 |   -webkit-box-align: center;
 216 |   -ms-flex-align: center;
 217 |   align-items: center;
 218 |   position: relative;
 219 |   margin-top: -10px;
 220 | }
 221 | .topBackground {
 222 |   width: 100%;
 223 |   height: 300px;
 224 |   background-color: #001517;
 225 | }
 226 | svg {
 227 |   position: relative;
 228 |   top: 0;
 229 |   left: 0;
 230 |   right: 0;
 231 |   width: 100% !important;
 232 |   height: 100%;
 233 |   margin-top: -2%;
 234 | }
 235 | 
 236 | .fluids {
 237 |   width: 100%;
 238 |   position: absolute;
 239 |   top: 0;
 240 |   left: 0;
 241 |   right: 0;
 242 | }
 243 | /* SCREEN */
 244 | .screenWords {
 245 |   width: 100%;
 246 |   padding-top: 20%;
 247 | }
 248 | .screenWords h1 {
 249 |   font-size: 40px;
 250 |   font-weight: bold;
 251 |   margin-bottom: 2%;
 252 |   color: white;
 253 | }
 254 | .screenWords p {
 255 |   padding-right: 25%;
 256 |   font-size: 18px;
 257 |   color: rgb(179, 179, 179);
 258 |   margin-top: 7%;
 259 | }
 260 | .twoMainButton {
 261 |   width: 60%;
 262 |   display: -webkit-box;
 263 |   display: -ms-flexbox;
 264 |   display: flex;
 265 |   -webkit-box-pack: justify;
 266 |   -ms-flex-pack: justify;
 267 |   justify-content: space-between;
 268 |   margin-top: 10%;
 269 | }
 270 | .buttonMain a {
 271 |   text-transform: uppercase;
 272 |   font-size: 15px;
 273 |   letter-spacing: 2px;
 274 |   color: white;
 275 |   font-weight: 300;
 276 | }
 277 | .screenImage {
 278 |   width: 100%;
 279 | }
 280 | .screenImage img {
 281 |   width: 100%;
 282 |   height: 500px;
 283 |   -o-object-fit: contain;
 284 |   object-fit: contain;
 285 | }
 286 | 
 287 | /*---------------------------------------------------------*/
 288 | /* EXPERIANCE                                */
 289 | /*---------------------------------------------------------*/
 290 | .section {
 291 |   width: 100%;
 292 |   padding-top: 10%;
 293 |   padding-bottom: 3%;
 294 |   display: -webkit-box;
 295 |   display: -ms-flexbox;
 296 |   display: flex;
 297 |   -webkit-box-orient: vertical;
 298 |   -webkit-box-direction: normal;
 299 |   -ms-flex-direction: column;
 300 |   flex-direction: column;
 301 |   -webkit-box-pack: center;
 302 |   -ms-flex-pack: center;
 303 |   justify-content: center;
 304 |   -webkit-box-align: center;
 305 |   -ms-flex-align: center;
 306 |   align-items: center;
 307 | }
 308 | .tab {
 309 |   overflow: hidden;
 310 |   display: -webkit-box;
 311 |   display: -ms-flexbox;
 312 |   width: 54%;
 313 |   display: flex;
 314 |   -webkit-box-pack: justify;
 315 |   -ms-flex-pack: justify;
 316 |   justify-content: space-between;
 317 |   -webkit-box-align: center;
 318 |   -ms-flex-align: center;
 319 |   align-items: center;
 320 | }
 321 | a.nav-item.nav-link {
 322 |   background-color: inherit;
 323 |   border: none;
 324 |   outline: none;
 325 |   cursor: pointer;
 326 |   padding: 3.2% 10.5%;
 327 |   -webkit-transition: 0.3s;
 328 |   -o-transition: 0.3s;
 329 |   transition: 0.3s;
 330 |   font-size: 13px;
 331 |   background-color: #001517;
 332 |   color: white;
 333 |   text-transform: uppercase;
 334 |   display: flex;
 335 |   -webkit-box-pack: justify;
 336 |   -ms-flex-pack: justify;
 337 |   justify-content: space-between;
 338 |   -webkit-box-align: center;
 339 |   -ms-flex-align: center;
 340 |   align-items: center;
 341 | }
 342 | a.nav-item.nav-link:hover {
 343 |   background-color: #03393f;
 344 | }
 345 | a.nav-item.nav-link.active {
 346 |   background-color: #03393f;
 347 | }
 348 | 
 349 | .tabcontent {
 350 |   width: 80%;
 351 |   margin-top: 5%;
 352 |   text-align: center;
 353 | }
 354 | 
 355 | .section .sectionBox {
 356 |   width: 100%;
 357 |   display: -webkit-box;
 358 |   display: -ms-flexbox;
 359 |   display: flex;
 360 |   -webkit-box-pack: center;
 361 |   -ms-flex-pack: center;
 362 |   justify-content: center;
 363 |   -webkit-box-align: center;
 364 |   -ms-flex-align: center;
 365 |   align-items: center;
 366 |   -webkit-box-orient: vertical;
 367 |   -webkit-box-direction: normal;
 368 |   -ms-flex-direction: column;
 369 |   flex-direction: column;
 370 |   padding: 10px;
 371 |   margin-top: 4%;
 372 | }
 373 | .section .sectionBox:hover {
 374 |   -webkit-box-shadow: 0 0 16px 0 rgba(230, 230, 230, 1);
 375 |   box-shadow: 0 0 16px 0 rgba(230, 230, 230, 1);
 376 |   -webkit-transform: scale(0.9);
 377 |   -ms-transform: scale(0.9);
 378 |   transform: scale(0.9);
 379 |   -webkit-transition: 0.5s linear;
 380 |   -o-transition: 0.5s linear;
 381 |   transition: 0.5s linear;
 382 |   -webkit-transition-delay: 0.2s;
 383 |   -o-transition-delay: 0.2s;
 384 |   transition-delay: 0.2s;
 385 | }
 386 | 
 387 | .section .sectionImage {
 388 |   width: 70px;
 389 |   height: 70px;
 390 |   border-radius: 100px;
 391 |   display: -webkit-box;
 392 |   display: -ms-flexbox;
 393 |   display: flex;
 394 |   -webkit-box-pack: center;
 395 |   -ms-flex-pack: center;
 396 |   justify-content: center;
 397 |   -webkit-box-align: center;
 398 |   -ms-flex-align: center;
 399 |   align-items: center;
 400 |   background: #f4f4f4;
 401 |   margin-bottom: 10%;
 402 | }
 403 | 
 404 | .section .sectionImage img {
 405 |   width: 100%;
 406 |   height: 40px;
 407 |   -o-object-fit: contain;
 408 |   object-fit: contain;
 409 | }
 410 | 
 411 | .section .sectionWords {
 412 |   width: 100%;
 413 | }
 414 | 
 415 | .section .sectionWords h4 {
 416 |   margin-bottom: 4%;
 417 |   color: #001517;
 418 |   font-size: 15px;
 419 |   font-weight: bold;
 420 | }
 421 | 
 422 | .section .sectionWords p,
 423 | .section .sectionWords ul li {
 424 |   margin-top: 1%;
 425 |   font-weight: 300;
 426 | }
 427 | 
 428 | .section .sectionWords ul li {
 429 |   padding: 0;
 430 |   margin: 0;
 431 |   text-align: start;
 432 |   font-family: "Josefin Sans", sans-serif;
 433 | }
 434 | 
 435 | /*---------------------------------------------------------*/
 436 | /* EXPERIANCE  END                                */
 437 | /*---------------------------------------------------------*/
 438 | 
 439 | /*---------------------------------------------------------*/
 440 | /* ABOUT US                                */
 441 | /*---------------------------------------------------------*/
 442 | #about {
 443 |   width: 100%;
 444 |   padding-top: 9%;
 445 |   padding-bottom: 5%;
 446 | }
 447 | .aboutMeImg {
 448 |   width: 90%;
 449 |   overflow: hidden;
 450 |   border-radius: 10px;
 451 | }
 452 | .aboutMeImg img {
 453 |   width: 100%;
 454 |   height: 500px;
 455 |   -o-object-fit: cover;
 456 |   object-fit: cover;
 457 | }
 458 | .about-me h5 {
 459 |   text-transform: uppercase;
 460 |   font-size: 20px;
 461 |   font-family: "Josefin Sans", sans-serif;
 462 |   font-weight: bold;
 463 | }
 464 | .aboutHorizontalLine {
 465 |   width: 60px;
 466 |   height: 3px;
 467 |   background-color: #e49504;
 468 |   border: 0;
 469 |   margin-top: 3%;
 470 |   margin-bottom: 5%;
 471 | }
 472 | .about-me p {
 473 |   font-size: 18px;
 474 |   margin-top: 3%;
 475 |   line-height: 30px;
 476 |   font-weight: 300;
 477 | }
 478 | /*---------------------------------------------------------*/
 479 | /* ABOUT US END                                */
 480 | /*---------------------------------------------------------*/
 481 | 
 482 | /*---------------------------------------------------------*/
 483 | /* CONTACT ME                               */
 484 | /*---------------------------------------------------------*/
 485 | .contactme {
 486 |   width: 100%;
 487 |   background-image: url("http://www.mmasynergy.com/images/inner-banner.jpg");
 488 |   background-position: center;
 489 |   background-repeat: no-repeat;
 490 |   background-size: cover;
 491 |   margin-top: 5%;
 492 | }
 493 | .contactOverlay {
 494 |   width: 100%;
 495 |   padding-top: 10%;
 496 |   padding-bottom: 10%;
 497 |   background-color: rgba(0, 0, 0, 0.921);
 498 | }
 499 | .form {
 500 |   width: 100%;
 501 |   display: -webkit-box;
 502 |   display: -ms-flexbox;
 503 |   display: flex;
 504 |   -webkit-box-pack: center;
 505 |   -ms-flex-pack: center;
 506 |   justify-content: center;
 507 |   -webkit-box-align: center;
 508 |   -ms-flex-align: center;
 509 |   align-items: center;
 510 | }
 511 | form {
 512 |   width: 80%;
 513 |   display: -webkit-box;
 514 |   display: -ms-flexbox;
 515 |   display: flex;
 516 |   -webkit-box-pack: justify;
 517 |   -ms-flex-pack: justify;
 518 |   justify-content: space-between;
 519 |   background-color: white;
 520 |   overflow: hidden;
 521 |   border-radius: 20px;
 522 | }
 523 | form button {
 524 |   width: 190px;
 525 |   height: 55px;
 526 |   border: 0;
 527 |   border-radius: 5px;
 528 |   background-color: #001517;
 529 |   -webkit-transition: 0.5s linear;
 530 |   -o-transition: 0.5s linear;
 531 |   transition: 0.5s linear;
 532 |   color: white;
 533 |   font-weight: bold;
 534 |   margin-top: 20%;
 535 | }
 536 | form button:hover {
 537 |   background-color: unset;
 538 |   border: 2px solid #e49504;
 539 |   -webkit-transition: 0.5s linear;
 540 |   -o-transition: 0.5s linear;
 541 |   transition: 0.5s linear;
 542 |   color: black;
 543 | }
 544 | .formWord {
 545 |   width: 40%;
 546 |   padding: 4%;
 547 | }
 548 | .formWord h2 {
 549 |   font-size: 35px;
 550 |   font-weight: bold;
 551 |   font-family: "Josefin Sans", sans-serif;
 552 |   margin-bottom: 10%;
 553 | }
 554 | .formWord input {
 555 |   width: 100%;
 556 |   height: 50px;
 557 |   margin-bottom: 10%;
 558 |   border: 0;
 559 |   margin-top: 2%;
 560 |   padding-left: 3%;
 561 |   background: #ffffff;
 562 |   -webkit-box-shadow: 0px 0px 48px 0px rgb(218, 218, 218);
 563 |   box-shadow: 0px 0px 48px 0px rgb(218, 218, 218);
 564 | }
 565 | .formWord textarea {
 566 |   width: 100%;
 567 |   margin-bottom: 10%;
 568 |   border: 0;
 569 |   margin-top: 2%;
 570 |   height: 80px;
 571 |   color: black;
 572 |   -webkit-box-shadow: 0px 0px 48px 0px rgb(218, 218, 218);
 573 |   box-shadow: 0px 0px 48px 0px rgb(218, 218, 218);
 574 |   padding-left: 3%;
 575 | }
 576 | /*---------------------------------------------------------*/
 577 | /* CONTACT ME END                                */
 578 | /*---------------------------------------------------------*/
 579 | 
 580 | /* SHOP DETAILS */
 581 | .article {
 582 |   width: 100%;
 583 |   display: -webkit-box;
 584 |   display: -ms-flexbox;
 585 |   display: flex;
 586 |   -webkit-box-pack: center;
 587 |   -ms-flex-pack: center;
 588 |   justify-content: center;
 589 |   -webkit-box-align: center;
 590 |   -ms-flex-align: center;
 591 |   align-items: center;
 592 |   -webkit-box-orient: vertical;
 593 |   -webkit-box-direction: normal;
 594 |   -ms-flex-direction: column;
 595 |   flex-direction: column;
 596 |   padding-top: 7%;
 597 |   text-align: center;
 598 |   padding-bottom: 10%;
 599 | }
 600 | .article h2 {
 601 |   font-size: 20px;
 602 |   font-weight: bold;
 603 |   text-transform: uppercase;
 604 |   font-family: "Josefin Sans", sans-serif;
 605 | }
 606 | .article hr {
 607 |   width: 50px;
 608 |   height: 4px;
 609 |   border: 0px;
 610 |   background-color: #e49504;
 611 |   margin-bottom: 6%;
 612 | }
 613 | .shopcontainer .shop {
 614 |   margin-bottom: 40px;
 615 | }
 616 | .shopBack {
 617 |   height: 250px;
 618 |   position: relative;
 619 |   overflow: hidden;
 620 |   width: 100%;
 621 |   background-color: #f3f6fb;
 622 | }
 623 | .shopBack img {
 624 |   width: 100%;
 625 |   height: 250px;
 626 |   -o-object-fit: contain;
 627 |   object-fit: contain;
 628 | }
 629 | .shoplebal {
 630 |   position: absolute;
 631 |   left: 40px;
 632 |   bottom: -60px;
 633 |   width: 70%;
 634 |   display: -webkit-box;
 635 |   display: -ms-flexbox;
 636 |   display: flex;
 637 |   -webkit-box-pack: space-evenly;
 638 |   -ms-flex-pack: space-evenly;
 639 |   justify-content: space-evenly;
 640 |   -webkit-box-align: center;
 641 |   -ms-flex-align: center;
 642 |   align-items: center;
 643 |   -webkit-transition: all, 0.5s;
 644 |   -o-transition: all, 0.5s;
 645 |   transition: all, 0.5s;
 646 |   height: 50px;
 647 |   background-color: #001517;
 648 | }
 649 | .shoplebal a {
 650 |   font-weight: bold;
 651 |   color: #ffffff;
 652 | }
 653 | .shopBack:hover .shoplebal {
 654 |   bottom: 15px;
 655 |   color: #e49504;
 656 | }
 657 | .shoptext {
 658 |   text-align: center;
 659 |   padding-top: 10px;
 660 |   margin-bottom: 10%;
 661 | }
 662 | .shoptext p {
 663 |   font-weight: bold;
 664 | }
 665 | .shoptext h3 {
 666 |   color: #252525;
 667 |   margin-top: 2px;
 668 |   font-size: 15px;
 669 |   font-family: "Josefin Sans", sans-serif;
 670 |   margin-top: 7%;
 671 | }
 672 | 
 673 | /*---------------------------------------------------------*/
 674 | /* SCREEN                                 */
 675 | /*---------------------------------------------------------*/
 676 | .banner {
 677 |   width: 100%;
 678 |   background-image: url("https://mockupsq.com/wp-content/uploads/edd/2019/12/perspective-screen-view-psd-mockup-2.jpg");
 679 |   background-repeat: no-repeat;
 680 |   background-position: center;
 681 |   background-size: cover;
 682 | }
 683 | .overlay {
 684 |   width: 100%;
 685 |   background-color: rgba(0, 0, 0, 0.821);
 686 |   padding-top: 8%;
 687 |   padding-bottom: 8%;
 688 | }
 689 | .overlay .container h1 {
 690 |   font-size: 50px;
 691 |   font-weight: bold;
 692 |   margin-bottom: 2%;
 693 |   color: white;
 694 |   text-transform: capitalize;
 695 |   font-family: "Josefin Sans", sans-serif;
 696 | }
 697 | .overlay .container button {
 698 |   width: 190px;
 699 |   height: 55px;
 700 |   border: 0;
 701 |   border-radius: 5px;
 702 |   margin-top: 2%;
 703 |   background-color: #e49504;
 704 |   -webkit-transition: 0.5s linear;
 705 |   -o-transition: 0.5s linear;
 706 |   transition: 0.5s linear;
 707 | }
 708 | .overlay .container button a {
 709 |   color: white;
 710 |   font-weight: bold;
 711 | }
 712 | .overlay .container button:hover {
 713 |   background-color: unset;
 714 |   border: 2px solid #e49504;
 715 |   -webkit-transition: 0.5s linear;
 716 |   -o-transition: 0.5s linear;
 717 |   transition: 0.5s linear;
 718 | }
 719 | .overlay .container p {
 720 |   padding-left: 15%;
 721 |   padding-right: 15%;
 722 |   text-align: center;
 723 |   font-size: 18px;
 724 |   color: #e0e0e0;
 725 |   margin-bottom: 3%;
 726 | }
 727 | /*---------------------------------------------------------*/
 728 | /* SCREEN END                                 */
 729 | /*---------------------------------------------------------*/
 730 | 
 731 | /* PORTFOLIO */
 732 | .slides {
 733 |   width: 100%;
 734 |   margin-top: 7%;
 735 |   margin-bottom: 2%;
 736 | }
 737 | .sliderWords {
 738 |   width: 100%;
 739 |   display: -webkit-box;
 740 |   display: -ms-flexbox;
 741 |   display: flex;
 742 |   -webkit-box-align: center;
 743 |   -ms-flex-align: center;
 744 |   align-items: center;
 745 | }
 746 | .sliderWordsImage {
 747 |   width: 40%;
 748 | }
 749 | .sliderWordsImage img {
 750 |   width: 90%;
 751 |   height: 150px;
 752 |   -o-object-fit: contain;
 753 |   object-fit: contain;
 754 | }
 755 | .sliderHeading {
 756 |   width: 60%;
 757 | }
 758 | .sliderHeading h4 {
 759 |   text-transform: uppercase;
 760 |   margin-bottom: 3%;
 761 |   color: rgb(0, 0, 0);
 762 |   margin-top: 2%;
 763 |   font-family: "Josefin Sans", sans-serif;
 764 |   font-size: 15px;
 765 |   font-weight: bold;
 766 | }
 767 | .sliderHeading p {
 768 |   font-size: 16px;
 769 |   color: gray;
 770 |   font-weight: 100;
 771 | }
 772 | .sliderIterms {
 773 |   width: 60%;
 774 | }
 775 | .sliderShow {
 776 |   width: 100%;
 777 |   background-color: #f5f5f5;
 778 |   border-radius: 10px;
 779 |   position: relative;
 780 |   overflow: hidden;
 781 | }
 782 | .sliderShow img {
 783 |   width: 100%;
 784 |   height: 200px;
 785 |   -o-object-fit: contain;
 786 |   object-fit: contain;
 787 | }
 788 | .sliderShow:hover .saleslebal {
 789 |   background-color: rgba(0, 0, 0, 0.745);
 790 | }
 791 | .saleslebal {
 792 |   position: absolute;
 793 |   width: 100%;
 794 |   display: -webkit-box;
 795 |   display: -ms-flexbox;
 796 |   display: flex;
 797 |   -webkit-box-pack: space-evenly;
 798 |   -ms-flex-pack: space-evenly;
 799 |   justify-content: space-evenly;
 800 |   -webkit-box-align: center;
 801 |   -ms-flex-align: center;
 802 |   align-items: center;
 803 |   -webkit-transition: all, 0.5s;
 804 |   -o-transition: all, 0.5s;
 805 |   transition: all, 0.5s;
 806 |   height: 200px;
 807 |   top: 0;
 808 | }
 809 | .salesLebalIcon {
 810 |   font-size: 16px;
 811 |   color: #1c1c1c;
 812 |   border: 1px solid #ffffff;
 813 |   background: #ffffff;
 814 |   border-radius: 50%;
 815 |   -webkit-transition: all, 1s;
 816 |   -o-transition: all, 1s;
 817 |   transition: all, 1s;
 818 |   position: relative;
 819 |   bottom: -100%;
 820 |   width: 50px;
 821 |   height: 50px;
 822 |   display: -webkit-box;
 823 |   display: -ms-flexbox;
 824 |   display: flex;
 825 |   -webkit-box-align: center;
 826 |   -ms-flex-align: center;
 827 |   align-items: center;
 828 |   -webkit-box-pack: center;
 829 |   -ms-flex-pack: center;
 830 |   justify-content: center;
 831 | }
 832 | .salesLebalIcon a i {
 833 |   position: relative;
 834 |   -webkit-transition: all, 0.3s;
 835 |   -o-transition: all, 0.3s;
 836 |   transition: all, 0.3s;
 837 |   color: black;
 838 | }
 839 | .salesLebalIcon:hover {
 840 |   background: orange;
 841 |   border-color: orange;
 842 | }
 843 | .salesLebalIcon:hover a i {
 844 |   color: white;
 845 | }
 846 | .saleslebal:hover .salesLebalIcon {
 847 |   bottom: 0;
 848 | }
 849 | /* END PORTIFOLIO */
 850 | 
 851 | /* APP */
 852 | .blogcontainer {
 853 |   padding-top: 6%;
 854 |   padding-bottom: 6%;
 855 | }
 856 | .blogBox {
 857 |   margin-bottom: 70px;
 858 | }
 859 | .blogBox_pic {
 860 |   width: 100%;
 861 |   height: 250px;
 862 |   overflow: hidden;
 863 |   position: relative;
 864 |   transition: all, 0.5s;
 865 |   border: 1.5px solid gainsboro;
 866 |   padding: 2px;
 867 | }
 868 | .blogBox_pic img {
 869 |   width: 100%;
 870 |   height: 250px;
 871 |   object-fit: cover;
 872 |   overflow: hidden;
 873 | }
 874 | .blogLebal {
 875 |   width: 100%;
 876 |   height: 250px;
 877 |   background-color: rgba(0, 0, 0, 0.87);
 878 |   position: absolute;
 879 |   display: flex;
 880 |   justify-content: center;
 881 |   align-items: center;
 882 |   top: 0;
 883 |   opacity: 0;
 884 |   transition: all, 0.5s;
 885 | }
 886 | .blogLebal a {
 887 |   background-color: white;
 888 |   border-radius: 5px;
 889 |   font-size: 16px;
 890 |   color: #001517;
 891 |   padding: 12px 30px;
 892 | }
 893 | .blogLebal a:hover {
 894 |   color: #001517;
 895 | }
 896 | .blogBox_pic:hover .blogLebal {
 897 |   opacity: 1;
 898 |   transition: all, 0.5s;
 899 | }
 900 | 
 901 | .blog_text {
 902 |   padding-top: 5px;
 903 | }
 904 | 
 905 | .blog_text ul {
 906 |   margin-bottom: 15px;
 907 |   margin: 0;
 908 |   padding: 0;
 909 |   margin-bottom: 6px;
 910 | }
 911 | 
 912 | .blog_text ul li {
 913 |   font-size: 16px;
 914 |   color: #b2b2b2;
 915 |   list-style: none;
 916 |   display: inline-block;
 917 |   margin-right: 17px;
 918 |   font-family: "Cairo", sans-serif;
 919 | }
 920 | 
 921 | .blog_text ul li:last-child {
 922 |   margin-right: 0;
 923 | }
 924 | 
 925 | .blog_text h5 {
 926 |   margin-bottom: 6px;
 927 |   font-family: "Cairo", sans-serif;
 928 |   font-weight: bold;
 929 | }
 930 | 
 931 | .blog_text h5 a {
 932 |   font-size: 17px;
 933 |   color: #1c1c1c;
 934 |   text-transform: capitalize;
 935 |   font-weight: 700;
 936 |   font-family: "Cairo", sans-serif;
 937 | }
 938 | 
 939 | .blog_text p {
 940 |   line-height: 25px;
 941 |   color: #383838;
 942 |   font-family: "Cairo", sans-serif;
 943 | }
 944 | .blog_text .blog__btn {
 945 |   display: flex;
 946 |   justify-content: center;
 947 |   align-items: center;
 948 |   font-size: 14px;
 949 |   color: #1c1c1c;
 950 |   text-transform: uppercase;
 951 |   letter-spacing: 1px;
 952 |   border: 1px solid #b2b2b2;
 953 |   width: 39%;
 954 |   height: 50px;
 955 |   border-radius: 25px;
 956 |   margin-top: 6%;
 957 | }
 958 | .blog_text .blog__btn i {
 959 |   position: relative;
 960 |   top: 1px;
 961 |   margin-left: 5px;
 962 | }
 963 | .blog_pagination {
 964 |   padding-top: 10px;
 965 | }
 966 | 
 967 | /* END APP */
 968 | /* DETAILS */
 969 | .appDetail {
 970 |   padding: 10% 10%;
 971 |   display: flex;
 972 |   justify-content: center;
 973 |   align-items: center;
 974 | }
 975 | .screens {
 976 |   width: 100%;
 977 |   margin-top: 5%;
 978 | }
 979 | .screensBox {
 980 |   margin-bottom: 30%;
 981 | }
 982 | .screensBox h4 {
 983 |   text-transform: capitalize;
 984 |   font-size: 20px;
 985 |   font-family: "Josefin Sans", sans-serif;
 986 |   margin-bottom: 10%;
 987 |   font-weight: bold;
 988 | }
 989 | .screensImage {
 990 |   width: 100%;
 991 | }
 992 | .screensImage img {
 993 |   width: 100%;
 994 |   height: 600px;
 995 |   object-fit: cover;
 996 | }
 997 | /* DETAILS END */
 998 | /* WEBSITE DETAILS PAGE */
 999 | .websitesBorder {
1000 |   padding-bottom: 4%;
1001 |   padding-top: 4%;
1002 | }
1003 | .sidebar h3 {
1004 |   font-weight: bold;
1005 | }
1006 | .webdetails {
1007 |   width: 100%;
1008 |   box-shadow: 0px 0px 48px 0px rgb(218, 218, 218);
1009 |   padding-top: 2%;
1010 |   padding-bottom: 2%;
1011 | }
1012 | .webdetails img {
1013 |   width: 100%;
1014 |   height: auto;
1015 | }
1016 | /* WEBSITE DETAILS END */
1017 | /* FOOTER */
1018 | footer {
1019 |   width: 100%;
1020 |   padding-top: 5%;
1021 |   padding-bottom: 5%;
1022 |   background-color: #001517;
1023 | }
1024 | .footerContainer {
1025 |   width: 100%;
1026 |   display: -webkit-box;
1027 |   display: -ms-flexbox;
1028 |   display: flex;
1029 |   -webkit-box-pack: center;
1030 |   -ms-flex-pack: center;
1031 |   justify-content: center;
1032 |   -webkit-box-align: center;
1033 |   -ms-flex-align: center;
1034 |   align-items: center;
1035 |   -webkit-box-orient: vertical;
1036 |   -webkit-box-direction: normal;
1037 |   -ms-flex-direction: column;
1038 |   flex-direction: column;
1039 | }
1040 | .footerLogo {
1041 |   width: 20%;
1042 |   display: -webkit-box;
1043 |   display: -ms-flexbox;
1044 |   display: flex;
1045 |   -webkit-box-pack: center;
1046 |   -ms-flex-pack: center;
1047 |   justify-content: center;
1048 |   -webkit-box-align: center;
1049 |   -ms-flex-align: center;
1050 |   align-items: center;
1051 |   -webkit-box-orient: vertical;
1052 |   -webkit-box-direction: normal;
1053 |   -ms-flex-direction: column;
1054 |   flex-direction: column;
1055 | }
1056 | .footerLogo img {
1057 |   width: 70%;
1058 |   height: 100px;
1059 |   -o-object-fit: contain;
1060 |   object-fit: contain;
1061 | }
1062 | .footerNav,
1063 | .footerMedias {
1064 |   width: 40%;
1065 |   display: -webkit-box;
1066 |   display: -ms-flexbox;
1067 |   display: flex;
1068 |   -webkit-box-pack: justify;
1069 |   -ms-flex-pack: justify;
1070 |   justify-content: space-between;
1071 |   -webkit-box-align: center;
1072 |   -ms-flex-align: center;
1073 |   align-items: center;
1074 |   margin-top: 2%;
1075 | }
1076 | .footerNav p a {
1077 |   font-size: 12px;
1078 |   color: rgb(255, 255, 255);
1079 |   text-transform: uppercase;
1080 |   font-weight: bold;
1081 | }
1082 | .footerMedias {
1083 |   width: 30%;
1084 |   margin-bottom: 3%;
1085 | }
1086 | .footerMedia {
1087 |   width: 40px;
1088 |   height: 40px;
1089 |   background-color: blanchedalmond;
1090 |   border-radius: 100%;
1091 |   display: -webkit-box;
1092 |   display: -ms-flexbox;
1093 |   display: flex;
1094 |   -webkit-box-pack: center;
1095 |   -ms-flex-pack: center;
1096 |   justify-content: center;
1097 |   -webkit-box-align: center;
1098 |   -ms-flex-align: center;
1099 |   align-items: center;
1100 | }
1101 | .footerMedia a {
1102 |   color: rgb(22, 22, 22);
1103 | }
1104 | .footerContainer span {
1105 |   color: rgb(255, 255, 255);
1106 |   font-weight: 100;
1107 | }
1108 | /* FOOTER END */
1109 | 


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Hello, I'm Irene.</title>
 8 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 9 |     <link rel="stylesheet" href="assets/css/main.css" />
10 |     <link
11 |       rel="shortcut icon"
12 |       href="./assets/images/gifs/logo.png"
13 |       type="image/x-icon"
14 |     />
15 |     <link
16 |       href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
17 |       rel="stylesheet"
18 |     />
19 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
20 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
21 |     <link
22 |       href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;900&amp;display=swap"
23 |       rel="stylesheet"
24 |     />
25 |     <link
26 |       rel="stylesheet"
27 |       href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
28 |     />
29 |   </head>
30 | 
31 |   <body>
32 |     <div class="contactme" id="contact">
33 |       <div class="contactOverlay">
34 |         <div class="container">
35 |           <div class="form">
36 |             <form action="" onSubmit="">
37 |               <div class="formWord">
38 |                 <h2>Say Hello!</h2>
39 |                 <span>Full Name</span>
40 |                 <br />
41 |                 <input class="input100" type="text" name="fullName" required />
42 |                 <br />
43 |                 <span>Phone Number</span>
44 |                 <br />
45 |                 <input class="input100" type="text" name="phone" required />
46 |                 <br />
47 |                 <span>Enter Email</span>
48 |                 <br />
49 |                 <input class="input100" type="text" name="email" required />
50 |                 <br />
51 |               </div>
52 |               <div class="formWord">
53 |                 <span>Message</span>
54 |                 <br />
55 |                 <textarea name="message" required></textarea>
56 |                 <br />
57 |                 <button>SUBMIT</button>
58 | 
59 |                 <div class="row">All Done</div>
60 |               </div>
61 |             </form>
62 |           </div>
63 |         </div>
64 |       </div>
65 |     </div>
66 |   </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------