You Can Follow & Share New Type from Maa Blogger By Coding

Ticker

10/recent/ticker-posts

You Can Follow & Share New Type from Maa Blogger By Coding

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


Post a Comment

34 Comments

  1. happy happy happy new year in advance 😝😝😝😝

    ReplyDelete