Follow & Share Form So Guys Follow & Share Maa Blogger
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<body>
<div class="start-btn">
<a href="#">Maa Blogger</a>
</div>
<div class="center modal-box">
<div class="fas fa-times">
</div>
<div class="fas fa-envelope icon1">
</div>
<header><font color="red">Don't Miss Updates From us!</font></header>
<p>
You May Get A Lots of Programming From Maa Blogger</p>
<form action="">
<div class="fas fa-envelope icon2">
</div>
<input type="email" required placeholder="akbhardwaj729@gmail.com">
<button><a href="https://programming387.blogspot.com">Follow & Share</a></button>
</form>
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
<script>
$(document).ready(function(){
$('.start-btn').click(function(){
$('.modal-box').toggleClass("show-modal");
$('.start-btn').toggleClass("show-modal");
});
$('.fa-times').click(function(){
$('.modal-box').toggleClass("show-modal");
$('.start-btn').toggleClass("show-modal");
});
});
</script>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
text-align: center;
background: url(https://i.pinimg.com/564x/b0/96/8d/b0968debb65fb936e0a514f1934e81a8.jpg);
font-family: 'Elephant';
}
::selection{
color: white;
background: #48DBFB;
}
.center,.start-btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.start-btn a{
font-size: 80px;
background: white;
color: #48DBFB;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
top: 40%;
opacity: 0;
visibility: hidden;
background: green;
height: auto;
width: 600px;
padding: 30px;
border-radius: 5px;
border: 1px solid #50dcfb;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
opacity: 0;
visibility: hidden;
}
.modal-box.show-modal{
top: 50%;
opacity: 1;
visibility: visible;
transition: .4s;
}
.modal-box .fa-times{
position: absolute;
top: 0;
right: 0;
background: #48DBFB;
height: 45px;
width: 50px;
line-height: 40px;
color: white;
font-size: 18px;
border-radius: 0 5px 0 50px;
padding-left: 13px;
cursor: pointer;
}
.fa-times:hover{
font-size: 22px;
}
.modal-box .icon1{
font-size: 60px;
background: #48DBFB;
height: 120px;
width: 120px;
color: yellow;
border-radius: 50%;
line-height: 120px;
text-align: center;
margin-bottom: 10px;
}
.modal-box header{
font-size: 31px;
font-family: 'PosterBodoni BT';
margin-bottom: 10px;
}
.modal-box p{
margin-bottom: 10px;
line-height: 20px;
color: grey;
}
form input, form button{
height: 50px;
width: 95%;
border-radius: 3px;
}
form .icon2{
position: absolute;
height: 50px;
width: 50px;
margin-top: 15px;
background: #48DBFB;
color: white;
line-height: 50px;
font-size: 24px;
border-radius: 5px 0 0 5px;
}
form input{
margin-top: 15px;
padding: 0 65px;
font-size: 18px;
outline: none;
border: 2px solid #1ed2fa;
caret-color: #48DBFB;
}
input::placeholder{
color: #8c8c8c;
}
form input:focus{
box-shadow: 0 0 15px #82e6fc,
0 0 25px #b4f0fd,
0 0 35px #ffffff;
}
form button{
margin-top: 15px;
background: #48DBFB;
color: white;
font-size: 25px;
border: 1px solid #1ed2fa;
letter-spacing: 1px;
cursor: pointer;
outline: none;
transition: .3s;
}
form button:hover{
background: #f34d5c;
border: 1px solid #05cdfa;
letter-spacing: 2px;
}
.modal-box .icons{
margin-top: 25px;
}
.icons i{
font-size: 50px;
margin: 0 7px;
color: #48DBFB;
cursor: pointer;
}
.icons i:hover{
transform: scale(1.1);
color: #05cdfa;
}
OUTPUT
Posts
34 Comments
Wow wonderful
ReplyDeleteAwesome
ReplyDeleteWork
Wow Guys Great
ReplyDeletehappy happy happy new year in advance 😝😝😝😝
ReplyDeleteVery Interesting
ReplyDeleteKallu
ReplyDeleteFantastic
Perfect
ReplyDeleteMind Blowing
ReplyDeleteSuperb
ReplyDeleteVery nice
ReplyDeletewow Great
ReplyDeletePerfect
ReplyDeleteGreat
ReplyDeleteSuperb Post
ReplyDeletePerfect Work With Code
ReplyDeleteGreat Job Guys
ReplyDeleteInteresting
ReplyDeleteCool
ReplyDeleteWonderful
ReplyDeleteAwesome
ReplyDeleteFantastic
ReplyDeleteAwesome
ReplyDeleteExcellent
ReplyDeleteBrilliant
ReplyDeleteFantastic
ReplyDeleteExcellent
ReplyDeleteGreat
ReplyDeleteSuperb
ReplyDeletebrilliant
ReplyDeleteInteresting
ReplyDeleteVery Interesting
ReplyDeleteSuper Quality Work
ReplyDeleteAwesome Work
ReplyDeleteSuper Quality Work
ReplyDelete