mirror of
https://github.com/seigler/dash-website
synced 2025-07-26 23:06:09 +00:00
[Updae] Community: add sections / style ctaboxes
This commit is contained in:
0xfff
parent
4024a6bf83
commit
24c6353230
5 changed files with 76 additions and 98 deletions
|
|
@ -11,8 +11,8 @@ description: pages.community.description
|
|||
<!--
|
||||
CTA sections
|
||||
-->
|
||||
<section>
|
||||
<div class="content">
|
||||
<section class="section section--cta">
|
||||
<div class="section__content">
|
||||
<div>
|
||||
<h2>{% t pages.community.discussion-heading %}</h2>
|
||||
|
||||
|
|
@ -26,8 +26,6 @@ description: pages.community.description
|
|||
<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">DashTalk</h4>
|
||||
</div>
|
||||
|
|
@ -38,8 +36,6 @@ description: pages.community.description
|
|||
<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">Reddit</h4>
|
||||
</div>
|
||||
|
|
@ -50,8 +46,6 @@ description: pages.community.description
|
|||
<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">BitcoinTalk</h4>
|
||||
</div>
|
||||
|
|
@ -62,23 +56,21 @@ description: pages.community.description
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<section class="section section--cta section--gray-light-bg">
|
||||
<div class="section__content">
|
||||
<div>
|
||||
<h2>{% t pages.community.social-heading %}</h2>
|
||||
|
||||
{% tmd pages.community.social-text %}
|
||||
</div>
|
||||
|
||||
<div class="ctabox">
|
||||
<div class="ctabox ctabox--gray-light-bg" data-js-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">Twitter</h4>
|
||||
</div>
|
||||
|
|
@ -89,8 +81,6 @@ description: pages.community.description
|
|||
<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">Facebook</h4>
|
||||
</div>
|
||||
|
|
@ -101,8 +91,6 @@ description: pages.community.description
|
|||
<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">YouTube</h4>
|
||||
</div>
|
||||
|
|
@ -113,8 +101,6 @@ description: pages.community.description
|
|||
<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">LinkedIn</h4>
|
||||
</div>
|
||||
|
|
@ -125,8 +111,6 @@ description: pages.community.description
|
|||
<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">Instagram</h4>
|
||||
</div>
|
||||
|
|
@ -137,8 +121,6 @@ description: pages.community.description
|
|||
<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>
|
||||
|
|
@ -150,23 +132,21 @@ description: pages.community.description
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<section class="section section--cta">
|
||||
<div class="section__content">
|
||||
<div>
|
||||
<h2>{% t pages.community.news-heading %}</h2>
|
||||
|
||||
{% tmd pages.community.news-text %}
|
||||
</div>
|
||||
|
||||
<div class="ctabox">
|
||||
<div class="ctabox" data-js-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">Dash Nation</h4>
|
||||
</div>
|
||||
|
|
@ -177,8 +157,6 @@ description: pages.community.description
|
|||
<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">Dash Roundtable</h4>
|
||||
</div>
|
||||
|
|
@ -189,8 +167,6 @@ description: pages.community.description
|
|||
<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">DashPay Magazine</h4>
|
||||
</div>
|
||||
|
|
@ -201,8 +177,6 @@ description: pages.community.description
|
|||
<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">DashDot Alpha</h4>
|
||||
</div>
|
||||
|
|
@ -213,8 +187,6 @@ description: pages.community.description
|
|||
<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">What Is Dash?</h4>
|
||||
</div>
|
||||
|
|
@ -225,8 +197,6 @@ description: pages.community.description
|
|||
<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">Dash N Drink</h4>
|
||||
</div>
|
||||
|
|
@ -237,23 +207,21 @@ description: pages.community.description
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<section class="section section--cta section--gray-light-bg">
|
||||
<div class="section__content">
|
||||
<div>
|
||||
<h2>{% t pages.community.development-heading %}</h2>
|
||||
|
||||
{% tmd pages.community.development-text %}
|
||||
</div>
|
||||
|
||||
<div class="ctabox">
|
||||
<div class="ctabox ctabox--gray-light-bg" data-js-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">Github</h4>
|
||||
</div>
|
||||
|
|
@ -264,8 +232,6 @@ description: pages.community.description
|
|||
<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">JIRA</h4>
|
||||
</div>
|
||||
|
|
@ -276,8 +242,6 @@ description: pages.community.description
|
|||
<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">Dash Wiki</h4>
|
||||
</div>
|
||||
|
|
@ -288,8 +252,6 @@ description: pages.community.description
|
|||
<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">Dash Slack</h4>
|
||||
</div>
|
||||
|
|
@ -300,23 +262,21 @@ description: pages.community.description
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<section class="section section--cta">
|
||||
<div class="section__content">
|
||||
<div>
|
||||
<h2>{% t pages.community.masternode-heading %}</h2>
|
||||
|
||||
{% tmd pages.community.masternode-text %}
|
||||
</div>
|
||||
|
||||
<div class="ctabox">
|
||||
<div class="ctabox" data-js-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">Dash Central</h4>
|
||||
<p class="ctabox__description">Blockchain Assets</p>
|
||||
|
|
@ -328,8 +288,6 @@ description: pages.community.description
|
|||
<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">DashNinja</h4>
|
||||
</div>
|
||||
|
|
@ -340,8 +298,6 @@ description: pages.community.description
|
|||
<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">Node40</h4>
|
||||
</div>
|
||||
|
|
@ -352,8 +308,6 @@ description: pages.community.description
|
|||
<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">Masternode.me</h4>
|
||||
</div>
|
||||
|
|
|
|||
12
index.html
12
index.html
|
|
@ -43,8 +43,6 @@ description: pages.home.description
|
|||
<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>
|
||||
|
|
@ -56,8 +54,6 @@ description: pages.home.description
|
|||
<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>
|
||||
|
|
@ -69,8 +65,6 @@ description: pages.home.description
|
|||
<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>
|
||||
|
|
@ -82,8 +76,6 @@ description: pages.home.description
|
|||
<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>
|
||||
|
|
@ -95,8 +87,6 @@ description: pages.home.description
|
|||
<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>
|
||||
|
|
@ -108,8 +98,6 @@ description: pages.home.description
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
(function($) {
|
||||
|
||||
$(function() {
|
||||
// $(function() {
|
||||
|
||||
// jQuery to collapse the navbar on scroll
|
||||
$(window).scroll(function() {
|
||||
if ($('.navbar').offset().top > 100) {
|
||||
$('.navbar-fixed-top').addClass('top-nav-collapse');
|
||||
} else {
|
||||
$('.navbar-fixed-top').removeClass('top-nav-collapse');
|
||||
}
|
||||
});
|
||||
// // jQuery to collapse the navbar on scroll
|
||||
// $(window).scroll(function() {
|
||||
// if ($('.navbar').offset().top > 100) {
|
||||
// $('.navbar-fixed-top').addClass('top-nav-collapse');
|
||||
// } else {
|
||||
// $('.navbar-fixed-top').removeClass('top-nav-collapse');
|
||||
// }
|
||||
// });
|
||||
|
||||
// jQuery for page scrolling feature - requires jQuery Easing plugin
|
||||
$(function() {
|
||||
$('a.page-scroll').bind('click', function(event) {
|
||||
var $anchor = $(this);
|
||||
// // jQuery for page scrolling feature - requires jQuery Easing plugin
|
||||
// $(function() {
|
||||
// $('a.page-scroll').bind('click', function(event) {
|
||||
// var $anchor = $(this);
|
||||
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $($anchor.attr('href')).offset().top
|
||||
}, 500, 'easeInOutExpo');
|
||||
// $('html, body').stop().animate({
|
||||
// scrollTop: $($anchor.attr('href')).offset().top
|
||||
// }, 500, 'easeInOutExpo');
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
// event.preventDefault();
|
||||
// });
|
||||
// });
|
||||
|
||||
});
|
||||
// });
|
||||
|
||||
}(jQuery));
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
display: inline-block;
|
||||
box-shadow: rgba(0,0,0,0.2) 0 1px 4px;
|
||||
margin-right: 20px;
|
||||
color: $color-black-light;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__inner,
|
||||
|
|
@ -17,6 +19,11 @@
|
|||
padding: 20px 0;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
padding-bottom: 16px; // optical
|
||||
}
|
||||
|
||||
&__inner {
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -26,7 +33,7 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 10%;
|
||||
background: linear-gradient(to right, $color-gray-light 10%, transparent 100%);
|
||||
background: linear-gradient(to right, white 10%, transparent 100%);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
|
|
@ -36,10 +43,24 @@
|
|||
bottom: 0;
|
||||
right: 0;
|
||||
width: 10%;
|
||||
background: linear-gradient(to left, $color-gray-light 10%, transparent 100%);
|
||||
background: linear-gradient(to left, white 10%, transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&--gray-light-bg {
|
||||
.ctabox {
|
||||
&__inner {
|
||||
&::before {
|
||||
background: linear-gradient(to right, $color-gray-light 10%, transparent 100%);
|
||||
}
|
||||
&::after {
|
||||
background: linear-gradient(to left, $color-gray-light 10%, transparent 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__imagewrapper {
|
||||
background: rgba($color-blue-light, 0.1);
|
||||
width: 100%;
|
||||
|
|
@ -60,11 +81,16 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
&__text {
|
||||
&__title {
|
||||
color: $color-black-light;
|
||||
padding-top: 15px;
|
||||
@include font-title-medium();
|
||||
}
|
||||
&__description {
|
||||
color: $color-gray-dark;
|
||||
margin: 0 !important; // TODO: get rid of specificity
|
||||
}
|
||||
|
||||
&__title {
|
||||
}
|
||||
|
||||
&__description {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$m: 'section';
|
||||
|
||||
.#{$m} {
|
||||
padding-bottom: 100px;
|
||||
padding-bottom: 50px;
|
||||
width: 100%;
|
||||
|
||||
&__content {
|
||||
|
|
@ -29,6 +29,16 @@ $m: 'section';
|
|||
}
|
||||
}
|
||||
|
||||
&--gray-light-bg {
|
||||
padding-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
background: $color-gray-light;
|
||||
}
|
||||
|
||||
&--cta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--home-cta {
|
||||
text-align: center;
|
||||
padding-bottom: 60px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue