<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