├── LICENSE.md ├── README.md ├── details.html ├── dist ├── css │ ├── main.css │ └── vendor │ │ ├── ajax-loader.gif │ │ ├── bootstrap.min.css │ │ ├── fonts │ │ ├── slick.eot │ │ ├── slick.svg │ │ ├── slick.ttf │ │ └── slick.woff │ │ ├── slick-theme.css │ │ └── slick.css ├── images │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ ├── authorsm.png │ ├── banner.jpg │ ├── blogd01.jpg │ ├── blogd02.jpg │ ├── category-01.jpg │ ├── category-02.jpg │ ├── category-03.jpg │ ├── cowner.png │ ├── detailsbanner.jpg │ ├── screenshot.jpeg │ ├── sm-01.jpg │ ├── sm-02.jpg │ ├── sm-03.jpg │ ├── sm-04.jpg │ ├── sm-05.jpg │ └── sm-06.jpg └── js │ ├── bootstrap.bundle.min.js │ ├── jquery-3.6.0.min.js │ ├── main.js │ ├── menu.js │ └── slick.min.js ├── index.html ├── screenshot.jpeg ├── search.html └── src └── scss ├── _reset.scss ├── _typography.scss ├── _variable.scss ├── main.scss └── pages ├── _blogdetails.scss ├── _blogysearch.scss ├── _index.scss └── _theme.scss /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Echotemplate.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Templatecookie](https://templatecookie.com) 2 | Templatecookie.com creates quality templates and php scripts. Templatecookie has many free HTML & Figma templates available for professional use. Templatecookie is famous for its premium PHP Scripts available on [Codeanyon Marketplace](https://codecanyon.net/user/templatecookie). Browse [Templatecookie](https://templatecookie.com) today and discover awesome digital products. 3 | 4 | # [Blogy - Modern Blog Website HTML Template](https://www.templatecookie.com/products) 5 | 6 | > Blogy is a modern blog website HTML template with two different type of blog cards and also added blog details page. 7 | 8 | Check the [Live Demo here](https://blogy-modern-blog.netlify.app/). 9 | 10 | ![](screenshot.jpeg) 11 | 12 | ## Pages List 13 | - Home (Landing Page) 14 | - Blog Details 15 | - Search 16 | 17 | ## Framework & Technologies 18 | - bootstrap 19 | - jQuery 20 | - scss 21 | 22 | ## Credits 23 | - Design & Developed by [Templatecookie](https://templatecookie.com) 24 | 25 | ## License 26 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 27 | -------------------------------------------------------------------------------- /dist/css/main.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap"); 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | font-family: 'PT Serif', serif; 5 | } 6 | 7 | .fs-5 { 8 | font-size: 18px !important; 9 | } 10 | 11 | .fs-6 { 12 | font-size: 16px !important; 13 | } 14 | 15 | h3 { 16 | font-size: 64px; 17 | line-height: 72px; 18 | font-weight: 700; 19 | font-family: "PT Serif", serif; 20 | color: #272343; 21 | } 22 | 23 | h4 { 24 | font-size: 40px; 25 | line-height: 48px; 26 | font-weight: 700; 27 | font-family: "PT Serif", serif; 28 | color: #272343; 29 | } 30 | 31 | h5 { 32 | font-size: 32px; 33 | line-height: 38px; 34 | font-weight: 700; 35 | font-family: "PT Serif", serif; 36 | color: #272343; 37 | } 38 | 39 | h6 { 40 | font-size: 28px; 41 | line-height: 36px; 42 | font-weight: 700; 43 | font-family: "PT Serif", serif; 44 | color: #272343; 45 | } 46 | 47 | p { 48 | font-size: 16px; 49 | font-weight: 400; 50 | font-family: "Poppins", sans-serif; 51 | } 52 | 53 | @media (max-width: 420px) { 54 | h3 { 55 | font-size: 30px; 56 | line-height: 38px; 57 | } 58 | h4 { 59 | font-size: 28px; 60 | line-height: 36px; 61 | } 62 | h5 { 63 | font-size: 24px; 64 | } 65 | p { 66 | font-size: 14px; 67 | } 68 | .fs-6 { 69 | font-size: 14px !important; 70 | } 71 | } 72 | 73 | @media only screen and (min-width: 420px) and (max-width: 574px) { 74 | h3 { 75 | font-size: 30px; 76 | line-height: 38px; 77 | } 78 | h4 { 79 | font-size: 26px; 80 | line-height: 34px; 81 | } 82 | h5 { 83 | font-size: 22px; 84 | line-height: 30px; 85 | } 86 | } 87 | 88 | @media (min-width: 575px) and (max-width: 767px) { 89 | h3 { 90 | font-size: 30px; 91 | line-height: 38px; 92 | } 93 | h4 { 94 | font-size: 26px; 95 | line-height: 34px; 96 | } 97 | h5 { 98 | font-size: 22px; 99 | line-height: 30px; 100 | } 101 | } 102 | 103 | @media (min-width: 768px) and (max-width: 991px) { 104 | h3 { 105 | font-size: 34px; 106 | line-height: 42px; 107 | } 108 | h4 { 109 | font-size: 26px; 110 | line-height: 34px; 111 | } 112 | h5 { 113 | font-size: 22px; 114 | line-height: 30px; 115 | } 116 | } 117 | 118 | @media (min-width: 992px) and (max-width: 1200px) { 119 | h4 { 120 | font-size: 36px !important; 121 | } 122 | h6, 123 | h5 { 124 | font-size: 24px !important; 125 | } 126 | } 127 | 128 | * { 129 | margin: 0; 130 | padding: 0; 131 | outline: 0; 132 | -webkit-box-sizing: border-box; 133 | box-sizing: border-box; 134 | } 135 | 136 | html { 137 | scroll-behavior: smooth; 138 | } 139 | 140 | img { 141 | border: 0; 142 | outline: 0; 143 | max-width: 100%; 144 | vertical-align: middle; 145 | } 146 | 147 | a { 148 | text-decoration: none !important; 149 | } 150 | 151 | /* 152 | * ---------------------------------------------------------------------------------------- 153 | Author : Zakir Soft 154 | Template Name: Blogy HTML Template 155 | Version : 1.0 156 | * ---------------------------------------------------------------------------------------- 157 | */ 158 | .heading { 159 | margin-bottom: 50px; 160 | position: relative; 161 | padding-bottom: 10px; 162 | } 163 | 164 | .heading::after { 165 | position: absolute; 166 | content: ''; 167 | bottom: 0; 168 | left: 0; 169 | width: 112px; 170 | height: 4px; 171 | background-color: #FB743E; 172 | } 173 | 174 | .latest-post-area { 175 | background-color: #F5F5F5; 176 | } 177 | 178 | .latest-post-area .blog-item-info { 179 | background: #FFFFFF; 180 | } 181 | 182 | .all-post-area { 183 | background-color: #F5F5F5; 184 | } 185 | 186 | .all-post-area .blog-item-info { 187 | background: #FFFFFF; 188 | } 189 | 190 | .featured-category h6 { 191 | font-size: 20px; 192 | } 193 | 194 | .featured-category-item { 195 | margin-bottom: 8px; 196 | background-size: cover; 197 | background-position: center; 198 | background-repeat: no-repeat; 199 | padding: 20px; 200 | } 201 | 202 | .featured-category-item a { 203 | background: #FFFFFF; 204 | padding: 8px 18px; 205 | font-family: "Poppins", sans-serif; 206 | color: #272343; 207 | font-size: 14px; 208 | -webkit-transition: 0.3s all linear; 209 | transition: 0.3s all linear; 210 | } 211 | 212 | .featured-category-item a:hover { 213 | background-color: #FB743E; 214 | color: white; 215 | } 216 | 217 | .all-tags { 218 | margin-top: 24px; 219 | } 220 | 221 | .all-tags h6 { 222 | font-size: 20px; 223 | } 224 | 225 | .all-tags-list a { 226 | display: inline-block; 227 | padding: 8px 16px; 228 | background: rgba(39, 35, 67, 0.05); 229 | font-size: 16px; 230 | font-family: "Poppins", sans-serif; 231 | color: #272343; 232 | -webkit-transition: 0.3s all linear; 233 | transition: 0.3s all linear; 234 | } 235 | 236 | .all-tags-list a:hover { 237 | background-color: #FB743E; 238 | color: white; 239 | } 240 | 241 | .banner { 242 | overflow: hidden; 243 | } 244 | 245 | .banner-slider { 246 | height: 920px; 247 | display: -webkit-box; 248 | display: -ms-flexbox; 249 | display: flex; 250 | -webkit-box-align: center; 251 | -ms-flex-align: center; 252 | align-items: center; 253 | } 254 | 255 | .banner-content-main { 256 | padding: 60px 30px; 257 | background-color: #FFFFFF; 258 | } 259 | 260 | .banner-content-main span.fs-6 { 261 | padding-left: 32px; 262 | font-family: "Poppins", sans-serif; 263 | color: #272343; 264 | } 265 | 266 | .banner-content-main h4 { 267 | margin-bottom: 12px; 268 | font-size: 48px; 269 | } 270 | 271 | .banner-content-main h4 a { 272 | display: block; 273 | color: #272343; 274 | } 275 | 276 | .banner-content-main p { 277 | color: #6D7280; 278 | margin: 10px 0px 26px 0px; 279 | } 280 | 281 | .banner-content-main .btn-default { 282 | height: auto; 283 | padding: 12px 29px; 284 | } 285 | 286 | .blog-date { 287 | display: -webkit-box; 288 | display: -ms-flexbox; 289 | display: flex; 290 | -webkit-box-align: center; 291 | -ms-flex-align: center; 292 | align-items: center; 293 | } 294 | 295 | .blog-date span { 296 | font-size: 16px; 297 | color: #6D7280; 298 | font-family: "Poppins", sans-serif; 299 | } 300 | 301 | .blog-date-start { 302 | padding-right: 10px; 303 | position: relative; 304 | } 305 | 306 | .blog-date-start::after { 307 | position: absolute; 308 | content: ''; 309 | top: 50%; 310 | -webkit-transform: translateY(-50%); 311 | transform: translateY(-50%); 312 | right: -2px; 313 | width: 5px; 314 | height: 5px; 315 | background-color: #6D7280; 316 | border-radius: 50%; 317 | } 318 | 319 | .blog-date-end { 320 | padding-left: 10px; 321 | } 322 | 323 | .slick-dots { 324 | display: inline-block; 325 | width: auto; 326 | bottom: 18%; 327 | left: 65px; 328 | } 329 | 330 | .slick-dots li button::before { 331 | width: 10px; 332 | height: 10px; 333 | background-color: rgba(251, 116, 62, 0.5); 334 | border-radius: 50%; 335 | color: transparent; 336 | } 337 | 338 | .slick-dots li.slick-active button:before { 339 | opacity: 1; 340 | background-color: #FB743E; 341 | color: transparent; 342 | } 343 | 344 | .slick-prev, 345 | .slick-next { 346 | top: 80%; 347 | height: 54px; 348 | width: 54px; 349 | background-color: #FFFFFF; 350 | border-radius: 50%; 351 | } 352 | 353 | .slick-prev:before, 354 | .slick-next:before { 355 | color: #272343; 356 | } 357 | 358 | .slick-prev { 359 | left: 0; 360 | -webkit-transition: 0.3s all linear; 361 | transition: 0.3s all linear; 362 | } 363 | 364 | .slick-prev:hover::before { 365 | color: white; 366 | } 367 | 368 | .slick-next { 369 | left: 155px; 370 | -webkit-transition: 0.3s all linear; 371 | transition: 0.3s all linear; 372 | } 373 | 374 | .slick-next:hover::before { 375 | color: white; 376 | } 377 | 378 | .slick-prev:hover, 379 | .slick-prev:focus, 380 | .slick-next:hover, 381 | .slick-next:focus { 382 | background-color: #FB743E; 383 | } 384 | 385 | @media (max-width: 420px) { 386 | .heading { 387 | margin-bottom: 30px; 388 | } 389 | .all-tags-list li { 390 | margin-bottom: 10px; 391 | } 392 | .banner-content-main h4 { 393 | font-size: 32px; 394 | } 395 | .banner-content-main { 396 | padding: 30px 20px; 397 | } 398 | .slick-dots li button::before { 399 | background-color: white !important; 400 | } 401 | .banner-slider { 402 | height: auto; 403 | padding: 30px 0px 60px 0px; 404 | } 405 | .slick-prev, 406 | .slick-next { 407 | top: 95%; 408 | } 409 | .slick-prev { 410 | left: 10%; 411 | } 412 | .slick-next { 413 | right: 10% !important; 414 | left: auto; 415 | } 416 | .slick-dots { 417 | bottom: 2%; 418 | left: 50% !important; 419 | -webkit-transform: translateX(-50%); 420 | transform: translateX(-50%); 421 | } 422 | .slick-list { 423 | margin-bottom: 30px; 424 | } 425 | } 426 | 427 | @media only screen and (min-width: 420px) and (max-width: 574px) { 428 | .heading { 429 | margin-bottom: 30px; 430 | } 431 | .all-tags-list li { 432 | margin-bottom: 10px; 433 | } 434 | .banner-content-main h4 { 435 | font-size: 32px; 436 | } 437 | .banner-content-main { 438 | padding: 30px 20px; 439 | } 440 | .slick-dots li button::before { 441 | background-color: white !important; 442 | } 443 | .banner-slider { 444 | height: auto; 445 | padding: 30px 0px 60px 0px; 446 | } 447 | .slick-prev, 448 | .slick-next { 449 | top: 95%; 450 | } 451 | .slick-prev { 452 | left: 10%; 453 | } 454 | .slick-next { 455 | right: 10% !important; 456 | left: auto; 457 | } 458 | .slick-dots { 459 | bottom: 2%; 460 | left: 50% !important; 461 | -webkit-transform: translateX(-50%); 462 | transform: translateX(-50%); 463 | } 464 | .slick-list { 465 | margin-bottom: 30px; 466 | } 467 | } 468 | 469 | @media (min-width: 575px) and (max-width: 767px) { 470 | .heading { 471 | margin-bottom: 30px; 472 | } 473 | .banner-content-main h4 { 474 | font-size: 32px; 475 | } 476 | .banner-content-main { 477 | padding: 30px 20px; 478 | } 479 | .slick-dots li button::before { 480 | background-color: white !important; 481 | } 482 | .banner-slider { 483 | height: auto; 484 | padding: 30px 0px 60px 0px; 485 | } 486 | .slick-prev, 487 | .slick-next { 488 | top: 95%; 489 | } 490 | .slick-prev { 491 | left: 10%; 492 | } 493 | .slick-next { 494 | right: 10% !important; 495 | left: auto; 496 | } 497 | .slick-dots { 498 | bottom: 2%; 499 | left: 50% !important; 500 | -webkit-transform: translateX(-50%); 501 | transform: translateX(-50%); 502 | } 503 | .slick-list { 504 | margin-bottom: 30px; 505 | } 506 | } 507 | 508 | @media (min-width: 768px) and (max-width: 991px) { 509 | .heading { 510 | margin-bottom: 40px; 511 | } 512 | .slick-list { 513 | padding-bottom: 120px; 514 | } 515 | .banner-content-main h4 { 516 | line-height: 56px; 517 | } 518 | .banner-slider { 519 | height: 90vh; 520 | } 521 | .slick-dots li button::before { 522 | background-color: white !important; 523 | } 524 | } 525 | 526 | @media (min-width: 992px) and (max-width: 1200px) { 527 | .all-tags-list li { 528 | margin-bottom: 10px; 529 | } 530 | } 531 | 532 | .search-area { 533 | padding: 150px 0px 100px 0px; 534 | background-color: #F5F5F5; 535 | } 536 | 537 | .search-area h4 { 538 | margin-bottom: 30px; 539 | } 540 | 541 | .search-area .form { 542 | display: -webkit-box; 543 | display: -ms-flexbox; 544 | display: flex; 545 | -webkit-box-align: center; 546 | -ms-flex-align: center; 547 | align-items: center; 548 | -webkit-box-pack: center; 549 | -ms-flex-pack: center; 550 | justify-content: center; 551 | } 552 | 553 | .search-area-input { 554 | position: relative; 555 | } 556 | 557 | .search-area-input input { 558 | padding-left: 68px; 559 | height: 66px; 560 | width: 770px; 561 | border: 2px solid transparent; 562 | font-family: "Poppins", sans-serif; 563 | margin-right: 8px; 564 | -webkit-transition: 0.3s all linear; 565 | transition: 0.3s all linear; 566 | } 567 | 568 | .search-area-input input:focus { 569 | border: 2px solid #FB743E; 570 | } 571 | 572 | .search-area-input svg { 573 | position: absolute; 574 | top: 50%; 575 | -webkit-transform: translateY(-50%); 576 | transform: translateY(-50%); 577 | left: 30px; 578 | color: #272343; 579 | } 580 | 581 | @media (max-width: 991px) { 582 | .search-area { 583 | padding: 30px 0px; 584 | } 585 | .search-area .form { 586 | -webkit-box-orient: vertical; 587 | -webkit-box-direction: normal; 588 | -ms-flex-direction: column; 589 | flex-direction: column; 590 | -webkit-box-align: start; 591 | -ms-flex-align: start; 592 | align-items: flex-start; 593 | } 594 | .search-area .form .btn-default { 595 | height: 55px; 596 | width: 100%; 597 | } 598 | .search-area-input { 599 | width: 100%; 600 | margin-bottom: 15px; 601 | } 602 | .search-area-input input { 603 | width: 100% !important; 604 | margin-right: 0; 605 | height: 60px; 606 | } 607 | } 608 | 609 | @media (min-width: 992px) and (max-width: 1200px) { 610 | footer .footer-wizard-form { 611 | -webkit-box-orient: vertical; 612 | -webkit-box-direction: normal; 613 | -ms-flex-direction: column; 614 | flex-direction: column; 615 | -webkit-box-align: start !important; 616 | -ms-flex-align: start !important; 617 | align-items: flex-start !important; 618 | } 619 | footer .footer-wizard-form input { 620 | margin-bottom: 15px; 621 | } 622 | } 623 | 624 | .blog-intro { 625 | margin-top: -130px; 626 | } 627 | 628 | .blog-intro-area { 629 | padding: 40px; 630 | background-color: white; 631 | -webkit-box-shadow: 20px 50px 114px rgba(0, 0, 0, 0.05); 632 | box-shadow: 20px 50px 114px rgba(0, 0, 0, 0.05); 633 | } 634 | 635 | .blog-intro-area span.has-line { 636 | padding-left: 32px; 637 | color: #272343; 638 | font-weight: 400; 639 | font-family: "Poppins", sans-serif; 640 | } 641 | 642 | .blog-intro-area h3 { 643 | margin-bottom: 20px; 644 | } 645 | 646 | .blog-intro-area h3 a { 647 | color: #272343; 648 | display: block; 649 | } 650 | 651 | .blog-intro-area-bottom { 652 | display: -webkit-box; 653 | display: -ms-flexbox; 654 | display: flex; 655 | -webkit-box-align: center; 656 | -ms-flex-align: center; 657 | align-items: center; 658 | -webkit-box-pack: justify; 659 | -ms-flex-pack: justify; 660 | justify-content: space-between; 661 | } 662 | 663 | .blog-intro-area-bottom .intro-start { 664 | display: -webkit-box; 665 | display: -ms-flexbox; 666 | display: flex; 667 | -webkit-box-align: center; 668 | -ms-flex-align: center; 669 | align-items: center; 670 | } 671 | 672 | .blog-intro-area-bottom .intro-start-author { 673 | display: -webkit-box; 674 | display: -ms-flexbox; 675 | display: flex; 676 | -webkit-box-align: center; 677 | -ms-flex-align: center; 678 | align-items: center; 679 | } 680 | 681 | .blog-intro-area-bottom .intro-start-author img { 682 | max-width: 100%; 683 | border-radius: 50%; 684 | -o-object-fit: cover; 685 | object-fit: cover; 686 | } 687 | 688 | .blog-intro-area-bottom .intro-start-author .author-image { 689 | width: 40px; 690 | height: 40px; 691 | margin-right: 12px; 692 | } 693 | 694 | .blog-intro-area-bottom .intro-start-author a { 695 | font-family: "Poppins", sans-serif; 696 | color: #272343; 697 | font-weight: 400; 698 | } 699 | 700 | .blog-intro-area-bottom .intro-start .dot { 701 | margin: 0 20px; 702 | } 703 | 704 | .blog-intro-area-bottom .intro-start-time { 705 | font-size: 16px; 706 | font-weight: 400; 707 | font-family: "Poppins", sans-serif; 708 | color: #6D7280; 709 | } 710 | 711 | .blogy-counts { 712 | margin-bottom: 35px; 713 | display: -webkit-box; 714 | display: -ms-flexbox; 715 | display: flex; 716 | -webkit-box-align: center; 717 | -ms-flex-align: center; 718 | align-items: center; 719 | } 720 | 721 | .blogy-counts svg { 722 | margin-right: 10px; 723 | color: #FB743E; 724 | } 725 | 726 | .blogy-counts span { 727 | font-size: 15px; 728 | color: #494B5C; 729 | font-weight: 400; 730 | font-family: "Poppins", sans-serif; 731 | } 732 | 733 | .blog-article-end h4 { 734 | margin-bottom: 10px; 735 | } 736 | 737 | .blog-article-end p { 738 | margin-bottom: 20px; 739 | font-size: 18px; 740 | line-height: 27px; 741 | color: #494B5C; 742 | } 743 | 744 | .blog-article-end p a { 745 | color: #0A81D8; 746 | } 747 | 748 | .blog-article-end-feature { 749 | margin-bottom: 40px; 750 | } 751 | 752 | .blog-article-end-feature p { 753 | padding-top: 12px; 754 | padding-bottom: 12px; 755 | font-size: 22px; 756 | line-height: 30px; 757 | padding-left: 24px; 758 | position: relative; 759 | } 760 | 761 | .blog-article-end-feature p::before { 762 | position: absolute; 763 | content: ''; 764 | top: 0; 765 | left: 0; 766 | background-color: #FB743E; 767 | height: 100%; 768 | width: 3px; 769 | } 770 | 771 | .blog-article-end h6 { 772 | margin-bottom: 32px; 773 | } 774 | 775 | .blog-article-end img { 776 | margin-bottom: 32px; 777 | } 778 | 779 | .blog-article-end span.lead { 780 | font-size: 24px; 781 | color: #272343; 782 | font-weight: 400; 783 | font-family: "PT Serif", serif; 784 | margin-bottom: 8px; 785 | } 786 | 787 | .blog-article-end-bottom { 788 | border-top: 1px solid rgba(109, 114, 128, 0.2); 789 | border-bottom: 1px solid rgba(109, 114, 128, 0.2); 790 | margin-top: 80px; 791 | padding: 40px 80px; 792 | display: -webkit-box; 793 | display: -ms-flexbox; 794 | display: flex; 795 | -webkit-box-align: center; 796 | -ms-flex-align: center; 797 | align-items: center; 798 | -ms-flex-pack: distribute; 799 | justify-content: space-around; 800 | } 801 | 802 | .blog-article-end-bottom button { 803 | border-color: transparent; 804 | display: -webkit-box; 805 | display: -ms-flexbox; 806 | display: flex; 807 | -webkit-box-align: center; 808 | -ms-flex-align: center; 809 | align-items: center; 810 | font-size: 16px; 811 | } 812 | 813 | .blog-article-end-bottom button svg { 814 | margin-right: 8px; 815 | } 816 | 817 | .blog-article-end-bottom .btn-default { 818 | height: 50px; 819 | padding: 0px 120px; 820 | } 821 | 822 | .blog-article-end-bottom span { 823 | color: #272343; 824 | font-size: 16px; 825 | font-weight: 400; 826 | font-family: "Poppins", sans-serif; 827 | } 828 | 829 | .blog-item-feature { 830 | padding-bottom: 100px; 831 | } 832 | 833 | .blog-item-feature-heading { 834 | margin-bottom: 50px; 835 | display: -webkit-box; 836 | display: -ms-flexbox; 837 | display: flex; 838 | -webkit-box-align: center; 839 | -ms-flex-align: center; 840 | align-items: center; 841 | -webkit-box-pack: justify; 842 | -ms-flex-pack: justify; 843 | justify-content: space-between; 844 | } 845 | 846 | .blog-item-feature-heading h4 { 847 | padding-bottom: 10px; 848 | position: relative; 849 | } 850 | 851 | .blog-item-feature-heading h4::after { 852 | position: absolute; 853 | content: ''; 854 | bottom: 0; 855 | left: 0; 856 | background-color: #FB743E; 857 | width: 112px; 858 | height: 4px; 859 | } 860 | 861 | .blog-item-feature-heading a { 862 | font-weight: 600; 863 | font-family: "Poppins", sans-serif; 864 | color: #272343; 865 | font-size: 16px; 866 | -webkit-transition: 0.3s all linear; 867 | transition: 0.3s all linear; 868 | } 869 | 870 | .blog-item-feature-heading a:hover { 871 | color: #FB743E; 872 | } 873 | 874 | .comments-area { 875 | padding-bottom: 100px; 876 | } 877 | 878 | .comments-area h5 { 879 | margin-bottom: 20px; 880 | } 881 | 882 | .comments-area input { 883 | height: 56px; 884 | border-radius: 0px; 885 | background: #F5F5F5; 886 | font-family: "Poppins", sans-serif; 887 | border-color: transparent; 888 | -webkit-transition: 0.3s all linear; 889 | transition: 0.3s all linear; 890 | } 891 | 892 | .comments-area input:focus { 893 | border-color: #FB743E; 894 | -webkit-box-shadow: none; 895 | box-shadow: none; 896 | } 897 | 898 | .comments-area textarea { 899 | height: 160px; 900 | margin: 24px 0px; 901 | resize: none; 902 | border-radius: 0px; 903 | background: #F5F5F5; 904 | font-family: "Poppins", sans-serif; 905 | border-color: transparent; 906 | -webkit-transition: 0.3s all linear; 907 | transition: 0.3s all linear; 908 | } 909 | 910 | .comments-area textarea:focus { 911 | border-color: #FB743E; 912 | -webkit-box-shadow: none; 913 | box-shadow: none; 914 | } 915 | 916 | .comments-area button { 917 | border-color: transparent; 918 | } 919 | 920 | .comments-area .btn-default { 921 | height: 48px; 922 | } 923 | 924 | .comments-area-content { 925 | margin-top: 70px; 926 | } 927 | 928 | .comments-area-content h5 { 929 | margin-bottom: 20px; 930 | } 931 | 932 | .comments-area-content h5 span { 933 | color: #6D7280; 934 | font-weight: 400 !important; 935 | } 936 | 937 | .comments-area-content .comments { 938 | margin-bottom: 24px; 939 | padding-bottom: 24px; 940 | border-bottom: 1px solid rgba(109, 114, 128, 0.2); 941 | } 942 | 943 | .comments-area-content .comments-owner { 944 | margin-bottom: 12px; 945 | display: -webkit-box; 946 | display: -ms-flexbox; 947 | display: flex; 948 | -webkit-box-align: center; 949 | -ms-flex-align: center; 950 | align-items: center; 951 | } 952 | 953 | .comments-area-content .comments-owner-image { 954 | margin-right: 12px; 955 | width: 40px; 956 | height: 40px; 957 | } 958 | 959 | .comments-area-content .comments-owner-image img { 960 | border-radius: 50%; 961 | -o-object-fit: cover; 962 | object-fit: cover; 963 | max-width: 100%; 964 | } 965 | 966 | .comments-area-content .comments-owner-text p { 967 | margin-bottom: 0; 968 | } 969 | 970 | .comments-area-content .comments-owner-text p a { 971 | font-weight: 500; 972 | color: #272343; 973 | } 974 | 975 | .comments-area-content .comments-owner-text span { 976 | font-size: 15px; 977 | color: #6D7280; 978 | font-family: "Poppins", sans-serif; 979 | } 980 | 981 | .comments-area-content .comments p { 982 | font-size: 17px; 983 | color: #6D7280; 984 | margin-bottom: 0; 985 | } 986 | 987 | @media (max-width: 991px) { 988 | .blog-intro { 989 | margin-top: 0; 990 | } 991 | .blog-intro-area-bottom { 992 | -webkit-box-orient: vertical; 993 | -webkit-box-direction: normal; 994 | -ms-flex-direction: column; 995 | flex-direction: column; 996 | -webkit-box-align: start !important; 997 | -ms-flex-align: start !important; 998 | align-items: flex-start !important; 999 | } 1000 | .blog-intro-area-bottom .intro-start { 1001 | -webkit-box-orient: vertical; 1002 | -webkit-box-direction: normal; 1003 | -ms-flex-direction: column; 1004 | flex-direction: column; 1005 | -webkit-box-align: start !important; 1006 | -ms-flex-align: start !important; 1007 | align-items: flex-start !important; 1008 | } 1009 | .blog-intro-area-bottom .intro-start .dot { 1010 | margin-left: 0 !important; 1011 | } 1012 | .blog-intro-area-bottom .intro-start-release { 1013 | margin: 15px 0px; 1014 | -webkit-box-orient: vertical; 1015 | -webkit-box-direction: normal; 1016 | -ms-flex-direction: column; 1017 | flex-direction: column; 1018 | } 1019 | .blog-article-end-bottom { 1020 | -webkit-box-orient: vertical; 1021 | -webkit-box-direction: normal; 1022 | -ms-flex-direction: column; 1023 | flex-direction: column; 1024 | margin-top: 50px; 1025 | } 1026 | .blog-article-end-bottom span { 1027 | margin-right: 0 !important; 1028 | margin-bottom: 10px; 1029 | margin-top: 10px; 1030 | } 1031 | .blog-article-end-bottom .social-links { 1032 | display: -webkit-box; 1033 | display: -ms-flexbox; 1034 | display: flex; 1035 | } 1036 | .blog-item-feature-heading { 1037 | -webkit-box-orient: vertical; 1038 | -webkit-box-direction: normal; 1039 | -ms-flex-direction: column; 1040 | flex-direction: column; 1041 | -webkit-box-align: start; 1042 | -ms-flex-align: start; 1043 | align-items: flex-start; 1044 | margin-bottom: 15px; 1045 | } 1046 | .blog-item-feature-heading a { 1047 | margin-top: 10px; 1048 | } 1049 | .comments-area-content { 1050 | margin-top: 30px; 1051 | } 1052 | .blog-item-feature, 1053 | .comments-area { 1054 | padding-bottom: 30px; 1055 | } 1056 | .blog-article-end p, 1057 | .comments-area-content .comments p { 1058 | font-size: 14px; 1059 | } 1060 | } 1061 | 1062 | @media (min-width: 992px) and (max-width: 1200px) { 1063 | .blog-article-end-bottom { 1064 | -webkit-box-orient: vertical; 1065 | -webkit-box-direction: normal; 1066 | -ms-flex-direction: column; 1067 | flex-direction: column; 1068 | } 1069 | .blog-article-end-bottom .btn-default { 1070 | margin-bottom: 20px; 1071 | } 1072 | } 1073 | 1074 | ::-moz-selection { 1075 | background-color: #FB743E; 1076 | color: white; 1077 | } 1078 | 1079 | ::selection { 1080 | background-color: #FB743E; 1081 | color: white; 1082 | } 1083 | 1084 | .section-padding { 1085 | padding: 100px 0px; 1086 | } 1087 | 1088 | ::-webkit-input-placeholder { 1089 | font-family: "Poppins", sans-serif !important; 1090 | } 1091 | 1092 | :-ms-input-placeholder { 1093 | font-family: "Poppins", sans-serif !important; 1094 | } 1095 | 1096 | ::-ms-input-placeholder { 1097 | font-family: "Poppins", sans-serif !important; 1098 | } 1099 | 1100 | ::placeholder { 1101 | font-family: "Poppins", sans-serif !important; 1102 | } 1103 | 1104 | .mt-25 { 1105 | margin-top: 25px; 1106 | } 1107 | 1108 | .my-250 { 1109 | margin: 250px 0px; 1110 | } 1111 | 1112 | .has-line { 1113 | position: relative; 1114 | } 1115 | 1116 | .has-line::after { 1117 | position: absolute; 1118 | content: ''; 1119 | top: 50%; 1120 | -webkit-transform: translateY(-50%); 1121 | transform: translateY(-50%); 1122 | left: 0; 1123 | background-color: #FB743E; 1124 | height: 2px; 1125 | width: 24px; 1126 | } 1127 | 1128 | .dot { 1129 | background-color: #6D7280; 1130 | width: 5px; 1131 | height: 5px; 1132 | border-radius: 50%; 1133 | display: inline-block; 1134 | } 1135 | 1136 | .btn-default { 1137 | height: 66px; 1138 | padding: 0px 40px; 1139 | background-color: #FB743E; 1140 | color: white; 1141 | border-radius: 0px; 1142 | font-family: "Poppins", sans-serif; 1143 | font-weight: 500; 1144 | font-size: 16px; 1145 | -webkit-transition: 0.3s all linear; 1146 | transition: 0.3s all linear; 1147 | } 1148 | 1149 | .btn-default:hover { 1150 | color: #272343; 1151 | } 1152 | 1153 | .btn-default-sm { 1154 | height: 50px; 1155 | padding: 0 22px; 1156 | } 1157 | 1158 | .btn-link { 1159 | padding: 0; 1160 | color: #272343; 1161 | font-weight: 500; 1162 | font-family: "Poppins", sans-serif; 1163 | font-size: 16px; 1164 | } 1165 | 1166 | .btn-link svg { 1167 | margin-left: 8px; 1168 | color: #272343; 1169 | } 1170 | 1171 | .btn-link:hover { 1172 | color: #FB743E; 1173 | } 1174 | 1175 | .btn-link:hover svg { 1176 | color: #FB743E; 1177 | margin-left: 10px; 1178 | } 1179 | 1180 | .social-links a { 1181 | height: 40px; 1182 | width: 40px; 1183 | background-color: #F5F5F5; 1184 | border-radius: 50%; 1185 | display: -webkit-box; 1186 | display: -ms-flexbox; 1187 | display: flex; 1188 | -webkit-box-align: center; 1189 | -ms-flex-align: center; 1190 | align-items: center; 1191 | -webkit-box-pack: center; 1192 | -ms-flex-pack: center; 1193 | justify-content: center; 1194 | color: #272343; 1195 | border: 1px solid transparent; 1196 | -webkit-transition: 0.3s all linear; 1197 | transition: 0.3s all linear; 1198 | } 1199 | 1200 | .social-links a:hover { 1201 | color: white; 1202 | border-color: #FB743E; 1203 | background-color: #FB743E; 1204 | } 1205 | 1206 | .header { 1207 | overflow: hidden !important; 1208 | display: -webkit-box; 1209 | display: -ms-flexbox; 1210 | display: flex; 1211 | -webkit-box-align: center; 1212 | -ms-flex-align: center; 1213 | align-items: center; 1214 | -webkit-box-pack: justify; 1215 | -ms-flex-pack: justify; 1216 | justify-content: space-between; 1217 | padding: 16px 0px; 1218 | } 1219 | 1220 | .header .menu-btn { 1221 | position: relative; 1222 | display: none; 1223 | -webkit-box-align: center; 1224 | -ms-flex-align: center; 1225 | align-items: center; 1226 | -webkit-box-pack: center; 1227 | -ms-flex-pack: center; 1228 | justify-content: center; 1229 | width: 1.5rem; 1230 | height: 1.5rem; 1231 | cursor: pointer; 1232 | z-index: 1; 1233 | } 1234 | 1235 | .header .menu-btn-lines, .header .menu-btn-lines::after, .header .menu-btn-lines::before { 1236 | width: 1.5rem; 1237 | height: 0.1rem; 1238 | background-color: #FB743E; 1239 | -webkit-transition: all 0.3s ease-in-out; 1240 | transition: all 0.3s ease-in-out; 1241 | } 1242 | 1243 | .header .menu-btn-lines::after, .header .menu-btn-lines::before { 1244 | content: ''; 1245 | position: absolute; 1246 | } 1247 | 1248 | .header .menu-btn-lines::after { 1249 | -webkit-transform: translateY(-0.5rem); 1250 | transform: translateY(-0.5rem); 1251 | } 1252 | 1253 | .header .menu-btn-lines::before { 1254 | -webkit-transform: translateY(0.5rem); 1255 | transform: translateY(0.5rem); 1256 | } 1257 | 1258 | .header .menu-btn.open .menu-btn-lines { 1259 | -webkit-transform: translateX(2rem); 1260 | transform: translateX(2rem); 1261 | background-color: transparent; 1262 | } 1263 | 1264 | .header .menu-btn.open .menu-btn-lines::after { 1265 | -webkit-transform: rotate(45deg) translate(-1.5rem, 1.5rem); 1266 | transform: rotate(45deg) translate(-1.5rem, 1.5rem); 1267 | } 1268 | 1269 | .header .menu-btn.open .menu-btn-lines::before { 1270 | -webkit-transform: rotate(-45deg) translate(-1.5rem, -1.5rem); 1271 | transform: rotate(-45deg) translate(-1.5rem, -1.5rem); 1272 | } 1273 | 1274 | .header .main-menu { 1275 | display: -webkit-box; 1276 | display: -ms-flexbox; 1277 | display: flex; 1278 | -webkit-box-align: center; 1279 | -ms-flex-align: center; 1280 | align-items: center; 1281 | } 1282 | 1283 | .header .main-menu-items { 1284 | margin-bottom: 0; 1285 | display: -webkit-box; 1286 | display: -ms-flexbox; 1287 | display: flex; 1288 | -webkit-box-align: center; 1289 | -ms-flex-align: center; 1290 | align-items: center; 1291 | } 1292 | 1293 | .header .main-menu-items li .active-item { 1294 | color: #FB743E !important; 1295 | } 1296 | 1297 | .header .main-menu-items li a { 1298 | padding-bottom: 10px; 1299 | color: #6D7280; 1300 | font-family: "Poppins", sans-serif !important; 1301 | font-size: 16px; 1302 | margin-right: 24px !important; 1303 | -webkit-transition: 0.3s all linear; 1304 | transition: 0.3s all linear; 1305 | position: relative; 1306 | } 1307 | 1308 | .header .main-menu-items li a::after { 1309 | position: absolute; 1310 | content: ''; 1311 | bottom: 0; 1312 | left: 0; 1313 | height: 2px; 1314 | width: 0; 1315 | background-color: #FB743E; 1316 | -webkit-transition: 0.3s all linear; 1317 | transition: 0.3s all linear; 1318 | } 1319 | 1320 | .header .main-menu-items li a:hover { 1321 | color: #FB743E; 1322 | } 1323 | 1324 | .header .main-menu-items li a.active-item::after, .header .main-menu-items li a:hover::after { 1325 | width: 100%; 1326 | } 1327 | 1328 | .header .main-menu .header-searchbar { 1329 | position: relative; 1330 | } 1331 | 1332 | .header .main-menu .header-searchbar input { 1333 | font-family: "Poppins", sans-serif !important; 1334 | border: 2px solid transparent; 1335 | width: 312px; 1336 | height: 48px; 1337 | background-color: rgba(245, 245, 245, 0.7); 1338 | padding-left: 45px; 1339 | -webkit-transition: 0.3s all linear; 1340 | transition: 0.3s all linear; 1341 | } 1342 | 1343 | .header .main-menu .header-searchbar input:focus { 1344 | border: 2px solid #FB743E; 1345 | } 1346 | 1347 | .header .main-menu .header-searchbar svg { 1348 | position: absolute; 1349 | top: 50%; 1350 | -webkit-transform: translateY(-50%); 1351 | transform: translateY(-50%); 1352 | left: 16px; 1353 | color: #272343; 1354 | } 1355 | 1356 | .blog-intro-area span.has-line a { 1357 | color: #272343; 1358 | } 1359 | 1360 | .blog-item-sm .blog-item-image { 1361 | width: 100%; 1362 | } 1363 | 1364 | .blog-item-sm .blog-item-info { 1365 | margin-top: -40px; 1366 | max-width: 397px; 1367 | } 1368 | 1369 | .blog-item-sm .blog-item-info h5 { 1370 | font-size: 28px; 1371 | } 1372 | 1373 | .blog-item-image { 1374 | width: 100%; 1375 | } 1376 | 1377 | .blog-item-image a { 1378 | display: block; 1379 | } 1380 | 1381 | .blog-item-image a img { 1382 | max-width: 100%; 1383 | -o-object-fit: cover; 1384 | object-fit: cover; 1385 | } 1386 | 1387 | .blog-item-info { 1388 | padding: 32px; 1389 | background-color: #F7F7F7; 1390 | max-width: 560px; 1391 | margin-top: -70px; 1392 | position: relative; 1393 | z-index: 1; 1394 | } 1395 | 1396 | .blog-item-info span.fs-6 { 1397 | color: #272343; 1398 | font-family: "Poppins", sans-serif; 1399 | padding-left: 32px; 1400 | } 1401 | 1402 | .blog-item-info h5 { 1403 | margin-bottom: 12px; 1404 | } 1405 | 1406 | .blog-item-info h5 a { 1407 | color: #272343; 1408 | } 1409 | 1410 | .blog-item-info h5 a:hover { 1411 | color: #FB743E; 1412 | text-decoration: underline !important; 1413 | } 1414 | 1415 | .blog-item-info-release { 1416 | margin-bottom: 20px; 1417 | } 1418 | 1419 | .blog-item-info-release span { 1420 | font-size: 16px; 1421 | color: #6D7280; 1422 | font-family: "Poppins", sans-serif; 1423 | } 1424 | 1425 | .blog-item-info-release .dot { 1426 | margin: 0 8px; 1427 | } 1428 | 1429 | .post-feature { 1430 | padding: 24px; 1431 | background-color: rgba(245, 245, 245, 0.5); 1432 | -webkit-transition: 0.1s all linear; 1433 | transition: 0.1s all linear; 1434 | } 1435 | 1436 | .post-feature:hover { 1437 | background-color: #FB743E; 1438 | } 1439 | 1440 | .post-feature:hover .dot, 1441 | .post-feature:hover .has-line::after { 1442 | background-color: white; 1443 | } 1444 | 1445 | .post-feature:hover .btn-link svg, 1446 | .post-feature:hover .btn-link, 1447 | .post-feature:hover span, 1448 | .post-feature:hover h6 a, 1449 | .post-feature:hover span.fs-6 { 1450 | color: white; 1451 | } 1452 | 1453 | .post-feature span.fs-6 { 1454 | font-family: "Poppins", sans-serif; 1455 | padding-left: 32px; 1456 | color: #272343; 1457 | } 1458 | 1459 | .post-feature h6 a { 1460 | color: #272343; 1461 | } 1462 | 1463 | .post-feature .btn, 1464 | .post-feature .btn-default { 1465 | -webkit-transition: 0s !important; 1466 | transition: 0s !important; 1467 | } 1468 | 1469 | footer { 1470 | background: #272343; 1471 | padding-top: 100px; 1472 | } 1473 | 1474 | footer .footer-info p { 1475 | margin-top: 16px; 1476 | color: rgba(255, 255, 255, 0.6); 1477 | } 1478 | 1479 | footer .footer-wizard h6 { 1480 | color: #FFFFFF; 1481 | font-weight: 400; 1482 | font-size: 24px; 1483 | margin-bottom: 20px; 1484 | } 1485 | 1486 | footer .footer-wizard a { 1487 | color: rgba(255, 255, 255, 0.6); 1488 | margin-bottom: 10px; 1489 | display: block; 1490 | font-weight: 400; 1491 | font-size: 16px; 1492 | font-family: "Poppins", sans-serif; 1493 | -webkit-transition: 0.3s all linear; 1494 | transition: 0.3s all linear; 1495 | } 1496 | 1497 | footer .footer-wizard a:hover { 1498 | color: white; 1499 | } 1500 | 1501 | footer .footer-wizard-form { 1502 | display: -webkit-box; 1503 | display: -ms-flexbox; 1504 | display: flex; 1505 | -webkit-box-align: center; 1506 | -ms-flex-align: center; 1507 | align-items: center; 1508 | } 1509 | 1510 | footer .footer-wizard-form input { 1511 | height: 50px; 1512 | padding-left: 20px; 1513 | border: 2px solid transparent; 1514 | background-color: rgba(255, 255, 255, 0.2); 1515 | border-radius: 0px; 1516 | color: white; 1517 | font-family: "Poppins", sans-serif; 1518 | width: 315px; 1519 | margin-right: 8px; 1520 | -webkit-transition: 0.3s all linear; 1521 | transition: 0.3s all linear; 1522 | } 1523 | 1524 | footer .footer-wizard-form input:focus { 1525 | border: 2px solid #FB743E; 1526 | } 1527 | 1528 | footer .footer-wizard-form ::-webkit-input-placeholder { 1529 | color: rgba(255, 255, 255, 0.6); 1530 | } 1531 | 1532 | footer .footer-wizard-form :-ms-input-placeholder { 1533 | color: rgba(255, 255, 255, 0.6); 1534 | } 1535 | 1536 | footer .footer-wizard-form ::-ms-input-placeholder { 1537 | color: rgba(255, 255, 255, 0.6); 1538 | } 1539 | 1540 | footer .footer-wizard-form ::placeholder { 1541 | color: rgba(255, 255, 255, 0.6); 1542 | } 1543 | 1544 | footer .copy-right { 1545 | display: -webkit-box; 1546 | display: -ms-flexbox; 1547 | display: flex; 1548 | -webkit-box-align: center; 1549 | -ms-flex-align: center; 1550 | align-items: center; 1551 | -webkit-box-pack: justify; 1552 | -ms-flex-pack: justify; 1553 | justify-content: space-between; 1554 | border-top: 1px solid rgba(255, 255, 255, 0.5); 1555 | margin-top: 70px; 1556 | padding: 20px 0px; 1557 | } 1558 | 1559 | footer .copy-right p { 1560 | margin-bottom: 0; 1561 | color: rgba(255, 255, 255, 0.6); 1562 | } 1563 | 1564 | footer .copy-right p a { 1565 | color: rgba(255, 255, 255, 0.6); 1566 | -webkit-transition: 0.3s all linear; 1567 | transition: 0.3s all linear; 1568 | } 1569 | 1570 | footer .copy-right p a:hover { 1571 | color: white; 1572 | } 1573 | 1574 | @media (max-width: 991px) { 1575 | .menu-btn { 1576 | display: -webkit-box !important; 1577 | display: -ms-flexbox !important; 1578 | display: flex !important; 1579 | z-index: 55555 !important; 1580 | } 1581 | .main-menu { 1582 | z-index: 44444; 1583 | -webkit-box-orient: vertical; 1584 | -webkit-box-direction: normal; 1585 | -ms-flex-direction: column; 1586 | flex-direction: column; 1587 | -webkit-box-pack: space-evenly; 1588 | -ms-flex-pack: space-evenly; 1589 | justify-content: space-evenly; 1590 | position: absolute; 1591 | top: 0; 1592 | right: 0; 1593 | left: 0; 1594 | height: 100vh; 1595 | -webkit-transform: translateX(100vw); 1596 | transform: translateX(100vw); 1597 | background-color: #272343; 1598 | -webkit-transition: -webkit-transform 0.3s ease-in-out; 1599 | transition: -webkit-transform 0.3s ease-in-out; 1600 | transition: transform 0.3s ease-in-out; 1601 | transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 1602 | } 1603 | .main-menu-items { 1604 | -webkit-box-orient: vertical; 1605 | -webkit-box-direction: normal; 1606 | -ms-flex-direction: column; 1607 | flex-direction: column; 1608 | -ms-flex-pack: distribute; 1609 | justify-content: space-around; 1610 | } 1611 | .main-menu-items li { 1612 | margin-bottom: 50px; 1613 | width: 100%; 1614 | height: 100%; 1615 | } 1616 | .main-menu-items li a { 1617 | color: #fff !important; 1618 | font-size: 5vh !important; 1619 | display: -webkit-box !important; 1620 | display: -ms-flexbox !important; 1621 | display: flex !important; 1622 | -webkit-box-pack: center !important; 1623 | -ms-flex-pack: center !important; 1624 | justify-content: center !important; 1625 | -webkit-box-align: center !important; 1626 | -ms-flex-align: center !important; 1627 | align-items: center !important; 1628 | width: 100% !important; 1629 | height: 100% !important; 1630 | } 1631 | .main-menu.open { 1632 | -webkit-transform: translateX(0); 1633 | transform: translateX(0); 1634 | } 1635 | .blog-item-sm .blog-item-info { 1636 | margin-top: 0; 1637 | } 1638 | header .navbar .header-searchbar input { 1639 | width: 100%; 1640 | } 1641 | .blog-item { 1642 | height: auto; 1643 | overflow: hidden; 1644 | } 1645 | .blog-item-image { 1646 | width: 100%; 1647 | } 1648 | .blog-item-info { 1649 | padding: 20px; 1650 | max-width: 100%; 1651 | position: static; 1652 | margin-top: 0; 1653 | } 1654 | .blog-item-info-release { 1655 | margin-bottom: 10px; 1656 | } 1657 | .blog-item-info-release span { 1658 | font-size: 14px; 1659 | } 1660 | .blog-item-sm .blog-item-info { 1661 | max-width: 100%; 1662 | } 1663 | .blog-item-sm .blog-item-image { 1664 | width: 100%; 1665 | } 1666 | .blog-item-sm .blog-item-image img { 1667 | width: 100%; 1668 | } 1669 | .blog-item-sm .blog-item-info h5 { 1670 | font-size: 24px; 1671 | } 1672 | .post-feature h6 { 1673 | font-size: 24px; 1674 | } 1675 | } 1676 | 1677 | @media (max-width: 420px) { 1678 | .section-padding { 1679 | padding: 30px 0px; 1680 | } 1681 | .footer { 1682 | padding-top: 50px; 1683 | } 1684 | .footer-wizard { 1685 | margin-bottom: 20px; 1686 | } 1687 | .footer-wizard h6 { 1688 | margin-bottom: 10px !important; 1689 | font-size: 20px !important; 1690 | } 1691 | .footer-wizard a { 1692 | font-size: 14px !important; 1693 | } 1694 | .footer-wizard-form { 1695 | width: 100%; 1696 | -webkit-box-orient: vertical; 1697 | -webkit-box-direction: normal; 1698 | -ms-flex-direction: column; 1699 | flex-direction: column; 1700 | -webkit-box-align: start !important; 1701 | -ms-flex-align: start !important; 1702 | align-items: flex-start !important; 1703 | } 1704 | .footer-wizard-form input { 1705 | width: 100% !important; 1706 | margin-bottom: 15px; 1707 | } 1708 | .footer .copy-right { 1709 | margin-top: 20px; 1710 | -webkit-box-orient: vertical; 1711 | -webkit-box-direction: normal; 1712 | -ms-flex-direction: column; 1713 | flex-direction: column; 1714 | } 1715 | .footer .copy-right p { 1716 | margin-top: 10px; 1717 | } 1718 | } 1719 | 1720 | @media only screen and (min-width: 420px) and (max-width: 574px) { 1721 | .section-padding { 1722 | padding: 30px 0px; 1723 | } 1724 | } 1725 | 1726 | @media (min-width: 575px) and (max-width: 767px) { 1727 | .section-padding { 1728 | padding: 30px 0px; 1729 | } 1730 | } 1731 | 1732 | @media (min-width: 768px) and (max-width: 991px) { 1733 | .blog-item-image a img { 1734 | width: 100%; 1735 | } 1736 | .section-padding { 1737 | padding: 40px 0px; 1738 | } 1739 | } 1740 | 1741 | @media (min-width: 992px) and (max-width: 1200px) { 1742 | .section-padding { 1743 | padding: 50px 0px; 1744 | } 1745 | } 1746 | /*# sourceMappingURL=main.css.map */ -------------------------------------------------------------------------------- /dist/css/vendor/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/css/vendor/ajax-loader.gif -------------------------------------------------------------------------------- /dist/css/vendor/fonts/slick.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/css/vendor/fonts/slick.eot -------------------------------------------------------------------------------- /dist/css/vendor/fonts/slick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by Fontastic.me 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /dist/css/vendor/fonts/slick.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/css/vendor/fonts/slick.ttf -------------------------------------------------------------------------------- /dist/css/vendor/fonts/slick.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/css/vendor/fonts/slick.woff -------------------------------------------------------------------------------- /dist/css/vendor/slick-theme.css: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | /* Slider */ 3 | .slick-loading .slick-list 4 | { 5 | background: #fff url('./ajax-loader.gif') center center no-repeat; 6 | } 7 | 8 | /* Icons */ 9 | @font-face 10 | { 11 | font-family: 'slick'; 12 | font-weight: normal; 13 | font-style: normal; 14 | 15 | src: url('./fonts/slick.eot'); 16 | src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); 17 | } 18 | /* Arrows */ 19 | .slick-prev, 20 | .slick-next 21 | { 22 | font-size: 0; 23 | line-height: 0; 24 | 25 | position: absolute; 26 | top: 50%; 27 | 28 | display: block; 29 | 30 | width: 20px; 31 | height: 20px; 32 | padding: 0; 33 | -webkit-transform: translate(0, -50%); 34 | -ms-transform: translate(0, -50%); 35 | transform: translate(0, -50%); 36 | 37 | cursor: pointer; 38 | 39 | color: transparent; 40 | border: none; 41 | outline: none; 42 | background: transparent; 43 | } 44 | .slick-prev:hover, 45 | .slick-prev:focus, 46 | .slick-next:hover, 47 | .slick-next:focus 48 | { 49 | color: transparent; 50 | outline: none; 51 | background: transparent; 52 | } 53 | .slick-prev:hover:before, 54 | .slick-prev:focus:before, 55 | .slick-next:hover:before, 56 | .slick-next:focus:before 57 | { 58 | opacity: 1; 59 | } 60 | .slick-prev.slick-disabled:before, 61 | .slick-next.slick-disabled:before 62 | { 63 | opacity: .25; 64 | } 65 | 66 | .slick-prev:before, 67 | .slick-next:before 68 | { 69 | font-family: 'slick'; 70 | font-size: 20px; 71 | line-height: 1; 72 | 73 | opacity: .75; 74 | color: white; 75 | 76 | -webkit-font-smoothing: antialiased; 77 | -moz-osx-font-smoothing: grayscale; 78 | } 79 | 80 | .slick-prev 81 | { 82 | left: -25px; 83 | } 84 | [dir='rtl'] .slick-prev 85 | { 86 | right: -25px; 87 | left: auto; 88 | } 89 | .slick-prev:before 90 | { 91 | font-family: "Font Awesome 5 Free"; 92 | font-weight: 900; 93 | content: "\f104"; 94 | } 95 | [dir='rtl'] .slick-prev:before 96 | { 97 | content: '→'; 98 | } 99 | 100 | .slick-next 101 | { 102 | right: -25px; 103 | } 104 | [dir='rtl'] .slick-next 105 | { 106 | right: auto; 107 | left: -25px; 108 | } 109 | .slick-next:before 110 | { 111 | font-family: "Font Awesome 5 Free"; 112 | font-weight: 900; 113 | content: "\f105"; 114 | 115 | } 116 | [dir='rtl'] .slick-next:before 117 | { 118 | content: '←'; 119 | } 120 | 121 | /* Dots */ 122 | .slick-dotted.slick-slider 123 | { 124 | margin-bottom: 30px; 125 | } 126 | 127 | .slick-dots 128 | { 129 | position: absolute; 130 | bottom: -25px; 131 | 132 | display: block; 133 | 134 | width: 100%; 135 | padding: 0; 136 | margin: 0; 137 | 138 | list-style: none; 139 | 140 | text-align: center; 141 | } 142 | .slick-dots li 143 | { 144 | position: relative; 145 | 146 | display: inline-block; 147 | 148 | width: 20px; 149 | height: 20px; 150 | margin: 0 5px; 151 | padding: 0; 152 | 153 | cursor: pointer; 154 | } 155 | .slick-dots li button 156 | { 157 | font-size: 0; 158 | line-height: 0; 159 | 160 | display: block; 161 | 162 | width: 20px; 163 | height: 20px; 164 | padding: 5px; 165 | 166 | cursor: pointer; 167 | 168 | color: transparent; 169 | border: 0; 170 | outline: none; 171 | background: transparent; 172 | } 173 | .slick-dots li button:hover, 174 | .slick-dots li button:focus 175 | { 176 | outline: none; 177 | } 178 | .slick-dots li button:hover:before, 179 | .slick-dots li button:focus:before 180 | { 181 | opacity: 1; 182 | } 183 | .slick-dots li button:before 184 | { 185 | font-family: 'slick'; 186 | font-size: 6px; 187 | line-height: 20px; 188 | 189 | position: absolute; 190 | top: 0; 191 | left: 0; 192 | 193 | width: 20px; 194 | height: 20px; 195 | 196 | content: '•'; 197 | text-align: center; 198 | 199 | opacity: .25; 200 | color: black; 201 | 202 | -webkit-font-smoothing: antialiased; 203 | -moz-osx-font-smoothing: grayscale; 204 | } 205 | .slick-dots li.slick-active button:before 206 | { 207 | opacity: .75; 208 | color: black; 209 | } 210 | -------------------------------------------------------------------------------- /dist/css/vendor/slick.css: -------------------------------------------------------------------------------- 1 | /* Slider */ 2 | .slick-slider 3 | { 4 | position: relative; 5 | 6 | display: block; 7 | box-sizing: border-box; 8 | 9 | -webkit-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | 14 | -webkit-touch-callout: none; 15 | -khtml-user-select: none; 16 | -ms-touch-action: pan-y; 17 | touch-action: pan-y; 18 | -webkit-tap-highlight-color: transparent; 19 | } 20 | 21 | .slick-list 22 | { 23 | position: relative; 24 | 25 | display: block; 26 | overflow: hidden; 27 | 28 | margin: 0; 29 | padding: 0; 30 | } 31 | .slick-list:focus 32 | { 33 | outline: none; 34 | } 35 | .slick-list.dragging 36 | { 37 | cursor: pointer; 38 | cursor: hand; 39 | } 40 | 41 | .slick-slider .slick-track, 42 | .slick-slider .slick-list 43 | { 44 | -webkit-transform: translate3d(0, 0, 0); 45 | -moz-transform: translate3d(0, 0, 0); 46 | -ms-transform: translate3d(0, 0, 0); 47 | -o-transform: translate3d(0, 0, 0); 48 | transform: translate3d(0, 0, 0); 49 | } 50 | 51 | .slick-track 52 | { 53 | position: relative; 54 | top: 0; 55 | left: 0; 56 | 57 | display: block; 58 | margin-left: auto; 59 | margin-right: auto; 60 | } 61 | .slick-track:before, 62 | .slick-track:after 63 | { 64 | display: table; 65 | 66 | content: ''; 67 | } 68 | .slick-track:after 69 | { 70 | clear: both; 71 | } 72 | .slick-loading .slick-track 73 | { 74 | visibility: hidden; 75 | } 76 | 77 | .slick-slide 78 | { 79 | display: none; 80 | float: left; 81 | 82 | height: 100%; 83 | min-height: 1px; 84 | } 85 | [dir='rtl'] .slick-slide 86 | { 87 | float: right; 88 | } 89 | .slick-slide img 90 | { 91 | display: block; 92 | } 93 | .slick-slide.slick-loading img 94 | { 95 | display: none; 96 | } 97 | .slick-slide.dragging img 98 | { 99 | pointer-events: none; 100 | } 101 | .slick-initialized .slick-slide 102 | { 103 | display: block; 104 | } 105 | .slick-loading .slick-slide 106 | { 107 | visibility: hidden; 108 | } 109 | .slick-vertical .slick-slide 110 | { 111 | display: block; 112 | 113 | height: auto; 114 | 115 | border: 1px solid transparent; 116 | } 117 | .slick-arrow.slick-hidden { 118 | display: none; 119 | } 120 | -------------------------------------------------------------------------------- /dist/images/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/01.jpg -------------------------------------------------------------------------------- /dist/images/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/02.jpg -------------------------------------------------------------------------------- /dist/images/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/03.jpg -------------------------------------------------------------------------------- /dist/images/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/04.jpg -------------------------------------------------------------------------------- /dist/images/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/05.jpg -------------------------------------------------------------------------------- /dist/images/authorsm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/authorsm.png -------------------------------------------------------------------------------- /dist/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/banner.jpg -------------------------------------------------------------------------------- /dist/images/blogd01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/blogd01.jpg -------------------------------------------------------------------------------- /dist/images/blogd02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/blogd02.jpg -------------------------------------------------------------------------------- /dist/images/category-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/category-01.jpg -------------------------------------------------------------------------------- /dist/images/category-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/category-02.jpg -------------------------------------------------------------------------------- /dist/images/category-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/category-03.jpg -------------------------------------------------------------------------------- /dist/images/cowner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/cowner.png -------------------------------------------------------------------------------- /dist/images/detailsbanner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/detailsbanner.jpg -------------------------------------------------------------------------------- /dist/images/screenshot.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/screenshot.jpeg -------------------------------------------------------------------------------- /dist/images/sm-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/sm-01.jpg -------------------------------------------------------------------------------- /dist/images/sm-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/sm-02.jpg -------------------------------------------------------------------------------- /dist/images/sm-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/sm-03.jpg -------------------------------------------------------------------------------- /dist/images/sm-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/sm-04.jpg -------------------------------------------------------------------------------- /dist/images/sm-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/sm-05.jpg -------------------------------------------------------------------------------- /dist/images/sm-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/blogy-html/f39ff58cfdf07b10c3fb261ccdffeb0f97661612/dist/images/sm-06.jpg -------------------------------------------------------------------------------- /dist/js/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $('.banner-slider').slick({ 3 | autoplay: true, 4 | autoplaySpeed: 2000, 5 | dots: true, 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /dist/js/menu.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.querySelector(".menu-btn"); 2 | const mainMenu = document.querySelector(".main-menu"); 3 | const menuItem = document.querySelectorAll(".menu-item"); 4 | 5 | // main toggle 6 | menuBtn.addEventListener("click", () => { 7 | toggle(); 8 | }); 9 | 10 | // toggle on item click if open 11 | menuItem.forEach((item) => { 12 | item.addEventListener("click", () => { 13 | if (menuBtn.classList.contains("open")) { 14 | toggle(); 15 | } 16 | }); 17 | }); 18 | 19 | function toggle() { 20 | menuBtn.classList.toggle("open"); 21 | mainMenu.classList.toggle("open"); 22 | mainMenu.classList.toggle("d-none"); 23 | } 24 | -------------------------------------------------------------------------------- /dist/js/slick.min.js: -------------------------------------------------------------------------------- 1 | !function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";var e=window.Slick||{};(e=function(){var e=0;return function(t,o){var s,n=this;n.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:i(t),appendDots:i(t),arrows:!0,asNavFor:null,prevArrow:'',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(e,t){return i(' 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
88 |
89 |
90 |
91 |
92 | 93 | Image 94 | 95 |
96 |
97 | Travels 98 |
How to Get Started With UI/UX in Figma
99 |
100 | March 25, 2021 4 min read 101 |
102 | Read Article 103 | 104 | 105 | 106 | 107 |
108 |
109 |
110 |
111 |
112 |
113 | 114 | Image 115 | 116 |
117 |
118 | Travels 119 |
Nulla facilisi. Pellentes dui ligula, varius non.
120 |
121 | March 25, 2021 4 min read 122 |
123 | Read Article 124 | 125 | 126 | 127 | 128 |
129 |
130 |
131 |
132 |
133 |
134 | 135 | Image 136 | 137 |
138 |
139 | Travels 140 |
Top 10 beautiful Place in Bangladesh
141 |
142 | March 25, 2021 4 min read 143 |
144 | Read Article 145 | 146 | 147 | 148 | 149 |
150 |
151 |
152 |
153 |
154 |
155 | 156 | Image 157 | 158 |
159 |
160 | Travels 161 |
How to Get Started With UI/UX in Figma
162 |
163 | March 25, 2021 4 min read 164 |
165 | Read Article 166 | 167 | 168 | 169 | 170 |
171 |
172 |
173 |
174 |
175 |
176 | 177 | 178 | 179 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /src/scss/_reset.scss: -------------------------------------------------------------------------------- 1 | // Reset CSS Starts Here 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | outline: 0; 6 | box-sizing: border-box; 7 | } 8 | html { 9 | scroll-behavior: smooth; 10 | } 11 | img { 12 | border: 0; 13 | outline: 0; 14 | max-width: 100%; 15 | vertical-align: middle; 16 | } 17 | a{ 18 | text-decoration: none !important; 19 | } 20 | // Reset CSS Ends Here -------------------------------------------------------------------------------- /src/scss/_typography.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap'); 2 | 3 | body { 4 | font-family: 'Poppins', sans-serif; 5 | font-family: 'PT Serif', serif; 6 | } 7 | .fs-5{ 8 | font-size: 18px !important; 9 | } 10 | .fs-6{ 11 | font-size: 16px !important; 12 | } 13 | 14 | // TypoGraphy Starts Here 15 | h3{ 16 | font-size: 64px; 17 | line-height: 72px; 18 | font-weight: 700; 19 | font-family: $headingFonts; 20 | color: $black; 21 | } 22 | h4{ 23 | font-size: 40px; 24 | line-height: 48px; 25 | font-weight: 700; 26 | font-family: $headingFonts; 27 | color: $black; 28 | } 29 | h5{ 30 | font-size: 32px; 31 | line-height: 38px; 32 | font-weight: 700; 33 | font-family: $headingFonts; 34 | color: $black; 35 | } 36 | h6{ 37 | font-size: 28px; 38 | line-height: 36px; 39 | font-weight: 700; 40 | font-family: $headingFonts; 41 | color: $black; 42 | } 43 | p{ 44 | font-size: 16px; 45 | font-weight: 400; 46 | font-family: $defaultFont; 47 | } 48 | // TypoGraphy Ends Here 49 | 50 | // Responsive 51 | // extra Small devices 420px 52 | @media (max-width: 420px) { 53 | h3{ 54 | font-size: 30px; 55 | line-height: 38px; 56 | } 57 | h4{ 58 | font-size: 28px; 59 | line-height: 36px; 60 | } 61 | h5{ 62 | font-size: 24px; 63 | } 64 | p{ 65 | font-size: 14px; 66 | } 67 | .fs-6{ 68 | font-size: 14px !important; 69 | } 70 | } 71 | 72 | // Small devices 420px - 574px 73 | @media only screen and (min-width: 420px) and (max-width: 574px) { 74 | h3{ 75 | font-size: 30px; 76 | line-height: 38px; 77 | } 78 | h4{ 79 | font-size: 26px; 80 | line-height: 34px; 81 | } 82 | h5{ 83 | font-size: 22px; 84 | line-height: 30px; 85 | } 86 | } 87 | 88 | // Small devices 575px - 767px 89 | @media (min-width: 575px) and (max-width: 767px) { 90 | h3{ 91 | font-size: 30px; 92 | line-height: 38px; 93 | } 94 | h4{ 95 | font-size: 26px; 96 | line-height: 34px; 97 | } 98 | h5{ 99 | font-size: 22px; 100 | line-height: 30px; 101 | } 102 | } 103 | 104 | // Medium devices 768px - 991px 105 | @media (min-width: 768px) and (max-width: 991px) { 106 | h3{ 107 | font-size: 34px; 108 | line-height: 42px; 109 | } 110 | h4{ 111 | font-size: 26px; 112 | line-height: 34px; 113 | } 114 | h5{ 115 | font-size: 22px; 116 | line-height: 30px; 117 | } 118 | } 119 | 120 | // large devices 992px - 1200px 121 | @media (min-width: 992px) and (max-width: 1200px) { 122 | h4{ 123 | font-size: 36px !important; 124 | } 125 | h6, 126 | h5{ 127 | font-size: 24px !important; 128 | } 129 | } -------------------------------------------------------------------------------- /src/scss/_variable.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $activeText: #FB743E; 3 | $default: #6D7280; 4 | $defaultBg: #F5F5F5; 5 | $black: #272343; 6 | $gray: #6D7280; 7 | $darkGray: #494B5C; 8 | $link: #0A81D8; 9 | 10 | // Fonts 11 | $defaultFont: 'Poppins', sans-serif; 12 | $headingFonts: 'PT Serif', serif; -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | // Theme 2 | @import"variable"; 3 | @import"typography"; 4 | @import"reset"; 5 | @import"pages/index"; 6 | @import"pages/blogysearch"; 7 | @import"pages/blogdetails"; 8 | @import"pages/theme"; 9 | // Theme Page -------------------------------------------------------------------------------- /src/scss/pages/_blogdetails.scss: -------------------------------------------------------------------------------- 1 | // Blog Details Intro Starts Here 2 | .blog-intro{ 3 | margin-top: -130px; 4 | &-area{ 5 | padding: 40px; 6 | background-color: white; 7 | box-shadow: 20px 50px 114px rgba(0, 0, 0, 0.05); 8 | span.has-line{ 9 | padding-left: 32px; 10 | color: $black; 11 | font-weight: 400; 12 | font-family: $defaultFont; 13 | } 14 | h3{ 15 | margin-bottom: 20px; 16 | a{ 17 | color: $black; 18 | display: block; 19 | } 20 | } 21 | &-bottom{ 22 | display: flex; 23 | align-items: center; 24 | justify-content: space-between; 25 | .intro-start{ 26 | display: flex; 27 | align-items: center; 28 | &-author{ 29 | display: flex; 30 | align-items: center; 31 | img{ 32 | max-width: 100%; 33 | border-radius: 50%; 34 | object-fit: cover; 35 | } 36 | .author-image{ 37 | width: 40px; 38 | height: 40px; 39 | margin-right: 12px; 40 | } 41 | a{ 42 | font-family: $defaultFont; 43 | color: $black; 44 | font-weight: 400; 45 | } 46 | } 47 | .dot{ 48 | margin: 0 20px; 49 | } 50 | &-time{ 51 | font-size: 16px; 52 | font-weight: 400; 53 | font-family: $defaultFont; 54 | color: $gray; 55 | } 56 | } 57 | } 58 | } 59 | } 60 | // Blog Details Intro Ends Here 61 | 62 | // Blog Article Starts Here 63 | .blogy-counts{ 64 | margin-bottom: 35px; 65 | display: flex; 66 | align-items: center; 67 | svg{ 68 | margin-right: 10px; 69 | color: $activeText; 70 | } 71 | span{ 72 | font-size: 15px; 73 | color: $darkGray; 74 | font-weight: 400; 75 | font-family: $defaultFont; 76 | } 77 | } 78 | .blog-article{ 79 | &-end{ 80 | h4{ 81 | margin-bottom: 10px; 82 | } 83 | p{ 84 | margin-bottom: 20px; 85 | font-size: 18px; 86 | line-height: 27px; 87 | color: $darkGray; 88 | a{ 89 | color: $link; 90 | } 91 | } 92 | &-feature{ 93 | margin-bottom: 40px; 94 | p{ 95 | padding-top: 12px; 96 | padding-bottom: 12px; 97 | font-size: 22px; 98 | line-height: 30px; 99 | padding-left: 24px; 100 | position: relative; 101 | &::before{ 102 | position: absolute; 103 | content: ''; 104 | top: 0; 105 | left: 0; 106 | background-color: $activeText; 107 | height: 100%; 108 | width: 3px; 109 | } 110 | } 111 | } 112 | h6{ 113 | margin-bottom: 32px; 114 | } 115 | img{ 116 | margin-bottom: 32px; 117 | } 118 | span.lead{ 119 | font-size: 24px; 120 | color: $black; 121 | font-weight: 400; 122 | font-family: $headingFonts; 123 | margin-bottom: 8px; 124 | } 125 | &-bottom{ 126 | border-top: 1px solid rgba($color: #6D7280, $alpha: 0.2); 127 | border-bottom: 1px solid rgba($color: #6D7280, $alpha: 0.2); 128 | margin-top: 80px; 129 | padding: 40px 80px; 130 | display: flex; 131 | align-items: center; 132 | justify-content: space-around; 133 | button{ 134 | border-color: transparent; 135 | display: flex; 136 | align-items: center; 137 | svg{ 138 | margin-right: 8px; 139 | } 140 | font-size: 16px; 141 | } 142 | .btn-default{ 143 | height: 50px; 144 | padding: 0px 120px; 145 | } 146 | span{ 147 | color: $black; 148 | font-size: 16px; 149 | font-weight: 400; 150 | font-family: $defaultFont; 151 | } 152 | } 153 | } 154 | } 155 | // Blog Article Ends Here 156 | 157 | // Blog Item Feature Starts Here 158 | .blog-item-feature{ 159 | padding-bottom: 100px; 160 | &-heading{ 161 | margin-bottom: 50px; 162 | display: flex; 163 | align-items: center; 164 | justify-content: space-between; 165 | h4{ 166 | padding-bottom: 10px; 167 | position: relative; 168 | &::after{ 169 | position: absolute; 170 | content: ''; 171 | bottom: 0; 172 | left: 0; 173 | background-color: $activeText; 174 | width: 112px; 175 | height: 4px; 176 | } 177 | } 178 | a{ 179 | font-weight: 600; 180 | font-family: $defaultFont; 181 | color:$black; 182 | font-size: 16px; 183 | transition: 0.3s all linear; 184 | &:hover{ 185 | color:$activeText; 186 | } 187 | } 188 | } 189 | } 190 | // Blog Item Feature Ends Here 191 | 192 | // Comments Area Starts Here 193 | .comments-area{ 194 | padding-bottom: 100px; 195 | h5{ 196 | margin-bottom: 20px; 197 | } 198 | input{ 199 | height: 56px; 200 | border-radius: 0px; 201 | background: #F5F5F5; 202 | font-family: $defaultFont; 203 | border-color: transparent; 204 | transition: 0.3s all linear; 205 | &:focus{ 206 | border-color: $activeText; 207 | box-shadow: none; 208 | } 209 | } 210 | textarea{ 211 | height: 160px; 212 | margin: 24px 0px; 213 | resize: none; 214 | border-radius: 0px; 215 | background: #F5F5F5; 216 | font-family: $defaultFont; 217 | border-color: transparent; 218 | transition: 0.3s all linear; 219 | &:focus{ 220 | border-color: $activeText; 221 | box-shadow: none; 222 | } 223 | } 224 | button{ 225 | border-color: transparent; 226 | } 227 | .btn-default{ 228 | height: 48px; 229 | } 230 | &-content{ 231 | margin-top: 70px; 232 | h5{ 233 | margin-bottom: 20px; 234 | span{ 235 | color: $gray; 236 | font-weight: 400 !important; 237 | } 238 | } 239 | .comments{ 240 | margin-bottom: 24px; 241 | padding-bottom: 24px; 242 | border-bottom: 1px solid rgba($color: #6D7280, $alpha: 0.2); 243 | &-owner{ 244 | margin-bottom: 12px; 245 | display: flex; 246 | align-items: center; 247 | &-image{ 248 | margin-right: 12px; 249 | width: 40px; 250 | height: 40px; 251 | img{ 252 | border-radius: 50%; 253 | object-fit: cover; 254 | max-width: 100%; 255 | } 256 | } 257 | &-text{ 258 | p{ 259 | margin-bottom: 0; 260 | a{ 261 | font-weight: 500; 262 | color: $black; 263 | } 264 | } 265 | span{ 266 | font-size: 15px; 267 | color: $gray; 268 | font-family: $defaultFont; 269 | } 270 | } 271 | } 272 | p{ 273 | font-size: 17px; 274 | color: $gray; 275 | margin-bottom: 0; 276 | } 277 | } 278 | } 279 | } 280 | // Comments Area Ends Here 281 | 282 | // Responsive 283 | // extra Small devices 420px 284 | @media (max-width: 991px) { 285 | .blog-intro{ 286 | margin-top: 0; 287 | } 288 | .blog-intro-area-bottom{ 289 | flex-direction: column; 290 | align-items: flex-start !important; 291 | .intro-start{ 292 | flex-direction: column; 293 | align-items: flex-start !important; 294 | .dot{ 295 | margin-left: 0 !important; 296 | } 297 | &-release{ 298 | margin: 15px 0px; 299 | flex-direction: column; 300 | } 301 | } 302 | } 303 | .blog-article-end-bottom{ 304 | flex-direction: column; 305 | margin-top: 50px; 306 | 307 | } 308 | .blog-article-end-bottom span{ 309 | margin-right: 0 !important; 310 | margin-bottom: 10px; 311 | margin-top: 10px; 312 | } 313 | .blog-article-end-bottom .social-links{ 314 | display: flex; 315 | } 316 | .blog-item-feature-heading{ 317 | flex-direction: column; 318 | align-items: flex-start; 319 | margin-bottom: 15px; 320 | a{ 321 | margin-top: 10px; 322 | } 323 | } 324 | .comments-area-content{ 325 | margin-top: 30px; 326 | } 327 | .blog-item-feature, 328 | .comments-area{ 329 | padding-bottom: 30px; 330 | } 331 | .blog-article-end p, 332 | .comments-area-content .comments p{ 333 | font-size: 14px; 334 | } 335 | } 336 | 337 | // Small devices 420px - 574px 338 | @media only screen and (min-width: 420px) and (max-width: 574px) { 339 | 340 | } 341 | 342 | // Small devices 575px - 767px 343 | @media (min-width: 575px) and (max-width: 767px) { 344 | } 345 | 346 | // Medium devices 768px - 991px 347 | @media (min-width: 768px) and (max-width: 991px) { 348 | } 349 | 350 | // large devices 992px - 1200px 351 | @media (min-width: 992px) and (max-width: 1200px) { 352 | .blog-article-end-bottom{ 353 | flex-direction: column; 354 | .btn-default{ 355 | margin-bottom: 20px; 356 | } 357 | } 358 | } -------------------------------------------------------------------------------- /src/scss/pages/_blogysearch.scss: -------------------------------------------------------------------------------- 1 | // Search Area Starts Here 2 | .search-area{ 3 | padding: 150px 0px 100px 0px; 4 | background-color: $defaultBg; 5 | h4{ 6 | margin-bottom: 30px; 7 | } 8 | .form{ 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | &-input{ 14 | position: relative; 15 | input{ 16 | padding-left: 68px; 17 | height: 66px; 18 | width: 770px; 19 | border: 2px solid transparent; 20 | font-family: $defaultFont; 21 | margin-right: 8px; 22 | transition: 0.3s all linear; 23 | &:focus{ 24 | border: 2px solid $activeText; 25 | } 26 | } 27 | svg{ 28 | position: absolute; 29 | top: 50%; 30 | transform: translateY(-50%); 31 | left: 30px; 32 | color: $black; 33 | } 34 | } 35 | } 36 | // Search Area Ends Here 37 | 38 | 39 | 40 | // Responsive 41 | // extra Small devices 420px 42 | @media (max-width: 991px) { 43 | .search-area{ 44 | padding: 30px 0px; 45 | .form{ 46 | flex-direction: column; 47 | align-items: flex-start; 48 | .btn-default{ 49 | height: 55px; 50 | width: 100%; 51 | } 52 | } 53 | &-input{ 54 | width: 100%; 55 | margin-bottom: 15px; 56 | input{ 57 | width: 100% !important; 58 | margin-right: 0; 59 | height: 60px; 60 | } 61 | } 62 | } 63 | } 64 | 65 | // Small devices 420px - 574px 66 | @media only screen and (min-width: 420px) and (max-width: 574px) { 67 | 68 | } 69 | 70 | // Small devices 575px - 767px 71 | @media (min-width: 575px) and (max-width: 767px) { 72 | } 73 | 74 | // Medium devices 768px - 991px 75 | @media (min-width: 768px) and (max-width: 991px) { 76 | } 77 | 78 | // large devices 992px - 1200px 79 | @media (min-width: 992px) and (max-width: 1200px) { 80 | footer .footer-wizard-form{ 81 | flex-direction: column; 82 | align-items: flex-start !important; 83 | input{ 84 | margin-bottom: 15px; 85 | } 86 | } 87 | } -------------------------------------------------------------------------------- /src/scss/pages/_index.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ---------------------------------------------------------------------------------------- 3 | Author : Zakir Soft 4 | Template Name: Blogy HTML Template 5 | Version : 1.0 6 | * ---------------------------------------------------------------------------------------- 7 | */ 8 | 9 | // Heading Starts Here 10 | .heading { 11 | margin-bottom: 50px; 12 | position: relative; 13 | padding-bottom: 10px; 14 | 15 | &::after { 16 | position: absolute; 17 | content: ''; 18 | bottom: 0; 19 | left: 0; 20 | width: 112px; 21 | height: 4px; 22 | background-color: $activeText; 23 | } 24 | } 25 | 26 | // Heading Ends Here 27 | 28 | // Latest Post Starts Here 29 | .latest-post-area { 30 | background-color: $defaultBg; 31 | 32 | .blog-item-info { 33 | background: #FFFFFF; 34 | } 35 | } 36 | 37 | // Latest Post Ends Here 38 | 39 | // All Post Starts Here 40 | .all-post-area { 41 | background-color: $defaultBg; 42 | 43 | .blog-item-info { 44 | background: #FFFFFF; 45 | } 46 | } 47 | 48 | .featured-category { 49 | h6 { 50 | font-size: 20px; 51 | } 52 | 53 | &-item { 54 | margin-bottom: 8px; 55 | background-size: cover; 56 | background-position: center; 57 | background-repeat: no-repeat; 58 | padding: 20px; 59 | 60 | a { 61 | background: #FFFFFF; 62 | padding: 8px 18px; 63 | font-family: $defaultFont; 64 | color: $black; 65 | font-size: 14px; 66 | transition: 0.3s all linear; 67 | 68 | &:hover { 69 | background-color: $activeText; 70 | color: white; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .all-tags { 77 | margin-top: 24px; 78 | 79 | h6 { 80 | font-size: 20px; 81 | } 82 | 83 | &-list { 84 | a { 85 | display: inline-block; 86 | padding: 8px 16px; 87 | background: rgba(39, 35, 67, 0.05); 88 | font-size: 16px; 89 | font-family: $defaultFont; 90 | color: $black; 91 | transition: 0.3s all linear; 92 | 93 | &:hover { 94 | background-color: $activeText; 95 | color: white; 96 | } 97 | } 98 | } 99 | } 100 | 101 | // All Post Ends Here 102 | 103 | // Banner Starts Here 104 | .banner { 105 | overflow: hidden; 106 | 107 | &-slider { 108 | height: 920px; 109 | display: flex; 110 | align-items: center; 111 | } 112 | 113 | &-content { 114 | &-main { 115 | padding: 60px 30px; 116 | background-color: #FFFFFF; 117 | 118 | span.fs-6 { 119 | padding-left: 32px; 120 | font-family: "Poppins", sans-serif; 121 | color: $black; 122 | } 123 | 124 | h4 { 125 | margin-bottom: 12px; 126 | font-size: 48px; 127 | 128 | a { 129 | display: block; 130 | color: $black; 131 | } 132 | } 133 | 134 | p { 135 | color: $gray; 136 | margin: 10px 0px 26px 0px; 137 | } 138 | 139 | .btn-default { 140 | height: auto; 141 | padding: 12px 29px; 142 | } 143 | } 144 | } 145 | } 146 | 147 | .blog-date { 148 | display: flex; 149 | align-items: center; 150 | 151 | span { 152 | font-size: 16px; 153 | color: $gray; 154 | font-family: "Poppins", sans-serif; 155 | } 156 | 157 | &-start { 158 | padding-right: 10px; 159 | position: relative; 160 | 161 | &::after { 162 | position: absolute; 163 | content: ''; 164 | top: 50%; 165 | transform: translateY(-50%); 166 | right: -2px; 167 | width: 5px; 168 | height: 5px; 169 | background-color: $gray; 170 | border-radius: 50%; 171 | } 172 | } 173 | 174 | &-end { 175 | padding-left: 10px; 176 | } 177 | } 178 | 179 | // Slick SLider Customization Starts Here 180 | .slick-dots { 181 | display: inline-block; 182 | width: auto; 183 | bottom: 18%; 184 | left: 65px; 185 | 186 | li { 187 | button::before { 188 | width: 10px; 189 | height: 10px; 190 | background-color: rgba($color: #FB743E, $alpha: 0.5); 191 | border-radius: 50%; 192 | color: transparent; 193 | } 194 | } 195 | } 196 | 197 | .slick-dots li.slick-active button:before { 198 | opacity: 1; 199 | background-color: #FB743E; 200 | color: transparent; 201 | } 202 | 203 | .slick-prev, 204 | .slick-next { 205 | top: 80%; 206 | height: 54px; 207 | width: 54px; 208 | background-color: #FFFFFF; 209 | border-radius: 50%; 210 | } 211 | 212 | .slick-prev:before, 213 | .slick-next:before { 214 | color: $black; 215 | } 216 | 217 | .slick-prev { 218 | left: 0; 219 | transition: 0.3s all linear; 220 | 221 | &:hover::before { 222 | color: white; 223 | } 224 | } 225 | 226 | .slick-next { 227 | left: 155px; 228 | transition: 0.3s all linear; 229 | 230 | &:hover::before { 231 | color: white; 232 | } 233 | } 234 | 235 | .slick-prev:hover, 236 | .slick-prev:focus, 237 | .slick-next:hover, 238 | .slick-next:focus { 239 | background-color: $activeText; 240 | } 241 | 242 | // Slick SLider Customization Ends Here 243 | // Banner Ends Here 244 | 245 | // Responsive 246 | // extra Small devices 420px 247 | @media (max-width: 420px) { 248 | .heading { 249 | margin-bottom: 30px; 250 | } 251 | 252 | .all-tags-list { 253 | li { 254 | margin-bottom: 10px; 255 | } 256 | } 257 | 258 | .banner-content-main h4 { 259 | font-size: 32px; 260 | } 261 | 262 | .banner-content-main{ 263 | padding: 30px 20px; 264 | } 265 | .slick-dots li button::before{ 266 | background-color: white !important; 267 | } 268 | .banner-slider { 269 | height: auto; 270 | padding: 30px 0px 60px 0px; 271 | } 272 | 273 | .slick-prev, 274 | .slick-next { 275 | top: 95%; 276 | } 277 | 278 | .slick-prev { 279 | left: 10%; 280 | } 281 | 282 | .slick-next { 283 | right: 10% !important; 284 | left: auto; 285 | } 286 | 287 | .slick-dots { 288 | bottom: 2%; 289 | left: 50% !important; 290 | transform: translateX(-50%); 291 | } 292 | 293 | .slick-list { 294 | margin-bottom: 30px; 295 | } 296 | } 297 | 298 | // Small devices 420px - 574px 299 | @media only screen and (min-width: 420px) and (max-width: 574px) { 300 | .heading { 301 | margin-bottom: 30px; 302 | } 303 | 304 | .all-tags-list { 305 | li { 306 | margin-bottom: 10px; 307 | } 308 | } 309 | 310 | .banner-content-main h4 { 311 | font-size: 32px; 312 | } 313 | 314 | 315 | .banner-content-main{ 316 | padding: 30px 20px; 317 | } 318 | .slick-dots li button::before{ 319 | background-color: white !important; 320 | } 321 | 322 | .banner-slider { 323 | height: auto; 324 | padding: 30px 0px 60px 0px; 325 | } 326 | 327 | .slick-prev, 328 | .slick-next { 329 | top: 95%; 330 | } 331 | 332 | .slick-prev { 333 | left: 10%; 334 | } 335 | 336 | .slick-next { 337 | right: 10% !important; 338 | left: auto; 339 | } 340 | 341 | .slick-dots { 342 | bottom: 2%; 343 | left: 50% !important; 344 | transform: translateX(-50%); 345 | } 346 | 347 | .slick-list { 348 | margin-bottom: 30px; 349 | } 350 | } 351 | 352 | // Small devices 575px - 767px 353 | @media (min-width: 575px) and (max-width: 767px) { 354 | .heading { 355 | margin-bottom: 30px; 356 | } 357 | 358 | .banner-content-main h4 { 359 | font-size: 32px; 360 | } 361 | 362 | 363 | .banner-content-main{ 364 | padding: 30px 20px; 365 | } 366 | .slick-dots li button::before{ 367 | background-color: white !important; 368 | } 369 | 370 | .banner-slider { 371 | height: auto; 372 | padding: 30px 0px 60px 0px; 373 | } 374 | 375 | .slick-prev, 376 | .slick-next { 377 | top: 95%; 378 | } 379 | 380 | .slick-prev { 381 | left: 10%; 382 | } 383 | 384 | .slick-next { 385 | right: 10% !important; 386 | left: auto; 387 | } 388 | 389 | .slick-dots { 390 | bottom: 2%; 391 | left: 50% !important; 392 | transform: translateX(-50%); 393 | } 394 | 395 | .slick-list { 396 | margin-bottom: 30px; 397 | } 398 | } 399 | 400 | // Medium devices 768px - 991px 401 | @media (min-width: 768px) and (max-width: 991px) { 402 | .heading { 403 | margin-bottom: 40px; 404 | } 405 | 406 | .slick-list { 407 | padding-bottom: 120px; 408 | } 409 | 410 | .banner-content-main h4 { 411 | line-height: 56px; 412 | } 413 | 414 | .banner-slider { 415 | height: 90vh; 416 | } 417 | .slick-dots li button::before{ 418 | background-color: white !important; 419 | } 420 | } 421 | 422 | // large devices 992px - 1200px 423 | @media (min-width: 992px) and (max-width: 1200px) { 424 | .all-tags-list { 425 | li { 426 | margin-bottom: 10px; 427 | } 428 | } 429 | } -------------------------------------------------------------------------------- /src/scss/pages/_theme.scss: -------------------------------------------------------------------------------- 1 | ::selection{ 2 | background-color: $activeText; 3 | color: white; 4 | } 5 | // Section Padding Starts Here 6 | .section-padding{ 7 | padding: 100px 0px; 8 | } 9 | // Section Padding Ends Here 10 | 11 | // PlaceHolder CSS Starts Here 12 | ::placeholder{ 13 | font-family: $defaultFont !important; 14 | } 15 | // PlaceHolder CSS Ends Here 16 | 17 | // Margin & Padding Starts Here 18 | .mt-25{ 19 | margin-top: 25px; 20 | } 21 | .my-250{ 22 | margin: 250px 0px; 23 | } 24 | // Margin & Padding Ends Here 25 | 26 | // Line CSS Starts Here 27 | .has-line{ 28 | position: relative; 29 | &::after{ 30 | position: absolute; 31 | content: ''; 32 | top: 50%; 33 | transform: translateY(-50%); 34 | left: 0; 35 | background-color: $activeText; 36 | height: 2px; 37 | width: 24px; 38 | } 39 | } 40 | // Line CSS Ends Here 41 | 42 | // Dot CSS Starts Here 43 | .dot{ 44 | background-color: $gray; 45 | width: 5px; 46 | height: 5px; 47 | border-radius: 50%; 48 | display: inline-block; 49 | } 50 | // Dot CSS Ends Here 51 | 52 | // Buttons CSS Starts Here 53 | .btn-default{ 54 | height: 66px; 55 | padding: 0px 40px; 56 | background-color: $activeText; 57 | color: white; 58 | border-radius: 0px; 59 | font-family: $defaultFont; 60 | font-weight: 500; 61 | font-size: 16px; 62 | transition: 0.3s all linear; 63 | &:hover{ 64 | color: $black; 65 | } 66 | &-sm{ 67 | height: 50px; 68 | padding: 0 22px; 69 | } 70 | } 71 | .btn-link{ 72 | padding: 0; 73 | color: $black; 74 | font-weight: 500; 75 | font-family: $defaultFont; 76 | font-size: 16px; 77 | svg{ 78 | margin-left: 8px; 79 | color: $black; 80 | } 81 | &:hover{ 82 | color: $activeText; 83 | svg{ 84 | color: $activeText; 85 | margin-left: 10px; 86 | } 87 | } 88 | } 89 | // Buttons CSS Ends Here 90 | 91 | // Social Links Starts Here 92 | .social-links{ 93 | a{ 94 | height: 40px; 95 | width: 40px; 96 | background-color: $defaultBg; 97 | border-radius: 50%; 98 | display: flex; 99 | align-items: center; 100 | justify-content: center; 101 | color: $black; 102 | border: 1px solid transparent; 103 | transition: 0.3s all linear; 104 | &:hover{ 105 | color: white; 106 | border-color: $activeText; 107 | background-color: $activeText; 108 | } 109 | } 110 | } 111 | // Social Links Ends Here 112 | 113 | // Header Starts Here 114 | .header{ 115 | overflow: hidden !important; 116 | display: flex; 117 | align-items: center; 118 | justify-content: space-between; 119 | padding: 16px 0px; 120 | // Mobile Menu Starts Here 121 | .menu-btn{ 122 | position: relative; 123 | display: none; 124 | align-items: center; 125 | justify-content: center; 126 | width: 1.5rem; 127 | height: 1.5rem; 128 | cursor: pointer; 129 | z-index: 1; 130 | &-lines, 131 | &-lines::after, 132 | &-lines::before{ 133 | width: 1.5rem; 134 | height: 0.1rem; 135 | background-color: $activeText; 136 | transition: all 0.3s ease-in-out; 137 | } 138 | &-lines::after, 139 | &-lines::before{ 140 | content: ''; 141 | position: absolute; 142 | } 143 | &-lines::after{ 144 | transform: translateY(-0.5rem); 145 | } 146 | &-lines::before{ 147 | transform: translateY(0.5rem); 148 | } 149 | } 150 | // Animation 151 | .menu-btn.open .menu-btn-lines{ 152 | transform: translateX(2rem); 153 | background-color: transparent; 154 | } 155 | .menu-btn.open .menu-btn-lines::after{ 156 | transform: rotate(45deg) translate(-1.5rem, 1.5rem); 157 | } 158 | .menu-btn.open .menu-btn-lines::before{ 159 | transform: rotate(-45deg) translate(-1.5rem, -1.5rem); 160 | } 161 | // Mobile Menu Ends Here 162 | 163 | .main-menu{ 164 | display: flex; 165 | align-items: center; 166 | &-items{ 167 | margin-bottom: 0; 168 | display: flex; 169 | align-items: center; 170 | li{ 171 | .active-item{ 172 | color: $activeText !important; 173 | } 174 | a{ 175 | padding-bottom: 10px; 176 | color: $default; 177 | font-family: $defaultFont !important; 178 | font-size: 16px; 179 | margin-right: 24px !important; 180 | transition: 0.3s all linear; 181 | position: relative; 182 | &::after{ 183 | position: absolute; 184 | content: ''; 185 | bottom: 0; 186 | left: 0; 187 | height: 2px; 188 | width: 0; 189 | background-color: $activeText; 190 | transition:0.3s all linear; 191 | } 192 | &:hover{ 193 | color: $activeText; 194 | } 195 | &.active-item::after, 196 | &:hover::after{ 197 | width: 100%; 198 | } 199 | } 200 | } 201 | } 202 | .header-searchbar{ 203 | position: relative; 204 | input{ 205 | font-family: $defaultFont !important; 206 | border: 2px solid transparent; 207 | width: 312px; 208 | height: 48px; 209 | background-color: rgba($color: #F5F5F5, $alpha: 0.7); 210 | padding-left: 45px; 211 | transition: 0.3s all linear; 212 | &:focus{ 213 | border: 2px solid $activeText; 214 | } 215 | } 216 | svg{ 217 | position: absolute; 218 | top:50%; 219 | transform: translateY(-50%); 220 | left: 16px; 221 | color: #272343; 222 | } 223 | } 224 | } 225 | } 226 | 227 | // Blog Item Starts Here 228 | .blog-intro-area span.has-line{ 229 | a{ 230 | color: $black; 231 | } 232 | } 233 | .blog-item{ 234 | &-sm{ 235 | .blog-item-image{ 236 | width: 100%; 237 | } 238 | .blog-item-info{ 239 | margin-top: -40px; 240 | max-width: 397px; 241 | h5{ 242 | font-size: 28px; 243 | } 244 | } 245 | } 246 | &-image{ 247 | width: 100%; 248 | a{ 249 | display: block; 250 | img{ 251 | max-width: 100%; 252 | object-fit: cover; 253 | } 254 | } 255 | } 256 | &-info{ 257 | padding: 32px; 258 | background-color: #F7F7F7; 259 | max-width: 560px; 260 | margin-top: -70px; 261 | position: relative; 262 | z-index: 1; 263 | span.fs-6{ 264 | color: $black; 265 | font-family: $defaultFont; 266 | padding-left: 32px; 267 | } 268 | h5{ 269 | margin-bottom: 12px; 270 | a{ 271 | color: $black; 272 | &:hover{ 273 | color: $activeText; 274 | text-decoration: underline !important; 275 | } 276 | } 277 | } 278 | &-release{ 279 | margin-bottom: 20px; 280 | span{ 281 | font-size: 16px; 282 | color: $gray; 283 | font-family: $defaultFont; 284 | } 285 | .dot{ 286 | margin: 0 8px; 287 | } 288 | } 289 | 290 | } 291 | } 292 | // Blog Item Ends Here 293 | 294 | // Post Feature Starts Here 295 | .post-feature{ 296 | padding: 24px; 297 | background-color: rgba($color: #F5F5F5, $alpha: 0.5); 298 | transition: 0.1s all linear; 299 | &:hover{ 300 | background-color: $activeText; 301 | .dot, 302 | .has-line::after{ 303 | background-color: white; 304 | } 305 | .btn-link svg, 306 | .btn-link, 307 | span, 308 | h6 a, 309 | span.fs-6{ 310 | color: white; 311 | } 312 | } 313 | span.fs-6{ 314 | font-family: "Poppins", sans-serif; 315 | padding-left: 32px; 316 | color: $black; 317 | } 318 | h6{ 319 | a{ 320 | color: $black; 321 | } 322 | } 323 | .btn, 324 | .btn-default{ 325 | transition: 0s !important; 326 | } 327 | } 328 | // Post Feature Ends Here 329 | 330 | // Footer Starts Here 331 | footer{ 332 | background: #272343; 333 | padding-top: 100px; 334 | .footer{ 335 | &-info{ 336 | p{ 337 | margin-top: 16px; 338 | color: rgba($color: #FFFFFF, $alpha: 0.6); 339 | } 340 | } 341 | &-wizard{ 342 | h6{ 343 | color: #FFFFFF; 344 | font-weight: 400; 345 | font-size: 24px; 346 | margin-bottom: 20px; 347 | } 348 | a{ 349 | color: rgba($color: #FFFFFF, $alpha: 0.6); 350 | margin-bottom: 10px; 351 | display: block; 352 | font-weight: 400; 353 | font-size: 16px; 354 | font-family: $defaultFont; 355 | transition: 0.3s all linear; 356 | &:hover{ 357 | color: white; 358 | } 359 | } 360 | &-form{ 361 | display: flex; 362 | align-items: center; 363 | input{ 364 | height: 50px; 365 | padding-left: 20px; 366 | border: 2px solid transparent; 367 | background-color: rgba($color: #FFFFFF, $alpha: 0.2); 368 | border-radius: 0px; 369 | color: white; 370 | font-family: $defaultFont; 371 | width: 315px; 372 | margin-right: 8px; 373 | transition: 0.3s all linear; 374 | &:focus{ 375 | border: 2px solid $activeText; 376 | } 377 | } 378 | ::placeholder{ 379 | color: rgba($color: #FFFFFF, $alpha: 0.6); 380 | } 381 | } 382 | } 383 | } 384 | .copy-right{ 385 | display: flex; 386 | align-items: center; 387 | justify-content: space-between; 388 | border-top: 1px solid rgba($color: white, $alpha: 0.5); 389 | margin-top: 70px; 390 | padding: 20px 0px; 391 | p{ 392 | margin-bottom: 0; 393 | color: rgba($color: #fff, $alpha: 0.6); 394 | a{ 395 | color: rgba($color: #fff, $alpha: 0.6); 396 | transition: 0.3s all linear; 397 | &:hover{ 398 | color: white; 399 | } 400 | } 401 | } 402 | } 403 | } 404 | // Footer Ends Here 405 | 406 | // Responsive 407 | @media (max-width: 991px){ 408 | .menu-btn{ 409 | display: flex !important; 410 | z-index: 55555 !important; 411 | } 412 | .main-menu{ 413 | z-index: 44444; 414 | flex-direction: column; 415 | justify-content: space-evenly; 416 | position: absolute; 417 | top: 0; 418 | right: 0; 419 | left: 0; 420 | height: 100vh; 421 | transform: translateX(100vw); 422 | background-color: $black; 423 | transition: transform 0.3s ease-in-out; 424 | &-items { 425 | flex-direction: column; 426 | justify-content: space-around; 427 | li{ 428 | margin-bottom: 15px; 429 | width: 100%; 430 | height: 100%; 431 | a{ 432 | color: #fff !important; 433 | font-size: 24px !important; 434 | display: flex !important; 435 | justify-content: center !important; 436 | align-items: center !important; 437 | width: 100% !important; 438 | height: 100% !important; 439 | } 440 | } 441 | } 442 | } 443 | .main-menu.open{ 444 | transform: translateX(0); 445 | } 446 | .blog-item-sm .blog-item-info{ 447 | margin-top: 0; 448 | } 449 | header{ 450 | .navbar { 451 | .header-searchbar{ 452 | input{ 453 | width: 100%; 454 | } 455 | } 456 | } 457 | 458 | } 459 | .blog-item{ 460 | height: auto; 461 | overflow: hidden; 462 | &-image{ 463 | width: 100%; 464 | } 465 | &-info{ 466 | padding: 20px; 467 | max-width: 100%; 468 | position: static; 469 | margin-top: 0; 470 | &-release{ 471 | margin-bottom: 10px; 472 | span{ 473 | font-size: 14px; 474 | } 475 | } 476 | } 477 | } 478 | .blog-item-sm .blog-item-info{ 479 | max-width: 100%; 480 | } 481 | .blog-item-sm .blog-item-image{ 482 | width: 100%; 483 | img{ 484 | width: 100%; 485 | } 486 | } 487 | .blog-item-sm .blog-item-info h5{ 488 | font-size: 24px; 489 | } 490 | .post-feature{ 491 | h6{ 492 | font-size: 24px; 493 | } 494 | } 495 | } 496 | // extra Small devices 420px 497 | @media (max-width: 420px) { 498 | .section-padding{ 499 | padding: 30px 0px; 500 | } 501 | .footer{ 502 | padding-top: 50px; 503 | &-wizard{ 504 | margin-bottom: 20px; 505 | h6{ 506 | margin-bottom: 10px !important; 507 | font-size: 20px !important; 508 | } 509 | a{ 510 | font-size: 14px !important; 511 | } 512 | &-form{ 513 | width: 100%; 514 | flex-direction: column; 515 | align-items: flex-start !important; 516 | input{ 517 | width: 100% !important; 518 | margin-bottom: 15px; 519 | } 520 | } 521 | } 522 | .copy-right{ 523 | margin-top: 20px; 524 | flex-direction: column; 525 | p{ 526 | margin-top: 10px; 527 | } 528 | } 529 | } 530 | } 531 | 532 | // Small devices 420px - 574px 533 | @media only screen and (min-width: 420px) and (max-width: 574px) { 534 | .section-padding{ 535 | padding: 30px 0px; 536 | } 537 | } 538 | 539 | // Small devices 575px - 767px 540 | @media (min-width: 575px) and (max-width: 767px) { 541 | .section-padding{ 542 | padding: 30px 0px; 543 | } 544 | } 545 | 546 | // Medium devices 768px - 991px 547 | @media (min-width: 768px) and (max-width: 991px) { 548 | .blog-item-image a img{ 549 | width: 100%; 550 | } 551 | .section-padding{ 552 | padding: 40px 0px; 553 | } 554 | } 555 | 556 | // large devices 992px - 1200px 557 | @media (min-width: 992px) and (max-width: 1200px) { 558 | .section-padding{ 559 | padding: 50px 0px; 560 | } 561 | } 562 | --------------------------------------------------------------------------------