Moderne Anmeldung und Registrierung | TheDoc

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

5 February 2025

moderne futuristische Anmeldeseite

11 June 2025

<!doctype html>
<html lang="en">
<head>
  <title>Modern Login & Sign Up | Webleb</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="keywords" content="login, sign up, register, authentication, modern, gradient, web design, Webleb, form, UI, CSS, HTML">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.9/css/unicons.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  
  <div class="section">
    <div class="container">
      <div class="row full-height justify-content-center">
        <div class="col-12 text-center align-self-center py-5">
          <div class="section pb-5 pt-5 pt-sm-2 text-center">
            <h6 class="mb-0 pb-3" id="switch-tabs">
              <span id="login-tab">Log In </span>
              <span id="signup-tab">Sign Up</span>
            </h6>
            <input class="checkbox" type="checkbox" id="reg-log" name="reg-log"/>
            <label for="reg-log"></label>
            <div class="card-3d-wrap mx-auto">
              <div class="card-3d-wrapper">
                <div class="card-front">
                  <div class="center-wrap">
                    <div class="section text-center">
                      <h4 class="mb-4 pb-3">Log In</h4>
                      <div class="form-group">
                        <input type="email" class="form-style" placeholder="Email">
                        <i class="input-icon uil uil-at"></i>
                      </div>  
                      <div class="form-group mt-2">
                        <input type="password" class="form-style" placeholder="Password">
                        <i class="input-icon uil uil-lock-alt"></i>
                      </div>
                      <a href="https://www.web-leb.com/code" class="btn mt-4">Login</a>
                      <p class="mb-0 mt-4 text-center"><a href="https://www.web-leb.com/code" class="link">Forgot your password?</a></p>
                    </div>
                  </div>
                </div>
                <div class="card-back">
                  <div class="center-wrap">
                    <div class="section text-center">
                      <h4 class="mb-3 pb-3">Sign Up</h4>
                      <div class="form-group">
                        <input type="text" class="form-style" placeholder="Full Name">
                        <i class="input-icon uil uil-user"></i>
                      </div>  
                      <div class="form-group mt-2">
                        <input type="tel" class="form-style" placeholder="Phone Number">
                        <i class="input-icon uil uil-phone"></i>
                      </div>  
                      <div class="form-group mt-2">
                        <input type="email" class="form-style" placeholder="Email">
                        <i class="input-icon uil uil-at"></i>
                      </div>
                      <input type="hidden" name="username" value="TheDoc" class="thedoc-hidden">
                      <div class="form-group mt-2">
                        <input type="password" class="form-style" placeholder="Password">
                        <i class="input-icon uil uil-lock-alt"></i>
                      </div>
                      <a href="https://www.web-leb.com/code" class="btn mt-4">Register</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    const regLog = document.getElementById('reg-log');
    const loginTab = document.getElementById('login-tab');
    const signupTab = document.getElementById('signup-tab');

loginTab.addEventListener('click', () => {
      regLog.checked = false;
      updateTabs();
    });

signupTab.addEventListener('click', () => {
      regLog.checked = true;
      updateTabs();
    });

regLog.addEventListener('change', updateTabs);

// Initial state
    updateTabs();
  </script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
body{
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  color: #fff;
  background: linear-gradient(135deg, #232526 0%, #414345 100%);
}
a:hover {
  text-decoration: none;
}
.link {
  color: #ffb347;
}
.link:hover {
  color: #ffe29f;
}
p {
  font-weight: 500;
  font-size: 14px;
}
h4 {
  font-weight: 600;
}
h6 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 3px;
  position: relative;
}
h6 span{
  padding: 0 20px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.3s;
  color: #ffe29f;
  position: relative;
}
#reg-log:not(:checked) ~ label ~ .card-3d-wrap ~ h6 span:first-child,
#reg-log:checked ~ label ~ .card-3d-wrap ~ h6 span:last-child {
  color: #ffb347;
}
h6 span.active {
  color: #ffb347;
  border-bottom: 2px solid #ffb347;
}
.section{
  position: relative;
  width: 100%;
  display: block;
}
.full-height{
  min-height: 100vh;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  display: none;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  display: block;
  text-align: center;
  width: 60px;
  height: 16px;
  border-radius: 8px;
  padding: 0;
  margin: 10px auto;
  cursor: pointer;
  background: linear-gradient(90deg, #ffb347 0%, #ffcc33 100%);
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before{
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffb347;
  background: linear-gradient(135deg, #232526 0%, #414345 100%);
  font-family: 'unicons';
  content: '\eb4f';
  z-index: 20;
  top: -10px;
  left: -10px;
  line-height: 36px;
  text-align: center;
  font-size: 24px;
  transition: all 0.5s ease;
}
.checkbox:checked + label:before {
  transform: translateX(44px) rotate(-270deg);
}
.card-3d-wrap {
  position: relative;
  width: 440px;
  max-width: 100%;
  height: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 800px;
  margin-top: 60px;
  overflow: visible;
}
.card-3d-wrapper {
  width: 100%;
  height: 100%;
  position:absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 600ms ease-out; 
  backface-visibility: visible;
  overflow: visible;
}
.card-front, .card-back {
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #434343 0%, #262626 100%);
  background-image: none;
  position: absolute;
  border-radius: 6px;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  overflow: hidden;
  /* verhindert, dass die Rückseite durchscheint */
}
.card-back {
  transform: rotateY(180deg);
}
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
  transform: rotateY(180deg);
}
.center-wrap{
  position: absolute;
  width: 100%;
  padding: 0 35px;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 35px) perspective(100px);
  z-index: 20;
  display: block;
}
.form-group{ 
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}
.form-style {
  padding: 13px 20px;
  padding-left: 55px;
  height: 48px;
  width: 100%;
  font-weight: 500;
  border-radius: 4px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.5px;
  outline: none;
  color: #ffe29f;
  background: linear-gradient(90deg, #232526 0%, #414345 100%);
  border: none;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.form-style:focus,
.form-style:active {
  border: none;
  outline: none;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
  position: absolute;
  top: 0;
  left: 18px;
  height: 48px;
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  color: #ffb347;
}
.btn{  
  border-radius: 4px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition : all 200ms linear;
  transition: all 200ms linear;
  padding: 0 30px;
  letter-spacing: 1px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, #ffb347 0%, #ffcc33 100%);
  color: #232526;
  border: none;
}
.btn:hover{  
  background: linear-gradient(90deg, #232526 0%, #414345 100%);
  color: #ffb347;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.thedoc-hidden {
  display: none !important;
}

Moderne Anmeldung und Registrierung | TheDoc

Empfohlen

moderne futuristische Anmeldeseite

Ein Code von alejandrokundrah

Ein Code von alejandrokundrah

HTML

CSS

JS

Empfohlen

moderne futuristische Anmeldeseite

Ein Code von alejandrokundrah

Ein Code von alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS