The Documentationv1.5
Our new version epack includes 3 new element with lots of update.
New Element: Breadcrumb, Modal & Table are include new version.
Update: Progress Bar & Member are added new styles Also services & form element fix minor design.
Fix: Minor Design Fix.
Folder structure of the epack elements. See the attachment for more details
Folder | Description |
---|---|
/css |
Contains all CSS files. |
/fonts |
Contains fontawesome fonts |
/js |
Contains js files |
/img |
Contains all images files. |
First off, make sure you have a solid code editor, for example Sublime Text. You need to add the compiled and preferably bootstrap.min.css and font-awesome.min.css to the header of your HTML5 document. And that's it!
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/font-awesome.min.css" /> </head> <body> . Your elements code here . </body> </html>
Hello sir, You can add any epack element on your project very easily, Now we just show you how to add animation element (same way you can add any epack element on your live project). so please follow these step and screenshot.
Suppose you want to a add fade animation on your project. So, please add a following code in the body.
<div class="tc-animation-hover"> <div class="tc-animation-*"> Your Content Here </div> </div>
Class | Description |
---|---|
tc-animation-hover |
This class use for mouse hover animation. |
tc-animation-* |
Uses class for animation effects, Possible value (slide-top, slide-right, slide-bottom, slide-left, zoom-in, zoom-out, shake, scalu-up, scale-down) |
Note: Same way you can add any elements on your project such as heading, testimonial, member, note, button, post grid, timeline etc.
Visit slideshow for animation examples.
Hello sir, You can add BS accordion element on your project very easily, So please follow these step and screenshot.
Suppose you want to a add accordion on your project. So, please add a following code in the body.
<div class="tc-accordion tc-accordion-style1" id="accordion"> <div class="panel"> <h4 class="acdn-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="collapsed">Accordion Ttile 1</a> </h4> <div id="collapse1" class="panel-collapse collapse in"> <div class="acdn-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</div> </div> </div> <div class="panel"> <h4 class="acdn-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Accordion Ttile 2</a> </h4> <div id="collapse2" class="panel-collapse collapse"> <div class="acdn-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</div> </div> </div> <div class="panel"> <h4 class="acdn-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Accordion Ttile 3</a> </h4> <div id="collapse3" class="panel-collapse collapse"> <div class="acdn-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</div> </div> </div> </div>
Class | Description |
---|---|
tc-accordion |
This class use for make accordion. |
tc-accordion-style* |
This class use for accordion styles. Possible classes (style 1-5) |
Hello sir, You can add BS carousel element on your project very easily, So please follow these step and screenshot.
Suppose you want to a add carousel on your project. So, please add a following code in the body.
<div id="crsl1" class="tc-carousel-style1 carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#crsl1" data-slide-to="0" class="active"></li> <li data-target="#crsl1" data-slide-to="1"></li> <li data-target="#crsl1" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/slide1.jpg" alt="Slide1 Image"> <div class="carousel-caption"> <h3 class="cs-title"><a href="#">ePack is A Clean Coding Product</a></h3> <p class="cs-desc">A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> </div> </div> <div class="item"> <img src="img/slide2.jpg" alt="Slide2 Image"> <div class="carousel-caption"> <h3 class="cs-title"><a href="#">We Supported 24/7 For Happy Clients</a></h3> <p class="cs-desc">I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p> </div> </div> <div class="item"> <img src="img/slide3.jpg" alt="Slide3 Image"> <div class="carousel-caption"> <h3 class="cs-title"><a href="#">18+ Element With Latest Design</a></h3> <p class="cs-desc">I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants.</p> </div> </div> </div> <!-- Left and right controls --> <a class="car-nav car-prev" href="#crsl1" role="button" data-slide="prev"></a> <a class="car-nav car-next" href="#crsl1" role="button" data-slide="next"></a> </div>
Class | Description |
---|---|
tc-carousel-style1 |
This class use for make carousel style1. |
A big thanks to following source. epack Elements wouldn't be possible without these source.
Dear sir, if you face problems with the installation or customization of our product please do not hesitate to contact with us. We will try to best support for you :)
Email: mycodrops@gmail.com
Dear sir, If you like, Please rate us 5 Star :) It will be appreciated!Thanks for visit epack documentation, Welcome to thecodrops family