Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="monitoring">
    <div class="monitoring__container container">
        <div class="monitoring__row row">
            <div class="col-sm-6">
                <div class="monitoring-wrapper">
                    <div class="monitoring-item">
                        <div class="monitoring-item__pin">offline</div>
                        <div class="monitoring-item__title">Offline monitoring <br> & enforcement</div>
                    </div>
                    <div class="monitoring-item">
                        <div class="monitoring-item__pin">online</div>
                        <div class="monitoring-item__title">Online brand <br> protection</div>
                    </div>
                    <div class="monitoring-item">
                        <div class="monitoring-item__pin">online</div>
                        <div class="monitoring-item__title">Legal services</div>
                    </div>
                    <div class="monitoring-item">
                        <div class="monitoring-item__pin">offline</div>
                        <div class="monitoring-item__title">Customs enforcement</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="monitoring-panel">
                    <div class="monitoring-panel__img"><img src="img/monitoring/img/img-1.png" alt=""></div>
                    <div class="monitoring-panel__text">1 We block trademark offers of counterfeit goods, gray goods, sites containing a trademark in a domain name, scammers in social networks, marketplaces, on websites, in advertising, app stores, managers, etc.</div>
                    <div class="monitoring-panel__desc">In-house team of experts</div>
                    <div class="monitoring-panel__bottom">
                        <div class="monitoring-panel__images">
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-1.png" alt=""></div>
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-2.png" alt=""></div>
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-3.png" alt=""></div>
                        </div>
                        <div class="monitoring-panel__image-desc">
                            <span class="orange">+150</span>
                            Lawyers, Analysts, Certified Experts
                        </div>
                    </div>
                    <a href="" class="monitoring-panel__button button button--tr-white">Learn more</a>
                </div>
                <div class="monitoring-panel">
                    <div class="monitoring-panel__img"><img src="img/monitoring/img/img-1.png" alt=""></div>
                    <div class="monitoring-panel__text">2 We block trademark We block trademark We block trademark We block trademark We block trademark offers of counterfeit goods, gray goods, sites containing a trademark in a domain name, scammers in social networks, marketplaces, on websites, in advertising, app stores, managers, etc.</div>
                    <div class="monitoring-panel__desc">In-house team of experts</div>
                    <div class="monitoring-panel__bottom">
                        <div class="monitoring-panel__images">
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-1.png" alt=""></div>
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-2.png" alt=""></div>
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-3.png" alt=""></div>
                        </div>
                        <div class="monitoring-panel__image-desc">
                            <span class="orange">+150</span>
                            Lawyers, Analysts, Certified Expertssss
                        </div>
                    </div>
                    <a href="" class="monitoring-panel__button button button--tr-white">Learn more</a>
                </div>
                <div class="monitoring-panel">
                    <div class="monitoring-panel__img"><img src="img/monitoring/img/img-1.png" alt=""></div>
                    <div class="monitoring-panel__text">3 We block trademark offers of counterfeit goods, gray goods, sites containing a trademark in a domain name, scammers in social networks, marketplaces, on websites, in advertising, app stores, managers, etc.</div>
                    <div class="monitoring-panel__desc">In-house team of experts</div>
                    <div class="monitoring-panel__bottom">
                        <div class="monitoring-panel__images">
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-1.png" alt=""></div>
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-2.png" alt=""></div>
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-3.png" alt=""></div>
                        </div>
                        <div class="monitoring-panel__image-desc">
                            <span class="orange">+150</span>
                            Lawyers, Analysts, Certified Experts
                        </div>
                    </div>
                    <a href="" class="monitoring-panel__button button button--tr-white">Learn more</a>
                </div>
                <div class="monitoring-panel">
                    <div class="monitoring-panel__img"><img src="img/monitoring/img/img-1.png" alt=""></div>
                    <div class="monitoring-panel__text">4 We block trademark offers of counterfeit goods, gray goods, sites containing a trademark in a domain name, scammers in social networks, marketplaces, on websites, in advertising, app stores, managers, etc.</div>
                    <div class="monitoring-panel__desc">In-house team of experts</div>
                    <div class="monitoring-panel__bottom">
                        <div class="monitoring-panel__images">
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-1.png" alt=""></div>
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-2.png" alt=""></div>
                            <div class="monitoring-panel__image"><img src="img/monitoring/icons/img-3.png" alt=""></div>
                        </div>
                        <div class="monitoring-panel__image-desc">
                            <span class="orange">+150</span>
                            Lawyers, Analysts, Certified Expertssss
                        </div>
                    </div>
                    <a href="" class="monitoring-panel__button button button--tr-white">Learn more</a>
                </div>
            </div>
        </div>
    </div>
</div>
              
            
!

CSS

              
                $orange: #F96336;
$brown: #36322F;
$darkp: #7D7A78;
$powder: #B4A8A6;
$disabled: #F6F3F2;
$scrims: rgba($color: #000000, $alpha: .6);
$whited: rgba($color: #fff, $alpha: .2);

@mixin p2{
    font-size: 1.8rem;
    line-height: 2.3rem;
}

.p2{
    @include p2()
}

@mixin p2b{
    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.p2b{
    @include p2b()
}

@mixin p3b{
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

.p3b{
    @include p3b()
}

@mixin p4{
    font-size: 1.2rem;
    line-height: 1.5rem;
    letter-spacing: -0.01em;
}

.p4{
    @include p4()
}

@mixin h1 {
    font-size: 10rem;
    line-height: 10.5rem;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.h1{
    @include h1()
}

@mixin h1-mobile {
    font-size: 5rem;
    line-height: 5rem;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.h1-mobile{
    @include h1-mobile()
}

@mixin h2 {
    font-size: 7rem;
    line-height: 7rem;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.h2{
    @include h2()
}

@mixin h2-mobile {
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.h2-mobile{
    @include h2-mobile()
}

@mixin h3 {
    font-size: 3.5rem;
    line-height: 3.2rem;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.h3{
    @include h3()
}

@mixin h3-mobile {
    font-size: 2.2rem;
    line-height: 2.4rem;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.h3-mobile{
    @include h3-mobile()
}

@mixin p1 {
    font-size: 3.5rem;
    line-height: 3.5rem;
}

.p1{
    @include p1()
}

@mixin p1-mobile {
    font-size: 2.2rem;
    line-height: 2.6rem;
    letter-spacing: -0.02em;
}

.p1-mobile{
    @include p1-mobile()
}

// Mixin

@mixin animate {
    transition: all 0.3s ease;
}

@mixin flex {
    display: flex;
    flex-wrap: wrap;
}

.flex {
    @include flex;
}

@mixin flex-ss {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.flex-ss {
    @include flex-ss;
}

@mixin flex-sc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.flex-sc {
    @include flex-sc;
}

@mixin flex-sfe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
}

.flex-sfe {
    @include flex-sfe;
}

@mixin flex-cs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.flex-cs {
    @include flex-cs;
}

@mixin flex-cc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.flex-cc {
    @include flex-cc;
}

@mixin flex-cfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.flex-cfe {
    @include flex-cfe;
}

@mixin flex-ssb {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.flex-ssb {
    @include flex-ssb;
}

@mixin flex-csb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.flex-csb {
    @include flex-csb;
}

@mixin button--big {
    padding: 10px 80.5px;
}

@mixin button--small {
    padding: 10px 15px;
}

html{
  font-size: 10px;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    min-width: 320px;
    line-height: normal;
    font-family: sans-serif;
    font-size: 1.4rem;
    background: #fff;
    background-position: 0 0;
    overflow-x: hidden;
    font-feature-settings: "pnum" on, "lnum" on;

    &.noscroll {
        overflow: hidden;
    }
}

.button {
    @include animate;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 40px;

    @include p3b;
    text-align: center;

    i[class^="icon-"] {
        margin-right: 10px;
        font-size: 20px;
    }

    &.button--dark {
        background: $brown;
        color: #fff;

        &:hover {
            background: $orange;
        }

        &:disabled {
            background: $disabled;
            color: $powder;
        }
    }

    &.button--tr-white {
        background: transparent;
        border: 1px solid #fff;
        color: #fff;

        &:hover {
            background: #fff;
            color: $brown;
        }

        &:disabled {
            background: $whited;
            color: #fff;
        }
    }

    &.button--tr-black {
        background: transparent;
        border: 1px solid $brown;
        padding: 9px 40px;
        color: $brown;

        &:hover {
            border-color: $orange;
            color: $orange;
        }

        &:disabled {
            background: $whited;
            color: #fff;
        }
    }

    &.button--big {
        @include button--big();
    }
}

.monitoring{
    background: #fff;
    padding-top: 35px;
    padding-bottom: 35px;
    margin-top: 165px;
    margin-bottom: 165px;

    &-item{
        // margin-bottom: 80px;
        padding-bottom: 80px;

        &:first-child{
            .monitoring-item{
                &__pin{
                    color: $orange;
                }

                &__title{
                    color: $brown;
                }
            }
        }

        &:last-child{
            padding-bottom: 0;
        }

        &__pin{
            @include p2;
            // color: $orange;
            color: #f3f3f3;

            margin-bottom: 10px;
        }

        &__title{
            @include h2;
            // color: $brown;

            color: #e5e5e5;
        }
    }

    // &-right{
    //     position: sticky;
    //     top: 35px;
    //     position: relative;
    //     min-height: 100%;
    // }

    &-panel{
        background: $brown;
        // position: absolute;
        // width: max-content;
        // height: max-content;
        // max-width: 100%;
        // max-height: 100%;

        // position: sticky;
        // top: 35px;
        // right: 0;

        &:first-child{
            display: flex;
        }

        padding: 50px;
        @include flex-ss;
        flex-direction: column;

        &__img{
            width: 100%;
            margin-bottom: 20px;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover
            }
        }

        &__text{
            @include p2;
            color: #fff;

            margin-bottom: 20px;
        }

        &__desc{
            @include p2;
            color: rgba($color: #fff, $alpha: .3);

            margin-bottom: 10px;
        }

        &__bottom{
            @include flex-csb;
            margin-bottom: auto;
            width: 100%;

            margin-bottom: 70px;
        }

        &__images{
            @include flex-cs;
        }

        &__image{
            border: 1px solid $brown;
            filter: drop-shadow(0px 0px 4px #36322F);

            margin-left: -10px;

            width: 30px;
            height: 30px;

            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            
            &:first-child{
                margin-left: 0;
            }

            &:nth-child(1){
                z-index: 3;
            }
            &:nth-child(2){
                z-index: 2;
            }
            &:nth-child(3){
                z-index: 1;
            }
        }

        &__image-desc{
            @include p3b;
            color: #fff;

            .orange{
                color: $orange;
            }

            width: calc(100% - 70px - 10px);
        }
    }

    &__row{
        align-items: flex-start;
    }

    &__container{
        transition: none;
    }
}

@media (max-width: 1199px){
    .monitoring{
        margin-top: 105px;
        margin-bottom: 105px;
        &-item{
            padding-bottom: 50px;
            &__title{
                @include h2-mobile;
            }
        }

        &-panel{
            padding: 20px;

            &__bottom{
                margin-bottom: 32px;
            }
        }
    }
}

@media (max-width: 767px){
    .monitoring{
        margin-top: 25px;
        margin-bottom: 65px;
        // &-left{
        //     height: 335px;
        //     overflow: hidden;
        // }
    }
}


.container {
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 35px;
    padding-left: 35px;
    @include animate;
    box-sizing: border-box;
}

.row {
    display: flex;
    margin-right: -17.5px;
    margin-left: -17.5px;
    width: calc(100% + 35px);
    &-no-gutters {
        margin-right: 0;
        margin-left: 0;

        [class*="col-"] {
            padding-right: 0;
            padding-left: 0;
        }
    }
}

[class*="col-"] {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 17.5px;
    padding-left: 17.5px;

    &.col-no-gutter {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 768px) {
    [class*="col-sm"] {
        float: left;
    }

    .col-sm {
        &-12 {
            width: 100%;
        }

        &-11 {
            width: 91.66666667%;
        }

        &-10 {
            width: 83.33333333%;
        }

        &-9 {
            width: 75%;
        }

        &-8 {
            width: 66.66666667%;
        }

        &-7 {
            width: 58.33333333%;
        }

        &-6 {
            width: 50%;
        }

        &-5 {
            width: 41.66666667%;
        }

        &-4 {
            width: 33.33333333%;
        }

        &-3 {
            width: 25%;
        }

        &-2 {
            width: 16.66666667%;
        }

        &-1 {
            width: 8.33333333%;
        }

        &-pull-12 {
            right: 100%;
        }

        &-pull-11 {
            right: 91.66666667%;
        }

        &-pull-10 {
            right: 83.33333333%;
        }

        &-pull-9 {
            right: 75%;
        }

        &-pull-8 {
            right: 66.66666667%;
        }

        &-pull-7 {
            right: 58.33333333%;
        }

        &-pull-6 {
            right: 50%;
        }

        &-pull-5 {
            right: 41.66666667%;
        }

        &-pull-4 {
            right: 33.33333333%;
        }

        &-pull-3 {
            right: 25%;
        }

        &-pull-2 {
            right: 16.66666667%;
        }

        &-pull-1 {
            right: 8.33333333%;
        }

        &-pull-0 {
            right: auto;
        }

        &-push-12 {
            left: 100%;
        }

        &-push-11 {
            left: 91.66666667%;
        }

        &-push-10 {
            left: 83.33333333%;
        }

        &-push-9 {
            left: 75%;
        }

        &-push-8 {
            left: 66.66666667%;
        }

        &-push-7 {
            left: 58.33333333%;
        }

        &-push-6 {
            left: 50%;
        }

        &-push-5 {
            left: 41.66666667%;
        }

        &-push-4 {
            left: 33.33333333%;
        }

        &-push-3 {
            left: 25%;
        }

        &-push-2 {
            left: 16.66666667%;
        }

        &-push-1 {
            left: 8.33333333%;
        }

        &-push-0 {
            left: auto;
        }

        &-offset-12 {
            margin-left: 100%;
        }

        &-offset-11 {
            margin-left: 91.66666667%;
        }

        &-offset-10 {
            margin-left: 83.33333333%;
        }

        &-offset-9 {
            margin-left: 75%;
        }

        &-offset-8 {
            margin-left: 66.66666667%;
        }

        &-offset-7 {
            margin-left: 58.33333333%;
        }

        &-offset-6 {
            margin-left: 50%;
        }

        &-offset-5 {
            margin-left: 41.66666667%;
        }

        &-offset-4 {
            margin-left: 33.33333333%;
        }

        &-offset-3 {
            margin-left: 25%;
        }

        &-offset-2 {
            margin-left: 16.66666667%;
        }

        &-offset-1 {
            margin-left: 8.33333333%;
        }

        &-offset-0 {
            margin-left: 0%;
        }
    }
}
              
            
!

JS

              
                window.gsap = gsap

gsap.registerPlugin(ScrollTrigger);

window.ScrollTrigger = ScrollTrigger

    if (document.querySelectorAll(".monitoring").length > 0) {
        let items = gsap.utils.toArray(".monitoring-item");
        let panels = gsap.utils.toArray(".monitoring-panel");
        gsap.set(panels, { autoAlpha: 0, display: "none" });
        gsap.set(panels[0], { autoAlpha: 1, display: "flex" })

        let gsapMonitioring = gsap.timeline({
            paused: true,
            defaults: {
                duration: 1,
            },

            scrollTrigger: {
                trigger: ".monitoring",
                start: "0px",
                endTrigger: items[items.length - 1],
                end: "bottom top",
                pin: true,
            },
        })

        items.forEach(function (item1, i) {

            if (i > 0 && i !== items.length - 1) {
                ScrollTrigger.create({
                    trigger: item1,
                    start: "top top",
                    end: "bottom top",
                    markers: true,
                    preventOverlaps: true,
                  

                    onEnter: () => animateIn(item1, panels[i]),
                    onEnterBack: () => animateInNoBack(item1, panels[i]),
                    onLeave: () => animateOut(item1, panels[i]),
                    onLeaveBack: () => animateOut(item1, panels[i])
                })
            }

            if (i == 0) {
                ScrollTrigger.create({
                    trigger: item1,
                    start: "top top",
                    end: "bottom top",
                    markers: true,
                    preventOverlaps: true,

                    onEnterBack: () => animateInNoBack(item1, panels[i]),
                    onLeave: () => animateOut(item1, panels[i]),
                    onLeaveBack: () => animateOutFirst(item1, panels[i])

                })
            }

            if (i == items.length - 1) {
                ScrollTrigger.create({
                    trigger: item1,
                    start: "top top",
                    end: "bottom top",
                    markers: true,
                    preventOverlaps: true,

                    onEnter: () => animateIn(item1, panels[i]),
                    onLeaveBack: () => animateOut(item1, panels[i])
                })
            }
        })

        function animateIn(item, panel) {
            if (window.matchMedia("(min-width: 768px)").matches){
                let height = item.offsetHeight
                gsap.to(item.querySelector(".monitoring-item__title"), { color: "#36322F", overwrite: true });
                gsap.to(item.querySelector(".monitoring-item__pin"), { color: "#F96336", overwrite: true });
                gsap.to(panel, { autoAlpha: 1, display: "flex", delay: 0.5 })
                gsap.to(".monitoring-wrapper", { y: "-=" + height})
            }
        }

        function animateInNoBack(item, panel) {
            if (window.matchMedia("(min-width: 768px)").matches){
                gsap.to(item.querySelector(".monitoring-item__title"), { color: "#36322F", overwrite: true });
                gsap.to(item.querySelector(".monitoring-item__pin"), { color: "#F96336", overwrite: true });
                gsap.to(panel, { autoAlpha: 1, display: "flex", delay: 0.5 })
            }
        }

        function animateOut(item, panel) {
            if (window.matchMedia("(min-width: 768px)").matches){
                let height = item.offsetHeight
                gsap.to(item.querySelector(".monitoring-item__title"), { color: "#e5e5e5", overwrite: true });
                gsap.to(item.querySelector(".monitoring-item__pin"), { color: "#f3f3f3", overwrite: true });
                gsap.to(panel, { autoAlpha: 0, display: "none", overwrite: true });
                gsap.to(".monitoring-wrapper", { y: "+=" + height })
            }
        }

        function animateOutFirst(item, panel) {
            if (window.matchMedia("(min-width: 768px)").matches){
                gsap.to(item.querySelector(".monitoring-item__title"), { color: "#36322F", overwrite: true });
                gsap.to(item.querySelector(".monitoring-item__pin"), { color: "#F96336", overwrite: true });
            }
        }
    }
              
            
!
999px

Console