added a little support section

This commit is contained in:
Ellpeck 2018-08-01 20:22:48 +02:00
parent 5981747691
commit c579a47c25
6 changed files with 50 additions and 8 deletions

View file

@ -45,6 +45,7 @@
<a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link" href="#social">Social</a> <a class="nav-item nav-link" href="#social">Social</a>
<a class="nav-item nav-link" href="#about">About</a> <a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#support">Support Me</a>
</div> </div>
</div> </div>
</nav> </nav>
@ -76,7 +77,7 @@
Below is a list of all of the projects that I'm working on or that I've made in the past. Check them out if you want! Below is a list of all of the projects that I'm working on or that I've made in the past. Check them out if you want!
</p> </p>
<div id="project-list"> <div id="project-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em> <noscript><em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em></noscript>
</div> </div>
<script src="scripts/projects.js"></script> <script src="scripts/projects.js"></script>
</div> </div>
@ -89,7 +90,7 @@
Below is a list of the social networks and websites that I regularly use. The closer to the front of the list they are, the more frequently I use them, generally. Below is a list of the social networks and websites that I regularly use. The closer to the front of the list they are, the more frequently I use them, generally.
</p> </p>
<div id="social-list"> <div id="social-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em> <noscript><em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em></noscript>
</div> </div>
<script src="scripts/social.js"></script> <script src="scripts/social.js"></script>
</div> </div>
@ -103,10 +104,37 @@
you! you!
</p> </p>
<div id="about-list"> <div id="about-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em> <noscript><em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em></noscript>
</div> </div>
<script src="scripts/about.js"></script> <script src="scripts/about.js"></script>
</div> </div>
<!-- Support -->
<a class="anchor" id="support"></a>
<div class="list-display rounded">
<h2>Support Me</h2>
<p>
If you think any of the stuff I work on is interesting, especially my game or one of my Minecraft mods, a great way to show me your appreciation and help me out is to throw me a bit of your precious money!
<br>If you want, you can do so using one of the ways below.
<br><em>Keep in mind that doing this is, of course, optional. I don't expect you to give me money for what I do, people appreciating it is already really awesome to me. Plus, if you want to, you can always support me by telling other people about me and my projects as well.</em>
</p>
<div class="row align-items-center">
<div class="col-md-auto">
<a class="btn btn-light support-button rounded-0" href="https://patreon.com/Ellpeck"><img src="res/support/patreon.png" class="support-image" alt="">Support me on Patreon</a>
</div>
<div class="col">
Patreon is a great way of giving me money regularly. You automatically give me a set amount each month, and in return, you can get cool rewards like beta access to my game or visual fanciness for your Minecraft character when using my mods.
</div>
</div>
<div class="row align-items-center">
<div class="col-md-auto">
<a class="btn btn-light support-button rounded-0" href="https://paypal.me/Ellpeck"><img src="res/support/paypal.png" class="support-image" alt="">Donate with PayPal</a>
</div>
<div class="col">
If you prefer the idea of giving me some money as a one-time payment, using PayPal is probably your best bet. It's quick and easy, and it helps me out just the same way.
</div>
</div>
</div>
</div> </div>
<!-- Footer --> <!-- Footer -->

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

BIN
res/support/patreon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
res/support/paypal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -6,10 +6,6 @@ const socials = [{
'name': 'Discord', 'name': 'Discord',
'link': 'https://www.ellpeck.de/discord', 'link': 'https://www.ellpeck.de/discord',
}, },
{
'name': 'Patreon',
'link': 'http://www.patreon.com/Ellpeck'
},
{ {
'name': 'Twitter', 'name': 'Twitter',
'link': 'https://twitter.com/Ellpeck' 'link': 'https://twitter.com/Ellpeck'
@ -56,7 +52,7 @@ let s = '';
for (social of socials) { for (social of socials) {
s += '<a class="btn btn-light social-button rounded-0" href="' + social['link'] + '"">'; s += '<a class="btn btn-light social-button rounded-0" href="' + social['link'] + '"">';
s += '<img class="social-image" src="res/social/' + social['name'].toLowerCase() + '.png" alt="">'; s += '<img class="social-image" src="res/social/' + social['name'].toLowerCase() + '.png" alt="">';
s += ' ' + social['name']; s += social['name'];
s += '</a>' s += '</a>'
} }
$('#social-list').html(s); $('#social-list').html(s);

View file

@ -58,6 +58,18 @@ body {
float: left; float: left;
} }
.support-button {
width: 300px;
margin: 10px;
line-height: 50px;
}
.support-image {
width: 50px;
height: 50px;
float: left;
}
#social-list { #social-list {
text-align: center; text-align: center;
} }
@ -113,6 +125,12 @@ body {
text-indent: -99999px; text-indent: -99999px;
margin: 5px; margin: 5px;
} }
.support-button {
width: auto;
overflow: hidden;
text-indent: -99999px;
margin: 5px;
}
.project-image { .project-image {
right: -18px; right: -18px;
top: -18px; top: -18px;