Enjin friendly top section design

Developer
Isaac
Size
3,264 Kb
Views
36,432
  1. Enjin friendly top section design Previews
  2. Enjin friendly top section design HTML Codes
  3. Enjin friendly top section design CSS Codes
  4. Enjin friendly top section design JS Codes

How do I make an enjin friendly top section design?

What is a enjin friendly top section design? How do you make a enjin friendly top section design? This script and codes were developed by Isaac on 30 October 2022, Sunday.

Enjin friendly top section design Previews
IQ Test

Enjin friendly top section design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Enjin friendly top section design</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- I'll be coding a top section & fancy nav! -->
<div id="customArea"> <div class="menubar"> <ul id="c"> <!-- This may look weird to experienced coders, but wrapping the list element in an "a" is useful --> <a href="/home"><li>Home</li></a> <a href="/home"><li>Forums</li></a> <a href="/home"><li>Shop</li></a><a href="/home"><li>Vote</li></a> <li>More <i class="fa fa-angle-down"></i> <ul> <a href="http://lmgtfy.com"><li>Support</li></a> <a href="http://enjindesign.center/"><li>EDC</li></a> <a href="/home"><li>Home</li></a> </ul> </li> </ul> </div> <div class="logoHolder"> <div class="holder" id="c"> <h2>Have fun guys. We're <span>done</span>!</h2> <a href="http://www.enjindesign.center/livecode"><button>Live code link</button</a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Enjin friendly top section design - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
/* I'll be coding a top section & fancy nav! */
body { background: #1F2225; margin: 0; color: #fff;
}
/* Fixing them damn links! */
a { color: inherit; text-decoration: none;
}
/* Navbar class */
.menubar {	background: #2B3035;	color: #DFE4E8;	position: fixed;	top: 0; z-index: 99999999;	left: 0;	right: 0;	height: 80px;	text-align: center;
}
a:hover { text-decoration: none;
}
/* Fix margins */
.menubar ul { padding: 0; margin: 0;
}
/* Dropdown */
.menubar ul ul { position: absolute; background: #2B3035; top: 80px; display: none;
}
.menubar ul ul li { font-size: 16px; display: block; padding: 8px 0px; margin: 0px 0px;
}
.menubar li {	display: inline-block;	vertical-align: top;	font-family: 'Varela Round', sans-serif;	transition: 160ms all ease-in-out;	font-size: 25px;	padding: 24px 0px; width: 120px; text-align: center;	border-bottom: transparent 2px solid; cursor: pointer;
}
.menubar li#dd { padding: 24px 0px;
}
.menubar li .fa-angle-down { display: block; margin-top: -20px; top: 14px; position: relative;
}
.menubar ul { max-width: 1024px; margin: auto;
}
#customArea #l { text-align: left;
}
#customArea #c { text-align: center;
}
#customArea #r { text-align: right;
}
.menubar li:hover { background: #03A9F4;	border-color: #0B5E83; color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px;
}
.logoHolder { background: #101d3a url('https://puu.sh/l8s5U/07061c0500.png'); height: 400px; margin-top: 80px; display: table; width: 100%;
}
.logoHolder .holder { display: table-cell; text-align: center; vertical-align: middle;
}
.logoHolder h2 { color: #fff; font-size: 54px; margin: 0; font-family: 'Varela Round', sans-serif; text-align: center; font-weight: normal;
}
.logoHolder button { text-align: center; color: #fff; background: none; border: #fff 2px solid; font-family: 'Varela Round', sans-serif; padding: 5px 15px; transition: 300ms all ease-in-out; font-size: 32px; margin-top: 40px;
}
.logoHolder button:hover { border-color: #0B5E83; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px; box-shadow: inset #03A9F4 0px -50px; cursor: pointer;
}

Enjin friendly top section design - Script Codes JS Codes

// I'll be coding a top section and fancy nav!
/*
==== TIP! ====
Use the dev tools (right click, hit inspect element) on your webpage to make life easier.
You can click on an element, go to the css on the right side and change the colour by clicking on it. Mega useful.
*/
$(function(){ $('#customArea').prependTo('.body-wrap-2'); $('.menubar li').click(function(){ $(this).children('ul').slideToggle(); }); var url = "/api/v1/api.php"; var request = { "jsonrpc": "2.0", "id": Math.round(Math.random() * (999999 - 100000) + 100000), "method": "User.get", "params": { } }; $(function(){ $.post(url, JSON.stringify(request), function(response) { if (response.result) { if(response.result.logged_in == true) { var api = response.result; console.log(api); $('#customArea .logoHolder h2 span').text(api.username); } } }); });
});
Enjin friendly top section design - Script Codes
Enjin friendly top section design - Script Codes
Home Page Home
Developer Isaac
Username graphiteisaac
Uploaded October 30, 2022
Rating 3
Size 3,264 Kb
Views 36,432
Do you need developer help for Enjin friendly top section design?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Isaac (graphiteisaac) Script Codes
Name
Cursed Realm Footer
Creative Grenade Navbar
Enjin design center navbar
Flat Design Animated Navbar
CCrama Inspired
A simple yet functional navbar
Gallifrey-Craft Navbar
Theme Examples 1
Mineplex-ish navbar
A Pen by Isaac
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!