<!-- HTML code -->
<section class="cm-item-11 hero-section">
    <div class="hero-container">
        <div class="content-wrapper">
            <div class="left-area">
                <h1>Classical <span class="shape-1">Education</span> For The Future </h1>
                <p>It is long established fact that reader distracted by the readable content.</p>
                <div class="subscribe-area">
                    <form class="newsletter-form">
                        <label>
                            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="25px" height="25px"
                                    viewBox="0 0 47 32" enable-background="new 0 0 47 32" xml:space="preserve"
                                    fill="#ff7e84" stroke="#ff7e84">

                                    <g id="SVGRepo_bgCarrier" stroke-width="0" />

                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />

                                    <g id="SVGRepo_iconCarrier">
                                        <g>
                                            <path fill="#808184"
                                                d="M45.5,0h-44C0.673,0,0,0.673,0,1.5v29C0,31.327,0.673,32,1.5,32h44c0.827,0,1.5-0.673,1.5-1.5v-29 C47,0.673,46.327,0,45.5,0z M1.5,1h44C45.775,1,46,1.225,46,1.5v2.119L26.947,22.162c-1.654,1.566-4.243,1.568-5.897-0.005L1,3.611 V1.5C1,1.225,1.225,1,1.5,1z M45.5,31h-44C1.225,31,1,30.775,1,30.5V4.974l19.366,17.913c1.019,0.967,2.325,1.45,3.633,1.45 c1.309,0,2.619-0.484,3.641-1.454L46,5.014V30.5C46,30.775,45.775,31,45.5,31z" />
                                            <path fill="#808184"
                                                d="M12.394,18.058l-5.628,5.636c-0.195,0.195-0.195,0.512,0,0.707c0.098,0.098,0.226,0.146,0.354,0.146 s0.256-0.049,0.354-0.146l5.628-5.636c0.195-0.195,0.195-0.512,0-0.707S12.589,17.862,12.394,18.058z" />
                                            <path fill="#808184"
                                                d="M35.93,17.2c-0.195-0.195-0.512-0.195-0.707,0s-0.195,0.512,0,0.707l6.274,6.276 c0.098,0.098,0.226,0.146,0.354,0.146s0.256-0.049,0.354-0.146c0.195-0.195,0.195-0.512,0-0.707L35.93,17.2z" />
                                        </g>
                                    </g>

                                </svg>
                            </label>
                        <input type="text" class="input-newsletter" placeholder="Enter your mail" name="EMAIL"
                                required="" autocomplete="off">
                        <a class="cm-btn" href="#">Get Started
                                Now</a>
                        </form>
                    </div>
                </div>
            <div class="right-area">
                    <div class="hero-img">
                        <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/man1.c9cc5f2a.png" alt="">
                    </div>
            </div>
        </div>
    </div>
</section>
<!-- CSS code -->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .cm-item-11.hero-section {
        background: url(http://cdn.codemela.com/wp-content/uploads/2024/07/1.5490ae5c.png);
        height: auto;
        max-width: 100%;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover;
        overflow: hidden;
        padding-top: 120px;
    }
    .cm-item-11.hero-section .hero-container {
        max-width: 90%;
        margin: 0 auto;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper {
        display: flex;
        justify-content: space-between;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area {
        width: 48%;
        margin-top: 100px;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area h1 {
        font-size: 82px;
        margin-bottom: 18px;
        line-height: 105px;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area h1 .shape-1 {
        background-image: url(http://cdn.codemela.com/wp-content/uploads/2024/07/shape.ade5cd23.svg);
        background-repeat: no-repeat;
        background-position: bottom;
        display: inline-block;
        color: #30bead;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area p {
        font-size: 24px;
        color: #7b7b8a;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area .subscribe-area .newsletter-form {
        position: relative;
        margin-top: 30px;
        background-color: #fff;
        padding: 15px;
        border-radius: 6px;
        box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .09);
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area .subscribe-area .newsletter-form label {
        position: absolute;
        margin-bottom: 0;
        left: 20px;
        top: 28px;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area .subscribe-area .newsletter-form .input-newsletter {
        height: 50px;
        display: block;
        width: 100%;
        background-color: #fff;
        border-radius: 5px;
        border: none;
        padding-left: 45px;
        font-size: 18px;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area .subscribe-area .newsletter-form .input-newsletter:focus {
        border: none;
        outline: 0;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .left-area .subscribe-area .newsletter-form .cm-btn {
        position: absolute;
        right: 20px;
        top: 15px;
        background-color: #ff7e84;
        color: #fff;
        padding: 15px 32px;
        display: inline-block;
        border-radius: 5px;
        border: none;
        font-weight: 300;
        font-size: 18px;
        text-decoration: none;
        text-align: center;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .right-area {
        width: 50%;
    }
    .cm-item-11.hero-section .hero-container .content-wrapper .right-area .hero-img img {
        max-width: none;
    }
    @media (max-width: 767px) {
        .cm-item-11.hero-section {
            padding-top: 80px;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper {
            display: block;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .left-area {
            margin-top: 0;
            width: 100%;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .left-area h1 {
            font-size: 45px;
            margin-bottom: 12px;
            line-height: 60px;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .left-area p {
            font-size: 18px;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .left-area .subscribe-area .newsletter-form .input-newsletter {
            background-color: #f9f9f9;
            font-size: 16px;
            margin-bottom: 10px;
            padding-left: 45px;
            max-width: 100%;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .left-area .subscribe-area .newsletter-form .cm-btn {
            position: static;
            width: 100%;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .right-area {
            width: 100%;
            margin-top: 50px;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .right-area .hero-img img {
            max-width: 100%;
            margin: o auto;
        }
    }
    @media (min-width: 768px) and (max-width: 1020px) {
        .cm-item-11.hero-section {
            padding-top: 80px;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper {
            display: block;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .left-area {
            margin-top: 0;
            width: 100%;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .right-area {
            width: 100%;
            margin-top: 50px;
        }
        .cm-item-11.hero-section .hero-container .content-wrapper .right-area .hero-img img {
            max-width: 100%;
            margin: o auto;
        }
    }
</style>