<!-- HTML code -->
<section class="cm-item-24 hero-section">
    <div class="hero-container">
        <div class="content-wrapper">
            <div class="left-area">
                <div class="hero-img">
                    <img src="http://cdn.codemela.com/wp-content/uploads/2024/08/5.png" alt="">
                </div>
                <div class="energy-icon">
                    <img src="http://cdn.codemela.com/wp-content/uploads/2024/08/icon-energy.6e93cb9b.png" alt="">
                </div>
            </div>
            <div class="right-area">
                <div class="border-box"></div>
                <h1>We install solar <br>panel for home <br>&amp; office</h1>
                <p>A leading voice in low-income solar policy and <br> the nation’s largest nonprofit solar
                installer</p>
                <a class="cm-btn" href="#">
                        Our Services
                    <img src="http://cdn.codemela.com/wp-content/uploads/2024/08/icon-sm-arrow.b78ddcd9.png" alt="">
                </a>
            </div>
        </div>
    </div>
</section>

<!-- CSS code -->
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .cm-item-24.hero-section {
            background: url(http://cdn.codemela.com/wp-content/uploads/2024/08/4.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            padding-top: 80px;
        }
        .cm-item-24.hero-section::before {
            content: "";
            position: absolute;
            top: auto;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 120px;
            background-image: url(http://cdn.codemela.com/wp-content/uploads/2024/08/shape-1.146a8fa9.png);
            background-size: cover;
            background-position: 50%;
            background-repeat: no-repeat;
            z-index: 5;
        }
        .cm-item-24.hero-section .hero-container {
            max-width: 90%;
            margin: 0 auto;
        }
        .cm-item-24.hero-section .content-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cm-item-24.hero-section .content-wrapper .left-area {
            width: 50%;
            position: relative;
        }
        .cm-item-24.hero-section .content-wrapper .left-area .hero-img {
            position: relative;
            margin-left: -910px;
            margin-bottom: -70px;
        }
        .cm-item-24.hero-section .content-wrapper .left-area .hero-img img {
            animation: bounce-y 10s linear infinite;
        }
        @keyframes bounce-y {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-30px);
            }
            100% {
                transform: translateY(0);
            }
        }
        .cm-item-24.hero-section .content-wrapper .left-area .energy-icon {
            position: absolute;
            right: 200px;
            top: 75px;
        }

        .cm-item-24.hero-section .content-wrapper .left-area .energy-icon img {
            animation: bounce-x 10s linear infinite;
        }
        @keyframes bounce-x {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(30px);
            }
           100% {
                transform: translateX(0);
            }
        }
        .cm-item-24.hero-section .content-wrapper .right-area {
            width: 50%;
            position: relative;
            padding-top: 45px;
            padding-left: 68px;
        }
        .cm-item-24.hero-section .content-wrapper .right-area .border-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 470px;
            height: 593px;
            pointer-events: none;
            border: 15px solid hsla(0, 0%, 100%, .4);
        }
        .cm-item-24.hero-section .content-wrapper .right-area h1 {
            position: relative;
            line-height: 100px;
            color: #fff;
            font-size: 75px;
            margin-bottom: 20px;
        }
        .cm-item-24.hero-section .content-wrapper .right-area p {
            font-size: 24px;
            line-height: 36px;
            letter-spacing: -.01em;
            margin-bottom: 35px;
            color: #fff;
        }
        .cm-item-24.hero-section .content-wrapper .right-area .cm-btn {
            position: relative;
            font-size: 14px;
            line-height: 27px;
            padding: 17px 41px;
            font-weight: 700;
            overflow: hidden;
            color: #fff;
            background: #57b33e;
            text-transform: uppercase;
            display: inline-block;
            transition: all .3s ease;
            text-decoration: none;
            z-index: 111;
        }
        .cm-item-24.hero-section .content-wrapper .right-area .cm-btn::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: #000;
            transform: scaleX(0);
            color: #fff;
            pointer-events: none;
            transform-origin: top right;
            transition: transform .5s cubic-bezier(.86, 0, .07, 1);
            transition-timing-function: cubic-bezier(.86, 0, .07, 1);
            z-index: -1;
        }
        .cm-item-24.hero-section .content-wrapper .right-area .cm-btn:hover::before {
            transform: scale(1);
            transform-origin: bottom left;
        }

        .cm-item-24.hero-section .content-wrapper .right-area .cm-btn img {
            margin-left: 5px;
        }
        @media (max-width: 600px){
            .cm-item-24.hero-section{
                padding-bottom: 80px;
            }
            .cm-item-24.hero-section .content-wrapper{
                display: block;
            }
            .cm-item-24.hero-section .content-wrapper .left-area{
                display: none;
            }
            .cm-item-24.hero-section .content-wrapper .right-area{
                width: 100%;
                padding: 0;
                text-align: center;
            }
            .cm-item-24.hero-section .content-wrapper .right-area .border-box{
                width: 80%;
                right: 0;
                margin: 0 auto;
            }
            .cm-item-24.hero-section .content-wrapper .right-area h1{
                font-size: 42px;
                line-height: 55px;
                padding-top: 10px;
            }
            .cm-item-24.hero-section .content-wrapper .right-area p{
                font-size: 18px;
                margin-bottom: 20px;
            }
        }
        @media (min-width: 600px) and (max-width: 768px){
            .cm-item-24.hero-section{
                padding-bottom: 80px;
            }
            .cm-item-24.hero-section .content-wrapper{
                display: block;
            }
            .cm-item-24.hero-section .content-wrapper .left-area{
                display: none;
            }
            .cm-item-24.hero-section .content-wrapper .right-area{
                width: 100%;
                padding: 0;
                text-align: center;
            }
            .cm-item-24.hero-section .content-wrapper .right-area .border-box{
                width: 80%;
                right: 0;
                margin: 0 auto;
            }
            .cm-item-24.hero-section .content-wrapper .right-area h1{
                font-size: 65px;
                line-height: 70px;
                padding-top: 10px;
            }
            .cm-item-24.hero-section .content-wrapper .right-area p{
                font-size: 20px;
                margin-bottom: 20px;
            }
        }
        @media (min-width: 767px) and (max-width: 1020px){
            .cm-item-24.hero-section .content-wrapper{
                align-items: start;
            }
            .cm-item-24.hero-section .content-wrapper .right-area{
                padding-left: 50px;
                margin-top: 50px;
            }
            .cm-item-24.hero-section .content-wrapper .right-area .border-box{
                width: 90%;
                right: 0;
                margin: 0 auto;
            }
            .cm-item-24.hero-section .content-wrapper .right-area h1{
                font-size: 42px;
                line-height: 55px;
                padding-top: 10px;
            }
            .cm-item-24.hero-section .content-wrapper .right-area p{
                font-size: 18px;
                margin-bottom: 20px;
            }
        }
        @media (min-width: 1020px) and (max-width: 1400px){
            .cm-item-24.hero-section .content-wrapper{
                align-items: start;
            }
            .cm-item-24.hero-section .content-wrapper .right-area{
                padding-left: 50px;
                margin-top: 50px;
            }
            .cm-item-24.hero-section .content-wrapper .right-area .border-box{
                width: 90%;
                right: 0;
                margin: 0 auto;
            }
            .cm-item-24.hero-section .content-wrapper .right-area h1{
                font-size: 65px;
                line-height: 70px;
                padding-top: 10px;
            }
            .cm-item-24.hero-section .content-wrapper .right-area p{
                font-size: 20px;
                margin-bottom: 20px;
            }
        }
</style>