Flexbox Admin Template
How do I make an flexbox admin template?
Best View in Codepen Fullscreen. What is a flexbox admin template? How do you make a flexbox admin template? This script and codes were developed by Sophia on 28 July 2022, Thursday.
Flexbox Admin Template Previews
Flexbox Admin Template - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Admin Template</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ @import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css");
* { margin: 0; padding: 0; box-sizing: border-box;
}
:before, :after { content: ''; display: block; position: absolute; box-sizing: border-box;
}
html, body { height: 100%;
}
body { display: flex; font: 15px/1 Lato, sans-serif; color: #777;
}
a { cursor: pointer;
}
ul { list-style: none;
}
nav { width: 250px; background: #4a6a8a;
}
nav header { position: relative; height: 80px; padding: 20px 0 0 15px; font-size: 16px; color: #fff; border-bottom: 1px solid #53779b; background: #415d79;
}
nav header span { position: relative; display: inline-block; width: 36px; height: 36px; margin: 0 10px 0 0; vertical-align: middle; border: 1px solid #fff;
}
nav header span:before { content: '\f007'; font: normal 20px FontAwesome; top: 7px; left: 9px;
}
nav header a:before { content: '\f08b'; font: normal 20px FontAwesome; top: 28px; right: 15px;
}
nav ul span { display: block; padding: 15px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; border-bottom: 1px solid #53779b;
}
nav ul a { position: relative; display: block; padding: 15px 15px 17px 50px; color: #fff; border-bottom: 1px solid #53779b;
}
nav ul a:hover,
nav ul a.active { background: #53779b;
}
nav ul a:before { font: normal 16px FontAwesome; top: 15px; left: 18px;
}
nav ul li:nth-child(2) a:before { content: '\f00a';
}
nav ul li:nth-child(3) a:before { content: '\f012';
}
nav ul li:nth-child(4) a:before { content: '\f018';
}
nav ul li:nth-child(5) a:before { content: '\f024';
}
nav ul li:nth-child(6) a:before { content: '\f0c3';
}
nav ul li:nth-child(7) a:before { content: '\f09b';
}
nav ul li:nth-child(8) a:before { content: '\f0fa';
}
nav ul li:nth-child(10) a:before { content: '\f002';
}
nav ul li:nth-child(11) a:before { content: '\f085';
}
nav ul li:nth-child(12) a:before { content: '\f08b';
}
main { flex: 1; padding: 25px; background: #f5f5f5;
}
main h1 { height: 80px; margin: -25px -25px 25px -25px; padding: 0 25px; line-height: 76px; font-size: 28px; font-weight: 300; border-bottom: 1px solid #fff; background: #fafafa;
}
.flex-grid { display: flex;
}
.flex-grid > div { flex: 1; margin: 0 20px 20px 0; padding: 15px; border: 1px solid #ddd; background: #fff;
}
.flex-grid > div:last-child { margin-right: 0;
}
.flex-grid h2 { margin: -15px -15px 15px -15px; padding: 12px 15px; font-size: 16px; font-weight: 300; text-transform: uppercase; border-bottom: 1px solid #ddd; background: #fafafa;
}
.flex-grid li { position: relative; margin: 0 0 10px; padding: 0 0 0 25px;
}
.flex-grid li:before { content: '\f00c'; font: normal 16px FontAwesome; top: 0; left: 0; color: #999;
}
.flex-grid table { width: 100%; border-collapse: collapse;
}
.flex-grid table tr:nth-child(odd) { background: #f9f9f9;
}
.flex-grid table tr:nth-child(even) { background: #fff;
}
.flex-grid table td { padding: 10px; font-size: 12px; border: 1px solid #ddd;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav> <header> <span></span> John Doe <a></a> </header> <ul> <li><span>Navigation</span></li> <li><a class="active">Dashboard</a></li> <li><a>Statistics</a></li> <li><a>Roadmap</a></li> <li><a>Milestones</a></li> <li><a>Tickets</a></li> <li><a>GitHub</a></li> <li><a>FAQ</a></li> <li><span>Other</span></li> <li><a>Search</a></li> <li><a>Settings</a></li> <li><a>Logout</a></li> </ul>
</nav>
<main> <h1>Flexbox Admin Template</h1> <div class="flex-grid"> <div> <h2>Clean CSS Code</h2> <ul> <li>no position: absolute</li> <li>no float</li> <li>no clearfix</li> <li>no faux columns</li> <li>no javascript</li> </ul> </div> <div> <h2>Font Awesome</h2> <ul> <li>no images</li> <li>no extra retina sprites</li> </ul> </div> <div> <h2>SCSS</h2> <ul> <li>no headache :)</li> </ul> </div> </div> <div class="flex-grid"> <div> <h2>Headline</h2> Some Content </div> <div> <h2>Headline</h2> Some Content </div> </div> <div class="flex-grid"> <div> <h2>Headline</h2> <table> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> </div> </div>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flexbox Admin Template - Script Codes CSS Codes
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css");
* { margin: 0; padding: 0; box-sizing: border-box;
}
:before, :after { content: ''; display: block; position: absolute; box-sizing: border-box;
}
html, body { height: 100%;
}
body { display: flex; font: 15px/1 Lato, sans-serif; color: #777;
}
a { cursor: pointer;
}
ul { list-style: none;
}
nav { width: 250px; background: #4a6a8a;
}
nav header { position: relative; height: 80px; padding: 20px 0 0 15px; font-size: 16px; color: #fff; border-bottom: 1px solid #53779b; background: #415d79;
}
nav header span { position: relative; display: inline-block; width: 36px; height: 36px; margin: 0 10px 0 0; vertical-align: middle; border: 1px solid #fff;
}
nav header span:before { content: '\f007'; font: normal 20px FontAwesome; top: 7px; left: 9px;
}
nav header a:before { content: '\f08b'; font: normal 20px FontAwesome; top: 28px; right: 15px;
}
nav ul span { display: block; padding: 15px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; border-bottom: 1px solid #53779b;
}
nav ul a { position: relative; display: block; padding: 15px 15px 17px 50px; color: #fff; border-bottom: 1px solid #53779b;
}
nav ul a:hover,
nav ul a.active { background: #53779b;
}
nav ul a:before { font: normal 16px FontAwesome; top: 15px; left: 18px;
}
nav ul li:nth-child(2) a:before { content: '\f00a';
}
nav ul li:nth-child(3) a:before { content: '\f012';
}
nav ul li:nth-child(4) a:before { content: '\f018';
}
nav ul li:nth-child(5) a:before { content: '\f024';
}
nav ul li:nth-child(6) a:before { content: '\f0c3';
}
nav ul li:nth-child(7) a:before { content: '\f09b';
}
nav ul li:nth-child(8) a:before { content: '\f0fa';
}
nav ul li:nth-child(10) a:before { content: '\f002';
}
nav ul li:nth-child(11) a:before { content: '\f085';
}
nav ul li:nth-child(12) a:before { content: '\f08b';
}
main { flex: 1; padding: 25px; background: #f5f5f5;
}
main h1 { height: 80px; margin: -25px -25px 25px -25px; padding: 0 25px; line-height: 76px; font-size: 28px; font-weight: 300; border-bottom: 1px solid #fff; background: #fafafa;
}
.flex-grid { display: flex;
}
.flex-grid > div { flex: 1; margin: 0 20px 20px 0; padding: 15px; border: 1px solid #ddd; background: #fff;
}
.flex-grid > div:last-child { margin-right: 0;
}
.flex-grid h2 { margin: -15px -15px 15px -15px; padding: 12px 15px; font-size: 16px; font-weight: 300; text-transform: uppercase; border-bottom: 1px solid #ddd; background: #fafafa;
}
.flex-grid li { position: relative; margin: 0 0 10px; padding: 0 0 0 25px;
}
.flex-grid li:before { content: '\f00c'; font: normal 16px FontAwesome; top: 0; left: 0; color: #999;
}
.flex-grid table { width: 100%; border-collapse: collapse;
}
.flex-grid table tr:nth-child(odd) { background: #f9f9f9;
}
.flex-grid table tr:nth-child(even) { background: #fff;
}
.flex-grid table td { padding: 10px; font-size: 12px; border: 1px solid #ddd;
}Flexbox Admin Template - Script Codes JS Codes
$(document).ready(function() { $('nav ul a').on('click', function() { $('nav ul a').removeClass('active'); $(this).toggleClass('active'); });
});
| Developer | Sophia |
| Username | luxonglassing |
| Uploaded | July 28, 2022 |
| Rating | 3 |
| Size | 5,040 Kb |
| Views | 36,432 |
Do you need developer help for Flexbox Admin Template?
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!
Sophia (luxonglassing) Script Codes
| Name | Size |
| Gallery prototype | 6,617 Kb |
| Scroll effect with text with help from Skrollr | 2,935 Kb |
| CSS only collapsible menu | 2,689 Kb |
| A Pen by Sophia | 12,540 Kb |
| Headroom.js demo | 1,971 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| TestTube CSS | EZPK | 2,710 Kb |
| Ocean | Gordonnl | 2,817 Kb |
| CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
| Fun form with currentColor | Bnthor | 2,713 Kb |
| Search field | Jamesbarnett | 2,100 Kb |
| Fireworks Show | Arianalynn | 3,048 Kb |
| Header | Er40 | 1,542 Kb |
| Codero Sitemap | S1m0ne | 28,169 Kb |
| CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
| A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!