Glowing-Log-in-window-in-Pure-html-css #30

-

 

<!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>login</title>
<style>
* {
position: absolute;
}
html,
body {
width: 100%;
height: 100%;
/* background-color: rgb(0, 0, 0); */
background-color: whitesmoke;
margin: 0px;
padding: 0px;
}
.backside {
margin: 0px;
width: 400px;
height: 700px;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
background-color: rgb(255, 255, 255);
box-shadow: 1px 1px 25px 15px indianred;
border-radius: 80px;
transition: 0.6s;
animation: changecolor 2s linear infinite;
transition: 0.4s;
}
@keyframes changecolor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
#image {
position: relative;
width: 300px;
height: 300px;
border-radius: 80px;
transform: translate(-50%, -50%);
left: 67%;
top: 170px;
box-shadow: inset 1px 1px 25px 5px indianred;
animation: changecolor 3s linear infinite;
}
.input {
text-transform: uppercase;
text-align: center;
white-space: pre;
font-family: monospace;
font-size: 30px;
font-weight: 900;
color: rgb(28, 14, 14);
text-shadow: 1px 1px 3px rgb(252, 0, 0), -1px -1px 3px green;
}
.position1 {
top: 300px;
left: 150px;
}
.position2 {
letter-spacing: 3px;
top: 350px;
left: 130px;
}
.position3 {
letter-spacing: 3px;
top: 430px;
left: 130px;
}
.position4 {
letter-spacing: 3px;
top: 620px;
left: 60px;
}
.inputfield {
width: 350px;
height: 35px;
border-radius: 25px;
outline: none;
text-align: center;
font-size: 25px;
/* animation: changecolor 1s linear infinite;
box-shadow: 1px 1px 25px 2px indianred; */
box-shadow: inset 1px 1px 25px 2px indianred;
border: none;
border-color: whitesmoke;
}
.inputfieldposition1 {
top: 420px;
left: 20px;
}
.inputfield2 {
width: 350px;
height: 35px;
border-radius: 25px;
outline: none;
text-align: center;
font-size: 25px;
/* animation: changecolor 1s linear infinite;*/
box-shadow: inset 1px 1px 25px 2px indianred;
/* border-color: whitesmoke; */
border-color: whitesmoke;
border: none;
}
.inputfieldposition2 {
top: 500px;
left: 20px;
}
.button {
width: 150px;
height: 50px;
border-radius: 25px;
outline: none;
top: 580px;
left: 125px;
/* animation: changecolor 1s linear infinite;
box-shadow: 1px 1px 25px 2px indianred; */
border: whitesmoke;
animation: changecolor 1s linear infinite;
box-shadow: 1px 1px 25px 2px indianred;
font-weight: 900;
font-size: 25px;
font-family: monospace;
color: whitesmoke;
text-shadow: 1px 1px 3px rgb(252, 0, 0), -1px -1px 3px green;
transition:0.2s;
}
.button:hover {
transition:0.2s;
width: 150px;
height: 50px;
border-radius: 25px;
outline: none;
top: 580px;
left: 125px;
/* animation: changecolor 1s linear infinite;
box-shadow: 1px 1px 25px 2px indianred; */
border: whitesmoke;
animation: changecolor 1s linear infinite;
box-shadow: 1px 1px 25px 2px indianred;
font-weight: 900;
font-size: 35px;
font-family: monospace;
color: whitesmoke;
text-shadow: 1px 1px 3px rgb(252, 0, 0), -1px -1px 3px green;
}
</style>
</head>
<body>
<div class="backside">
<div class="img">
<img src="b.jpg" alt="" id="image">
</div>
<div>
<p class="input position1">log in</p>
</div>
<div>
<p class="input position2">Username</p>
<input type="username" class="inputfield inputfieldposition1">
</div>
<div class="psswd">
<p class="input position3">Password</p>
<input type="password" class="inputfield2 inputfieldposition2">
</div>
<div>
<p class="input position4">forget password</p>
</div>
<div>
<input type="button" onclick="" class="button" value="ENTER">
</div>
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

C Pogram to play Sa-re-ga......sa wihout break (Program 25)

-
/* Made by Anmol main Student :B.tech CSE  Punjabi university Patiala Program No. : 25 */ #include   <stdio.h> #include   <conio.h> #include   <windows.h> int   main () {      int   a ;      int   b   =   240 ;      printf ( "Press 1 to play Only 1 time \n: " );      printf ( "Press 2 to play untill you press a button \n: " );      scanf ( "%d" ,  & a );      switch  ( a )     case  1 :     {          do         {              Beep ( b ,  1000 );              b   +=   60 ;         }  while  ( b   !=   660 );          b   =   660 ;          do         {              Beep ( b ,  1000 );              b   -=   60 ;         }  while  ( b   !=   120 );      case   2 :     {          while  ( ! kbhit ())         {              do             {                  Beep ( b ,  1000 );                  b   +=   60 ;             }  while  ( b   !=   660 );              b   =   660 ;              do             {                  Beep ( b ,  1000 );
Read more

Hand cricket Game in C language - source code ( Program 15)

-
/* Made by Anmol main student B.tech CSE  Punjabi university   Program 15 */ #include <stdio.h> #include <windows.h> #include <conio.h> #include <stdlib.h> #include <time.h> #include <dos.h> #define N 20 int main() {     {          }     int x;     double y;     printf("_______________________________________");     char text1[] = "| WELCOME TO HAND CRICKET GAME         |";     char text2[] = "| MADE BY ANMOL MAIN                   |";     char text3[] = "| LETS GET STARTED                     |\n|______________________________________|\n";     char text4[] = "\nENTER PLAYER 1 NAME : ";       char str[N];     char str2[N];     char text6[] = "\n\nRULES OF THE GAME -:\nTwo players using number of fingers to indicate runs would play against each other the bowler wins if he guessed the same number as the batsman if not then batsman aquires the runs according to the gesture he makes\nTHE LAST BOWL SC
Read more

Program to find largest of 3 numbers in C language (Program 08)

-
/*Made by Anmol main Student B.tech Cse Punjabi university Hindustan Coding Program 08 */ #include<stdio.h> int main() {   int a,b,c; //write the fixed values of a and b if not then take it from the user     printf("Enter a number A \n");     scanf("%d",&a);     printf("Enter a number B\n");     scanf("%d",&b);     printf("Enter a number C \n");     scanf("%d",&c);     {   if (a>b&&a>c)             printf("\nThe number A = %d is Greater\n",a);         else if (b>a&&b>c)             printf("\nThe number B = %d is Greater\n",b);         else if (c>a&&c>b)             printf("\nThe number C = %d is Greater\n",c);         else             printf("please enter diffrent values of A,B and C");         }     return 0; }
Read more