Design and logic for user-facing site https://exmods.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

template.html 4.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta name="theme-color" content="#fdce72" />
  5. <meta name="author" content="NGnius" />
  6. <meta name="keywords" content="pixi,exmods,gamecraft,modding,mod" />
  7. <meta name="og:type" content="website" />
  8. <meta name="og:title" content="Pixi" />
  9. <meta name="og:description" content="Pixi mod for Gamecraft" />
  10. <meta name="description" content="Pixi mod for Gamecraft" />
  11. <meta name="og:image" content="../../mods/Pixi/pixi-logo.png" />
  12. <meta name="og:url" content="https://www.exmods.org/mods/Pixi" />
  13. <meta charset="UTF-8" />
  14. <link rel="icon" href="../../mods/Pixi/pixi-logo.png" type="image/x-icon"/>
  15. <link rel="shortcut icon" href="../../mods/Pixi/pixi-logo.png" type="image/x-icon"/>
  16. <!--<link rel="stylesheet" href="../../mods/Pixi/style.css" type="text/css" />-->
  17. <style type="text/css" style="display: none;" rel="stylesheet">
  18. body {text-align: left; background-color: #8a704e; animation-name: background-fade-in; animation-duration: 3s;}
  19. footer {text-align: right; width: clamp(100px, 96%, 1600px); border: 4px; border-style: solid; border-color: #d98c61; margin: auto; background-color: #ffd072; animation-name: foreground-fade-in; animation-duration: 3s;}
  20. .content-wrapper {width: clamp(100px, 96%, 1600px); padding: 0; margin: auto; border:0px; border-left: 4px; border-right: 4px; border-style: solid; border-color: #d98c61; background-color: #ffd072; animation-name: foreground-fade-in; animation-duration: 3s;}
  21. .content-title {text-align: center; font-size: 400%; font-weight: bold; padding-top: 1%;}
  22. .content-subtitle {text-align: center; font-size: 150%; vertical-align: middle;}
  23. .content-header {text-align: left; padding-left: 12%; font-size: 200%; vertical-align: middle; font-weight: bold;}
  24. .content-img-header {text-align: left; padding-left: 12%; padding-bottom: 2%; margin-top: -5%; font-size: 250%; vertical-align: middle; font-weight: bold;}
  25. .content-text {padding: 1%; line-height: 142%;}
  26. .tab { margin-left: 40px; }
  27. /* I feel like a kid messing around with Flash animations */
  28. @keyframes background-fade-in { from {background-color: #d98c61;} to {background-color: #8a704e;}}
  29. @keyframes foreground-fade-in { from {background-color: #8a704e; border-color: #8a704e;} to {background-color: #ffd072; border-color: #d98c61;}}
  30. @keyframes swoop { from {bottom: -50%;} to {bottom: 110%;}}
  31. </style>
  32. <title>Pixi</title>
  33. </head>
  34. <body>
  35. <div class="content-wrapper">
  36. <div class="content-title">
  37. <div style="text-align: center;">
  38. <img src="../../mods/Pixi/pixi-logo.png" width="8%" style="vertical-align: middle;" />
  39. <span style="vertical-align: middle;">Title</span>
  40. <img src="../../mods/Pixi/pixi-logo.png" width="8%" style="vertical-align: middle; -webkit-transform: scaleX(-1); transform: scaleX(-1);" />
  41. </div>
  42. </div>
  43. <div class="content-subtitle">
  44. <span>Page description or flavour text.</span>
  45. </div>
  46. <div class="content-text">
  47. <p>Pixi information goes here.
  48. For now, this is just useless text that I spent a bit too much time typing out.
  49. Once, there was a young swallow-tail butterfly named Bob.
  50. Bob was a cool butterfly, until one day some guy came after him.
  51. The guy was well-known in the modding community for making cool mods that involved snakes and termites (terminals?).
  52. The guy wanted to make a logo, so he ripped Bob's wings off and used the wings to create the logo for Pixi.
  53. Pixi is a Gamecraft mod for converting a variety of stuff into Gamecraft blocks.
  54. And thus Pixi was born, amen.
  55. </p>
  56. </div>
  57. </div>
  58. <footer>
  59. <div style="padding: 0.5%; padding-left: 1%; padding-right: 1%;">
  60. exmods.org|<a href="https://git.exmods.org/ExMods/html-site">Site Repository</a>|<a href="https://exmods.org">Home</a>|<a href="https://discord.gg/2CtWzZT">Discord</a>|<a href="https://twitter.com/GamecraftMods">Twitter</a>
  61. </div>
  62. </footer>
  63. <div style="position: relative; animation-name: swoop; animation-duration: 0.5s; bottom: 115%; text-align: center;">
  64. Fly, pixi, fly!
  65. </div>
  66. </body>
  67. </html>