API tools faq
paste
Advertisement
Skyfay

Untitled

Skyfay
Mar 22nd, 2021
51
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.75 KB | None | 0 0
raw download clone embed print report
  1. HTML:
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <!-- Info meta tags, important for social media + SEO -->
  6. <title>SkyCraft - Official Website</title>
  7. <meta name="description" content="OpenWorld Survival PVP/PVE Minecraft Server. Trete uns bei über die IP 'play.skycraft.one'.">
  8. <meta property="og:title" content="SkyCraft - Official Website Portal">
  9. <meta property="og:site_name" content="SkyCraft">
  10. <meta property="og:description" content="OpenWorld Survival PVP/PVE Minecraft Server. Trete uns bei über die IP 'play.skycraft.one'.">
  11. <meta property="og:image" content="https://bybilly.uk/portal/img/minecraft.jpg">
  12. <meta property="og:url" content="https://bybilly.uk/">
  13. <meta name="twitter:card" content="summary_large_image">
  14. <link rel="shortcut icon" type="image/x-icon" href="img/Skyfay_Favicon_Offiziell.ico">
  15.  
  16.  
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <meta charset="utf-8">
  19. <link rel="stylesheet" href="css/stylesheet.css">
  20. <link rel="stylesheet" href="css/home.css">
  21. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
  22. </head>
  23. <body>
  24. </style>
  25. <div class="container">
  26. <div class="logo">
  27. <!-- In the img folder, upload your logo -->
  28. <!-- Make sure you name it 'logo.png' -->
  29. <img src="img/logo.png" alt="MyServer logo">
  30. </div>
  31.  
  32. <div class="items">
  33. <!-- Regeln-->
  34. <a href="#" class="item forums">
  35. <div>
  36. <img src="img/forums.png" alt="Minecraft forums icon" class="img">
  37. <p class="subtitle">Lese hier die</p>
  38. <p class="title">Regeln</p>
  39. </div>
  40. </a>
  41.  
  42. <!-- Store -->
  43. <a href="https://store.skycraft.one" class="item store">
  44. <div>
  45. <img src="img/store.png" alt="Minecraft store icon" class="img">
  46. <p class="subtitle">Hier ist unser</p>
  47. <p class="title">Store</p>
  48. </div>
  49. </a>
  50.  
  51. <!-- Voting -->
  52. <a id="button" class="item vote">
  53. <div>
  54. <img src="img/vote.png" alt="Minecraft voting icon" class="img">
  55. <p class="subtitle">Supporte uns mit</p>
  56. <p class="title">Voting</p>
  57. </div>
  58. </a>
  59.  
  60. <script>
  61. button.onclick = function() {
  62. window.scrollBy({ top: 1710, left: 0, behavior: "smooth" });
  63. }
  64. </script>
  65.  
  66. <!-- Server Status -->
  67. <a href="https://status.skycraft.one" class="item vote">
  68. <div>
  69. <img src="img/status.PNG" alt="Minecraft voting icon" class="img">
  70. <p class="subtitle">Hier siehst du unseren</p>
  71. <p class="title">Server Status</p>
  72. </div>
  73. </a>
  74.  
  75. </div>
  76.  
  77. <div class="playercount">
  78. <!-- Replace play.myserver.net with your IP address -->
  79. <!-- Do it for both examples below -->
  80. <!-- Please set both your IP and port -->
  81. <p>Spiele mit <span class="sip" data-ip="play.skycraft.one" data-port="25565">
  82. 0</span> anderen spielern auf <span class="ip">play.skycraft.one</span></p>
  83.  
  84. </div>
  85. </div>
  86. <div class="ueber-uns">
  87. <div class="main-content">
  88. <h2>Über uns</h2>
  89. <p class="about-text">SkyCraft ist ein OpenWorld-Survival Server. Der Server eröffnete am 28.01.2021 ihre Pforte. Der Server entstand, da wir finden, dass es im allgemeinen keine wirklich guten OpenWorld Server gibt.<br>Also haben wir uns entschieden, einen neuen Server zu eröffnen.Wir versuchen den Server stets weiter zu entwickeln und immer auf die neuste Minecraft Version zu upgraden.
  90. </div>
  91.  
  92. <div class="gradient">
  93. <div class="flex-container">
  94. <div class="split">
  95. <a href="#"><img class="img1" src="img/allgemein-command.png" width="" alt="Image of Forums icon"> </a>
  96. <h3>Allgemein</h3>
  97. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tincidunt lorem. Donec a mollis diam, posuere venenatis lorem. Vestibulum sit amet risus eros. Nam commodo tortor a nunc tempor, sit amet auctor purus elementum.</p>
  98. </div>
  99. <div class="split">
  100. <a href="#"><img class="img1" src="img/teleport-command.png" alt="Image of Store icon"></a>
  101. <h3>Teleportieren</h3>
  102. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tincidunt lorem. Donec a mollis diam, posuere venenatis lorem. Vestibulum sit amet risus eros. Nam commodo tortor a nunc tempor, sit amet auctor purus elementum.</p>
  103. </div>
  104. <div class="split">
  105. <a href="#vote-section"><img class="img1" src="img/Griefprevention-command-256.png" alt="Image of Voting icon"></a>
  106. <h3>Griefing Schutz</h3>
  107. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tincidunt lorem. Donec a mollis diam, posuere venenatis lorem. Vestibulum sit amet risus eros. Vote for us below!</p>
  108. </div>
  109. </div>
  110. </div>
  111.  
  112.  
  113.  
  114.  
  115. <div class="vote-section">
  116. <h2>Vote Für Uns</h2>
  117. <p>Du kannst gerne Voten um den Server zu unterstützen! Es gibt dazu Belohnungen, welche mit <span style="color: #0fb117">/voteshop</span> eingelöst werden können.</p>
  118. <div class="vote-container">
  119. <div class="vote">
  120. <h2>Minecraft-Server.eu</h2>
  121. <a href="https://minecraft-server.eu/vote/index/21E0B"><button class="vote-btn">Vote Now</button></a>
  122. </div>
  123. <div class="vote">
  124. <h2>MinecraftServers.org</h2>
  125. <a href="https://minecraftservers.org/vote/606935"><button class="vote-btn">Vote Now</button></a>
  126. </div>
  127. <div class="vote">
  128. <h2>TopG.org</h2>
  129. <a href="https://topg.org/de/Minecraft/in-622945"><button class="vote-btn">Vote Now</button></a>
  130. </div>
  131. <div class="vote">
  132. <h2>Minecraft-MP.com</h2>
  133. <a href="https://minecraft-mp.com/server/279858/vote/"><button class="vote-btn">Vote Now</button></a>
  134. </div>
  135. <div class="vote">
  136. <h2>Minecraft-Server-List.com</h2>
  137. <a href="https://minecraft-server-list.com/server/473656/vote/"><button class="vote-btn">Vote Now</button></a>
  138. </div>
  139. </div>
  140. </div>
  141.  
  142.  
  143. <div class="gradient1">
  144. <div class="flex-container">
  145. <div class="split">
  146. <h2><a style="color: white;">Regeln</a></h2>
  147. <p>Wie auf jedem Server gibt es natürlich auch bei uns einige Dinge, die beachtet werden müssen.</p>
  148. <br>
  149. <p>1. Hacks oder andere Mods sind nicht erlaubt! (Badlion Client ist erlaubt)</p>
  150. <p>2. X-Ray ist natürlich auch nicht erlaubt!</p>
  151. <p>3. Es ist erlaubt Spieler zu töten!</p>
  152. <p>4. Jeder Spieler ist selber dafür verantwortlich, wem er traut.</p>
  153. <p>5. Man kann seine Base schützen. Wie genau wird in <a href="https://youtu.be/ve_yB8SSxbQ" style="color: gold;">diesem</a> Video erklärt.</p>
  154. <p>6. Wenn eure Base kaputt geht, weil Ihr Sie nicht gesichert habt, haften wir nicht!</p>
  155. <p>7. Man darf sich verbünden und mit anderen spielern spielen.</p>
  156. <p>8. Ein Bug muss gemeldet werden und darf nicht ausgenutzt werden.</p>
  157. <p>9. Bitte seid nett zueinander und respektiert euch. Beileidigungen und Hassreden dulden wir nicht!</p>
  158. <p>10. Macht bitte keine Werbung von anderen Servern.</p>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
  164. <script src="js/firefly.js" type="text/javascript"></script>
  165. <script src="js/main.js" type="text/javascript"></script>
  166. </body>
  167. <footer>
  168. </footer>
  169. </html>
  170.  
  171. CSS:
  172. * {
  173. box-sizing: border-box;
  174. }
  175. html, body {
  176. margin: 0;
  177. overflow-x: hidden;
  178. display: flex;
  179. flex-direction: column;
  180. justify-content: center;
  181. align-items: stretch;
  182. }
  183.  
  184. a {
  185. text-decoration: none;
  186. }
  187.  
  188. h2 {
  189. font-size: 2em;
  190. color: #595a5b;
  191. }
  192.  
  193. p {
  194. margin: 0;
  195. padding: 3px;
  196. }
  197.  
  198. .container {
  199. align-self: stretch;
  200. display: flex;
  201. flex-direction: column;
  202. justify-content: center;
  203. align-items: center;
  204. background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
  205. url("../img/minecraft.png") no-repeat center center fixed;
  206. /*min-height: 100vh;*/
  207. flex: 1 0 100vh;
  208. background-size: cover;
  209. font-family: "Open Sans", Helvetica;
  210. margin: 0;
  211. position: relative;
  212. box-sizing: border-box;
  213. }
  214.  
  215. .logo img {
  216. width: 225px; /* Change image size for mobile */
  217. -webkit-animation-name: logo;
  218. animation-name: logo;
  219. -webkit-animation-duration: 5s;
  220. animation-duration: 5s;
  221. -webkit-animation-iteration-count: infinite;
  222. animation-iteration-count: infinite;
  223. -webkit-animation-timing-function: ease-in-out;
  224. animation-timing-function: ease-in-out;
  225. }
  226.  
  227.  
  228. @-webkit-keyframes logo {
  229. 0% {
  230. -webkit-transform: scale(1);
  231. transform: scale(1);
  232. }
  233. 50% {
  234. -webkit-transform: scale(1.07);
  235. transform: scale(1.07);
  236. }
  237. 100% {
  238. -webkit-transform: scale(1);
  239. transform: scale(1);
  240. }
  241. }
  242.  
  243. @keyframes logo {
  244. 0% {
  245. -webkit-transform: scale(1);
  246. transform: scale(1);
  247. }
  248. 50% {
  249. -webkit-transform: scale(1.07);
  250. transform: scale(1.07);
  251. }
  252. 100% {
  253. -webkit-transform: scale(1);
  254. transform: scale(1);
  255. }
  256. }
  257.  
  258. .playercount {
  259. display: inline-block;
  260. margin: 20px 15px 0 15px;
  261. padding: 2px 0;
  262. background-color: rgba(15, 99, 209, 0.75);
  263. font-size: 1em;
  264. color: white;
  265. text-align: center;
  266. border-radius: 5px 0 5px 0;
  267. line-height: 27px;
  268. }
  269.  
  270. .playercount > p > span {
  271. font-weight: bold;
  272. padding: 1px 4px;
  273. border-radius: 3px;
  274. background: rgba(13, 56, 167, 0.7);
  275. margin: 0 2px;
  276. }
  277.  
  278. .extrapad {
  279. padding: 0;
  280. }
  281.  
  282. .ip {
  283. cursor: pointer;
  284. }
  285.  
  286. .items {
  287. display: -webkit-box;
  288. display: -ms-flexbox;
  289. display: flex;
  290. -ms-flex-pack: distribute;
  291. justify-content: space-around;
  292. -ms-flex-preferred-size: 100px;
  293. flex-basis: 100px;
  294. padding: 18px 0 10px 0;
  295.  
  296. }
  297.  
  298. .item{
  299. flex: 1 0 auto;
  300. }
  301.  
  302. .item img {
  303. -webkit-transition: all 0.2s ease;
  304. -o-transition: all 0.2s ease;
  305. transition: all 0.2s ease;
  306. margin-bottom: 7px;
  307. }
  308.  
  309. .item img:hover {
  310. -webkit-transform:scale(1.1);
  311. -ms-transform:scale(1.1);
  312. transform:scale(1.1);
  313. }
  314.  
  315. .img {
  316. width: 80%;
  317. }
  318.  
  319. .title {
  320. font-weight: bold;
  321. font-size: 17px;
  322. color: white;
  323. }
  324.  
  325. .subtitle {
  326. color: #cfcfcf;
  327. font-size: 12px;
  328. }
  329.  
  330. .title,
  331. .subtitle {
  332. margin: 0;
  333. padding: 0;
  334. }
  335.  
  336.  
  337. @media(min-width: 400px) {
  338. .logo img {
  339. width: 290px; /* Change image size for mid sized devices */
  340. }
  341.  
  342. .playercount {
  343. margin-top: 30px;
  344. padding: 5px;
  345. }
  346.  
  347. .playercount > p > span {
  348. padding: 2px 7px;
  349. }
  350. }
  351.  
  352. @media(min-width: 1250px) {
  353. .title {
  354. font-size: 24px;
  355. }
  356.  
  357. .subtitle {
  358. font-size: 15px;
  359. }
  360.  
  361. .logo img {
  362. width: 470px; /* Change image size for desktop */
  363. }
  364.  
  365. .logo {
  366. margin-bottom: 28px;
  367. }
  368. .img {
  369. width: 100%;
  370. }
  371. .items {
  372. padding: 30px 0 20px 0;
  373. }
  374. .playercount {
  375. font-size: 1.22em;
  376. padding: 10px;
  377. }
  378.  
  379. .extrapad {
  380. padding: 0 42.5px;
  381. }
  382.  
  383. .playercount > p > span {
  384. padding: 4px 7px;
  385. }
  386. }
  387.  
  388. @media(min-width: 1000px) {
  389. .items {
  390. -webkit-box-pack: center;
  391. -ms-flex-pack: center;
  392. justify-content: center;
  393. }
  394.  
  395. .item:not(:first-child) {
  396. margin-left: 90px;
  397. }
  398. }
  399.  
  400. .ueber-uns{
  401. text-align: center;
  402. padding-bottom: 30px;
  403. padding-top: 10px;
  404. font-size: 1.2em;
  405. line-height: 1.5em;
  406. }
  407.  
  408. /* Home */
  409. header {
  410. min-height: 100vh;
  411. background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55) 70%, rgba(66, 134, 244, 0.45) 99%),
  412. url("../img/minecraft.png") no-repeat center center;
  413. background-size: cover;
  414. }
  415.  
  416. /* Main Content */
  417.  
  418. .img {
  419. transition: all 0.4s ease;
  420. padding-bottom: 10px;
  421. }
  422.  
  423. .img1 {
  424. width: 50%;
  425. }
  426.  
  427. .img:hover {
  428. transform: scale(1.05);
  429. }
  430.  
  431. .about-text {
  432. padding-bottom: 30px;
  433. padding-top: 10px;
  434. }
  435.  
  436. .gradient {
  437. margin-top: 20px;
  438. color: white;
  439. text-align: center;
  440. padding: 30px;
  441. background-size: cover;
  442. background: linear-gradient(#4286f4, #70d8ff) fixed;
  443. }
  444.  
  445. .gradient1 {
  446. margin-top: 20px;
  447. color: white;
  448. text-align: center;
  449. padding: 30px;
  450. background-size: cover;
  451. background: linear-gradient(#f49242, #ff7070) fixed;
  452. }
  453.  
  454. .flex-container {
  455. margin: 0 auto;
  456. max-width: 1100px;
  457. display: flex;
  458. flex-wrap: wrap;
  459. }
  460.  
  461. .split,
  462. .vote {
  463. flex: 1 0 auto;
  464. }
  465.  
  466. .vote-btn {
  467. background-color: rgb(255,255,255);
  468. border: 2px solid #595a5b;
  469. padding: 20px 40px;
  470. outline: none;
  471. cursor: pointer;
  472. transition-duration: 0.4s;
  473. text-transform: uppercase;
  474. }
  475.  
  476. .vote-btn:hover {
  477. background-color: #595a5b;
  478. color: white;
  479. }
  480.  
  481. .vote-container {
  482. display: flex;
  483. flex-wrap: wrap;
  484. margin: 25px auto 0 auto;
  485. max-width: 1100px;
  486. justify-content: space-around;
  487. border-top: 1px solid;
  488. }
  489.  
  490. .vote-section {
  491. text-align: center;
  492. max-width: 900px;
  493. margin: 0 auto;
  494. }
  495.  
  496. .split,
  497. .vote {
  498. padding: 5px;
  499. margin: 10px;
  500. }
  501.  
  502. .split {
  503. flex-basis: 250px;
  504. }
  505.  
  506. .vote {
  507. flex-basis: 210px;
  508. }
  509.  
  510. /* Media Queries */
  511.  
  512. @media(min-width: 1000px) {
  513. .item:not(:first-child) {
  514. margin-left: 90px;
  515. }
  516. }
  517.  
  518. @media(min-width: 700px) {
  519. .main-content {
  520. width: 40%;
  521. text-align: center;
  522. margin: 0 auto;
  523. }
  524. .playercount {
  525. font-size: 1.2em;
  526. }
  527. }
  528.  
  529. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  530. .vote {
  531. min-width: 50%;
  532. }
  533. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!