<div class="awp_main">
    <section class="awp_main_container">
        <div class="awp_title-wrapper">
            <h1>Awesome Parallax Effects</h1>
        </div>
        <div class="awp_des_wrapper">
            <p>This plugin use to adds parallax animations on any images/videos. The prallax effect is directly applied
                to image or video tags or containers</p>
        </div>
        <div class="awp_howto_wrapper">
            <div class="awp_box1">
                <img src="<?php echo plugins_url(AWPIMG_PATH.'/el-exp.gif', __FILE__) ?>" alt="elementor">
                <h3>Elementor Example</h3>
            </div>
            <div class="awp_box1">
                <img src="<?php echo plugins_url(AWPIMG_PATH.'/wp-bak-exp.gif', __FILE__) ?>" alt="wp bakery">
                <h3>WP Bakery Page Builder Example</h3>
            </div>
        </div>
        <div class="awp_normal_exp">
            <h3>If you are using any custom page builder or any custom code just add <em>selected class </em>to
                image/video wrapper.</h3>
        </div>
        <hr>
        <div class="awp_example_wrapper">
            <h1>Demo Effects</h1>
            <br />
            <div class="awp_exp ">
                <h3>Effect3</h3>
                <div>
                    <img class="awp_exp_1" src="<?php echo plugins_url(AWPIMG_PATH.'/expa.jpg', __FILE__) ?>" alt="awp">
                </div>

            </div>

            <div class="awp_exp ">
                <h3>Effect1 Style <strong>UP</strong> (you can add different listed styles)</h3>
                <div class="awp_exp_2">
                    <img src="<?php echo plugins_url(AWPIMG_PATH.'/expb.jpg', __FILE__) ?>" alt="awp">
                </div>

            </div>
            <div class="awp_exp ">
                <h3>Effect1 Style <strong>Right</strong> (you can add different listed styles)</h3>
                <div class="awp_exp_3">
                    <img src="<?php echo plugins_url(AWPIMG_PATH.'/expc.jpg', __FILE__) ?>" alt="awp">
                </div>
            </div>



        </div>
    </section>
    <aside class="awp_side_container">
        <h3>Effect Classes</h3>
        <p>Simply copy and add the below classes to your image/video elements.</p>
        <table>
            <tr>
                <th>Effect 1</th>
            </tr>
            <tr>
                <td>awp_effect1_up</td>
            </tr>
            <tr>
                <td>awp_effect1_right</td>
            </tr>
            <tr>
                <td>awp_effect1_down</td>
            </tr>
            <tr>
                <td>awp_effect1_left</td>
            </tr>
            <tr>
                <td>awp_effect1_up_left</td>
            </tr>
            <tr>
                <td>awp_effect1_up_right</td>
            </tr>
            <tr>
                <td>awp_effect1_down_left</td>
            </tr>
            <tr>
                <td>awp_effect1_left_right</td>
            </tr>
        </table>
        <br />
        <table>
            <tr>
                <th>Effect 2</th>
            </tr>
            <tr>
                <td>awp_effect2_up</td>
            </tr>
            <tr>
                <td>awp_effect2_right</td>
            </tr>
            <tr>
                <td>awp_effect2_down</td>
            </tr>
            <tr>
                <td>awp_effect2_left</td>
            </tr>
        </table>
        <br />
        <table>
            <tr>
                <th>Effect 3</th>
            </tr>
            <tr>
                <td>awp_effect3</td>
            </tr>
        </table>
        <footer class="awp_footer">
            <strong>Credits:-</strong>
            <ul>
                <li>Thanks to Pixabay</li>
                <li>Thanks to Simpleparallax</li>
            </ul>
            <p>Made With love by Saiarlen</a></p>
        </footer>
    </aside>

</div>