26 changed files with 47983 additions and 3335 deletions
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,252 @@ |
|||
|
|||
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); |
|||
|
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
body { |
|||
background: #f6f5f7; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
font-family: 'Montserrat', sans-serif; |
|||
height: 100vh; |
|||
margin: -20px 0 50px; |
|||
} |
|||
|
|||
h1 { |
|||
font-weight: bold; |
|||
margin: 0; |
|||
} |
|||
|
|||
h2 { |
|||
text-align: center; |
|||
} |
|||
|
|||
p { |
|||
font-size: 14px; |
|||
font-weight: 100; |
|||
line-height: 20px; |
|||
letter-spacing: 0.5px; |
|||
margin: 20px 0 30px; |
|||
} |
|||
|
|||
span { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
a { |
|||
color: #333; |
|||
font-size: 14px; |
|||
text-decoration: none; |
|||
margin: 15px 0; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 20px; |
|||
border: 1px solid #FF4B2B; |
|||
background-color: #FF4B2B; |
|||
color: #FFFFFF; |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
padding: 12px 45px; |
|||
letter-spacing: 1px; |
|||
text-transform: uppercase; |
|||
transition: transform 80ms ease-in; |
|||
} |
|||
|
|||
button:active { |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
button:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
button.ghost { |
|||
background-color: transparent; |
|||
border-color: #FFFFFF; |
|||
} |
|||
|
|||
form { |
|||
background-color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
padding: 0 50px; |
|||
height: 100%; |
|||
text-align: center; |
|||
} |
|||
|
|||
input { |
|||
background-color: #eee; |
|||
border: none; |
|||
padding: 12px 15px; |
|||
margin: 8px 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.container { |
|||
background-color: #fff; |
|||
border-radius: 10px; |
|||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), |
|||
0 10px 10px rgba(0,0,0,0.22); |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 768px; |
|||
max-width: 100%; |
|||
min-height: 480px; |
|||
} |
|||
|
|||
.form-container { |
|||
position: absolute; |
|||
top: 0; |
|||
height: 100%; |
|||
transition: all 0.6s ease-in-out; |
|||
} |
|||
|
|||
.sign-in-container { |
|||
left: 0; |
|||
width: 50%; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.container.right-panel-active .sign-in-container { |
|||
transform: translateX(100%); |
|||
} |
|||
|
|||
.sign-up-container { |
|||
left: 0; |
|||
width: 50%; |
|||
opacity: 0; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.container.right-panel-active .sign-up-container { |
|||
transform: translateX(100%); |
|||
opacity: 1; |
|||
z-index: 5; |
|||
animation: show 0.6s; |
|||
} |
|||
|
|||
@keyframes show { |
|||
0%, 49.99% { |
|||
opacity: 0; |
|||
z-index: 1; |
|||
} |
|||
|
|||
50%, 100% { |
|||
opacity: 1; |
|||
z-index: 5; |
|||
} |
|||
} |
|||
|
|||
.overlay-container { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 50%; |
|||
width: 50%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
transition: transform 0.6s ease-in-out; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.container.right-panel-active .overlay-container{ |
|||
transform: translateX(-100%); |
|||
} |
|||
|
|||
.overlay { |
|||
background: #FF416C; |
|||
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); |
|||
background: linear-gradient(to right, #FF4B2B, #FF416C); |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
background-position: 0 0; |
|||
color: #FFFFFF; |
|||
position: relative; |
|||
left: -100%; |
|||
height: 100%; |
|||
width: 200%; |
|||
transform: translateX(0); |
|||
transition: transform 0.6s ease-in-out; |
|||
} |
|||
|
|||
.container.right-panel-active .overlay { |
|||
transform: translateX(50%); |
|||
} |
|||
|
|||
.overlay-panel { |
|||
position: absolute; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
padding: 0 40px; |
|||
text-align: center; |
|||
top: 0; |
|||
height: 100%; |
|||
width: 50%; |
|||
transform: translateX(0); |
|||
transition: transform 0.6s ease-in-out; |
|||
} |
|||
|
|||
.overlay-left { |
|||
transform: translateX(-20%); |
|||
} |
|||
|
|||
.container.right-panel-active .overlay-left { |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
.overlay-right { |
|||
right: 0; |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
.container.right-panel-active .overlay-right { |
|||
transform: translateX(20%); |
|||
} |
|||
|
|||
.social-container { |
|||
margin: 20px 0; |
|||
} |
|||
|
|||
.social-container a { |
|||
border: 1px solid #DDDDDD; |
|||
border-radius: 50%; |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 0 5px; |
|||
height: 40px; |
|||
width: 40px; |
|||
} |
|||
|
|||
footer { |
|||
background-color: #222; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
bottom: 0; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
text-align: center; |
|||
z-index: 999; |
|||
} |
|||
|
|||
footer p { |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
footer i { |
|||
color: red; |
|||
} |
|||
|
|||
footer a { |
|||
color: #3c97bf; |
|||
text-decoration: none; |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
const signUpButton = document.getElementById('signUp'); |
|||
const signInButton = document.getElementById('signIn'); |
|||
const container = document.getElementById('container'); |
|||
|
|||
signUpButton.addEventListener('click', () => { |
|||
container.classList.add("right-panel-active"); |
|||
}); |
|||
|
|||
signInButton.addEventListener('click', () => { |
|||
container.classList.remove("right-panel-active"); |
|||
}); |
|||
@ -1,420 +0,0 @@ |
|||
/* |
|||
Author: W3layouts |
|||
Author URL: http://w3layouts.com |
|||
*/ |
|||
html { |
|||
scroll-behavior: smooth; |
|||
} |
|||
|
|||
body, |
|||
html { |
|||
margin: 0; |
|||
padding: 0; |
|||
font-family: 'Poppins', sans-serif; |
|||
} |
|||
|
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.d-grid { |
|||
display: grid; |
|||
} |
|||
|
|||
.d-flex { |
|||
display: flex; |
|||
display: -webkit-flex; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.text-left { |
|||
text-align: left; |
|||
} |
|||
|
|||
.text-right { |
|||
text-align: right; |
|||
} |
|||
|
|||
button, |
|||
input, |
|||
select { |
|||
-webkit-appearance: none; |
|||
outline: none; |
|||
font-family: 'Poppins', sans-serif; |
|||
} |
|||
|
|||
button, |
|||
.btn, |
|||
select { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
} |
|||
|
|||
ul { |
|||
margin: 0; |
|||
padding: 0 |
|||
} |
|||
|
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
p { |
|||
margin: 0; |
|||
padding: 0 |
|||
} |
|||
|
|||
p { |
|||
color: #666; |
|||
font-size: 16px; |
|||
line-height: 25px; |
|||
opacity: .6; |
|||
} |
|||
|
|||
.p-relative { |
|||
position: relative; |
|||
} |
|||
|
|||
.p-absolute { |
|||
position: absolute; |
|||
} |
|||
|
|||
.p-fixed { |
|||
position: fixed; |
|||
} |
|||
|
|||
.p-sticky { |
|||
position: sticky; |
|||
} |
|||
|
|||
.btn, |
|||
button, |
|||
.actionbg, |
|||
input { |
|||
border-radius: 4px; |
|||
-webkit-border-radius: 4px; |
|||
-moz-border-radius: 4px; |
|||
-o-border-radius: 4px; |
|||
-ms-border-radius: 4px; |
|||
} |
|||
|
|||
.btn:hover, |
|||
button:hover { |
|||
transition: 0.5s ease; |
|||
-webkit-transition: 0.5s ease; |
|||
-o-transition: 0.5s ease; |
|||
-ms-transition: 0.5s ease; |
|||
-moz-transition: 0.5s ease; |
|||
} |
|||
|
|||
/*-- wrapper start --*/ |
|||
.wrapper { |
|||
width: 100%; |
|||
padding-right: 15px; |
|||
padding-left: 15px; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
} |
|||
|
|||
@media (min-width: 576px) { |
|||
.wrapper { |
|||
max-width: 540px; |
|||
} |
|||
} |
|||
|
|||
@media (min-width: 768px) { |
|||
.wrapper { |
|||
max-width: 720px; |
|||
} |
|||
} |
|||
|
|||
@media (min-width: 992px) { |
|||
.wrapper { |
|||
max-width: 960px; |
|||
} |
|||
} |
|||
|
|||
@media (min-width: 1200px) { |
|||
.wrapper { |
|||
max-width: 1140px; |
|||
} |
|||
} |
|||
|
|||
.wrapper-full { |
|||
width: 100%; |
|||
padding-right: 15px; |
|||
padding-left: 15px; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
} |
|||
|
|||
/*-- //wrapper start --*/ |
|||
|
|||
/*-- form styling --*/ |
|||
.w3l-mockup-form { |
|||
position: relative; |
|||
min-height: 100vh; |
|||
z-index: 0; |
|||
background: rgba(99, 194, 110, 0.1); |
|||
padding: 40px 40px; |
|||
justify-content: center; |
|||
display: grid; |
|||
grid-template-rows: 1fr auto 1fr; |
|||
align-items: center; |
|||
} |
|||
|
|||
.container { |
|||
max-width: 890px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.w3l_form { |
|||
padding: 0px; |
|||
flex-basis: 50%; |
|||
-webkit-flex-basis: 50%; |
|||
background: #00c16e; |
|||
padding: 100px 50px; |
|||
border-top-left-radius: 8px; |
|||
border-bottom-left-radius: 8px; |
|||
} |
|||
|
|||
.content-wthree { |
|||
flex-basis: 60%; |
|||
-webkit-flex-basis: 60%; |
|||
box-sizing: border-box; |
|||
padding: 3em 3.5em; |
|||
background: #fff; |
|||
box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1); |
|||
border-top-right-radius: 8px; |
|||
border-bottom-right-radius: 8px; |
|||
} |
|||
|
|||
.w3l-workinghny-form .logo { |
|||
text-align: center; |
|||
} |
|||
|
|||
.w3l-mockup-form .main-mockup { |
|||
position: relative; |
|||
display: -webkit-box; |
|||
display: -moz-box; |
|||
display: -ms-flexbox; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
margin: 40px 0; |
|||
} |
|||
|
|||
.w3l-mockup-form .alert-close { |
|||
cursor: pointer; |
|||
height: 35px; |
|||
width: 35px; |
|||
line-height: 35px; |
|||
position: absolute; |
|||
right: -5px; |
|||
top: -5px; |
|||
background: #62c16e; |
|||
border-radius: 50px; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
|
|||
.w3l-mockup-form form { |
|||
margin-top: 30px; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.social-icons { |
|||
text-align: center; |
|||
} |
|||
|
|||
.w3l-mockup-form h1 { |
|||
text-align: center; |
|||
font-size: 40px; |
|||
font-weight: 500; |
|||
color: #3b3663; |
|||
} |
|||
|
|||
.w3l-mockup-form h2 { |
|||
display: inline-block; |
|||
font-size: 25px; |
|||
line-height: 35px; |
|||
margin-bottom: 5px; |
|||
font-weight: 600; |
|||
color: #3b3663; |
|||
} |
|||
|
|||
.w3l-mockup-form input[type="text"], |
|||
.w3l-mockup-form input[type="email"] { |
|||
outline: none; |
|||
margin-bottom: 15px; |
|||
font-size: 16px; |
|||
color: #999; |
|||
text-align: left; |
|||
padding: 14px 20px; |
|||
width: 100%; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
border: none; |
|||
outline: none; |
|||
background: transparent; |
|||
border: 1px solid #e5e5e5; |
|||
} |
|||
|
|||
.w3l-mockup-form button { |
|||
font-size: 18px; |
|||
color: #fff; |
|||
width: 100%; |
|||
background: #00c16e; |
|||
border: none; |
|||
padding: 14px 15px; |
|||
font-weight: 500; |
|||
transition: .3s ease; |
|||
-webkit-transition: .3s ease; |
|||
-moz-transition: .3s ease; |
|||
-ms-transition: .3s ease; |
|||
-o-transition: .3s ease; |
|||
} |
|||
|
|||
.w3l-mockup-form button:hover { |
|||
background: #4ca356; |
|||
} |
|||
|
|||
.w3l-mockup-form .social-icons ul li { |
|||
list-style: none; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.w3l-mockup-form .social-icons ul li a { |
|||
padding: 8px; |
|||
} |
|||
|
|||
.w3l-mockup-form .social-icons ul li a:hover { |
|||
opacity: 0.8; |
|||
transition: 0.5s ease; |
|||
-webkit-transition: 0.5s ease; |
|||
-o-transition: 0.5s ease; |
|||
-ms-transition: 0.5s ease; |
|||
-moz-transition: 0.5s ease; |
|||
} |
|||
|
|||
.w3l-mockup-form .social-icons ul span.fa { |
|||
color: #696687; |
|||
font-size: 18px; |
|||
opacity: .8; |
|||
} |
|||
|
|||
.w3l-mockup-form .social-icons ul li a.facebook span { |
|||
color: #3b5998; |
|||
} |
|||
|
|||
.w3l-mockup-form .social-icons ul li a.twitter span { |
|||
color: #1da1f2; |
|||
} |
|||
|
|||
.w3l-mockup-form .social-icons ul li a.pinterest span { |
|||
color: #e60023; |
|||
} |
|||
|
|||
|
|||
.copyright p { |
|||
text-align: center; |
|||
font-size: 17px; |
|||
line-height: 26px; |
|||
color: #607863; |
|||
opacity: 1; |
|||
} |
|||
|
|||
p.copy-footer-29 a { |
|||
color: #517856; |
|||
} |
|||
|
|||
p.copy-footer-29 a:hover { |
|||
color: #00c16e; |
|||
transition: 0.5s ease; |
|||
-webkit-transition: 0.5s ease; |
|||
-o-transition: 0.5s ease; |
|||
-ms-transition: 0.5s ease; |
|||
-moz-transition: 0.5s ease; |
|||
} |
|||
|
|||
|
|||
/*-- responsive design --*/ |
|||
|
|||
@media (max-width:736px) { |
|||
.w3l-mockup-form .main-mockup { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.w3l_form { |
|||
order: 2; |
|||
padding: 50px; |
|||
border-radius: 0; |
|||
border-bottom-left-radius: 8px; |
|||
border-bottom-right-radius: 8px; |
|||
} |
|||
|
|||
.content-wthree { |
|||
order: 1; |
|||
border-radius: 0; |
|||
border-top-left-radius: 8px; |
|||
border-top-right-radius: 8px; |
|||
} |
|||
} |
|||
|
|||
@media (max-width:568px) { |
|||
.w3l-mockup-form h1 { |
|||
font-size: 30px; |
|||
} |
|||
|
|||
.w3l-mockup-form .main-mockup { |
|||
margin: 30px 0; |
|||
} |
|||
|
|||
.content-wthree { |
|||
padding: 2.5em; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 415px) { |
|||
.w3l-mockup-form { |
|||
padding: 40px 30px; |
|||
} |
|||
|
|||
} |
|||
|
|||
@media (max-width:384px) { |
|||
.w3l-mockup-form { |
|||
padding: 30px 15px; |
|||
} |
|||
|
|||
.content-wthree { |
|||
padding: 2em; |
|||
} |
|||
|
|||
.w3l-mockup-form h1 { |
|||
font-size: 28px; |
|||
} |
|||
|
|||
.w3l-mockup-form h2 { |
|||
font-size: 22px; |
|||
line-height: 32px; |
|||
} |
|||
|
|||
.copyright p { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
/*-- //responsive design --*/ |
|||
/*-- //form styling --*/ |
|||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
File diff suppressed because one or more lines are too long
@ -1,17 +1,18 @@ |
|||
D:\1XYX\demo\hapi-demo\source\route\api对应路径： |
|||
不需权限 ： GET /api/v1/upload |
|||
不需权限 ： POST /api/v1/upload/upload |
|||
不需权限 ： GET /api/{path*} |
|||
需要权限 ： GET /api/v1/upload |
|||
需要权限 ： POST /api/v1/upload/upload |
|||
不需权限 ： POST /api/v1/user/register |
|||
不需权限 ： POST /api/v1/user/logout |
|||
需要权限 ： POST /api/v1/user/logout |
|||
不需权限 ： POST /api/v1/user/login |
|||
需要权限 ： DELETE /api/v1/user/del |
|||
不需权限 ： GET /api/v1/user/userinfo |
|||
需要权限 ： GET /api/v1/user/userinfo |
|||
D:\1XYX\demo\hapi-demo\source\route\views对应路径： |
|||
不需权限 ： GET /404 |
|||
不需权限 ： GET /css |
|||
不需权限(提供无需验证)： GET / |
|||
不需权限 ： GET /about |
|||
需要权限 ： GET /docs/{path*} |
|||
不需权限 ： GET /docs/{path*} |
|||
不需权限 ： GET /{path*} |
|||
不需权限(提供无需验证)： GET /login |
|||
不需权限 ： POST /login |
|||
|
|||
@ -0,0 +1,13 @@ |
|||
import { Req, Res, ReturnValue } from "#/global"; |
|||
import { auth, route } from "@noderun/hapi-router"; |
|||
|
|||
export default class { |
|||
@route("/{path*}") |
|||
@auth(false) |
|||
async any(req: Req, h: Res): ReturnValue { |
|||
return { |
|||
code: 404, |
|||
data: null, |
|||
}; |
|||
} |
|||
} |
|||
@ -1,118 +0,0 @@ |
|||
<!-- |
|||
Author: W3layouts |
|||
Author URL: http://w3layouts.com |
|||
--> |
|||
<!DOCTYPE html> |
|||
<html lang="zxx"> |
|||
<head> |
|||
<title>Well Subscribe form Responsive Widget Template : W3layouts</title> |
|||
<!-- Meta tag Keywords --> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|||
<meta charset="UTF-8" /> |
|||
<meta |
|||
name="keywords" |
|||
content="Well Subscribe form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" |
|||
/> |
|||
<!-- //Meta tag Keywords --> |
|||
|
|||
<link |
|||
href="//fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" |
|||
rel="stylesheet" |
|||
/> |
|||
|
|||
<!--/Style-CSS --> |
|||
<link rel="stylesheet" href="/public/login/css/style.css" type="text/css" media="all" /> |
|||
<!--//Style-CSS --> |
|||
|
|||
<script |
|||
src="https://kit.fontawesome.com/af562a2a63.js" |
|||
crossorigin="anonymous" |
|||
></script> |
|||
</head> |
|||
|
|||
<body> |
|||
<!-- form section start --> |
|||
<section class="w3l-mockup-form"> |
|||
<h1>天蚕 / 地缺</h1> |
|||
<div class="container"> |
|||
<!-- /form --> |
|||
<div class="workinghny-form-grid"> |
|||
<div class="main-mockup"> |
|||
<div class="alert-close"> |
|||
<span class="fa fa-close"></span> |
|||
</div> |
|||
<div class="w3l_form align-self"> |
|||
<div class="left_grid_info"> |
|||
<img src="/public/login/images/image.svg" alt="" /> |
|||
</div> |
|||
</div> |
|||
<div class="content-wthree"> |
|||
<h2>现在开始注册</h2> |
|||
<p> |
|||
lets keep in touch! Please subscribe to our newsletter and stay |
|||
updated |
|||
</p> |
|||
<form action="#" method="post"> |
|||
<input |
|||
type="text" |
|||
class="text" |
|||
name="text" |
|||
placeholder="Enter Your Name" |
|||
required="" |
|||
/> |
|||
<input |
|||
type="email" |
|||
class="email" |
|||
name="email" |
|||
placeholder="Enter Your Email" |
|||
required="" |
|||
/> |
|||
<button class="btn" type="submit">Subscribe</button> |
|||
</form> |
|||
<div class="social-icons w3layouts"> |
|||
<ul> |
|||
<li> |
|||
<a href="#url" class="facebook" |
|||
><span class="fab fa-facebook"></span> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="#url" class="twitter" |
|||
><span class="fab fa-twitter"></span> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="#url" class="pinterest" |
|||
><span class="fab fa-pinterest"></span> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- //form --> |
|||
</div> |
|||
<!-- copyright--> |
|||
<div class="copyright text-center"> |
|||
<p class="copy-footer-29"> |
|||
© 2020 Well Subscribe form. All rights reserved | Design by |
|||
<a href="https://w3layouts.com">W3layouts</a> |
|||
</p> |
|||
</div> |
|||
<!-- //copyright--> |
|||
</section> |
|||
<!-- //form section start --> |
|||
|
|||
<script src="/public/login/js/jquery.min.js"></script> |
|||
<script> |
|||
$(document).ready(function (c) { |
|||
$(".alert-close").on("click", function (c) { |
|||
$(".main-mockup").fadeOut("slow", function (c) { |
|||
$(".main-mockup").remove(); |
|||
}); |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,60 @@ |
|||
extends /layout/layout |
|||
|
|||
block head |
|||
+css("css/page/login.css") |
|||
|
|||
block content |
|||
h2 Weekly Coding Challenge #1: Sign in/up Form |
|||
.container#container |
|||
.form-container.sign-up-container |
|||
form(action='#') |
|||
h1 Create Account |
|||
.social-container |
|||
a.social(href='#') |
|||
i.fab.fa-facebook-f |
|||
a.social(href='#') |
|||
i.fab.fa-google-plus-g |
|||
a.social(href='#') |
|||
i.fab.fa-linkedin-in |
|||
span or use your email for registration |
|||
input(type='text', placeholder='Name') |
|||
input(type='email', placeholder='Email') |
|||
input(type='password', placeholder='Password') |
|||
button Sign Up |
|||
.form-container.sign-in-container |
|||
form(action='#') |
|||
h1 Sign in |
|||
.social-container |
|||
a.social(href='#') |
|||
i.fab.fa-facebook-f |
|||
a.social(href='#') |
|||
i.fab.fa-google-plus-g |
|||
a.social(href='#') |
|||
i.fab.fa-linkedin-in |
|||
span or use your account |
|||
input(type='email', placeholder='Email') |
|||
input(type='password', placeholder='Password') |
|||
a(href='#') Forgot your password? |
|||
button Sign In |
|||
.overlay-container |
|||
.overlay |
|||
.overlay-panel.overlay-left |
|||
h1 Welcome Back! |
|||
p To keep connected with us please login with your personal info |
|||
button.ghost#signIn Sign In |
|||
.overlay-panel.overlay-right |
|||
h1 Hello, Friend! |
|||
p Enter your personal details and start journey with us |
|||
button.ghost#signUp Sign Up |
|||
footer |
|||
p |
|||
| Created with |
|||
i.fa.fa-heart |
|||
| by |
|||
a(target='_blank', href='https://florin-pop.com') Florin Pop |
|||
| - Read how I created this and how you can join the challenge |
|||
a(target='_blank', href='https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/') here |
|||
| . |
|||
|
|||
block script |
|||
+script("js/page/login.js") |
|||
Loading…
Reference in new issue