we can see some pop-ups on many famous and beautiful websites. Here we are introducing a premium theme of a pop-up. This theme is wonderful and amazing. Now We are giving this to you for free.
This theme is mainly developed with HTML and CSS. And you can add your own JavaScript files or other files for the form's function. you can add a function to view it as a pop-up.
Or you can wait some days to get the pop-up javascript code. we will publish that code on this website.
We added some simple animations to this theme. I think you will like it.
This is the model of the Premium pop-up theme.
Below I will give the code pen link to copy the code and edit it. If you like the code please support out team. and comment in this post about your experience.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop up</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="body">
<div class="anime-circle"></div>
<div class="anime-circle anime-circle2"></div>
<div class="pop-up-body">
<div class="pop-up-image">
<img src="./image.jpg" alt="">
</div>
<button type="submit" class="pop-up-button">
Get it now
</button>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #223;
}
.pop-up-body{
width: 400px;
height: 530px;
background: #fff;
overflow: hidden;
border-radius: 20px;
padding: 10px;
box-shadow: 10px 15px 10px;
z-index: 3;
}
.pop-up-image{
width: 100%;
height: 461px;
border-radius: 20px 20px 0 0;
overflow: hidden;
}
.pop-up-button{
width: 100%;
height: 43px;
background: #999;
font-size: 15px;
border-radius: 0 0 7px 7px;
border: none;
cursor: pointer;
margin-top: 7px;
transition: 200ms;
}
.pop-up-button:hover{
background: #000;
color: #fff;
}
/*animation*/
.anime-circle{
width: 100px;
height: 100px;
background: linear-gradient(to right, #fff,#777);
border-radius: 50%;
animation-duration: 10s;
animation-name: animation;
animation-iteration-count: infinite;
animation-delay: 100ms;
position: absolute;
left: 33%;
}
@keyframes animation{
0%{
rotate: 100deg;
transform: translateX(100px);
}
30%{
rotate: 200deg;
transform: translateY(100px);
}
60%{
rotate: 300deg;
transform: translateX(10px);
}
100%{
rotate: 100deg;
transform: translateX(100px);
}
}
.anime-circle2{
left: 60%;
animation: 10s animation2 infinite 100ms;
}
@keyframes animation2 {
0%{
rotate: 200deg;
transform: translateY(200px);
}
30%{
rotate: 100deg;
transform: translateX(100px);
}
}
Codepen link
sign up or log in on codepen.io to see above section
You can copy the code from the above iframe. This code is developed by Irshad.
If you want to study how to build HTML webpages, please contact Irshad. You can study the HTML and CSS basics at a low cost. We only pay 10$ for each. It means 10$ for HTML basics, 10$ for CSS basics, 10$ for JAVASCRIPT, 10$ for C++, and 10$ for C.
Comments
Post a Comment