CINXE.COM
<!DOCTYPE html> <html> <head> <style> input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; } html, body { height: 100%; } body { font-family: Arial; margin: 0px; background-color: #222; } #contentdiv { position: relative; margin: auto; background: url("/images/whitebg.png"), url("/images/loginbg.jpg"), #fff; max-width: 1308px; min-height: 100%; } #logodiv { padding: 30px; } #logindiv { position: absolute; top: calc(50% - 100px); left: calc(50% - 200px); margin: auto; padding: 0px; background-color: #fff; width: 400px; /*height: 200px;*/ border-radius: 4px; box-shadow: 0px 0px 40px #000; overflow: hidden; } #logintitle { font-weight: bold; color: #4d4e4e; background-color: #ddd; padding: 10px; padding-bottom: 5px; border-bottom: 1px solid #ccc; } #logincontent { padding: 10px; padding-top: 20px; background-color: #eee; /*c6dbc9*/ } .loginfield { margin-bottom: 10px; } .loginfield div { display: inline-block; } .loginfield div:first-child { width: 80px; font-size: .9em; } .loginfield div:nth-child(2) { width: calc(100% - 80px); } .loginfield div:nth-child(2) input { border: 1px solid #ccc; width: calc(100% - 2px); height: 25px; padding-left: 5px; } .loginsubmit div { display: inline-block; vertical-align: top; } .loginsubmit div:first-child { width: calc(100% - 80px); color: #ff0000; } .loginsubmit div:nth-child(2) { width: 80px; background-color: #ff0000; } .loginsubmit div:nth-child(2) input { margin: 0px; width: 100%; height: 30px; border: 0px solid #000; color: #fff; background-color: #30a442; border-bottom-right-radius: 2px; } .loginprivacy { font-size: .8em; } .loginprivacy a { color: #2eb34e; text-decoration: none; } .loginprivacy a:hover { text-decoration: underline; } #sponsordiv { position: absolute; bottom: 0px; left: 30px; /*width: calc(100% - 10px);*/ padding: 5px; padding-left: 10px; background-color: rgba(255,255,255,.0); text-align: right; overflow: hidden; vertical-align: top; } #sponsordiv .firstsponsor { margin-right: 20px; } #sponsordiv > div { display:inline-block; text-align: left; } #sponsordiv > div .sponsortitle { font-size: .8em; margin-bottom: 5px; } @media (max-width: 520px) { #contentdiv { text-align: center; } #logodiv { margin: auto; display: inline-block; text-align: center; } #logindiv { background-color: rgba(255,255,255,0); box-shadow: 0px 0px 0px #000; } #logintitle { background-color: rgba(255,255,255,0.8); } #logincontent { background-color: rgba(255,255,255,0.6); } #sponsordiv > div .sponsortitle { display: none; } } @media (max-width: 400px) { #logindiv { position: static; width: 100%; } } @media (max-width: 350px) { #logodiv { padding: 10px; padding-top: 5px; } #logodiv img { width: 100%; } #sponsordiv { display: none; } } </style> </head> <body> <div id="contentdiv"> <div id="logodiv"><img src="/images/EureccaLogo.png" alt="EURECCA Logo"></div> <div id="logindiv"> <form action="/Login" method="post"> <div id="logintitle"><img src="/images/icons/lock.png" alt="Sign In to EURECCA"> Sign In to EURECCA</div> <div id="logincontent"> <div class="loginfield"> <div>Username</div><div><input id="UserName" name="UserName" type="text" value="" /></div> </div> <div class="loginfield"> <div>Password</div><div><input id="Password" name="Password" type="password" /></div> </div> <div class="loginprivacy">By Logging in, you accept the terms and conditions outlined in the <a href="/Home/PrivacyPolicy" target="_blank">Privacy Policy</a>.</div> <div class="loginsubmit"> <div></div><div><input type="submit" value="Log In"></div> </div> </div> </form> </div> <div id="sponsordiv"> <div class="firstsponsor"> <div class="sponsortitle">EURECCA is funded by:</div> <a href="http://www.escrs.org" target="_blank"><img class="logoimage" src="/images/escrslogo.png" alt="ECRS"></a> </div> <div> <div class="sponsortitle">Technology by:</div> <a href="https://www.ifasystems.de" target="_blank"><img class="logoimage" src="/images/ifalogo.png" alt="ifa Systems"></a> </div> </div> </div> </body> </html>