From f5a5f40a9fdec72f6d6409c7f20ead2d06361ddf Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Sun, 3 Jan 2021 14:34:43 +0100
Subject: [PATCH] finished commission site for now

---
 commissions/index.html | 105 +++++++++++++++++++++++++----------------
 commissions/style.css  |  64 +++++++++++++++++++------
 index.html             |  37 +--------------
 3 files changed, 115 insertions(+), 91 deletions(-)
diff --git a/commissions/index.html b/commissions/index.html
index 17bc436..4688421 100644
--- a/commissions/index.html
+++ b/commissions/index.html
@@ -7,7 +7,7 @@
 
     <title>Ellpeck's Mod Commissions</title>
     <meta name="author" content="Ellpeck">
-    <meta name="description" content="TODO">
+    <meta name="description" content="I accept commissions for Minecraft mods. If you want a mod of any size and complexity made, this is the place to go!">
     <meta name="keywords" content="Ellpeck, Minecraft, Mods, Modding, Commission, Forge, Plugin">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
@@ -16,7 +16,7 @@
     <link rel="icon" href="../favicon.ico">
 
     <meta property="og:title" content="Ellpeck's Mod Commissions">
-    <meta property="og:description" content="TODO">
+    <meta property="og:description" content="I accept commissions for Minecraft mods. If you want a mod of any size and complexity made, this is the place to go!">
     <meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:site" content="@Ellpeck">
@@ -41,63 +41,88 @@
 
 <body>
     <div class="par">
-        <h1>Stuff I Made</h1>
-    </div>
-    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="5000">
-        <ol class="carousel-indicators">
-            <li data-target="#carousel" data-slide-to="0" class="active"></li>
-            <li data-target="#carousel" data-slide-to="1"></li>
-            <li data-target="#carousel" data-slide-to="2"></li>
-        </ol>
-        <div class="carousel-inner">
-            <div class="carousel-item active">
-                <img class="d-block w-100" src="media/nyx.png" style="object-position: top">
-                <div class="carousel-caption">
-                    <h2><a href="https://www.curseforge.com/minecraft/mc-mods/nyx">Nyx</a></h2>
-                    <p>Nyx is a mod that transforms and improves Minecraft's time of darkness by adding elements and events themed around the moon, stars, and night sky</p>
-                </div>
+        <h1>About Me</h1>
+        <div class="row">
+            <div class="col-md-auto">
+                <img class="rounded" width="180" height="180" src="../res/me.png">
             </div>
-            <div class="carousel-item">
-                <img class="d-block w-100" src="media/enchantmentstorage.png">
-                <div class="carousel-caption">
-                    <h2><a href="https://www.curseforge.com/minecraft/mc-mods/enchantment-storage">Enchantment Storage</a></h2>
-                    <p>Stores and automatically converts your enchanted books into a limitless repository of knowledge</p>
-                </div>
-            </div>
-            <div class="carousel-item">
-                <img class="d-block w-100" src="media/slingshot.png" style="object-position: bottom">
-                <div class="carousel-caption">
-                    <h2><a href="https://www.curseforge.com/minecraft/mc-mods/slingshot">Slingshot</a></h2>
-                    <p>Slingshot allows you to shoot different items with your slingshot for different effects</p>
-                </div>
+            <div class="col">
+                <p>Hi, I'm Ellpeck, a student and programmer from Germany. I've been making Minecraft mods for over 6 years, and during that time, I created some popular mods like <a href="https://www.curseforge.com/minecraft/mc-mods/actually-additions">Actually Additions</a> and <a href="https://www.curseforge.com/minecraft/mc-mods/natures-aura">Nature's Aura</a>. If you want to know more about my projects, you should check out <a href="https://ellpeck.de">my website</a>.</p>
+                <p>Recently, I started accepting commissions for mods as well. If you want a Minecraft mod of any size and complexity made, I can do that for you. ❤️</p>
             </div>
         </div>
-        <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
-            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
-        </a>
-        <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
-            <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
-        </a>
     </div>
 
     <div class="par">
-        <h1>What People Say</h1>
-
+        <h1>Past Commissions</h1>
+        <div class="mod-info">
+            <img src="media/slingshot.png" style="object-position: bottom">
+            <div class="mod-caption">
+                <h2><a href="https://www.curseforge.com/minecraft/mc-mods/slingshot">Slingshot</a></h2>
+                <p class="d-none d-sm-block">Slingshot allows you to shoot different items with your slingshot for different effects</p>
+            </div>
+        </div>
         <div class="test test-left">
             <p>A pleasant, kind, and easy to work with modder. He produces high quality work and is, in my opinion, well worth the money.</p>
             <p class="test-name">Violet</p>
         </div>
 
+        <div class="mod-info">
+            <img src="media/nyx.png" style="object-position: top">
+            <div class="mod-caption">
+                <h2><a href="https://www.curseforge.com/minecraft/mc-mods/nyx">Nyx</a></h2>
+                <p class="d-none d-sm-block">Nyx is a mod that transforms and improves Minecraft's time of darkness by adding elements and events themed around the moon, stars, and night sky</p>
+            </div>
+        </div>
         <div class="test test-right">
             Ellpeck has proven time and again to be very talented and open-minded when it comes to mod commissions. Easy and enjoyable to work with, and very patient when it comes to working out any inconsistencies. I’m happy to have collaborated with him!
             <p class="test-name">Drakallen</p>
         </div>
 
+        <div class="mod-info">
+            <img src="media/enchantmentstorage.png">
+            <div class="mod-caption">
+                <h2><a href="https://www.curseforge.com/minecraft/mc-mods/enchantment-storage">Enchantment Storage</a></h2>
+                <p class="d-none d-sm-block">Stores and automatically converts your enchanted books into a limitless repository of knowledge</p>
+            </div>
+        </div>
         <div class="test test-left">
             Working with Ellpeck was an immense pleasure, he was attentive and convivial during the entire process. Upon release, I was assured any and all problems would be handled immediately, although I have yet to encounter a single issue. Brilliant work and highly recommended.
             <p class="test-name">Zilch</p>
         </div>
     </div>
+
+    <div class="par">
+        <a id="terms"></a>
+        <h1>Terms and Pricing</h1>
+        <p>Here is all the information you need if you want to commission me to make a mod for you:</p>
+        <ul>
+            <li>I create Minecraft Forge mods only.</li>
+            <li>I work in Minecraft Versions 1.12.2 and upwards only.</li>
+            <li>No ports of existing mods or content.</li>
+            <li>No content that can't be created using "traditional" Java code (coremods).</li>
+            <li>You will have the choice of whether you want to receive the source code privately or whether I should publish it on GitHub.</li>
+            <li>You will have the choice of whether you want to be sent the mod jar or whether I should publish the mod on CurseForge. If the mod is published on CurseForge, you will get up to 50% of the share of Curse Points generated through the mod.</li>
+            <li>After the mod is completed, bug fixes are included for free, but feature updates and Minecraft version updates are not. They can be requested at a later date for a small fee though.</li>
+            <li>I charge between 10€ ($11) and 30€ ($33) an hour.
+                <ul>
+                    <li>I estimate the total amount of time it will take based on the size and complexity of the mod beforehand.</li>
+                    <li>I request half of the estimated amount to be paid before I start working on the mod, the other half once I'm finished. That way, there's security for both of us.</li>
+                    <li>If a feature takes much more time than expected, I might raise the second payment's price slightly. Of course, if I do this, I will also provide an explanation as to why this is necessary.</li>
+                </ul>
+            </li>
+            <li>You have to be at least 18 years old, and has to pay with their own PayPal account. I don't accept other forms of payment.</li>
+        </ul>
+
+    </div>
+
+    <div class="par">
+        <h1>Contact</h1>
+        <p>If you're interested, you can easily contact me by joining my Discord server and messaging me privately from there. Alternatively, you can also <a href="mailto:me@ellpeck.de">send me an email</a>.</p>
+        <a href="https://ellpeck.de/discord"><img class="discord-img" src="../res/discord.png"></a>
+    </div>
+
+    <div class="footer">
+        <a href="https://git.ellpeck.de/Ellpeck/Web">&copy; 2021 Ellpeck</a> &ndash; <a href="https://ellpeck.de/#impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/#privacy">Privacy</a>
+    </div>
 </body>
\ No newline at end of file
diff --git a/commissions/style.css b/commissions/style.css
index fc4a4af..1dbe385 100644
--- a/commissions/style.css
+++ b/commissions/style.css
@@ -2,31 +2,50 @@ body {
     font-family: Roboto;
 }
 
-.carousel-item img {
-    max-height: 80vh;
-    width: auto;
-    object-fit: cover;
-}
-
-.carousel-item a {
-    color: white;
-}
-
 .par {
     width: 95%;
     max-width: 850px;
-    margin-top: 1em;
-    margin-bottom: 1em;
+    margin-top: 30px;
+    margin-bottom: 30px;
     margin-left: auto;
     margin-right: auto;
 }
 
+.mod-info {
+    position: relative;
+}
+
+.mod-info img {
+    width: 100%;
+    max-height: 50vh;
+    object-fit: cover;
+}
+
+.mod-caption {
+    position: absolute;
+    bottom: 8px;
+    color: white;
+    text-align: center;
+    left: 50%;
+    transform: translate(-50%, 0);
+    background: rgb(0, 0, 0, 0.5);
+    padding: 10px;
+}
+
+.mod-caption a {
+    color: white;
+}
+
+.mod-caption p {
+    margin-bottom: 0;
+}
+
 .test {
     width: 90%;
-    margin-top: 20px;
-    padding: 20px;
+    margin-top: 10px;
+    margin-bottom: 40px;
+    padding: 15px;
     background-color: #f0f0f0;
-    border-radius: 5px;
 }
 
 .test-left {
@@ -42,4 +61,19 @@ body {
 .test-name {
     text-align: right;
     margin-bottom: 0;
+}
+
+.discord-img {
+    width: 80%;
+    max-width: 400px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 5px;
+}
+
+.footer {
+    padding-top: 80px;
+    padding-bottom: 10px;
+    text-align: center;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index d6b22ba..6bacf14 100644
--- a/index.html
+++ b/index.html
@@ -184,7 +184,7 @@
 
     <!-- Footer -->
     <div class="footer rounded-top">
-        <span class="text-muted"><a href="https://git.ellpeck.de/Ellpeck/Web">&copy; 2018-2020 Ellpeck</a> &ndash; <a href="#impressum">Impressum</a> &ndash; <a href="#privacy">Privacy</a></span>
+        <span class="text-muted"><a href="https://git.ellpeck.de/Ellpeck/Web">&copy; 2018-2021 Ellpeck</a> &ndash; <a href="#impressum">Impressum</a> &ndash; <a href="#privacy">Privacy</a></span>
         <div class="quote">
             <span id="quote-text"></span>
             <script src="scripts/quote.js"></script>
@@ -192,41 +192,6 @@
         </div>
     </div>
 
-    <div class="no-blog">
-        <!-- Commissions -->
-        <div class="modal fade" id="commissions-modal" tabindex="-1">
-            <div class="modal-dialog modal-lg">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h1 class="modal-title">Ellpeck's Minecraft Mod Commissions</h1>
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    </div>
-                    <div class="modal-body">
-                        <p>If you need a small to medium sized Minecraft mod for a modpack, a video or for personal use, you can contact me to make it for you.</p>
-                        <p>Here is all the information you need if you want to commission me to make a mod for you:</p>
-                        <ul>
-                            <li>Minecraft Forge mods only</li>
-                            <li>Minecraft Versions 1.12.2 and upwards only</li>
-                            <li>No ports of existing mods or content</li>
-                            <li>No content that can't be created using "traditional" Java code (coremods)</li>
-                            <li>I charge between 10€ ($11) and 30€ ($33) an hour
-                                <ul>
-                                    <li>I estimate the total amount of time it will take based on the size and complexity of the mod beforehand</li>
-                                    <li>The amount I estimate will be what you pay for, no matter how much longer or shorter it actually takes. This usually works out in your favor</li>
-                                    <li>I request half of the amount to be paid before I start working on the mod, the other half once I'm finished. That way, there's security for both of us</li>
-                                </ul>
-                            </li>
-                            <li>You will have the choice of whether you want to receive the source code privately or whether I should publish it on GitHub</li>
-                            <li>You will have the choice of whether you want to be sent the mod jar or whether I should publish the mod on CurseForge. If the mod is published on CurseForge, you will get up to 50% of the share of Curse Points generated through the mod</li>
-                            <li>After the mod is completed, bug fixes are included for free, but feature updates and Minecraft version updates are not. They can be requested at a later date for a small fee though</li>
-                        </ul>
-                        <p>If you're interested, you can either <a href="mailto:me@ellpeck.de">send me an email</a>, but better yet, <a href="https://ellpeck.de/discord">join my Discord server</a> and message me privately from there so we can talk about the details.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <!-- Impressum -->
     <div class="modal fade" id="impressum-modal" tabindex="-1">
         <div class="modal-dialog modal-lg">
