-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (41 loc) · 2.95 KB
/
index.html
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
38
39
40
41
42
43
44
<!doctype html>
<html class="w-screen h-screen">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subscribe Popup</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class=" flex flex-col justify-center items-center w-screen h-screen">
<div class="wraper relative">
<div class="card-bg bg-white shadow-lg w-96 h-auto rounded-xl py-5 pb-7 opacity-80 relative z-50">
<div class="close-icon text-right px-5">
<i class="fa-solid fa-xmark text-xl cursor-pointer bg-sl hover:text-red-500"></i>
</div>
<div class="card-title"> <h1 class="pt-7 text-indigo-700 text-lg font-bold text-center">Enjoy Reading Our Books?</h1>
</div>
<div class="card-text text-slate-950">
<h2 class="text-center pt-5 leading-5 font-semibold">Join Our Newsletter & <br> Get Discounts Offers.</h2>
</div>
<div class="subs-btn text-center mt-5">
<form action="#">
<input type="email" placeholder="Enter Your Mail" class="text-center border-2 border-slate-500 rounded-md"> <br>
<!-- <button type="submit" class=" mt-3 px-5 py-1 rounded-lg text-white font-bold bg-indigo-800 border-2 border-slate-700 hover:bg-white hover:text-indigo-800 hover:border-2 border-indigo-800"> <a href="#">Subscribe Now</a></button> -->
<a href="#_" class=" mt-3 relative items-center justify-start inline-block px-5 py-2 overflow-hidden font-bold rounded-md group">
<span class="w-32 h-32 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg-indigo-400 opacity-[3%]"></span>
<span class="absolute top-0 left-0 w-48 h-48 -mt-1 transition-all duration-500 ease-in-out rotate-45 -translate-x-56 -translate-y-24 bg-indigo-800 opacity-100 group-hover:-translate-x-8"></span>
<span class="relative w-full text-left text-indigo-800 transition-colors duration-200 ease-in-out group-hover:text-white">Subscribe Now</span>
<span class="absolute inset-0 border-2 border-indigo-800 rounded-md"></span>
</a>
</form>
</div>
<div class="card-bg2 bg-white shadow-md w-96 h-auto rounded-xl absolute -inset-y-0.5 opacity-75 blur-[1px] py-5 pb-7 -z-10">
</div>
<div class="circle w-72 h-72 rounded-full bg-gradient-to-t from-indigo-500 to-indigo-700 absolute -z-20 -left-40 bottom-28 blur-3xl animate-spin transition-all delay-75 duration-75 ease-in-out opacity-90 "></div>
<div class="circle w-52 h-52 rounded-full bg-gradient-to-t from-indigo-500 to-indigo-700 absolute -z-20 -right-32 top-40 blur-3xl animate-spin transition-all delay-75 duration-75 ease-in-out opacity-90 "></div>
</div>
</div>
</body>
</html>