Skip to main content

Create a Responsive Login Form in HTML and CSS in Hindi

Create a Responsive Login Form in HTML and CSS in Hindi

                                                            Login Form in HTML and CSS




In this video, we will we see How to Create a Responsive Login Form in HTML and CSS in Hindi step by step.


As you can see I try to make a Login form that should be different from others available online on any social media. Believe me, you gonna learn many new technique and tips on how to make a Responsive Login Form in HTML and CSS in Hindi.


Let's talk about the background of the Login form in Hindi first. You can see It's a diagonal background and I know must of are thinking how we can create a diagonal webpage. Believe me, I wrote only one line of code to get the diagonal background on my Login Form in Hindi.


background-image: linear-gradient(to top right, #color1 50%, #color2 50%);


Create a Responsive Login Form in HTML and CSS in Hindi


Now we will come to our Center Div. If you noticed I used the same code to give the background color as we did on the main background. I only interchanged the color name and we have an awesome background center div. Also, on how to make a div perfectly center both horizontally and vertically is by using the position and translate property of CSS.

I know most of the programmer at first face problem on how to make the image half center on top and then perfectly center of the total width. Again here we will use the position concept of CSS and also we will use calc() property of CSS and it is the best in making anything responsive.

So what is calc()?
It takes the expression or maths calculation to solve and try to make perfect?

Create a Responsive Login Form in HTML and CSS in Hindi

Finally, we have beautiful centered Input fields and Buttons. Here also I show you how to make the input field centered and responsive.

Point to remember is that Input field is by default Inline, So we need to specify display: block.

I know must of you are here for source code only. Here is the source code.

Index.html file



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LoginForm</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
</head>
<body>
<div class="bgimg">
<div class="centerdiv">
<img src="https://cdn1.iconfinder.com/data/icons/flat-business-icons/128/user-128.png" id="profilepic">
<h2>user login</h2>
<form>
<div>
<input type="text" name="" class="inputbox" placeholder="Username">
</div>
<br>
<div>
<input type="Password" name="" class="inputbox" placeholder="Password">
</div>
<br>
<div>
<button type="submit"> LOGIN </button>
</div>
</form> <br>
<div class="FORGOT-SECTION">
<h4>Forget Password?</h4>
</div>
</div>
</div>

</body>
</html>

style.css File Code


*{
margin: 0;
padding: 0;
font-family: 'Cinzel', serif;
}

.bgimg{
width: 100%;
height: 100vh;
background-image: linear-gradient(27deg, #004E95 50%, #013A6B 50%);
}

.centerdiv{
width: 350px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
transform: translate(-50%, -50%);
background-image: linear-gradient(27deg, #013A6B 50%, #004E95 50%);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
}

#profilepic{
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
top: -60px;
left: calc( (350px - 120px) / 2 )
}

h2{
text-align: center;
color: white;
text-transform: uppercase;
font-size: 2em;
word-spacing: 10px;
margin-top: -50px;
margin-bottom: 50px;
text-shadow: -2px 2px 1px #0A84C6;
}

.inputbox{
width: calc(100% - 40px);
height: 30px;
display: block;
margin: auto;
padding: 0 10px;
box-sizing: border-box;
}

::placeholder{
letter-spacing: 2px;
color: black;
}

button{
width: calc(100% - 40px);
height: 30px;
display: block;
margin: auto;
color: white;
background-color: #0A84C6;
border: none;
}

.FORGOT-SECTION{
width: calc(100% - 40px);
line-height: 30px;
display: block;
margin: auto;
color: white;
background-color: dodgerblue;
text-transform: uppercase;
font-size: 0.8em;
text-align: right;
padding-right: 20px;
box-sizing: border-box;
}

Comments

Post a Comment

Popular posts from this blog

CSS - CSS Text in hindi, css text kya h, kese likhe Technamdev.blogspot.com

आपने देखा होगा कि कई websites के text का color अलग-अलग होता है | HTML का default text color ये black होता है, लेकिन अगर कुछ लोग चाहते है तो इस text color को बदल भी सकते है | Text Related CSS Properties color direction letter-spacing text-align text-decoration text-indent text-shadow text-transform word-break white-space word-spacing word-wrap Color Property for Text Color निचे div1, div2 और div3 को एक ही color को अलग-अलग प्रकार से दिया गया है | निचे color को अलग-अलग प्रकार से दी जाने वाली values को दिया गया है | Type of Value Description color_name यहाँ पर color का नाम दिया जाता है | For Example, color : red hexadecimal color code यहाँ पर hex code color भी दिया जाता है | For Example, color : #F00 rgb color code यहाँ पर rgb(red,green,blue) color code भी दिया जाता है | color : rgb(255, 0, 0) hsl color code यहाँ पर hsl(hue,saturation,luminance) color code भी दिया जाता है | color : hsl(360, 100%, 50%) .div1{ color : #F00; /* hexadecimal color code...
Post a Comment
Read more

CSS - CSS Colors in hindi, css color kese select kre , kya h.

Colors ये websites के लिए बहुत ही महत्वपूर्ण हिस्सा है | अगर आप एक बढ़िया website चाहते हो तो colors का इस्तेमाल किया ही जाना चाहिए | c o l o r Some Common Colors in CSS Color Name Hex Color Code RGB Color Code WHITE #FFFFFF RGB(255, 255, 255) SILVER #C0C0C0 RGB(192, 192, 192) GRAY/GREY #808080 RGB(128, 128, 128) BLACK #000000 RGB(0, 0, 0) RED #FF0000 RGB(255, 0, 0) MAROON #800000 RGB(128, 0, 0) YELLOW #FFFF00 RGB(255, 255, 0) OLIVE #808000 RGB(128, 128, 0) LIME #00FF00 RGB(0, 255, 0) GREEN #008000 RGB(0, 128, 0) AQUA/CYAN #00FFFF RGB(0, 255, 255) TEAL #008080 RGB(0, 128, 128) BLUE #0000FF RGB(0, 0, 255) NAVY #000080 RGB(0, 0, 128) FUCHSIA #FF00FF RGB(255, 0, 255)) PURPLE #800080 RGB(128, 0, 128)) Example <h1 style="background-color:white;">WHITE</h1> <h1 style="background-color:silver;">SILVER</h1> <h1 style="background-color:gray;">GRAY</h1> <h1 style="background-color:black;...
Post a Comment
Read more