A Modern CSS3 Element Packages

ePack - A Modern CSS3 Element Packages

The Documentationv1.5

What's New Version 1.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

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.
Folder Structure

HTML Page Markup

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!

Example

<!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>

How to Add Element?

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.

  1. Please at first you showed go epack folder
  2. Then open animation.html on editor (example: notepad++, sublime text etc)
  3. Now link your animate.css file on your html file Link Css
  4. Suppose you want to a add fade animation on your project. So, please add a following code in the body.

    Animation Markup

    Example

    <div class="tc-animation-hover">
        <div class="tc-animation-*">
            Your Content Here
        </div>
    </div>
    

    Options Uses

    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.

  5. Finally just save it and view your browser. Now you are done.

Overview Animation

Visit slideshow for animation examples.

  • preview
  • preview
  • preview

How to Add BS Accordion?

Hello sir, You can add BS accordion element on your project very easily, So please follow these step and screenshot.

  1. Please at first you showed go epack folder
  2. Then open accordion.html on editor (example: notepad++, sublime text etc)
  3. Now link your accordion.css file on your html file Link Css
  4. Now link your jquery.min.js and bootstrap.min.css file on your html file Link JS
  5. Suppose you want to a add accordion on your project. So, please add a following code in the body.

    Accordion Markup

    Example

    <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>
    

    Options Uses

    Class Description
    tc-accordion This class use for make accordion.
    tc-accordion-style* This class use for accordion styles. Possible classes (style 1-5)
  6. Finally just save it and view your browser. Now you are done.

How to Add BS Carousel?

Hello sir, You can add BS carousel element on your project very easily, So please follow these step and screenshot.

  1. Please at first you showed go epack folder
  2. Then open carousel.html on editor (example: notepad++, sublime text etc)
  3. Now link your carousel.css file on your html file Link Css
  4. Now link your jquery.min.js and bootstrap.min.css file on your html file Link JS
  5. Suppose you want to a add carousel on your project. So, please add a following code in the body.

    Accordion Markup

    Example

    <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>
    

    Options Uses

    Class Description
    tc-carousel-style1 This class use for make carousel style1.
  6. Finally just save it and view your browser. Now you are done.

Source And Creadits


A big thanks to following source. epack Elements wouldn't be possible without these source.

Support Policy

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