Skip to content

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

client slider added, navigation issue fixed, forgot password implemented

parent a378e131
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3601 additions and 90 deletions
src/assets/img/client3.png
View replaced file @ a378e131 View file @ f560a109
src/assets/img/client3.png

1.61 KB | W: | H:

src/assets/img/client3.png

7.58 KB | W: | H:

src/assets/img/client3.png
src/assets/img/client3.png
src/assets/img/client3.png
src/assets/img/client3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/js/app.js
View file @ f560a109
...@@ -10,6 +10,7 @@ require('./jquery.waypoints.min.js'); ...@@ -10,6 +10,7 @@ require('./jquery.waypoints.min.js');
require('./jquery.counterup.js'); require('./jquery.counterup.js');
require('./jquery.hoverdir.js'); require('./jquery.hoverdir.js');
require('./SmoothScroll.js'); require('./SmoothScroll.js');
require('./owl.carousel.js');
require('./main.js'); require('./main.js');
// If you want to pick and choose which modules to include, comment out the above and uncomment // If you want to pick and choose which modules to include, comment out the above and uncomment
......
src/assets/js/main.js
View file @ f560a109
...@@ -39,7 +39,6 @@ $(document).ready(function() { ...@@ -39,7 +39,6 @@ $(document).ready(function() {
transition: 'all 0.5s ease' transition: 'all 0.5s ease'
}); });
window.addEventListener("orientationchange", function(e) { window.addEventListener("orientationchange", function(e) {
window.setTimeout(function() { window.setTimeout(function() {
headerHeight = $('header').outerHeight(); headerHeight = $('header').outerHeight();
$('body').css({ $('body').css({
...@@ -57,16 +56,13 @@ $(document).ready(function() { ...@@ -57,16 +56,13 @@ $(document).ready(function() {
speed: 500, speed: 500,
}); });
function mobileMenuAdj() { function mobileMenuAdj() {
$(window).scroll(function() { $(window).scroll(function() {
var scroll = $(window).scrollTop(); var scroll = $(window).scrollTop();
if (scroll >= 300) { if (scroll >= 300) {
$("header").addClass("small"); $("header").addClass("small");
$('.navigation ').css({ $('.navigation ').css({
marginTop: headerHeight - 44 marginTop: $('header').outerHeight()
}); });
} else { } else {
...@@ -94,4 +90,45 @@ $(document).ready(function() { ...@@ -94,4 +90,45 @@ $(document).ready(function() {
delay: 10, delay: 10,
time: 2000 time: 2000
}); });
function scrollTo(parent) {
$(parent).each(function() {
var child = $(this).find('.smooth-scroll');
var secId = child.attr('href');
child.on('click', function() {
$('html,body').animate({
scrollTop: $(secId).offset().top - $('header').outerHeight()
}, 1500);
});
});
};
scrollTo('.overview .cell');
scrollTo('.menu.vertical > li');
$('.client-list').owlCarousel({
loop: true,
margin: 60,
nav: false,
responsive: {
0: {
items: 1,
margin: 0
},
420: {
items: 2,
margin: 10
},
600: {
items: 3,
margin: 20
},
1000: {
items: 4,
margin: 40
},
1200: {
items: 5
}
}
});
}); });
\ No newline at end of file
src/assets/js/owl.carousel.js 0 → 100644
View file @ f560a109
This diff is collapsed.
src/assets/scss/_main.scss
View file @ f560a109
...@@ -32,10 +32,16 @@ ...@@ -32,10 +32,16 @@
&:hover { &:hover {
background-color: #261b1b; background-color: #261b1b;
} }
&:focus {
background-color: #261b1b;
}
&.dark-hover { &.dark-hover {
&:hover { &:hover {
background: #8c0a25; background: #8c0a25;
} }
&:focus {
background-color: #8c0a25;
}
} }
} }
...@@ -227,6 +233,13 @@ ...@@ -227,6 +233,13 @@
} }
button { button {
color: #fff; color: #fff;
&.float-left {
margin: 4px 0 0;
font-size: 11px;
a {
color: #fff;
}
}
} }
} }
} }
...@@ -235,7 +248,11 @@ ...@@ -235,7 +248,11 @@
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
background: $highlight-color; background: $highlight-color;
input { .cell {
position: relative;
}
input,
textarea {
color: #fff; color: #fff;
background: transparent; background: transparent;
border: none; border: none;
...@@ -248,10 +265,33 @@ ...@@ -248,10 +265,33 @@
font-weight: 300; font-weight: 300;
line-height: normal; line-height: normal;
height: 34px; height: 34px;
resize: none;
&:focus { &:focus {
@extend input; @extend input;
} }
} }
label {
transform: translate3d(0, 5px, 0);
position: absolute;
color: #fff;
top: 0;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input {
padding-bottom: 0;
position: relative;
z-index: 9;
&:focus,
&:valid {
~label {
opacity: 0.8;
font-size: 12px;
transform: translate3d(0, -12px, 0);
}
}
}
} }
.hamburger-menu { .hamburger-menu {
...@@ -1053,27 +1093,26 @@ ...@@ -1053,27 +1093,26 @@
.client { .client {
padding: 35px 0; padding: 35px 0;
border-top: solid 1px #f2f2f2; border-top: solid 1px #f2f2f2;
margin: 0 0 1px;
.client-list { .client-list {
ul { .owl-stage,
margin: 0; .owl-item {
display: -webkit-box; display: inline-flex;
display: -ms-flexbox; flex-wrap: wrap;
display: flex; }
list-style: none; .item {
-webkit-box-pack: justify; padding: 10px 17px;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 -30px;
-ms-flex-line-pack: center;
align-content: center;
li {
padding: 5px 0;
display: inline-block;
vertical-align: middle; vertical-align: middle;
border: solid 1px #dedbdb; border: solid 1px #dedbdb;
width: 20%;
margin: 0 30px;
text-align: center; text-align: center;
flex: 1 0 auto;
img {
max-width: 150px;
margin: 0 auto;
filter: grayscale(1);
&:hover {
filter: grayscale(0);
}
} }
} }
} }
...@@ -1101,19 +1140,6 @@ ...@@ -1101,19 +1140,6 @@
@include placeholder { @include placeholder {
font-size: 13px; font-size: 13px;
} }
input {
padding-bottom: 0;
position: relative;
z-index: 9;
&:focus,
&:valid {
~label {
opacity: 0.8;
font-size: 12px;
transform: translate3d(0, -12px, 0);
}
}
}
position: absolute; position: absolute;
left: 50px; left: 50px;
right: 0; right: 0;
...@@ -1130,15 +1156,6 @@ ...@@ -1130,15 +1156,6 @@
background-color: #261b1b; background-color: #261b1b;
} }
} }
.form-wrap label {
transform: translate3d(0, 5px, 0);
position: absolute;
color: #fff;
top: 0;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
} }
.sub-footer { .sub-footer {
......
src/assets/scss/_responsive.scss
View file @ f560a109
...@@ -543,3 +543,10 @@ ...@@ -543,3 +543,10 @@
} }
} }
} }
@media (max-width: 420px) {
.client .client-list .owl-stage,
.client .client-list .owl-item {
justify-content: center;
}
}
\ No newline at end of file
src/assets/scss/app.scss
View file @ f560a109
...@@ -47,5 +47,6 @@ ...@@ -47,5 +47,6 @@
// @include foundation-prototype-classes; // @include foundation-prototype-classes;
@include motion-ui-transitions; @include motion-ui-transitions;
@include motion-ui-animations; @include motion-ui-animations;
@import 'owl.carousel';
@import 'main'; @import 'main';
@import 'responsive'; @import 'responsive';
\ No newline at end of file
src/assets/scss/owl.carousel.scss 0 → 100644
View file @ f560a109
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
/*
* Owl Carousel - Core
*/
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
/* position relative and z-index fix webkit rendering fonts issue */
position: relative;
z-index: 1; }
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
-moz-backface-visibility: hidden;
/* fix firefox animation glitch */ }
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0; }
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.owl-carousel .owl-item img {
display: block;
width: 100%; }
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none; }
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-loaded {
display: block; }
.owl-carousel.owl-loading {
opacity: 0;
display: block; }
.owl-carousel.owl-hidden {
opacity: 0; }
.owl-carousel.owl-refresh .owl-item {
visibility: hidden; }
.owl-carousel.owl-drag .owl-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-grab {
cursor: move;
cursor: grab; }
.owl-carousel.owl-rtl {
direction: rtl; }
.owl-carousel.owl-rtl .owl-item {
float: right; }
/* No Js */
.no-js .owl-carousel {
display: block; }
/*
* Owl Carousel - Animate Plugin
*/
.owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both; }
.owl-carousel .owl-animated-in {
z-index: 0; }
.owl-carousel .owl-animated-out {
z-index: 1; }
.owl-carousel .fadeOut {
animation-name: fadeOut; }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
/*
* Owl Carousel - Auto Height Plugin
*/
.owl-height {
transition: height 500ms ease-in-out; }
/*
* Owl Carousel - Lazy Load Plugin
*/
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 400ms ease; }
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d; }
/*
* Owl Carousel - Video Plugin
*/
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000; }
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url("owl.video.play.png") no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform 100ms ease; }
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none; }
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 400ms ease; }
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%; }
src/pages/index.html
View file @ f560a109
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
<h1>Virtual<span class="red">X</span> Pro is a premium <span class="red">online exam system</span> which enable users to setup and conduct examinations in an efficient manner and provide results instantaneously.</h1> <h1>Virtual<span class="red">X</span> Pro is a premium <span class="red">online exam system</span> which enable users to setup and conduct examinations in an efficient manner and provide results instantaneously.</h1>
<div class="grid-x custom-gutter"> <div class="grid-x custom-gutter">
<div class="cell small-12 medium-6"> <div class="cell small-12 medium-6">
<a href=""> <a href="#demo" class="smooth-scroll">
<div class="overview-column img-overlay"> <div class="overview-column img-overlay">
<img src="assets/img/notes-macbook-study-conference.jpg" alt=""> <img src="assets/img/notes-macbook-study-conference.jpg" alt="">
<span class="hover-cont"> <span class="hover-cont">
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</a> </a>
</div> </div>
<div class="cell small-12 medium-6"> <div class="cell small-12 medium-6">
<a href=""> <a href="#services" class="smooth-scroll">
<div class="overview-column img-overlay"> <div class="overview-column img-overlay">
<img src="assets/img/pexels-photo.jpg" alt=""> <img src="assets/img/pexels-photo.jpg" alt="">
<span class="hover-cont"> <span class="hover-cont">
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
</a> </a>
</div> </div>
<div class="cell small-12 medium-6"> <div class="cell small-12 medium-6">
<a href=""> <a href="#features" class="smooth-scroll">
<div class="overview-column img-overlay"> <div class="overview-column img-overlay">
<img src="assets/img/man-relax-couch-study.jpg" alt=""> <img src="assets/img/man-relax-couch-study.jpg" alt="">
<span class="hover-cont"> <span class="hover-cont">
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
</a> </a>
</div> </div>
<div class="cell small-12 medium-6"> <div class="cell small-12 medium-6">
<a href=""> <a href="#pricing" class="smooth-scroll">
<div class="overview-column img-overlay"> <div class="overview-column img-overlay">
<img src="assets/img/people-woman-coffee-meeting.jpg" alt=""> <img src="assets/img/people-woman-coffee-meeting.jpg" alt="">
<span class="hover-cont"> <span class="hover-cont">
...@@ -470,34 +470,33 @@ ...@@ -470,34 +470,33 @@
<section class="client"> <section class="client">
<div class="grid-container"> <div class="grid-container">
<div class="client-list"> <div class="client-list owl-carousel">
<ul> <div class="item">
<li>
<a href=""> <a href="">
<img src="assets/img/client1.png" alt=""> <img src="assets/img/client1.png" alt="">
</a> </a>
</li> </div>
<li> <div class="item">
<a href=""> <a href="">
<img src="assets/img/client2.png" alt=""> <img src="assets/img/client2.jpg" alt="">
</a> </a>
</li> </div>
<li> <div class="item">
<a href=""> <a href="">
<img src="assets/img/client3.png" alt=""> <img src="assets/img/client3.png" alt="">
</a> </a>
</li> </div>
<li> <div class="item">
<a href=""> <a href="">
<img src="assets/img/client4.png" alt=""> <img src="assets/img/client4.jpg" alt="">
</a> </a>
</li> </div>
<li> <div class="item">
<a href=""> <a href="">
<img src="assets/img/client5.png" alt=""> <img src="assets/img/client5.jpg" alt="">
</a> </a>
</li> </div>
</ul>
</div> </div>
</div> </div>
</section> </section>
...@@ -543,7 +542,7 @@ ...@@ -543,7 +542,7 @@
<label for="">Subject*</label> <label for="">Subject*</label>
</div> </div>
<div class="cell"> <div class="cell">
<input type="text" placeholder="" required> <textarea placeholder="" required></textarea>
<label for="">Message*</label> <label for="">Message*</label>
</div> </div>
<div class="cell"> <div class="cell">
......
src/partials/header.html
View file @ f560a109
...@@ -25,13 +25,17 @@ ...@@ -25,13 +25,17 @@
<form> <form>
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
<div class=" cell"> <div class=" cell">
<input type="text" placeholder="Name"> <input type="text" placeholder="" required>
<label for="">Name*</label>
</div> </div>
<div class="cell"> <div class=" cell">
<input type="password" placeholder="Password"> <input type="password" placeholder="" required>
<label for="">Password*</label>
</div> </div>
<div class="cell"> <div class="cell">
<button class="float-right">Login</button> <button class="float-right">Login</button>
<button class="float-left">
<a href=""> forgot password?</a></button>
</div> </div>
</div> </div>
</form> </form>
...@@ -46,32 +50,32 @@ ...@@ -46,32 +50,32 @@
</div> </div>
<ul class="vertical menu"> <ul class="vertical menu">
<li> <li>
<a href="#home" data-smooth-scroll> <a href="#home" class='smooth-scroll'>
<i class="icon-home-menu"></i> Home <i class="icon-home-menu"></i> Home
</a> </a>
</li> </li>
<li> <li>
<a href="#features" data-smooth-scroll> <a href="#features" class='smooth-scroll'>
<i class="icon-features-menu"></i> Features <i class="icon-features-menu"></i> Features
</a> </a>
</li> </li>
<li> <li>
<a href="#services" data-smooth-scroll> <a href="#services" class='smooth-scroll'>
<i class="icon-services-menu"></i> Services <i class="icon-services-menu"></i> Services
</a> </a>
</li> </li>
<li> <li>
<a href="#pricing" data-smooth-scroll> <a href="#pricing" class='smooth-scroll'>
<i class="icon-pricetag-menu"></i> Pricing <i class="icon-pricetag-menu"></i> Pricing
</a> </a>
</li> </li>
<li> <li>
<a href="#demo" data-smooth-scroll> <a href="#demo" class='smooth-scroll'>
<i class="icon-demo"></i> Demo <i class="icon-demo"></i> Demo
</a> </a>
</li> </li>
<li> <li>
<a href="#contact" data-smooth-scroll> <a href="#contact" class='smooth-scroll'>
<i class="icon-contacts-menu"></i> Contact Us <i class="icon-contacts-menu"></i> Contact Us
</a> </a>
</li> </li>
......
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