diff --git a/public/css/src/_home.scss b/public/css/src/_home.scss new file mode 100644 index 0000000..a85e3b5 --- /dev/null +++ b/public/css/src/_home.scss @@ -0,0 +1,60 @@ +.homepage-header { + background-color: #000; + background-image: url('/images/header.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 450px; + color: #fff; + position: relative; + + nav { + background-color: transparent; + box-shadow: none; + } + .homepage-search { + margin-top: 100px; + position: relative; + z-index: 100; + text-align: center; + + ::-webkit-input-placeholder { color:#000; } + ::-moz-placeholder { color:#000; } + :-ms-input-placeholder { color:#000; } + input:-moz-placeholder { color:#000; } + + .input-box { + display: inline-block; + min-width: 300px; + + @include min-screen('1200px') { + min-width: 400px; + } + } + + input { + background-color: #fff; + border-radius: 3px; + padding: 5px 20px; + box-sizing: border-box; + height: 54px; + } + button { + margin-top: -5px; + } + } + + &:after { + background: rgba(0, 0, 0, .3); + content: ''; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + } +} +.highlight { + padding-top: 50px; + padding-bottom: 50px; +} diff --git a/public/css/src/_media-queries.scss b/public/css/src/_media-queries.scss new file mode 100644 index 0000000..3993c88 --- /dev/null +++ b/public/css/src/_media-queries.scss @@ -0,0 +1,225 @@ +// Author: Rafal Bromirski +// www: http://rafalbromirski.com/ +// github: http://github.com/rafalbromirski/sass-mediaqueries +// +// Licensed under a MIT License +// +// Version: +// 1.6.1 + +// --- generator --------------------------------------------------------------- + +@mixin mq($args...) { + $media-type: 'only screen'; + $media-type-key: 'media-type'; + $args: keywords($args); + $expr: ''; + + @if map-has-key($args, $media-type-key) { + $media-type: map-get($args, $media-type-key); + $args: map-remove($args, $media-type-key); + } + + @each $key, $value in $args { + @if $value { + $expr: "#{$expr} and (#{$key}: #{$value})"; + } + } + + @media #{$media-type} #{$expr} { + @content; + } +} + +// --- screen ------------------------------------------------------------------ + +@mixin screen($min, $max, $orientation: false) { + @include mq($min-width: $min, $max-width: $max, $orientation: $orientation) { + @content; + } +} + +@mixin max-screen($max) { + @include mq($max-width: $max) { + @content; + } +} + +@mixin min-screen($min) { + @include mq($min-width: $min) { + @content; + } +} + +@mixin screen-height($min, $max, $orientation: false) { + @include mq($min-height: $min, $max-height: $max, $orientation: $orientation) { + @content; + } +} + +@mixin max-screen-height($max) { + @include mq($max-height: $max) { + @content; + } +} + +@mixin min-screen-height($min) { + @include mq($min-height: $min) { + @content; + } +} + +// --- hdpi -------------------------------------------------------------------- + +@mixin hdpi($ratio: 1.3) { + @media only screen and (-webkit-min-device-pixel-ratio: $ratio), + only screen and (min-resolution: #{round($ratio*96)}dpi) { + @content; + } +} + +// --- hdtv -------------------------------------------------------------------- + +@mixin hdtv($standard: '1080') { + $min-width: false; + $min-height: false; + + $standards: ('720p', 1280px, 720px) + ('1080', 1920px, 1080px) + ('2K', 2048px, 1080px) + ('4K', 4096px, 2160px); + + @each $s in $standards { + @if $standard == nth($s, 1) { + $min-width: nth($s, 2); + $min-height: nth($s, 3); + } + } + + @include mq( + $min-device-width: $min-width, + $min-device-height: $min-height, + $min-width: $min-width, + $min-height: $min-height + ) { + @content; + } +} + +// --- iphone4 ----------------------------------------------------------------- + +@mixin iphone4($orientation: false) { + $min: 320px; + $max: 480px; + $pixel-ratio: 2; + $aspect-ratio: '2/3'; + + @include mq( + $min-device-width: $min, + $max-device-width: $max, + $orientation: $orientation, + $device-aspect-ratio: $aspect-ratio, + $-webkit-device-pixel-ratio: $pixel-ratio + ) { + @content; + } +} + +// --- iphone5 ----------------------------------------------------------------- + +@mixin iphone5($orientation: false) { + $min: 320px; + $max: 568px; + $pixel-ratio: 2; + $aspect-ratio: '40/71'; + + @include mq( + $min-device-width: $min, + $max-device-width: $max, + $orientation: $orientation, + $device-aspect-ratio: $aspect-ratio, + $-webkit-device-pixel-ratio: $pixel-ratio + ) { + @content; + } +} + +// --- iphone6 ----------------------------------------------------------------- + +@mixin iphone6($orientation: false) { + $min: 375px; + $max: 667px; + $pixel-ratio: 2; + + @include mq( + $min-device-width: $min, + $max-device-width: $max, + $orientation: $orientation, + $-webkit-device-pixel-ratio: $pixel-ratio + ) { + @content; + } +} + +// --- iphone6 plus ------------------------------------------------------------ + +@mixin iphone6-plus($orientation: false) { + $min: 414px; + $max: 736px; + $pixel-ratio: 3; + + @include mq( + $min-device-width: $min, + $max-device-width: $max, + $orientation: $orientation, + $-webkit-device-pixel-ratio: $pixel-ratio + ) { + @content; + } +} + +// --- ipad (all) -------------------------------------------------------------- + +@mixin ipad($orientation: false) { + $min: 768px; + $max: 1024px; + + @include mq( + $min-device-width: $min, + $max-device-width: $max, + $orientation: $orientation + ) { + @content; + } +} + +// --- ipad-retina ------------------------------------------------------------- + +@mixin ipad-retina($orientation: false) { + $min: 768px; + $max: 1024px; + $pixel-ratio: 2; + + @include mq( + $min-device-width: $min, + $max-device-width: $max, + $orientation: $orientation, + $-webkit-device-pixel-ratio: $pixel-ratio + ) { + @content; + } +} + +// --- orientation ------------------------------------------------------------- + +@mixin landscape() { + @include mq($orientation: landscape) { + @content; + } +} + +@mixin portrait() { + @include mq($orientation: portrait) { + @content; + } +} diff --git a/public/images/header.jpg b/public/images/header.jpg new file mode 100644 index 0000000..2819e8e Binary files /dev/null and b/public/images/header.jpg differ diff --git a/public/images/icons/default.svg b/public/images/icons/default.svg new file mode 100644 index 0000000..0f6bd43 --- /dev/null +++ b/public/images/icons/default.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/paper-plane.svg b/public/images/icons/paper-plane.svg new file mode 100644 index 0000000..e39194a --- /dev/null +++ b/public/images/icons/paper-plane.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/percent.svg b/public/images/icons/percent.svg new file mode 100644 index 0000000..1cdad0d --- /dev/null +++ b/public/images/icons/percent.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/photos.svg b/public/images/icons/photos.svg new file mode 100644 index 0000000..f408e16 --- /dev/null +++ b/public/images/icons/photos.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/picture.svg b/public/images/icons/picture.svg new file mode 100644 index 0000000..22ebdc9 --- /dev/null +++ b/public/images/icons/picture.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/television.svg b/public/images/icons/television.svg new file mode 100644 index 0000000..4b3dd65 --- /dev/null +++ b/public/images/icons/television.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/user.svg b/public/images/icons/user.svg new file mode 100644 index 0000000..101a160 --- /dev/null +++ b/public/images/icons/user.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/icons/worldwide.svg b/public/images/icons/worldwide.svg new file mode 100644 index 0000000..4c81665 --- /dev/null +++ b/public/images/icons/worldwide.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/js/main.js b/public/js/main.js index 4c3b4b1..a825a67 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -99,3 +99,16 @@ $(document).ready(function() { $('#orderManagement input[name=orderId]').val(''); } }); + +$(document).ready(function(){ + $(this).scrollTop(0); + + $(window).scroll(function(){ + var scroll = $(window).scrollTop(); + if (scroll > 50) { + $("#hp-nav").css({ 'background-color': '#263238' }).addClass('blue-grey darken-4'); + } else { + $("#hp-nav").css({ 'background-color': 'transparent' }).removeClass('blue-grey darken-4'); + } + }) +}) diff --git a/views/home.ejs b/views/home.ejs index 9dd1a84..26b0745 100644 --- a/views/home.ejs +++ b/views/home.ejs @@ -1,39 +1,159 @@ -<%- include('partials/header'); %> -

Latest Services

- -
- <% services.forEach((service) => { %> -
-
-
- + + + + + + + <%= title %> + + + + + + + +
+
+ +
+ + + + +
+
+

Find what you need, now!

+
+ +
+
-
- View + + +
+
+
+ +
+
+

Explore the Marketplace

+

Checkout what people are offering

+ +
+ <% categories.forEach((category) => { %> +
+
+
+ +
+
+ <%= category.name %> +
+ <% }) %>
- <% }) %>
-

Popular Categories

- -
- <% categories.forEach((category) => { %> -
-
-
- +
+
+
+
+

Find

+

Neque temporibus tenetur optio libero pariatur magnam cumque sit ipsam? Magni, animi nemo!

-
- <%= category.name %> +
+

Order

+

Neque temporibus tenetur optio libero pariatur magnam cumque sit ipsam? Magni, animi nemo!

+
+
+

Pay

+

Neque temporibus tenetur optio libero pariatur magnam cumque sit ipsam? Magni, animi nemo!

- <% }) %>
-<%- include('partials/footer'); %> +
+

Best Sellers

+

Checkout what people are buying

+ +
+ <% services.forEach((service) => { %> +
+
+
+
+

<%= service.title %> for <%= service.price %> <%= service.currency %>

Offered by <%= service.seller.username %> +
+
+ View +
+
+
+ <% }) %> +
+
+
+ +
+
+
+
+
mTasks
+

A Fiverr like platform built on top of STEEM blockchain using STEEM escrow functionalities. This site is built as a demo, using it to offer your services in not recommended but you can.

+
This site is not in production state.
+

Background credit goes to Pexels and Icons were taken from Flaticon

+
+
+ +
+
+
+ +
+
+

made with ❤ by @reazuliqbal

+
+
+
+ + + + +