gentelella
Version:
Gentelella Admin is a free to use Bootstrap admin template
656 lines (607 loc) • 35 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title>
<!-- Bootstrap -->
<!-- Font Awesome -->
<!-- NProgress -->
<!-- Custom styling plus plugins -->
<script type="module" src="/src/main-minimal.js"></script>
</head>
<body class="nav-md page-typography">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title"><img src="images/logo.svg" alt="Gentelella Alela!" class="logo-full" style="height: 40px;"><img src="images/logo-icon.svg" alt="Gentelella" class="logo-icon" style="height: 30px; display: none;"></a>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h4>John Doe</h4>
</div>
</div>
<!-- /menu profile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="index.html">Dashboard 1</a></li>
<li><a href="index2.html">Dashboard 2</a></li>
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
<li><a href="index3.html">Dashboard 3</a></li>
</ul>
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="form.html">General Form</a></li>
<li><a href="form_advanced.html">Advanced Components</a></li>
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="form_wizards.html">Form Wizard</a></li>
<li><a href="form_upload.html">Form Upload</a></li>
<li><a href="form_buttons.html">Form Buttons</a></li>
</ul>
<li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="general_elements.html">General Elements</a></li>
<li><a href="media_gallery.html">Media Gallery</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="widgets.html">Widgets</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="inbox.html">Inbox</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
<li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="tables.html">Tables</a></li>
<li><a href="tables_dynamic.html">Table Dynamic</a></li>
</ul>
<li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="chartjs.html">Chart JS</a></li>
<li><a href="chartjs2.html">Chart JS2</a></li>
<li><a href="chart3.html">Chart JS3</a></li>
<li><a href="echarts.html">ECharts</a></li>
<li><a href="other_charts.html">Other Charts</a></li>
</ul>
<li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
<li><a href="fixed_footer.html">Fixed Footer</a></li>
</ul>
</ul>
</div>
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="e_commerce.html">E-commerce</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="project_detail.html">Project Detail</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="profile.html">Profile</a></li>
</ul>
<li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="page_403.html">403 Error</a></li>
<li><a href="page_404.html">404 Error</a></li>
<li><a href="page_500.html">500 Error</a></li>
<li><a href="plain_page.html">Plain Page</a></li>
<li><a href="login.html">Login Page</a></li>
<li><a href="pricing_tables.html">Pricing Tables</a></li>
</ul>
<li><a><i class="fas fa-sitemap"></i> Multilevel Menu <span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="#level1_1">Level One</a></li>
<li><a>Level One<span class="fas fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu"><a href="level2.html">Level Two</a>
<li><a href="#level2_1">Level Two</a>
<li><a href="#level2_2">Level Two</a>
</ul>
<li><a href="#level1_2">Level One</a></li>
</ul>
<li><a href="landing.html"><i class="fas fa-laptop"></i> Landing Page</a></li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<!-- /menu footer buttons -->
<div class="sidebar-footer hidden-small">
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Settings">
<span class="fas fa-cog" aria-hidden="true"></span>
</a>
<a data-bs-toggle="tooltip" data-bs-placement="top" title="FullScreen">
<span class="fas fa-expand" aria-hidden="true"></span>
</a>
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Lock">
<span class="fas fa-eye-slash" aria-hidden="true"></span>
</a>
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Logout" href="login.html">
<span class="fas fa-power-off" aria-hidden="true"></span>
</a>
</div>
<!-- /menu footer buttons -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<div class="nav toggle">
<a id="menu_toggle"><i class="fas fa-bars"></i></a>
</div>
<nav class="nav navbar-nav">
<ul class="navbar-right">
<li class="nav-item dropdown open" style="padding-left: 15px;">
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe
</a>
<div class="dropdown-menu dropdown-usermenu float-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="javascript:;"> Profile</a>
<a class="dropdown-item" href="javascript:;">
<span class="badge bg-red float-end">50%</span>
<span>Settings</span>
</a>
<a class="dropdown-item" href="javascript:;">Help</a>
<a class="dropdown-item" href="login.html"><i class="fas fa-sign-out-alt float-end"></i> Log Out</a>
</div>
<li role="presentation" class="nav-item dropdown open">
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-envelope"></i>
<span class="badge bg-green">6</span>
</a>
<ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
<li class="nav-item">
<div class="text-center">
<a class="dropdown-item">
<strong>See All Alerts</strong>
<i class="fas fa-angle-right"></i>
</a>
</div>
</ul>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Typography</h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 mb-3 float-end top_search">
<div class="input-group search-bar-fix">
<input type="text" class="form-control" placeholder="Search typography...">
<button class="btn btn-outline-secondary" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- Headings Section -->
<div class="row mb-4">
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h4>Headings <small>HTML heading elements with Bootstrap 5 utilities</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-md-6">
<h1>h1. Bootstrap heading <small class="text-muted">Secondary text</small></h1>
<h4>h2. Bootstrap heading <small class="text-muted">Secondary text</small></h4>
<h3>h3. Bootstrap heading <small class="text-muted">Secondary text</small></h3>
<h4>h4. Bootstrap heading <small class="text-muted">Secondary text</small></h4>
<h5>h5. Bootstrap heading <small class="text-muted">Secondary text</small></h5>
<h6>h6. Bootstrap heading <small class="text-muted">Secondary text</small></h6>
</div>
<div class="col-md-6">
<h3>Display Headings <small class="text-muted">For dramatic impact</small></h3>
<p class="text-muted small mb-3">Display headings are extra-large headings designed for hero sections and prominent titles.</p>
<div class="display-examples">
<h1 class="display-1">HERO TITLE</h1>
<p class="text-muted small">display-1 • 6rem (96px) • For main landing pages</p>
<h1 class="display-2 mt-4">Feature Launch</h1>
<p class="text-muted small">display-2 • 5.5rem (88px) • For major announcements</p>
<h1 class="display-3 mt-4">Section Header</h1>
<p class="text-muted small">display-3 • 4.5rem (72px) • For prominent sections</p>
<h1 class="display-4 mt-4">Product Title</h1>
<p class="text-muted small">display-4 • 3.5rem (56px) • For product features</p>
<h1 class="display-5 mt-4">Call to Action</h1>
<p class="text-muted small">display-5 • 3rem (48px) • For marketing CTAs</p>
<h1 class="display-6 mt-4">Subtitle</h1>
<p class="text-muted small">display-6 • 2.5rem (40px) • For large subtitles</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Text Elements Section -->
<div class="row mb-4">
<div class="col-md-6">
<div class="x_panel">
<div class="x_title">
<h4>Text Elements <small>Inline text elements</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<h5>Abbreviations</h5>
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="x_panel">
<div class="x_title">
<h4>Text Utilities <small>Bootstrap 5 text classes</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<h5>Text Colors</h5>
<p class="text-primary">Primary text color</p>
<p class="text-secondary">Secondary text color</p>
<p class="text-success">Success text color</p>
<p class="text-danger">Danger text color</p>
<p class="text-warning">Warning text color</p>
<p class="text-info">Info text color</p>
<p class="text-light bg-dark p-2">Light text color</p>
<p class="text-dark">Dark text color</p>
<p class="text-muted">Muted text color</p>
<h5>Text Alignment</h5>
<p class="text-start">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">Right aligned text on all viewport sizes.</p>
</div>
</div>
</div>
</div>
<!-- Typography Examples Section -->
<div class="row mb-4">
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h4>Real-World Typography Examples <small>Practical usage demonstrations</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-md-8">
<!-- Article Example -->
<article class="mb-5">
<header class="mb-4">
<h1 class="display-4">The Future of Web Design</h1>
<p class="lead text-muted">Exploring modern trends and best practices in contemporary web development</p>
<div class="d-flex align-items-center text-muted small">
<span class="me-3"><i class="fas fa-user me-1"></i> By Sarah Johnson</span>
<span class="me-3"><i class="fas fa-calendar me-1"></i> March 15, 2032</span>
<span><i class="fas fa-clock me-1"></i> 8 min read</span>
</div>
</header>
<div class="article-content">
<p class="lead">In the rapidly evolving landscape of web design, staying current with the latest trends and technologies is essential for creating engaging, accessible, and performant user experiences.</p>
<h4>Design Principles That Matter</h4>
<p>Modern web design is built on several foundational principles that guide successful projects. These include <strong>user-centered design</strong>, <em>accessibility-first thinking</em>, and <mark>performance optimization</mark>.</p>
<h3>Key Considerations</h3>
<ul class="list-unstyled">
<li class="mb-2"><i class="fas fa-check text-success me-2"></i> Mobile-first responsive design</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i> Semantic HTML structure</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i> Progressive enhancement</li>
<li class="mb-2"><i class="fas fa-check text-success me-2"></i> Performance budgets</li>
</ul>
<blockquote class="blockquote border-start border-4 border-primary ps-4 py-2 my-4">
<p class="mb-2">"Design is not just what it looks like and feels like. Design is how it works."</p>
<footer class="blockquote-footer">Steve Jobs</footer>
</blockquote>
<h3>Implementation Strategy</h3>
<p>When implementing these principles, consider the following workflow:</p>
<ol>
<li><strong>Research and Discovery:</strong> Understanding user needs and business requirements</li>
<li><strong>Design and Prototyping:</strong> Creating wireframes and interactive prototypes</li>
<li><strong>Development:</strong> Building with modern frameworks and tools</li>
<li><strong>Testing and Optimization:</strong> Continuous improvement based on user feedback</li>
</ol>
</div>
</article>
</div>
<div class="col-md-4">
<!-- Sidebar Example -->
<aside>
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">Quick Stats</h5>
</div>
<div class="card-body">
<div class="mb-3">
<div class="d-flex justify-content-between">
<span class="fw-semibold">Mobile Users</span>
<span class="badge bg-primary">68%</span>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between">
<span class="fw-semibold">Page Load Time</span>
<span class="badge bg-success">2.3s</span>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between">
<span class="fw-semibold">Accessibility Score</span>
<span class="badge bg-info">95/100</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Related Resources</h5>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a href="#" class="text-decoration-none">
<i class="fas fa-book me-2 text-primary"></i>
Web Design Best Practices
</a>
<li class="mb-2">
<a href="#" class="text-decoration-none">
<i class="fas fa-code me-2 text-success"></i>
CSS Grid and Flexbox Guide
</a>
<li class="mb-2">
<a href="#" class="text-decoration-none">
<i class="fas fa-mobile-alt me-2 text-warning"></i>
Mobile-First Design Patterns
</a>
<li>
<a href="#" class="text-decoration-none">
<i class="fas fa-universal-access me-2 text-info"></i>
Accessibility Guidelines
</a>
</ul>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Components Section -->
<div class="row mb-4">
<div class="col-md-6">
<div class="x_panel">
<div class="x_title">
<h4>Badges & Labels <small>Status indicators and tags</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<h5>Standard Badges</h5>
<div class="mb-3">
<span class="badge bg-primary me-2">Primary</span>
<span class="badge bg-secondary me-2">Secondary</span>
<span class="badge bg-success me-2">Success</span>
<span class="badge bg-danger me-2">Danger</span>
<span class="badge bg-warning text-dark me-2">Warning</span>
<span class="badge bg-info me-2">Info</span>
<span class="badge bg-light text-dark me-2">Light</span>
<span class="badge bg-dark">Dark</span>
</div>
<h5>Rounded Pill Badges</h5>
<div class="mb-3">
<span class="badge rounded-pill bg-primary me-2">Primary</span>
<span class="badge rounded-pill bg-success me-2">Success</span>
<span class="badge rounded-pill bg-warning text-dark me-2">Warning</span>
<span class="badge rounded-pill bg-danger">Danger</span>
</div>
<h5>Contextual Usage</h5>
<div class="mb-3">
<h6>Messages <span class="badge bg-secondary">4</span></h6>
<h6>Notifications <span class="badge bg-danger">12</span></h6>
<h6>Tasks <span class="badge bg-success">8</span></h6>
</div>
<h5>Status Indicators</h5>
<div>
<p class="mb-1">
<span class="badge bg-success me-2">Online</span> System operational
</p>
<p class="mb-1">
<span class="badge bg-warning text-dark me-2">Maintenance</span> Scheduled downtime
</p>
<p class="mb-1">
<span class="badge bg-danger me-2">Offline</span> Service unavailable
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="x_panel">
<div class="x_title">
<h4>Lists & Content <small>Structured content examples</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<h5>Definition Lists</h5>
<dl class="row">
<dt class="col-sm-3">Frontend</dt>
<dd class="col-sm-9">The user-facing part of a website or application</dd>
<dt class="col-sm-3">Backend</dt>
<dd class="col-sm-9">Server-side logic and database management</dd>
<dt class="col-sm-3">API</dt>
<dd class="col-sm-9">Application Programming Interface for data exchange</dd>
</dl>
<h5>Feature List</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
Responsive Design
<span class="badge bg-primary rounded-pill">✓</span>
<li class="list-group-item d-flex justify-content-between align-items-center">
Cross-browser Support
<span class="badge bg-primary rounded-pill">✓</span>
<li class="list-group-item d-flex justify-content-between align-items-center">
SEO Optimized
<span class="badge bg-success rounded-pill">✓</span>
<li class="list-group-item d-flex justify-content-between align-items-center">
PWA Ready
<span class="badge bg-warning rounded-pill">Soon</span>
</ul>
</div>
</div>
</div>
</div>
<!-- Code and Preformatted Text -->
<div class="row mb-4">
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h4>Code Examples <small>Inline and block code formatting</small></h4>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-md-6">
<h5>Inline Code</h5>
<p>Use the <code><code></code> tag for inline code snippets like <code>console.log()</code> or <code>document.querySelector()</code>.</p>
<h5>Keyboard Input</h5>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy and <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>
<h5>Sample Output</h5>
<samp>This text is meant to be treated as sample output from a computer program.</samp>
</div>
<div class="col-md-6">
<h5>Code Block</h5>
<pre><code>function greetUser(name) {
if (!name) {
throw new Error('Name is required');
}
return `Hello, ${name}! Welcome to our application.`;
}
// Usage example
const message = greetUser('John Doe');
console.log(message);</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="float-end">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
</body>
</html>