Mineplex-ish navbar

Developer
Isaac
Size
2,742 Kb
Views
18,216
  1. Mineplex-ish navbar Previews
  2. Mineplex-ish navbar HTML Codes
  3. Mineplex-ish navbar CSS Codes

How do I make an mineplex-ish navbar?

Not my idea, not my colours, just my code. Use at your own risk.. What is a mineplex-ish navbar? How do you make a mineplex-ish navbar? This script and codes were developed by Isaac on 30 October 2022, Sunday.

Mineplex-ish navbar Previews
IQ Test

Mineplex-ish navbar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mineplex-ish navbar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav"> <div class="nav-wrap"> <ul> <a href="http://mrminer2229.com/"><li>Home</li></a> <a href="http://mrminer2229.com/"><li>shop</li></a> <a href="http://mrminer2229.com/"><li class="logo"><img src="https://puu.sh/d1TVH/96f121cd7f.png"></li></a> <a href="http://mrminer2229.com/"><li>Forums</li></a> <a href="http://mrminer2229.com/"><li>More</li></a> </ul> <div class="userstuff"> <div class="head"></div> <div class="username"><small>Welcome</small><br><p>Blare</p></div> <div class="icons"> <i class="fa fa-bell"></i> <i class="fa fa-envelope"></i> <i class="fa fa-eye"></i> </div> </div> </div>
</div>
<div class="afterbar"> <div class="afterbarcontent"> <div class="section"> <input value="us.mineplex.com" onClick="this.select()" readonline> </div> <div class="section-mid"> players onlne: <span>24976</span> </div> <div class="section"> </div> <div class="section"> <input value="eu.mineplex.com" onClick="this.select()" readonline> </div> </div>
</div>
</body>
</html>

Mineplex-ish navbar - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
.nav{ background-color:#25292c; height:86px; color:#eee; font-family:'Open Sans', Sans-Serif; position:absolute; top:0; left:0; right:0; text-align:center; box-shadow: inset 0 4px rgba(0,0,0,0.2);
}
.nav li{ display:inline-block; vertical-align:middle; text-transform:uppercase; font-family: 'Open Sans Condensed', sans-serif; font-size: 24px; font-weight: 700;
}
.nav li { display:inline;	padding-right: 30px;	padding-left: 30px;	padding-bottom: 24px;	font-size: 24px; padding-top:25px; margin-top:20px; font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; width: 100px; height: 100px; -webkit-transition: ease-in-out box-shadow 600ms; -moz-transition: ease-in-out box-shadow 600ms; transition: ease-in-out box-shadow 600ms; box-shadow:inset #63CAE3 0px 0px 0px;
}
.nav li:hover { background-position: 0 -100%; box-shadow:inset #63CAE3 00px -100px 0px;
}
.nav-wrap{ margin-top:-21px
}
.nav a{ color:#fff; text-decoration:none;
}
.userstuff{ background-color:#63CAE3; width:193px; height:75px; position:absolute; z-index:99999; top:4px; right:40px;
}
.userstuff .head{ width:75px; height:75px; background-image:url('https://minotar.net/avatar/Blare/75'); display:inline-block; vertical-align:top; float:left;
}
li.logo img{ position:relative; top:18px;
}
li.logo:hover{ box-shadow:none;
}
.username{ display:inline-block; vertical-align:top; text-align:left; float:left; margin-left:5px; color:rgb(55, 117, 132); text-transform:uppercase;
}
.username small{ color:#eee; font-size:10px; text-transform:capitalize;
}
.username p{ position:relative; top:-25px; font-size:18px;
}
.afterbar{ background:#1E2224; width:100%; position:fixed; height:35px; top:85px; left:0; right:0;
}
.icons { color: #eee; position: absolute; z-index: 9999999; top: 40px; font-size: 26px; width: 100px; right: 14px;
}
.icons i:after{ background:#a00; content:'0'; font-size:8px;border-radius:3px; padding:1px; position:absolute; top:20px; margin-left:-6px;
}
.afterbar .section{ display:inline-block;
}
.afterbar input{ padding:5px 0px; font-size:18px; font-weight:lighter; font-family:'Open Sans'; padding-bottom:6px; width:169px; border:none; background:none; color:rgb(253, 124, 0); text-transform:uppercase;
}
.afterbar .section:nth-of-type(4) input{ text-align:right;
}
input:visited{ border:none; outline:none; box-shadow:none;
}
.afterbar .section:nth-of-type(1){ float:left;
}
.afterbar .section:nth-of-type(4){ float:right;
}
.afterbarcontent{ width:1000px; margin:0px auto;
}
.section-mid{ display:inline-block; text-align:center; width:658px; color:#eee; text-transform:uppercase; font-family:'Open Sans', sans-serif; font-size:18px; padding:5px 0px; padding-top:6px;
}
.section-mid span{ color:rgb(253, 124, 0); text-shadow:rgb(253, 124, 0) 0px 0px 1px;
}
Mineplex-ish navbar - Script Codes
Mineplex-ish navbar - Script Codes
Home Page Home
Developer Isaac
Username graphiteisaac
Uploaded October 30, 2022
Rating 3
Size 2,742 Kb
Views 18,216
Do you need developer help for Mineplex-ish navbar?

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
A simple yet functional sidebar
Cursed Realm Footer
Television Screen in CSS3
Flat Design Animated Navbar
Fully responsive top section design
CCrama Inspired
Gallifrey-Craft Navbar
A simple yet functional navbar
Simple Sidebar with Animated Icon
Enjin design center navbar
Create amazing sales emails 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!