<!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({
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
