登录注册表单模板

下载代码

html

css

分享到微信朋友圈

html

<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/materialize/0.97.0/css/materialize.min.css">

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/materialize/0.97.0/js/materialize.min.js"></script>
          
<div class="application-info-div" id="application-info-div">
   <div class="icon-service" id="icon-service">
     <img src="https://www.jq22.com/img/cs/500x500-1.png" height="120" width="120" title="Intert" class="img-icon-service">
    </div>
    
    <div class="text-application-info-div" id="text-application-info-div">
      <p class="title-text-application-info-div">Log in | Intert panel</p>
  
      <p class="description-text-application-info-div">Connection to Intert panel. Get access to the administration of your services, an access to the client support and to a community help center.</p>
      
      <p class="application-status"><span class="green-text">This application has been verified and is valid.</span></p>
    </div>
</div>

<div class="main-connection-div" id="main-connection-div">
    
    <div class="log-in-main-connection-div" id="log-in-main-connection-div">
      <p class="title-log-in-main-connection-div">Log in</p>
      
        <form>
          <div class="input-field col s6">
             <input type="text" id="username intert-textarea" class="validate">
             <label for="username">Username</label>
          </div>
          
          <div class="input-field col s6">
             <input type="text" id="password intert-textarea" class="validate">
             <label for="password">Password</label>
          </div>
          
          <a class="waves-effect waves-light btn-large" style="margin: 20px 0 0 30px; background: #0072ff; width: 45%; position: inherit;">Log in</a>
       
       <span class="remember-me-check">
        <input type="checkbox" id="remember-me" />
        <label for="remember-me" style="margin: 0; padding: 0 0 0 25px;">Remember me</label>
       </span>   
        </form>
      
      <p class="password-forgotten">Password forgotten? <a style="cursor:pointer" onclick="intert.showPasswordForgotten()">Click here</a></p>
    </div>
    
    <div class="register-main-connection-div" id="register-main-connection-div">
      <p class="title-register-main-connection-div">Sign up</p>
      
        <form>
          <div class="input-field col s6">
             <input type="text" id="username intert-textarea" class="validate">
             <label for="username">E-mail</label>
          </div>
          
          <div class="input-field col s6">
             <input type="text" id="password intert-textarea" class="validate">
             <label for="password">Password</label>
          </div>
          
          <a class="waves-effect waves-light btn-large" style="margin: 20px 0 0 30px; background: #0072ff; width: 45%; position: inherit;">Sign up</a>
        </form>
    </div>
      
    </div>
</div>
  
<div class="cookies-used" id="cookies-used">
  <span class="text-cookies-used">This website does not use cookies for tracking. They are only used for a better experience on its services. For more information on what types of cookies are stored, please contact the support.</span>
</div>

<div class="password-reset-div" id="password-reset-div">
    
    <span class="black-complete-background"></span>
  
      <div class="content-password-reset-div" id="content-password-reset-div">
          <div class="title-content-password-reset-div">
            Reset your password
          </div>
        
          <div class="content-content-password-reset-div">
             <span class="text-content-content-password-reset-div">
               To reset your password, enter the e-mail you used while creating your account.
             </span>
            
            <div class="input-field col s6">
              <input id="email-rp" type="text" class="validate">
              <label for="email-rp">E-mail address</label>
            </div>
          
          <a class="waves-effect waves-light btn" style="background: #0072ff; margin: 5px 0 0 0;">Send reset link</a>
            
            
            <div class="options-alert" id="options-alert">
              <span class="right-options-alert">
                <a href="#" onclick="intert.closePF()">Cancel</a>
              </span>
            </div>
          </div>
      </div>
  
</div>

css

body, html {
  margin: 0;
  paddin: 0;
  background: #1f1f1f;
  width: 100%;
}

.application-info-div {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 800px;
  height: 120px;
  background: #FFFFFF;
  margin: 5% 0 0 0;
}

.main-connection-div {
  margin: 5px 0 0 0;
  padding: 20px;
  background: #FFFFFF;
  width:800px;
  height:350px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.icon-service {
  border-right: 125px solid #F5F5F5;
  width: 120px;
  margin: 0;
  padding: 0;
}

.text-application-info-div {
  position: relative;
  top: -110px;
  left: 135px;
}

.title-text-application-info-div {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 23px;
  font-weight: 300;
  width: 82%;
}

.description-text-application-info-div {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size; 16px;
  width: 82%;
}

.application-status {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13px;
}

.green-text {
  color: #2ecc71;
}

.cookies-used {
  width: 800px;
  background: rgba(0, 0, 0, 0.8);
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFF;
  margin: 5px 0 5% 0;
  font-weight: 300;
  padding: 20px;
  transition: .4s background;
  display: none;
}

.cookies-used:hover {
  background: rgba(0, 0, 0, 0.75);
}

.log-in-main-connection-div {
  width: 50%;
  left: 0;
  height: 100%;
  float: left;
}

.register-main-connection-div {
  width: 50%;
  right: 0;
  height: 100%;
  float: left;
}

.title-log-in-main-connection-div {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 300;
  margin: 5px 0 0 15px;
  padding: 0;
}

.title-register-main-connection-div {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 300;
  margin: 5px 0 0 15px;
  padding: 0;
}

.main-connection-div .input-field {
   width: 80%;
   margin: 20px 0 0 30px;
 }
   
 /* label focus color */
.main-connection-div .input-field input[type=text]:focus + label {
  color: #0072ff;
  left: 0.1rem;
}

.input-field label.active {
  left: 0.1rem;
}

/* label underline focus color */
 .main-connection-div .input-field input[type=text]:focus {
   border-bottom: 1px solid #0072ff;
   box-shadow: 0 1px 0 0 #0072ff;
 }

/* valid color */
 .main-connection-div .input-field input[type=text].valid {
   border-bottom: 1px solid #2ecc71;
   box-shadow: 0 1px 0 0 #2ecc71;
 }

/* invalid color */
 .main-connection-div .input-field input[type=text].invalid {
   border-bottom: 1px solid #e74c3c;
   box-shadow: 0 1px 0 0 #e74c3c;
 }

.password-forgotten {
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  margin: 15px 0 0 30px;
  width: 100%;
  height: 100%;
}

.remember-me-check {
  position: relative;
  top: 10px;
  margin: 0 0 0 10px;
}

.password-reset-div {
  display: none;
}

.black-complete-background {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  z-index: 10000;
}

.content-password-reset-div {
  position: fixed;
  background: #F5F5F5;
  width: 40%;
  height: 240px;
  min-width: 600px;
  padding: 20px;
  top: 0;
  bottom: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0;
  right: 0;
  z-index: 100000;
  margin: auto;
}

.title-content-password-reset-div {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 300;
}

.content-content-password-reset-div {
  margin: 20px 0 0 0;
  width: 100%;
}

.text-content-content-password-reset-div {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  width: 100%;
}

.content-content-password-reset-div .input-field {
   width: 50%;
   margin: 20px 0 0 0;
 }
   
 /* label focus color */
.content-content-password-reset-div .input-field input[type=text]:focus + label {
   color: #0072ff;
}

/* label underline focus color */
 .content-content-password-reset-div .input-field input[type=text]:focus {
   border-bottom: 1px solid #0072ff;
   box-shadow: 0 1px 0 0 #0072ff;
 }

/* valid color */
 .content-content-password-reset-div .input-field input[type=text].valid {
   border-bottom: 1px solid #2ecc71;
   box-shadow: 0 1px 0 0 #2ecc71;
 }

/* invalid color */
 .content-content-password-reset-div .input-field input[type=text].invalid {
   border-bottom: 1px solid #e74c3c;
   box-shadow: 0 1px 0 0 #e74c3c;
 }

.options-alert {
  position: absolute;
  bottom: -60px;
  height: 60px;
  background: #F5F5F5;
  width: 100%;
  left: 0;
  padding: 20px 20px 40px 20px;
}

.right-options-alert {
  position: absolute;
  right: 0;
}

.options-alert a {
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  color: #777;
  padding: 8px 20px;
  margin-right: 10px;
  border-radius: 2px;
}

.options-alert a:hover {
  background: rgba(0, 0, 0, 0.1);
}

.options-alert a:active {
  background: rgba(0, 0, 0, 0.2);
}

[type="checkbox"]:checked+label:before {
  border-right: 2px solid #0072ff;
   border-bottom: 2px solid #0072ff;
}

a {
  color: #0072ff;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg