<html ng-app>

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
    <!--  <script>
        $(document).ready(function() {

            $(".totall").blur(function() {
                var cost = $('input[name="x"]').val();
                var price = $('input[name="y"]').val();


                //document.getElementById("result1").innerHTML = x;
                // document.getElementById("result2").innerHTML = mu;
                var divid = price / cost;
                var subt = price - cost;
                var roas = price / subt;
                document.getElementById("divd").innerHTML = divid;
                document.getElementById("subt").innerHTML = subt;

                document.getElementById("roas").innerHTML = roas;
            });


        });
    </script> -->
    <script>
        $(function() {
            $(".hvr-show1").mouseover(function() {
                $(".tipp1").css("display", "block");
            });
            $(".hvr-show1").mouseout(function() {
                $(".tipp1").css("display", "none");
            });

            $(".hvr-show2").mouseover(function() {
                $(".tipp2").css("display", "block");
            });
            $(".hvr-show2").mouseout(function() {
                $(".tipp2").css("display", "none");
            });

            $(".hvr-show3").mouseover(function() {
                $(".tipp3").css("display", "block");
            });
            $(".hvr-show3").mouseout(function() {
                $(".tipp3").css("display", "none");
            });

            $(".hvr-show4").mouseover(function() {
                $(".tipp4").css("display", "block");
            });
            $(".hvr-show4").mouseout(function() {
                $(".tipp4").css("display", "none");
            });

            $(".hvr-show5").mouseover(function() {
                $(".tipp5").css("display", "block");
            });
            $(".hvr-show5").mouseout(function() {
                $(".tipp5").css("display", "none");
            });
        });
    </script>
    <style>
        .formula {
            background: #1ea3ff;
            padding: 20px;
        }
        
        .inp-fld {
            display: flex;
        }
        
        .inp-fld div {
            margin: 0px 10px;
        }
        
        .inp-fld input {
            background: rgba(255, 255, 255, 0.75);
            color: #000;
            font-weight: bold;
            border: none;
            border-radius: 0.5em;
            padding: 0.5em;
            font-size: 2em;
            text-align: center;
            width: 100%;
            min-height: 90px;
            outline: none;
        }
        
        ul.results {
            display: flex;
            list-style: none;
        }
        
        ul.results li {
            margin: 0px 10px;
        }
        
        ul.results div {
            background: rgba(255, 255, 255, .25);
            color: #fff;
            font-weight: 700;
            border: none;
            border-radius: .5em;
            padding: .5em;
            padding-top: 20px;
            font-size: 2em;
            text-align: center;
            width: 100%;
            overflow: hidden;
            min-height: 67px;
            min-width: 110px;
        }
        
        label {
            color: #FFF;
            font-size: 14px;
            position: relative;
        }
        
        .tipp1,
        .tipp2,
        .tipp3,
        .tipp4,
        .tipp5 {
            position: absolute;
            top: 0px;
            left: 20px;
            padding: 20px;
            display: none;
            background-color: #f5f9fd;
            color: #000;
            text-align: left;
            border-radius: 6px;
            box-shadow: 0 3px 6px 0 rgba(14, 30, 62, .08);
            width: 240px;
        }
        
        .showit {
            display: block;
        }
        
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        /* Firefox */
        
        input[type=number] {
            -moz-appearance: textfield;
        }
        
        @media (max-width: 767px) {
            ul.results,
            .inp-fld {
                display: flex;
                flex-direction: column;
            }
            .tipp1,
            .tipp2,
            .tipp3,
            .tipp4,
            .tipp5 {
                width: 100%;
            }
        }
    </style>
</head>
<section class="formula">
    <div class="container">
        <div class="row" ng-app="">
            <div class="col-md-6">
                <h1 _ngcontent-c2="" style="color:white;font-weight:bold;">All you ever need for Dropshipping.</h1>
                <p _ngcontent-c2="" style="color:white;font-weight:400;">Competitor Inspector, Pricing Hunter, Niche Hunter, Winning Products, Product Video, Marketing Strategy. <b _ngcontent-c2="">Dropshipping Made Simple.</b></p>
                <div class="inp-fld">
                    <div>
                        <label class="hvr-show4"><i class="far fa-question-circle" style="color:white;"></i><span class="tipp4">Cost of Goods/Service (COGS) is how much you will pay to get the product delivered to customers including any additional fees.</span> COGS</label>
                        <input type="number" ng-model="num1" placeholder="Input Cost" />
                    </div>
                    <div>
                        <label class="hvr-show5"><i class="far fa-question-circle" style="color:white;"></i><span class="tipp5">How much are you selling this product for?</span> Selling Price</label>
                        <input type="number" ng-model="num2" placeholder="Input Price">
                    </div>
                </div>

            </div>
            <div class="col-md-6">
                <div _ngcontent-c2="" style="color:white;font-weight:bold;margin-bottom:1em;">Know Your Break Even Roas?</div>
                <ul class="results">
                    <li>
                        <label class="hvr-show1"><i class="far fa-question-circle" style="color:white;"></i><span class="tipp1">A cost multiplier is usually above 3 for low ticket dropshipping or in
                the range of 1 to 1.5 for high ticket dropshipping / service based businesses.</span> Multiplier</label>
                        <div class="totall" id="divd">{{ num3 = num2 / num1 }}</div>
                    </li>
                    <li>
                        <label class="hvr-show2"><i class="far fa-question-circle" style="color:white;"></i><span class="tipp2">The profit margin is simply the selling price minus COGS (Cost of Goods and Services). The profit margin will tell you a lot: How much you will earn, how much you can spend on marketing, when you will break even and more. It is also know as the Break Even Point (BEP).</span> Margin</label>
                        <div class="totall" id="subt"> {{ num2 - num1 }}</div>
                    </li>
                    <li>
                        <label class="hvr-show3"><i class=" far fa-question-circle" style="color:white;"></i><span class="tipp3">Break Even ROAS (Return On Ad Spent) is the number to know. This will tell you if your marketing is profitable or not.Your product profit margin is not 100%. The BE ROAS will be the determining number for profitability. As long as your ROAS is above B.E ROAS, you are profitable.</span> BE ROAS</label>
                        <div class="totall" id="roas">{{ num2 / (num2 - num1) }}</div>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</section>



</html>
error: Content is protected !!
Scroll to Top