Login V3 (minimal)
CODE
×
HTML
<div class='loginpage'> <div class='header-app sticky-header'> <a class='signet-application' href="#"> <img class='logo' alt='Logo des Kantons Bern' src='img/Kanton-Bern.svg'> <div class='logo-caption'>Applikationsname</div> </a> <div class='service-nav login' role='list'> <a class='service-menue i1' href='#' role='listitem'>Benutzungshinweise</a> <a class='service-menue login' href='#' role='listitem'>BE-Login</a> <div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div> </div> <div class='mobile-nav-2'> <a class='hamburger-icon'></a> </div> </div> <div class='main-column login'> <h1 class='login'>Login</h1> <p>Bitte melden Sie sich an: <form autocomplete="off"></p> <div class='form-group-medium'> <input type=text value='' class='floating-label username' placeholder="Benutzername" autocomplete="off" data-lp-ignore data-lpignore="true"> <label class='floating-label'>Benutzername</label> </div> <div class='form-group password-field'> <input type=password value='' class='floating-label' placeholder="Passwort" autocomplete="off" data-lp-ignore data-lpignore="true"> <label class='floating-label'>Passwort</label> <img class='show' src='img/show.svg'> </div> <button class='submit login'><span style="margin-right:10px">Anmelden</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="25" viewBox="0 0 20 14" style="enable-background:new 0 0 20 14;" xml:space="preserve" class="first"> <style type="text/css"> .st0{fill:#fff;} </style> <g transform="translate(10 -38.25)"> <g transform="translate(-10 38.25)"> <path class="st0" d="M10.5,10.1c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0l3.4-3.4c0.2-0.2,0.2-0.5,0-0.8l-3.4-3.4 c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l2.6,2.6H2.4C2.1,6.5,1.9,6.7,1.9,7s0.2,0.5,0.5,0.5h10.8L10.5,10.1z M16.1,0H8.3 c-1.1,0-2,0.9-2,2v2h1V2c0-0.6,0.4-1,1-1h7.8c0.6,0,1,0.4,1,1v10c0,0.6-0.4,1-1,1H8.3c-0.6,0-1-0.4-1-1v-2h-1v2c0,1.1,0.9,2,2,2 h7.8c1.1,0,2-0.9,2-2V2C18.1,0.9,17.2,0,16.1,0z"/> </g> </g> </svg></button> <p><p><a href="#" class="text-link">Passwort vergessen</a></p><p><a href="#" class="text-link">Neu registrieren</a></p> </form></p> </div> <div class='context-column empty'> <div class='clearfix'></div> </div> <div class='clearfix'></div> </div>
CSS
@media screen and (max-width: 1119px) { div.main-column.login { margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); margin-top: 90px; margin-bottom: 45px; } } @media screen and (max-width: 767px) { div.main-column.login { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); margin-top: 50px; margin-bottom: 25px; } } @media screen and (max-width: 1119px) { div.main-column.login { margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); margin-top: 90px; margin-bottom: 45px; } } @media screen and (max-width: 767px) { div.main-column.login { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); margin-top: 50px; margin-bottom: 25px; } } @media screen and (max-width: 1119px) { div.main-column.login { margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); margin-top: 90px; margin-bottom: 45px; } div.header-app.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } } @media screen and (max-width: 767px) { div.main-column.login { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); margin-top: 50px; margin-bottom: 25px; } div.header-app.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } } @media screen and (max-width: 1119px) { div.main-column.login { margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); margin-top: 90px; margin-bottom: 45px; } } @media screen and (max-width: 767px) { div.main-column.login { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); margin-top: 50px; margin-bottom: 25px; } } @media screen and (max-width: 1119px) { div.main-column.login { margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); margin-top: 90px; margin-bottom: 45px; } div.header-app.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } } @media screen and (max-width: 767px) { div.main-column.login { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); margin-top: 50px; margin-bottom: 25px; } div.header-app.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } } @media screen and (max-width: 1119px) { div.main-column.login { margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); margin-top: 90px; margin-bottom: 45px; } div.header-app.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } div.context-column.empty { max-width: none; position:relative; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); clear:both; top:0; margin-top: 65px; margin-bottom: 20px; } } @media screen and (max-width: 767px) { div.main-column.login { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); margin-top: 50px; margin-bottom: 25px; } div.header-app.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } div.context-column.empty { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } } @media screen and (max-width: 1119px) { div.service-nav.login { display:none; } div.mobile-nav-2 { display:block; } } @media screen and (max-width: 767px) { div.form-group-medium { width: 100%; } div.form-group.password-field { width: 100%; } div.mobile-nav-2 { top: 20px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); } img.logo { cursor:pointer; width: 150px; } div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } a.hamburger-icon { background-image: url('../img/hamburger-icon.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; display:inline-block; float:right; } input[type=password].floating-label { position:relative; padding-right: 62px; } input[type=text].floating-label.username { position:relative; padding-right: 23px !important; } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } img.show { position: absolute; height: 31px; width: 31px; right: 16px; top: 33px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; opacity: 0.3; } button.submit.login { overflow:hidden; text-align:center; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 24px; background-color: rgba(78,78,78,1); color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 0px 34px 0px 36px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: all 250ms ease-in-out; cursor:pointer; } h1.login { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 100; margin: 0 0 44px -3px; font-size: 54px; line-height: 62px; letter-spacing: 0.01rem; word-spacing: 0.025rem; } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } a.hamburger-icon:hover, a.hamburger-icon:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } img.show:hover, img.show:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } button.submit.login:hover, button.submit.login:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } @media screen and (max-width: 1119px) { img.logo { width: 110px; } h1.login { font-size: 48px; line-height: 56px; margin: -9px 0 28px -2px; } } @media screen and (max-width: 767px) { p { font-size: 15px; line-height: 24px; } button.submit.login { margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; } h1.login { font-size: 32px; line-height: 38px; margin: 45px 0 24px -1px; font-family: 'Roboto'; font-style: normal; font-weight: 300; } p { font-size: 15px; line-height: 24px; } } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); } label.floating-label { font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 400; position:absolute; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 1px; left: 23px; background-color: #fff; padding: 2px 5px; opacity:1; } input[type=text].floating-label { padding-right: 62px; } button.submit { overflow:hidden; text-align:center; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 500; line-height: 24px; background-color: rgba(78,78,78,1); color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 0px 34px 0px 36px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: all 250ms ease-in-out; cursor:pointer; } button.submit:hover, button.submit:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } @media screen and (max-width: 767px) { button.submit { margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; } } h1 { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 100; margin: 0 0 44px -3px; font-size: 54px; line-height: 62px; letter-spacing: 0.01rem; word-spacing: 0.025rem; } @media screen and (max-width: 1119px) { h1 { font-size: 48px; line-height: 56px; margin: -9px 0 28px -2px; } } @media screen and (max-width: 767px) { h1 { font-size: 32px; line-height: 38px; margin: 45px 0 24px -1px; font-family: 'Roboto'; font-style: normal; font-weight: 300; } } @media screen and (max-width: 360px) { h1 { font-size: 32px; line-height: 36px; } } div.logo-caption { font-size: 16px; line-height: 17px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); margin-top: 19px; max-width: 335px; } @media screen and (max-width: 1119px) { div.logo-caption { margin-top: 12px; max-width: 210px; font-size: 12px; line-height: 13px; letter-spacing: 0.01rem; word-spacing: 0.025rem; } }
JS
Login V3 (minimal)
Erstellt: 12.09.2024 - 16:35 Uhr
Letzte Änderung: 19.09.2024 - 12:48 Uhr
×
Applikationsname
Benutzungshinweise
BE-Login
DE
|
FR
|
EN
Login
Bitte melden Sie sich an:
Benutzername
Passwort
Anmelden
Passwort vergessen
Neu registrieren