Author R.Genesis.Art

Below is example of other section steps code. <!– Other section –> <section class=”other-section other-section-2″> <div class=”container”> <div id=”step1-1″ class=”tab-pn”> <h2 class=”title”>Step 1 : Title…</h2> <p class=”title-sub”> … DESCRIPTION TEXT … </p> </div> <div id=”step1-2″ class=”tab-pn”> <h2 class=”title”>Step 1 : Title…</h2> <p class=”title-sub”> … DESCRIPTION TEXT … </p> </div> <div […]

Below is example of other section gallery code. <!– Other section –> <section class=”other-section other-section-1″> <div class=”container”> <div class=”row eqh”> <div class=”col-md-5 l”> <ol> <li class=”active” data-img=”images/medical_800x800_01.jpg”> <div class=”icon-wrp”><i class=”fa fa-object-group”></i></div> <div class=”info”> <h4 class=”hd”>TITLE TEXT</h4> … DESCRIPTION … </div> </li> <li data-img=”images/medical_800x800_02.jpg”> … </li> <li data-img=”images/medical_800x800_02.jpg”> … </li> </ol> […]

Below is portfolio pop up gallery code example. Apply popgallery-widget class as display in below code example highlighted line no. 5. It is javascript hook to apply pop up on thumb images. <!– Portfolio section –> <section class=”portfolio-section portfolio-section-2″> <div class=”container”> … <ul class=”rw eq3 mb10 gt10 popgallery-widget”> <li class=”cl”> […]

Below is example of accordion section which is used in some of sections in landing pages. <div class=”panel-group” id=”accordion” role=”tablist”> <!– panel –> <div class=”panel”> <div class=”panel-hd”> <a role=”tab” data-toggle=”collapse” data-parent=”#accordion” href=”#collapse-1″ aria-expanded=”true”> TITLE OF PANEL <i class=”panel-open fa fa-plus-circle”></i><i class=”panel-close fa fa-minus-circle”></i> </a> </div> <div id=”collapse-1″ class=”panel-collapse collapse in” […]

Set slider images in data-bgslider=”images/1.jpg|images/2.jpg….” attribute as display in below example code. Do not put blank space between image path string. <section class=”intro-section”> <div class=”container”> … </div> <!– Background slider –> <div class=”bg-section full-wh”> <div class=”bgslider” data-bgslider=”images/medical_01.jpg|images/medical_02.jpg|images/medical_03.jpg|images/medical_04.jpg|images/medical_05.jpg”></div> </div> <!– Background slider –> <b class=”full-wh overlay”></b> </section>      

<div class=”bg-section bg-cover bg-cc full-wh” id=”videobg1″ data-bg=”images/bg7.jpg”> <b class=”full-wh”></b> <!– BACKGROUND VIDEO –> <div class=”videobg” data-property=”{ videoURL:’dorZ3vag5PI’, containment:’#videobg1′, showControls:true, autoPlay:true, loop:true, vol:50, mute:true, startAt:10, realfullscreen:false, opacity:1, addRaster:true, quality:’default’, optimizeDisplay:true }”> </div> </div> Apply ID (videobg1 apply on above example code) to section on which video background needs to display, Set […]

Use below code to open video in pop up using link. Add video URL in href=”..YOUTUBE VIDEO URL..” <a href=”https://www.youtube.com/watch?v=hpeYWdkUtcE” class=”video-popup”> <i class=”fa fa-play-circle-o”></i> .. YOUR BUTTON TEXT .. </a>    

Landing page sections using owl carousel in many section like intro, sliders, testimonials etc. Below is basic overview of carousel widget structure with available options which is used in landing pages. <div class=”carousel-widget ctrl-1″ data-items=”1″ data-itemrange=”false” data-autoplay=”true” data-loop=”true” data-nav=”true”> <div class=”owl-carousel”> <!– Item block –> <div class=”item”> … </div> <!– Item block […]

CSS helper classes full-wh : Class apply full width and height of any absolute block txt-upper : Class make all text in uppercase txt-lower : Class make all text in lowercase txt-capi : Class make all text in capitalize cm-item : Class make object center middle using transform CSS3 property […]

Change container class to container-fluid to make full width navigation instead of boxed <nav class=”nav-wrp nav-1″> <div class=”container-fluid”> … </div> </nav> Apply data-glass=”y” attribute for transparent navigation. Main CSS file include CSS classes to set navigation transparent color. Use CSS class glass-01 to glass-09 along with “nav-wrp” in below code. […]