MAKE LOGIN PAGE USING HTML & CSS

Hi Guys Today I have taught you, how to make a Login+SignUp+Welcome Page With
HTML And CSS

Trail Video

HTML CODES FOR SIGNUP+LOGIN+WELCOME

Enter Ad Link:

HTML CODE FOR SIGN UP PAGE

Enter Ad Link:

HTML CODE FOR LOGIN PAGE

Enter Ad Link:

HTML CODE FOR WELCOME PAGE

CSS CODES FOR LOGIN+SIGNUP PAGE

Enter Ad Link:

CSS CODE FOR SIGN UP PAGE

<style>

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppin', sans-serif;

}

body{

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: black;

}

.container{

background: rgb(15, 15,15);

width:400px;

height: 600px;

border-radius: 20px;

display: flex;

justify-content: center;

flex-direction: column;

color: white;

padding: 2em;

}

.heading{

font-size: 2em;

margin-bottom:0.5em;

}

.box{

margin: 0.2em 0;

}

.container .box p{

color: rgba(255, 255,255,0.781);

}

.container .box input{

position: absolute;

width: 100%;

height: 100%;

background: rgb(19, 19,19)

color:white;

border:none;

outline:none;

padding-left:0.8em;

transition:all .4s;

}

.container .box div{

position: relative;

width: 100%;

height: 40px;

margin: 0.5em 0;

}

.container .box input:focus::placeholder{

color: pink;

}

.container .box div::before{

content: '';

position: absolute;

top: 50%;

left:50%;

transform: translate(-50%,-50%);

width: 103%;

height:108%;

border-radius: 10px;

background: linear-gradient(to right, #ff416c,#ff4b2b);

}

.signupBtn{

width: 40%;

height:40px;

border:none;

border-radius: 10px;

margin:0.5em 0;

transform: translate(-1%);

cursor:pointer;

color: white;

background: linear-gradient(to right, #ff416c,#ff4b2b);

}

.signupBtn:hover{

transform: translate(-1%,-5%);

box-shadow: 0 0 10px #ff416d65;

}

.text{

font-size: 0.8em;

margin-top: 0.5em;

text-align: center;

color: rgba(255, 255,255,0.623);

}

.text a{

color: rgba(255, 255,255,0.911);

}

text-decoration: none;

text-align: center;

color: white;

}

</style>

Enter Ad Link:

CSS CODE FOR LOGIN PAGE

<style>

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body{

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: black;

}

.container{

background: rgb(15,15,15);

width: 350px;

height: 450px;

border-radius: 20px;

display: flex;

justify-content: center;

flex-direction:column;

color: white;

padding: 2em;

}

.heading{

font-size: 2em;

margin-bottom: 0.5em;

}

.box{

margin:0.2em 0;

}

.container .box p{

color: rgba(255, 255, 255, 0.781)

}

.container .box div{

position: relative;

width: 100%;

height: 40px;

margin: 0.5em 0;

}

.container .box input{

position: absolute;

width: 100%;

height: 100%;

background:rgb(19, 19,19);

color:white;

border:none;

outline:none;

padding-left:0.8em;

transition:all .4s;

}

.container .box input:focus::placeholder{

color:pink;

}

.container .box div::before{

content: '';

position: absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

width:100%;

height:105%;

border-radius:10px;

background:linear-gradient(to right, #ff416c,#ff4b2b);

}

.loginBtn{

width: 40%;

height: 40px;

border:none;

border-radius: 10px;

margin: 0.5em 0;

transform: translate(-1%);

cursor: pointer;

color: white;

background: linear-gradient(to right,#ff416c,#ff4b2b);

transition: all. 4s;

}

.loginBtn:hover{

transform: translate(-1%,-5%);

box-shadow: 0 0 10px #ff416d65;

}

.text{

font-size: 0.8em;

margin-top:0.5em;

text-align:center;

color:rgba(255, 255,255,0.623);

}

.text a{

color: rgba(255, 255, 255, 0.911);

}

text-decoration: none;

color: white;

}

</style>

THANKS!!

MAKE LOGIN PAGE USING HTML & CSS

HTML And CSS

HTML CODES FOR SIGNUP+LOGIN+WELCOME

HTML CODE FOR SIGN UP PAGE

HTML CODE FOR LOGIN PAGE

HTML CODE FOR WELCOME PAGE

CSS CODES FOR LOGIN+SIGNUP PAGE

CSS CODE FOR SIGN UP PAGE

CSS CODE FOR LOGIN PAGE

MYFILES-DOWNUP

Mini Militia V4.3.3 All Guns Death Sprayer Mod By Gamer Abhishek

Picsart 22.6 Latest Version Mod Apk By Abhishek Kansari

Mini Militia V4.3.3 Death Mod-V2 By Gamer Abhishek

Mini Militia V4.3.3 Crazy Mod By Gamer Abhishek

Class 11th Notes Physics Chemistry And Maths By G.A Productions

MAKE LOGIN PAGE USING HTML & CSS

HTML And CSS

HTML CODES FOR SIGNUP+LOGIN+WELCOME

HTML CODE FOR SIGN UP PAGE

HTML CODE FOR LOGIN PAGE

HTML CODE FOR WELCOME PAGE

CSS CODES FOR LOGIN+SIGNUP PAGE

CSS CODE FOR SIGN UP PAGE

CSS CODE FOR LOGIN PAGE

MYFILES-DOWNUP

You might like