Tuesday 4 February 2020

Responsive Animated Login Page Html Css JS

Responsive Animated Login Page Html Css JS


index.html                                Download: Code

<!DOCTYPE html>
<html>
<head>
 <title>Animated Login Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
 <script src="https://kit.fontawesome.com/a81368914c.js"></script>
</head>
<body>
 <img class="wave" src="img/wave.png">
 <div class="container">
  <div class="img">
   <img src="img/bg.svg">
  </div>
  <div class="login-content">
   <form action="index.html">
    <img src="img/avatar.svg">
    <h2 class="title">Welcome</h2>
             <div class="input-div one">
                <div class="i">
                  <i class="fas fa-user"></i>
                </div>
                <div class="div">
                  <h5>Username</h5>
                  <input type="text" class="input">
                </div>
             </div>
             <div class="input-div pass">
                <div class="i">
                  <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                  <h5>Password</h5>
                  <input type="password" class="input">
                </div>
             </div>
             <a href="#">Forgot Password?</a>
             <input type="submit" class="btn" value="Login">
            </form>
        </div>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

style.css

*{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

body{
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.wave{
 position: fixed;
 bottom: 0;
 left: 0;
 height: 100%;
 z-index: -1;
}

.container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap :7rem;
    padding: 0 2rem;
}

.img{
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

.login-content{
 display: flex;
 justify-content: flex-start;
 align-items: center;
 text-align: center;
}

.img img{
 width: 500px;
}

form{
 width: 360px;
}

.login-content img{
    height: 100px;
}

.login-content h2{
 margin: 15px 0;
 color: #333;
 text-transform: uppercase;
 font-size: 2.9rem;
}

.login-content .input-div{
 position: relative;
    display: grid;
    grid-template-columns: 7% 93%;
    margin: 25px 0;
    padding: 5px 0;
    border-bottom: 2px solid #d9d9d9;
}

.login-content .input-div.one{
 margin-top: 0;
}

.i{
 color: #d9d9d9;
 display: flex;
 justify-content: center;
 align-items: center;
}

.i i{
 transition: .3s;
}

.input-div > div{
    position: relative;
 height: 45px;
}

.input-div > div > h5{
 position: absolute;
 left: 10px;
 top: 50%;
 transform: translateY(-50%);
 color: #999;
 font-size: 18px;
 transition: .3s;
}

.input-div:before, .input-div:after{
 content: '';
 position: absolute;
 bottom: -2px;
 width: 0%;
 height: 2px;
 background-color: #38d39f;
 transition: .4s;
}

.input-div:before{
 right: 50%;
}

.input-div:after{
 left: 50%;
}

.input-div.focus:before, .input-div.focus:after{
 width: 50%;
}

.input-div.focus > div > h5{
 top: -5px;
 font-size: 15px;
}

.input-div.focus > .i > i{
 color: #38d39f;
}

.input-div > div > input{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 border: none;
 outline: none;
 background: none;
 padding: 0.5rem 0.7rem;
 font-size: 1.2rem;
 color: #555;
 font-family: 'poppins', sans-serif;
}

.input-div.pass{
 margin-bottom: 4px;
}

a{
 display: block;
 text-align: right;
 text-decoration: none;
 color: #999;
 font-size: 0.9rem;
 transition: .3s;
}

a:hover{
 color: #38d39f;
}

.btn{
 display: block;
 width: 100%;
 height: 50px;
 border-radius: 25px;
 outline: none;
 border: none;
 background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
 background-size: 200%;
 font-size: 1.2rem;
 color: #fff;
 font-family: 'Poppins', sans-serif;
 text-transform: uppercase;
 margin: 1rem 0;
 cursor: pointer;
 transition: .5s;
}
.btn:hover{
 background-position: right;
}


@media screen and (max-width: 1050px){
 .container{
  grid-gap: 5rem;
 }
}

@media screen and (max-width: 1000px){
 form{
  width: 290px;
 }

 .login-content h2{
        font-size: 2.4rem;
        margin: 8px 0;
 }

 .img img{
  width: 400px;
 }
}

@media screen and (max-width: 900px){
 .container{
  grid-template-columns: 1fr;
 }

 .img{
  display: none;
 }

 .wave{
  display: none;
 }

 .login-content{
  justify-content: center;
 }
}

main.js

const inputs = document.querySelectorAll(".input");


function addcl(){
 let parent = this.parentNode.parentNode;
 parent.classList.add("focus");
}

function remcl(){
 let parent = this.parentNode.parentNode;
 if(this.value == ""){
  parent.classList.remove("focus");
 }
}


inputs.forEach(input => {
 input.addEventListener("focus", addcl);
 input.addEventListener("blur", remcl);
});

Download Code - GitHub
at 1 comment:
Labels: ,

Saturday 1 February 2020

Android Smart Rate Us Dialog

Animated Android Smart Rate Us Dialog


A library for simple implementation of smart ranking. The user will see a dialog every x time. If the user gives a high score, he will be transferred to the Google store. If he gives a low score, he will only receive a thank you toast message.

Android Smart Rate Us Dialog

Step 1. Add it in your root build.gradle at the end of repositories:
                                                             Download: Code

allprojects {
    repositories {
maven {
}
    }
}

Step 2. Add the dependency:

dependencies {
         implementation 'com.github.guy-4444:SmartRateUsDialog-Android:1.00.08'
}

Step 3. Call Constructor:

// For one time call
    SmartRate.Rate(MainActivity.this
            , "Rate Us"
            , "Tell others what you think about this app"
            , "Continue"
            , "Close"
            , "Thanks for the feedback"
            , Color.parseColor("#2196F3")
            , 4
    );
    // For continual calls -
    SmartRate.Rate(MainActivity.this
                , "Rate Us" // title - optional
                , "Tell others what you think about this app" // content - optional
                , "Continue" // OK button text - optional
                , "Ask me later" // later button text - optional
                , "Never ask again" // stop asking button text - optional
                , "Thanks for the feedback" // thanks message to low star users - optional
                , Color.parseColor("#2196F3") // dialog theme color
                , 4 // open google play from _ stars  1..5 - optional
  , 48 // time between calls (unit: Hours) - default is 6 days
  , 72 // Time to wait until you start asking for the first time (unit: Hours) - default is 3 days
                );


Full Code - Download 

at No comments:
Labels:

Animated Login Form in Html by using JS

Animated Login Form in Html by using JS


index.html
Download: Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>

      <form action="index.html" class="login-form">
        <h1>Login</h1>

        <div class="txtb">
          <input type="text">
          <span data-placeholder="Username"></span>
        </div>

        <div class="txtb">
          <input type="password">
          <span data-placeholder="Password"></span>
        </div>

        <input type="submit" class="logbtn" value="Login">

        <div class="bottom-text">
          Don't have account? <a href="#">Sign up</a>
        </div>

      </form>

      <script type="text/javascript">
      $(".txtb input").on("focus",function(){
        $(this).addClass("focus");
      });

      $(".txtb input").on("blur",function(){
        if($(this).val() == "")
        $(this).removeClass("focus");
      });
        </script>
  </body>
</html>


style.css

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: montserrat;
  box-sizing: border-box;
}

body{
  min-height: 100vh;
  background-image: linear-gradient(120deg,#3498db,#8e44ad);
}

.login-form{
  width: 360px;
  background: #f1f1f1;
  height: 580px;
  padding: 80px 40px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.login-form h1{
  text-align: center;
  margin-bottom: 60px;
}

.txtb{
  border-bottom: 2px solid #adadad;
  position: relative;
  margin: 30px 0;
}

.txtb input{
  font-size: 15px;
  color: #333;
  border: none;
  width: 100%;
  outline: none;
  background: none;
  padding: 0 5px;
  height: 40px;
}

.txtb span::before{
  content: attr(data-placeholder);
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  z-index: -1;
  transition: .5s;
}

.txtb span::after{
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: linear-gradient(120deg,#3498db,#8e44ad);
  transition: .5s;
}

.focus + span::before{
  top: -5px;
}
.focus + span::after{
  width: 100%;
}
.logbtn{
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  background: linear-gradient(120deg,#3498db,#8e44ad,#3498db);
  background-size: 200%;
  color: #fff;
  cursor: pointer;
  transition: .5s;
}

.logbtn:hover{
  background-position: right;
}

.bottom-text{
  margin-top: 60px;
  text-align: center;
  font-size: 13px;
}

Download : Code
at No comments:
Labels: ,

Login Form In Html CSS with Hover and Focus Effect

Login Form In Html CSS with Hover and Focus Effect


index.html
Download: Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Animated Login in Html</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <form class="box" action="index.html" method="post">
      <h1>Login</h1>
      <input type="text" name="" placeholder="Username">
      <input type="password" name="" placeholder="Password">
      <input type="submit" name="" value="Login">
    </form>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #34495e
}
.box{
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #191919;
  text-align: center;
}
.box input[type = "text"],.box input[type = "password"]{
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}
.box h1{
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}
.box input[type = "text"]:focus,.box input[type ="password" ]:focus{
  width: 280px;
  border-color: #2ecc71;
}
.box input[type = "submit"]{
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}

.box input[type = "submit"]:hover{
  background: #2ecc71
}

Download : Code

at No comments:
Labels: ,
Subscribe to: Posts (Atom)

Donate