<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<!-- Website CSS style -->
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<!-- Website Font style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="bootstrap-social.css">
</head>
<body>
<div class="card card-container">
<!-- Καρτέλες Σύνδεση - Εγγραφή -->
<ul class="nav nav-tabs">
<li class="active"><a href="#Login" data-toggle="tab">Σύνδεση</a></li>
<li><a href="#Registration" data-toggle="tab">Εγγραφή</a></li>
</ul>
<!-- Τέλος - Καρτέλες Σύνδεση - Εγγραφή -->
<img class="image-circle" src="https://lh3.googleusercontent.com/-ruiRxPDtB2g/WgF2qa5gu2I/AAAAAAAABhI/EFAOBlqKl4IC3QY9oyHd8fMQa7WxQvmKgCL0BGAYYCw/h202/2017-11-07.png">
<!-- Facebook Login -->
<div class="login-fb">
<a class="btn btn-block btn-social btn-facebook">
<span class="fa fa-facebook"></span> Συνέχεια με Facebook
</a>
</div>
<hr>
<!-- Login Form -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Το Email σου" required>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Ο κωδικός σου" required>
</div>
</div>
</div>
<div id="remember" class="chebox">
<label>
<input type="checkbox" value="remember-me"> Να με θυμάσαι
</label>
</div>
<div>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Σύνδεση</button>
</div>
<a href="#" class="forgot-password">
<h5>Ξέχασα τον κωδικό μου</h5>
</a>
</form>
</div>
<!-- End Login Form -->
<!-- Registration Form -->
<div class="tab-pane" id="Registration">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Username</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Βάλε το Username σου" required>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Βάλε το Email σου" required>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Κωδικός</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Βάλε τον κωδικό σου" required>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Επιβεβαίωση κωδικού</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Επιβεβαίωσε τον κωδικό σου" required>
</div>
</div>
</div>
<div>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Εγγραφή</button>
</div>
<a href="#" class="forgot-password">
<h5>Ξέχασα τον κωδικό μου</h5>
</a>
</div>
</div>
</div>
<!-- Registration Form -->
</body>
body, html {
height: 100%;
background-repeat: repeat;
background-image: url('https://cdn-images-1.medium.com/max/1920/1*AcYLHh0_ve4TNRi6HLFcPA.jpeg');
font-family: 'Ubuntu';
}
.card-container.card {
max-width: 450px;
padding: 40px 40px;
}
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 5px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-fb {
padding-top: 20px;
}
.image-circle {
display: block;
margin: auto;
padding-top: 15px;
}
.header-title {
font-weight: bold;
text-align: center;
}
.chebox label {
font-size: 13px;
color: #8f8f8f;
font-weight: 400;
padding-bottom: 15px;
}
.forgot-password {
color: rgb(104, 145, 162);
text-align: center;
}
.btn-social {
position:relative;
padding-left:44px;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.btn-social :first-child {
position:absolute;
left:0;
top:0;
bottom:0;
width:32px;
line-height:34px;
font-size:1.6em;
text-align:center;
border-right:1px solid rgba(0,0,0,0.2)}
.btn-facebook {
color:#fff;
background-color:#3b5998;
border-color:rgba(0,0,0,0.2)
}
.btn-facebook:hover,.btn-facebook:focus,.btn-facebook:active,.btn-facebook.active,.open .dropdown-toggle.btn-facebook {
color:#fff;
background-color:#30487b;
border-color:rgba(0,0,0,0.2)
}
