bootstrap紫色注册登录表单代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap紫色注册登录表单代码
代码标签: bootstrap 注册 紫色 登录 表单 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css"> <style> body { background: #fbf3ff; } .container { position: absolute; max-width: 800px; height: 500px; margin: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); } .myRightCtn { position: relative; background-image: linear-gradient(45deg, #f046ff, #9b00e8 ); border-radius: 25px; height: 100%; padding: 25px; color: rgb(192, 192, 192); font-size: 12px; display: flex; justify-content: center; align-items: center; } .myLeftCtn { position: relative; background: #fff; border-radius: 25px; height: 100%; padding: 25px; padding-left: 50px; } .myLeftCtn header { color: blueviolet; font-size: 24px; font-weight: 700; margin-bottom: 20px; } .row { height: 100%; } .myCard { position: relative; background: #fff; height: 100%; border-radius: 25px; -webkit-box-shadow: 0px 10px 40px -10px rgba(0,0,0,0.7); -moz-box-shadow: 0px 10px 40px -10px rgba(0,0,0,0.7); box-shadow: 0px 10px 40px -10px rgba(0,0,0,0.7); } .myRightCtn header { color: #fff; font-size: 44px; } .box { position: relative; margin: 20px; margin-bottom: 100px; } .myLeftCtn .myInput { width: 230px; border-radius: 25px; padding: 10px; padding-left: 50px; border: none; -webkit-box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); -moz-box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); } .myLeftCtn .myInput:focus { outline: none; } .myForm { position: relative; margin-top: 50px; } .myLeftCtn .butt { background: linear-gradient(45deg, #bb36fd, #9b00e8 ); color: #fff; width: 230px; border: none; border-radius: 25px; padding: 10px; -webkit-box-shadow: 0px 10px 41px -11px rgba(0,0,0,0.7); -moz-box-shadow: 0px 10px 41px -11px rgba(0,0,0,0.7); box-shadow: 0px 10px 41px -11px rgba(0,0,0,0.7); } .myLeftCtn .butt:hover { background: linear-gradient(45deg, #c85bff, #b726ff ); } .myLeftCtn .butt:focus { outline: none; } .myLeftCtn .fas { position: relative; color: #bb36fd; left: 36px; } .butt_out { background: transparent; color: #fff; width: 120px; border: 2px solid#fff; border-radius: 25px; padding: 10px; -webkit-box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); -moz-box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7); } .butt_out:hover { border: 2px solid#eecbff; } .butt_out:focus { outline: none; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <div class="myCard"> <div class="row"> <div.........完整代码请登录后点击上方下载按钮下载查看
网友评论0