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() {
$('header .login>a.button').click(function(e) {
e.preventDefault();
$(this).toggleClass('active');
$(this).siblings('.header-form').toggleClass('active');
$('header .form-wrap').slideToggle();
});
......@@ -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 @@
}
// Default
html {
height: 100%;
}
body {
overflow-x: hidden;
color: #000;
height: 100%;
}
input:-webkit-autofill,
......@@ -84,7 +89,7 @@ h1 {
}
h2 {
margin: 0 0 20px;
margin: 0;
}
h6 {
......@@ -235,6 +240,18 @@ header {
}
.header-form {
padding-top: 18px;
&.active {
&:after {
@include css-triangle(14px,
#cb022c,
up);
position: absolute;
bottom: -18px;
left: 0;
right: 0;
margin: auto;
}
}
}
.login {
height: 37px;
......@@ -260,15 +277,25 @@ header {
transform: translateX(-50%);
z-index: 99;
right: 0;
&:before {
@include css-triangle(14px,
#cb022c,
up);
height: 200px;
overflow: hidden;
.item {
position: absolute;
top: -14px;
left: 0;
right: 0;
margin: auto;
transition: all ease-in 0.5s;
&.hide-to-top {
transform: translateY(-120%);
}
&.show-from-bottom {
transform: translateY(0%);
}
}
.login-form {
input {
margin: 0 0 25px;
}
}
.forgot-pwd-form {
transform: translateY(120%);
}
button {
color: #fff;
......@@ -277,25 +304,53 @@ header {
font-size: 11px;
a {
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 {
.info {
display: block;
font-size: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 0.3);
}
padding-top: 15px;
padding-bottom: 15px;
background: $highlight-color;
.cell {
position: relative;
}
input,
textarea {
color: #fff;
background: transparent;
color: #fff;
border: none;
border-bottom: solid 1px #fa0034;
border-bottom: solid 1px #514949;
-webkit-box-shadow: none;
box-shadow: none;
margin-bottom: 15px;
......@@ -313,6 +368,7 @@ header {
transform: translate3d(0, 5px, 0);
position: absolute;
color: #fff;
opacity: 0.3;
top: 0;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
......@@ -326,12 +382,48 @@ header {
&:focus,
&:valid {
~label {
opacity: 0.8;
opacity: 0.3;
font-size: 12px;
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 {
......@@ -1120,9 +1212,20 @@ nav {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
h4 {
width: 100%;
font-size: 24px;
}
}
.select-plan {
ul {
li {
display: none;
&:first-child {
display: block;
}
}
}
}
.card-icon {
min-height: 111px;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
......@@ -1337,6 +1440,27 @@ footer {
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 {
0% {
transform: translate3d(0px, -10px, 0px);
......
src/assets/scss/_responsive.scss
View file @ 4daf7d35
......@@ -499,7 +499,6 @@
order: 1;
width: 100%;
margin: 0;
text-align: right;
margin: 0 0 20px;
>div {
margin: 0 0 0 35px;
......
src/layouts/default.html
View file @ 4daf7d35
......@@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="{{root}}assets/img/favicon.png">
<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/css/app.css">
</head>
......
src/pages/index.html
View file @ 4daf7d35
......@@ -346,7 +346,7 @@
<section class="plans-price" id="pricing">
<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>
<div class="grid-x grid-padding-x">
<div class="large-3 medium-6 cell">
......@@ -366,7 +366,7 @@
<li>Concurrent Users: &lt; 100</li>
<li>Validity : 6 months</li>
</ul>
<a href="" class="button">Sign Up</a>
<a href="register.html" class="button">Sign Up</a>
</div>
</div>
</div>
......@@ -388,7 +388,7 @@
<li>Concurrent Users: &lt; 100</li>
<li>Validity : 6 months</li>
</ul>
<a href="" class="button">Sign Up</a>
<a href="register.html" class="button">Sign Up</a>
</div>
</div>
</div>
......@@ -409,7 +409,7 @@
<li>Concurrent Users: &lt; 100</li>
<li>Validity : 12 months</li>
</ul>
<a href="" class="button">Sign Up</a>
<a href="register.html" class="button">Sign Up</a>
</div>
<div class="badge">
<span>Best Plan</span>
......@@ -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>
</div>
<a href="" class="button">Contact Us</a>
<a href="register.html" class="button">Contact Us</a>
</div>
</div>
......@@ -531,7 +531,7 @@
<a href="" class="button access dark-hover">Click Here To Access Demo</a>
</div>
<div class="large-4 cell">
<div class="form-wrap">
<div class="form-wrap red">
<div class="title"> Contact Us</div>
<form>
<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 @@
<div class="login">
<a href="#" class="button">Login</a>
<div class="header-form">
<div class="form-wrap">
<form>
<div class="grid-x grid-padding-x">
<div class=" cell">
<input type="text" placeholder="" required>
<label for="">Name*</label>
<div class="form-wrap red">
<div class="item login-form">
<form>
<div class="grid-x grid-padding-x">
<div class="cell">
<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 class=" cell">
<input type="password" placeholder="" required>
<label for="">Password*</label>
</form>
</div>
<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 class="cell">
<button class="float-right">Login</button>
<button class="float-left">
<a href=""> forgot password?</a></button>
</div>
</div>
</form>
</form>
</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