API tools faq
paste
Advertisement
Skyfay

Untitled

Skyfay
Mar 22nd, 2021
294
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.90 KB | None | 0 0
raw download clone embed print report
  1. HTML:
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <!-- Info meta tags, important for social media + SEO -->
  7. <title>SkyCraft - Official Website</title>
  8. <meta name="description" content="OpenWorld Survival PVP/PVE Minecraft Server. Trete uns bei über die IP 'play.skycraft.one'.">
  9. <meta property="og:title" content="SkyCraft - Official Website Portal">
  10. <meta property="og:site_name" content="SkyCraft">
  11. <meta property="og:description" content="OpenWorld Survival PVP/PVE Minecraft Server. Trete uns bei über die IP 'play.skycraft.one'.">
  12. <meta property="og:image" content="https://bybilly.uk/portal/img/minecraft.jpg">
  13. <meta property="og:url" content="https://bybilly.uk/">
  14. <meta name="twitter:card" content="summary_large_image">
  15. <link rel="shortcut icon" type="image/x-icon" href="img/Skyfay_Favicon_Offiziell.ico">
  16.  
  17.  
  18. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19. <meta charset="utf-8">
  20. <link rel="stylesheet" href="css/stylesheet.css">
  21. <link rel="stylesheet" href="css/home.css">
  22. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
  23. </head>
  24. <body>
  25. </style>
  26. <div class="container">
  27. <div class="logo">
  28. <!-- In the img folder, upload your logo -->
  29. <!-- Make sure you name it 'logo.png' -->
  30. <img src="img/logo.png" alt="MyServer logo">
  31. </div>
  32.  
  33. <div class="items">
  34. <!-- Regeln-->
  35. <a href="#" class="item forums">
  36. <div>
  37. <img src="img/forums.png" alt="Minecraft forums icon" class="img">
  38. <p class="subtitle">Lese hier die</p>
  39. <p class="title">Regeln</p>
  40. </div>
  41. </a>
  42.  
  43. <!-- Store -->
  44. <a href="https://store.skycraft.one" class="item store">
  45. <div>
  46. <img src="img/store.png" alt="Minecraft store icon" class="img">
  47. <p class="subtitle">Hier ist unser</p>
  48. <p class="title">Store</p>
  49. </div>
  50. </a>
  51.  
  52. <!-- Voting -->
  53. <a href="" class="item vote">
  54. <div>
  55. <img src="img/vote.png" alt="Minecraft voting icon" class="img">
  56. <p class="subtitle">Supporte uns mit</p>
  57. <p class="title">Voting</p>
  58. </div>
  59. </a>
  60.  
  61. <!-- Server Status -->
  62. <a href="https://status.skycraft.one" class="item vote">
  63. <div>
  64. <img src="img/status.PNG" alt="Minecraft voting icon" class="img">
  65. <p class="subtitle">Hier siehst du unseren</p>
  66. <p class="title">Server Status</p>
  67. </div>
  68. </a>
  69.  
  70. </div>
  71.  
  72. <div class="playercount">
  73. <!-- Replace play.myserver.net with your IP address -->
  74. <!-- Do it for both examples below -->
  75. <!-- Please set both your IP and port -->
  76. <p>Spiele mit <span class="sip" data-ip="play.skycraft.one" data-port="25565">
  77. 0</span> anderen spielern auf <span class="ip">play.skycraft.one</span></p>
  78.  
  79. </div>
  80. </div>
  81. <div class="ueber-uns">
  82. <div class="main-content">
  83. <h2>Über uns</h2>
  84. <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.
  85. </div>
  86.  
  87. <div class="gradient">
  88. <div class="flex-container">
  89. <div class="split">
  90. <a href="#"><img class="img1" src="img/allgemein-command.png" width="" alt="Image of Forums icon"> </a>
  91. <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>
  92. </div>
  93. <div class="split">
  94. <a href="#"><img class="img1" src="img/teleport-command.png" alt="Image of Store icon"></a>
  95. <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>
  96. </div>
  97. <div class="split">
  98. <a href="#vote-section"><img class="img1" src="img/Griefprevention-command-256.png" alt="Image of Voting icon"></a>
  99. <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>
  100. </div>
  101. </div>
  102. </div>
  103.  
  104.  
  105.  
  106.  
  107. <div class="vote-section">
  108. <h2>Vote For Us</h2>
  109. <p>Please consider voting for MyServer using the links below! Not only does this benifit us massivly, but you also get rewards in-game.</p>
  110. <div class="vote-container">
  111. <div class="vote">
  112. <h2>PlanetMinecraft.com</h2>
  113. <a href="#"><button class="vote-btn">Vote Now</button></a>
  114. </div>
  115. <div class="vote">
  116. <h2>MinecraftServers.org</h2>
  117. <a href="#"><button class="vote-btn">Vote Now</button></a>
  118. </div>
  119. <div class="vote">
  120. <h2>TopG.org</h2>
  121. <a href="#"><button class="vote-btn">Vote Now</button></a>
  122. </div>
  123. <div class="vote">
  124. <h2>Minecraft-MP.com</h2>
  125. <a href="#"><button class="vote-btn">Vote Now</button></a>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
  131. <script src="js/firefly.js" type="text/javascript"></script>
  132. <script src="js/main.js" type="text/javascript"></script>
  133. </body>
  134. <footer>
  135. </footer>
  136. </html>
  137.  
  138. CSS:
  139. * {
  140. box-sizing: border-box;
  141. }
  142. html, body {
  143. margin: 0;
  144. overflow-x: hidden;
  145. display: flex;
  146. flex-direction: column;
  147. justify-content: center;
  148. align-items: stretch;
  149. }
  150.  
  151. a {
  152. text-decoration: none;
  153. }
  154.  
  155. h2 {
  156. font-size: 2em;
  157. color: #595a5b;
  158. }
  159.  
  160. p {
  161. margin: 0;
  162. padding: 3px;
  163. }
  164.  
  165. .container {
  166. align-self: stretch;
  167. display: flex;
  168. flex-direction: column;
  169. justify-content: center;
  170. align-items: center;
  171. background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
  172. url("../img/minecraft.png") no-repeat center center fixed;
  173. /*min-height: 100vh;*/
  174. flex: 1 0 100vh;
  175. background-size: cover;
  176. font-family: "Open Sans", Helvetica;
  177. margin: 0;
  178. position: relative;
  179. box-sizing: border-box;
  180. }
  181.  
  182. .logo img {
  183. width: 225px; /* Change image size for mobile */
  184. -webkit-animation-name: logo;
  185. animation-name: logo;
  186. -webkit-animation-duration: 5s;
  187. animation-duration: 5s;
  188. -webkit-animation-iteration-count: infinite;
  189. animation-iteration-count: infinite;
  190. -webkit-animation-timing-function: ease-in-out;
  191. animation-timing-function: ease-in-out;
  192. }
  193.  
  194.  
  195. @-webkit-keyframes logo {
  196. 0% {
  197. -webkit-transform: scale(1);
  198. transform: scale(1);
  199. }
  200. 50% {
  201. -webkit-transform: scale(1.07);
  202. transform: scale(1.07);
  203. }
  204. 100% {
  205. -webkit-transform: scale(1);
  206. transform: scale(1);
  207. }
  208. }
  209.  
  210. @keyframes logo {
  211. 0% {
  212. -webkit-transform: scale(1);
  213. transform: scale(1);
  214. }
  215. 50% {
  216. -webkit-transform: scale(1.07);
  217. transform: scale(1.07);
  218. }
  219. 100% {
  220. -webkit-transform: scale(1);
  221. transform: scale(1);
  222. }
  223. }
  224.  
  225. .playercount {
  226. display: inline-block;
  227. margin: 20px 15px 0 15px;
  228. padding: 2px 0;
  229. background-color: rgba(15, 99, 209, 0.75);
  230. font-size: 1em;
  231. color: white;
  232. text-align: center;
  233. border-radius: 5px 0 5px 0;
  234. line-height: 27px;
  235. }
  236.  
  237. .playercount > p > span {
  238. font-weight: bold;
  239. padding: 1px 4px;
  240. border-radius: 3px;
  241. background: rgba(13, 56, 167, 0.7);
  242. margin: 0 2px;
  243. }
  244.  
  245. .extrapad {
  246. padding: 0;
  247. }
  248.  
  249. .ip {
  250. cursor: pointer;
  251. }
  252.  
  253. .items {
  254. display: -webkit-box;
  255. display: -ms-flexbox;
  256. display: flex;
  257. flex-wrap: wrap;
  258. -ms-flex-pack: distribute;
  259. justify-content: space-around;
  260. -ms-flex-preferred-size: 100px;
  261. flex-basis: 100px;
  262. padding: 18px 0 10px 0;
  263.  
  264. }
  265.  
  266. .item{
  267. flex: 1 0 auto;
  268. }
  269.  
  270. .item img {
  271. -webkit-transition: all 0.2s ease;
  272. -o-transition: all 0.2s ease;
  273. transition: all 0.2s ease;
  274. margin-bottom: 7px;
  275. }
  276.  
  277. .item img:hover {
  278. -webkit-transform:scale(1.1);
  279. -ms-transform:scale(1.1);
  280. transform:scale(1.1);
  281. }
  282.  
  283. .img {
  284. width: 80%;
  285. }
  286.  
  287. .title {
  288. font-weight: bold;
  289. font-size: 17px;
  290. color: white;
  291. }
  292.  
  293. .subtitle {
  294. color: #cfcfcf;
  295. font-size: 12px;
  296. }
  297.  
  298. .title,
  299. .subtitle {
  300. margin: 0;
  301. padding: 0;
  302. }
  303.  
  304.  
  305. @media(min-width: 400px) {
  306. .logo img {
  307. width: 290px; /* Change image size for mid sized devices */
  308. }
  309.  
  310. .playercount {
  311. margin-top: 30px;
  312. padding: 5px;
  313. }
  314.  
  315. .playercount > p > span {
  316. padding: 2px 7px;
  317. }
  318. }
  319.  
  320. @media(min-width: 1250px) {
  321. .title {
  322. font-size: 24px;
  323. }
  324.  
  325. .subtitle {
  326. font-size: 15px;
  327. }
  328.  
  329. .logo img {
  330. width: 470px; /* Change image size for desktop */
  331. }
  332.  
  333. .logo {
  334. margin-bottom: 28px;
  335. }
  336. .img {
  337. width: 100%;
  338. }
  339. .items {
  340. padding: 30px 0 20px 0;
  341. }
  342. .playercount {
  343. font-size: 1.22em;
  344. padding: 10px;
  345. }
  346.  
  347. .extrapad {
  348. padding: 0 42.5px;
  349. }
  350.  
  351. .playercount > p > span {
  352. padding: 4px 7px;
  353. }
  354. }
  355.  
  356. @media(min-width: 1000px) {
  357. .items {
  358. -webkit-box-pack: center;
  359. -ms-flex-pack: center;
  360. justify-content: center;
  361. }
  362.  
  363. .item:not(:first-child) {
  364. margin-left: 90px;
  365. }
  366. }
  367.  
  368. .ueber-uns{
  369. text-align: center;
  370. padding-bottom: 30px;
  371. padding-top: 10px;
  372. font-size: 1.2em;
  373. line-height: 1.5em;
  374. }
  375.  
  376. /* Home */
  377. header {
  378. min-height: 100vh;
  379. background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55) 70%, rgba(66, 134, 244, 0.45) 99%),
  380. url("../img/minecraft.png") no-repeat center center;
  381. background-size: cover;
  382. }
  383.  
  384. /* Main Content */
  385.  
  386. .img {
  387. transition: all 0.4s ease;
  388. padding-bottom: 10px;
  389. }
  390.  
  391. .img1 {
  392. width: 50%;
  393. }
  394.  
  395. .img:hover {
  396. transform: scale(1.05);
  397. }
  398.  
  399. .about-text {
  400. padding-bottom: 30px;
  401. padding-top: 10px;
  402. }
  403.  
  404. .gradient {
  405. margin-top: 20px;
  406. color: white;
  407. text-align: center;
  408. padding: 30px;
  409. background-size: cover;
  410. background: linear-gradient(#4286f4, #70d8ff) fixed;
  411. }
  412.  
  413. .flex-container {
  414. margin: 0 auto;
  415. max-width: 1100px;
  416. display: flex;
  417. flex-wrap: wrap;
  418. }
  419.  
  420. .split,
  421. .vote {
  422. flex: 1 0 auto;
  423. }
  424.  
  425. .vote-btn {
  426. background-color: rgb(255,255,255);
  427. border: 2px solid #595a5b;
  428. padding: 20px 40px;
  429. outline: none;
  430. cursor: pointer;
  431. transition-duration: 0.4s;
  432. text-transform: uppercase;
  433. }
  434.  
  435. .vote-btn:hover {
  436. background-color: #595a5b;
  437. color: white;
  438. }
  439.  
  440. .vote-container {
  441. display: flex;
  442. flex-wrap: wrap;
  443. margin: 25px auto 0 auto;
  444. max-width: 1100px;
  445. justify-content: space-around;
  446. border-top: 1px solid;
  447. }
  448.  
  449. .vote-section {
  450. text-align: center;
  451. max-width: 900px;
  452. margin: 0 auto;
  453. }
  454.  
  455. .split,
  456. .vote {
  457. padding: 5px;
  458. margin: 10px;
  459. }
  460.  
  461. .split {
  462. flex-basis: 250px;
  463. }
  464.  
  465. .vote {
  466. flex-basis: 210px;
  467. }
  468.  
  469. /* Media Queries */
  470.  
  471. @media(min-width: 1000px) {
  472. .item:not(:first-child) {
  473. margin-left: 90px;
  474. }
  475. }
  476.  
  477. @media(min-width: 700px) {
  478. .main-content {
  479. width: 40%;
  480. text-align: center;
  481. margin: 0 auto;
  482. }
  483. .playercount {
  484. font-size: 1.2em;
  485. }
  486. }
  487.  
  488. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  489. .vote {
  490. min-width: 50%;
  491. }
  492. }
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!