Contact form

fonts/icon.svg

@@ -7,7 +7,7 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" d="" horiz-adv-x="512" />
-<glyph unicode="&#xe600;" d="M0 512q0 79.429 53.714 146.857t146.571 106.571 202 39.143 202-39.143 146.571-106.571 53.714-146.857-53.714-146.857-146.571-106.571-202-39.143q-49.143 0-100.571 9.143-70.857-50.286-158.857-73.143-20.571-5.143-49.143-9.143h-1.714q-6.286 0-11.714 4.571t-6.571 12q-0.571 1.714-0.571 3.714t0.286 3.714 1.143 3.429l1.429 2.857t2 3.143 2.286 2.857 2.571 2.857 2.286 2.571q2.857 3.429 13.143 14.286t14.857 16.857 12.857 16.571 14.286 22 11.714 25.143q-70.857 41.143-111.429 101.143t-40.571 128zM352 148.571q33.143-2.286 50.286-2.286 92 0 176.571 25.714t150.857 73.714q71.429 52.571 109.714 121.143t38.286 145.143q0 44-13.143 86.857 73.714-40.571 116.571-101.714t42.857-131.429q0-68.571-40.571-128.286t-111.429-100.857q5.714-13.714 11.714-25.143t14.286-22 12.857-16.571 14.857-16.857 13.143-14.286q0.571-0.571 2.286-2.571t2.571-2.857 2.286-2.857 2-3.143l1.429-2.857t1.143-3.429 0.286-3.714-0.571-3.714q-1.714-8-7.429-12.571t-12.571-4q-28.571 4-49.143 9.143-88 22.857-158.857 73.143-51.429-9.143-100.571-9.143-154.857 0-269.714 75.429z" />
+<glyph unicode="&#xe600;" d="M81.613 702.157c24.986-13.466 371.149-199.373 384.051-206.285 12.851-6.912 29.542-10.24 46.336-10.24 16.845 0 33.536 3.328 46.387 10.291 12.902 6.912 359.014 192.819 384 206.285 25.037 13.414 48.691 55.552 2.765 55.552h-866.253c-45.926 0-22.323-42.138 2.714-55.603zM952.986 599.757c-28.416-14.848-377.19-197.171-394.598-206.285s-29.542-10.291-46.387-10.291c-16.794 0-28.928 1.178-46.336 10.291s-366.234 191.488-394.598 206.285c-20.019 10.445-19.866-1.792-19.866-11.213s0-375.552 0-375.552c0-21.504 28.621-49.152 50.79-49.152h820.070c22.221 0 50.739 27.648 50.739 49.101 0 0 0 366.131 0 375.552 0 9.472 0.205 21.709-19.814 11.264z" />
 <glyph unicode="&#xe601;" d="M433 915c50-134 24-207-32-265-61-64-156-112-223-206-89-125-104-400 217-472-135 71-164 277-18 406-38-125 32-205 119-176 85 29 141-32 139-102-1-48-20-89-69-112 209 37 293 210 293 342 0 174-155 198-77 344-93-8-125-69-116-169 6-66-63-111-114-81-41 25-40 73-4 109 77 76 107 251-115 382z" />
 <glyph unicode="&#xe602;" d="M1024 530.744c0 200.926-58.792 363.938-131.482 365.226 0.292 0.006 0.578 0.030 0.872 0.030h-82.942c0 0-194.8-146.336-475.23-203.754-8.56-45.292-14.030-99.274-14.030-161.502s5.466-116.208 14.030-161.5c280.428-57.418 475.23-203.756 475.23-203.756h82.942c-0.292 0-0.578 0.024-0.872 0.032 72.696 1.288 131.482 164.298 131.482 365.224zM864.824 220.748c-9.382 0-19.532 9.742-24.746 15.548-12.63 14.064-24.792 35.96-35.188 63.328-23.256 61.232-36.066 143.31-36.066 231.124 0 87.81 12.81 169.89 36.066 231.122 10.394 27.368 22.562 49.266 35.188 63.328 5.214 5.812 15.364 15.552 24.746 15.552 9.38 0 19.536-9.744 24.744-15.552 12.634-14.064 24.796-35.958 35.188-63.328 23.258-61.23 36.068-143.312 36.068-231.122 0-87.804-12.81-169.888-36.068-231.124-10.39-27.368-22.562-49.264-35.188-63.328-5.208-5.806-15.36-15.548-24.744-15.548zM251.812 530.744c0 51.95 3.81 102.43 11.052 149.094-47.372-6.554-88.942-10.324-140.34-10.324-67.058 0-67.058 0-67.058 0l-55.466-94.686v-88.17l55.46-94.686c0 0 0 0 67.060 0 51.398 0 92.968-3.774 140.34-10.324-7.236 46.664-11.048 97.146-11.048 149.096zM368.15 317.828l-127.998 24.51 81.842-321.544c4.236-16.634 20.744-25.038 36.686-18.654l118.556 47.452c15.944 6.376 22.328 23.964 14.196 39.084l-123.282 229.152zM864.824 411.27c-3.618 0-7.528 3.754-9.538 5.992-4.87 5.42-9.556 13.86-13.562 24.408-8.962 23.6-13.9 55.234-13.9 89.078s4.938 65.478 13.9 89.078c4.006 10.548 8.696 18.988 13.562 24.408 2.010 2.24 5.92 5.994 9.538 5.994 3.616 0 7.53-3.756 9.538-5.994 4.87-5.42 9.556-13.858 13.56-24.408 8.964-23.598 13.902-55.234 13.902-89.078 0-33.842-4.938-65.478-13.902-89.078-4.004-10.548-8.696-18.988-13.56-24.408-2.008-2.238-5.92-5.992-9.538-5.992z" />
 <glyph unicode="&#xe603;" d="M575.87-64h-191.87v512h-128v176.45l128 0.058-0.208 103.952c0 143.952 39.034 231.54 208.598 231.54h141.176v-176.484h-88.23c-66.032 0-69.206-24.656-69.206-70.684l-0.262-88.324h158.69l-18.704-176.45-139.854-0.058-0.13-512z" />

index.html

@@ -115,12 +115,11 @@ a:focus {
   color: rgba(255,255,255,.2);
 }
 
-#intro {
+#intro, #news {
   display: table;
   width: 100%;
   height: 100%;
   color: #fff;
-  background-image: url('background.jpg');
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -128,6 +127,10 @@ a:focus {
   background-position: -120px;
 }
 
+#intro {
+  background-image: url('background.jpg');
+}
+
 #intro-body {
   display: table-cell;
   vertical-align: middle;
@@ -170,22 +173,27 @@ h1 {
   margin-top: 0;
   padding-bottom: 22px;
   line-height: 6px;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
   cursor: default;
 }
 
-#about, #news {
+#about, #news, #contact {
   width: 100%;
   height: 100%;
   color: #fff;
   display: table;
 }
 
-#about {
+#about, #contact {
-  background: #0A0A0A;
+  background: #000;
 }
 
-#about-body, #news-body {
+#news {
+  background-image: url('background2.jpg');
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+
+#about-body, #news-body, #contact-body {
   display: table-cell;
   vertical-align: middle;
   padding-left: 10px;
@@ -196,29 +204,79 @@ h1 {
   text-align: center;
 }
 
-input {
+input, textarea {
-  border: #fff solid 1px;
+  border: none;
-  color: #fff;
+  color: #000;
-  background: none;
+  background: #fff;
   padding: 6px 8px 6px 9px;
-  width: 53px;
   font-family: 'Merriweather Sans', sans-serif;
   font-size: 12px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: background .3s ease-in-out;
+  -moz-transition: background .3s ease-in-out;
+  transition: background .3s ease-in-out;
+  resize: none;
+  margin: 0;
+}
+
+::-webkit-input-placeholder {
+  color: #808080;
+}
+:-moz-placeholder {
+  color: #808080;
+}
+::-moz-placeholder {
+  color: #808080;
+}
+:-ms-input-placeholder {
+  color: #808080;
+}
+
+#ipinput {
+  border: #fff solid 1px;
+  background: none;
+  color: #fff;
+  width: 53px;
   margin: 10px 0 0 0;
   -moz-border-radius: 0px 5px 5px 0px;
   -webkit-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;
-  -webkit-transition: background .3s ease-in-out;
-  -moz-transition: background .3s ease-in-out;
-  transition: background .3s ease-in-out;
 }
 
-input:hover,
+#ipinput:hover, #ipinput:focus {
-input:focus {
   outline: 0;
   background: rgba(255,255,255,.1);
   text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
 }
+
+input:focus, textarea:focus {
+  outline: 0;
+  background: rgba(255,255,255,.8);
+}
+
+button {
+  color: #fff;
+  background: none;
+  border: #fff solid 1px;
+  padding: 6px 8px 6px 9px;
+  font-family: 'Merriweather Sans', sans-serif;
+  font-size: 12px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-transition: background .3s ease-in-out;
+  -moz-transition: background .3s ease-in-out;
+  transition: background .3s ease-in-out;
+  cursor: pointer;
+}
+
+button:hover, button:focus {
+  outline: 0;
+  background: rgba(255,255,255,.1);
+}
+
 #ip {
   border: #fff solid 1px;
   color: #000;
@@ -255,7 +313,7 @@ input:focus {
   font-family: 'icon';
   content: '\e604';
 }
-#aboutbutton, #newsbutton, #forumbutton {
+#aboutbutton, #newsbutton, #contactbutton {
   color: #fff;
   border: 1px solid #fff;
   font-size: 14px;
@@ -268,7 +326,7 @@ input:focus {
   -moz-box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.3);
 }
-#aboutbutton:hover, #aboutbutton:focus, #newsbutton:hover, #newsbutton:focus, #forumbutton:hover, #forumbutton:focus {
+#aboutbutton:hover, #aboutbutton:focus, #newsbutton:hover, #newsbutton:focus, #contactbutton:hover, #contactbutton:focus {
   outline: 0;
   background: rgba(255,255,255,.1);
 }
@@ -282,7 +340,7 @@ input:focus {
   border-radius: 21px 0px 0px 21px;
   padding: 6px 10px 6px 12px;
 }
-#forumbutton {
+#contactbutton {
   -moz-border-radius: 0px 21px 21px 0px;
   -webkit-border-radius: 0px 21px 21px 0px;
   border-radius: 0px 21px 21px 0px;
@@ -299,7 +357,7 @@ input:focus {
   content: "\e602";
 }
 
-#forumbutton:before {
+#contactbutton:before, #contact-title:before {
   font-family: 'icon';
   content: "\e600";
 }
@@ -314,6 +372,11 @@ input:focus {
   position: relative;
 }
 
+#contactbutton:before {
+  top: 2px;
+  position: relative;
+}
+
 #news-title:before {
   font-weight: normal;
   margin-right: 12px;
@@ -328,6 +391,13 @@ input:focus {
   top: 2px;
 }
 
+#contact-title:before {
+  font-weight: normal;
+  margin-right: 12px;
+  position: relative;
+  top: 3px;
+}
+
 #news-box {
   height:290px;
   overflow: scroll;
@@ -348,6 +418,25 @@ input:focus {
   font-size: 9px;
   color: rgba(255,255,255,.4);
 }
+
+label {
+text-align: left;
+}
+
+label span {
+display: block;
+margin-bottom: 4px;
+font-size: 11px;
+}
+
+#second {
+margin-top: 15px;
+display: block;
+}
+
+button {
+  margin: 15px 0 0 0;
+}
 @media (min-width:767px){
 h1{
 padding-bottom: 15px;
@@ -375,14 +464,23 @@ padding-top:40px;
 padding-bottom:40px;
 font-size:16px;
 }
-input{
+#contact-body{
+padding-left:230px;
+padding-right:230px;
+padding-top:40px;
+padding-bottom:40px;
 font-size:16px;
+}
+input,textarea,button{
+font-size:16px;
+padding: 7px 9px 7px 10px;
+}
+#ipinput{
 margin:18px 0 0 0;
 width:70px;
 -moz-border-radius: 0px 6px 6px 0px;
 -webkit-border-radius: 0px 6px 6px 0px;
 border-radius: 0px 6px 6px 0px;
-padding: 7px 9px 7px 10px;
 }
 #ip{
 font-size:16px;
@@ -403,7 +501,7 @@ margin-bottom:30px;
 padding: 10px;
 font-size: 20px;
 }
-#aboutbutton, #newsbutton, #forumbutton{
+#aboutbutton, #newsbutton, #contactbutton{
 font-size: 19px;
 }
 #newsbutton{
@@ -412,7 +510,7 @@ padding: 8px 15px 8px 15px;
 #aboutbutton{
 padding: 8px 15px 8px 18px;
 }
-#forumbutton{
+#contactbutton{
 padding: 8px 18px 8px 15px;
 }
 #newsbutton:before{
@@ -424,6 +522,9 @@ margin-right: 16px;
 #about-title:before{
 margin-right: 13px;
 }
+#contact-title:before{
+margin-right: 16px;
+}
 #news-box{
 margin-bottom: 25px;
 height: 300px;
@@ -435,6 +536,15 @@ margin-bottom: 20px;
 font-size: 11px;
 color: rgba(255,255,255,.4);
 }
+#second{
+margin-top: 20px;
+}
+label span{
+font-size: 14px;
+margin-bottom: 6px;
+}
+button{
+margin: 25px 0 0 0;
 }
 </style>
 </head>
@@ -444,15 +554,15 @@ color: rgba(255,255,255,.4);
 <p id="icon"></p>
 <p id="logo">Flame.ga</p>
 <h1>All-OP Server in Minecraft</h1>
-<a href="#about" id="aboutbutton"></a><a href="#news" id="newsbutton"></a><a href="#" id="forumbutton"></a>
+<a href="#about" title="About" id="aboutbutton"></a><a href="#news" title="News" id="newsbutton"></a><a href="#contact" title="Contact" id="contactbutton"></a>
 </div>
 </div>
 <div id="about">
 <div id="about-body">
 <h2 id="about-title">About</h2>
 <p>Flame.ga provides you a unique and interesting experience in Minecraft. This server allows you to do whatever you want; griefing, acting like a staff member, building - you name it. A large set of operator (OP) commands is granted for you to use whenever you like, as well as a few server plugins, such as WorldEdit. With no rules, this is the perfect place to do what you may not be allowed to do elsewhere.</p>
-<p>Flame.ga uses an auto restart function, which assures the server will always stay up for you to play on. To give you a fresh and lag-free experience, the world will also reset automatically every Sunday. If you need to reach us, please send an e-mail to <a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#104;&#101;&#108;&#108;&#111;&#64;&#102;&#108;&#97;&#109;&#101;&#46;&#103;&#97;">&#104;&#101;&#108;&#108;&#111;&#64;&#102;&#108;&#97;&#109;&#101;&#46;&#103;&#97;</a>!</p>
+<p>Flame.ga uses an auto restart function, which assures the server will always stay up for you to play on. To give you a fresh and lag-free experience, the world will also reset automatically every Sunday. If you need to reach us, please use the contact form below!</p>
-<span id="ip">IP</span><input onClick="this.select();" value="flame.ga"><br/>
+<span id="ip">IP</span><input id="ipinput" onClick="this.select();" value="flame.ga"><br/>
 </div>
 </div>
 <div id="news">
@@ -460,7 +570,7 @@ color: rgba(255,255,255,.4);
 <h2 id="news-title">News</h2>
 <div id="news-box">
 <ul id="news-list">
-<li>A "News" section has been added to our website. We've also created a small forum for questions and issues.<br/>
+<li>A "News" section has been added to our website. We've also created a contact form for questions and issues.<br/>
 <span class="date">June 18, 2015</span></li>
 <li>The server should once again run 24/7, after having to solve a few problems. Apologies for the recent downtime.<br/>
 <span class="date">June 15, 2015</span></li>
@@ -483,5 +593,22 @@ color: rgba(255,255,255,.4);
 <a href="https://www.facebook.com/flameserver" id="facebook"></a><a href="https://twitter.com/flameserver" id="twitter"></a>
 </div>
 </div>
+<div id="contact">
+<div id="contact-body">
+<h2 id="contact-title">Contact</h2>
+<form action="//formspree.io/hello@flame.ga" method="POST">
+<label>
+<span>Email</span>
+<input type="email" name="_replyto" placeholder="Please enter your email" style="width:100%;box-sizing: border-box;" required>
+</label>
+<label id="second">
+<span>Message</span>
+<textarea name="body" rows="10" placeholder="Please enter your message" style="width:100%;box-sizing: border-box;" required></textarea>
+</label>
+<input type="hidden" name="_next" value="/sent" />
+<button type="submit">Send</button>
+</form>
+</div>
+</div>
 </body>
 </html>

index.html~

@@ -1,489 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Flame.ga provides you a unique and interesting experience in Minecraft. This server allows you to do whatever you want; griefing, trolling - you name it.">
-    <title>Flame.ga &#187; All-OP Server</title>
-    <style type="text/css">
-@font-face {
-  font-family: 'icon';
-  src: url('fonts/icon.eot');
-  src: url('fonts/icon.eot') format('embedded-opentype'), url('fonts/icon.woff') format('woff'), url('fonts/icon.ttf') format('truetype'), url('fonts/icon.svg') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Montserrat-Regular'), url(https://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
-}
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Montserrat-Bold'), url(https://themes.googleusercontent.com/static/fonts/montserrat/v4/IQHow_FEYlDC4Gzy_m8fcgFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
-}
-@font-face {
-  font-family: 'Merriweather Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'), url(https://fonts.gstatic.com/s/merriweathersans/v5/6LmGj5dOJopQKEkt88Gowby3qP8l_EZEfCX16eKT4TP3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
-}
-@-webkit-keyframes fadein{
-from{opacity:0;}
-to{opacity:1;}
-}
-@-moz-keyframes fadein{
-from{opacity:0;}
-to{opacity:1;}
-}
-@-ms-keyframes fadein{
-from{opacity:0;}
-to{opacity:1;}
-}
-@keyframes fadein{
-from{opacity:0;}
-to{opacity:1;}
-}
-
-html, body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Merriweather Sans', sans-serif;
-  color: #fff;
-  background: #000;
-  webkit-tap-highlight-color: rgba(255,255,255,.2);
-  -webkit-animation: fadein 1.5s;
-  -moz-animation: fadein 1.5s;
-  -ms-animation: fadein 1.5s;
-  -o-animation: fadein 1.5s;
-  animation: fadein 1.5s;
-  -webkit-transform: translateZ(0);
-  -webkit-backface-visibility: hidden;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-::-moz-selection {
-  background: #fcfcfc;
-  background: rgba(255,255,255,.2);
-}
-
-::selection {
-  background: #fcfcfc;
-  background: rgba(255,255,255,.2);
-}
-
-h2 {
-  margin: 0 0 15px;
-  text-transform: uppercase;
-  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-align: center;
-  font-size: 19px;
-  cursor: default;
-}
-
-p {
-  margin: 0 0 15px;
-  line-height: 1.5;
-  text-align: center;
-  cursor: default;
-}
-
-a {
-  text-decoration: none;
-  color: rgba(255,255,255,.4);
-  -webkit-transition: all .2s ease-in-out;
-  -moz-transition: all .2s ease-in-out;
-  transition: all .2s ease-in-out;
-}
-
-a:hover,
-a:focus {
-  color: rgba(255,255,255,.2);
-}
-
-#intro {
-  display: table;
-  width: 100%;
-  height: 100%;
-  color: #fff;
-  background-image: url('background.jpg');
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-  background-position: -120px;
-  background-attachment: fixed;
-}
-
-#intro-body {
-  display: table-cell;
-  vertical-align: middle;
-  text-align: center;
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-
-#icon {
-  font-size: 255px;
-  line-height: 222px;
-  margin-top: 0px;
-  font-family: 'icon';
-  text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.11);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-#icon:before {
-  content: "\e601";
-}
-
-#logo {
-  font-size: 35px;
-  text-transform: uppercase;
-  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-align: center;
-  margin: 0;
-  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.11);
-  cursor: default;
-}
-
-h1 {
-  font-size: 12px;
-  text-transform: uppercase;
-  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;  
-  font-weight: 400;
-  margin-top: 0;
-  padding-bottom: 22px;
-  line-height: 6px;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
-  cursor: default;
-}
-
-#about, #news {
-  width: 100%;
-  height: 100%;
-  color: #fff;
-  display: table;
-}
-
-#about {
-  background: #0A0A0A;
-}
-
-#about-body, #news-body {
-  display: table-cell;
-  vertical-align: middle;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 30px;
-  padding-bottom: 30px;
-  font-size: 12px;
-  text-align: center;
-}
-
-input {
-  border: #fff solid 1px;
-  color: #fff;
-  background: none;
-  padding: 6px 8px 6px 9px;
-  width: 53px;
-  font-family: 'Merriweather Sans', sans-serif;
-  font-size: 12px;
-  margin: 10px 0 0 0;
-  -moz-border-radius: 0px 5px 5px 0px;
-  -webkit-border-radius: 0px 5px 5px 0px;
-  border-radius: 0px 5px 5px 0px;
-  -webkit-transition: background .3s ease-in-out;
-  -moz-transition: background .3s ease-in-out;
-  transition: background .3s ease-in-out;
-}
-
-input:hover,
-input:focus {
-  outline: 0;
-  background: rgba(255,255,255,.1);
-  text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
-}
-#ip {
-  border: #fff solid 1px;
-  color: #000;
-  background: #fff;
-  padding: 6px 6px 6px 9px;
-  margin: 10px 0 0 0;
-  font-size: 12px;
-  -moz-border-radius: 5px 0px 0px 5px;
-  -webkit-border-radius: 5px 0px 0px 5px;
-  border-radius: 5px 0px 0px 5px;
-  cursor: default;
-}
-#facebook:before, #twitter:before {
-  border-radius: 50%;
-  display: inline-block;
-  padding: 8px;
-  font-size: 15px;
-  color: #fff;
-  text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.11);
-}
-#facebook {
-  margin-right: 6px;
-}
-#twitter {
-  margin-left: 6px;
-}
-#facebook:before {
-  background: #3b5998;
-  font-family: 'icon';
-  content: '\e603';
-}
-#twitter:before {
-  background: #0084b4;
-  font-family: 'icon';
-  content: '\e604';
-}
-#aboutbutton, #newsbutton, #forumbutton {
-  color: #fff;
-  border: 1px solid #fff;
-  font-size: 14px;
-  -webkit-transition: background .3s ease-in-out;
-  -moz-transition: background .3s ease-in-out;
-  transition: background .3s ease-in-out;
-  text-decoration: none;
-  text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.3);
-}
-#aboutbutton:hover, #aboutbutton:focus, #newsbutton:hover, #newsbutton:focus, #forumbutton:hover, #forumbutton:focus {
-  outline: 0;
-  background: rgba(255,255,255,.1);
-}
-#newsbutton {
-  border-left: 0;
-  padding: 6px 10px 6px 10px;
-}
-#aboutbutton {
-  -moz-border-radius: 21px 0px 0px 21px;
-  -webkit-border-radius: 21px 0px 0px 21px;
-  border-radius: 21px 0px 0px 21px;
-  padding: 6px 10px 6px 12px;
-}
-#forumbutton {
-  -moz-border-radius: 0px 21px 21px 0px;
-  -webkit-border-radius: 0px 21px 21px 0px;
-  border-radius: 0px 21px 21px 0px;
-  padding: 6px 13px 6px 10px;
-  border-left: 0;
-}
-#aboutbutton:before, #about-title:before {
-  font-family: 'icon';
-  content: "\e605";
-}
-
-#newsbutton:before, #news-title:before {
-  font-family: 'icon';
-  content: "\e602";
-}
-
-#forumbutton:before {
-  font-family: 'icon';
-  content: "\e600";
-}
-
-#aboutbutton:before {
-  top: 1px;
-  position: relative;
-}
-
-#newsbutton:before {
-  top: 1px;
-  position: relative;
-}
-
-#news-title:before {
-  font-weight: normal;
-  margin-right: 12px;
-  position: relative;
-  top: 2px;
-}
-
-#about-title:before {
-  font-weight: normal;
-  margin-right: 8px;
-  position: relative;
-  top: 2px;
-}
-
-#news-box {
-  height:290px;
-  overflow: scroll;
-  overflow-x: hidden;
-  margin-bottom: 15px;
-}
-
-#news-list {
-  text-align: left;
-  list-style-type: none;
-  padding-right: 10px;
-  padding: 0;
-}
-#news-list li{
-  margin-bottom: 15px;
-}
-.date{
-  font-size: 9px;
-  color: rgba(255,255,255,.4);
-}
-@media (min-width:767px){
-h1{
-padding-bottom: 15px;
-}
-h2{
-margin:0 0 25px;
-font-size:28px;
-}
-p{
-margin:0 0 20px;
-line-height:1.5/;
-}
-#intro{
-background-size:35px 35px;
-background-position: left;
-}
-#icon {
-font-size: 340px;
-line-height: 310px;
-margin-top: 0px;
-}
-#about-body,#news-body{
-padding-left:90px;
-padding-right:90px;
-padding-top:40px;
-padding-bottom:40px;
-font-size:16px;
-}
-input{
-font-size:16px;
-margin:18px 0 0 0;
-width:70px;
--moz-border-radius: 0px 6px 6px 0px;
--webkit-border-radius: 0px 6px 6px 0px;
-border-radius: 0px 6px 6px 0px;
-padding: 7px 9px 7px 10px;
-}
-#ip{
-font-size:16px;
-margin:18px 0 0 0;
--moz-border-radius: 6px 0px 0px 6px;
--webkit-border-radius: 6px 0px 0px 6px;
-border-radius: 6px 0px 0px 6px;
-padding: 7px 7px 7px 10px;
-}
-#logo{
-font-size:47px;
-}
-h1{
-font-size:16px;
-margin-bottom:30px;
-}
-#facebook:before, #twitter:before{
-padding: 10px;
-font-size: 20px;
-}
-#aboutbutton, #newsbutton, #forumbutton{
-font-size: 19px;
-}
-#newsbutton{
-padding: 8px 15px 8px 15px;
-}
-#aboutbutton{
-padding: 8px 15px 8px 18px;
-}
-#forumbutton{
-padding: 8px 18px 8px 15px;
-}
-#newsbutton:before{
-top: 2px;
-}
-#news-title:before{
-margin-right: 16px;
-}
-#about-title:before{
-margin-right: 13px;
-}
-#news-box{
-margin-bottom: 25px;
-height: 300px;
-}
-#news-list li{
-margin-bottom: 20px;
-}
-.date{
-font-size: 11px;
-color: rgba(255,255,255,.4);
-}
-}
-</style>
-</head>
-<body>
-<div id="intro">
-<div id="intro-body">
-<p id="icon"></p>
-<p id="logo">Flame.ga</p>
-<h1>All-OP Server in Minecraft</h1>
-<a href="#about" id="aboutbutton"></a><a href="#news" id="newsbutton"></a><a href="#" id="forumbutton"></a>
-</div>
-</div>
-<div id="about">
-<div id="about-body">
-<h2 id="about-title">About</h2>
-<p>Flame.ga provides you a unique and interesting experience in Minecraft. This server allows you to do whatever you want; griefing, acting like a staff member, building - you name it. A large set of operator (OP) commands is granted for you to use whenever you like, as well as a few server plugins, such as WorldEdit. With no rules, this is the perfect place to do what you may not be allowed to do elsewhere.</p>
-<p>Flame.ga uses an auto restart function, which assures the server will always stay up for you to play on. To give you a fresh and lag-free experience, the world will also reset automatically every Sunday. If you need to reach us, please send an e-mail to <a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#104;&#101;&#108;&#108;&#111;&#64;&#102;&#108;&#97;&#109;&#101;&#46;&#103;&#97;">&#104;&#101;&#108;&#108;&#111;&#64;&#102;&#108;&#97;&#109;&#101;&#46;&#103;&#97;</a>!</p>
-<span id="ip">IP</span><input onClick="this.select();" value="flame.ga"><br/>
-</div>
-</div>
-<div id="news">
-<div id="news-body">
-<h2 id="news-title">News</h2>
-<div id="news-box">
-<ul id="news-list">
-<li>A "News" section has been added to our website. We've also created a small forum for questions and issues.<br/>
-<span class="date">June 18, 2015</span></li>
-<li>The server should once again run 24/7, after having to solve a few problems. Apologies for the recent downtime.<br/>
-<span class="date">June 15, 2015</span></li>
-<li>We've migrated to a new hosting provider with better server specifications. ;)<br/>
-<span class="date">May 28, 2015</span></li>
-<li>There have been a few issues with our email address recently, which resulted in emails not getting sent to us. We have now fixed it.<br/>
-<span class="date">May 2, 2015</span></li>
-<li>Recently, DisguiseCraft stopped working due to a new issue in the server software. We will push a fix for this tomorrow. Another little detail; you will also be able to spawn and disguise as a Giant.<br/>
-<span class="date">April 25, 2015</span></li>
-<li>A few new commands have been added to the server.<br/>
-<span class="date">April 12, 2015</span></li>
-<li>The server is finally online again. Please connect with the new IP flame.ga if you want to play on the server.<br/>
-<span class="date">April 12, 2015</span></li>
-<li>Our website has now been updated. Check it out: <a href="https://flame.ga/">https://flame.ga/</a> ;)<br/>
-<span class="date">February 16, 2015</span></li>
-<li>The server was created. Thanks to both myokan and Kit_Kat_Matt for being very supportive and helpful during the early days.<br/>
-<span class="date">June 2, 2014</span></li>
-</ul>
-</div>
-<a href="https://www.facebook.com/flameserver" id="facebook"></a><a href="https://twitter.com/flameserver" id="twitter"></a>
-</div>
-</div>
-</body>
-</html>

sent

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Flame.ga provides you a unique and interesting experience in Minecraft. This server allows you to do whatever you want; griefing, trolling - you name it.">
+    <title>Flame.ga &#187; All-OP Server</title>
+    <style type="text/css">
+@font-face {
+  font-family: 'icon';
+  src: url('fonts/icon.eot');
+  src: url('fonts/icon.eot') format('embedded-opentype'), url('fonts/icon.woff') format('woff'), url('fonts/icon.ttf') format('truetype'), url('fonts/icon.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Regular'), url(https://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
+}
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Montserrat-Bold'), url(https://themes.googleusercontent.com/static/fonts/montserrat/v4/IQHow_FEYlDC4Gzy_m8fcgFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
+}
+@font-face {
+  font-family: 'Merriweather Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'), url(https://fonts.gstatic.com/s/merriweathersans/v5/6LmGj5dOJopQKEkt88Gowby3qP8l_EZEfCX16eKT4TP3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
+}
+@-webkit-keyframes fadein{
+from{opacity:0;}
+to{opacity:1;}
+}
+@-moz-keyframes fadein{
+from{opacity:0;}
+to{opacity:1;}
+}
+@-ms-keyframes fadein{
+from{opacity:0;}
+to{opacity:1;}
+}
+@keyframes fadein{
+from{opacity:0;}
+to{opacity:1;}
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Merriweather Sans', sans-serif;
+  color: #fff;
+  background: #000;
+  webkit-tap-highlight-color: rgba(255,255,255,.2);
+  -webkit-animation: fadein 1.5s;
+  -moz-animation: fadein 1.5s;
+  -ms-animation: fadein 1.5s;
+  -o-animation: fadein 1.5s;
+  animation: fadein 1.5s;
+  -webkit-transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+::-moz-selection {
+  background: #fcfcfc;
+  background: rgba(255,255,255,.2);
+}
+
+::selection {
+  background: #fcfcfc;
+  background: rgba(255,255,255,.2);
+}
+
+h2 {
+  margin: 0 0 15px;
+  text-transform: uppercase;
+  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-align: center;
+  font-size: 19px;
+  cursor: default;
+}
+
+p {
+  margin: 0 0 15px;
+  line-height: 1.5;
+  text-align: center;
+  cursor: default;
+}
+
+a {
+  text-decoration: none;
+  color: rgba(255,255,255,.5);
+  -webkit-transition: all .2s ease-in-out;
+  -moz-transition: all .2s ease-in-out;
+  transition: all .2s ease-in-out;
+}
+
+a:hover,
+a:focus {
+  color: rgba(255,255,255,.3);
+}
+
+#contact {
+  display: table;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background: #000;
+}
+
+#contact-body {
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  font-size: 12px;
+  text-align: center;
+}
+#contact-title:before {
+  font-family: 'icon';
+  content: "\e600";
+  font-weight: normal;
+  margin-right: 12px;
+  position: relative;
+  top: 3px;
+}
+@media (min-width:767px){
+h2{
+margin:0 0 25px;
+font-size:28px;
+}
+p{
+margin:0 0 20px;
+line-height:1.5/;
+}
+#contact-body{
+padding-left:90px;
+padding-right:90px;
+padding-top:40px;
+padding-bottom:40px;
+font-size:16px;
+}
+#contact-title:before{
+margin-right: 16px;
+}
+</style>
+</head>
+<body>
+<div id="contact">
+<div id="contact-body">
+<h2 id="contact-title">Contact</h2>
+<p>Thank you! Your message has been sent. We will reply as soon as possible.</p>
+<p><a href="/">Return to Flame.ga</a>
+</div>
+</div>
+</body>
+</html>