tnblog
首页
视频
资源
登录

好看的登录页

5493人阅读 2021/7/13 22:04 总访问:3723378 评论:1 收藏:0 手机
分类: 前端

Html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Login</title>
  6. <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
  7. <link rel="stylesheet" type="text/css" href="style.css" />
  8. </head>
  9. <body>
  10. <div class="container">
  11. <div class="login-form">
  12. <div class="logo"></div>
  13. <h4>Login With</h4>
  14. <div class="social-login">
  15. <span class="fab fa-facebook-f"></span>
  16. <span class="fab fa-microsoft"></span>
  17. <span class="fab fa-github"></span>
  18. </div>
  19. <div class="fields">
  20. <div class="username">
  21. <input type="text" placeholder="Username">
  22. </div>
  23. <div class="password">
  24. <input type="password" placeholder="password" />
  25. </div>
  26. </div>
  27. <button class="login-btn">Login</button>
  28. <div class="link">
  29. <a href="#">Forgot password?</a> or <a href="#">sign up</a>
  30. </div>
  31. </div>
  32. </div>
  33. </body>
  34. </html>

style.css

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. .container{
  7. width: 100vw;
  8. height: 100vh;
  9. padding: 60px 0px;
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. color: #555555;
  14. background: #ecf0f3;
  15. }
  16. .login-form {
  17. width: 450px;
  18. height: 700px;
  19. padding: 50px 35px 35px 35px;
  20. border-radius: 40px;
  21. box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #ffffff;
  22. }
  23. .logo {
  24. background-image: url('https://cdn.pixabay.com/photo/2016/03/26/13/09/cup-of-coffee-1280537_960_720.jpg');
  25. background-position: center left;
  26. background-size: cover;
  27. width: 100px;
  28. height: 100px;
  29. border-radius: 50%;
  30. margin: 0px auto;
  31. box-shadow:
  32. 0px 0px 2px #5f5f5f,
  33. 0px 0px 0px 5px #ecf0f3,
  34. 8px 8px 15px #a7aaaf,
  35. -8px -8px 15px #ffffff
  36. ;
  37. }
  38. h4 {
  39. text-align: center;
  40. margin: 30px auto;
  41. color: #a7aaaf;
  42. }
  43. .social-login {
  44. display: flex;
  45. justify-content: space-around;
  46. width: 60%;
  47. align-items: center;
  48. margin: 0px auto;
  49. }
  50. .social-login span {
  51. width: 50px;
  52. height: 50px;
  53. display: flex;
  54. justify-content: center;
  55. align-items: center;
  56. box-shadow: 13px 13px 20px #CBCED1, -13px -13px 20px #fff;
  57. border-radius: 50%;
  58. cursor: pointer;
  59. }
  60. .social-login span:hover{
  61. font-size: 50px;
  62. }
  63. .fields {
  64. width: 100%;
  65. padding: 50px 5px 5px 5px;
  66. }
  67. .fields input {
  68. border: none;
  69. outline: none;
  70. background: none;
  71. font-size: 16px;
  72. color: #555;
  73. padding: 20px 10px;
  74. }
  75. .username , .password {
  76. padding: 0px 30px;
  77. margin-bottom: 30px;
  78. border-radius: 30px;
  79. box-shadow: inset 8px 8px 8px #CBCED1,inset -8px -8px 8px #fff;
  80. }
  81. .login-btn {
  82. outline: none;
  83. border: none;
  84. background: #31a783;
  85. font-size: 24px;
  86. font-weight: 700;
  87. color: whitesmoke;
  88. width: 100%;
  89. height: 60px;
  90. border-radius: 30px;
  91. margin-bottom: 30px;
  92. cursor: pointer;
  93. }
  94. .login-btn:hover {
  95. background: rgba(29, 189, 149, 0.8);
  96. }
  97. .link {
  98. text-align: center;
  99. }
  100. .link a {
  101. text-decoration: none;
  102. color: #a7aaaf;
  103. }

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739

评价

忘掉过去式

2021/7/15 9:48:17

留个足迹 证明来过[嘿嘿]

这一世以无限游戏为使命!
排名
2
文章
662
粉丝
44
评论
93
docker中Sware集群与service
尘叶心繁 : 想学呀!我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好,这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术