Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Log In</title>
- <style>
- @font-face{
- font-family: Roboto Thin;
- src: url("Roboto-Thin.ttf");
- }
- @font-face{
- font-family: Roboto Bold;
- src: url("Roboto-Bold.ttf");
- }
- body{
- padding: 0px;
- margin: 0px;
- }
- ::placeholder{
- color: white;
- opacity: 0.8;
- }
- .username{
- width: 200px;
- height: 30px;
- background-color: transparent;
- border-top: none;
- border-left: none;
- border-right: none;
- border-bottom-color: gray;
- border-bottom-width: 2px;
- z-index: 25;
- position: relative;
- top: -520px;
- color: white;
- right: -530px;
- font-family: Roboto Thin;
- }
- .username:hover{
- width: 220px;
- height: 50px;
- background-color: transparent;
- border-top: none;
- border-left: none;
- border-right: none;
- border-bottom-color: gray;
- border-bottom-width: 2px;
- z-index: 25;
- position: relative;
- top: -520px;
- color: white;
- right: -530px;
- font-family: Roboto Thin;
- font-size: 15pt;
- transition-property: all;
- transition-duration: 300ms;
- }
- .password{
- width: 200px;
- height: 30px;
- background-color: transparent;
- border-top: none;
- border-left: none;
- border-right: none;
- border-bottom-color: gray;
- border-bottom-width: 2px;
- z-index: 25;
- position: relative;
- top: -520px;
- color: white;
- right: -530px;
- font-family: Roboto Thin;
- }
- .password:hover{
- width: 220px;
- height: 50px;
- background-color: transparent;
- border-top: none;
- border-left: none;
- border-right: none;
- border-bottom-color: gray;
- border-bottom-width: 2px;
- z-index: 25;
- position: relative;
- top: -520px;
- color: white;
- right: -530px;
- font-family: Roboto Thin;
- font-size: 15pt;
- transition-property: all;
- transition-duration: 300ms;
- }
- .logIn{
- font-family: Roboto Bold;
- font-size: 45pt;
- text-align: center;
- color: white;
- position: relative;
- top: -525px;
- right: -50px;
- }
- .submit{
- width: 110px;
- height: 40px;
- position: relative;
- top: -465px;
- right: -365px;
- background-color: transparent;
- color: white;
- border-color: gray;
- border-radius: 10px;
- }
- .submit:hover{
- width: 120px;
- height: 50px;
- transition-property: all;
- transition-duration: 350ms;
- border-radius: 7px;
- background-color: transparent;
- font-family: Roboto Bold;
- font-size: 20pt;
- }
- .options{
- position: relative;
- top: -520px;
- right: -550px;
- background-color: transparent;
- font-family: Roboto Light;
- font-size: 12pt;
- width: 150px;
- height: 25px;
- color: gray;
- }
- </style>
- </head>
- <body>
- <img src = "bg.jpg" style = "z-index: -25; width: 100%; height: 100%;">
- <p class = "logIn">Log In</p>
- <form>
- <input type = "text" placeholder = "Enter Your username or email" class = "username">
- <input type = "password" placeholder = "Password" class = "password">
- <input type = "submit" value = "Submit" class = "submit">
- </form>
- <select class = "options">
- <option>Hrvatska</option>
- <option>United Kingdom</option>
- <option>USA</option>
- </select>
- </body>
- </html>
Add Comment
Please, Sign In to add comment