<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="pop-up-head">
<div class="pop-box">
<div class="pop-box1">
<div class="white-box">
<div class="white-box1">
<ul>
<li>LOREM IPSUM</li>
<li>DOLOR SIT AMET</li>
<li>DOLOR SIT AMET</li>
</ul>
</div>
</div>
<div class="off-box">
<div class="off-box1">
<h4><span>25%</span><sup>OFF</sup></h4>
<p>lorem lipsum dolor sit amet*</p>
</div>
</div>
<div class="close">
<a href=""><p><img src="https://image.ibb.co/meRcAK/close.png" alt="" title=""></p></a>
</div>
<div class="form-inputgroup">
<h3>Special Discount for your Subscription</h3>
<div class="form-gro">
<input type="text" name="Name" placeholder="Name">
</div>
<div class="form-gro">
<input type="text" name="Email" placeholder="Enter your email here">
</div>
<div class="form-gro">
<input type="text" name="Mobile" placeholder="Mobile">
</div>
<div class="form-gro">
<a href="#">SUBSCRIBE</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
font-family: 'Roboto', sans-serif;
}
.pop-up-head a{
text-decoration: none;
}
ul{
list-style: none;
}
.pop-up-head {
background: rgba(0, 0, 0, 0.57);
width: 100%;
height: 100%;
padding: 150px 0px;
position: relative;
}
.pop-box {
width: 100%;
max-width: 600px;
background: #fe3263;
border-radius: 8px;
margin: 0 auto;
height: 545px;
border: 8px solid rgba(0, 0, 0, 0.18);
/* background-image: url(ba.png);*/
}
.pop-box1 {
padding: 12px 0 0px 0px;
background: rgba(0, 0, 0, 0.12);
position: relative;
}
.white-box {
background: #fff;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
height: 180px;
position: relative;
box-shadow: 0px 4px 2px rgba(212, 212, 212, 0.8313725490196079);
}
.white-box1 {
float: right;
padding-right: 40px;
padding-top: 18px;
}
.white-box1 li {
padding: 10px 0px;
position: relative;
font-weight: 600;
color: #555;
}
.white-box1 li:before {
position: absolute;
content: '';
width: 12px;
height: 12px;
background: #6ee81e;
top: 14px;
left: -25px;
}
.off-box {
position: absolute;
top: -30px;
left: 11px;
border: 8px solid rgba(0, 0, 0, 0.18);
background: #fe3263;
border-radius: 10px;
}
.off-box1 {
background: rgba(0, 0, 0, 0.12);
padding: 45px 30px 16px 30px;
border-radius: 4px;
}
.off-box1 h4 {
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 0px;
}
.off-box1 span {
font-size: 85px;
}
.off-box1 p {
font-size: 16px;
color: #fff;
line-height: 0px;
padding-top: 10px;
}
.off-box1 sup {
position: absolute;
top: 41px;
right: 51px;
}
.form-gro{
padding: 8px;
}
.form-gro input {
height: 50px;
padding: 10px;
font-size: 16px;
width: 100%;
border-radius: 32px;
border: 4px solid #e41232;
}
.form-inputgroup {
margin: 0 auto;
display: block;
width: 80%;
padding-bottom: 26px;
}
.form-inputgroup h3 {
color: #fff;
text-align: center;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 3px;
margin-top: 22px;
}
.form-gro a {
width: 100%;
display: block;
text-align: center;
padding: 8px 10px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.6px;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
border: 4px solid #FEF733;
background: #FEDA03;
}
.close {
position: absolute;
top: 10px;
border-top: 3px solid #df2c57;
border-left: 25px solid #df2c57;
border-bottom: 27px solid #df2c57;
border-top-left-radius: 7px;
border-bottom-left-radius: 134px;
border-bottom-right-radius: 1px;
right: -1px;
background-color: #df2c57;
}
.close p {
line-height: 0;
margin: 0 5px 0 0PX;
}
.close img {
width: 24px;
height: 24px;
padding-right: 10px;
}
@media screen and (max-width:480px){
.pop-box {
width: 94%;
}
.form-inputgroup {
padding-bottom: 8px;
}
.off-box {
left: 40px;
}
.white-box1 {
float: none;
padding-right: 0px;
padding-top: 0px;
position: absolute;
top: 136px;
left: 29px;
}
.white-box {
height: 300px;
}
.pop-box {
height: 636px
}
}
@media screen and (max-width:568px){
.pop-box {
width: 96%;
}
}
@media screen and (max-width:375px){
.off-box {
left: 15px;
}
.close img {
padding-right: 0px;
}
}
@media screen and (max-width:320px){
.off-box {
left: 4px;
}
.close {
top: -20px;
right: 20px;
}
