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.

Sign up for GitHub

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

10 donate page #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
8d3e764
Created donate.html file B)
Aug 23, 2021
3845374
Added a header, and two buttons
Aug 24, 2021
0e5f149
Linked our paypal and patreon in the buttons
Aug 24, 2021
31c7a98
Added cards, and CSS for cards (showcasing donor perks and prices)
Aug 24, 2021
7193986
moved the css for the card to scss
Aug 24, 2021
a706387
Finally got cards to work and properly show by converting the scss to…
Aug 24, 2021
27fb67d
Added icons and proper buttons for each card
Aug 25, 2021
a7d7799
Finished a draft for the donor perks cards
Aug 25, 2021
4f83a44
Added a title
Aug 25, 2021
1cfc187
Cleaned up HTML, and properly formatted the cards and "header"
Aug 28, 2021
224f8b1
Reformatting and minor changes
LagunaElectric Aug 29, 2021
38b2d6f
Removed Donate cards
Sep 7, 2021
505f1ac
Removed CSS for those cards
Sep 7, 2021
ccb1d8e
Added text tool tip and filled cards with proper information
Sep 9, 2021
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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