Skip to content

V
virtualX
Commit 4daf7d35 authored by Nameer AS's avatar Nameer AS
Browse files
Options

-+96

parent 24f70b8c
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 37 deletions
src/assets/js/main.js
View file @ 4daf7d35
...@@ -58,6 +58,7 @@ $(document).ready(function() { ...@@ -58,6 +58,7 @@ $(document).ready(function() {
$('header .login>a.button').click(function(e) { $('header .login>a.button').click(function(e) {
e.preventDefault(); e.preventDefault();
$(this).toggleClass('active'); $(this).toggleClass('active');
$(this).siblings('.header-form').toggleClass('active');
$('header .form-wrap').slideToggle(); $('header .form-wrap').slideToggle();
}); });
...@@ -136,4 +137,24 @@ $(document).ready(function() { ...@@ -136,4 +137,24 @@ $(document).ready(function() {
} }
}); });
$('.forgot-password').click(function(e) {
e.preventDefault();
var parentItem = $(this).parents('.item');
parentItem.addClass('hide-to-top');
parentItem.siblings('.item').addClass('show-from-bottom');
});
$('.select-plan ul li').click(function() {
$(this).siblings().addBack().children().remove();
$(this).siblings().toggle();
$(this).parent().prepend(this);
$(this).parent().toggleClass('nnn');
});
$('.select-plan > ul> li:not(:first-child)').click(function() {
var _curr_tab = $(this).attr('data-plan');
console.log(_curr_tab)
});
}); });
\ No newline at end of file
src/assets/scss/_main.scss
View file @ 4daf7d35
...@@ -7,9 +7,14 @@ ...@@ -7,9 +7,14 @@
} }
// Default // Default
html {
height: 100%;
}
body { body {
overflow-x: hidden; overflow-x: hidden;
color: #000; color: #000;
height: 100%;
} }
input:-webkit-autofill, input:-webkit-autofill,
...@@ -84,7 +89,7 @@ h1 { ...@@ -84,7 +89,7 @@ h1 {
} }
h2 { h2 {
margin: 0 0 20px; margin: 0;
} }
h6 { h6 {
...@@ -235,6 +240,18 @@ header { ...@@ -235,6 +240,18 @@ header {
} }
.header-form { .header-form {
padding-top: 18px; padding-top: 18px;
&.active {
&:after {
@include css-triangle(14px,
#cb022c,
up);
position: absolute;
bottom: -18px;
left: 0;
right: 0;
margin: auto;
}
}
} }
.login { .login {
height: 37px; height: 37px;
...@@ -260,15 +277,25 @@ header { ...@@ -260,15 +277,25 @@ header {
transform: translateX(-50%); transform: translateX(-50%);
z-index: 99; z-index: 99;
right: 0; right: 0;
&:before { height: 200px;
@include css-triangle(14px, overflow: hidden;
#cb022c, .item {
up);
position: absolute; position: absolute;
top: -14px; transition: all ease-in 0.5s;
left: 0; &.hide-to-top {
right: 0; transform: translateY(-120%);
margin: auto; }
&.show-from-bottom {
transform: translateY(0%);
}
}
.login-form {
input {
margin: 0 0 25px;
}
}
.forgot-pwd-form {
transform: translateY(120%);
} }
button { button {
color: #fff; color: #fff;
...@@ -277,25 +304,53 @@ header { ...@@ -277,25 +304,53 @@ header {
font-size: 11px; font-size: 11px;
a { a {
color: #fff; color: #fff;
padding: 0;
position: static;
&:hover {
background: transparent;
}
} }
} }
} }
.title {
font-size: 15px;
font-weight: bold;
margin: 0 0 10px;
}
.bottom-field {
margin: 20px 0 0;
p,
a {
font-weight: 300;
font-size: 12px;
margin: 0;
color: $white;
}
a {
border-bottom: solid 1px #d84161;
}
}
} }
} }
.form-wrap { .form-wrap {
.info {
display: block;
font-size: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 0.3);
}
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
background: $highlight-color;
.cell { .cell {
position: relative; position: relative;
} }
input, input,
textarea { textarea {
color: #fff;
background: transparent; background: transparent;
color: #fff;
border: none; border: none;
border-bottom: solid 1px #fa0034; border-bottom: solid 1px #514949;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
margin-bottom: 15px; margin-bottom: 15px;
...@@ -313,6 +368,7 @@ header { ...@@ -313,6 +368,7 @@ header {
transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0);
position: absolute; position: absolute;
color: #fff; color: #fff;
opacity: 0.3;
top: 0; top: 0;
transition: 0.2s ease all; transition: 0.2s ease all;
-moz-transition: 0.2s ease all; -moz-transition: 0.2s ease all;
...@@ -326,12 +382,48 @@ header { ...@@ -326,12 +382,48 @@ header {
&:focus, &:focus,
&:valid { &:valid {
~label { ~label {
opacity: 0.8; opacity: 0.3;
font-size: 12px; font-size: 12px;
transform: translate3d(0, -12px, 0); transform: translate3d(0, -12px, 0);
} }
} }
} }
&.red {
background: $highlight-color;
color: $white;
label {
opacity: 1;
}
input,
textarea {
border-bottom: solid 1px #fa0034;
&:focus {
@extend input;
border-bottom: solid 1px #fa0034;
}
&:focus,
&:valid {
~label {
opacity: 0.8;
}
}
}
}
.checkbox {
display: flex;
align-items: center;
input {
height: auto;
margin: 0;
&:focus {
outline: 0;
}
}
label {
transform: inherit !important;
position: static;
}
}
} }
.hamburger-menu { .hamburger-menu {
...@@ -1120,9 +1212,20 @@ nav { ...@@ -1120,9 +1212,20 @@ nav {
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
h4 { h4 {
width: 100%;
font-size: 24px; font-size: 24px;
} }
} }
.select-plan {
ul {
li {
display: none;
&:first-child {
display: block;
}
}
}
}
.card-icon { .card-icon {
min-height: 111px; min-height: 111px;
border-bottom: solid 1px rgba(0, 0, 0, 0.1); border-bottom: solid 1px rgba(0, 0, 0, 0.1);
...@@ -1337,6 +1440,27 @@ footer { ...@@ -1337,6 +1440,27 @@ footer {
margin: 0; margin: 0;
} }
.register {
min-height: 100%;
padding: 70px 0;
background: #261b1b;
color: #fff;
.price {
color: #fff;
background: #cb022c;
.card-price {
color: #fff;
}
.card-price sup {
color: #fff;
}
.button {
background: #261b1b;
color: #fff;
}
}
}
@keyframes floater { @keyframes floater {
0% { 0% {
transform: translate3d(0px, -10px, 0px); transform: translate3d(0px, -10px, 0px);
......
src/assets/scss/_responsive.scss
View file @ 4daf7d35
...@@ -499,7 +499,6 @@ ...@@ -499,7 +499,6 @@
order: 1; order: 1;
width: 100%; width: 100%;
margin: 0; margin: 0;
text-align: right;
margin: 0 0 20px; margin: 0 0 20px;
>div { >div {
margin: 0 0 0 35px; margin: 0 0 0 35px;
......
src/layouts/default.html
View file @ 4daf7d35
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="{{root}}assets/img/favicon.png"> <link rel="shortcut icon" type="image/png" href="{{root}}assets/img/favicon.png">
<title>VirtualX</title> <title>VirtualX</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="{{root}}assets/fonts/icon.css"> <link rel="stylesheet" href="{{root}}assets/fonts/icon.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css"> <link rel="stylesheet" href="{{root}}assets/css/app.css">
</head> </head>
......
src/pages/index.html
View file @ 4daf7d35
...@@ -346,7 +346,7 @@ ...@@ -346,7 +346,7 @@
<section class="plans-price" id="pricing"> <section class="plans-price" id="pricing">
<div class="grid-container"> <div class="grid-container">
<h1>Plans <span class="red">&</span> Pricing</h1> <h2 class="text-center">Plans <span class="red">&</span> Pricing</h2>
<p class="sub-text text-center">Choose the most suitable tariff plan for your requirements</p> <p class="sub-text text-center">Choose the most suitable tariff plan for your requirements</p>
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
<div class="large-3 medium-6 cell"> <div class="large-3 medium-6 cell">
...@@ -366,7 +366,7 @@ ...@@ -366,7 +366,7 @@
<li>Concurrent Users: &lt; 100</li> <li>Concurrent Users: &lt; 100</li>
<li>Validity : 6 months</li> <li>Validity : 6 months</li>
</ul> </ul>
<a href="" class="button">Sign Up</a> <a href="register.html" class="button">Sign Up</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -388,7 +388,7 @@ ...@@ -388,7 +388,7 @@
<li>Concurrent Users: &lt; 100</li> <li>Concurrent Users: &lt; 100</li>
<li>Validity : 6 months</li> <li>Validity : 6 months</li>
</ul> </ul>
<a href="" class="button">Sign Up</a> <a href="register.html" class="button">Sign Up</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -409,7 +409,7 @@ ...@@ -409,7 +409,7 @@
<li>Concurrent Users: &lt; 100</li> <li>Concurrent Users: &lt; 100</li>
<li>Validity : 12 months</li> <li>Validity : 12 months</li>
</ul> </ul>
<a href="" class="button">Sign Up</a> <a href="register.html" class="button">Sign Up</a>
</div> </div>
<div class="badge"> <div class="badge">
<span>Best Plan</span> <span>Best Plan</span>
...@@ -429,7 +429,7 @@ ...@@ -429,7 +429,7 @@
<p><strong>Let's Talk!</strong> Tell us more about organization and we'll configure a perfect plan tailored for your needs. <p><strong>Let's Talk!</strong> Tell us more about organization and we'll configure a perfect plan tailored for your needs.
</p> </p>
</div> </div>
<a href="" class="button">Contact Us</a> <a href="register.html" class="button">Contact Us</a>
</div> </div>
</div> </div>
...@@ -531,7 +531,7 @@ ...@@ -531,7 +531,7 @@
<a href="" class="button access dark-hover">Click Here To Access Demo</a> <a href="" class="button access dark-hover">Click Here To Access Demo</a>
</div> </div>
<div class="large-4 cell"> <div class="large-4 cell">
<div class="form-wrap"> <div class="form-wrap red">
<div class="title"> Contact Us</div> <div class="title"> Contact Us</div>
<form> <form>
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
......
src/pages/register.html 0 → 100644
View file @ 4daf7d35
<section class="register">
<div class="grid-container">
<h2 class="text-center">Register </h2>
<span class="sub-text text-center">Choose the most suitable tariff plan for your requirements</span>
<div class="grid-x grid-padding-x">
<div class="large-3 medium-6 cell">
<div class="card price">
<div class="card-divider">
<h4>Change Plan</h4>
</div>
<div class="select-plan">
<ul>
<li data-plan="basic">Basic</li>
<li data-plan="basic-plus">Basic Plus</li>
<li data-plan="premium">Premium</li>
</ul>
</div>
<div class="plan-detail" id="basic">
<div class="card-price">
<sup>$</sup>49.99
</div>
<div class="card-section">
<ul>
<li>100 Credit Points*</li>
<li>Unlimited Exams</li>
<li>Unlimited Questions</li>
<li>Various Question Types</li>
<li>Concurrent Users: &lt; 100</li>
<li>Validity : 6 months</li>
</ul>
<a href="register.html" class="button">Sign Up</a>
</div>
</div>
</div>
</div>
<div class="large-9 medium-6 cell">
<div class="grid-x grid-padding-x form-wrap">
<div class="large-6 medium-6 cell">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Account Name *</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Email *</label>
</div>
<div class=" cell">
<input type="password" placeholder="" required="">
<label for="">Password *</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Address Line 1*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Name*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Zip Code*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Name*</label>
</div>
</div>
<div class="large-6 medium-6 cell">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Exam Portal *</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Username *</label>
</div>
<div class=" cell">
<input type="password" placeholder="" required="">
<label for="">Password Confirmation *</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Address Line 1*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">City*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Name*</label>
</div>
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Phone Number*</label>
</div>
</div>
<div class="large-6 medium-6 cell">
<div class="checkbox">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">I accept terms and conditions</label>
</div>
</div>
<div class="large-6 medium-6 cell ">
<span class="text-right info"><span class="red">*</span>Mandatory Fields</span>
</div>
<div class="large-12 medium-12 cell">
<a href="" class="button float-right dark-hover">Submit</a>
</div>
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
src/partials/header.html
View file @ 4daf7d35
...@@ -27,24 +27,51 @@ ...@@ -27,24 +27,51 @@
<div class="login"> <div class="login">
<a href="#" class="button">Login</a> <a href="#" class="button">Login</a>
<div class="header-form"> <div class="header-form">
<div class="form-wrap"> <div class="form-wrap red">
<form> <div class="item login-form">
<div class="grid-x grid-padding-x"> <form>
<div class=" cell"> <div class="grid-x grid-padding-x">
<input type="text" placeholder="" required> <div class="cell">
<label for="">Name*</label> <div class="title"> User Login</div>
</div>
<div class=" cell">
<input type="text" placeholder="" required>
<label for="">Name*</label>
</div>
<div class=" cell">
<input type="password" placeholder="" required>
<label for="">Password*</label>
</div>
<div class="cell">
<button class="float-right">Login</button>
<button class="float-left">
<a href="" class="forgot-password orbit-next"> forgot password?</a></button>
</div>
</div> </div>
<div class=" cell"> </form>
<input type="password" placeholder="" required> </div>
<label for="">Password*</label> <div class="item forgot-pwd-form">
<form>
<div class="grid-x grid-padding-x">
<div class="cell">
<div class="title"> Forgot Password</div>
</div>
<div class=" cell">
<input type="text" placeholder="" required>
<label for="">Email*</label>
</div>
<div class="cell">
<button class="float-right">Submit</button>
</div>
<div class="cell">
<div class="bottom-field">
<p>*Mandatory Fields</p>
<a href="">Didn’t receive unlock instructions?</a>
</div>
</div>
</div> </div>
<div class="cell"> </form>
<button class="float-right">Login</button> </div>
<button class="float-left">
<a href=""> forgot password?</a></button>
</div>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment