material-ui-kit

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png"> <link rel="icon" type="image/png" href="../assets/img/favicon.png"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Profile Page - Material Kit by Creative Tim</title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="../assets/css/material-kit.css" rel="stylesheet"/> </head> <body class="profile-page"> <nav class="navbar navbar-transparent navbar-fixed-top navbar-color-on-scroll"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.creative-tim.com">Creative Tim</a> </div> <div class="collapse navbar-collapse" id="navigation-example"> <ul class="nav navbar-nav navbar-right"> <li> <a href="../components-documentation.html" target="_blank"> Components </a> </li> <li> <a href="http://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-freebie" target="_blank"> <i class="material-icons">unarchive</i> Upgrade to PRO </a> </li> <li> <a href="https://twitter.com/CreativeTim" target="_blank" class="btn btn-simple btn-white btn-just-icon"> <i class="fa fa-twitter"></i> </a> </li> <li> <a href="https://www.facebook.com/CreativeTim" target="_blank" class="btn btn-simple btn-white btn-just-icon"> <i class="fa fa-facebook-square"></i> </a> </li> <li> <a href="https://www.instagram.com/CreativeTimOfficial" target="_blank" class="btn btn-simple btn-white btn-just-icon"> <i class="fa fa-instagram"></i> </a> </li> </ul> </div> </div> </nav> <div class="wrapper"> <div class="header header-filter" style="background-image: url('../assets/img/examples/city.jpg');"></div> <div class="main main-raised"> <div class="profile-content"> <div class="container"> <div class="row"> <div class="profile"> <div class="avatar"> <img src="../assets/img/christian.jpg" alt="Circle Image" class="img-circle img-responsive img-raised"> </div> <div class="name"> <h3 class="title">Christian Louboutin</h3> <h6>Designer</h6> </div> </div> </div> <div class="description text-center"> <p>An artist of considerable range, Chet Faker — the name taken by Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. </p> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="profile-tabs"> <div class="nav-align-center"> <ul class="nav nav-pills" role="tablist"> <li class="active"> <a href="#studio" role="tab" data-toggle="tab"> <i class="material-icons">camera</i> Studio </a> </li> <li> <a href="#work" role="tab" data-toggle="tab"> <i class="material-icons">palette</i> Work </a> </li> <li> <a href="#shows" role="tab" data-toggle="tab"> <i class="material-icons">favorite</i> Favorite </a> </li> </ul> <div class="tab-content gallery"> <div class="tab-pane active" id="studio"> <div class="row"> <div class="col-md-6"> <img src="../assets/img/examples/chris1.jpg" class="img-rounded" /> <img src="../assets/img/examples/chris0.jpg" class="img-rounded" /> </div> <div class="col-md-6"> <img src="../assets/img/examples/chris3.jpg" class="img-rounded" /> <img src="../assets/img/examples/chris4.jpg" class="img-rounded" /> </div> </div> </div> <div class="tab-pane text-center" id="work"> <div class="row"> <div class="col-md-6"> <img src="../assets/img/examples/chris5.jpg" class="img-rounded" /> <img src="../assets/img/examples/chris7.jpg" class="img-rounded" /> <img src="../assets/img/examples/chris9.jpg" class="img-rounded" /> </div> <div class="col-md-6"> <img src="../assets/img/examples/chris6.jpg" class="img-rounded" /> <img src="../assets/img/examples/chris8.jpg" class="img-rounded" /> </div> </div> </div> <div class="tab-pane text-center" id="shows"> <div class="row"> <div class="col-md-6"> <img src="../assets/img/examples/chris4.jpg" class="img-rounded" /> <img src="../assets/img/examples/chris6.jpg" class="img-rounded" /> </div> <div class="col-md-6"> <img src="../assets/img/examples/chris7.jpg" class="img-rounded" /> <img src="../assets/img/examples/chris5.jpg" class="img-rounded" /> <img src="../assets/img/examples/chris9.jpg" class="img-rounded" /> </div> </div> </div> </div> </div> </div>  </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <nav class="pull-left"> <ul> <li> <a href="http://www.creative-tim.com"> Creative Tim </a> </li> <li> <a href="http://presentation.creative-tim.com"> About Us </a> </li> <li> <a href="http://blog.creative-tim.com"> Blog </a> </li> <li> <a href="http://www.creative-tim.com/license"> Licenses </a> </li> </ul> </nav> <div class="copyright pull-right"> © 2016, made with <i class="fa fa-heart heart"></i> by Creative Tim </div> </div> </footer> </body>  <script src="../assets/js/jquery.min.js" type="text/javascript"></script> <script src="../assets/js/bootstrap.min.js" type="text/javascript"></script> <script src="../assets/js/material.min.js"></script>  <script src="../assets/js/nouislider.min.js" type="text/javascript"></script>  <script src="../assets/js/bootstrap-datepicker.js" type="text/javascript"></script>  <script src="../assets/js/material-kit.js" type="text/javascript"></script> </html>