Skip to content

V
virtualX
Commit 2ab12d66 authored by Nameer AS's avatar Nameer AS
Browse files
Options

nes pages

parent dd3285ef
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3248 additions and 67 deletions
src/assets/js/main.js
View file @ 2ab12d66
...@@ -144,10 +144,17 @@ $(document).ready(function() { ...@@ -144,10 +144,17 @@ $(document).ready(function() {
parentItem.siblings('.item').addClass('show-from-bottom'); parentItem.siblings('.item').addClass('show-from-bottom');
}); });
$('.select-plan ul li').click(function() { $('.select-plan ul li').click(function() {
$(this).parents('.select-plan').toggleClass('active');
var curTab = $(this).attr('data-plan'); var curTab = $(this).attr('data-plan');
$('#' + curTab).hide(); console.log(curTab);
$(this).siblings().slideToggle(); $(this).siblings().slideToggle();
$(this).parent().prepend(this); $(this).parent().prepend(this);
$('.plan-detail').hide();
$('#' + curTab).show(); $('#' + curTab).show();
}); });
if ($(window).width() < 641) {
$('.hamburger-menu').on('click', function() {
$('.navigation').toggleClass('active');
});
}
}); });
\ No newline at end of file
src/assets/scss/_main.scss
View file @ 2ab12d66
...@@ -17,6 +17,10 @@ body { ...@@ -17,6 +17,10 @@ body {
height: 100%; height: 100%;
} }
.margin-0 {
margin: 0 !important;
}
input:-webkit-autofill, input:-webkit-autofill,
input:-webkit-autofill:hover, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:focus,
...@@ -204,15 +208,6 @@ header { ...@@ -204,15 +208,6 @@ header {
z-index: 9999; z-index: 9999;
padding: 10px 0 18px; padding: 10px 0 18px;
box-shadow: 0px 2px 19px -4px rgba(0, 0, 0, 0.36); box-shadow: 0px 2px 19px -4px rgba(0, 0, 0, 0.36);
&.type-2 {
&.small {
.user-welcome {
top: -5px;
}
}
.language-bar {
flex: 1 0 50%;
}
.user-welcome { .user-welcome {
position: relative; position: relative;
top: -15px; top: -15px;
...@@ -226,6 +221,13 @@ header { ...@@ -226,6 +221,13 @@ header {
color: #000; color: #000;
} }
} }
&.secondary-header {
.language-bar {
flex: 1 0 50%;
}
.hamburger-menu {
display: none;
}
nav { nav {
margin-top: 0 !important; margin-top: 0 !important;
position: static; position: static;
...@@ -269,6 +271,9 @@ header { ...@@ -269,6 +271,9 @@ header {
} }
} }
&.small { &.small {
.user-welcome {
top: -5px;
}
.logo { .logo {
img { img {
max-width: 120px; max-width: 120px;
...@@ -359,6 +364,8 @@ header { ...@@ -359,6 +364,8 @@ header {
} }
button { button {
color: #fff; color: #fff;
}
span {
&.float-left { &.float-left {
margin: 4px 0 0; margin: 4px 0 0;
font-size: 11px; font-size: 11px;
...@@ -394,6 +401,24 @@ header { ...@@ -394,6 +401,24 @@ header {
} }
.form-wrap { .form-wrap {
&.form-adj {
input {
margin: 0 0 64px;
&:focus {
margin: 0 0 64px;
}
}
select,
select:focus {
margin-bottom: 0 !important;
}
label {
transform: translate3d(0, 0, 0);
}
.checkbox {
margin: 0 0 30px;
}
}
.info { .info {
display: block; display: block;
font-size: 12px; font-size: 12px;
...@@ -429,18 +454,22 @@ header { ...@@ -429,18 +454,22 @@ header {
} }
input { input {
&[type="radio"] { &[type="radio"] {
position: absolute; cursor: pointer;
left: 0; position: relative;
top: 0; left: -5px;
opacity: 0;
height: auto; height: auto;
margin: 0; margin: 0;
outline: 0; &:not(:checked) {
opacity: 0;
&:checked {
&+.checkmark:after { &+.checkmark:after {
display: block; opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
} }
} }
&[type='checkbox'] {
margin: 0 !important;
} }
} }
select { select {
...@@ -451,24 +480,30 @@ header { ...@@ -451,24 +480,30 @@ header {
} }
} }
.checkmark { .checkmark {
position: static;
cursor: pointer;
&:before {
content: '';
position: absolute; position: absolute;
top: 0;
left: 0; left: 0;
height: 14px; top: 8px;
width: 14px; width: 14px;
background-color: #eee; height: 14px;
border: solid 1px #d8d8d8; border: 1px solid #d8d8d8;
border-radius: 50%; border-radius: 100%;
display: flex; background: #fff;
align-items: center; }
justify-content: center;
&:after { &:after {
content: ""; content: '';
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%;
background: #9e2323; background: #9e2323;
display: none; position: absolute;
top: 12px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
} }
} }
label { label {
...@@ -480,6 +515,12 @@ header { ...@@ -480,6 +515,12 @@ header {
transition: 0.2s ease all; transition: 0.2s ease all;
-moz-transition: 0.2s ease all; -moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all; -webkit-transition: 0.2s ease all;
&.checkmark {
transform: inherit;
}
&.select-label {
top: -20px;
}
} }
input, input,
textarea { textarea {
...@@ -492,6 +533,10 @@ header { ...@@ -492,6 +533,10 @@ header {
opacity: 0.3; opacity: 0.3;
font-size: 12px; font-size: 12px;
transform: translate3d(0, -12px, 0); transform: translate3d(0, -12px, 0);
&.checkmark {
transform: inherit;
opacity: 1;
}
} }
} }
} }
...@@ -537,6 +582,14 @@ header { ...@@ -537,6 +582,14 @@ header {
width: 100%; width: 100%;
margin: 0 0 25px; margin: 0 0 25px;
border: solid 1px #d7d7d7; border: solid 1px #d7d7d7;
&.marg-adj {
input {
margin: 0 0 20px;
}
.panel-body.padding {
padding: 25px 15px;
}
}
.panel-head { .panel-head {
background: #9e2323; background: #9e2323;
color: #fff; color: #fff;
...@@ -547,6 +600,9 @@ header { ...@@ -547,6 +600,9 @@ header {
float: left; float: left;
width: 100%; width: 100%;
padding: 0 15px; padding: 0 15px;
&.padding {
padding: 40px 15px;
}
.plan-type { .plan-type {
border-bottom: solid 1px #d7d7d7; border-bottom: solid 1px #d7d7d7;
display: block; display: block;
...@@ -566,7 +622,7 @@ header { ...@@ -566,7 +622,7 @@ header {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0 0 25px; padding: 0 0 0 5px;
} }
} }
} }
...@@ -1364,14 +1420,34 @@ nav { ...@@ -1364,14 +1420,34 @@ nav {
} }
} }
.select-plan { .select-plan {
position: relative;
ul { ul {
li { li {
cursor: pointer;
display: none; display: none;
&:first-child { &:first-child {
display: block; display: block;
} }
} }
} }
&:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 9px 5.5px 0 5.5px;
border-color: #ffffff transparent transparent transparent;
position: absolute;
right: 70px;
top: 13px;
cursor: pointer;
}
&.active {
&:after {
border-width: 0 5.5px 9px 5.5px;
border-color: transparent transparent #ffffff transparent;
}
}
} }
.card-icon { .card-icon {
min-height: 111px; min-height: 111px;
...@@ -1603,6 +1679,13 @@ footer { ...@@ -1603,6 +1679,13 @@ footer {
.register { .register {
padding: 70px 0; padding: 70px 0;
.price { .price {
ul {
margin: 0;
}
h4 {
border-bottom: solid 1px #fff;
width: auto;
}
color: #fff; color: #fff;
background: #cb022c; background: #cb022c;
.card-price { .card-price {
...@@ -1622,6 +1705,9 @@ footer { ...@@ -1622,6 +1705,9 @@ footer {
&.settings { &.settings {
background: transparent; background: transparent;
color: #000; color: #000;
input {
color: #000;
}
h2 { h2 {
padding-bottom: 40px; padding-bottom: 40px;
} }
...@@ -1704,6 +1790,15 @@ footer { ...@@ -1704,6 +1790,15 @@ footer {
} }
} }
.payment {
.form-wrap {
input,
select {
border-bottom: solid 1px #d7d7d7;
}
}
}
@keyframes floater { @keyframes floater {
0% { 0% {
transform: translate3d(0px, -10px, 0px); transform: translate3d(0px, -10px, 0px);
......
src/assets/scss/_responsive.scss
View file @ 2ab12d66
...@@ -148,6 +148,21 @@ ...@@ -148,6 +148,21 @@
.custom-gutter-2 .large-4 { .custom-gutter-2 .large-4 {
width: calc(33.33% - 66px); width: calc(33.33% - 66px);
} }
.price .select-plan:after {
right: 55px;
}
.price ul li {
font-size: 14px;
}
.search-result .item-block:nth-child(2n+2) {
padding-left: 50px;
}
.search-result .item-block {
padding-bottom: 30px;
}
.search-result .item-block:nth-child(n+3) {
padding-top: 30px;
}
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
...@@ -484,6 +499,21 @@ ...@@ -484,6 +499,21 @@
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.register,
.search-result {
padding: 30px 0;
}
.search-result .sr-result .item-block {
flex: 1 1 100%;
padding: 0 0 15px;
border-bottom: solid 1px #514949;
border-right: 0;
border-top: 0;
margin: 0 0 25px;
}
.search-result p {
font-size: 16px;
}
} }
@media (min-width: 640px) and (max-width: 767px) { @media (min-width: 640px) and (max-width: 767px) {
...@@ -553,6 +583,35 @@ ...@@ -553,6 +583,35 @@
} }
} }
} }
.user-welcome {
top: 0;
}
&.secondary-header {
.hamburger-menu {
display: block;
}
nav.navigation {
right: -100% !important;
&.active {
right: -10px !important;
}
}
nav {
position: absolute;
top: 100%;
background: #2c2020;
padding: 15px 10px;
ul.vertical.menu {
flex-direction: column;
li {
a {
color: #fff;
padding: 5px 0;
}
}
}
}
}
} }
} }
......
src/assets/webfonts/fa-brands-400.svg 0 → 100644
View file @ 2ab12d66
This diff is collapsed.
src/assets/webfonts/fa-regular-400.svg 0 → 100644
View file @ 2ab12d66
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/webfonts/fa-solid-900.svg 0 → 100644
View file @ 2ab12d66
This source diff could not be displayed because it is too large. You can view the blob instead.
src/pages/account-settings.html
View file @ 2ab12d66
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="grid-container"> <div class="grid-container">
<h2>Account Settings </h2> <h2>Account Settings </h2>
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
<div class="large-12 medium-6 cell"> <div class="large-12 medium-12 cell">
<div class="grid-x grid-padding-x form-wrap"> <div class="grid-x grid-padding-x form-wrap">
<div class="large-6 medium-6 cell"> <div class="large-6 medium-6 cell">
<div class=" cell"> <div class=" cell">
......
src/pages/dashboard.html
View file @ 2ab12d66
...@@ -6,19 +6,19 @@ ...@@ -6,19 +6,19 @@
<table class="unstriped vx-table text-center"> <table class="unstriped vx-table text-center">
<thead> <thead>
<tr> <tr>
<th class="red">Credit Point</th>
<th>Balance Credit Points</th> <th colspan="2">Balance Credit Points</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>-</td> <td class="red">Credit Point</td>
<td>0</td> <td>0</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="large-8 medium-6 cell"> <div class="large-8 medium-6 cell table-scroll">
<table class="unstriped vx-table"> <table class="unstriped vx-table">
<thead> <thead>
<tr> <tr>
......
src/pages/make-payment.html
View file @ 2ab12d66
<section class="unf-padding"> <section class="unf-padding settings register payment ">
<form action="" class="form-wrap"> <form action="" class="form-wrap form-adj">
<div class="grid-container"> <div class="grid-container">
<h2 class="padd-adj">Make Payment </h2> <h2 class="padd-adj">Make Payment </h2>
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
<div class="large-5 medium-6 cell"> <div class="large-5 medium-12 cell">
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
<div class="large-12 medium-6 cell"> <div class="large-12 medium-6 cell">
<div class="panel"> <div class="panel">
...@@ -25,14 +25,16 @@ ...@@ -25,14 +25,16 @@
<div class="panel-body"> <div class="panel-body">
<div class="payment-type"> <div class="payment-type">
<div class="radio-wrap"> <div class="radio-wrap">
<input type="radio" name="payment_method" checked> <input class="margin-0" type="radio" name="payment_method" checked>
<span class="checkmark"></span> <label for="" class="checkmark">
<img src="assets/img/card-pay.png" alt=""> <img src="assets/img/card-pay.png" alt="">
</label>
</div> </div>
<div class="radio-wrap"> <div class="radio-wrap">
<input type="radio" name="payment_method"> <input class="margin-0" type="radio" name="payment_method">
<span class="checkmark"></span> <label for="" class="checkmark">
<img src="assets/img/paypal.png" alt=""> <img src="assets/img/paypal.png" alt="">
</label>
</div> </div>
</div> </div>
</div> </div>
...@@ -40,9 +42,131 @@ ...@@ -40,9 +42,131 @@
</div> </div>
</div> </div>
</div> </div>
<div class="large-7 medium-6 cell"></div> <div class="large-7 medium-12 cell">
<div class="panel">
<div class="panel-head">Card Details</div>
<div class="panel-body padding">
<div class="grid-x grid-padding-x">
<div class="large-6 medium-6 cell">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Card Type</label>
</div>
</div>
<div class="large-6 medium-6 cell">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Card Number</label>
</div>
</div> </div>
<div class="large-6 medium-6 cell ">
<div class=" cell">
<input class="margin-0" type="text" placeholder="" required>
<label for="">Card Verification Value(CW/CW2)</label>
</div>
</div>
<div class="large-6 medium-6 cell">
<label for="" class="select-label">Card Expires On</label>
<div class="grid-x grid-padding-x">
<div class="large-6 medium-6 cell">
<div class=" cell">
<select name="" id="">
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
</select>
</div>
</div>
<div class="large-6 medium-6 cell ">
<div class=" cell">
<select name="" id="">
<option value="">2018</option>
<option value="">2019</option>
<option value="">2020</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="large-12 medium-12 cell">
<div class="panel marg-adj">
<div class="panel-head">
Card Details
</div>
<div class="panel-body padding">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 medium-12 cell ">
<div class="checkbox float-right">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Same as Account Address</label>
</div>
</div>
<div class="large-3 medium-3 cell ">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">First Name*</label>
</div>
</div>
<div class="large-3 medium-3 cell ">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Last Name*</label>
</div>
</div>
<div class="large-3 medium-3 cell ">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Address Line1*</label>
</div>
</div>
<div class="large-3 medium-3 cell ">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Address Line2*</label>
</div>
</div>
<div class="large-3 medium-3 cell ">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Organization Name*</label>
</div>
</div>
<div class="large-3 medium-3 cell ">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">City*</label>
</div>
</div>
<div class="large-3 medium-3 cell ">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">State*</label>
</div>
</div>
<div class="large-3 medium-3 cell ">
<div class=" cell">
<input type="text" placeholder="" required="">
<label for="">Zip Code*</label>
</div>
</div>
<div class="large-12 medium-12 cell ">
<a href="" class="button float-right dark-hover">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</form> </form>
</section> </section>
\ No newline at end of file
src/pages/orders.html
View file @ 2ab12d66
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<div class="grid-container"> <div class="grid-container">
<h2 class="padd-adj">Orders </h2> <h2 class="padd-adj">Orders </h2>
<div class="grid-x grid-padding-x "> <div class="grid-x grid-padding-x ">
<div class="large-12 medium-6 cell"> <div class="large-12 medium-12 cell table-scroll">
<table class="unstriped vx-table"> <table class="unstriped vx-table">
<thead> <thead>
<tr> <tr>
...@@ -33,6 +34,7 @@ ...@@ -33,6 +34,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
......
src/pages/register.html
View file @ 2ab12d66
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<h2 class="text-center">Register </h2> <h2 class="text-center">Register </h2>
<span class="sub-text text-center">Choose the most suitable tariff plan for your requirements</span> <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="grid-x grid-padding-x">
<div class="large-3 medium-6 cell"> <div class="large-3 medium-4 cell">
<div class="card price"> <div class="card price">
<div class="card-divider"> <div class="card-divider">
<h4>Change Plan</h4> <h4>Change Plan</h4>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<li data-plan="premium">Premium</li> <li data-plan="premium">Premium</li>
</ul> </ul>
</div> </div>
<div class="plan-detail" id="basic"> <div class="plan-detail" id="basic" style="display:block">
<div class="card-price"> <div class="card-price">
<sup>$</sup>49.99 <sup>$</sup>49.99
</div> </div>
...@@ -33,11 +33,11 @@ ...@@ -33,11 +33,11 @@
</div> </div>
<div class="plan-detail" id="basic-plus"> <div class="plan-detail" id="basic-plus">
<div class="card-price"> <div class="card-price">
<sup>$</sup>49.99 <sup>$</sup>199
</div> </div>
<div class="card-section"> <div class="card-section">
<ul> <ul>
<li>100 Credit Points*</li> <li>500 Credit Points*</li>
<li>Unlimited Exams</li> <li>Unlimited Exams</li>
<li>Unlimited Questions</li> <li>Unlimited Questions</li>
<li>Various Question Types</li> <li>Various Question Types</li>
...@@ -49,11 +49,11 @@ ...@@ -49,11 +49,11 @@
</div> </div>
<div class="plan-detail" id="premium"> <div class="plan-detail" id="premium">
<div class="card-price"> <div class="card-price">
<sup>$</sup>49.99 <sup>$</sup>359
</div> </div>
<div class="card-section"> <div class="card-section">
<ul> <ul>
<li>100 Credit Points*</li> <li>1000 Credit Points*</li>
<li>Unlimited Exams</li> <li>Unlimited Exams</li>
<li>Unlimited Questions</li> <li>Unlimited Questions</li>
<li>Various Question Types</li> <li>Various Question Types</li>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="large-9 medium-6 cell"> <div class="large-9 medium-8 cell">
<div class="grid-x grid-padding-x form-wrap"> <div class="grid-x grid-padding-x form-wrap">
<div class="large-6 medium-6 cell"> <div class="large-6 medium-6 cell">
<div class=" cell"> <div class=" cell">
......
src/partials/header-type-2.html
View file @ 2ab12d66
<header class="type-2"> <header class="secondary-header">
<div class="grid-container fluid"> <div class="grid-container fluid">
<div class="top-block"> <div class="top-block">
<div class="logo"> <div class="logo">
...@@ -17,7 +17,8 @@ ...@@ -17,7 +17,8 @@
<span>Welcome</span> <span>Welcome</span>
<a href="">Alimonkhader</a> <a href="">Alimonkhader</a>
</div> </div>
<div class="hamburger-menu" data-toggle="navigation-slide">
</div>
<nav class="navigation"> <nav class="navigation">
<ul class="vertical menu"> <ul class="vertical menu">
......
src/partials/header.html
View file @ 2ab12d66
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
</div> </div>
<div class="cell"> <div class="cell">
<button class="float-right">Login</button> <button class="float-right">Login</button>
<button class="float-left"> <span class="float-left">
<a href="" class="forgot-password orbit-next"> forgot password?</a></button> <a href="" class="forgot-password orbit-next"> forgot password?</a></span>
</div> </div>
</div> </div>
</form> </form>
...@@ -73,6 +73,7 @@ ...@@ -73,6 +73,7 @@
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="hamburger-menu" data-toggle="navigation-slide"> <div class="hamburger-menu" data-toggle="navigation-slide">
......
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