jugas-html – Doc Block Categories – createIT support – the place to get all the help for your WordPress Themes

Call to action

Posted: February 3, 2015
/ By: Julita
/ In:

HTML markup:

<div class="ct-callToActionSection">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <h4 class="ct-iconBox-header ct-u-hr ct-u-hr--left">Want a quick start ?</h4>
                <p>Our company is specialized in consulting, developing and expanding businesses and large enterprises.</p>
            </div>
            <div class="col-sm-3 ct-u-paddingBoth50">
                <a href="#" class="btn btn-inverse ct-hover--icon-replace-left"><i class="fa fa-long-arrow-right"></i><span>View More</span></a>
            </div>
        </div>
    </div>
</div>

<h4 class="ct-iconBox-header ct-u-hr ct-u-hr--left">Want a quick start ?</h4>

<p>Our company is specialized in consulting, developing and expanding businesses and large enterprises.</p>

</div>

</div>

Progress icons

Posted: February 3, 2015
/ By: Julita
/ In:

Add animated progress icons with simple HTML markup:

<div class="progress-icons" data-font-size="25" data-icon-color="#f0ad4e" data-active="11" data-total="22" 
    data-icon="fa-plug" data-delay="250"></div>

1 2	<div class="progress-icons" data-font-size="25" data-icon-color="#f0ad4e" data-active="11" data-total="22" data-icon="fa-plug" data-delay="250"></div>

and the following script:

<script src="../../assets/js/progressicons/init.js"></script>

1	<script src="../../assets/js/progressicons/init.js"></script>

Counter

Posted: February 3, 2015
/ By: Julita
/ In:

Add awesome counters with simple HTML markup:

<div class="ct-iconBox--type7">
   <div class="ct-iconBox-icon ct-u-hr ct-u-hr--mid"><i class="fa fa-plane"></i></div>
   <p class="ct-iconBox-counter"><span class="ct-js-counter" data-ct-to="440" data-ct-speed="5000">0></span><small> / Pizzas</small></p>
</div>

<p class="ct-iconBox-counter"><span class="ct-js-counter" data-ct-to="440" data-ct-speed="5000">0></span><small> / Pizzas</small></p>

</div>

Table

Posted: February 3, 2015
/ By: Julita
/ In:

Standard Table HTML markup:

<table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

<thead>

<tr>

<th>First Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>Jacob</td>

<td>Thornton</td>

</tr>

<tr>

<td>Larry</td>

<td>@twitter</td>

</tr>

</tbody>

</table>

Graphs

Posted: February 3, 2015
/ By: Julita
/ In:

Line chart HTML markup:

<canvas id="linechart" height="450" width="600"></canvas>

1	<canvas id="linechart" height="450" width="600"></canvas>

Javascript code:

<script>
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100)
    };

    var lineChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "#555",
                strokeColor: "#333",
                highlightFill: "#222",
                highlightStroke: "#111",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(240,173,78,0.2)",
                strokeColor: "rgba(222,157,63,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }
        ]

    }

    window.onload = function () {
        var ctx2 = document.getElementById("linechart").getContext("2d");
        window.myLine = new Chart(ctx2).Line(lineChartData, {
            responsive: true
        });
    }
</script>

var randomScalingFactor = function () {

return Math.round(Math.random() * 100)

};

var lineChartData = {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [

{

label: "My First dataset",

fillColor: "#555",

strokeColor: "#333",

highlightFill: "#222",

highlightStroke: "#111",

pointColor: "rgba(220,220,220,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(220,220,220,1)",

data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

{

label: "My Second dataset",

fillColor: "rgba(240,173,78,0.2)",

strokeColor: "rgba(222,157,63,1)",

pointColor: "rgba(151,187,205,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(151,187,205,1)",

data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

}

]

}

window.onload = function () {

var ctx2 = document.getElementById("linechart").getContext("2d");

window.myLine = new Chart(ctx2).Line(lineChartData, {

responsive: true

});

}

</script>

Pie chart HTML markup:

<div class="ct-graphBox ct-graphBox--default">
    <div class="ct-graphBox-graph">
        <canvas width="150" height="150" class="ct-js-pieChart" data-ct-percentage="80" 
                data-ct-middleSpace="85" data-ct-secondColor="#222222" 
                data-ct-firstColor="yellowgreen"></canvas>
        <span class="ct-graphBox-graphPercentage">80%</span>
    </div>
    <div class="ct-graphBox-content">
        <h4 class="ct-graphBox-title text-lowercase ct-fw-600">
            Frontend development
        </h4>

        <p>
            Lorem ipsum dolor sit amet, consecte adipiscing elit. Suspendisse condimentum porttitor
            cursumus. Duis nec nulla turpis. Nulla lacinia laoreet odio
        </p>
    </div>
</div>

<canvas width="150" height="150" class="ct-js-pieChart" data-ct-percentage="80"

data-ct-middleSpace="85" data-ct-secondColor="#222222"

data-ct-firstColor="yellowgreen"></canvas>

</div>

Frontend development

</h4>

<p>

Lorem ipsum dolor sit amet, consecte adipiscing elit. Suspendisse condimentum porttitor

cursumus. Duis nec nulla turpis. Nulla lacinia laoreet odio

</p>

</div>

Bar chart HTML markup:

 <canvas id="barchart" height="450" width="600"></canvas>

1	<canvas id="barchart" height="450" width="600"></canvas>

Javascript code:

<script>
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100)
    };

    var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                fillColor: "#e6ae48",
                strokeColor: "#e6ae48",
                highlightFill: "#f5af2f",
                highlightStroke: "#f5af2f",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },
            {
                fillColor: "#555",
                strokeColor: "#555",
                highlightFill: "#333",
                highlightStroke: "#333",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }
        ]

    };

    window.onload = function () {
        var ctx1 = document.getElementById("barchart").getContext("2d");
        window.myBar = new Chart(ctx1).Bar(barChartData, {
            responsive: true
        });
    }
</script>

var randomScalingFactor = function () {

return Math.round(Math.random() * 100)

};

var barChartData = {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [

{

fillColor: "#e6ae48",

strokeColor: "#e6ae48",

highlightFill: "#f5af2f",

highlightStroke: "#f5af2f",

data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

{

fillColor: "#555",

strokeColor: "#555",

highlightFill: "#333",

highlightStroke: "#333",

data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

}

]

};

window.onload = function () {

var ctx1 = document.getElementById("barchart").getContext("2d");

window.myBar = new Chart(ctx1).Bar(barChartData, {

responsive: true

});

}

</script>

Notice: To use any type of the chart you must also include the following scripts:

<script src="../../assets/js/charts/Chart.min.js"></script>
<script src="../../assets/js/charts/init.js"></script>

1 2	<script src="../../assets/js/charts/Chart.min.js"></script> <script src="../../assets/js/charts/init.js"></script>

Forms

Posted: February 3, 2015
/ By: Julita
/ In:

Add the following HTML to create awesome animated forms:

<div class="form-group  ct-input--type1">
    <input id="contact_name" required="" type="email" class="form-control">
    <label for="contact_name"><span>Name</span></label>
</div>

</div>

Notice, that you must also include the following script on page, where you are using forms:

<script src="../../assets/plugins/input-effects/input-effects.js"></script>

1	<script src="../../assets/plugins/input-effects/input-effects.js"></script>

Overflow Container

Posted: February 3, 2015
/ By: Julita
/ In:

HTML markup:

<div class="ct-sectionOverflow">
    <div class="ct-sectionOverflow-content">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-5">
                    <div class="ct-sectionOverflow-image ct-sectionOverflow-image--left">
                        <img src="../assets/images/demo-content/Image-01.jpg">
                    </div>
                </div>
                <div class="col-md-9 col-sm-7">
                ...
                </div>
            </div>
        </div>
    </div>
</div>

</div>

...

</div>

Progress Bar

Posted: February 3, 2015
/ By: Julita
/ In:

HTML markup:

<div class="ct-progressBar">
    <div class="ct-progressBar-name">HTML/CSS</div>
    <div class="progress progress-motive">
        <div class="progress-bar" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
            <div class="ct-progressBar-tr"></div>
        </div>
    </div>
</div>

</div>

Remember to include also the following script:

<script src="../../assets/js/progressbars/init.js"></script>

1	<script src="../../assets/js/progressbars/init.js"></script>

Portfolio

Posted: February 3, 2015
/ By: Julita
/ In:

HTML markup:

<div class="container-fluid">
    <div id="ct-gallery" class="ct-gallery ct-gallery--col4 ct-js-magnificPortfolioPopupGroup">
    ...
    </div>
</div>

...

</div>

HTML markup for Single Item:

<div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default hidden ct-gallery-item--normal webdesign">
            <div class="ct-gallery-itemInner">
                <a class="ct-js-magnificPopupImage" href="../assets/images/demo-content/portfolio-03.jpg" title="Berlin Songs Festival">
                    <figure class="ct-hover ct-js-hover ct-hover--type10">
                        <img src="../assets/images/demo-content/portfolio-03.jpg" alt="">
                        <figcaption>
                            <div class="ct-hover-inner">
                                <div class="ct-hover-text">
                                    <h4 class="ct-hover-header">Berlin Songs Festival</h4>
                                    <div class="ct-u-hr ct-u-hr--mid"></div>
                                    <p>Design / Photography</p>
                                </div>
                            </div>
                        </figcaption>
                    </figure>
                </a>
            </div>
        </div>

<h4 class="ct-hover-header">Berlin Songs Festival</h4>

<p>Design / Photography</p>

</div>

</figcaption>

</figure>

</a>

</div>

Required scripts:

<script src="../assets/js/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="../assets/js/magnific-popup/init.js"></script>

<script src="../assets/js/portfolio/jquery.isotope.min.js"></script>
<script src="../assets/js/portfolio/imagesloaded.js"></script>
<script src="../assets/js/portfolio/infinitescroll.min.js"></script>
<script src="../assets/js/portfolio/init.js"></script>

Testimonial

Posted: February 3, 2015
/ By: Julita
/ In:

Add your clients’ testimonials with simple HTML markup:

<div class="ct-testimonials">
    <h6>Love Works</h6>
    <a href="#" class="ct-testimonials-image"><img src="../assets/images/demo-content/person-01.png" alt=""></a>
    <p class="ct-u-hr ct-u-hr--wide">"Founded in 2013, sisters Liz, Megan and Jess set out to produce a functional, beautiful diaper bag. As Leader, we
        designed backpack to reprezent us both as mothers and as leaders: thoughtful, confident and inspired. "</p>
    <h3>Mr. Frankie<small>(New York, USA)</small></h3>
</div>

<h6>Love Works</h6>

<p class="ct-u-hr ct-u-hr--wide">"Founded in 2013, sisters Liz, Megan and Jess set out to produce a functional, beautiful diaper bag. As Leader, we

designed backpack to reprezent us both as mothers and as leaders: thoughtful, confident and inspired. "</p>

<h3>Mr. Frankie<small>(New York, USA)</small></h3>

</div>

News > jugas-html

Call to action

Progress icons

Counter

Table

Graphs

Forms

Overflow Container

Progress Bar

Portfolio

Testimonial

Siver

Estato

Disrupt

We are elite