jekyll-theme-prettydocs 0.0.6 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 97bba91b82e7c196c3825c93f0722f942780d4e3
-  data.tar.gz: f6fea151c22e2f2ec3fb3522e4cf14509c9d9d30
+SHA256:
+  metadata.gz: 35236552eb62b4c73f371d4e3895264ac789011fdd50e2e9436dcbc8801426b8
+  data.tar.gz: f521e4f73f4df9bf1cf45e293d66de14e8848171c9779f37eb25f6417e033ed7
 SHA512:
-  metadata.gz: f79550269f95aa9aac5a88fa5f1ac120c5b0b118c13aa65141d6fe7786e08264f331620fb2589e26469844a13d16c13bf3b4627509190aae59fc17bfcca36f48
-  data.tar.gz: 90cd50db7d623ef072324b7842e944de12fb4459cb64957e1d0064e73b37909bfbebf45108e8d2bd81f9dff4a58bcfde5a70a70ff70e987d9ccdad938b8bcffa
+  metadata.gz: e0c631527a7df23fff5d63b7eb1abd2d3f0fdf5ce82d026cda88071f7329a2d496f6b76e09fddcd11c5b14794b8904824432a12bb92a5cc99735e837a2479265
+  data.tar.gz: f33cf2ae8fb082f2d35939a85e53c5d855ca40ab91a097184eec2628cbbd121ee224923b8cc6a5383a905ff2733af662b7272f76c2c595ae608548a0b9697f5a

data/README.md

@@ -2,39 +2,42 @@
 
 Inspired on https://themes.3rdwavemedia.com/demo/prettydocs/
 
-## Installation
+# Dependency
+
+Jekyll ~> 3.3
+
+# Quick start
+
+```bash
+jekyll new mydoc
+cd mydoc
+```
 
 Add this line to your Jekyll site's Gemfile:
 
 ```ruby
 gem "jekyll-theme-prettydocs"
 ```
-And then run:
 
-```shell
-$ sudo bundle update
-```
-
-Or install it yourself, run:
-
-```shell
-$ gem install jekyll-theme-prettydocs
+```bash
+bundle install
 ```
 
 After yor install theme, you should replace `minima` theme for new `jekyll-theme-prettydocs` theme.
 To do it, change in `_config.yml` file, like this:
 
 ```yaml
-#replace
+# Replace
 theme: minima
-#by
+
+# By
 theme: jekyll-theme-prettydocs
 ```
 
 To start jekyll server, run:
 
-```
-$ jekyll s
+```bash
+bundle exec jekyll serve
 ```
 
 Open in your browser `http://localhost:4000`. See the site, with this wonderful theme.
@@ -43,198 +46,76 @@ Open in your browser `http://localhost:4000`. See the site, with this wonderful
 
 **After you install and start, you can to do your changes.**
 
-## Customize theme
-
-### Home Page
-
-The first thing that you will want to change is home page links list. So, what you need is simple. Just create your pages, with these attributes:
-
-```yaml
-cards-section: blue
-title: Title of page
-intro: Intro of page
-icon: icon_gift
-```
-
-So, with these small attributes into your pages, you can create a list of links in home page. Below, some description about each attribute.
-
-#### cards-section
-
-Cards section is usually the color of card. The colors availables is: blue, pink, purple, orange, green, and primary.
-
-#### title
-
-The title is title of card. It's the strong text on card.
-
-#### intro
-
-The intro is a introdution of card. It's a description about card.
-
-#### icon
-
-The icon is icon of card. 600+ FontAwesome icons.
-
-### Header
-
-Default header.
-
-{% include header.html %}
-
-Custom header, with no breadcrumb.
-
-{% include breadcrumb="" %}
-
-Below, some description about all attributes.
-
-#### icon
-
-The icon is icon of page. 600+ FontAwesome icons.
-
-#### title
-
-The title is title of page. It's the same color of page.
-
-#### bold
+# Files and folder structures
 
-The bold is white title of page.
+The files of version 1.0.0 was totally rewrite. In practically, It started from zero.
 
-#### breadcrumb
+The idea was reduce project size, and to make it more simple and clean as possible. To do it, there was a change of thinking. From now on, the idea is hand over the layouts and to allow the user to build your pages as you like.
 
-The breadcrumb usually show or hide the section of breadcrumb. Default value is 'true', but if you set '' or 'false' you don't show breadcrumb more.
+However with the help of [Tips Page](https://github.com/maiconpinto/jekyll-theme-prettydocs/wiki/Tips-page), you will be able to replicate and to adapt the content of Pretty Docs template with more facility and simplicity.
 
-#### breadcrumb-home-link
+This is the idea.
 
-The link to home link.
-
-#### breadcrumb-home-title
-
-The title of Home page link.
-
-#### breadcrumb-active
-
-The breadcrumb-active usually show or hide the second part of breadcrumb.
-
-Example with others attributes.
-
-{% include header.html
-    icon="fa fa-hashtag"
-    title="Title"
-    bold="White"
-    breadcrumb=""
-%}
-
-### Promo Block
-
-Default.
-
-{% include promo-block.html %}
-
-Custom promo block.
-
-{% include
-    title="My Project"
-    figure="/assets/images/demo/appkit-account-drive-thumb.jpg"
-    figure-link="http://maiconpinto.com.br"
-%}
-
-Below, some description about all attributes.
-
-#### icon
-
-The icon is icon of promo block. 600+ FontAwesome icons.
-
-#### title
-
-The title is title of promo block.
-
-#### title-link
-
-The title-link is the URL of title of promo block.
-
-#### figure
-
-The figure is the URL of image of promo block.
-
-#### figure-link
-
-The figure-link is the link image of promo block.
-
-#### figure-title
-
-The figure-title is the title of alt attribute of image.
-
-#### content
-
-The content is description of promo block.
+```
+\_includes
+    footer.html
+    home.html
+    promo-block.html
+\_layouts
+    home.html
+    page.html
+```
 
-#### content-title
+# Layouts
 
-The content-title is the title of content. It's the strong text.
+## Home
 
-#### author
+The Home Layout is the base of initial page of theme. Basically, the `_includes/home.html` file is included, and is responsible of main content of home page. Therefore, to make changes you will create a file with same name, and it show on home page.
 
-The author is author name.
+You can access the [Wiki](https://github.com/maiconpinto/jekyll-theme-prettydocs/wiki) to learn how you to create your Home Page step-by-step.
 
-#### author-link
+## Page
 
-The author-link is URL to author.
+One of the big differences between version 1.0.0 to 0.0.5 is the Page Layout. This version is more easy to define the page color. You have only to include `color: green` attribute, for example, to this page assume the green color.
 
-### Content of Page
+Still is not possible to create automagically a page, but thinking on more facility of the development, was created some code lines that, used together with Emmet plugin will facility more your life.
 
-I'd like to do it the easy way, but for now I've only found this way.
-You need to have the Emmet plugin installed in your editor.
-Once installed, you will copy the below line, and paste into body of your page.
+To start, you should think that all pages follow the same pattern of code, with exception of content of page, the structure is the same.
 
-```html
-div.doc-wrapper>div.container>((div#doc-header.doc-header.text-center>(h1.doc-title>i.icon.fa.fa-paper-plane{Quick Start})+(div.meta>i.fa.fa-clock-o{Last Update on}))+(div.doc-body>((div.doc-content>div.content-inner>section.doc-section#download-section>(h2.section-title{Download})+(div.section-block))+(div.doc-sidebar.hidden-xs>nav#doc-menu>li>a.scrollto[href=#download-section]{Download}))))
-```
+Then...
 
-## A complete example of page
+Following this idea, you will have in a simplicity way the following structure of a page:
 
 ```html
 ---
-layout: green
-title: Page example
-permalink: /example-page/
-cards-section: green
-title: Title of page
-intro: Intro of page
-icon: icon_gift
+layout: page
+title: Quick Start
+permalink: quick-start
+color: green
 ---
 
-{% include header.html
-    icon="fa fa-hashtag"
-    title="Quick Start"
-    bold="Page"
-%}
-
-div.doc-wrapper>div.container>((div#doc-header.doc-header.text-center>(h1.doc-title>i.icon.fa.fa-paper-plane{Quick Start})+(div.meta>i.fa.fa-clock-o{Last Update on}))+(div.doc-body>((div.doc-content>div.content-inner>section.doc-section#download-section>(h2.section-title{Download})+(div.section-block{div.doc-wrapper>div.container>((div#doc-header.doc-header.text-center>(h1.doc-title>i.icon.fa.fa-paper-plane{Quick Start})+(div.meta>i.fa.fa-clock-o{Last Update on}))+(div.doc-body>((div.doc-content>div.content-inner>section.doc-section#download-section>(h2.section-title{Download})+(div.section-block))+(div.doc-sidebar.hidden-xs>nav#doc-menu>li>a.scrollto[href=#download-section]{Download}))))}))+(div.doc-sidebar.hidden-xs>nav#doc-menu>li>a.scrollto[href=#download-section]{Download}))))
-
-{% include promo-block.html
-    title="My Project"
-    figure="/assets/images/demo/appkit-account-drive-thumb.jpg"
-    figure-link="http://maiconpinto.com.br"
-    author="Maicon Pinto"
-    author-link="http://maiconpinto.com.br"
-%}
-```
+# header 
 
-![](./assets/images/demo/a-complete-example-of-page.png)
+header#header.header>div.container>((div.branding>h1.logo>a[href="/"]>span.icon_documents_alt.icon[aria-hidden="true"]+span.text-highlight{Pretty}+span.text-bold{Docs})+(ol.breadcrumb>((li.breadcrumb-item>a[href="/"]{Home})+(li.breadcrumb-item.active{Quick Start}))))
 
+# content
 
-## Contributing
+div.doc-wrapper>div.container>(div#doc-header.doc-header.text-center>(h1.doc-title>i.icon.fa.fa-paper-plane+{Quick Start})+div.meta>i.far.fa-clock+{Last updated: July 18th, 2018})+(div.doc-body.row>(div.doc-content.col-md-9.col-12.order-1>div.content-inner{#sections})+(div.doc-sidebar.col-md-3.col-12.order-0.d-none.d-md-flex>div#doc-nav.doc-nav>nav#doc-menu.nav.doc-menu.flex-column.sticky{#menu-itens}))
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/maiconpinto/jekyll-theme-prettydocs. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+# sections
 
-## Development
+section#replace-section.doc-section>(h2.section-title{#replace})+(div.section-block>(h3.block-title{#title})+(p{#content}))
 
-To set up your environment to develop this theme, run `bundle install`.
+# menu-itens
 
-You theme is setup just like a normal Jelyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+a.nav-link.scrollto[href="#download-section"]{Download}
 
-When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
+nav.doc-sub-menu.nav.flex-column>a.nav-link.scrollto[href="#download-section"]{Download}
 
-## License
+# footer
+
+footer#footer.footer.text-center>div.container>small.copyright(({Designed with}>i.fa.fa-heart)+({ by }>a[target="_blank" href="https://themes.3rdwavemedia.com/"]{Xiaoying Riley})+{for developers})
+```
 
-The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+For more details, click in [Tips Page](https://github.com/maiconpinto/jekyll-theme-prettydocs/wiki/Tips-page).
 

data/_includes/footer.html

@@ -1,7 +1,7 @@
-<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 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 buy the commercial license via our website: themes.3rdwavemedia.com */-->
+        <small class="copyright">Designed with <i class="fa fa-heart"></i> by <a href="https://themes.3rdwavemedia.com/" target="_blank">Xiaoying Riley</a> for developers</small>
+        
+    </div><!--//container-->
 </footer><!--//footer-->

data/_includes/home.html

@@ -0,0 +1,122 @@
+<!-- GITHUB BUTTON JS -->
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+ 
+<!--FACEBOOK LIKE BUTTON JAVASCRIPT SDK-->
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+<div class="page-wrapper">
+    
+    <!-- ******Header****** -->
+    <header class="header text-center">
+        <div class="container">
+            <div class="branding">
+                <h1 class="logo">
+                    <span aria-hidden="true" class="icon_documents_alt icon"></span>
+                    <span class="text-highlight">Pretty</span><span class="text-bold">Docs</span>
+                </h1>
+            </div><!--//branding-->
+            <div class="tagline">
+                <p>Free Bootstrap 4 theme for your project documentation</p>
+                <p>Designed with <i class="fas fa-heart"></i> for developers</p>
+            </div><!--//tagline-->
+            <div class="social-container">
+                <!-- Replace with your Github Button -->
+                <div class="github-btn mb-2">
+                    <a class="github-button" href="https://github.com/xriley/PrettyDocs-Theme" data-size="large" aria-label="Star xriley/PrettyDocs-Theme on GitHub">Star</a>
+                    <a class="github-button" href="https://github.com/xriley" data-size="large" aria-label="Follow @xriley on GitHub">Follow @xriley</a>
+                </div>
+                <!-- Replace with your Twitter Button -->
+                <div class="twitter-tweet">
+                    <a href="https://twitter.com/share" class="twitter-share-button" data-text="PrettyDocs - A FREE #Bootstrap theme for project documentations #Responsive" data-via="3rdwave_themes">Tweet</a>
+                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+                </div><!--//tweet-->
+                <!-- Replace with your Facebook Button -->
+                <div class="fb-like" data-href="https://themes.3rdwavemedia.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>            
+             </div><!--//social-container-->
+        </div><!--//container-->
+    </header><!--//header-->
+    
+    <section class="cards-section text-center">
+        <div class="container">
+            <h2 class="title">Getting started is easy!</h2>
+            <div class="intro">
+                <p>Welcome to prettyDocs. This landing page is an example of how you can use a card view to present segments of your documentation. You can customise the icon fonts based on your needs.</p>
+                <div class="cta-container">
+                    <a class="btn btn-primary btn-cta" href="https://themes.3rdwavemedia.com/bootstrap-templates/startup/prettydocs-free-bootstrap-theme-for-developers-and-startups/" target="_blank"><i class="fas fa-cloud-download-alt"></i> Download Now</a>
+                </div><!--//cta-container-->
+            </div><!--//intro-->
+            <div id="cards-wrapper" class="cards-wrapper row">
+                <div class="item item-green col-lg-4 col-6">
+                    <div class="item-inner">
+                        <div class="icon-holder">
+                            <i class="icon fa fa-paper-plane"></i>
+                        </div><!--//icon-holder-->
+                        <h3 class="title">Quick Start</h3>
+                        <p class="intro">Demo example, consectetuer adipiscing elit</p>
+                        <a class="link" href="{{ 'start' | prepend: site.baseurl }}"><span></span></a>
+                    </div><!--//item-inner-->
+                </div><!--//item-->
+                <div class="item item-pink item-2 col-lg-4 col-6">
+                    <div class="item-inner">
+                        <div class="icon-holder">
+                            <span aria-hidden="true" class="icon icon_puzzle_alt"></span>
+                        </div><!--//icon-holder-->
+                        <h3 class="title">Components</h3>
+                        <p class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
+                        <a class="link" href="{{ 'components' | prepend: site.baseurl }}"><span></span></a>
+                    </div><!--//item-inner-->
+                </div><!--//item-->
+                <div class="item item-blue col-lg-4 col-6">
+                    <div class="item-inner">
+                        <div class="icon-holder">
+                            <span aria-hidden="true" class="icon icon_datareport_alt"></span>
+                        </div><!--//icon-holder-->
+                        <h3 class="title">Charts</h3>
+                        <p class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
+                        <a class="link" href="{{ 'charts' | prepend: site.baseurl }}"><span></span></a>
+                    </div><!--//item-inner-->
+                </div><!--//item-->
+                <div class="item item-purple col-lg-4 col-6">
+                    <div class="item-inner">
+                        <div class="icon-holder">
+                            <span aria-hidden="true" class="icon icon_lifesaver"></span>
+                        </div><!--//icon-holder-->
+                        <h3 class="title">FAQs</h3>
+                        <p class="intro">Layout for FAQ page. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
+                        <a class="link" href="{{ 'faqs' | prepend: site.baseurl }}"><span></span></a>
+                    </div><!--//item-inner-->
+                </div><!--//item-->
+                <div class="item item-primary col-lg-4 col-6">
+                    <div class="item-inner">
+                        <div class="icon-holder">
+                            <span aria-hidden="true" class="icon icon_genius"></span>
+                        </div><!--//icon-holder-->
+                        <h3 class="title">Showcase</h3>
+                        <p class="intro">Layout for showcase page. Lorem ipsum dolor sit amet, consectetuer adipiscing elit </p>
+                        <a class="link" href="{{ 'showcase' | prepend: site.baseurl }}"><span></span></a>
+                    </div><!--//item-inner-->
+                </div><!--//item-->
+                <div class="item item-orange col-lg-4 col-6">
+                    <div class="item-inner">
+                        <div class="icon-holder">
+                            <span aria-hidden="true" class="icon icon_gift"></span>
+                        </div><!--//icon-holder-->
+                        <h3 class="title">License &amp; Credits</h3>
+                        <p class="intro">Layout for license &amp; credits page. Consectetuer adipiscing elit.</p>
+                        <a class="link" href="{{ 'license' | prepend: site.baseurl }}"><span></span></a>
+                    </div><!--//item-inner-->
+                </div><!--//item-->
+            </div><!--//cards-->
+            
+        </div><!--//container-->
+    </section><!--//cards-section-->
+</div><!--//page-wrapper-->
+
+{% include footer.html %}

data/_includes/promo-block.html

@@ -1,87 +1,30 @@
-{% if include.icon != null %}
-    {% assign icon = include.icon %}
-{% else %}
-    {% assign icon = 'fa fa-heart' %}
-{% endif %}
-
-{% if include.title-link != null %}
-    {% assign title-link = include.title-link %}
-{% else %}
-    {% assign title-link = 'https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm' %}
-{% endif %}
-
-{% if include.title != null %}
-    {% assign title = include.title %}
-{% else %}
-    {% assign title = 'AppKit - Bootstrap Angular Admin Theme for Developers' %}
-{% endif %}
-
-{% if include.figure != null %}
-    {% assign figure = include.figure | prepend: site.baseurl %}
-{% else %}
-    {% assign figure = '/assets/images/demo/appkit-widgets-thumb.jpg' | prepend: site.baseurl %}
-{% endif %}
-
-{% if include.figure-link != null %}
-    {% assign figure-link = include.figure-link %}
-{% else %}
-    {% assign figure-link = 'https://wrapbootstrap.com/theme/appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm' %}
-{% endif %}
-
-{% if include.figure-title != null %}
-    {% assign figure-title = include.figure-title %}
-{% else %}
-    {% assign figure-title = 'AppKit Theme' %}
-{% endif %}
-
-{% if include.content != null %}
-    {% assign content = include.content %}
-{% else %}
-    {% assign content = '<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>' %}
-{% endif %}
-
-{% if include.content-title != null %}
-    {% assign content-title = include.content-title %}
-{% else %}
-    {% assign content-title = 'Love this free documentation theme?' %}
-{% endif %}
-
-{% if include.author != null %}
-    {% assign author = include.author %}
-{% else %}
-    {% assign author = 'Xiaoying Riley' %}
-{% endif %}
-
-{% if include.author-link != null %}
-    {% assign author-link = include.author-link %}
-{% else %}
-    {% assign author-link = 'http://themes.3rdwavemedia.com' %}
-{% endif %}
-
-
-<div id="promo-block" class="promo-block">
-    <div class="container">
-        <div class="promo-block-inner">
-            <h3 class="promo-title text-center"><i class="{{ icon }}"></i> <a href="{{ title-link }}" target="_blank">{{ title }} </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="{{ link-figure }}"><img class="img-responsive" src="{{ figure }}" alt="{{ figure-title }}" /></a>
-                        <a class="mask" href="{{ figure-link }}" target="_blank"><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>{{ content-title }}</strong></h4>
-                            {{ content }}
-                        </div><!--//desc-->
-                        <div class="author"><a href="{{ author-link }}" target="_blank">{{ author }}</a></div>
-                    </div><!--//content-holder-inner-->
-                </div><!--//content-holder-->
-            </div><!--//row-->
-        </div><!--//promo-block-inner-->
-    </div><!--//container-->
+<div id="promo-block" class="promo-block">
+    <div class="container">
+        <div class="promo-block-inner">
+            <h3 class="promo-title text-center"><i class="fas fa-heart"></i> <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">Are you an ambitious and entrepreneurial developer?</a></h3>
+            <div class="row">
+                <div class="figure-holder col-lg-5 col-md-6 col-12">
+                    <div class="figure-holder-inner">
+                        <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank"><img class="img-fluid" src="assets/images/demo/instance-promo.jpg" alt="Instance Theme" /></a>
+                        <a class="mask" href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/"><i class="icon fa fa-heart pink"></i></a>
+                        
+                    </div>
+                </div><!--//figure-holder-->
+                <div class="content-holder col-lg-7 col-md-6 col-12">
+                    <div class="content-holder-inner">
+                        <div class="desc">
+                            <h4 class="content-title"><strong> Instance - Bootstrap 4 Portfolio Theme for Aspiring Developers</strong></h4>
+                            <p>Check out <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">Instance</a> - a Bootstrap personal portfolio theme I created for developers. The UX design is focused on selling a developer’s skills and experience to potential employers or clients, and has <strong class="highlight">all the winning ingredients to get you hired</strong>. It’s not only a HTML site template but also a marketing framework for you to <strong class="highlight">build an impressive online presence with a high conversion rate</strong>. </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://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank"><i class="fas fa-external-link-alt"></i> View Demo</a>
+                            
+                        </div><!--//desc-->
+                        
+                        
+                        <div class="author"><a href="https://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-->