Bright - Template

Alerts

Use alert to show users important messages or provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. More info.

Heads up! This alert needs your attention, but it's not super important.

Example:

.alert.alert-brand
  Heads up! This alert needs your attention, but it's not super important.

.alert.alert-primary
  Heads up! This alert needs your attention, but it's not super important.

.alert.alert-secondary
  Heads up! This alert needs your attention, but it's not super important.

.alert.alert-danger
  Heads up! This alert needs your attention, but it's not super important.

.alert.alert-warning
  Heads up! This alert needs your attention, but it's not super important.

.alert.alert-info
  Heads up! This alert needs your attention, but it's not super important.

.alert.alert-light
  Heads up! This alert needs your attention, but it's not super important.

.alert.alert-dark
  Heads up! This alert needs your attention, but it's not super important.

Accordion

This is a vertically stacked list of items. You can show reveal the content associated with that item.

What are my payment options?

Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door. The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.

What are my payment options?

Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door. The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.

What are my payment options?

Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door. The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.

What are my payment options?

Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door. The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.

What are my payment options?

Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door. The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.

What are my payment options?

Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door. The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.

Example:

#accordion1.accordion.accordion-brand
  .accordion-item
    .accordion-item-header
      h6: a(class="accordion-link" data-toggle="collapse" href="#collapse-1") What are my payment options?
    #collapse-1.collapse.show(data-parent="#accordion1")
      .accordion-item-body
        p Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door.	The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.
  .accordion-item
    .accordion-item-header
      h6: a(class="accordion-link collapsed" data-toggle="collapse" href="#collapse-2") What are my payment options?
    #collapse-2.collapse(data-parent="#accordion1")
      .accordion-item-body
        p Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door.	The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.
  .accordion-item
    .accordion-item-header
      h6: a(class="accordion-link collapsed" data-toggle="collapse" href="#collapse-3") What are my payment options?
    #collapse-3.collapse(data-parent="#accordion1")
      .accordion-item-body
        p Just then her head struck against the roof of the hall in fact she was now more than nine feet high and she at once took up the little golden key and hurried off to the garden door.	The first question of course was, how to get dry again: they had a consultation about this, and after a few minutes it seemed quite natural to Alice to find herself talking familiarly with them.

Buttons

You can use default Bootstrap buttons colors and we added our own button colors. More info.

Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons

Example:

// Colors
a(class="btn btn-brand" href="#") Buttons
a(class="btn btn-primary" href="#") Buttons
a(class="btn btn-secondary" href="#") Buttons
a(class="btn btn-success" href="#") Buttons
a(class="btn btn-danger" href="#") Buttons
a(class="btn btn btn-warning" href="#") Buttons
a(class="btn btn-info" href="#") Buttons
a(class="btn btn-light" href="#") Buttons
a(class="btn btn-dark" href="#") Buttons

// Outline Buttons
a(class="btn btn-outline-brand" href="#") Buttons
a(class="btn btn-outline-primary" href="#") Buttons
a(class="btn btn-outline-secondary" href="#") Buttons
a(class="btn btn-outline-success" href="#") Buttons
a(class="btn btn-outline-danger" href="#") Buttons
a(class="btn btn-outline-warning" href="#") Buttons
a(class="btn btn-outline-info" href="#") Buttons
a(class="btn btn-outline-dark" href="#") Buttons
a(class="btn btn-outline-light" href="#") Buttons

// Circle Buttons
a(class="btn btn-circle btn-brand" href="#") Buttons

// Button with icon
a(class="btn btn-circle btn-brand" href="#")
  span.btn-icon-left.far.fa-gem
  |Buttons
a(class="btn btn-circle btn-brand" href="#")
  |Buttons
  span.btn-icon-right.far.fa-gem

// Button Sizes
a(class="btn btn-brand btn-lg" href="#") Large button
a(class="btn btn-brand" href="#") Default Button
a(class="btn btn-brand btn-sm" href="#") Small button

Button Sizes

You can use three different sizes of buttons. Large, small and default buttons. More info.

Large button Default Button Small button

Breadcrumb

Use this shortcode to show current page's location. More info.

Example:

nav(aria-label='breadcrumb')
 ol.breadcrumb
   li.breadcrumb-item
     a(href='#') Home
   li.breadcrumb-item
     a(href='#') Library
   li.breadcrumb-item.active(aria-current='page') Data

Cards

Keep your content in card container with multiple variants and options.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Example:

.row
  .col-md-6
    .card.card-lg
      img.card-img-top(src="assets/images/blog/3.jpg" alt="")
      .card-body
        h5.card-title Card title
        p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
        a.btn.btn-primary(href='#') Go somewhere
  .col-md-6
    .card.card-lg
      img.card-img-top(src="assets/images/blog/3.jpg" alt="")
      .card-body
        h5.card-title Card title
        p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
        a.btn.btn-primary(href='#') Go somewhere

Cards - Shop

Special card modification for shop's items.

Classic Chair

$20.00

Know More

Solo Headphones

$30.00

Know More

Example:

.row
  .col-md-6
    +ShopGridItem("assets/images/shop/1.jpg", "Classic Chair", "$20.00")
  .col-md-6
    +ShopGridItem("assets/images/shop/5.jpg", "Solo Headphones", "$30.00")

Cards - Posts

Special card modification for blog's posts.

Explains how singing in the car can boost your
mental health.

Read More →

Explains how singing in the car can boost your
mental health.

Read More →

Example:

.row.card-masonry
  .col-md-6
    +PostMasonry("assets/images/blog/5.jpg", "Explains how singing in the car can boost your
 mental health.", "bg-brand")
  .col-md-6
    +PostMasonry("assets/images/blog/3.jpg", "Explains how singing in the car can boost your
 mental health.", "bg-danger")

Carousel

Simple image carousel. You can enable or disable navigation, dots and other options. We use owl-carousel JS plugin. Plugin options.

Example:

.owl-carousel.image-carousel
  a(href="assets/images/main/2.jpg" class="gallery")
    img(src="assets/images/main/2.jpg" alt="")
  a(href="assets/images/main/3.jpg" class="gallery")
    img(src="assets/images/main/3.jpg" alt="")
  a(href="assets/images/main/4.jpg" class="gallery")
    img(src="assets/images/main/4.jpg" alt="")
  a(href="assets/images/main/5.jpg" class="gallery")
    img(src="assets/images/main/5.jpg" alt="")

Clients

Show to users of your site customers with whom you worked - this will cause them more confidence. Plugin options.

Example:

.owl-carousel.clients-carousel(data-carousel-options='{"dots": false}')
  .client
    img(src="assets/images/clients/1.png" alt="")
  .client
    img(src="assets/images/clients/2.png" alt="")
  .client
    img(src="assets/images/clients/3.png" alt="")
  .client
    img(src="assets/images/clients/4.png" alt="")
  .client
    img(src="assets/images/clients/5.png" alt="")
  .client
    img(src="assets/images/clients/6.png" alt="")
  .client
    img(src="assets/images/clients/7.png" alt="")

Counters

Show your customers your business performance or just fun facts with our counter component. You can use "text-align" classes to align text in counter. More info.

0

Happy Clients

0

Total downloads

0

Awards Won

0

Theme Users

Example:

.row
  .col-md-3
    +Counter("Happy Clients", "2538", "icon-energy icons")
  .col-md-3
    +Counter("Total downloads", "3124", "icon-cup icons")
  .col-md-3.text-right
    +Counter("Awards Won", "4128", "icon-fire icons")
  .col-md-3.text-center
    +Counter("Theme Users", "5534", "icon-diamond icons")

Contact Form

This theme include working ajax contact form, just insert code of the form to any page. Don't forget change mail setting in "assets/php/contact.php" file.

// Mail settings
$to = "[email protected]";

// You can put here your email
$header = "From: [email protected]\r\n";

Example:

form#contact-form(method="post" novalidate)
  .row
    .col-md-4
      .form-group
        input.form-control(type="text" name="name" placeholder="Name" required="")
        p.help-block.text-danger
    .col-md-4
      .form-group
        input.form-control(type="email" name="email" placeholder="E-mail" required="")
        p.help-block.text-danger
    .col-md-4
      .form-group
        input.form-control(type="text" name="subject" placeholder="Subject" required="")
        p.help-block.text-danger
    .col-md-12
        .form-group
        textarea.form-control(name="message" placeholder="Message" rows="12" required="")
    .col-md-12
      .form-group
        input(type="submit" class="btn btn-block btn-brand" value="Send Message")
// Ajax response
#contact-response.ajax-response.text-center

Google Maps

Show the location of your office using google maps. You can add any number of addresses, just add your latitude and longitude values for each point.

You need to use YOUR own Google API Key. You can get API Key here.

script(src="http://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE")

Example:

section.maps-container.vh-2.vh-sm-10.mb-5
  .map(data-addresses="[48.859822, 2.352647]" data-info="[Lorem ipsum dolor sit amet.]" data-icon="assets/images/map-icon.png" data-zoom="15" data-styles="style-2")

section.maps-container.vh-2.vh-sm-10.mb-5
  .map(data-addresses="[48.859822, 2.352647]" data-info="[Lorem ipsum dolor sit amet.]" data-icon="assets/images/map-icon.png" data-zoom="15" data-styles="style-1")

section.maps-container.vh-2.vh-sm-10.mb-5
  .map(data-addresses="[48.859822, 2.352647]" data-info="[Lorem ipsum dolor sit amet.]" data-icon="assets/images/map-icon.png" data-zoom="15")

.row
  .col-md-6
    .maps-container.map-widget.m-b-25
      .map(data-addresses="[48.859822, 2.352647]" data-info="[Lorem ipsum dolor amet.]" data-icon="assets/images/map-icon.png" data-zoom="15" data-street-view="1")
  .col-md-6
    .maps-container.map-widget.m-b-25
      .map(data-addresses="[48.8578708, 2.3587219]" data-info="[Lorem ipsum dolor amet.]" data-icon="assets/images/map-icon.png" data-zoom="15")

Grid

Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. More options.

Full width

Two columns

Three columns

Four columns

Example:

.row
  .col-md-12
    | Content
.row
  .col-md-6
    | Content
  .col-md-6
    | Content
.row
  .col-md-4
    | Content
  .col-md-4
    | Content
  .col-md-4
    | Content
.row
  .col-md-3
    | Content
  .col-md-3
    | Content
  .col-md-3
    | Content
  .col-md-3
    | Content

Icon with Text

Tell us about the benefits of your business using text with an icon and Bootstrap 4 grid system.

Visual Composer

See how your users experience your website in realtime or view trends to see any changes in performance over time.

Read More →

Revolution Slider

See how your users experience your website in realtime or view trends to see any changes in performance over time.

Read More →

Example:

.row
  .col-lg-6.col-md-6
    +IconBox("ti-layout", "Visual Composer", "See how your users experience your website in realtime or view trends to see any changes in performance over time.", "", true)
  .col-lg-6.col-md-6
    +IconBox("ti-cup", "Revolution Slider", "See how your users experience your website in realtime or view trends to see any changes in performance over time.", "text-right", true)

Icons

By default, template makes use of the Themify, Simple Line Icons and Font Awesome Free icon sets. Example:

<!-- Themify -->
<i class="ti-spray"></i>

<!-- Simple Line Icons -->
<i class="icon-diamond icons"></i>

<!-- Font Awesome -->
<i class="fab fa-accessible-icon"></i>

Inputs

Simple Bootstrap 4 forms designed for our template. More info.

Example:

form
  .form-group
    input.form-control(type="email" placeholder="Email")
  .form-group
    textarea.form-control(rows="5" placeholder="Example textarea")
  .form-group
    select.form-control
      option(selected="selected") Select
      option 1
      option 2
      option 3
      option 4
      option 5
  .form-group
    select.form-control(multiple="")
      option 1
      option 2
      option 3
      option 4
      option 5
  .input-group.input-group-quantity
    .input-group-prepend
      button(class="btn btn-sm btn-brand btn-minus" type="button") -
    input(class="form-control form-control-sm form-quantity no-max-width" type="text" value="1" readonly)
    .input-group-append
      button(class="btn btn-sm btn-brand btn-plus" type="button") +

Input Sizes

You can use three different sizes of inputs. Large, small and default inputs. More info.

Example:

.form-group
  input.form-control.form-control-lg(type="text" placeholder="Large input")
.form-group
  input.form-control(type="text" placeholder="Default input")
.form-group
  input.form-control.form-control-sm(type="text" placeholder="Small input")

Modals

Use modal component to show any type of content in popup blocks. More info.

Example:

button(class="btn btn-brand" type="button" data-toggle="modal" data-target="#modal-1") Open Modal
// Modal
#modal-1.modal.fade(tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true")
  .modal-dialog(role="document")
    .modal-content
      .modal-header
        h5.modal-title Modal title
        button.close(type="button" data-dismiss="modal" aria-label="Close")
          span(aria-hidden="true") ×
      .modal-body
        | ...
      .modal-footer
        button.btn.btn-secondary(type="button" data-dismiss="modal") Close
        button.btn.btn-primary(type="button") Save changes

Number Box

Tell us about the benefits of your business using text with an icon and Bootstrap 4 grid system.

01Development

See how your users experience your website in realtime or view trends.

02Branding

See how your users experience your website in realtime or view trends.

03Web Design

See how your users experience your website in realtime or view trends.

Example:

.row
  .col-md-4
    .number-box
      h6.number-box-header
        span.number-box-number 01
        span.number-box-title Development
      .number-box-content
        p See how your users experience your website in realtime or view trends.
  .col-md-4
    .number-box
      h6.number-box-header
        span.number-box-number 02
        span.number-box-title Development
      .number-box-content
        p See how your users experience your website in realtime or view trends.

Pagination

Pagination is a standard web component that is used for page navigation. More info.

Example:

nav
  ul.pagination
    li.page-item: a(href="#" class="page-link"): span.fas.fa-angle-left
    li.page-item.active: a(href="#" class="page-link") 1
    li.page-item: a(href="#" class="page-link") 2
    li.page-item: a(href="#" class="page-link") 3
    li.page-item: a(href="#" class="page-link") 4
    li.page-item: a(href="#" class="page-link"): span.fas.fa-angle-right

Pie Chart

Pie chart is easy way to show simple data.

Web Design

Map where your photos were taken and discover local points of interest. Map where your photos.

Plugin Development

Map where your photos were taken and discover local points of interest. Map where your photos.

Theme Development

Map where your photos were taken and discover local points of interest. Map where your photos.

Example:

.row
  .col-md-4
    +PieChart("Web Design", "icon-heart icons", "70", "#2196f3")
  .col-md-4
    +PieChart("Plugin Development", "icon-settings icons", "80", "#2196f3")
  .col-md-4
    +PieChart("Theme Development", "icon-star icons", "90", "#2196f3")

Pricing Tables

Our pricing tables allow you to use unique icon for each table, price and description: text or list.

Plus

$ 7.90 / Per Month

Staff accounts
File storage
Retail Package
24/7 support
Transaction fees
Fraud analysis

Premium

$ 12.99 / Per Month

Staff accounts
File storage
Retail Package
24/7 support
Transaction fees
Fraud analysis
Manual order creation
Discount codes
Website and blog

Example:

.row.no-gutters
  .col-md-6
    .price-table.mb-4.mb-md-0
      .price-table-header
        h2.mb-0 Plus
        span $ 7.90 / Per Month
      .price-table-body
        ul.list-icons
          li #[i.fas.fa-check ] Staff accounts
          li #[i.fas.fa-check ] File storage
          li #[i.fas.fa-check ] Retail Package
          li #[i.fas.fa-check ] 24/7 support
          li #[i.fas.fa-check ] Transaction fees
          li #[i.fas.fa-check ] Fraud analysis
  .col-md-6
    .price-table.price-table-popular.mb-4.mb-md-0
      .price-table-header
        h2.mb-0 Premium
        span $ 12.99 / Per Month
      .price-table-body
        ul.list-icons
          li #[i.fas.fa-check ] Staff accounts
          li #[i.fas.fa-check ] File storage
          li #[i.fas.fa-check ] Retail Package
          li #[i.fas.fa-check ] 24/7 support
          li #[i.fas.fa-check ] Transaction fees
          li #[i.fas.fa-check ] Fraud analysis
          li #[i.fas.fa-check ] Manual order creation
          li #[i.fas.fa-check ] Discount codes
          li #[i.fas.fa-check ] Website and blog

Page Preloader

Easily enable or disable page preloader - just set "true" to "page_loader" var for any page you want. Other way add or remove preloader code in "assest/includes/layout.pug" .

block vars
 - var header_transparent = true;
 - var page_loader        = true;

// Preloader
.page-loader
 .loader
   .loader-shadow
   .loader-box
// Preloader end

Progress Bars

Use progress bar to show your progress, your knowledge or any other data.

Web Development%

App Development%

Plugin Development%

Theme Development%

Web Development%

App Development%

Plugin Development%

Theme Development%

Example:

+Progress("Web Development", "25", "bg-brand")
+Progress("App Development", "35", "bg-primary")
+Progress("Plugin Development", "45", "bg-secondary")
+Progress("Theme Development", "55", "bg-success")
+Progress("Web Development", "65", "bg-danger")
+Progress("App Development", "75", "bg-warning")
+Progress("Plugin Development", "85", "bg-info")
+Progress("Theme Development", "95", "bg-dark")

Sections

Use sections to visually divide the content of your site into separate blocks. More info.

Simple Section.

See how your users experience your website in realtime or view trends to see any changes in performance over time.

Parallax Section.

See how your users experience your website in realtime or view trends to see any changes in performance over time.

Vimeo Video Section.

See how your users experience your website in realtime or view trends to see any changes in performance over time.

Youtube Video Section.

See how your users experience your website in realtime or view trends to see any changes in performance over time.

Local Video Section.

See how your users experience your website in realtime or view trends to see any changes in performance over time.

Gradient Section.

See how your users experience your website in realtime or view trends to see any changes in performance over time.

Example:

section.module
  | Content
section.module.bg-gray
  | Content
section.module.bg-dark.parallax(data-background="assets/images/module-1.jpg" data-overlay="0.5")
  | Content
section.module.bg-dark.parallax(data-background="assets/images/module-1.jpg" data-jarallax-video="https://vimeo.com/144698619" data-overlay="0.5")
  | Content
section.module.bg-dark.parallax(data-background="assets/images/module-1.jpg" data-jarallax-video="https://www.youtube.com/watch?v=ARvle-Ei6Sw" data-overlay="0.5")
  | Content
section.module.bg-dark.parallax(data-background="assets/images/module-1.jpg" data-jarallax-video="mp4:assets/video/video.mp4,webm:assets/video/video.webm,ogv:assets/video/video.ogv" data-overlay="0.3")
  | Content
section.module.bg-dark.parallax(data-background="assets/images/module-1.jpg" data-overlay="1" data-gradient="1")
  | Content

Slider

Simple image slider. You can enable or disable navigation, dots and other options. We use owl-carousel JS plugin. Plugin options.

Example:

.image-slider.owl-carousel(data-carousel-options='{"dots": false, "nav": true, "autoplay": true, "autoplayTimeout": 2000}')
  img(src="assets/images/module-1.jpg" alt="")
  img(src="assets/images/module-2.jpg" alt="")
  img(src="assets/images/module-3.jpg" alt="")

Tabs

Use default Bootstrap markup to display Card elements. See the Bootstrap documentation for a full list of options and modifiers. More info.

Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag. Selfies iPhone Kickstarter, drinking vinegar jean shorts fixie consequat flexitarian four loko.

Meh synth Schlitz, tempor duis single-origin coffee ea next level ethnic fingerstache fanny pack nostrud. Seitan High Life reprehenderit consectetur cupidatat kogi about me. Photo booth anim 8-bit hella, PBR 3 wolf moon beard Helvetica. Salvia esse nihil, flexitarian Truffaut synth art party deep v chillwave. Seitan High Life reprehenderit consectetur cupidatat kogi.

Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag. Selfies iPhone Kickstarter, drinking vinegar jean shorts fixie consequat flexitarian four loko.

Meh synth Schlitz, tempor duis single-origin coffee ea next level ethnic fingerstache fanny pack nostrud. Seitan High Life reprehenderit consectetur cupidatat kogi about me. Photo booth anim 8-bit hella, PBR 3 wolf moon beard Helvetica. Salvia esse nihil, flexitarian Truffaut synth art party deep v chillwave. Seitan High Life reprehenderit consectetur cupidatat kogi.

Example:

ul.nav.nav-tabs
  li.nav-item
    a.nav-link.active(data-toggle="tab" href="#tab-1-1"): h6 Visual Composer
  li.nav-item
    a.nav-link(data-toggle="tab" href="#tab-1-2"): h6 Fully Responsive
  li.nav-item
    a.nav-link(data-toggle="tab" href="#tab-1-3"): h6 Great Support
.tab-content
  #tab-1-1.tab-pane.show.active
    | Content
  #tab-1-2.tab-pane
    | Content
  #tab-1-3.tab-pane
    | Conteny

Team

Team component allow you to show all your team and links to their social profiles.

Emma Connor

Designer

Richard Bauer

Developer

Emma Connor

Designer

Richard Bauer

Developer

Richard Bauer

Developer

Example:

.row
  .col-md-6
    +team("assets/images/team/2.jpg", "Emma Connor", "Designer")
  .col-md-6
    +team("assets/images/team/3.jpg", "Richard Bauer", "Developer")

Testimonials

Show your customers feedback on your website or services. Available in grid view, carousel view or slider with icon or avatar view.

Emma Connor

Lead Architect

See how your users experience your website in realtime or view trends to see any changes in performance over time. See how your users.

Sara Smith

Lead Architect

See how your users experience your website in realtime or view trends to see any changes in performance over time. See how your users.

I don't work from drawings. I don't make sketches and drawings
and color sketches into a final painting.

Albert Einstein

To be yourself in a world that is constantly trying to make you
something else is the greatest accomplishment.

Ralph Waldo Emerson

Imperfection is beauty, madness is genius and it's better to be
absolutely ridiculous than absolutely boring.

Marilyn Monroe

Example:

.row
  .col-md-6
    +TestimonialsCard("Emma Connor", "See how your users experience your website in realtime or view trends to see any changes in performance over time. See how your users.", "assets/images/avatar/1.jpg")
  .col-md-6
    +TestimonialsCard("Sara Smith", "See how your users experience your website in realtime or view trends to see any changes in performance over time. See how your users.", "assets/images/avatar/2.jpg")

.review-slides.owl-carousel
  +TestimonialsSlider("Albert Einstein", "I don't work from drawings. I don't make sketches and drawings 
 and color sketches into a final painting.")
  +TestimonialsSlider("Ralph Waldo Emerson", "To be yourself in a world that is constantly trying to make you 
 something else is the greatest accomplishment.")
  +TestimonialsSlider("Marilyn Monroe", "Imperfection is beauty, madness is genius and it's better to be 
 absolutely ridiculous than absolutely boring.")

Tooltips

Use tooltips to show a small "hover box" with information about the item being hovered over. More info.

Example:

button.btn.btn-sm.btn-brand(type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top") Tooltip on top
button.btn.btn-sm.btn-brand(type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right") Tooltip on right
button.btn.btn-sm.btn-brand(type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom") Tooltip on bottom
button.btn.btn-sm.btn-brand(type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left") Tooltip on left

Twitter Feed Widget

The Twitter feed element uses a HTML5 data attribute called 'data-twitter' to determine which feed to display. You can enter your ID. Twitter Post Fetcher.

Go to www.twitter.com and sign in as normal, go to your settings page.
Go to "Widgets" on the left hand side.
Create a new widget for what you need eg "user time line" or "search" etc.
Feel free to check "exclude replies" if you don't want replies in results.
Now go back to settings page, and then go back to widgets page and
You should see the widget you just created. Click edit.
Look at the URL in your web browser, you will see a long number like this: 345735908357048478
Use this as your ID below instead!

<!-- Twitter widget-->
<aside class="widget twitter-feed-widget">
   <div class="widget-title">
       <h6>Twitter Feed</h6>
   </div>
   <div class="twitter-feed" data-twitter="345170787868762112" data-number="1"></div>
</aside>

Popup Video

Use this component to show youtube or vimeo videos in popup windows. Magnific Popup.

Example:

.popup-video
  img(src="assets/images/module-1.jpg" alt="")
  a(href="https://www.youtube.com/watch?v=0aCbYxJ9gus" class="popup-video-play")

Responsive Video

We use "fitVids" plugin which allow you to use responsive video embeds.

Bright Components

Alerts

Accordion

Buttons

Button Sizes

Breadcrumb

Cards

Card title

Card title

Cards - Shop

Cards - Posts

Carousel

Clients

Counters

0

0

0

0

Contact Form

Google Maps

Grid

Icon with Text

Visual Composer

Revolution Slider

Icons

Inputs

Input Sizes

Modals

Number Box

01Development

02Branding

03Web Design

Pagination

Pie Chart

Web Design

Plugin Development

Theme Development

Pricing Tables

Plus

Premium

Page Preloader

Progress Bars

Sections

Simple Section.

Parallax Section.

Vimeo Video Section.

Youtube Video Section.

Local Video Section.

Gradient Section.

Slider

Tabs

Visual Composer

Fully Responsive

Great Support

Team

Testimonials

Emma Connor

Lead Architect

Sara Smith

Lead Architect

Tooltips

Twitter Feed Widget

Popup Video

Responsive Video