Skip to content

10 donate page #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 76 additions & 1 deletion assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -3278,4 +3278,79 @@ body.is-touch #banner {
margin: 0;
padding: 0;
}
}
}


.pricing .card {
border: none;
border-radius: 1rem;
transition: all 0.2s;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing hr {
margin: 1.5rem 0;
}

.pricing .card-title {
margin: 0.5rem 0;
font-size: 0.9rem;
letter-spacing: .1rem;
font-weight: bold;
}

.pricing .card-price {
font-size: 3rem;
margin: 0;
}

.pricing .card-price .period {
font-size: 0.8rem;
}

.pricing ul li {
margin-bottom: 1rem;
}

.pricing .text-muted {
opacity: 0.7;
}

/* Hover Effects on Card */

@media (min-width: 992px) {
.pricing .card:hover {
margin-top: -.25rem;
margin-bottom: .25rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}

.pricing .card:hover .btn {
opacity: 1;
}
}

/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #181920;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}

/* for showing the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
1 change: 1 addition & 0 deletions assets/sass/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2369,3 +2369,4 @@ body.is-touch {
}
}
}

170 changes: 170 additions & 0 deletions donate.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!DOCTYPE HTML>
<!--
Landed by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>

<head>
<title>Donate</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/sass/main.scss" type="scss" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
</head>

<body class="is-preload">
<div id="page-wrapper">

<!-- Header -->
<header id="head"></header>

<!-- Main -->

<section id="three" class="spotlight style3 bottom">
<span class="image fit main"><img src="images/pic03.jpg" alt="" /></span>
<div class="content">
<div class="container">
<header>
<h2>Donate</h2>
</header>
<p>
In order to maintain the server and pay for the fees necessary to progress the server and its
image we need donations. We have come up with a donations perk system that is EULA friendly
and is rewarding to the donor. If you want to donate here are our links. If you have
already donated before you will get the tier based off of your previous donation amount.
</p>
<div class="align-center">
<a href="https://paypal.me/comparatorcraft" class="button">PayPal</a>
<a href="https://www.patreon.com/comparatorcraftsmp" class="button">Patreon</a>
</div>
</div>
</div>
</section>
<section id="four" class="wrapper style1 special fade-up">
<header class="major">
<h2>DonorPerks</h2>
</header>
<section class="pricing py-5 container ">
<div class="content">
<div class="row">
<!-- Free Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Gold</h5>
<h6 class="card-price text-center">$8<span class="period"></span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Donor Discord role</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>/hat</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Gold eGlow</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>VIP Donor Channel</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span><div class="tooltip">Extra Commands<span class="tooltiptext">/eglow Gold - Makes you glow gold
/tags - allows you to select your Gold ingame Donor tag
#for /tags a GUI should popup and you will see your available tags</span></div></li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>ingame chat colors</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Discord emoji of skin</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Nicknames
</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Player Particles</li>
</ul>
<div class="d-grid">
<a href="https://paypal.me/comparatorcraft" class="button primary small">Paypal</a>
<a href="https://www.patreon.com/comparatorcraftsmp" class="button primary small">Patreon</a>
</div>
</div>
</div>
</div>
<!-- Plus Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Emerald</h5>
<h6 class="card-price text-center">$20 or $3<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Donor Discord role</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>/hat</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>various eGlow colors</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>VIP Donor Channel</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>ingame chat colors</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Discord emoji of skin</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span><div class="tooltip">Extra Commands<span class="tooltiptext">
/eglow [Red/Yellow/Blue/White/Black] - This will make you glow
/hat - This will let you put any item in the game in your helmet slot
/color [Red/Dark Red/Gold /Yellow /Green /Lime/Aqua /Teal/Blue /Indigo/Purple/White /Gray/Dark Gray/Black]
#/color will show up as red but it still works as a command, it is just not registered
</span></div></li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Nicknames
</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Player Particles</li>
</ul>
<div class="d-grid">
<a href="https://paypal.me/comparatorcraft" class="button primary small">Paypal</a>
<a href="https://www.patreon.com/comparatorcraftsmp" class="button primary small">Patreon</a>
</div>
</div>
</div>
</div>
<!-- Pro Tier -->
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Diamond</h5>
<h6 class="card-price text-center">$40 or $6<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Donor Discord role</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>/hat</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>eGlow of any color</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>VIP Donor Channel</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-check"></i></span></i></span>ingame chat colors</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-check"></i></span></i></span>Discord emoji of skin</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-check"></i></span></i></span>Nicknames
</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-check"></i></span></i></span>Player Particles</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span><div class="tooltip">Extra Commands<span class="tooltiptext">/eglow (all colors) - this allows you to glow
/pweather - this allows you to change the weather <br>
#THIS IS CLIENT SIDE, THIS PURELY VISUAL
/ptime - allows you to change the time of day
#THIS I S ALSO PURELY CLIENT SIDE, AND IT IS ONLY VISUAL THE SERVER TIME DOESN'T CHANGE
/pp gui - this allows you to change particle effects, these show around the player </span></div></li>
</ul>
<div class="d-grid">
<a href="https://paypal.me/comparatorcraft" class="button primary small">Paypal</a>
<a href="https://www.patreon.com/comparatorcraftsmp" class="button primary small">Patreon</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<footer id="foot"></footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script>
$(function () {
$('#head').load('assets/html/header.html');
$('#foot').load('assets/html/footer.html');
$.getScript('assets/js/main.js');
});
</script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>

</body>

</html>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Files should end in a new line.

1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
<header>
<h2>ComparatorCraftSMP</h2>
<p>A Hermitcraft like Minecraft server expreience.</p>

</header>
<span class="image"><img src="images/pic01.jpg" alt="" /></span>
</div>
Expand Down