deploy new site
This commit is contained in:
andmironov
parent
530fe35fdd
commit
73e611ef82
97
gulpfile.js
97
gulpfile.js
|
|
@ -11,9 +11,15 @@ var gulp = require('gulp'),
|
|||
del = require('del'),
|
||||
cleanCSS = require('gulp-clean-css'),
|
||||
uncss = require('gulp-uncss'),
|
||||
uglify = require('gulp-uglify'),
|
||||
useref = require('gulp-useref'),
|
||||
neat = require('node-neat').includePaths;
|
||||
//more
|
||||
browserify = require('browserify'),
|
||||
source = require('vinyl-source-stream'),
|
||||
buffer = require('vinyl-buffer'),
|
||||
gutil = require('gulp-util'),
|
||||
uglify = require('gulp-uglify'),
|
||||
sourcemaps = require('gulp-sourcemaps'),
|
||||
babel = require('gulp-babel');
|
||||
|
||||
gulp.task('browser-sync', function() {
|
||||
browserSync({
|
||||
|
|
@ -24,32 +30,47 @@ gulp.task('browser-sync', function() {
|
|||
});
|
||||
});
|
||||
|
||||
gulp.task('styles', function() {
|
||||
return gulp.src('src/sass/main.scss')
|
||||
|
||||
gulp.task('styles', function () {
|
||||
return gulp.src('src/scss/main.scss')
|
||||
.pipe(plumber())
|
||||
.pipe(sass({
|
||||
includePaths: ['styles'].concat(neat)
|
||||
}))
|
||||
//.pipe(uncss({ html: '*.html' }))
|
||||
.pipe(autoprefixer({ browsers: ['last 15 versions', '> 1%', 'ie 9'], cascade: true }))
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer({
|
||||
browsers: ['last 3 versions'],
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(gulp.dest('src/css'))
|
||||
.pipe(browserSync.reload({stream: true}));
|
||||
});
|
||||
})
|
||||
|
||||
gulp.task('scripts', function() {
|
||||
return gulp.src([
|
||||
'src/libs/jquery/dist/jquery.min.js',
|
||||
'src/libs/modernizr/modernizr-custom.js',
|
||||
'src/libs/waypoints/waypoints.min.js',
|
||||
'src/libs/swiper/js/swiper.min.js',
|
||||
])
|
||||
.pipe(plumber())
|
||||
.pipe(concat('libs.min.js'))
|
||||
//.pipe(uglify())
|
||||
.pipe(gulp.dest('src/js'));
|
||||
});
|
||||
|
||||
gulp.task('watch', ['styles', 'scripts', 'browser-sync'], function() {
|
||||
gulp.task('js', function () {
|
||||
var b = browserify({
|
||||
entries: 'src/js/main.js',
|
||||
debug: false,
|
||||
})
|
||||
return b.bundle()
|
||||
.pipe(source('app.js'))
|
||||
.pipe(buffer())
|
||||
.pipe(babel({
|
||||
presets: ['es2015']
|
||||
}))
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(uglify())
|
||||
.on('error', gutil.log)
|
||||
.pipe(sourcemaps.write('./'))
|
||||
.pipe(gulp.dest('src/js'))
|
||||
})
|
||||
|
||||
gulp.task('watch', ['styles', 'js', 'browser-sync'], function() {
|
||||
gulp.watch('src/sass/**/*.+(sass|scss)', ['styles']);
|
||||
gulp.watch('src/*.html', browserSync.reload);
|
||||
gulp.watch('src/js/**/*.js', browserSync.reload);
|
||||
|
|
@ -62,12 +83,6 @@ gulp.task('clean', function() {
|
|||
gulp.task('images', function() {
|
||||
return gulp.src('src/img/**/*')
|
||||
.pipe(plumber())
|
||||
// .pipe(imagemin({
|
||||
// interlaced: true,
|
||||
// progressive: true,
|
||||
// svgoPlugins: [{removeViewBox: false}],
|
||||
// use: [pngquant()]
|
||||
// }))
|
||||
.pipe(gulp.dest('build/img'));
|
||||
});
|
||||
|
||||
|
|
@ -81,35 +96,33 @@ gulp.task('dapps', function() {
|
|||
.pipe(gulp.dest('build/dapps'))
|
||||
});
|
||||
|
||||
gulp.task('build', ['clean', 'styles', 'scripts', 'images', 'demo', 'dapps'], function() {
|
||||
gulp.task('build', ['clean', 'styles', 'js', 'images', 'demo', 'dapps'], function() {
|
||||
|
||||
gulp.src([
|
||||
'src/css/main.css'
|
||||
'src/css/main.css'
|
||||
])
|
||||
//.pipe(uncss({ html: '*.html' }))
|
||||
.pipe(cleanCSS({compatibility: 'ie9'}))
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(gulp.dest('build/css'));
|
||||
.pipe(cleanCSS({compatibility: 'ie9'}))
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(gulp.dest('build/css'));
|
||||
|
||||
// gulp.src('src/fonts/**/*')
|
||||
// .pipe(gulp.dest('build/fonts'))
|
||||
|
||||
gulp.src([
|
||||
'src/js/libs.min.js',
|
||||
'src/js/common.js'
|
||||
])
|
||||
.pipe(concat('main.min.js'))
|
||||
.pipe(uglify())
|
||||
.pipe(gulp.dest('build/js'));
|
||||
gulp.src([
|
||||
'src/js/app.js',
|
||||
'src/js/mc-validate.js'
|
||||
])
|
||||
.pipe(uglify())
|
||||
.pipe(concat('app.min.js'))
|
||||
.pipe(gulp.dest('build/js'));
|
||||
|
||||
gulp.src('src/*.html')
|
||||
.pipe(useref({noAssets:true}))
|
||||
.pipe(gulp.dest('build'));
|
||||
.pipe(useref({noAssets:true}))
|
||||
.pipe(gulp.dest('build'));
|
||||
|
||||
gulp.src('src/fonts/**/*')
|
||||
.pipe(gulp.dest('build/fonts'));
|
||||
|
||||
gulp.src('src/*.php')
|
||||
.pipe(useref({noAssets:true}))
|
||||
.pipe(gulp.dest('build'));
|
||||
|
||||
.pipe(useref({noAssets:true}))
|
||||
.pipe(gulp.dest('build'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['watch']);
|
||||
|
|
|
|||
19
package.json
19
package.json
|
|
@ -4,6 +4,7 @@
|
|||
"description": "Project Description",
|
||||
"devDependencies": {
|
||||
"browser-sync": "^2.11.1",
|
||||
|
||||
"del": "^2.2.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.0",
|
||||
|
|
@ -17,12 +18,26 @@
|
|||
"gulp-uglify": "^1.5.3",
|
||||
"gulp-uncss": "^1.0.5",
|
||||
"gulp-useref": "^3.0.8",
|
||||
"imagemin-pngquant": "^4.2.2"
|
||||
"imagemin-pngquant": "^4.2.2",
|
||||
"browserify": "^13.1.1",
|
||||
"gulp-babel": "^6.1.2",
|
||||
"babel-preset-es2015": "^6.14.0",
|
||||
"vinyl-buffer": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0",
|
||||
"gulp-util": "^3.0.7",
|
||||
"gulp-sourcemaps": "^1.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bourbon": "^4.2.7",
|
||||
"bourbon-neat": "^1.7.4",
|
||||
"node-neat": "^1.7.2",
|
||||
"normalize.css": "^4.0.0"
|
||||
"normalize.css": "^4.0.0",
|
||||
"d3-ease": "^1.0.1",
|
||||
"d3-scale": "^1.0.3",
|
||||
"lodash.assign": "^4.2.0",
|
||||
"lodash.clone": "^4.0.1",
|
||||
"lodash.foreach": "^4.0.0",
|
||||
"lodash.isempty": "^4.0.0",
|
||||
"lodash.isequal": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3834
src/css/main.css
3834
src/css/main.css
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 327 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 322 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Artboard</title><circle cx="10" cy="10" r="1" fill="#FFF" fill-rule="evenodd" opacity=".11"/></svg>
|
||||
|
After Width: | Height: | Size: 189 B |
Binary file not shown.
|
After Width: | Height: | Size: 442 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>icon_fb</title><path d="M10.553 11.061h2.055l.309-2.304h-2.364V7.279c0-.669.186-1.125 1.18-1.125H13V4.087A18.16 18.16 0 0 0 11.153 4C9.326 4 8.075 5.072 8.075 7.05v1.707H6v2.304h2.075V17h2.478v-5.939z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 331 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon_sl</title><defs><path id="a" d="M.048 15.992h12.236V.005H.048v15.987z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3.836 2)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M8.537.99a1.425 1.425 0 1 0-2.71.88L9.51 13.206a1.425 1.425 0 0 0 1.733.883c.756-.218 1.217-1.02.976-1.763L8.537.99M2.828 2.845a1.425 1.425 0 0 0-2.71.88l3.684 11.336a1.425 1.425 0 0 0 1.733.883c.757-.218 1.218-1.02.976-1.764L2.828 2.845" fill="#FFF" mask="url(#b)"/></g><path d="M17.01 12.378a1.425 1.425 0 1 0-.88-2.71L4.794 13.352a1.425 1.425 0 0 0-.883 1.733c.218.756 1.02 1.217 1.763.976l11.336-3.683" fill="#FFF"/><path d="M7.157 15.58c.738-.24 1.689-.55 2.709-.88l-.88-2.71-2.71.88.88 2.71m5.709-1.856l2.71-.88c-.24-.738-.55-1.689-.88-2.71l-2.71.88.88 2.71m2.29-7.054a1.425 1.425 0 0 0-.88-2.711L2.939 7.643a1.424 1.424 0 0 0-.883 1.733c.218.757 1.02 1.218 1.764.976L15.155 6.67" fill="#FFF"/><path d="M5.301 9.87l2.71-.88-.88-2.71-2.71.882.88 2.709m5.709-1.855l2.71-.88-.88-2.71-2.71.88.88 2.71" fill="#FFF"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>icon_tw</title><path d="M16.641 4.208a5.144 5.144 0 0 1-1.694.69A2.59 2.59 0 0 0 13 4c-1.473 0-2.667 1.273-2.667 2.844a3 3 0 0 0 .07.648c-2.217-.118-4.183-1.25-5.498-2.971a2.97 2.97 0 0 0-.361 1.43c0 .986.47 1.857 1.186 2.367a2.532 2.532 0 0 1-1.208-.356v.036c0 1.378.92 2.528 2.14 2.789a2.52 2.52 0 0 1-1.205.049c.34 1.13 1.325 1.952 2.492 1.975A5.144 5.144 0 0 1 4 13.989a7.212 7.212 0 0 0 4.088 1.278c4.906 0 7.589-4.334 7.589-8.093 0-.123-.003-.246-.008-.368A5.635 5.635 0 0 0 17 5.334c-.484.23-1 .38-1.532.448.55-.352.974-.91 1.173-1.574z" fill="#FFF" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 674 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 871 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="73" height="73" viewBox="0 0 73 73" xmlns="http://www.w3.org/2000/svg"><title>plus</title><g fill="none" fill-rule="evenodd"><circle fill="#58E498" cx="36.5" cy="36.5" r="36.5"/><path d="M37.472 36.042v-15.06a.971.971 0 1 0-1.944 0v15.06h-15.06a.971.971 0 1 0 0 1.944h15.06v15.06a.971.971 0 1 0 1.944 0v-15.06h15.06a.971.971 0 1 0 0-1.944h-15.06z" fill="#FFF" opacity=".6"/></g></svg>
|
||||
|
After Width: | Height: | Size: 396 B |
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
976
src/index.html
976
src/index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
139
src/js/common.js
139
src/js/common.js
|
|
@ -1,139 +0,0 @@
|
|||
$(function() {
|
||||
|
||||
//SVG Fallback
|
||||
if(!Modernizr.svg) {
|
||||
$("img[src*='svg']").attr("src", function() {
|
||||
return $(this).attr("src").replace(".svg", ".png");
|
||||
});
|
||||
};
|
||||
|
||||
$("img, a").on("dragstart", function(event) { event.preventDefault(); });
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
setTimeout(function() {
|
||||
$(".status-text").addClass("shown");
|
||||
},400);
|
||||
setTimeout(function() {
|
||||
$(".status-email").addClass("shown");
|
||||
},500);
|
||||
setTimeout(function() {
|
||||
$(".phone-primary").addClass("shown");
|
||||
},600);
|
||||
setTimeout(function() {
|
||||
$(".phone-secondary").addClass("shown");
|
||||
},700);
|
||||
setTimeout(function() {
|
||||
$(".main-header").addClass("shown");
|
||||
},1000);
|
||||
|
||||
// $(".email-button").on('click', function(){
|
||||
// $(".email").addClass("shaky");
|
||||
// setTimeout(function() {
|
||||
// $(".email").removeClass("shaky");
|
||||
// },800);
|
||||
// });
|
||||
|
||||
$(".mc-field-group input").on('focus', function() {
|
||||
$(".email").addClass("focused");
|
||||
setTimeout(function() {
|
||||
$(".email").removeClass("focused");
|
||||
}, 400);
|
||||
});
|
||||
|
||||
$('.block').waypoint(function() {
|
||||
$('.block-blue').addClass('shown');
|
||||
setTimeout(function() {
|
||||
$(".block-purple").addClass("shown");
|
||||
},100);
|
||||
setTimeout(function() {
|
||||
$(".block-green").addClass("shown");
|
||||
},100);
|
||||
setTimeout(function() {
|
||||
$(".block-peach").addClass("shown");
|
||||
},200);
|
||||
}, { offset: '50%' });
|
||||
|
||||
$('.block-white').waypoint(function() {
|
||||
$('.block-white').addClass('shown');
|
||||
}, { offset: '100%' });
|
||||
|
||||
$('.tags').waypoint(function() {
|
||||
$('.tag-status').addClass('shown');
|
||||
setTimeout(function() {
|
||||
$(".tag-transaction").addClass("shown");
|
||||
},100);
|
||||
setTimeout(function() {
|
||||
$(".tag-name").addClass("shown");
|
||||
},200);
|
||||
setTimeout(function() {
|
||||
$(".tag-password").addClass("shown");
|
||||
},300);
|
||||
setTimeout(function() {
|
||||
$(".tag-location").addClass("shown");
|
||||
},400);
|
||||
}, { offset: '90%' });
|
||||
|
||||
$('.block-square').waypoint(function() {
|
||||
$('.block-square').addClass('shown');
|
||||
}, { offset: '90%' });
|
||||
|
||||
$('.gradient-text').waypoint(function() {
|
||||
$('.gradient-text').addClass('shown');
|
||||
setTimeout(function() {
|
||||
$(".gradient-email").addClass("shown");
|
||||
},100);
|
||||
}, { offset: '90%' });
|
||||
|
||||
// Swiper
|
||||
|
||||
var swiper1 = new Swiper('.swiper1', {
|
||||
loop: true,
|
||||
autoplay: 2000,
|
||||
effect: 'fade',
|
||||
spaceBetween: 30,
|
||||
fade: {
|
||||
crossFade: true
|
||||
}
|
||||
});
|
||||
var swiper2 = new Swiper('.swiper2', {
|
||||
loop: true,
|
||||
autoplay: 2000,
|
||||
effect: 'slide',
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Smooth scroll to top and input focus
|
||||
|
||||
$(".gradient-button").click(function() {
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, 1000);
|
||||
setTimeout(function(){
|
||||
$('#maitre-field-email input').focus();
|
||||
$('.mc-field-group input').focus();
|
||||
},1000);
|
||||
});
|
||||
var shareLinkInput = $("#shareLinkInput");
|
||||
|
||||
shareLinkInput.click(function(test) {
|
||||
shareLinkInput.focus();
|
||||
shareLinkInput[0].setSelectionRange(0, shareLinkInput.val().length);
|
||||
try {
|
||||
succeeded = document.execCommand('copy');
|
||||
} catch (err) {
|
||||
succeeded = false;
|
||||
}
|
||||
if (succeeded) {
|
||||
var text = shareLinkInput.val();
|
||||
var copytext = 'Copied to clipboard';
|
||||
shareLinkInput.val(copytext);
|
||||
setTimeout(function() {
|
||||
shareLinkInput.val(text);
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
|
||||
|
||||
/**
|
||||
* Handles debouncing of events via requestAnimationFrame
|
||||
* @see http://www.html5rocks.com/en/tutorials/speed/animations/
|
||||
* @param {Function} callback The callback to handle whichever event
|
||||
*/
|
||||
function Debouncer (callback) {
|
||||
this.callback = callback;
|
||||
this.ticking = false;
|
||||
}
|
||||
Debouncer.prototype = {
|
||||
constructor : Debouncer,
|
||||
|
||||
/**
|
||||
* dispatches the event to the supplied callback
|
||||
* @private
|
||||
*/
|
||||
update : function() {
|
||||
this.callback && this.callback();
|
||||
this.ticking = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* ensures events don't get stacked
|
||||
* @private
|
||||
*/
|
||||
requestTick : function() {
|
||||
if(!this.ticking) {
|
||||
requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
|
||||
this.ticking = true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Attach this as the event listeners
|
||||
*/
|
||||
handleEvent : function() {
|
||||
this.requestTick();
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Debouncer
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
let isEqual = require('lodash.isequal'),
|
||||
forEach = require('lodash.foreach'),
|
||||
isEmpty = require('lodash.isempty'),
|
||||
cloneObject = require('lodash.clone'),
|
||||
extendObject = require('lodash.assign'),
|
||||
debouncer = require("./Debouncer")
|
||||
|
||||
function Scrllr(options) {
|
||||
options = extendObject(Scrllr.options, options)
|
||||
|
||||
this.lastKnownScrollY = 0
|
||||
this.initialised = false
|
||||
this.onScrollCallback = options.onScrollCallback
|
||||
}
|
||||
|
||||
Scrllr.prototype = {
|
||||
constructor : Scrllr,
|
||||
|
||||
init : function() {
|
||||
this.debouncer = new debouncer(this.update.bind(this))
|
||||
|
||||
// defer event registration to handle browser
|
||||
// potentially restoring previous scroll position
|
||||
setTimeout(this.attachEvent.bind(this), 100)
|
||||
|
||||
return this
|
||||
},
|
||||
|
||||
attachEvent : function() {
|
||||
if(!this.initialised) {
|
||||
this.lastKnownScrollY = this.getScrollY()
|
||||
this.initialised = true
|
||||
|
||||
window.addEventListener('scroll', this.debouncer, false)
|
||||
this.debouncer.handleEvent()
|
||||
}
|
||||
},
|
||||
|
||||
getScrollY : function() {
|
||||
return (window.pageYOffset !== undefined)
|
||||
? window.pageYOffset
|
||||
: (window.scrollTop !== undefined)
|
||||
? window.scrollTop
|
||||
: (document.documentElement || document.body.parentNode || document.body).scrollTop
|
||||
},
|
||||
|
||||
update : function() {
|
||||
let currentScrollY = this.getScrollY(),
|
||||
scrollDirection = currentScrollY > this.lastKnownScrollY ? 'down' : 'up'
|
||||
|
||||
this.onScrollCallback(currentScrollY)
|
||||
this.lastKnownScrollY = currentScrollY
|
||||
},
|
||||
|
||||
destroy : function() {
|
||||
this.initialised = false
|
||||
window.removeEventListener('scroll', this.debouncer, false)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Scrllr.options = {
|
||||
onScrollCallback: function(){}
|
||||
}
|
||||
|
||||
module.exports = Scrllr
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
let Scrllr = require("./Scrllr.js"),
|
||||
Scale = require("d3-scale"),
|
||||
Interpolator = require("d3-interpolate"),
|
||||
Ease = require("d3-ease")
|
||||
|
||||
function ScrollOver(options) {
|
||||
options = extend(options, ScrollOver.options)
|
||||
this.PROPERTIES = ['translateX', 'translateY', 'opacity', 'scale']
|
||||
this.keyframes = options.keyframes
|
||||
}
|
||||
|
||||
ScrollOver.prototype = {
|
||||
constructor : ScrollOver,
|
||||
|
||||
init : function() {
|
||||
|
||||
new Scrllr({onScrollCallback:update.bind(this)}).init()
|
||||
|
||||
this.toAnimate = this.keyframes.filter((item) => {return item.animate})
|
||||
this.toReveal = this.keyframes.filter((item) => {return item.reveal})
|
||||
|
||||
this.toAnimate.forEach((keyframe) => {
|
||||
if(keyframe) keyframe.animate.forEach((property) => { property.scale = this.createScale(property.property, keyframe.domain, property.range) })
|
||||
})
|
||||
|
||||
function update(scrollY) {
|
||||
this.toAnimate.forEach((keyframe) => {
|
||||
if(keyframe) this.updateCSSValues(keyframe.element, this.calculatePropertyValues(keyframe.animate, scrollY))
|
||||
})
|
||||
|
||||
this.toReveal.forEach((keyframe) => {
|
||||
if(keyframe) {
|
||||
if(scrollY >= keyframe.reveal.when) this.updateCSSClass(keyframe.element, keyframe.reveal.className)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return this
|
||||
},
|
||||
|
||||
calculatePropertyValues: function(animations, scrollY) {
|
||||
let CSSValues = new Object()
|
||||
|
||||
this.PROPERTIES.forEach((propertyName) => {
|
||||
CSSValues[propertyName] = this.getDefaultPropertyValue(propertyName)
|
||||
animations.forEach((animation) => {
|
||||
if (animation.property == propertyName) CSSValues[propertyName] = this.scaleValue(animation.scale, scrollY)
|
||||
})
|
||||
})
|
||||
|
||||
return CSSValues
|
||||
},
|
||||
|
||||
scaleValue: function(scale, scrollY) {
|
||||
return scale(scrollY)
|
||||
},
|
||||
|
||||
updateCSSValues: function(element, CSS) {
|
||||
element.style.transform = 'translate3d(' + CSS.translateX +'px, ' + CSS.translateY + 'px, 0) scale('+ CSS.scale +')'
|
||||
element.style.opacity = CSS.opacity
|
||||
|
||||
return element
|
||||
},
|
||||
|
||||
updateCSSClass: function(element, className) {
|
||||
(element.classList) ? element.classList.add(className) : element.className += ' ' + className
|
||||
|
||||
return element
|
||||
},
|
||||
|
||||
getDefaultPropertyValue: function(propertyName) {
|
||||
switch (propertyName) {
|
||||
case 'translateX':
|
||||
return 0
|
||||
case 'translateY':
|
||||
return 0
|
||||
case 'scale':
|
||||
return 1
|
||||
case 'rotate':
|
||||
return 0
|
||||
case 'opacity':
|
||||
return 1
|
||||
default:
|
||||
return null
|
||||
}
|
||||
},
|
||||
|
||||
createScale: function(propertyName, domain, range) {
|
||||
switch (propertyName) {
|
||||
case 'translateX':
|
||||
case 'translateY':
|
||||
case 'scale':
|
||||
case 'opacity':
|
||||
return Scale.scaleLinear().domain(domain).range(range).interpolate(this.easeInterpolate(Ease.easeCubicOut)).clamp(true)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
},
|
||||
|
||||
easeInterpolate: function(ease) {
|
||||
return function(a, b) {
|
||||
var i = Interpolator.interpolate(a, b)
|
||||
return function(t) {
|
||||
return (Math.round(i(ease(t)) * 100) / 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ScrollOver.options = {
|
||||
keyframes : {}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function for extending objects
|
||||
*/
|
||||
function extend (object /*, objectN ... */) {
|
||||
if(arguments.length <= 0) {
|
||||
throw new Error('Missing arguments in extend function');
|
||||
}
|
||||
|
||||
var result = object || {},
|
||||
key,
|
||||
i;
|
||||
|
||||
for (i = 1; i < arguments.length; i++) {
|
||||
var replacement = arguments[i] || {};
|
||||
|
||||
for (key in replacement) {
|
||||
// Recurse into object except if the object is a DOM element
|
||||
if(typeof result[key] === 'object' && ! isDOMElement(result[key])) {
|
||||
result[key] = extend(result[key], replacement[key]);
|
||||
}
|
||||
else {
|
||||
result[key] = result[key] || replacement[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if object is part of the DOM
|
||||
* @constructor
|
||||
* @param {Object} obj element to check
|
||||
*/
|
||||
function isDOMElement(obj) {
|
||||
return obj && typeof window !== 'undefined' && (obj === window || obj.nodeType);
|
||||
}
|
||||
|
||||
module.exports = ScrollOver
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
// AnimateScroll.js
|
||||
// Sunmock Yang Nov. 2015
|
||||
|
||||
function animateScroll(target, duration, easing, padding, align, onFinish) {
|
||||
padding = padding ? padding : 0;
|
||||
var docElem = document.documentElement; // to facilitate minification better
|
||||
var windowHeight = docElem.clientHeight;
|
||||
var maxScroll = ( 'scrollMaxY' in window ) ? window.scrollMaxY : (docElem.scrollHeight - windowHeight);
|
||||
var currentY = window.pageYOffset;
|
||||
|
||||
var targetY = currentY;
|
||||
var elementBounds = isNaN(target) ? target.getBoundingClientRect() : 0;
|
||||
|
||||
if (align === "center") {
|
||||
targetY += isNaN(target) ? (elementBounds.top + elementBounds.height/2) : target;
|
||||
targetY -= windowHeight / 2;
|
||||
targetY -= padding
|
||||
}
|
||||
else if (align === "bottom") {
|
||||
targetY += elementBounds.bottom || target;
|
||||
targetY -= windowHeight;
|
||||
targetY += padding
|
||||
}
|
||||
else { // top, undefined
|
||||
targetY += elementBounds.top || target;
|
||||
targetY -= padding
|
||||
}
|
||||
targetY = Math.max(Math.min(maxScroll, targetY), 0);
|
||||
|
||||
var deltaY = targetY - currentY;
|
||||
|
||||
var obj = {
|
||||
targetY: targetY,
|
||||
deltaY: deltaY,
|
||||
duration: (duration) ? duration : 0,
|
||||
easing: (easing in animateScroll.Easing) ? animateScroll.Easing[easing] : animateScroll.Easing.linear,
|
||||
onFinish: onFinish,
|
||||
startTime: Date.now(),
|
||||
lastY: currentY,
|
||||
step: animateScroll.step,
|
||||
};
|
||||
|
||||
window.requestAnimationFrame(obj.step.bind(obj));
|
||||
}
|
||||
|
||||
// Taken from gre/easing.js
|
||||
// https://gist.github.com/gre/1650294
|
||||
animateScroll.Easing = {
|
||||
linear: function (t) { return t },
|
||||
easeInQuad: function (t) { return t*t },
|
||||
easeOutQuad: function (t) { return t*(2-t) },
|
||||
easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
|
||||
easeInCubic: function (t) { return t*t*t },
|
||||
easeOutCubic: function (t) { return (--t)*t*t+1 },
|
||||
easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
|
||||
easeInQuart: function (t) { return t*t*t*t },
|
||||
easeOutQuart: function (t) { return 1-(--t)*t*t*t },
|
||||
easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
|
||||
easeInQuint: function (t) { return t*t*t*t*t },
|
||||
easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
|
||||
easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
|
||||
};
|
||||
|
||||
animateScroll.step = function () {
|
||||
if (this.lastY !== window.pageYOffset && this.onFinish) {
|
||||
this.onFinish();
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate how much time has passed
|
||||
var t = Math.min((Date.now() - this.startTime) / this.duration, 1);
|
||||
|
||||
// Scroll window amount determined by easing
|
||||
var y = this.targetY - ((1 - this.easing(t)) * (this.deltaY));
|
||||
window.scrollTo(window.scrollX, y);
|
||||
|
||||
// Continue animation as long as duration hasn't surpassed
|
||||
if (t !== 1) {
|
||||
this.lastY = window.pageYOffset;
|
||||
window.requestAnimationFrame(this.step.bind(this));
|
||||
} else {
|
||||
if (this.onFinish) this.onFinish();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = animateScroll
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,87 @@
|
|||
let ScrollOver = require("./lib/ScrollOver.js")
|
||||
let animateScroll = require("./lib/animateScroll.js")
|
||||
|
||||
let body = document.querySelectorAll("body")[0]
|
||||
let tagline = document.querySelectorAll(".tagline")[0]
|
||||
|
||||
let iphone = document.querySelectorAll(".phone-wrap--iphone")[0],
|
||||
android = document.querySelectorAll(".phone-wrap--android")[0],
|
||||
features = document.querySelectorAll(".features-wrap")[0],
|
||||
slideTwo = document.querySelectorAll(".slide--two")[0],
|
||||
slideThree = document.querySelectorAll(".slide--three")[0]
|
||||
|
||||
setTimeout(() => body.classList.add("shown"), 400)
|
||||
|
||||
|
||||
document.querySelectorAll(".more-button")[0].addEventListener('click', function(event){
|
||||
animateScroll(slideTwo, 600, "easeInOutCubic", 0)
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
document.querySelectorAll(".nav__item--features")[0].addEventListener('click', function(event){
|
||||
animateScroll(slideTwo, 600, "easeInOutCubic", 0)
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
document.querySelectorAll(".nav__item--about")[0].addEventListener('click', function(event){
|
||||
animateScroll(slideThree, 600, "easeInOutCubic", 0)
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
document.querySelectorAll(".button--scroll-top")[0].addEventListener('click', function(event){
|
||||
animateScroll(body, 1000, "easeInOutCubic", 0)
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
|
||||
new ScrollOver({
|
||||
keyframes : [
|
||||
{
|
||||
element : iphone,
|
||||
domain : [0, 800],
|
||||
animate: [
|
||||
{
|
||||
property : "translateY",
|
||||
range : [0, 60]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
element : android,
|
||||
domain : [0, 800],
|
||||
animate: [
|
||||
{
|
||||
property : "translateY",
|
||||
range : [0, 110]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
element : features,
|
||||
domain : [200, 800],
|
||||
animate: [
|
||||
{
|
||||
property : "translateY",
|
||||
range : [0, -40]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
element : slideTwo,
|
||||
reveal:
|
||||
{
|
||||
when : 700,
|
||||
className: "slide--shown"
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
element : slideThree,
|
||||
reveal:
|
||||
{
|
||||
when : 1400,
|
||||
className: "slide--shown"
|
||||
}
|
||||
}
|
||||
]
|
||||
}).init()
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
/* Put All Fonts Here */
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "bourbon";
|
||||
@import "neat-helpers";
|
||||
|
||||
$max-width: 1440px;
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
/*========== Desktop First Method ========== */
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
.table-center {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-left, .table-right {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.phone-header {
|
||||
top: 65px;
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
.phone-even {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-table {
|
||||
height: 43vh;
|
||||
}
|
||||
|
||||
.table-one-third {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-two-third {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-slider {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.white-blocks {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-section-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mobile-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
display: block;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
top: 55%;
|
||||
width: 20px;
|
||||
height: 30px;
|
||||
background-size: 20px 30px;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 20px;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.main-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
left: 45%;
|
||||
}
|
||||
|
||||
.logo-shadow {
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.footer-half {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-half:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-logo-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section-heading-odd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.tags {
|
||||
left: -10px;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
#maitre-content {
|
||||
padding: 15px;
|
||||
width: 360px;
|
||||
h4[data-maitre-people-ahead-number] {
|
||||
top: 50%;
|
||||
left: 17%;
|
||||
font-size: 2em;
|
||||
}
|
||||
p[data-maitre-people-ahead-text] {
|
||||
top: 60%;
|
||||
left: 7%;
|
||||
font-size: 1em;
|
||||
}
|
||||
h4[data-maitre-people-behind-number] {
|
||||
top: 50%;
|
||||
left: 66%;
|
||||
font-size: 2em;
|
||||
}
|
||||
p[data-maitre-people-behind-text] {
|
||||
top: 60%;
|
||||
left: 57%;
|
||||
font-size: 1em;
|
||||
}
|
||||
div[data-maitre-share-container] {
|
||||
padding-top: 70px;
|
||||
}
|
||||
}
|
||||
.section-heading-even, .section-heading-odd > p, .section-gradient-text {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom, iPhone Retina */
|
||||
|
||||
@media only screen and (max-width: 320px) {
|
||||
.mobile-block {
|
||||
padding: 30px;
|
||||
width: 320px;
|
||||
}
|
||||
.status-email, .status-text {
|
||||
width: 320px;
|
||||
> h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
> p {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
.mobile-slider {
|
||||
width: 320px;
|
||||
}
|
||||
.section-heading-even, .section-heading-odd {
|
||||
width: 320px;
|
||||
> h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
> p {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
left: -35px;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
.gradient-email, .gradient-text {
|
||||
width: 320px;
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.section-gradient .section-gradient-text {
|
||||
width: 320px;
|
||||
p {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
#maitre-content {
|
||||
padding: 15px;
|
||||
width: 320px;
|
||||
}
|
||||
#maitre-share-container #maitre-share-plain-url {
|
||||
width: 280px;
|
||||
}
|
||||
#mc-embedded-subscribe-form .new-input {
|
||||
margin-left: 5px;
|
||||
padding: 15px;
|
||||
}
|
||||
#mc-embedded-subscribe-form .new-button {
|
||||
right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/*========== Mobile First Method ========== */
|
||||
|
||||
/* Custom, iPhone Retina */
|
||||
|
||||
@media only screen and (min-width: 320px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
|
||||
@media only screen and (min-width: 480px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.block {
|
||||
padding: 30px;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
/* */
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* Put All Variables Here */
|
||||
1526
src/sass/index.scss
1526
src/sass/index.scss
File diff suppressed because it is too large
Load Diff
|
|
@ -1,127 +0,0 @@
|
|||
/* Import SASS Files */
|
||||
@import "bourbon";
|
||||
@import "grid-settings";
|
||||
@import "neat";
|
||||
@import "vars";
|
||||
@import "fonts";
|
||||
@import "index";
|
||||
|
||||
|
||||
/* Import Libs SASS/CSS */
|
||||
|
||||
@import "../libs/swiper/css/swiper.min";
|
||||
|
||||
/* General Project Styles */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 320px;
|
||||
background-color: #eef2f5;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.6;
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hr-clear {
|
||||
clear: both;
|
||||
padding: 15px 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.no-borders {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mobile-slider {
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
width: 360px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
*::-webkit-input-placeholder {
|
||||
color: #808591;
|
||||
font-size: 14px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
*:-moz-placeholder {
|
||||
color: #808591;
|
||||
font-size: 14px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
*::-moz-placeholder {
|
||||
color: #808591;
|
||||
font-size: 14px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
*:-ms-input-placeholder {
|
||||
color: #808591;
|
||||
font-size: 14px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
body input:focus:required:invalid, body textarea:focus:required:invalid {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
body input:required:valid, body textarea:required:valid {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background: #b574f0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Custom Styles Here */
|
||||
|
||||
/* ALWAYS END */
|
||||
@import "media";
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
$colorBg: rgba(238, 242, 245, 1);
|
||||
|
||||
$colorWhite: rgba(255, 255, 255, 1);
|
||||
$colorDark: rgba(73, 85, 95, 1);
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
@import "reset";
|
||||
@import "formReset";
|
||||
@import "colors";
|
||||
@import "fonts";
|
||||
|
||||
body {
|
||||
background-color: $colorBg;
|
||||
font-family: 'PostGrotesk-Book', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
color: $colorDark;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: $colorDark;
|
||||
text-decoration: none;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
height: 44px;
|
||||
line-height: 43px;
|
||||
padding: 0 20px;
|
||||
|
||||
font-family: PostGrotesk-Medium;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
|
||||
color: $colorWhite;
|
||||
background-color: rgba(104, 192, 248, 1);
|
||||
box-shadow: 0 8px 14px 0 #DEE2E5;
|
||||
border-radius: 8px;
|
||||
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
transition: transform .1s ease, box-shadow .2s ease, background-color .2s ease;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: translate3d(0, 0, 0) scale(.99);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: rgba(132, 207, 255, 1);
|
||||
}
|
||||
|
||||
.button.button--disabled {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
cursor: default;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@font-face {
|
||||
font-family:PostGrotesk-Medium;
|
||||
src:url(../fonts/PostGrotesk-Medium.eot);
|
||||
src:url(../fonts/PostGrotesk-Medium.eot?#iefix) format('embedded-opentype'), url(../fonts/PostGrotesk-Medium.woff)format('woff'), url(../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium)format('svg');
|
||||
font-weight:400;
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:PostGrotesk-Book;
|
||||
src:url(../fonts/PostGrotesk-Book.eot);
|
||||
src:url(../fonts/PostGrotesk-Book.eot?#iefix) format('embedded-opentype'), url(../fonts/PostGrotesk-Book.woff)format('woff'), url(../fonts/PostGrotesk-Book.svg#PostGrotesk-Book)format('svg');
|
||||
font-weight:400;
|
||||
font-style:normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.footer {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items:center;
|
||||
|
||||
flex-direction: column;
|
||||
padding: 0 0 60px 0;
|
||||
}
|
||||
|
||||
.address {
|
||||
width: 160px;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.footer .social-links {
|
||||
margin: 0 0 20px 0
|
||||
}
|
||||
|
||||
.social-link.social-link--inversed a{
|
||||
box-shadow: 0px 4px 6px 0px rgba(189,208,223,0.12);
|
||||
}
|
||||
|
||||
.social-link.social-link--fb.social-link--inversed a{
|
||||
background-image: url(../img/new-site/icon_fb.svg);
|
||||
background-color: #6081CB
|
||||
}
|
||||
|
||||
.social-link.social-link--tw.social-link--inversed a{
|
||||
background-image: url(../img/new-site/icon_tw.svg);
|
||||
background-color: #6DBDFB
|
||||
}
|
||||
|
||||
.social-link.social-link--sl.social-link--inversed a{
|
||||
background-image: url(../img/new-site/icon_sl.svg);
|
||||
background-color: #E3306D
|
||||
}
|
||||
|
||||
.footer .social-links li.social-link {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.address {
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 60px 0 60px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
/* ----------------------------------------------------------------------------------------------------
|
||||
|
||||
Super Form Reset
|
||||
|
||||
A couple of things to watch out for:
|
||||
|
||||
- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
|
||||
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
|
||||
- You NEED to set the font-size and family on all form elements
|
||||
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
|
||||
- You can style the upload button in webkit using ::-webkit-file-upload-button
|
||||
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
|
||||
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
|
||||
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs
|
||||
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
button,
|
||||
textarea
|
||||
{
|
||||
margin:0;
|
||||
border:0;
|
||||
padding:0;
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
white-space:normal;
|
||||
background:none;
|
||||
line-height:1;
|
||||
|
||||
/* Browsers have different default form fonts */
|
||||
font-size:13px;
|
||||
font-family:Arial;
|
||||
}
|
||||
|
||||
/* Remove the stupid outer glow in Webkit */
|
||||
input:focus
|
||||
{
|
||||
outline:0;
|
||||
}
|
||||
|
||||
/* Box Sizing Reset
|
||||
-----------------------------------------------*/
|
||||
|
||||
/* All of our custom controls should be what we expect them to be */
|
||||
input,
|
||||
textarea
|
||||
{
|
||||
-webkit-box-sizing:content-box;
|
||||
-moz-box-sizing:content-box;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
|
||||
/* These elements are usually rendered a certain way by the browser */
|
||||
button,
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=checkbox],
|
||||
input[type=radio],
|
||||
select
|
||||
{
|
||||
-webkit-box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
/* Text Inputs
|
||||
-----------------------------------------------*/
|
||||
|
||||
input[type=date],
|
||||
input[type=datetime],
|
||||
input[type=datetime-local],
|
||||
input[type=email],
|
||||
input[type=month],
|
||||
input[type=number],
|
||||
input[type=password],
|
||||
input[type=range],
|
||||
input[type=search],
|
||||
input[type=tel],
|
||||
input[type=text],
|
||||
input[type=time],
|
||||
input[type=url],
|
||||
input[type=week]
|
||||
{
|
||||
}
|
||||
|
||||
/* Button Controls
|
||||
-----------------------------------------------*/
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio]
|
||||
{
|
||||
width:13px;
|
||||
height:13px;
|
||||
}
|
||||
|
||||
/* File Uploads
|
||||
-----------------------------------------------*/
|
||||
|
||||
input[type=file]
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
/* Search Input
|
||||
-----------------------------------------------*/
|
||||
|
||||
/* Make webkit render the search input like a normal text field */
|
||||
input[type=search]
|
||||
{
|
||||
-webkit-appearance:textfield;
|
||||
-webkit-box-sizing:content-box;
|
||||
}
|
||||
|
||||
/* Turn off the recent search for webkit. It adds about 15px padding on the left */
|
||||
::-webkit-search-decoration
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Buttons
|
||||
-----------------------------------------------*/
|
||||
|
||||
button,
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
input[type="submit"]
|
||||
{
|
||||
/* Fix IE7 display bug */
|
||||
overflow:visible;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
/* IE8 and FF freak out if this rule is within another selector */
|
||||
::-webkit-file-upload-button
|
||||
{
|
||||
padding:0;
|
||||
border:0;
|
||||
background:none;
|
||||
}
|
||||
|
||||
/* Textarea
|
||||
-----------------------------------------------*/
|
||||
|
||||
textarea
|
||||
{
|
||||
/* Move the label to the top */
|
||||
vertical-align:top;
|
||||
|
||||
/* Turn off scroll bars in IE unless needed */
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
/* Selects
|
||||
-----------------------------------------------*/
|
||||
|
||||
select
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
select[multiple]
|
||||
{
|
||||
/* Move the label to the top */
|
||||
vertical-align:top;
|
||||
}
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
.header {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
z-index: 900;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.header__inner {
|
||||
width: 1012px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
a.logo {
|
||||
display: flex;
|
||||
width: 260px;
|
||||
flex-wrap: nowrap; //default
|
||||
justify-content: flex-start; //default
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.logo__icon {
|
||||
height: 58px;
|
||||
width: 58px;
|
||||
background-image: url(../img/new-site/logo3.png);
|
||||
background-size: 58px;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
.logo_text {
|
||||
margin: 2px 0 0 8px;
|
||||
}
|
||||
|
||||
.logo__title {
|
||||
display: block;
|
||||
font-family:PostGrotesk-Medium;
|
||||
font-size: 22px;
|
||||
line-height: 25px;
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
.logo__description {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
color: $colorWhite;
|
||||
opacity: .5
|
||||
}
|
||||
|
||||
.nav a {
|
||||
font-family:PostGrotesk-Medium;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px 15px;
|
||||
}
|
||||
|
||||
.header .nav a {
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
.header .nav a.nav__item--blog::before {
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(../img/new-site/icon_external.png);
|
||||
background-size: 16px;
|
||||
opacity: 0;
|
||||
transform: translate3d(5px, 0, 0) rotate(5deg);
|
||||
margin: 0 10px 0 0;
|
||||
transition: transform .2s ease, opacity .2s ease;
|
||||
}
|
||||
|
||||
.header .nav a.nav__item--blog:hover::before {
|
||||
transform: translate3d(0, 0, 0) rotate(0deg);
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.shares {
|
||||
width: 260px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.shares .social-links {
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
.social-links li.social-link {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
li.social-link a {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #3F4A97;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px;
|
||||
background-position: center;
|
||||
transition: transform .2s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 10px 0 rgba(62,76,167,0.25);
|
||||
}
|
||||
|
||||
.social-link.social-link--fb a {
|
||||
background-color: #4675DF;
|
||||
background-image: url(../img/new-site/icon_fb.svg);
|
||||
}
|
||||
|
||||
.social-link.social-link--tw a {
|
||||
background-color: #4DB9FE;
|
||||
background-image: url(../img/new-site/icon_tw.svg);
|
||||
}
|
||||
|
||||
.social-link.social-link--sl a {
|
||||
background-color: #E3306D;
|
||||
background-image: url(../img/new-site/icon_sl.svg);
|
||||
}
|
||||
|
||||
.social-link:hover a {
|
||||
transform: scale(1.06)
|
||||
}
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
|
||||
.header {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header__inner {
|
||||
width: 100%;
|
||||
margin: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.logo,
|
||||
.shares {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.header__inner {
|
||||
margin: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.header__inner {
|
||||
margin: 20px 20px 20px 17px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.logo__icon {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background-size: 48px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.logo__title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.logo__description {
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.logo__description span{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo_text {
|
||||
margin: 0px 0 0 4px;
|
||||
}
|
||||
|
||||
.shares .social-links li.social-link {
|
||||
margin: 0 0 0 7px;
|
||||
}
|
||||
|
||||
.header .social-link.social-link--fb {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@import "common";
|
||||
|
||||
@import "header";
|
||||
|
||||
@import "phones";
|
||||
@import "popup";
|
||||
|
||||
@import "slides";
|
||||
@import "slide--one";
|
||||
@import "slide--two";
|
||||
@import "slide--three";
|
||||
@import "slide--four";
|
||||
|
||||
@import "footer";
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
.the-iphone {
|
||||
position: relative;
|
||||
width: 292px;
|
||||
height: 610px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 11px 15px 39px 0 rgba(31,35,61,0.2), 0 2px 4px 0 rgba(88,100,177,0.01), inset 0 0 4px 4px rgba(223, 225, 236, 1);
|
||||
border-radius: 40px;
|
||||
z-index: 600;
|
||||
}
|
||||
|
||||
.the-iphone-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 22px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
border-radius: 50%;
|
||||
|
||||
opacity: 0.5;
|
||||
background: #DAE1EA;
|
||||
box-shadow: inset 0 1px 2px 0 #B3B8D0;
|
||||
}
|
||||
|
||||
.the-iphone-line {
|
||||
width: 44px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 36px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
border-radius: 5px;
|
||||
|
||||
opacity: 0.5;
|
||||
background: #DAE1EA;
|
||||
box-shadow: inset 0 1px 2px 0 #B3B8D0;
|
||||
}
|
||||
|
||||
.the-iphone-screen {
|
||||
width: 270px;
|
||||
height: 479px;
|
||||
border: 1px solid #E7E9F0;
|
||||
background-color: #F3F4F8;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 60px;
|
||||
border-radius: 4px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
background-image: url(../img/new-site/ios_screen.png);
|
||||
background-size: 270px;
|
||||
}
|
||||
|
||||
.the-iphone-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
border-radius: 50%;
|
||||
|
||||
opacity: 0.5;
|
||||
background: #DAE1EA;
|
||||
box-shadow: inset 0 1px 2px 0 #B3B8D0;
|
||||
}
|
||||
|
||||
|
||||
.the-android {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
height: 574px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 11px 15px 39px 0 rgba(31,35,61,0.2), 0 2px 4px 0 rgba(88,100,177,0.01), inset 0 0 4px 4px rgba(223, 225, 236, 1);
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.the-android-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
left: 76px;
|
||||
top: 25px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
background: #DAE1EA;
|
||||
box-shadow: inset 0 1px 2px 0 #B3B8D0;
|
||||
}
|
||||
|
||||
.the-android-line {
|
||||
width: 94px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 25px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
border-radius: 5px;
|
||||
opacity: 0.5;
|
||||
background: #DAE1EA;
|
||||
box-shadow: inset 0 1px 2px 0 #B3B8D0;
|
||||
}
|
||||
|
||||
.the-android-screen {
|
||||
width: 262px;
|
||||
height: 466px;
|
||||
border: 1px solid #E7E9F0;
|
||||
background-color: #F3F4F8;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50px;
|
||||
border-radius: 4px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
background-image: url(../img/new-site/screen_android2.png);
|
||||
background-size: 262px;
|
||||
}
|
||||
|
||||
.the-android-button {
|
||||
width: 94px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 26px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
border-radius: 5px;
|
||||
opacity: 0.5;
|
||||
background: #DAE1EA;
|
||||
box-shadow: inset 0 1px 2px 0 #B3B8D0;
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
.overlay {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: none;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 0 ,0) scale(1);
|
||||
visibility: hidden;
|
||||
transition: visibility .5s linear 0s, opacity .2s ease;
|
||||
}
|
||||
|
||||
.overlay.overlay--shown {
|
||||
transition-delay: 0s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0 ,0) scale(1);
|
||||
}
|
||||
|
||||
.popup {
|
||||
max-width: 600px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup__inner {
|
||||
margin: 0 20px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 15px ,0) scale(.96);
|
||||
visibility: hidden;
|
||||
transition-delay: .2s;
|
||||
transition: visibility .5s linear 0s, opacity .2s ease, transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425);
|
||||
}
|
||||
|
||||
.popup--shown .popup__inner {
|
||||
transition-delay: 0s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0 ,0) scale(1);
|
||||
}
|
||||
|
||||
.popup__title {
|
||||
font-family:PostGrotesk-Medium;
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.popup__text {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin: 0 0 25px 0;
|
||||
color: #70808D;
|
||||
}
|
||||
|
||||
.popup__close {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(../img/new-site/icon_close.svg);
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.popup__close:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.popup__buttons a {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.popup__inner {
|
||||
margin: 0 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.popup__title {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.popup__text {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
// http://meyerweb.com/eric/tools/css/reset/
|
||||
// v2.0 | 20110126
|
||||
// License: none (public domain)
|
||||
|
||||
@mixin meyer-reset {
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// HTML5 display-role reset for older browsers
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote {
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
q {
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include meyer-reset;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.slide.slide--four {
|
||||
display: flex;
|
||||
padding: 40px 0 60px;
|
||||
}
|
||||
|
||||
.slide.slide--four .slide__inner {
|
||||
//background-color: $colorWhite;
|
||||
//box-shadow: 0px 4px 18px 0px rgba(189,208,223,0.26);
|
||||
border-radius: 8px;
|
||||
padding: 20px 0 0 0 ;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.slide.slide--four .button {
|
||||
margin: 20px auto 0;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.slide.slide--four {
|
||||
padding: 0px
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,725 @@
|
|||
.slide.slide--one .slide__inner {
|
||||
margin: 30px 0 0 0;
|
||||
height: 780px;
|
||||
background-color: #4957B8;
|
||||
background-image: url(../img/new-site/dot.svg);
|
||||
box-shadow: 0px 10px 14px 0px rgba(79,90,166,0.35);
|
||||
border-radius: 10px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: transform .6s ease, opacity .3s ease;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
justify-content:center;
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
text-align: center;
|
||||
width: 440px;
|
||||
left: 90px;
|
||||
top: 260px;
|
||||
}
|
||||
|
||||
.tagline .tagline__title {
|
||||
font-family:PostGrotesk-Medium;
|
||||
color: $colorWhite;
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease,opacity .6s ease;
|
||||
transition-delay: .1s;
|
||||
}
|
||||
|
||||
.shown .tagline__title {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.tagline .tagline__body {
|
||||
color: $colorWhite;
|
||||
opacity: .6;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
margin: 0 0 20px 0;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease,opacity .6s ease;
|
||||
transition-delay: .2s;
|
||||
}
|
||||
|
||||
.shown .tagline__body {
|
||||
opacity: .6;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.tagline__form {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease,opacity .6s ease;
|
||||
transition-delay: .3s;
|
||||
}
|
||||
|
||||
.shown .tagline__form {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.email-form {
|
||||
display: flex;
|
||||
width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.email-form a {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-family: PostGrotesk-Medium;
|
||||
}
|
||||
|
||||
.email-form__responces {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.email-form__success-message {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
line-height: 22px;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 10px, 0);
|
||||
transition: transform .6s ease,opacity .6s ease;
|
||||
}
|
||||
|
||||
.email-form--valid .email-form__success-message {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.email-form__inner {
|
||||
display: flex;
|
||||
width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.email-form__input {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.email-form__input--email {
|
||||
text-align: left;
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 215px;
|
||||
padding: 0 15px;
|
||||
margin: 0 10px 0 0;
|
||||
font-family: 'PostGrotesk-Book', sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
||||
transition: background-color .2s ease;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
input.email-form__input--email:disabled {
|
||||
color: rgba(255, 255, 255, .4);
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.email-form--valid .email-form__input--email {
|
||||
color: rgba(255, 255, 255, .4);
|
||||
background-image: url(../img/new-site/icon_valid.png);
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
}
|
||||
|
||||
.email-form__input--email:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.email-form__input--email::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.email-form__input--email::-moz-placeholder {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.email-form__input--email:-ms-input-placeholder {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.email-form__input--email:-moz-placeholder {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.email-form input[type="submit"] {
|
||||
width: 175px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
box-shadow: 0px 10px 10px 0px rgba(80,92,174,0.30);
|
||||
}
|
||||
|
||||
.email-form input[type="submit"]:disabled {
|
||||
cursor: default;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
.email-form input[type="submit"]:disabled:hover {
|
||||
background-color: rgba(104, 192, 248, 1);
|
||||
}
|
||||
|
||||
.tagline__footer {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 25px;
|
||||
width: 200px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease,opacity .6s ease;
|
||||
transition-delay: .3s;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shown .tagline__footer {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.tagline__footer-inner {
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.tagline__footer.tagline__footer--hidden .tagline__footer-inner {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.phones {
|
||||
width: 476px;
|
||||
height: 636px;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 106px;
|
||||
}
|
||||
|
||||
.phone-wrap {
|
||||
position: absolute;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.phone {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 40px, 0);
|
||||
transition: transform .6s ease, opacity .3s ease;
|
||||
}
|
||||
|
||||
.phone.phone--iphone {
|
||||
transition-delay: .3s
|
||||
}
|
||||
|
||||
.phone.phone--android {
|
||||
transition-delay: .4s;
|
||||
transform: translate3d(0, 40px, 0);
|
||||
}
|
||||
|
||||
.shown .phone {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.phone-wrap--iphone {
|
||||
width: 292px;
|
||||
height: 610px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 500
|
||||
}
|
||||
|
||||
.phone-wrap--android {
|
||||
width: 290px;
|
||||
height: 574px;
|
||||
left: 186px;
|
||||
top: 62px;
|
||||
z-index: 400
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
position: relative;
|
||||
top: -139px;
|
||||
width: 1180px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 20px 80px;
|
||||
|
||||
background: $colorWhite;
|
||||
box-shadow: 0px -2px 18px 0px rgba(72,89,102,0.25);
|
||||
border-radius: 10px;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 40px, 0);
|
||||
transition: transform .6s ease, opacity .6s ease;
|
||||
transition-delay: .8s;
|
||||
}
|
||||
|
||||
.shown .features {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.more-button {
|
||||
font-family:PostGrotesk-Medium;
|
||||
text-transform: uppercase;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
padding: 14px 35px 14px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 1px;
|
||||
color: #6370CA;
|
||||
background-color: rgba(99, 112, 202, .1);
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transition: transform .2s ease, background-color .2s ease;
|
||||
}
|
||||
|
||||
.more-button:hover {
|
||||
background-color: rgba(99, 112, 202, .2);
|
||||
}
|
||||
|
||||
.more-button:active {
|
||||
transform: translate3d(-50%, 0, 0) scale(.99)
|
||||
}
|
||||
|
||||
.features__item {
|
||||
text-align: center;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.features__icon {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
height: 60px;
|
||||
background-size: 130px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.features__item--send .features__icon {
|
||||
background-image: url(../img/new-site/send_icon.png);
|
||||
}
|
||||
|
||||
.features__item--browse .features__icon {
|
||||
background-image: url(../img/new-site/browse_icon.png);
|
||||
}
|
||||
|
||||
.features__item--buy .features__icon {
|
||||
background-image: url(../img/new-site/buy_icon.png);
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-family:PostGrotesk-Medium;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
margin: 15px 0 12px 0;
|
||||
}
|
||||
|
||||
.features__description {
|
||||
color: #70808D;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
|
||||
.features-wrap {
|
||||
width: 1040px;
|
||||
}
|
||||
|
||||
.features {
|
||||
padding: 20px 50px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
left: 65px
|
||||
}
|
||||
|
||||
.phones {
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
|
||||
.slide.slide--one {
|
||||
margin: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
margin: 0 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.features {
|
||||
width: auto;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1030px) {
|
||||
|
||||
.tagline {
|
||||
width: 300px;
|
||||
top: 230px;
|
||||
}
|
||||
|
||||
.email-form__success-message {
|
||||
|
||||
}
|
||||
|
||||
.email-form.email-form--valid input[type="submit"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.email-form__inner {
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.email-form__input--email {
|
||||
width: 100%;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.email-form input[type="submit"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
|
||||
.tagline,
|
||||
.email-form,
|
||||
.email-form__inner {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.features {
|
||||
padding: 20px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 922px) {
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
height: 693px;
|
||||
}
|
||||
|
||||
|
||||
.tagline {
|
||||
width: 260px;
|
||||
top: 180px;
|
||||
}
|
||||
|
||||
.email-form,
|
||||
.email-form__inner {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.phones {
|
||||
width: 404px;
|
||||
height: 548px;
|
||||
top: 91px;
|
||||
}
|
||||
|
||||
.phone-wrap--iphone {
|
||||
width: 247px;
|
||||
height: 516px;
|
||||
}
|
||||
|
||||
.phone-wrap--android {
|
||||
width: 246px;
|
||||
height: 486px;
|
||||
left: 149px;
|
||||
}
|
||||
|
||||
.the-iphone {
|
||||
width: 252px;
|
||||
height: 516px;
|
||||
}
|
||||
|
||||
.the-iphone-dot {
|
||||
top: 26px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.the-iphone-line {
|
||||
top: 38px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.the-iphone-screen {
|
||||
width: 229px;
|
||||
height: 405px;
|
||||
background-size: 229px;
|
||||
}
|
||||
|
||||
.the-iphone-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
bottom: 13px;
|
||||
}
|
||||
|
||||
.the-android {
|
||||
width: 246px;
|
||||
height: 486px;
|
||||
}
|
||||
|
||||
.the-android-screen {
|
||||
width: 222px;
|
||||
height: 394px;
|
||||
background-size: 222px;
|
||||
}
|
||||
|
||||
.the-android-button {
|
||||
bottom: 21px;
|
||||
}
|
||||
|
||||
.features__item {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
height: 670px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.tagline,
|
||||
.email-form,
|
||||
.email-form__inner {
|
||||
width: 246px;
|
||||
}
|
||||
|
||||
.tagline .tagline__title {
|
||||
font-size: 21px;
|
||||
line-height: 35px;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.tagline .tagline__body {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.features__icon {
|
||||
width: 95px;
|
||||
height: 44px;
|
||||
background-size: 95px;
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.features__description {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.phones {
|
||||
right: 20px;
|
||||
top: 69px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
input.email-form__input--email {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.slide.slide--one {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
position: static;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 110px 0 0px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.tagline,
|
||||
.email-form,
|
||||
.email-form__inner {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.email-form__responces {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.tagline .tagline__body {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.tagline__footer {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.phones {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 340px;
|
||||
width: auto;
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.phone-wrap--iphone {
|
||||
left: 10px;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.phone-wrap--android {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
padding: 5px 20px 5px 10px;
|
||||
}
|
||||
|
||||
.features__item {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.features__icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.features__item--send .features__icon {
|
||||
background-size: 70px
|
||||
}
|
||||
|
||||
.features-text {
|
||||
margin: 0 0 0 10px;
|
||||
padding: 25px 0;
|
||||
border-bottom: 1px solid #EEF2F5;
|
||||
}
|
||||
|
||||
.features__item:nth-child(3) .features-text {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.more-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,402 @@
|
|||
.slide.slide--three {
|
||||
display: flex;
|
||||
padding: 40px 0 60px;
|
||||
}
|
||||
|
||||
.slide.slide--three .slide__inner {
|
||||
background-image: linear-gradient(-180deg, #5A6F7E 0%, #445561 100%);
|
||||
box-shadow: 0px 12px 23px 0px rgba(74,92,105,0.33);
|
||||
border-radius: 8px;
|
||||
padding: 50px 0;
|
||||
height: 740px;
|
||||
width: 1080px;
|
||||
}
|
||||
|
||||
.circles {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.slide__circles {
|
||||
position: absolute;
|
||||
top: 56%;
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 740px;
|
||||
}
|
||||
|
||||
.slide__circle-wrap {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 110%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
|
||||
.slide__circle {
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
background: #A6B0BA;
|
||||
border: 2px solid #FFFFFF;
|
||||
|
||||
opacity: .1;
|
||||
transform: scale(1) translate3d(0, 0, 0);
|
||||
transition: transform 1s cubic-bezier(0.230, 1.000, 0.320, 1.000), opacity .4s linear;
|
||||
}
|
||||
|
||||
.slide--shown .slide__circle {
|
||||
//opacity: .1;
|
||||
//transform: scale(1) translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slide__circle--one .slide__circle {
|
||||
width: 1200px;
|
||||
height: 1200px;
|
||||
transition-delay: .7s;
|
||||
}
|
||||
|
||||
.slide__circle--two .slide__circle {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
transition-delay: .6s;
|
||||
}
|
||||
|
||||
.slide__circle--three .slide__circle {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
transition-delay: .5s;
|
||||
}
|
||||
|
||||
.slide__circle--four .slide__circle {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
transition-delay: .4s;
|
||||
}
|
||||
|
||||
.slide__circle--five .slide__circle{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
transition-delay: .3s;
|
||||
}
|
||||
|
||||
.slide__circle--six .slide__circle{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transition-delay: .2s;
|
||||
}
|
||||
|
||||
|
||||
.points {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 600;
|
||||
}
|
||||
|
||||
.point {
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.point.point--one {
|
||||
top: 198px;
|
||||
left: -50px;
|
||||
}
|
||||
|
||||
.point.point--two {
|
||||
top: 439px;
|
||||
left: 273px;
|
||||
}
|
||||
|
||||
.point.point--three {
|
||||
top: 192px;
|
||||
left: 490px;
|
||||
}
|
||||
|
||||
.point.point--four {
|
||||
top: 336px;
|
||||
left: 844px;
|
||||
}
|
||||
|
||||
.point__point {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px auto;
|
||||
border-radius: 50%;
|
||||
background-color: #3AAAF2;
|
||||
border: 6px solid $colorWhite;
|
||||
box-shadow: 0px 13px 11px 0px rgba(69,81,90,0.16);
|
||||
|
||||
opacity: 0;
|
||||
transform: scale(.2) translate3d(0, -20px, 0);
|
||||
transition: transform .4s cubic-bezier(0.230, 1.000, 0.320, 1.000), opacity .2s ease;
|
||||
}
|
||||
|
||||
.slide--shown .point__point {
|
||||
opacity: 1;
|
||||
transform: scale(1) translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.point.point--one .point__point {
|
||||
transition-delay: 1.2s;
|
||||
}
|
||||
|
||||
.point.point--two .point__point {
|
||||
transition-delay: .6s;
|
||||
}
|
||||
|
||||
.point.point--three .point__point {
|
||||
transition-delay: .8s;
|
||||
}
|
||||
|
||||
.point.point--four .point__point {
|
||||
transition-delay: 1s;
|
||||
}
|
||||
|
||||
.point__title {
|
||||
font-family:PostGrotesk-Medium;
|
||||
line-height: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.point__description {
|
||||
color: #5A6F7E;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.point__content {
|
||||
width: 260px;
|
||||
position: relative;
|
||||
background: $colorWhite;
|
||||
box-shadow: 0px 13px 11px 0px rgba(69,81,90,0.16);
|
||||
border-radius: 8px;
|
||||
|
||||
opacity: 0;
|
||||
transform: scale(1) translate3d(0, -20px, 0);
|
||||
transition: transform .7s cubic-bezier(0.175, 0.885, 0.135, 1.425), opacity .3s ease;
|
||||
}
|
||||
|
||||
.slide--shown .point__content {
|
||||
opacity: 1;
|
||||
transform: scale(1) translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.point.point--one .point__content {
|
||||
transition-delay: 1.3s;
|
||||
}
|
||||
|
||||
.point.point--two .point__content {
|
||||
transition-delay: .7s;
|
||||
}
|
||||
|
||||
.point.point--three .point__content {
|
||||
transition-delay: .9s;
|
||||
}
|
||||
|
||||
.point.point--four .point__content {
|
||||
transition-delay: 1.1s;
|
||||
}
|
||||
|
||||
.point__top {
|
||||
padding: 30px 25px 20px 30px;
|
||||
}
|
||||
|
||||
.point__footer {
|
||||
font-family:PostGrotesk-Medium;
|
||||
color: #68C0FF;
|
||||
padding: 15px 30px;
|
||||
background-color: #E6F2FD;
|
||||
border-radius: 0px 0px 8px 8px
|
||||
}
|
||||
|
||||
.point__avatar {
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: $colorBg;
|
||||
|
||||
margin: 0 0 10px 10px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.point.point--one .point__avatar {
|
||||
background-image: url(../img/new-site/image-jarrad-dapp.png);
|
||||
}
|
||||
|
||||
.point.point--two .point__avatar {
|
||||
background-image: url(../img/new-site/image-etherplay-dapp.png);
|
||||
}
|
||||
|
||||
.point.point--three .point__avatar {
|
||||
background-image: url(../img/new-site/image-carl-dapp.png);
|
||||
}
|
||||
|
||||
.point.point--four .point__avatar {
|
||||
background-image: url(../img/new-site/image-moments-dapp.png);
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
|
||||
.point.point--one {
|
||||
top: 127px;
|
||||
left: 20px
|
||||
}
|
||||
|
||||
.point.point--four {
|
||||
top: 425px;
|
||||
left: 778px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
|
||||
.slide.slide--three .slide__inner {
|
||||
width: 860px;
|
||||
}
|
||||
|
||||
.point.point--one {
|
||||
top: 183px;
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
.point.point--two {
|
||||
top: 454px;
|
||||
left: 243px;
|
||||
}
|
||||
|
||||
.point.point--four {
|
||||
top: 240px;
|
||||
left: 630px;
|
||||
}
|
||||
|
||||
.point.point--three {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.point.point--one {
|
||||
top: 183px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.point.point--two {
|
||||
top: 454px;
|
||||
left: 243px;
|
||||
}
|
||||
|
||||
.point.point--four {
|
||||
top: 240px;
|
||||
left: 580px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 922px) {
|
||||
|
||||
.slide.slide--three .slide__inner {
|
||||
width: 728px;
|
||||
}
|
||||
|
||||
.point.point--one {
|
||||
top: 183px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.point.point--two {
|
||||
top: 454px;
|
||||
left: 170px;
|
||||
}
|
||||
|
||||
.point.point--four {
|
||||
top: 240px;
|
||||
left: 450px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.slide.slide--three {
|
||||
padding: 40px 0 40px
|
||||
}
|
||||
|
||||
.slide.slide--three .slide__inner {
|
||||
padding: 30px 0;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
height: 570px;
|
||||
}
|
||||
|
||||
.slide__circle-wrap {
|
||||
top: 145%;
|
||||
}
|
||||
|
||||
.point {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.point__top {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.point__title {
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.point__content {
|
||||
width: auto;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.point__avatar {
|
||||
float: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.point__description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.point__footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.point.point--one {
|
||||
top: 290px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.point.point--two {
|
||||
top: 210px;
|
||||
right: 50px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.point.point--three {
|
||||
top: 440px;
|
||||
left: 70px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.point.point--four {
|
||||
top: 360px;
|
||||
right: 20px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
.slide.slide--two {
|
||||
padding: 40px 0 40px 0;
|
||||
margin: -140px 0 0 0;
|
||||
}
|
||||
|
||||
.dapps {
|
||||
margin: 50px auto 30px;
|
||||
width: 880px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content:flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dapp {
|
||||
width: 25%;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease, opacity .4s ease;
|
||||
transition-delay: .1s;
|
||||
}
|
||||
|
||||
.dapp:nth-child(2) {
|
||||
transition-delay: .2s;
|
||||
}
|
||||
|
||||
.dapp:nth-child(3) {
|
||||
transition-delay: .3s;
|
||||
}
|
||||
|
||||
.dapp:nth-child(4) {
|
||||
transition-delay: .4s;
|
||||
}
|
||||
|
||||
.dapp:nth-child(5) {
|
||||
transition-delay: .5s;
|
||||
}
|
||||
|
||||
.dapp:nth-child(6) {
|
||||
transition-delay: .6s;
|
||||
}
|
||||
|
||||
.dapp:nth-child(7) {
|
||||
transition-delay: .7s;
|
||||
}
|
||||
|
||||
.dapp:nth-child(8) {
|
||||
transition-delay: 1s;
|
||||
}
|
||||
|
||||
.slide--shown .dapp {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.dapp.dapp--plus {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dapp.dapp--plus a.dapp--plus__link {
|
||||
text-align: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dapp__inner {
|
||||
background-color: $colorWhite;
|
||||
height: 220px;
|
||||
margin: 10px;
|
||||
box-shadow: 0px 4px 18px 0px rgba(189,208,223,0.26);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dapp__title {
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
font-family:PostGrotesk-Medium;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.dapp__description {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #5A6F7E;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.dapp__icon {
|
||||
display: block;
|
||||
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
transform: scale(1);
|
||||
transition: transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425);
|
||||
}
|
||||
|
||||
.dapp--plus:hover .dapp__icon {
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
.dapp__icon-inner {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
|
||||
background-image: url(../img/new-site/plus.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
opacity: 0;
|
||||
transform: scale(.6);
|
||||
transition: transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425), opacity .2s ease;
|
||||
transition-delay: 1.2s;
|
||||
}
|
||||
|
||||
.slide--shown .dapp__icon-inner {
|
||||
transform: scale(1);
|
||||
opacity:1
|
||||
}
|
||||
|
||||
.dapp--plus .dapp__description {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.dapp__image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.dapp.dapp--one .dapp__image {
|
||||
background-image: url(../img/new-site/image-messaging.png);
|
||||
}
|
||||
|
||||
.dapp.dapp--two .dapp__image {
|
||||
background-image: url(../img/new-site/image-payments.png);
|
||||
}
|
||||
|
||||
.dapp.dapp--three .dapp__image {
|
||||
background-image: url(../img/new-site/image-contracts.png);
|
||||
}
|
||||
|
||||
.dapp.dapp--four .dapp__image {
|
||||
background-image: url(../img/new-site/image-wallet.png);
|
||||
}
|
||||
|
||||
.dapp.dapp--five .dapp__image {
|
||||
background-image: url(../img/new-site/image-multiuser.png);
|
||||
}
|
||||
|
||||
.dapp.dapp--six .dapp__image {
|
||||
background-image: url(../img/new-site/image-exchange.png);
|
||||
}
|
||||
|
||||
.dapp.dapp--seven .dapp__image {
|
||||
background-image: url(../img/new-site/image-devtools.png);
|
||||
}
|
||||
|
||||
@media (max-width: 922px) {
|
||||
|
||||
.dapps {
|
||||
margin: 50px auto 30px;
|
||||
width: 748px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content:flex-start;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
|
||||
.dapp {
|
||||
width: 25%;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1
|
||||
}
|
||||
|
||||
.dapp__inner {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.slide.slide--two {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dapps {
|
||||
margin: 20px auto 10px;
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dapp__inner {
|
||||
margin: 5px;
|
||||
height: 240px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.dapp {
|
||||
width: 50%;
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.dapp__image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
left: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.dapp:nth-child(4),
|
||||
.dapp:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dapp__icon,
|
||||
.dapp__icon-inner {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transform: scale(1);
|
||||
opacity:1
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
//align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slide {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slide__inner {
|
||||
width: 1080px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slide__header {
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide__title {
|
||||
font-family:PostGrotesk-Medium;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.slide__description {
|
||||
color: #70808D;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.slide__footer {
|
||||
text-align: center;
|
||||
width: 250px;
|
||||
margin: 0 auto;
|
||||
color: #70808D;
|
||||
opacity: .6;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.slide__header--inversed .slide__title {
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
.slide__header--inversed .slide__description {
|
||||
color: $colorWhite;
|
||||
opacity: .6
|
||||
}
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
|
||||
.slide__inner {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.slide__header {
|
||||
padding: 0 20px;
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.slide__title {
|
||||
font-size: 19px;
|
||||
line-height: 26px;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.slide__description {
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.slide__footer {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue