arrow_back
View code

<div class="cdt-jumbotron with-bg">
        <div class="bg">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 404.99"><g><line y1="53.17" x2="1920" y2="53.17" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line y1="106.81" x2="1920" y2="106.81" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line y1="160.45" x2="1920" y2="160.45" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line y1="214.08" x2="1920" y2="214.08" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line y1="267.72" x2="1920" y2="267.72" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line y1="321.36" x2="1920" y2="321.36" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line y1="375" x2="1920" y2="375" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="159.37" x2="159.37" fill="none" opacity="0.4"/><line x1="159.37" x2="159.37" y2="400" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="318.84" y1="0.5" x2="318.84" y2="400.5" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="478.3" y1="1" x2="478.3" y2="401" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="637.76" y1="1.5" x2="637.76" y2="401.5" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="797.23" y1="2" x2="797.23" y2="402" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="956.69" y1="2.49" x2="956.69" y2="402.49" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="1116.15" y1="2.99" x2="1116.15" y2="402.99" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="1275.61" y1="3.49" x2="1275.61" y2="403.49" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="1435.08" y1="3.99" x2="1435.08" y2="403.99" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="1594.54" y1="4.49" x2="1594.54" y2="404.49" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/><line x1="1754" y1="4.99" x2="1754" y2="404.99" fill="none" stroke="#231f20" stroke-miterlimit="10" opacity="0.4"/></g><g id="Layer_2" data-name="Layer 2"><line x1="287.86" y1="120.12" x2="253.84" y2="145.98" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line x1="257.92" y1="116.04" x2="283.78" y2="150.06" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line x1="540.64" y1="285.6" x2="521.06" y2="300.5" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line x1="523.4" y1="283.26" x2="538.3" y2="302.84" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line x1="1170.85" y1="244.22" x2="1161.06" y2="251.67" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line x1="1162.23" y1="243.05" x2="1169.68" y2="252.84" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line x1="1320.64" y1="125.6" x2="1301.06" y2="140.5" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><line x1="1303.4" y1="123.26" x2="1318.3" y2="142.84" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><rect x="193.14" y="121.81" width="22.48" height="22.48" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><rect x="434.38" y="176.68" width="76.16" height="76.16" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="1502.5" cy="287.05" r="28.37" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="1435.5" cy="214.05" r="16.23" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="1518.5" cy="133.05" r="6.59" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><path d="M295,133.36c31.86,5.3,81.36,19.4,116.08,60.88q4.64,5.52,8.52,11.19" fill="none" stroke="#231f20" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/><polygon points="409.01 204.78 409.42 202.82 419.07 204.83 420.37 195.05 422.36 195.32 420.77 207.23 409.01 204.78" fill="#231f20"/></g></svg>
        </div>
        <div class="cdt-container">
            <div class="content center">
                <h1>Power the world’s Web designers & developers</h1>
                <p class="cdt-sub-header">Develop for the 15,000 customers and user's, get recognition and earn money
                    for
                    your effort of making
                    production ready components in Kodhus UI framework.</p>
                <div class="form-action cdt-padding-top-lg">
                    <input type="text" id="email" placeholder="Enter your email">
                    <div class="cdt-btn cdt-btn-primary cdt-btn-full-rounded">Sign up</div>
                </div>
            </div>
        </div>
    </div>
                        
Copy HTML

/*
 * File: _hero-background.scss
 * Location /src/scss/components
 * Hero background component
 */

.cdt-jumbotron .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    pointer-events: none;
    svg {
        position: absolute;
        transform: translateX(-50%);
        width: 120%;
        top: 0;
        left: 50%;
        height: auto;
        min-width: 1180px;
        max-width: 1960px;
        opacity: 0.14;
    }
}

                        
Copy SCSS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.