File manager - Edit - /home/cipherteam/htdocs/cipherteam.in/yogi/documentation/docs-ui-typography.html
Back
<!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Tell the browser to be responsive to screen width --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <!-- Favicon icon --> <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png"> <title>Elite admin Template - The Ultimate Multipurpose admin template</title> <!-- This page css --> <!-- Custom CSS --> <!-- Custom CSS --> <link href="../inverse/dist/css/style.css" rel="stylesheet"> <!-- Custom CSS --> <link rel="stylesheet" type="text/css" href="highlights/highlight.min.css"> <!-- Custom CSS --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- Custom CSS --> <style> .font-18 { font-size: 18px !important; } </style> </head> <body class="skin-default fixed-layout"> <!-- ============================================================== --> <!-- Preloader - style you can find in spinners.css --> <!-- ============================================================== --> <div class="preloader"> <div class="loader"> <div class="loader__figure"></div> <p class="loader__label">Elite Admin</p> </div> </div> <!-- ============================================================== --> <!-- Main wrapper - style you can find in pages.scss --> <!-- ============================================================== --> <div id="main-wrapper"> <!-- ============================================================== --> <!-- Topbar header - style you can find in pages.scss --> <!-- ============================================================== --> <header class="topbar"> <nav class="navbar top-navbar navbar-expand-md navbar-dark"> <!-- ============================================================== --> <!-- Logo --> <!-- ============================================================== --> <div class="navbar-header"> <a class="navbar-brand" href="index.html"> <!-- Logo icon --><b> <!--You can put here icon as well // <i class="wi wi-sunset"></i> //--> <!-- Dark Logo icon --> <img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> <!-- Light Logo icon --> <img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> </b> <!--End Logo icon --> <!-- Logo text --><span> <!-- dark Logo text --> <img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" /> <!-- Light Logo text --> <img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a> </div> <!-- ============================================================== --> <!-- End Logo --> <!-- ============================================================== --> <div class="navbar-collapse"> <!-- ============================================================== --> <!-- toggle and nav items --> <!-- ============================================================== --> <ul class="navbar-nav mr-auto"> <!-- This is --> <li class="nav-item"> <a class="nav-link nav-toggler d-block d-md-none waves-effect waves-dark" href="javascript:void(0)"> <i class="ti-menu"></i> </a> </li> <li class="nav-item"> <a class="nav-link sidebartoggler d-none d-lg-none d-md-block waves-effect waves-dark" href="javascript:void(0)"> <i class="icon-menu"></i> </a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light" href="documentation.html">Documentation</a></li> </ul> </div> </nav> </header> <!-- ============================================================== --> <!-- End Topbar header --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Left Sidebar - style you can find in sidebar.scss --> <!-- ============================================================== --> <aside class="left-sidebar"> <!-- Sidebar scroll--> <div class="scroll-sidebar"> <!-- Sidebar navigation--> <nav class="sidebar-nav"> <ul id="sidebarnav"> <li class="nav-small-cap pt-2 mt-0">-- Getting Started with Bootstrap</li> <li> <a class="waves-effect waves-dark" href="documentation.html" aria-expanded="false"><i class="icon-chart font-18"></i> <span class="hide-menu">Introduction</span></a> </li> <li> <a class="waves-effect waves-dark" href="docs-start.html" aria-expanded="false"><i class="ti-notepad font-18"></i> <span class="hide-menu">Gettings Started</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with Angular</li> <li> <a class="waves-effect waves-dark" href="docs-install-angular.html" aria-expanded="false"><i class="mdi mdi-angular font-18"></i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with React</li> <li> <a class="waves-effect waves-dark" href="docs-install-react.html" aria-expanded="false"><i class="mdi mdi-react font-18"></i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with VueJs</li> <li> <a class="waves-effect waves-dark" href="docs-install-vuejs.html" aria-expanded="false"><i class=" font-18">V</i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Customization</li> <li> <a class="waves-effect waves-dark" href="docs-theme-options.html" aria-expanded="false"><i class="icon-drawar font-18"></i> <span class="hide-menu">Theme Options</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- UI Components</li> <li> <a class="waves-effect waves-dark has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="icon-grid font-18"></i><span class="hide-menu">Bootstrap </span></a> <ul aria-expanded="false" class="collapse first-level"> <li><a href="docs-ui-buttons.html"><span class="hide-menu"> Buttons </span></a></li> <li><a href="docs-ui-modals.html"><span class="hide-menu"> Modals </span></a></li> <li><a href="docs-ui-tabs.html"><span class="hide-menu"> Tabs </span></a></li> <li><a href="docs-ui-tooltip-popover.html"><span class="hide-menu"> Tooltip & Popover </span></a></li> <li><a href="docs-ui-notification.html"><span class="hide-menu"> Notification </span></a></li> <li><a href="docs-ui-progressbar.html"><span class="hide-menu"> Progressbar </span></a></li> <li><a href="docs-ui-typography.html"><span class="hide-menu"> Typography </span></a></li> <li><a href="docs-ui-bootstrapui.html"><span class="hide-menu"> Bootstrap UI </span></a></li> <li><a href="docs-ui-breadcrumb.html"><span class="hide-menu"> Breadcrumb </span></a></li> <li><a href="docs-ui-listmedia.html"><span class="hide-menu"> List Media </span></a></li> <li><a href="docs-ui-grid.html"><span class="hide-menu"> Grid </span></a></li> <li><a href="docs-ui-carousel.html"><span class="hide-menu"> Carousel </span></a></li> <li><a href="docs-ui-scrollspy.html"><span class="hide-menu"> Scrollspy </span></a></li> <li><a href="docs-ui-toasts.html"><span class="hide-menu"> Toasts </span></a></li> <li><a href="docs-ui-spinner.html"><span class="hide-menu"> Spinner </span></a></li> </ul> </li> <li> <a class="waves-effect waves-dark has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="icon-note font-18"></i><span class="hide-menu">Customized</span></a> <ul aria-expanded="false" class="collapse first-level"> <li><a href="docs-custom-datatables.html"><span class="hide-menu"> Datatables</span></a></li> <li><a href="docs-custom-table-footable.html"><span class="hide-menu"> Footable Table</span></a></li> <li><a href="docs-custom-table-bootstrap.html"><span class="hide-menu"> Bootstrap Table</span></a></li> <li><a href="docs-custom-cards.html"><span class="hide-menu"> Cards</span></a></li> <li><a href="docs-custom-widgets.html"><span class="hide-menu"> Widgets</span></a></li> <li><a href="docs-custom-chart-chartjs.html"><span class="hide-menu"> ChartJs</span></a></li> <li><a href="docs-custom-chart-chartist.html"><span class="hide-menu"> Chartist</span></a></li> <li><a href="docs-custom-chart-echart.html"><span class="hide-menu"> Echart</span></a></li> <li><a href="docs-custom-colorpicker.html"><span class="hide-menu"> Colorpicker</span></a></li> <li><a href="docs-custom-material-datepicker.html"><span class="hide-menu"> Material Datepicker</span></a></li> <li><a href="docs-custom-touchspin.html"><span class="hide-menu"> Touchspin</span></a></li> <li><a href="docs-custom-multiselect.html"><span class="hide-menu"> Multiselect</span></a></li> </ul> </li> </ul> </nav> <!-- End Sidebar navigation --> </div> <!-- End Sidebar scroll--> </aside> <!-- ============================================================== --> <!-- End Left Sidebar - style you can find in sidebar.scss --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Page wrapper --> <!-- ============================================================== --> <div class="page-wrapper"> <!-- ============================================================== --> <!-- Container fluid --> <!-- ============================================================== --> <div class="page-content container-fluid"> <!-- ============================================================== --> <!-- Bread crumb and right sidebar toggle --> <!-- ============================================================== --> <div class="row page-titles"> <div class="col-md-5 align-self-center"> <h4 class="text-themecolor">Typography</h4> </div> <div class="col-md-7 align-self-center"> <ol class="breadcrumb float-right"> <li class="breadcrumb-item"><a href="javascript:void(0)">Elite</a></li> <li class="breadcrumb-item text-primary font-medium">Typography</li> </ol> </div> </div> <!-- ============================================================== --> <!-- End Bread crumb and right sidebar toggle --> <!-- ============================================================== --> <div class="row"> <div class="col-md-12"> <div class="card overflow-hidden"> <div class="card-body border-bottom"> <h4 class="card-title mb-0">Bootstrap Typography</h4> </div> <div class="row justify-content-center bg-light p-5"> <div class="col-md-7"> <div class="card shadow-sm"> <div class="p-4"> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here:</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Heading With Subtitle</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <h1>Heading 1 <small>Sub-heading</small></h1> <h2>Heading 2 <small>Sub-heading</small></h2> <h3>Heading 3 <small>Sub-heading</small></h3> <h4>Heading 4 <small>Sub-heading</small></h4> <h5>Heading 5 <small>Sub-heading</small></h5> <h6>Heading 6 <small>Sub-heading</small></h6> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <h1>Heading 1 <small>Sub-heading</small></h1> <h2>Heading 2 <small>Sub-heading</small></h2> <h3>Heading 3 <small>Sub-heading</small></h3> <h4>Heading 4 <small>Sub-heading</small></h4> <h5>Heading 5 <small>Sub-heading</small></h5> <h6>Heading 6 <small>Sub-heading</small></h6> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Paragraph with justify</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Alignment text</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 150px;"> <p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">View port text</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Font weight and italics</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4 text-center"> <p class="font-weight-bold">Bold text.</p> <p class="font-weight-normal">Normal weight text.</p> <p class="font-italic">Italic text.</p> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 150px;"> <p class="font-weight-bold">Bold text.</p> <p class="font-weight-normal">Normal weight text.</p> <p class="font-italic">Italic text.</p> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Text colors</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <p class="text-muted">This is an exElite of muted text. </p> <p class="text-primary">This is an exElite of primary text.</p> <p class="text-success">This is an exElite of success text.</p> <p class="text-info">This is an exElite of info text.</p> <p class="text-warning">This is an exElite of warning text.</p> <p class="text-danger">This is an exElite of danger text.</p> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <p class="text-muted">This is an exElite of muted text. Add class <code>text-muted</code></p> <p class="text-primary">This is an exElite of primary text. Add class <code>text-primary</code></p> <p class="text-success">This is an exElite of success text. Add class <code>text-success</code></p> <p class="text-info">This is an exElite of info text. Add class <code>text-info</code></p> <p class="text-warning">This is an exElite of warning text. Add class <code>text-warning</code></p> <p class="text-danger">This is an exElite of danger text. Add class <code>text-danger</code></p> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Address</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <address> <strong>Twitter, Inc.</strong> <br> 795 Folsom Ave, Suite 600 <br> San Francisco, CA 94107 <br> <abbr title="Phone">P:</abbr>(123) 456-7890 </address> <address> <strong>George Belly</strong> <br> <a href="mailto:#">first.last@exElite.com</a> </address> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <address> <strong>Twitter, Inc.</strong> <br> 795 Folsom Ave, Suite 600 <br> San Francisco, CA 94107 <br> <abbr title="Phone">P:</abbr>(123) 456-7890 </address> <address> <strong>George Belly</strong> <br> <a href="mailto:#">first.last@exElite.com</a> </address> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Ol Listing</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa </li> </ol> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 150px;"> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa </li> </ol> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Fancy Listing with href</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <ul class="list-style-none"> <li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i> Lorem ipsum dolor sit amet</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i> Consectetur adipiscing elit</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i> Integer molestie lorem at massa </a></li> </ul> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 250px;"> <ul class="list-style-none"> <li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i> Lorem ipsum dolor sit amet</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i> Consectetur adipiscing elit</a></li> <li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i> Integer molestie lorem at massa </a></li> </ul> </code> </pre> </div> </div> </div> </div> </div> <!-- ============================================================== --> <!-- End Container fluid --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- End Page wrapper --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- footer --> <!-- ============================================================== --> <footer class="footer text-center"> All Rights Reserved by Elite. Designed and Developed by <a href="https://wrappixel.com">WrapPixel</a>. </footer> <!-- ============================================================== --> <!-- End footer --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- End Wrapper --> <!-- ============================================================== --> <!-- End Page --> <!-- ============================================================== --> <!-- All Jquery --> <!-- ============================================================== --> <script src="../assets/node_modules/jquery/jquery-3.2.1.min.js"></script> <script src="../assets/node_modules/popper/popper.min.js"></script> <script src="../assets/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- apps --> <script src="../inverse/dist/js/perfect-scrollbar.jquery.min.js"></script> <script src="../inverse/dist/js/waves.js"></script> <!--Menu sidebar --> <script src="../inverse/dist/js/sidebarmenu.js"></script> <script src="../inverse/dist/js/perfect-scrollbar.jquery.min.js"></script> <!--Custom JavaScript --> <!--Custom JavaScript --> <script src="../inverse/dist/js/custom.js"></script> <script src="highlights/highlight.min.js"></script> <script> hljs.initHighlightingOnLoad(); </script> <!-- End JS --> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 8.2.9 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings