showcase.html

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->  
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
    <title>Responsive website template for documentations</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">    
    <link rel="shortcut icon" href="favicon.ico">  
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!-- Global CSS -->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">   
    <!-- Plugins CSS -->    
    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="assets/plugins/prism/prism.css">
    <link rel="stylesheet" href="assets/plugins/lightbox/dist/ekko-lightbox.min.css">
    <link rel="stylesheet" href="assets/plugins/elegant_font/css/style.css">

    <!-- Theme CSS -->
    <link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
</head> 

<body>
    <div class="page-wrapper">
        <!-- ******Header****** -->
        <header id="header" class="header">
            <div class="container">
                <div class="branding">
                    <h1 class="logo">
                        <a href="index.html">
                            <span aria-hidden="true" class="icon_documents_alt icon"></span>
                            <span class="text-highlight">Pretty</span><span class="text-bold">Docs</span>
                        </a>
                    </h1>
                </div><!--//branding-->
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
                    <li class="active">Showcase</li>
                </ol>
            </div><!--//container-->
        </header><!--//header-->
        <div class="doc-wrapper">
            <div class="container">
                <div id="doc-header" class="doc-header text-center">
                    <h1 class="doc-title"><span aria-hidden="true" class="icon icon_genius"></span> Showcase</h1>
                    <div class="meta"><i class="fa fa-clock-o"></i> Last updated: Jan 25th, 2016</div>
                </div><!--//doc-header-->
                <div id="showcase" class="doc-body">
                    <div class="doc-content">
                        <div class="content-inner">
                            <section id="premium-themes" class="doc-section">
                                <div class="jumbotron">
                                    <h1><i class="fa fa-twitter"></i> Themes built with Twitter Bootstrap</h1>
                                    <p>You can use this page layout to showcase how other people are using your projects. Below is a list of UX-centred Bootstrap themes I made for developers.</p>
                                    <a class="scrollto btn btn-blue btn-cta" href="#theme-start">Explore Now</a>
                                </div><!--//jumbotron-->
                                <h2 id="theme-start" class="section-title">Premium Themes</h2>
                                <div class="section-block">
                                    <div class="row">
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-products-velocity/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-velocity.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Velocity</h4>
                                                    <p class="card-text">Designed for Products</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-products-velocity/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-startups-tempo/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-tempo.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Tempo</h4>
                                                    <p class="card-text">Designed for Startups</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-startups-tempo/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-web-development-agencies-devstudio/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-devstudio.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">DevStudio</h4>
                                                    <p class="card-text">Designed for Web Development Agencies</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-web-development-agencies-devstudio/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-mobile-apps-atom/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-atom.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Atom</h4>
                                                    <p class="card-text">Designed for App Startups</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-mobile-apps-atom/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-mobile-apps-delta/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-delta.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Delta</h4>
                                                    <p class="card-text">Designed for Mobile Apps</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-mobile-apps-delta/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-template-builders-tradesmen-trades/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-trades.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Trades</h4>
                                                    <p class="card-text">Designed for Builders</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-template-builders-tradesmen-trades/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-restaurants-epicure/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-epicure.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Epicure</h4>
                                                    <p class="card-text">Designed for Restaurants</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-for-restaurants-epicure/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-wedding-invitation-template-matrimony/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-matrimony.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Matrimony</h4>
                                                    <p class="card-text">Designed for Weddings</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-wedding-invitation-template-matrimony/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-template-for-bands-and-musicians-decibel/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-decibel.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Decibel</h4>
                                                    <p class="card-text">Designed for Bands</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-template-for-bands-and-musicians-decibel/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-template-for-crowdfunding-campaigns-onboard/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-onboard.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Onboard</h4>
                                                    <p class="card-text">Designed for Crowdfunding</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-template-for-crowdfunding-campaigns-onboard/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        
                                    </div><!--//row-->
                                </div><!--//section-block-->
                            </section><!--//doc-section-->
                            
                            <section id="free-themes" class="doc-section">
                                <h2 class="section-title">Free Themes</h2>
                                <div class="section-block">
                                    <div class="row">
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/free-responsive-website-template-for-developers/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-developer.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">Developer</h4>
                                                    <p class="card-text">Portfolio theme for developers</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/free-responsive-website-template-for-developers/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="card">
                                                <a href="http://themes.3rdwavemedia.com/website-templates/devaid-free-bootstrap-theme-developers/" target="_blank"><img class="img-responsive" src="assets/images/demo/theme-devaid.png" alt="screenshot" /></a>
                                                <div class="card-block">
                                                    <h4 class="card-title">DevAid</h4>
                                                    <p class="card-text">Project theme for developers</p>
                                                </div><!--//card-block-->
                                                <a class="mask" href="http://themes.3rdwavemedia.com/website-templates/devaid-free-bootstrap-theme-developers/" target="_blank"><i class="icon fa fa-search-plus"></i></a>
                                            </div><!--//card-->
                                        </div>
                                    </div><!--//row-->
                                </div><!--//section-block-->
                            </section><!--//doc-section-->
                                                        
                        </div><!--//content-inner-->
                    </div><!--//doc-content-->
                    <div class="doc-sidebar">
                        <nav id="doc-nav">
                            <ul id="doc-menu" class="nav doc-menu hidden-xs" data-spy="affix">
                                <li>
                                    <a class="scrollto" href="#premium-themes">Premium Themes</a>
                                </li>
                                <li>
                                    <a class="scrollto" href="#free-themes">Free Themes</a>
                                </li>
                            </ul><!--//doc-menu-->
                        </nav>
                    </div><!--//doc-sidebar-->
                </div><!--//doc-body-->              
            </div><!--//container-->
        </div><!--//doc-wrapper-->
        
        <div id="promo-block" class="promo-block promo-block-2">
            <div class="container">
                <div class="promo-block-inner">
                    <h3 class="promo-title text-center"><i class="fa fa-heart"></i> <a href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank">AppKit - Bootstrap Angular Admin Theme for Developers</a></h3>
                    <div class="row">
                        <div class="figure-holder col-md-5 col-sm-6 col-xs-12">
                            <div class="figure-holder-inner">
                                <a href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-responsive" src="assets/images/demo/appkit-dashboard-4-thumb.jpg" alt="AppKit Theme" /></a>
                                <a class="mask" href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm"><i class="icon fa fa-heart pink"></i></a>
                            </div>
                        </div><!--//figure-holder-->
                        <div class="content-holder col-md-7 col-sm-6 col-xs-12">
                            <div class="content-holder-inner">
                                <div class="desc">
                                    <h4 class="content-title"><strong>Love this free documentation theme?</strong></h4>
                                    <p>Check out AppKit - an Angular admin theme I created with my developer friend <a href="https://twitter.com/tnajdek">Tom Najdek</a> for developers. AppKit uses modern front-end technologies and is packed with useful components and widgets to speed up your app development.</p>
                                    <p><strong class="highlight">[Tip for developers]:</strong> If your project is Open Source, you can use this area to promote your other projects or hold third party adverts like Bootstrap and FontAwesome do!</p>
                                    <a class="btn btn-cta" href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm">View Demo</a>
                                </div><!--//desc-->
                                <div class="author"><a href="http://themes.3rdwavemedia.com">Xiaoying Riley</a></div>
                            </div><!--//content-holder-inner-->
                        </div><!--//content-holder-->
                    </div><!--//row-->
                </div><!--//promo-block-inner-->  
            </div><!--//container-->
        </div><!--//promo-block-->
        
    </div><!--//page-wrapper-->
    
    <footer id="footer" class="footer text-center">
        <div class="container">
            <!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can check out other license options via our website: themes.3rdwavemedia.com */-->
            <small class="copyright">Designed with <i class="fa fa-heart"></i> by <a href="http://themes.3rdwavemedia.com/" target="_blank">Xiaoying Riley</a> for developers</small>
            
        </div><!--//container-->
    </footer><!--//footer-->
    
     
    <!-- Main Javascript -->          
    <script type="text/javascript" src="assets/plugins/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/plugins/prism/prism.js"></script>    
    <script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>  
    <script type="text/javascript" src="assets/plugins/lightbox/dist/ekko-lightbox.min.js"></script>                                                            
    <script type="text/javascript" src="assets/plugins/jquery-match-height/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    
</body>
</html> 