Skip to content

Commit

Permalink
added new login page (auth-login-2.html)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nauvalazhar
nauvalazhar committed Mar 13, 2019
1 parent 1fe3693 commit d4747b1
Show file tree
Hide file tree
Showing 7 changed files with 383 additions and 1 deletion.
109 changes: 109 additions & 0 deletions assets/css/style.css
View file
Expand Up @@ -1939,6 +1939,9 @@ a.dropdown-item {
--light: color(light);
--dark: color(dark); }

body, html {
min-height: 100%; }

body {
background-color: #f4f6f9;
font-size: 14px;
Expand Down Expand Up @@ -2032,6 +2035,9 @@ a.bb {
color: #34395e;
font-weight: 600; }

.text-muted-transparent {
color: rgba(255, 255, 255, 0.8); }

.img-shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); }

Expand Down Expand Up @@ -2189,6 +2195,109 @@ pre {
.icon-wrap {
width: 100%; } }

.background-walk-y {
background-repeat: no-repeat;
background-position: 0 0%;
-webkit-animation-name: backgroundWalkY;
animation-name: backgroundWalkY;
-webkit-animation-duration: 70s;
animation-duration: 70s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-size: 100%; }

@media (max-width: 1199.98px) {
.background-walk-y {
background-size: cover; } }

.background-walk-x {
background-repeat: no-repeat;
background-position: 0 0%;
-webkit-animation-name: backgroundWalkX;
animation-name: backgroundWalkX;
-webkit-animation-duration: 70s;
animation-duration: 70s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
animation-timing-function: linear; }

@-webkit-keyframes backgroundWalkY {
0% {
background-position: 0 0%; }
100% {
background-position: 0 100%; } }

@keyframes backgroundWalkY {
0% {
background-position: 0 0%; }
100% {
background-position: 0 100%; } }

@-webkit-keyframes backgroundWalkX {
0% {
background-position: 0 0%; }
100% {
background-position: 100% 0; } }

@keyframes backgroundWalkX {
0% {
background-position: 0 0%; }
100% {
background-position: 100% 0; } }

.overlay-gradient-bottom:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: false;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%);
z-index: 1; }

.overlay-gradient-top:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: false;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.65) 100%);
z-index: 1; }

.index-1 {
z-index: 1 !important; }

.index-2 {
z-index: 2 !important; }

.index-3 {
z-index: 3 !important; }

.index-4 {
z-index: 4 !important; }

.index-5 {
z-index: 5 !important; }

.absolute-bottom-left {
position: absolute;
left: 0;
bottom: 0; }

/* 4.2 Section */
.section {
position: relative;
Expand Down
Binary file added assets/img/unsplash/login-bg.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions gulpfile.js
View file
Expand Up @@ -144,6 +144,9 @@ function compile_html() {
}

function watching() {
compile_scss();
compile_html();

/**
* BrowserSync initialization
* @type {Object}
Expand Down
110 changes: 110 additions & 0 deletions pages/auth-login-2.html
View file
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Login &mdash; Stisla</title>

<!-- General CSS Files -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<!-- CSS Libraries -->
<link rel="stylesheet" href="../node_modules/bootstrap-social/bootstrap-social.css">

<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
</head>

<body>
<div id="app">
<section class="section">
<div class="d-flex flex-wrap align-items-stretch">
<div class="col-lg-4 col-md-6 col-12 order-lg-1 min-vh-100 order-2 bg-white">
<div class="p-4 m-3">
<img src="../assets/img/stisla-fill.svg" alt="logo" width="80" class="shadow-light rounded-circle mb-5 mt-2">
<h4 class="text-dark font-weight-normal">Welcome to <span class="font-weight-bold">Stisla</span></h4>
<p class="text-muted">Before you get started, you must login or register if you don't already have an account.</p>
<form method="POST" action="#" class="needs-validation" novalidate="">
<div class="form-group">
<label for="email">Email</label>
<input id="email" type="email" class="form-control" name="email" tabindex="1" required autofocus>
<div class="invalid-feedback">
Please fill in your email
</div>
</div>

<div class="form-group">
<div class="d-block">
<label for="password" class="control-label">Password</label>
</div>
<input id="password" type="password" class="form-control" name="password" tabindex="2" required>
<div class="invalid-feedback">
please fill in your password
</div>
</div>

<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="remember" class="custom-control-input" tabindex="3" id="remember-me">
<label class="custom-control-label" for="remember-me">Remember Me</label>
</div>
</div>

<div class="form-group text-right">
<a href="auth-forgot-password.html" class="float-left mt-3">
Forgot Password?
</a>
<button type="submit" class="btn btn-primary btn-lg btn-icon icon-right" tabindex="4">
Login
</button>
</div>

<div class="mt-5 text-center">
Don't have an account? <a href="auth-register.html">Create new one</a>
</div>
</form>

<div class="text-center mt-5 text-small">
Copyright &copy; Your Company. Made with 💙 by Stisla
<div class="mt-2">
<a href="#">Privacy Policy</a>
<div class="bullet"></div>
<a href="#">Terms of Service</a>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-12 order-lg-2 order-1 min-vh-100 background-walk-y position-relative overlay-gradient-bottom" data-background="../assets/img/unsplash/login-bg.jpg">
<div class="absolute-bottom-left index-2">
<div class="text-light p-5 pb-2">
<div class="mb-5 pb-3">
<h1 class="mb-2 display-4 font-weight-bold">Good Mornig</h1>
<h5 class="font-weight-normal text-muted-transparent">Bali, Indonesia</h5>
</div>
Photo by <a class="text-light bb" target="_blank" href="https://unsplash.com/photos/a8lTjWJJgLA">Justin Kauffman</a> on <a class="text-light bb" target="_blank" href="https://unsplash.com">Unsplash</a>
</div>
</div>
</div>
</div>
</section>
</div>

<!-- General JS Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>

<!-- JS Libraies -->

<!-- Page Specific JS File -->

<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>
81 changes: 81 additions & 0 deletions sources/pages/auth-login-2.html
View file
@@ -0,0 +1,81 @@
{% set title = 'Login' %}
{% set page = 'auth-login.html' %}
{% set body = false %}
{% extends 'layouts/master.html' %}

{% block plugins_css %}
<link rel="stylesheet" href="../node_modules/bootstrap-social/bootstrap-social.css">
{% endblock %}

{% block content_2 %}
<section class="section">
<div class="d-flex flex-wrap align-items-stretch">
<div class="col-lg-4 col-md-6 col-12 order-lg-1 min-vh-100 order-2 bg-white">
<div class="p-4 m-3">
<img src="../assets/img/stisla-fill.svg" alt="logo" width="80" class="shadow-light rounded-circle mb-5 mt-2">
<h4 class="text-dark font-weight-normal">Welcome to <span class="font-weight-bold">Stisla</span></h4>
<p class="text-muted">Before you get started, you must login or register if you don't already have an account.</p>
<form method="POST" action="#" class="needs-validation" novalidate="">
<div class="form-group">
<label for="email">Email</label>
<input id="email" type="email" class="form-control" name="email" tabindex="1" required autofocus>
<div class="invalid-feedback">
Please fill in your email
</div>
</div>

<div class="form-group">
<div class="d-block">
<label for="password" class="control-label">Password</label>
</div>
<input id="password" type="password" class="form-control" name="password" tabindex="2" required>
<div class="invalid-feedback">
please fill in your password
</div>
</div>

<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="remember" class="custom-control-input" tabindex="3" id="remember-me">
<label class="custom-control-label" for="remember-me">Remember Me</label>
</div>
</div>

<div class="form-group text-right">
<a href="auth-forgot-password.html" class="float-left mt-3">
Forgot Password?
</a>
<button type="submit" class="btn btn-primary btn-lg btn-icon icon-right" tabindex="4">
Login
</button>
</div>

<div class="mt-5 text-center">
Don't have an account? <a href="auth-register.html">Create new one</a>
</div>
</form>

<div class="text-center mt-5 text-small">
Copyright &copy; Your Company. Made with 💙 by Stisla
<div class="mt-2">
<a href="#">Privacy Policy</a>
<div class="bullet"></div>
<a href="#">Terms of Service</a>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-12 order-lg-2 order-1 min-vh-100 background-walk-y position-relative overlay-gradient-bottom" data-background="../assets/img/unsplash/login-bg.jpg">
<div class="absolute-bottom-left index-2">
<div class="text-light p-5 pb-2">
<div class="mb-5 pb-3">
<h1 class="mb-2 display-4 font-weight-bold">Good Mornig</h1>
<h5 class="font-weight-normal text-muted-transparent">Bali, Indonesia</h5>
</div>
Photo by <a class="text-light bb" target="_blank" href="https://unsplash.com/photos/a8lTjWJJgLA">Justin Kauffman</a> on <a class="text-light bb" target="_blank" href="https://unsplash.com">Unsplash</a>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
16 changes: 15 additions & 1 deletion sources/scss/_mixin.scss
View file
Expand Up @@ -11,21 +11,35 @@
margin-bottom: 30px;
}

@mixin background_walk($animation-name: backgroundWalkY, $s: 70s) {
background-repeat: no-repeat;
background-position: 0 0%;
animation-name: $animation-name;
animation-duration: $s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: linear;
}

@mixin background_spinner($size: 80px) {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTQzLjkzNSwyNS4xNDVjMC0xMC4zMTgtOC4zNjQtMTguNjgzLTE4LjY4My0xOC42ODNjLTEwLjMxOCwwLTE4LjY4Myw4LjM2NS0xOC42ODMsMTguNjgzaDQuMDY4YzAtOC4wNzEsNi41NDMtMTQuNjE1LDE0LjYxNS0xNC42MTVjOC4wNzIsMCwxNC42MTUsNi41NDMsMTQuNjE1LDE0LjYxNUg0My45MzV6Ij4NCjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KICB0eXBlPSJyb3RhdGUiDQogIGZyb209IjAgMjUgMjUiDQogIHRvPSIzNjAgMjUgMjUiDQogIGR1cj0iMC42cyINCiAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCjwvcGF0aD4NCjwvc3ZnPg0K');
background-size: $size;
background-repeat: no-repeat;
background-position: center;
}

@mixin overlay($z-index: 99, $background-color: rgba(255, 255, 255, 0.5)) {
@mixin overlay($z-index: 99, $background-color: rgba(255, 255, 255, 0.5), $background-image: false) {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $background-color;
@if $background-image != false {
background-image: $background-image;
}
z-index: $z-index;
}

Expand Down

0 comments on commit d4747b1

Please sign in to comment.