joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[Feature] CTA-Box: (WIP) Add ctabox module on homepage for merchants: needs to be made into a slider

Browse source
This commit is contained in:
0xfff 2016-10-31 02:22:07 +01:00
parent 549eeab593
commit c2c4e509d8
3 changed files with 148 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

134
index.html
View file

@ -22,6 +22,107 @@ description: pages.home.description
</div>
</section>
<!--
MERCHANTS
-->
<section>
<div class="content">
<div>
<h2>{% t pages.home.merchants-heading %}</h2>
{% tmd pages.home.merchants-text %}
</div>
<div class="ctabox">
<div class="ctabox__inner">
<article class="ctabox__cta">
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text">
<h4 class="ctabox__title">Boleh VPN</h4>
<p class="ctabox__description">Blockchain Assets</p>
</div>
</a>
</article>
<article class="ctabox__cta">
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text">
<h4 class="ctabox__title">Boleh VPN</h4>
<p class="ctabox__description">Blockchain Assets</p>
</div>
</a>
</article>
<article class="ctabox__cta">
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text">
<h4 class="ctabox__title">Boleh VPN</h4>
<p class="ctabox__description">Blockchain Assets</p>
</div>
</a>
</article>
<article class="ctabox__cta">
<a href="https://node40.com" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper">
<img src="/assets/img/home/node40.png" class="ctabox__image">
</div>
</a>
<a href="https://node40.com" target="_blank" class="ctabox__link">
<div class="ctabox__text">
<h4 class="ctabox__title">Node40</h4>
<p class="ctabox__description">Blockchain Assets</p>
</div>
</a>
</article>
<article class="ctabox__cta">
<a href="https://protonmail.com/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper">
<img src="/assets/img/home/protonmail.png" class="ctabox__image">
</div>
</a>
<a href="https://protonmail.com/" target="_blank" class="ctabox__link">
<div class="ctabox__text">
<h4 class="ctabox__title">ProtonMail</h4>
<p class="ctabox__description">Secure Email</p>
</div>
</a>
</article>
<article class="ctabox__cta">
<a href="https://www.qhoster.com/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper">
<img src="/assets/img/home/qhoster.png" class="ctabox__image">
</div>
</a>
<a href="https://www.qhoster.com/" target="_blank" class="ctabox__link">
<div class="ctabox__text">
<h4 class="ctabox__title">Qhoster</h4>
<p class="ctabox__description">Quality Hosting</p>
</div>
</a>
</article>
</div>
</div>
<div>
<a href="{% t pages.home.merchants-link %}" class="btn-blue">{% t pages.home.merchants-btn %}</a>
<a href="{% t pages.home.merchants-join-link %}" class="btn-blue">{% t pages.home.merchants-join-btn %}</a>
</div>
</div>
</section>
<!--
DASH FEATURES
PRIVATE | INSTANT | SECURE
@ -49,39 +150,6 @@ description: pages.home.description
</div>
</section>
<!--
MERCHANTS
-->
<section>
<div class="content">
<div>
<h2>{% t pages.home.merchants-heading %}</h2>
{% tmd pages.home.merchants-text %}
</div>
<div class="logo-collection">
<div class="logo-collection__logo">
<a href="https://www.bolehvpn.net/" target="_blank"><img src="/assets/img/home/bolehvpn.png" class="logo-collection__image"></a>
</div>
<div class="logo-collection__logo">
<a href="https://node40.com" target="_blank"><img src="/assets/img/home/node40.png" class="logo-collection__image"></a>
</div>
<div class="logo-collection__logo">
<a href="https://protonmail.com/" target="_blank"><img src="/assets/img/home/protonmail.png" class="logo-collection__image"></a>
</div>
<div class="logo-collection__logo">
<a href="https://www.qhoster.com/" target="_blank"><img src="/assets/img/home/qhoster.png" class="logo-collection__image"></a>
</div>
</div>
<div>
<a href="{% t pages.home.merchants-link %}" class="btn-blue">{% t pages.home.merchants-btn %}</a>
<a href="{% t pages.home.merchants-join-link %}" class="btn-blue">{% t pages.home.merchants-join-btn %}</a>
</div>
</div>
</section>
<!--
NETWORK ARCHITECTURE
-->

46
src/scss/_ctabox.scss Normal file
View file

@ -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 {
}
}

1
src/scss/main.scss
View file

@ -26,6 +26,7 @@
@import "video";
@import "magnific-popup";
@import "info-grid";
@import "ctabox";
//styles for specific pages
@import "pages/home";