"Popup Design CSS3 without Bootstrap"
Bootstrap 4.1.1 Snippet by ravishkumar

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Login and Register Modal
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: