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 Andres on 26 August 2022, Friday.
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://weloveiconfonts.com/api/?family=fontawesome");
* { margin: 0; padding: 0; box-sizing: border-box;
}
:before, :after { display: block; position: absolute;
}
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: #3b4854;
}
nav header { position: relative; height: 80px; padding: 20px 0 0 15px; font-size: 16px; color: #fff; border-bottom: 1px solid #465563; background: #303b45;
}
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 #465563;
}
nav ul a { position: relative; display: block; padding: 15px 15px 17px 50px; color: #fff; border-bottom: 1px solid #465563;
}
nav ul a:hover,
nav ul a.active { background: #465563;
}
nav ul a:before { font: normal 20px FontAwesome; top: 14px; left: 16px;
}
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; text-transform: uppercase; 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: #5b5;
}
.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>
</body>
</html>
Flexbox Admin Template - Script Codes CSS Codes
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("http://weloveiconfonts.com/api/?family=fontawesome");
* { margin: 0; padding: 0; box-sizing: border-box;
}
:before, :after { display: block; position: absolute;
}
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: #3b4854;
}
nav header { position: relative; height: 80px; padding: 20px 0 0 15px; font-size: 16px; color: #fff; border-bottom: 1px solid #465563; background: #303b45;
}
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 #465563;
}
nav ul a { position: relative; display: block; padding: 15px 15px 17px 50px; color: #fff; border-bottom: 1px solid #465563;
}
nav ul a:hover,
nav ul a.active { background: #465563;
}
nav ul a:before { font: normal 20px FontAwesome; top: 14px; left: 16px;
}
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; text-transform: uppercase; 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: #5b5;
}
.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;
}
Developer | Andres |
Username | Angelfire |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 4,741 Kb |
Views | 40,480 |
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!
Name | Size |
Simple HTML5 CSS3 JS Project | 6,557 Kb |
Collection CSS3 buttons | 3,132 Kb |
Simple Dashboard Search | 4,595 Kb |
Angular responsive comment system | 7,439 Kb |
Vue 2.0 Intro | 1,776 Kb |
Array vs object | 3,043 Kb |
Chart.js Infobox | 3,900 Kb |
Font Awesome Flat Icons | 5,750 Kb |
Food Widget by Andreea Nicolaescu | 5,085 Kb |
Weather App | 4,531 Kb |
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!
Name | Username | Size |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
HexMaze | Cantelope | 4,825 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Blank Starter | Mhartington | 2,171 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Rotating Preloader with Anime.js | Tamashi | 2,450 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Price table | Serluk | 5,928 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
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!