Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML:
- <!-- Proudly coded by Billy (https://bybilly.uk) -->
- <!-- Version: 1.9 -->
- <!DOCTYPE html>
- <html>
- <head>
- <!-- Info meta tags, important for social media + SEO -->
- <title>SkyCraft - Official Website</title>
- <meta name="description" content="OpenWorld Survival PVP/PVE Minecraft Server. Trete uns bei über die IP 'play.skycraft.one'.">
- <meta property="og:title" content="MyServer - Official Website Portal">
- <meta property="og:site_name" content="SkyCraft">
- <meta property="og:description" content="OpenWorld Survival PVP/PVE Minecraft Server. Trete uns bei über die IP 'play.skycraft.one'.">
- <meta property="og:image" content="https://bybilly.uk/portal/img/minecraft.jpg">
- <meta property="og:url" content="https://bybilly.uk/">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta charset="utf-8">
- <link rel="stylesheet" href="css/stylesheet.css">
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
- </head>
- <body>
- </style>
- <div class="container">
- <div class="logo">
- <!-- In the img folder, upload your logo -->
- <!-- Make sure you name it 'logo.png' -->
- <img src="img/logo.png" alt="MyServer logo">
- </div>
- <div class="items">
- <!-- Regeln-->
- <a href="#" class="item forums">
- <div>
- <img src="img/forums.png" alt="Minecraft forums icon" class="img">
- <p class="subtitle">Lese hier die</p>
- <p class="title">Regeln</p>
- </div>
- </a>
- <!-- Store -->
- <a href="https://store.skycraft.one" class="item store">
- <div>
- <img src="img/store.png" alt="Minecraft store icon" class="img">
- <p class="subtitle">Hier ist unser</p>
- <p class="title">Store</p>
- </div>
- </a>
- <!-- Voting -->
- <a href="" class="item vote">
- <div>
- <img src="img/vote.png" alt="Minecraft voting icon" class="img">
- <p class="subtitle">Supporte uns mit</p>
- <p class="title">Voting</p>
- </div>
- </a>
- <!-- Server Status -->
- <a href="https://status.skycraft.one" class="item vote">
- <div>
- <img src="img/status.PNG" alt="Minecraft voting icon" class="img">
- <p class="subtitle">Hier siehst du unseren</p>
- <p class="title">Server Status</p>
- </div>
- </a>
- </div>
- <div class="playercount">
- <!-- Replace play.myserver.net with your IP address -->
- <!-- Do it for both examples below -->
- <!-- Please set both your IP and port -->
- <p>Spiele mit <span class="sip" data-ip="play.skycraft.one" data-port="25565">
- 0</span> anderen spielern auf <span class="ip">play.skycraft.one</span></p>
- </div>
- </div>
- <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
- <script src="js/firefly.js" type="text/javascript"></script>
- <script src="js/main.js" type="text/javascript"></script>
- </body>
- <footer>
- </footer>
- </html>
- CSS:
- * {
- box-sizing: border-box;
- }
- body {
- /*Want to change background image?*/
- /*Upload a new one to the img folder.*/
- /*Make sure you name it 'minecraft.jpg'*/
- background: linear-gradient(rgba(20, 26, 35,0.55),rgba(20, 26, 35, 0.55)),
- url("../img/minecraft.png") no-repeat center center fixed;
- background-size: cover;
- font-family: "Open Sans", Helvetica;
- margin: 0;
- position: relative;
- box-sizing: border-box;
- }
- html, body {
- width: 100vw;
- height: 100vh;
- overflow-x: hidden;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- }
- a {
- text-decoration: none;
- }
- p {
- margin: 0;
- padding: 3px;
- }
- .container {
- text-align: center;
- }
- .logo img {
- width: 225px; /* Change image size for mobile */
- -webkit-animation-name: logo;
- animation-name: logo;
- -webkit-animation-duration: 5s;
- animation-duration: 5s;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- }
- @-webkit-keyframes logo {
- 0% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 50% {
- -webkit-transform: scale(1.07);
- transform: scale(1.07);
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- @keyframes logo {
- 0% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 50% {
- -webkit-transform: scale(1.07);
- transform: scale(1.07);
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- .playercount {
- display: inline-block;
- margin: 20px 15px 0 15px;
- padding: 2px 0;
- background-color: rgba(15, 99, 209, 0.75);
- font-size: 1em;
- color: white;
- text-align: center;
- border-radius: 5px 0 5px 0;
- line-height: 27px;
- }
- .playercount > p > span {
- font-weight: bold;
- padding: 1px 4px;
- border-radius: 3px;
- background: rgba(13, 56, 167, 0.7);
- margin: 0 2px;
- }
- .extrapad {
- padding: 0;
- }
- .ip {
- cursor: pointer;
- }
- .items {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-pack: distribute;
- justify-content: space-around;
- -ms-flex-preferred-size: 100px;
- flex-basis: 100px;
- padding: 18px 0 10px 0;
- }
- .item img {
- -webkit-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- transition: all 0.2s ease;
- margin-bottom: 7px;
- }
- .item img:hover {
- -webkit-transform:scale(1.1);
- -ms-transform:scale(1.1);
- transform:scale(1.1);
- }
- .img {
- width: 80%;
- }
- .title {
- font-weight: bold;
- font-size: 17px;
- color: white;
- }
- .subtitle {
- color: #cfcfcf;
- font-size: 12px;
- }
- .title,
- .subtitle {
- margin: 0;
- padding: 0;
- }
- @media(min-width: 400px) {
- .logo img {
- width: 290px; /* Change image size for mid sized devices */
- }
- .playercount {
- margin-top: 30px;
- padding: 5px;
- }
- .playercount > p > span {
- padding: 2px 7px;
- }
- }
- @media(min-width: 1250px) {
- .title {
- font-size: 24px;
- }
- .subtitle {
- font-size: 15px;
- }
- .logo img {
- width: 470px; /* Change image size for desktop */
- }
- .logo {
- margin-bottom: 28px;
- }
- .img {
- width: 100%;
- }
- .items {
- padding: 30px 0 20px 0;
- }
- .playercount {
- font-size: 1.22em;
- padding: 10px;
- }
- .extrapad {
- padding: 0 42.5px;
- }
- .playercount > p > span {
- padding: 4px 7px;
- }
- }
- @media(min-width: 1000px) {
- .items {
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
- .item:not(:first-child) {
- margin-left: 90px;
- }
- }
- /* Main Content */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement