Create User Login Page With CSS&HTML | (Turkish Video Tutorial 5)
Tutorial about: Create a User Login Page with CSS & HTML (Lesson 5 Turkish video tutorial )
Video Language : Turkish Language
Githup link: CSS Education
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. CSS More Information
What We Can Learn?
We going to learn how to create User Login Page. how to add background image , profil image, and how to call container codes , margin,padding value with CSS code in this video.
We Learn About
- Add Container
- Btn-username
- Border-radius
- Cursor pointer
- Margin bottom
- Text align
Requirements
1- ATOM Program
2- Basic ATOM, usage information.
3- Basic CSS code knowledge.
4- Basic HTML code knowledge.
My Operating System
Difficulty
- Intermediate Level
Technical Aspects
- Btn-username - Input - Container - Background image - Cursor - Border Bottom - Margin bottom
Description
I describe the CSS and HTML in video.Also My github repository is HERE I added these all code,information my github repository.You can reach all files from my repository.
We talked about how to make user login page.Which we need Css , html codes , and how to add table ,profil image , background image .
Also with CSS and HTML codes we are continue a series
Video Tutorial - Turkish Language - 720p
Background image Source
Profil Image Source
Curriculum
Lesson 1
Lesson 2
Lesson 3
Lesson 4
ATOM OFFICIAL WEBSITE & GITHUB REPOSITORY&MY GITHUB REPOSITORY
And More Details About Video
CSS&HTML CODES
body{
margin: 0 auto;
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-size: 100% 1024px;
}
.container{
width: 500px;
height: 400px;
text-align: center;
background-color: rgba(52,73,94,0.7);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.container img{
width: 120px;
height: 120px;
margin-top: -60px;
margin-bottom: 30px;
border-radius: 125px;
}
input[type="text"],[type="password"] {
height: 45px;
width: 300px;
font-size: 18px;
margin-bottom: 20px;
border-radius: 15px;
background-color: white;
padding-left: 40px;
}
.btn-username{
padding: 15px 25px;
cursor: pointer;
color: white;
border-radius: 4px;
border: none;
background-color: # 2ECC71;
border-bottom: 5px solid # 27AE60;
margin-bottom: 20px;
}
a{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LOGIN</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="images/profil.png"/>
<form>
<div class="form-input">
<input type="text" name="username" placeholder="USERNAME">
</div>
<div class="form-input">
<input type="password" name="password" placeholder="PASSWORD">
</div>
<input type="submit" name="submit" value="LOGIN" class="btn-username"><br/>
<a href="#">Forget your passsword?</a>
</form>
</div>
</body>
</html>
Author : @rdvn
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you for approval.
Hey @necrosahin, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
I like your contribution to open source project, so I upvote to support you.
You are an awesome person
güzel anlatım olmuş
Teşekkürler.
Hey @rdvn I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x