A Pen by sevdeawesome

Thumbnail
This awesome code was written by sevdeawesome, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sevdeawesome ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  sevdeawesome</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>
<script src="//cdn.jsdelivr.net/zeroclipboard/2.1.6/ZeroClipboard.js" type="text/javascript"></script>
  <link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee+Inline|Holtwood+One+SC|Skranji" rel="stylesheet">
</p>
<div id="hgth">
 <div id="header_top">
  <div class="navigation">
    <ul>
    <li><a href="/home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
    <li><a href="/forum"><i class="fa fa-pencil" aria-hidden="true"></i> Forums</a></li>
    <li><a href="/donate"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Donations</a></li>
    <li><a href="http://www.technicpack.net/modpacks" target="_blank"><i class="fa fa-cloud-download" aria-hidden="true"></i> Apply</a></li>
    <li><a href="/join"><i class="fa fa-sign-in" aria-hidden="true"></i> Gallery</a></li>
    </ul>
  </div>
   <div class="logo_m"><div class="name">Ultra Dino</div></div>
</div>
<div class="letf_f center server_bot2">AMAZING modded server! Click <a href="http://www.technicpack.net/modpacks">here</a> to download our modpack and join the servers! </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sevdeawesome/a-pen-by-sevdeawesome-WRoejy */
body{
  margin: 0;
}
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
#enjin-bar {
    display: none;
}
#site-body>div:nth-child(2), #site-body>div:nth-child(3) {
    max-width: 1559px;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 5px #9d9d9d;
    margin: 0 auto;
    padding: 20px;
    border-radius: 4px;
}
body {
    background-image: none;
    background: #ecf0f1;
}
#page{
    margin: 0 auto;
    max-width: none;
}
#hgth {
    height: 390px;
}
#header_top {
    background: url(https://upload.wikimedia.org/wikipedia/commons/f/f3/ROM-Dinos_LastRoom_panorama.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
}
.logo_m {
    text-align: center;
    margin-top: 40px;
}
.navigation {
    z-index: 9999999;
    margin: 0 auto;
    top: 0;
    background: rgba(0,0,0,.5);
    height: 61px;
    line-height: 61px;
    transition:all .25s;
}
.navigation > ul {
    list-style-type: none;
    text-align: center;
}
.navigation > ul > li {
    display: inline-block;
    width: 150px;
    transition: 0.25s;
}
.navigation > ul > li > a {
    font-size: 15px;
    color: #E5E0E0;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    z-index: 999999;
    display: inline-block;
    transition:all .25s
}
.server_bot {
    height: 50px;
    background: #e74c3c;
    box-shadow: 0 1px 3px black;
    font-size: 15px;
    color: #E5E0E0;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}
.innerfx {
    margin: 0 auto;
    max-width: 1159px;
}
.left_f {
    float: left;
    line-height: 50px;
}
#online {
    color: gold;
    text-transform: uppercase;
    font-size: 16px;
    text-shadow: 0 0 5px black;
}
.right_f {
    float: right;
    line-height: 50px;
}
.right_f a {
    font-size: 15px;
    color: gold;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}
.navigation ul li {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.navigation ul li:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.1);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.navigation ul li:hover, .navigation ul li:focus, .navigation ul li:active {
  color: white;
}
.navigation ul li:hover:before, .navigation ul li:focus:before, .navigation ul li:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/* THEME */
.container .container_header .left, .container .container_header .right, .container.with-footer .container_footer .left, .container.with-footer .container_footer .right {
    display: none;
}
.container.with-header .container_header {
    background-color: #ececec;
    margin-right: 7px;
    margin-left: 7px;
}
.container.with-header .container_header .header_text_text {
    font-size: 15px;
    color: #454545;
    font-weight: 800;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}
.container .container_body .container_left, .container .container_body .container_right {
    display: none;
}
* {
    font-family: 'Montserrat', sans-serif;
}
/* NEWS */
.m_news .article .heading {
    margin-right: -20px !important;
    background: #ececec;
    margin-left: -20px;
    height: 50px;
    border: 1px solid #d9d9d9;
}
.m_news .article.first .heading {
    margin-right: 0px;
}
.m_news .article .heading .title {
    line-height: 36px;
}
.m_news .article .heading .title a {
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
}
.m_news .element_avatar.image .a_tl, .m_news .element_avatar.image .a_tr, .m_news .element_avatar.image .a_bl, .m_news .element_avatar.image .a_br, .m_news.main .float-rss {
    display: none;
}
.m_news .heading .info {
    visibility: hidden;
}
.m_news .heading .info .date {
    visibility: visible;
    float: right;
    position: relative;
    top: -31px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    background: #d9d9d9;
    padding: 10px;
    z-index: 9999;
}
.center {
    text-align: center;
}
.server_bot2 {
    height: 50px;
    background: #e74c3c;
    box-shadow: 0 1px 3px black;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: gold;
    text-transform: uppercase;
    font-size: 16px;
    text-shadow: 0 0 5px black;
    padding-top: 10px;
}
.name{
    background: linear-gradient(to right, red, orange, yellow, green, blue, purple, red);
    text-align: center;
    font-size: 150px;
    animation: glare 5s linear infinite;
    background-size: 200% auto;
    color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: opacity(100%);
  filter: greyscale(100%);
    -webkit-text-stroke: 4px black;
 font-family: 'Skranji', cursive;
}
@keyframes glare{
    from {background-position: 0%;}
    to {background-position: 200%;}
  
}

/*Downloaded from https://www.codeseek.co/sevdeawesome/a-pen-by-sevdeawesome-WRoejy */
$(function(){
   $('#hgth').prependTo('.body-wrap-2');
});
$( document ).ready(function() {

    getOnlinePlayers();
  
});
function getOnlinePlayers() {

   $.getJSON("https://mcapi.ca/query/play.minesuperior.com/players", function(json){
   		if(json.players !== undefined) {
   			$("#online").html(json.players.online);	
   		} else {
   			$("#online").html("Loading");
   		}
	    
	    setTimeout(getOnlinePlayers, 5000);
	}); 
}
$(function() {
    var client = new ZeroClipboard($('#ip'), {
        swfPath: "//cdn.jsdelivr.net/zeroclipboard/2.1.6/ZeroClipboard.swf",
        bubbleEvents: true
    });
    client.on("copy", function(event) {
        client.setText("play.serverip.com");
        client.on("aftercopy", function(event) {
            $(".copied").html('IP HAS BEEN COPIED!').fadeIn( "slow" );
            $(".").css({
                color: "rgb(53, 219, 53);"
            });
            $(".").css({
                color: "rgb(53, 219, 53);"
            });
        });
    });
});

Comments