Responsive Admin Panel 2

Developer
Christian Naths
Size
7,677 Kb
Views
10,120
  1. Responsive Admin Panel 2 Previews
  2. Responsive Admin Panel 2 HTML Codes
  3. Responsive Admin Panel 2 CSS Codes
  4. Responsive Admin Panel 2 JS Codes

How do I make an responsive admin panel 2?

A responsive design for an admin interface I'm working on. Still very much a work in progress. Check out the focus states for the inputs :). What is a responsive admin panel 2? How do you make a responsive admin panel 2? This script and codes were developed by Christian Naths on 29 November 2022, Tuesday.

Responsive Admin Panel 2 Previews
IQ Test

Responsive Admin Panel 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Admin Panel 2</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Archivo+Narrow:700,400'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Alegreya:400italic,400'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Sacramento'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
html { height: 100%; padding: 10px; -webkit-font-smoothing: antialiased; background-color: #3d484a; background: url("http://christiannaths.com/code/admini/images/linen.png") center center fixed, url("http://christiannaths.com/code/admini/images/route-66.jpg") center center no-repeat fixed; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; background-size: auto, cover;
}
body { min-height: 100%; margin: 0; font: 14px/1.4 "Alegreya", serif; color: #dbdbdb;
}
[class*="span-"] { padding: 10px;
}
a { color: #29D9D8; text-decoration: none;
}
header { min-height: 100px;
}
.logo > * { display: inline;
}
.logo h1 { font-family: "Sacramento"; font-size: 4em; font-weight: normal; color: #f5f7c6;
}
.logo h2 { position: relative; top: -0.8em; font-family: "Archivo Narrow", helvetica, sans-serif; font-size: 1.8em; font-weight: normal; color: #fff; text-transform: uppercase; vertical-align: super;
}
nav ul { margin: 0; padding: 0; list-style: none;
}
nav ul li { display: inline; font-size: 0px;
}
nav ul li a { display: inline-block; font-size: 14px;
}
.breadcrumb-nav { padding: 10px 20px; background: rgba(0, 0, 0, 0.45); -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.session-nav { text-align: right;
}
.session-nav ul li a { margin-right: 1px; padding: 8px 14px; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.35);
}
.session-nav ul li:first-child a { -webkit-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.session-nav ul li:last-child a { -webkit-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.application-nav { overflow: hidden; position: absolute; left: 0; -webkit-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.application-nav a { display: block; padding: 10px 20px; margin-bottom: 1px; font-family: "Archivo Narrow", helvetica, sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; background: rgba(0, 0, 0, 0.5);
}
.application-nav a span { margin-right: 4px; padding-right: 4px;
}
.application-nav li:last-child a { padding-bottom: 10px; -webkit-border-radius: 0px 0px 5px 0px; border-radius: 0px 0px 5px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.application-nav li:first-child a { padding-top: 10px; -webkit-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
@media screen and (max-width: 1260px) { .application-nav .text { display: none; }
}
.panel { -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), 0px 0px 3px black;
}
.panel .panel-header { display: block; padding: 10px 20px; font-family: "Archivo Narrow", helvetica, sans-serif; font-size: 1.5em; font-weight: normal; text-transform: uppercase; text-shadow: 0px 0px 15px #000; line-height: 1.2; letter-spacing: -0.03em; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 50%, transparent 52%), url(http://christiannaths.com/code/admini/images/dark-tire.png) left top; background-size: auto, 125px 125px; box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.2); -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.panel .panel-header .hint { display: block; font-size: 0.8rem; font-family: "Alegreya", serif; font-weight: lighter; color: #a8a8a8; color: rgba(255, 255, 255, 0.5); text-transform: none;
}
.panel .panel-body { padding: 20px; background: #dbdbdb; border-top: none; -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.panel .panel-body input, .panel .panel-body textarea { width: 100%; max-width: 100%; padding: 10px; font-size: 1.1em; font-family: sans-serif; font-weight: normal; line-height: 1.5; border: 1px solid #c2c2c2;
}
.panel .panel-body input:focus, .panel .panel-body textarea:focus { outline: none;
}
input, textarea { margin: 0;
}
.wysiwyg { margin-bottom: 5px;
}
.wysiwyg .fa { display: inline-block; width: 32px; padding: 2px; font-size: 16px; color: rgba(0, 0, 0, 0.8); text-align: center; border: 1px solid #999; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: #e1e1e1; background: -webkit-linear-gradient(#fff, #e1e1e1); cursor: pointer;
}
@media screen and (max-width: 800px) { header .logo, header .session-nav { float: left; } header .logo { width: 50%; } header .logo h1 { font-size: 2.5em; } header .logo h2 { font-size: 1em; } header .session-nav { width: 50%; } .application-nav { display: none; }
}
@media screen and (min-width: 801px) { html { padding: 20px; padding-top: 0; } .container { max-width: 940px; margin: 0 auto; } [class*="span-"] { float: left; } .span-3 { width: 25%; } .span-4 { width: 33.33333%; } .span-6 { width: 50%; } .span-12 { width: 100%; } textarea { min-height: 200px; } .show-menu { display: none; } .account-settings a { -webkit-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .session-nav { position: relative; top: 30px; }
}
@media screen and (max-width: 1100px) and (min-width: 801px) { html { padding-left: 80px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <header> <hgroup class="logo span-6"> <h1>SitePress</h1> <h2>Cms</h2> </hgroup> <nav class="session-nav span-6"> <ul> <li class="show-menu"> <a href=""> <span class="ion-navicon-round"></span> </a> </li> <li class="account-settings"> <a href=""> <span class="ion-person"></span> </a> </li> <li class="logout"> <a href=""> <span class="ion-power"></span> </a> </li> </ul> </nav> </header> </div> <nav class="application-nav"> <div class="container"> <ul> <li class=""><a href=""><span class="ion-home"></span><span class="text">Dashboard</span></a></li> <li class=""><a href=""><span class="ion-document-text"></span><span class="text">Pages</span></a></li> <li class=""><a href=""><span class="ion-android-share-alt"></span><span class="text">Navigation</span></a></li> <li class=""><a href=""><span class="ion-person-stalker"></span><span class="text">Users</span></a></li> <li class=""><a href=""><span class="ion-gear-b"></span><span class="text">Website Settings</span></a></li> </ul> </div> </nav> <section id="main-content"> <div class="container"> <div class="span-12"> <nav class="breadcrumb-nav"> <a href="#">Dashboard</a> &raquo; <a href="#">Pages</a> &raquo; About Us </nav> </div> <div class="span-6"> <div class="panel"> <label class="panel-header" for="page-title"> Page Title <span class="hint">The title of the page as displayed by a web browser.</span> </label> <div class="panel-body"> <input id="page-title" type="text" value="About Us" /> </div> </div> </div> <div class="span-6"> <div class="panel"> <label class="panel-header" for="page-url"> URL <span class="hint">http://www.example.com/about</span> </label> <div class="panel-body"> <input id="page-url" type="text" value="/about" /> </div> </div> </div> <div class="span-12"> <div class="panel"> <label class="panel-header" for="page-main-content"> Main Content <span class="hint">Say something about your company.</span> </label> <div class="panel-body"> <div class="wysiwyg"> <span class="fa fa-bold"></span> <span class="fa fa-italic"></span> <span class="fa fa-underline"></span> <span class="fa fa-strikethrough"></span> <span class="fa fa-list-ul"></span> <span class="fa fa-list-ol"></span> <span class="fa fa-link"></span> <span class="fa fa-image"></span> </div> <textarea id="page-main-content"></textarea> </div> </div> </div> <div class="span-12"> <div class="panel"> <label class="panel-header" for="page-mission-statement"> Mission Statement <span class="hint">Your company's mission statment.</span> </label> <div class="panel-body"> <div class="wysiwyg"> <span class="icon-bold"></span> <span class="icon-italic"></span> <span class="icon-underline"></span> <span class="icon-strikethrough"></span> </div> <textarea id="page-mission-statement"></textarea> </div> </div> </div> </div> </section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Admin Panel 2 - Script Codes CSS Codes

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
html { height: 100%; padding: 10px; -webkit-font-smoothing: antialiased; background-color: #3d484a; background: url("http://christiannaths.com/code/admini/images/linen.png") center center fixed, url("http://christiannaths.com/code/admini/images/route-66.jpg") center center no-repeat fixed; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; background-size: auto, cover;
}
body { min-height: 100%; margin: 0; font: 14px/1.4 "Alegreya", serif; color: #dbdbdb;
}
[class*="span-"] { padding: 10px;
}
a { color: #29D9D8; text-decoration: none;
}
header { min-height: 100px;
}
.logo > * { display: inline;
}
.logo h1 { font-family: "Sacramento"; font-size: 4em; font-weight: normal; color: #f5f7c6;
}
.logo h2 { position: relative; top: -0.8em; font-family: "Archivo Narrow", helvetica, sans-serif; font-size: 1.8em; font-weight: normal; color: #fff; text-transform: uppercase; vertical-align: super;
}
nav ul { margin: 0; padding: 0; list-style: none;
}
nav ul li { display: inline; font-size: 0px;
}
nav ul li a { display: inline-block; font-size: 14px;
}
.breadcrumb-nav { padding: 10px 20px; background: rgba(0, 0, 0, 0.45); -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.session-nav { text-align: right;
}
.session-nav ul li a { margin-right: 1px; padding: 8px 14px; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.35);
}
.session-nav ul li:first-child a { -webkit-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.session-nav ul li:last-child a { -webkit-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.application-nav { overflow: hidden; position: absolute; left: 0; -webkit-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.application-nav a { display: block; padding: 10px 20px; margin-bottom: 1px; font-family: "Archivo Narrow", helvetica, sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; background: rgba(0, 0, 0, 0.5);
}
.application-nav a span { margin-right: 4px; padding-right: 4px;
}
.application-nav li:last-child a { padding-bottom: 10px; -webkit-border-radius: 0px 0px 5px 0px; border-radius: 0px 0px 5px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.application-nav li:first-child a { padding-top: 10px; -webkit-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
@media screen and (max-width: 1260px) { .application-nav .text { display: none; }
}
.panel { -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), 0px 0px 3px black;
}
.panel .panel-header { display: block; padding: 10px 20px; font-family: "Archivo Narrow", helvetica, sans-serif; font-size: 1.5em; font-weight: normal; text-transform: uppercase; text-shadow: 0px 0px 15px #000; line-height: 1.2; letter-spacing: -0.03em; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 50%, transparent 52%), url(http://christiannaths.com/code/admini/images/dark-tire.png) left top; background-size: auto, 125px 125px; box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.2); -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.panel .panel-header .hint { display: block; font-size: 0.8rem; font-family: "Alegreya", serif; font-weight: lighter; color: #a8a8a8; color: rgba(255, 255, 255, 0.5); text-transform: none;
}
.panel .panel-body { padding: 20px; background: #dbdbdb; border-top: none; -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.panel .panel-body input, .panel .panel-body textarea { width: 100%; max-width: 100%; padding: 10px; font-size: 1.1em; font-family: sans-serif; font-weight: normal; line-height: 1.5; border: 1px solid #c2c2c2;
}
.panel .panel-body input:focus, .panel .panel-body textarea:focus { outline: none;
}
input, textarea { margin: 0;
}
.wysiwyg { margin-bottom: 5px;
}
.wysiwyg .fa { display: inline-block; width: 32px; padding: 2px; font-size: 16px; color: rgba(0, 0, 0, 0.8); text-align: center; border: 1px solid #999; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: #e1e1e1; background: -webkit-linear-gradient(#fff, #e1e1e1); cursor: pointer;
}
@media screen and (max-width: 800px) { header .logo, header .session-nav { float: left; } header .logo { width: 50%; } header .logo h1 { font-size: 2.5em; } header .logo h2 { font-size: 1em; } header .session-nav { width: 50%; } .application-nav { display: none; }
}
@media screen and (min-width: 801px) { html { padding: 20px; padding-top: 0; } .container { max-width: 940px; margin: 0 auto; } [class*="span-"] { float: left; } .span-3 { width: 25%; } .span-4 { width: 33.33333%; } .span-6 { width: 50%; } .span-12 { width: 100%; } textarea { min-height: 200px; } .show-menu { display: none; } .account-settings a { -webkit-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .session-nav { position: relative; top: 30px; }
}
@media screen and (max-width: 1100px) and (min-width: 801px) { html { padding-left: 80px; }
}

Responsive Admin Panel 2 - Script Codes JS Codes

$(function(){ var overlay = $('<div></div>'); overlay.css({ background: 'rgba(0,0,0,0.5)', '-webkit-background-size': 'cover', position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, 'z-index': 999, 'pointer-events': 'none' }); var input = $('.panel input, .panel textarea'); input.focusin(function(){ $('body').prepend(overlay) var panel = $(this).parents('.panel'); panel.css({ 'z-index': 1000, position: 'relative' }) }); input.focusout(function(){ var panel = $(this).parents('.panel'); panel.css({ position: 'static' }) overlay.detach(); }); // esc releases focus from inputs $(document).keyup(function(e){ if(e.keyCode === 27){ input.blur(); }; });
})
Responsive Admin Panel 2 - Script Codes
Responsive Admin Panel 2 - Script Codes
Home Page Home
Developer Christian Naths
Username christiannaths
Uploaded November 29, 2022
Rating 4.5
Size 7,677 Kb
Views 10,120
Do you need developer help for Responsive Admin Panel 2?

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!

Christian Naths (christiannaths) Script Codes
Name
Responsive App Layout
Animated Open Mentorship Logo
Activity Timeline
Off-Canvas Responsive Layout
MicroHero Logo Animation
Checkbox Switch
Upcoming Event Stream
Responsive Admin Panel
A Pen by Christian Naths
Collection-bootstrap
Create amazing marketing copy 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!