A Pen by Nick

Thumbnail
This awesome code was written by Nickkkkkkkkk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Nickkkkkkkkk ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <div class="lolhi">
  <ul>
    <a href="/home"><li class="logo"></li></a>
    <a href="/home"><li>Home</li></a>
    <a href="/forums"><li>Forums</li></a>
    <a href="/shop"><li>Store</li></a>
    <a href="/apply"><li>Apply</li></a>
    <a><li>Community
      <ul>
        <a href="/members"><li>blahblah</li></a>
        <a href="/staffmembers"><li>staffmembers</li></a>
      </ul>
      </li></a>
    <a href="/profile" class="profile"><li></li></a>
  </ul>
</div>
<div class="status">
  <div>Halloween is here! <i></i> We had our website redesigned! <b></b> Seems 2spooky4em</div>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Nickkkkkkkkk/a-pen-by-nick-mJRxxb */
/* Before you ask "Why the hell is terrible is because Its a hallween theme navbar!*/

/* Thanks Codecademy for teaching me how to code!*/

/* Only works for enjin, please remove this*/

body{
  max-width:1000px;
  margin:auto;
}
.hide{
  display:none;
}
/* Remove everything above this*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400);
@import url(https://fonts.googleapis.com/css?family=Maven+Pro:500,700);
.lolhi{
  background:#25383C;
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:80px;
}

a{
  text-decoration:none;
}
body{
  background:#ecf0f1;
}
/* I warn you to not remove it, I command you! */
.lolhi ul{
  max-width:1200px;
  min-width:980px;
  margin:auto;
  padding:0;
}
.lolhi ul ul{
  position:absolute;
  background:#34495e;
  min-width:0px !important;
  border-radius:0px 0px 3px 3px;
  transition:300ms all ease-in-out;
  transform:scale(0);
}
.lolhi li:hover ul{
  transform:scale(1);
}
.lolhi ul ul:before{
  content:'';
  display:block;
  height:1px;
  width:0%;
  float:right;
  background:#eee;
  transition:300ms all ease-in-out;
  -webkit-transition:300ms all ease-in-out;
  -moz-transition:300ms all ease-in-out;
}
.lolhi ul li:hover ul:before{
  float:left;
  width:100%;
}
.lolhi ul ul li{
  padding:0;
  margin:0;
  min-width:120px;
  display:block;
  padding:5px;
  margin:2px;
  color:#eee;
}
.lolhi ul ul li:after{
  display:none;
}
.lolhi li:hover{
  color:#fff;
  border-radius:3px;
}
.lolhi ul ul li:hover{
  background:#2c3e50;
}
.lolhi li.logo:after{
  display:none;
}
.status{
  background:#000;
  height:250px;
  margin:0px -1000px;
  padding:0px 1000px;
}
.status div{
  font-size:22px;
  position:relative;
  top:150px;
  font-family:'Maven Pro', sans-serif;
  color:#2c3e50;
  font-weight:500;
}
.lolhi li:hover:after{
  width:100%;
  float:left;
}
.lolhi li:after{
  content:'';
  display:block;
  height:1px;
  width:0%;
  float:right;
  background:#eee;
  transition:200ms all ease-in-out;
  -webkit-transition:200ms all ease-in-out;
  -moz-transition:200ms all ease-in-out;
}
li.logo{
  padding:0 !important;
  margin:0 !important;
  width:74px;
  height:74px;
  vertical-align:bottom !important;
  position:relative;
  top:-2px;
  
}
.lolhi ul li{
  color:#FFA500;
  font-family:'Open Sans', sans-serif;
  display:inline-block;
  padding: 14px 6px;
  margin: 15px 2px;
  font-weight:bold;
  vertical-align:top;
  text-transform:uppercase;
  cursor:pointer;
  transition:200ms all ease-in-out;
}
.status i{
  font-style:normal;
  font-weight:bold;
}
.lolhi .profile{
  float:right;
}

/*Downloaded from https://www.codeseek.co/Nickkkkkkkkk/a-pen-by-nick-mJRxxb */
$(function(){
  var username = $('#enjin-bar .user a').text();
  if (username === ''){
  	$('.profile li').append('Guest');
  } else {
    $('#enjin-bar .user a').clone().appendTo('.profile li,.status i');
  }
});
$(function(){
   $.ajax({

Comments