Skip to content

Instantly share code, notes, and snippets.

@CMYKpixels

CMYKpixels/index.html

Created November 6, 2020 09:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CMYKpixels/f78af11b6ac6f5d93a5b4535ae76105c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CMYKpixels/f78af11b6ac6f5d93a5b4535ae76105c to your computer and use it in GitHub Desktop.
Download ZIP
Vanilla Login - ELLOHA
Raw
index.html
<div class="login-body protect-ourselves">
<div class="login-top-bar-w">
<div class="w-max-screen m-autocenter login-top-bar text-center">
<a href="#" class="d-inline-block v-align-middle logo-elloha">
<div class="master-top-bar-logo-wizard"></div>
</a>
<a href="#" class="btn-myc" id="linkCreateTop">
Créer un compte
</a>
</div>
</div>
<div class="w-max-screen m-autocenter text-center">
<div id="upLogin" class="ud-panel-login">
<div id="Login1_PnlLogin" class="bg-white" onkeypress="">
<div class="login-title text-left">
Se connecter
<div class="login-flag-list pull-right btn-group">
<a class="dropdown-toggle" data-toggle="dropdown" data-toggle-too="tooltip" title="Changer de langue"><img src="https://static.elloha.com/elloha/Flags/32/fr.png" data-toggle="tooltip" data-original-title="" title=""><i class="fa fa-chevron-down m-left-10"></i></a>
<ul class="dropdown-menu" data-name="style">
<li>
<a href="?culture=en-GB">
<img alt="English" src="https://static.elloha.com/elloha/Flags/32/en.png" data-toggle="tooltip" data-original-title="English">
</a>
</li>
<li>
<a href="?culture=es-ES">
<img alt="Español" src="https://static.elloha.com/elloha/Flags/32/es.png" data-toggle="tooltip" data-original-title="Español">
</a>
</li>
<li>
<a href="?culture=nl-NL">
<img alt="Nederlands" src="https://static.elloha.com/elloha/Flags/32/nl.png" data-toggle="tooltip" data-original-title="Nederlands">
</a>
</li>
<li>
<a href="?culture=de-DE">
<img alt="Deutsch" src="https://static.elloha.com/elloha/Flags/32/de.png" data-toggle="tooltip" data-original-title="Deutsch">
</a>
</li>
</ul>
</div>
</div>
<div class="row m-bottom-20">
<div class="col-xs-4 login-label-col">
<label for="Login1_UserName" id="Login1_UserNameLabel" class="no-margin-bottom">Adresse E-mail<span id="Login1_RequiredFieldValidator1" style="color:Red;visibility:hidden;">&nbsp;*</span></label>
</div>
<div class="col-xs-8">
<input name="Login1$UserName" type="text" id="Login1_UserName" class="form-control">
</div>
</div>
<div class="row m-bottom-25">
<div class="col-xs-4 login-label-col">
<label for="Login1_Password" id="Login1_PasswordLabel" class="no-margin-bottom">Mot de passe
<span id="Login1_PasswordRequired" style="color:Red;visibility:hidden;">&nbsp;*</span>
</label>
</div>
<div class="col-xs-8">
<input name="Login1$Password" type="password" id="Login1_Password" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-7 login-label-col text-left">
<a href="#" onclick="open_LostPassword();return false;">
Mot de passe oublié ?
</a>
</div>
<div class="col-xs-5 text-right">
<a id="Login1_LoginButton" class="btn btn-success" href="#">Se connecter</a>
</div>
</div>
<div id="Login1_signUpDiv" class="sign-up-div">
Vous n'avez pas encore de compte ? <a href="#" id="Login1_linkCreate" class="m-left-5">Créer un compte</a>
<a class="d-block m-top-10" href="mailto:contact@elloha.com">Contactez-nous</a>
</div>
</div>
</div>
</div>
</div>
</div>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Raw
style.css
.login-body {
position: absolute;
width: 100%;
height: 100%;
background: #fff url(https://static.elloha.com/elloha/Images/bg.jpg?v=4)
no-repeat center fixed;
background-size: cover;
color: #34495e;
font-family: Montserrat;
font-size: 16px;
text-rendering: optimizeLegibility;
line-height: 1.428571429;
}
.m-autocenter {
margin: 0 auto;
}
.text-center {
text-align: center;
}
.d-block {
display: block;
}
.d-inline-block {
display: inline-block;
}
.v-align-middle {
vertical-align: middle;
}
.text-left {
text-align: left;
}
.pull-right {
float: right !important;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.m-left-5 {
margin-left: 5px;
}
.m-left-10 {
margin-left: 10px;
}
.m-bottom-20 {
margin-bottom: 20px;
}
.m-bottom-25 {
margin-bottom: 25px !important;
}
.m-top-10 {
margin-top: 10px;
}
body label,
body select {
font-weight: normal;
font-family: "Open Sans";
color: #34495e;
}
a,
a:visited,
a:focus,
a:active,
a:hover {
outline: none !important;
text-decoration: none;
}
a,
.nav-tabs > li > a,
.nav-tabs > li.link-new-cal > a {
color: rgba(77, 124, 254, 1);
}
input::placeholder {
font-style: italic;
font-weight: normal;
}
.login-top-bar {
padding: 15px;
position: relative;
}
.login-top-bar-w {
height: 100px;
border-bottom: 1px solid rgba(221, 221, 221, 0.2);
}
.login-top-bar > a.btn-myc {
border-radius: 0;
margin-top: 10px;
position: absolute;
right: 15px;
height: 50px;
line-height: 50px;
padding: 0 15px;
}
.btn-success,
.btn-success:focus,
.btn-success:hover,
.btn-success[disabled] {
background: #00a46d;
border-radius: 0;
}
.btn-myc,
.btn-myc:hover,
.btn-myc:focus {
background: none;
border: 2px solid #c5cde2;
color: #fff;
}
.btn,
.btn:hover {
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
font-family: Montserrat;
font-size: 14px;
font-weight: 600;
text-shadow: none;
height: 50px;
line-height: 50px;
padding: 0 15px;
text-decoration: none;
text-transform: uppercase;
}
.master-top-bar-logo,
.master-top-bar-logo-wizard {
width: 200px;
height: 70px;
background: url(https://static.elloha.com/elloha/Images/logo-elloha-fullwhite.png?v=4)
center center no-repeat;
background-size: 90%;
}
.ud-panel-login {
background: #f6f8fc;
display: block;
width: 455px;
margin: auto;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
margin-top: 11%;
}
.ud-panel-login > div {
padding: 35px 40px 0;
}
.bg-white {
background-color: #fff;
}
.login-title {
font-size: 22px;
margin-bottom: 25px;
font-weight: Bold;
text-transform: uppercase;
}
.login-flag-list {
line-height: 25px;
cursor: pointer;
}
.login-flag-list a {
color: #34495e;
font-size: 0.6em;
}
.login-flag-list img {
height: 18px;
}
.login-label-col {
height: 40px;
padding-top: 9px;
padding-right: 0;
text-align: left;
font-family: "open sans";
font-weight: bold;
}
.form-control {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border-color: #ebecf2;
height: 50px;
font-family: "Open Sans";
-webkit-box-shadow: none;
box-shadow: none;
}
.ud-panel-login .sign-up-div {
background: #f6f8fc;
margin: 25px -40px 0;
padding: 15px 0;
}
.ud-panel-login .info-signup,
.ud-panel-login .sign-up-div {
text-align: center;
font-size: 13px;
font-family: "Open Sans";
}
.ud-panel-login .sign-up-div a {
font-weight: bold;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment