邮箱登录注册页面效果代码
代码语言:html
所属分类:布局界面
代码描述:邮箱登录注册页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form Signup</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css"> <style> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; } body { font-family: 'Poppins', sans-serif; background-color: #F2F3F5; min-height: 100vh; display: grid; place-items: center; padding: 80px 20px; } * { box-sizing: border-box; } .signup { padding: 80px 60px; background-color: white; border-radius: 30px; width: 100%; max-width: 480px; } .signup-heading { text-align: center; font-weight: 600; color: #363A40; font-size: 35px; margin-bottom: 35px; } .signup-google { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; width: 100%; border-radius: 16px; background-color: #4C6EF4; text-decoration: none; padding: 8px; margin-bottom: 45px; box-shadow: 0 10px 20px -5px rgba(76, 110, 244, 0.9); } .signup-google-icon { width: 50px; height: 50px; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; color: #ff7870; border-radius: 10px; background-color: white; font-size: 25px; } .signup-google-text { color: white; font-weight: 500; display: block; margin: 0 auto; } .signup-or { color: #363A40; display: block; text-align: center; position: relative; margin-bottom: 55px; } .signup-or-text { display: inline-block; padding: 5px 20px; background-color: white; position: relative; font-size: 14px; } .signup-or:before { content: ""; height: 1px; width: 100%; position: absolute; top: 50%; left: 0; background-color: #999; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .signup-already { text-align: center; color: #363A40; font-size: 13px; } .signup-already-link { color: #4C6EF4; text-decoration: none; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0