9B534B8686E580E0E01768F00155B461

at path：ROOT / wp-content / themes / kadu / assets / scss / components / _blog.scss

run：R W Run

_about.scss

11.46 KB

2024-06-07 08:38:52

R W Run

_animation.scss

3.86 KB

2024-06-02 09:44:42

R W Run

_back-to-top.scss

1.11 KB

2024-04-25 09:34:42

R W Run

_blog-page.scss

26.83 KB

2024-06-11 06:51:22

R W Run

_blog.scss

11.77 KB

2024-06-06 04:16:02

R W Run

_breadcrumb.scss

2.53 KB

2024-06-12 03:56:04

R W Run

_button.scss

10.66 KB

2024-06-06 11:59:28

R W Run

_choose-us.scss

7.76 KB

2024-06-06 11:53:36

R W Run

_client.scss

4.37 KB

2024-05-28 11:54:48

R W Run

_contact-us.scss

3.81 KB

2024-06-11 08:55:10

R W Run

_counter.scss

3.1 KB

2024-05-30 05:51:10

R W Run

_course-details.scss

29.48 KB

2024-06-09 06:18:52

R W Run

_course.scss

34.5 KB

2024-06-04 06:49:00

R W Run

_cta.scss

6.27 KB

2024-06-06 05:12:08

R W Run

_error.scss

2.65 KB

2024-06-11 10:20:46

R W Run

_event-details.scss

9.96 KB

2024-06-10 05:05:32

R W Run

_event.scss

7.68 KB

2024-06-09 11:06:54

R W Run

_faq.scss

1.27 KB

2024-05-26 10:40:32

R W Run

_footer.scss

18.39 KB

2024-06-06 08:53:18

R W Run

_full-page-nav.scss

4.43 KB

2024-06-11 12:42:00

R W Run

_gallery.scss

3.55 KB

2024-06-10 06:49:40

R W Run

_header.scss

17.28 KB

2024-06-11 11:02:34

R W Run

_hero.scss

18.73 KB

2024-06-11 10:40:22

R W Run

_instructor-details.scss

5.15 KB

2024-06-09 09:15:04

R W Run

_popular-category.scss

12.24 KB

2024-06-06 09:59:08

R W Run

_preloader.scss

621 By

2024-05-28 04:48:48

R W Run

_price.scss

9.83 KB

2024-05-30 05:52:22

R W Run

_privacy-page.scss

1.33 KB

2024-06-11 09:15:36

R W Run

_search.scss

3.03 KB

2024-06-11 10:42:44

R W Run

_services.scss

10.43 KB

2024-06-03 04:06:10

R W Run

_team.scss

9.23 KB

2024-06-09 06:56:08

R W Run

_testimonial.scss

12.14 KB

2024-06-06 10:34:22

R W Run

_title.scss

2.9 KB

2024-06-02 12:32:10

R W Run

_video-course.scss

4.96 KB

2024-05-30 10:54:24

R W Run

error_log

📄_blog.scss

/* 
    blog-1-start
*/
.kd-blog-1 {
    &-area {
        position: relative;
        z-index: 1;
    }

&-bg-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 310px);
        z-index: -1;
    }

&-card {
        overflow: hidden;
        border-radius: 20px;
        margin-bottom: 30px;
        box-shadow: 0px 7px 81px 0px rgba(32, 28, 29, 0.07);

.main-img {
            height: 265px;
            img {
                transition: transform 500ms;
                transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
                transform-origin: center center;
            }
        }
        
        .author-img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            flex: 0 0 auto;
        }

.card-content {
            background: #fff;
            padding: 40px 40px;
            padding-top: 0;

@media #{$xl,$lg,$md,$xs} {
                padding: 40px 15px;
            }
        }
        
        &-meta {
            background: #f8fafa;
            padding: 15px 23px;
            border-radius: 35px;
            margin-bottom: 17px;
            margin-top: -20px;
            position: relative;
            z-index: 1;

&-author {
                display: flex;
                align-items: center;
                gap: 6px;
        
                .author-name {
                    font-size: 18px;
                }
            }

&-love {
                font-size: 18px;

i {
                    margin-right: 5px;
                }
            }
            
        }

.card-title {
            font-size: 27px;
            line-height: 1.29;
            margin-bottom: 5px;
            transform-origin: left;
            transition: .2s var(--cube-1);

@media #{$xl} {
                font-size: 24px;
            }

@media #{$lg,$md,$xs} {
                font-size: 22px;
            }

&:hover {
                color: var(--kd-clr-sd-1);
                transform: scaleX(103%);
            }
        }
        
        .card-disc {
            font-weight: 500;
            font-size: 19px;
            line-height: 27px;
            color: #797a84;
        }

&:hover {
            .main-img {
                img {
                    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
                    
                }
            }
        }

}

/* 
    blog-1-end
*/

/* 
    blog-2-start
*/
.kd-blog-2-card {
    box-shadow: 0px 7px 81px 0px rgba(32, 28, 29, 0.07);
    border-radius: 20px;
    background: #fff;
    margin-bottom: 30px;

&-author {
        padding: 20px 30px;
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;

.author-img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            flex: 0 0 auto;
        }

.author-name {
            font-size: 18px;
        }

.author-love {
            font-size: 16px;
            margin-left: auto;
        }
    }
    
    .main-img {
        height: 265px;

img {
            transition: transform 500ms;
            transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
            transform-origin: center center;
        }
    }

.card-title {
        font-size: 27px;
        line-height: 1.29;
        transition: .2s var(--cube-1);
        transform-origin: left;
        margin-bottom: 8px;

@media #{$lg,$md,$xs} {
            font-size: 24px;
        }

&:hover {
            color: var(--kd-clr-sd-1);
            transform: scaleX(103%);
            -webkit-transform: scaleX(103%);
            -moz-transform: scaleX(103%);
            -ms-transform: scaleX(103%);
            -o-transform: scaleX(103%);
        }

}

.card-content {
        padding: 35px 50px;

@media #{$xl,$lg,$md,$xs} {
            padding: 35px 20px;
        }
    }

.card-disc {
        font-size: 19px;
        line-height: 26px;
        font-weight: 600;
        color: #797a84;
    }

&:hover {
        .main-img {
            img {
                transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
            }
        }
    }
}

/* 
    blog-2-end
*/

/* 
    blog-3-start
*/
.kd-blog-3 {

&-content {
        margin-bottom: 30px;
    }

&-card {
        box-shadow: 0px 30px 160px 0px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        border-radius: 20px;
        margin-bottom: 30px;

.blog-img {
            height: 250px;

img {
                transition: transform 500ms;
                transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
                transform-origin: center center;
            }
        }

.blog-title {
            font-size: 24px;
            line-height: 1.45;
            color: #252525;
            margin-bottom: 14px;
            transition: .2s var(--cube-1);

@media #{$lg,$md,$xs} {
                font-size: 22px;
            }

&:hover {
                color: var(--kd-clr-sd-1);
            }
        }

.card-content {
            padding: 30px 35px;

@media #{$lg,$md,$xs} {
                padding: 30px 15px;
            }
        }

.blog-author {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px 30px;
            background: transparent;
            padding: 12px 0px;
            border-radius: 20px;
            position: relative;
            z-index: 1;
            margin-bottom: 20px;

&::after {
                content: "";
                width: 100%;
                height: 100%;
                background: #ebebeb;
                position: absolute;
                left: -50px;
                top: 0;
                z-index: -1;
                border-radius: 20px;

@media #{$xl} {
                    width: 110%;
                }

@media #{$lg} {
                    width: 115%;
                }
                @media #{$xs} {
                    width: 115%;
                }
                @media #{$sm} {
                    width: 100%;
                }
            }

li {
                font-size: 15px;
                font-weight: 700;
                color: #8799a3;

&:nth-child(1) {
                    color: #4c40f6;
                }
                i {
                    margin-right: 3px;
                }
            }
        }

.blog-disc {
            font-size: 19px;
            line-height: 28px;
            color: var(--kd-clr-h-1);
            font-weight: 500;
        }

&:hover {
            img {
                transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
            }
        }
    }
}

/* 
    blog-3-end
*/

/* 
    blog-4-start
*/
.kd-blog-4 {
    &-scn-title {
        gap: 0 30px;

@media #{$md,$xs} {
            flex-wrap: wrap;
            margin-bottom: 50px;
        }

.left {
            max-width: 560px;
        }

.scn-disc {
            max-width: 550px;
        }
    }

&-row {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 30px;

@media #{$md,$xs} {
            grid-template-columns: 1fr;
        }
    }

&-card {
        margin-bottom: 30px;

.item-img {
            height: 180px;
            margin-bottom: 18px;

@media #{$md,$xs} {
                height: 300px;
            }

.item-title {
            font-size: 22px;
            line-height: 1.36;
            margin-bottom: 15px;
            transition: .2s ease;

@media #{$xl,$lg,$md,$xs} {
                font-size: 20px;
            }

&:hover {
                color: var(--kd-clr-pr-4);
            }
        }

.item-disc {
            margin-bottom: 15px;
        }

.item-line {
            width: 100%;
            height: 1px;
            background: #D9D9D9;
            opacity: 10%;
            margin-bottom: 12px;
        }

.item-author {
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            color: var(--kd-clr-sd-4);

span {
                color: #fff;
                margin-right: 5px;
            }

}

.btn-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }

.item-btn {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            gap: 20px;
            font-family: var(--kd-font-barlow);
            text-transform: uppercase;
            font-weight: 500;
            line-height: 24px;
            font-size: 16px;
            padding: 2px 10px;
            background: transparent;
            color: #fff;
            border-radius: 100px;
            position: relative;
            z-index: 1;
            overflow: hidden;
            transition: .5s ease;
        
            i {
                color: #000;
                display: inline-block;
                transition: .5s ease;
            }
        
            &::after {
                content: "";
                width: 28px;
                height: 100%;
                background: #fff;
                position: absolute;
                right: 0;
                top: 0;
                z-index: -1;
                transition: .5s ease;
            }
        
            &:hover {
                color: #fff;

i {
                    color: #fff;
                }
                &::after {
                    background: var(--kd-clr-pr-4);
                    width: 100%;
                }
            }
            
        }

&:is(.has-big-card) {
            .item-img {
                height: 485px;
                margin-bottom: 30px;
            }

.item-title {
                font-size: 40px;
                line-height: 1.25;
                margin-bottom: 20px;

@media #{$xl,$lg} {
                    font-size: 36px;
                }

@media #{$md} {
                    font-size: 30px;
                }

@media #{$xs} {
                    font-size: 22px;
                }
    
                &:hover {
                    color: var(--kd-clr-pr-4);
                }
            }

.item-disc {
                margin-bottom: 25px;
            }
        }

&:hover {
            .item-img {
                img {
                    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
                }
            }
           
        }
        
    }
}

/* 
    blog-4-end
*/