From c2c4e509d885d69097048293268834d8788674e6 Mon Sep 17 00:00:00 2001 From: 0xfff <0xfff@protonmail.com> Date: Mon, 31 Oct 2016 02:22:07 +0100 Subject: [PATCH] =?UTF-8?q?[Feature]=C2=A0CTA-Box:=20(WIP)=20Add=20ctabox?= =?UTF-8?q?=20module=20on=20homepage=20for=20merchants:=20needs=20to=20be?= =?UTF-8?q?=20made=20into=20a=20slider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 134 +++++++++++++++++++++++++++++++----------- src/scss/_ctabox.scss | 46 +++++++++++++++ src/scss/main.scss | 1 + 3 files changed, 148 insertions(+), 33 deletions(-) create mode 100644 src/scss/_ctabox.scss diff --git a/index.html b/index.html index 50dbeb8..db05237 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,107 @@ description: pages.home.description + + + + + {% t pages.home.merchants-heading %} + + {% tmd pages.home.merchants-text %} + + + + + + + + + + + + + Boleh VPN + Blockchain Assets + + + + + + + + + + + + Boleh VPN + Blockchain Assets + + + + + + + + + + + + Boleh VPN + Blockchain Assets + + + + + + + + + + + + Node40 + Blockchain Assets + + + + + + + + + + + + ProtonMail + Secure Email + + + + + + + + + + + + Qhoster + Quality Hosting + + + + + + + + {% t pages.home.merchants-btn %} + {% t pages.home.merchants-join-btn %} + + + + - - - - {% t pages.home.merchants-heading %} - - {% tmd pages.home.merchants-text %} - - - - - - - - - - - - - - - - - - - {% t pages.home.merchants-btn %} - {% t pages.home.merchants-join-btn %} - - - - diff --git a/src/scss/_ctabox.scss b/src/scss/_ctabox.scss new file mode 100644 index 0000000..b22d0f6 --- /dev/null +++ b/src/scss/_ctabox.scss @@ -0,0 +1,46 @@ +.ctabox { + white-space: nowrap; + position: relative; + margin-bottom: 20px; + + &__cta { + max-width: 250px; + width: 100%; + display: inline-block; + box-shadow: rgba(0,0,0,0.2) 0 1px 4px; + margin-right: 20px; + background: #fff; + } + + &__inner { + } + + &__imagewrapper { + background: rgba($color-blue-light, 0.1); + width: 100%; + height: 0; + padding-bottom: 56.25%; // 16:9 + position: relative; + overflow: hidden; + } + + &__image { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: auto; + } + + &__text { + } + + &__title { + } + + &__description { + } +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 1ece04b..d87d2d7 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -26,6 +26,7 @@ @import "video"; @import "magnific-popup"; @import "info-grid"; +@import "ctabox"; //styles for specific pages @import "pages/home";
Blockchain Assets
Secure Email
Quality Hosting