pfdemo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pfdemo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="dist/css/patternfly.css"> <link rel="stylesheet" href="dist/css/pfdemo.css"> </head> <body> <div class="pf-grid"> <div class="pf-header"> <div class="pf-masthead"> <div class="pf-masthead__logo"> <a href=""> <img class="pf-masthead__img" src="images/logo.svg" alt=""> </a> </div> <ul class="pf-masthead__menu"> <li class="pf-masthead__item"> <a href="#0" class="pf-masthead__link"> <i class="fa fa-fw fa-dashboard pf-masthead__icon"></i> <span class="pf-masthead__link-value">Lorem</span> </a> </li> <li class="pf-masthead__item"> <a href="#0" class="pf-masthead__link"> <i class="fa fa-fw fa-shield pf-masthead__icon"></i> <span class="pf-masthead__link-value">Dolor</span> </a> </li> <li class="pf-masthead__item"> <a href="#0" class="pf-masthead__link"> <i class="fa fa-fw fa-graduation-cap pf-masthead__icon"></i> <span class="pf-masthead__link-value">Adipscing</span> </a> </li> <li class="pf-masthead__item"> <a href="#0" class="pf-masthead__link"> <i class="fa fa-fw fa-gamepad pf-masthead__icon"></i> <span class="pf-masthead__link-value">Lorem</span> </a> </li> </ul> </div> </div> <div class="pf-sidebar"> <div class="pf-vertical-nav"> <div class="pf-vertical-nav__category"> First Category </div> <ul class="pf-vertical-nav__menu"> <li class="pf-vertical-nav__item active"> <a href="#0" class="pf-vertical-nav__link"> <i class="fa fa-fw fa-dashboard pf-icon"></i> <span class="pf-vertical-nav__link-value">Lorem ipsum dolor</span> </a> </li> <li class="pf-vertical-nav__item"> <a href="#0" class="pf-vertical-nav__link"> <i class="fa fa-fw fa-shield pf-icon"></i> <span class="pf-vertical-nav__link-value">Dolor</span> </a> </li> <li class="pf-vertical-nav__item"> <a href="#0" class="pf-vertical-nav__link"> <i class="fa fa-fw fa-graduation-cap pf-icon"></i> <span class="pf-vertical-nav__link-value">Adipscing</span> </a> </li> <li class="pf-vertical-nav__item"> <a href="#0" class="pf-vertical-nav__link"> <i class="fa fa-fw fa-gamepad pf-icon"></i> <span class="pf-vertical-nav__link-value">Lorem</span> </a> </li> </ul> <div class="pf-vertical-nav__category"> Second Category </div> <ul class="pf-vertical-nav__menu"> <li class="pf-vertical-nav__item"> <a href="#0" class="pf-vertical-nav__link"> <i class="fa fa-fw fa-dashboard pf-icon"></i> <span class="pf-vertical-nav__link-value">Lorem ipsum dolor</span> </a> </li> <li class="pf-vertical-nav__item"> <a href="#0" class="pf-vertical-nav__link"> <i class="fa fa-fw fa-shield pf-icon"></i> <span class="pf-vertical-nav__link-value">Dolor</span> </a> </li> <li class="pf-vertical-nav__item"> <a href="#0" class="pf-vertical-nav__link"> <i class="fa fa-fw fa-graduation-cap pf-icon"></i> <span class="pf-vertical-nav__link-value">Adipscing</span> </a> </li> <li class="pf-vertical-nav__item"> <a href="#0" class="pf-vertical-nav__link"> <i class="fa fa-fw fa-gamepad pf-icon"></i> <span class="pf-vertical-nav__link-value">Lorem</span> </a> </li> </ul> </div> </div> <div class="pf-content"> <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestia </p> </div> <div class="col-sm-6"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestiae? Deleniti maxime odit repellendus tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque et maiores modi nisi quas sapiente temporibus veniam? Amet blanditiis dignissimos error, explicabo itaque molestia </p> </div> </div> </div> </div> </div> </body> </html>