Animated Login From Using Only HTML & CSS

Animated Login From Using Only HTML & CSS

download sourch code : https://docodee.blogspot.com/
download font awesome : https://fontawesome.com/

Learn how to create a responsive login form with CSS.

How To Create a Login Form

Step 1) Add HTML:

Add an image inside a container and add inputs (with a matching label) for each field. Wrap a

element around them to process the input. You can learn more about how to process input in our PHP tutorial.

Example

 <form action="action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form> 
  

Step 2) Add CSS:

Example

 /* Bordered form */
form {
  border: 3px solid #f1f1f1;
}

/* Full-width inputs */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 40%;
  border-radius: 50%;
}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
} 

How To Create a Modal Login Form

Step 1) Add HTML:

Example

 <!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>

<!-- The Modal -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">&times;</span>

  <!-- Modal Content -->
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>

    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <button type="submit">Login</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div> 

Step 2) Add CSS:

Example

 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
} 

Tip: You can also use the following javascript to close the modal by clicking outside of the modal content (and not just by using the “x” or “cancel” button to close it):

Example

 <script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script> 

#html #css #web-development

What is GEEK

Buddha Community

Animated Login From Using Only HTML & CSS
anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Josefa  Corwin

Josefa Corwin

1626949680

Animated Login Form Using Only HTML & CSS

Hi guys in this video we will be building this cool Animated Login Form with HTML and CSS
Please if like this video please give it thumbs up and drop a comment and also if you have not subscribe to my channel please try and subscribe.

#css #html #login #html & css

Josefa  Corwin

Josefa Corwin

1626931380

Animated Login Form Using Only HTML & CSS

Hi guys in this video we will be building this cool Animated Login Form with HTML and CSS
Please if like this video please give it thumbs up and drop a comment and also if you have not subscribe to my channel please try and subscribe.

#login #html #css #html & css

Create Password Protected Webpage Using PHP, HTML And CSS

In this tutorial we will show you how to create password protected webpage using PHP, HTML and CSS.
In this user have to write correct password to see the webpage content without password user will not be able to see the webpage content.

To Create Password Protected webpage It Takes Only Two Steps:-

  1. Make a PHP file and define markup
  2. Make a CSS file and define styling

Step 1. Make a PHP file and define markup

We make a PHP file and save it with a name password.php

<?php
session_start();

if(isset($_POST['submit_pass']) && $_POST['pass'])
{
 $pass=$_POST['pass'];
 if($pass=="123")
 {
  $_SESSION['password']=$pass;
 }
 else
 {
  $error="Incorrect Pssword";
 }
}

if(isset($_POST['page_logout']))
{
 unset($_SESSION['password']);
}
?>

<html>
<head>
<link rel="stylesheet" type="text/css" href="password_style.css">
</head>
<body>
<div id="wrapper">

<?php
if($_SESSION['password']=="123")
{
 ?>
 <h1>Create Password Protected Webpage Using PHP, HTML And CSS</h1>
 <form method="post" action="" id="logout_form">
  <input type="submit" name="page_logout" value="LOGOUT">
 </form>
 <?php
}
else
{
 ?>
 <form method="post" action="" id="login_form">
  <h1>LOGIN TO PROCEED</h1>
  <input type="password" name="pass" placeholder="*******">
  <input type="submit" name="submit_pass" value="DO SUBMIT">
  <p>"Password : 123"</p>
  <p><font style="color:red;"><?php echo $error;?></font></p>
 </form>
 <?php	
}
?>

</div>
</body>
</html>

In this step we first check if user logged in or not by checking session variable if the user is not logged in we display login form and if user is logged in we display webpage content with logout button.

We use two isset() condition to do login or logout.In first condition we simply get the password and check if the password is '123' if yes we put the password in session variable and then display the webpage.

In second condition we simply unset the session variable which stores password value. You may also like simple http authentication using PHP .

Step 2. Make a CSS file and define styling

We make a CSS file and save it with a name password_style.css

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#8A4B08;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:white;
}
#wrapper p
{
 font-size:16px;
}
#logout_form input[type="submit"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 font-size:16px;
 background:none;
 border:2px solid white;
 color:white;
}
#login_form
{
 margin-top:200px;
 background-color:white;
 width:350px;
 margin-left:310px;
 padding:20px;
 box-sizing:border-box;
 box-shadow:0px 0px 10px 0px #3B240B;
}
#login_form h1
{
 margin:0px;
 font-size:25px;
 color:#8A4B08;
}
#login_form input[type="password"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 padding-left:10px;
 font-size:16px;
}
#login_form input[type="submit"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 font-size:16px;
 background-color:#8A4B08;
 border:none;
 box-shadow:0px 4px 0px 0px #61380B;
 color:white;
 border-radius:3px;
}
#login_form p
{
 margin:0px;
 margin-top:15px;
 color:#8A4B08;
 font-size:17px;
 font-weight:bold;
}
anita maity

anita maity

1621077133

Responsive Footer Design using HTML, CSS & Bootstrap

Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

Live Demo


#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen