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

Footer

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

You can easily use one of two predefined footer’s types. Footer HTML markup:

<footer class="ct-footer ct-u-paddingTop30">
    <ul class="ct-socials ct-socials--type3 ct-u-paddingBoth20">
        <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter-square"></i></a></li>
        <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook-square"></i></a></li>
        <li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
    </ul>
    <p class="ct-u-colorDarkerGray text-center ct-u-paddingBottom30">COPYRIGHT © <a class="ct-u-colorDarkerGray" href="http://outsourcing.createit.pl/">createIT</a> 2014</p>
</footer>

</ul>

</footer>

Large Footer HTML markup:

<footer class="ct-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-12">
                <div class="ct-footer-about">
                    <img src="../assets/images/demo-content/logo2.png" alt="">
                    <p class="ct-u-hr ct-u-hr--left">A small river named Duden flows by their place and supplies it with the necessary regelialia. Their place and supplies it with the.
                        Duden flows by their place and supplies it with the necessary regelialia. Their place and supplies it.</p>
                    <ul class="list-unstyled ct-list ct-list--big">
                        <li><i class="fa fa-map-marker"></i><span>No.200 Joseph Road, Canada</span></li>
                        <li><i class="fa fa-mobile"></i><span>+44 (0) 800 765 4321</span></li>
                        <li><a href="#"><i class="fa fa-envelope-o"></i><span>info@Rainbow Dash.com</span></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="ct-footer-lists">
                    <h4><small>About this theme</small></h4>
                    <ul class="list-unstyled ct-list ct-u-hr ct-u-hr--left">
                        <li><a href="#">Company Analysis</a></li>
                        <li><a href="#">Strategy Planning</a></li>
                        <li><a href="#">Brand Creation</a></li>
                        <li><a href="#">Video Production</a></li>
                    </ul>
                    <h4><small>Shortcode Options</small></h4>
                    <ul class="list-unstyled ct-list">
                        <li><a href="#">Company Analysis</a></li>
                        <li><a href="#">Strategy Planning</a></li>
                        <li><a href="#">Brand Creation</a></li>
                        <li><a href="#">Video Production</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="ct-footer-contact">
                    <h4><small>Contact Us</small></h4>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>

                    <div class="form-group  ct-input--type2">
                        <input id="contact_name" required="" type="email" class="form-control">
                        <label for="contact_name"><span>Name</span></label>
                    </div>
                    <div class="form-group  ct-input--type2">
                        <input id="contact_email" required="" type="email" class="form-control">
                        <label for="contact_email"><span>Email</span></label>
                    </div>
                    <div class="form-group  ct-input--type2">
                        <textarea id="contact_message" required="" rows="4" class="form-control"></textarea>
                            <label for="contact_message"><span>Message</span></label>
                    </div>

                    <div class="clearfix visible"></div>

                    <a href="#" class="btn btn-default"><span>Send</span></a>

                    <div class="clearfix"></div>

                </div>
            </div>
        </div>
    </div>
    <div class="ct-footer-copyright">
        COPYRIGHT © <a href="http://outsourcing.createit.pl/">createIT</a> 2014
    </div>
</footer>

<p class="ct-u-hr ct-u-hr--left">A small river named Duden flows by their place and supplies it with the necessary regelialia. Their place and supplies it with the.

Duden flows by their place and supplies it with the necessary regelialia. Their place and supplies it.</p>

<li><i class="fa fa-map-marker"></i><span>No.200 Joseph Road, Canada</span></li>

<li><a href="#"><i class="fa fa-envelope-o"></i><span>info@Rainbow Dash.com</span></a></li>

</ul>

</div>

<h4><small>About this theme</small></h4>

<li><a href="#">Company Analysis</a></li>

<li><a href="#">Strategy Planning</a></li>

<li><a href="#">Brand Creation</a></li>

<li><a href="#">Video Production</a></li>

</ul>

<h4><small>Shortcode Options</small></h4>

<li><a href="#">Company Analysis</a></li>

<li><a href="#">Strategy Planning</a></li>

<li><a href="#">Brand Creation</a></li>

<li><a href="#">Video Production</a></li>

</ul>

</div>

<h4><small>Contact Us</small></h4>

<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>

</div>

<label for="contact_email"><span>Email</span></label>

</div>

<label for="contact_message"><span>Message</span></label>

</div>

</div>

</div>

</footer>

Socials

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

HTML markup:

<ul class="ct-socials ct-socials--type1 ct-u-paddingBoth20">
        <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter-square"></i></a></li>
        <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook-square"></i></a></li>
        <li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
    </ul>

</ul>

HTML markup:

<ul class="ct-socials ct-socials--type2 ct-u-paddingBoth20">
        <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter-square"></i></a></li>
        <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook-square"></i></a></li>
        <li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
    </ul>

</ul>

HTML markup:

<ul class="ct-socials ct-socials--type3 ct-u-paddingBoth20">
        <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter-square"></i></a></li>
        <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook-square"></i></a></li>
        <li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
    </ul>

</ul>

Slider

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

Remember to include the following scripts if you want to use Owlcarousel:

<script src="../assets/js/owl/owl.carousel.min.js"></script>
<script src="../assets/js/owl/init.js"></script>

1 2	<script src="../assets/js/owl/owl.carousel.min.js"></script> <script src="../assets/js/owl/init.js"></script>

Please check carousel documentation here

Person box

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

HTML markup:

<div class="ct-personBox">
    <div class="ct-personBox-img">
        <img src="../assets/images/demo-content/personBox-01.jpg" alt="">
        <div class="ct-personBox-hover">
            <div class="ct-personBox-quote"><p>"Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."</p></div>
        </div>
    </div>
    <div class="ct-personBox-title">
        <h5>Joe McGrow<small>Graphic Designer</small></h5>
        <div class="ct-personBox-hover">
            <div class="ct-socials--type4">
                <a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook-square"></i></a>
                <a href="https://twitter.com/createitpl"><i class="fa fa-twitter-square"></i></a>
                <a href="#"><i class="fa fa-vimeo-square"></i></a>
            </div>
        </div>
    </div>
</div>

<div class="ct-personBox-quote"><p>"Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."</p></div>

</div>

<h5>Joe McGrow<small>Graphic Designer</small></h5>

</div>

Icon Box

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

Use one of our icon boxes with the following HTML markup – you can change box type with type class:

<div class="ct-iconBox--type1">
    <div class="ct-iconBox-icon ct-u-hr ct-u-hr--mid"><i class="fa fa-truck"></i></div>
    <h4 class="ct-iconBox-header">Retina Ready Icons</h4>
    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>

<h4 class="ct-iconBox-header">Retina Ready Icons</h4>

<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>

</div>

Text box

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

HTML markup:

<div class="ct-textBox">
    <h5 class="ct-u-hr ct-u-hr--left"><small>First</small></h5>
    <h3 class="ct-iconBox-header"><small>Ideas</small></h3>
    <p>A small river named Duden flows by their place and supplies it with the necessary regelia.</p>
</div>

<h5 class="ct-u-hr ct-u-hr--left"><small>First</small></h5>

<h3 class="ct-iconBox-header"><small>Ideas</small></h3>

<p>A small river named Duden flows by their place and supplies it with the necessary regelia.</p>

</div>

Media sections

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

Parallax Section HTML markup:

 <div class="ct-mediaSection" data-height="575" data-type="parallax" data-stellar-background-ratio="0.3" data-bg-image="../../assets/images/demo-content/Intro-04.jpg" data-bg-image-mobile="../../assets/images/demo-content/Intro-04.jpg">
        <div class="ct-mediaSection-inner text-center ct-u-colorWhite">
            <h3 class="ct-u-colorWhite">Media Section with Parallax Effect</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque
                sed, lacinia in, mi. Cras vel lorem.</p>
        </div>
    </div>

<h3 class="ct-u-colorWhite">Media Section with Parallax Effect</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque

sed, lacinia in, mi. Cras vel lorem.</p>

</div>

Pattern Section: HTML markup:

<div class="ct-mediaSection" data-height="575" data-type="pattern" data-bg-image="../../assets/images/demo-content/slide-lg-02.jpg" data-bg-image-mobile="../../assets/images/demo-content/slide-lg-02.jpg">
        <div class="ct-mediaSection-inner text-center ct-u-colorWhite">
            <h3 class="ct-u-colorWhite">Media Section with Static Image</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque
                sed, lacinia in, mi. Cras vel lorem.</p>
        </div>
    </div>

<h3 class="ct-u-colorWhite">Media Section with Static Image</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque

sed, lacinia in, mi. Cras vel lorem.</p>

</div>

Ken Burns Section: HTML markup:

 <div class="ct-mediaSection" data-height="575" data-type="kenburns" data-bg-image="../../assets/images/demo-content/Intro-02.jpg" data-bg-image-mobile="../../assets/images/demo-content/Intro-02.jpg">
        <div class="ct-mediaSection-kenburnsImageContainer">
            <img src="../../assets/images/demo-content/Intro-02.jpg">
        </div>
        <div class="ct-mediaSection-inner text-center ct-u-colorWhite">
            <h3 class="ct-u-colorWhite">Media Section with Ken Burns Effect</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque
                sed, lacinia in, mi. Cras vel lorem.</p>
        </div>
    </div>

</div>

<h3 class="ct-u-colorWhite">Media Section with Ken Burns Effect</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque

sed, lacinia in, mi. Cras vel lorem.</p>

</div>

Video Section : Html markup:

 <div class="ct-mediaSection" data-height="575" data-type="video" data-bg-image-mobile="../assets/images/demo-content/section-01.jpg">
        <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9">
            <video muted loop autoplay="autoplay" preload="auto">
                <source src='../../assets/videos/state_fair.mp4' type='video/mp4'/>
            </video>
        </div>
        <div class="ct-u-displayTable">
            <div class="ct-mediaSection-inner text-center ct-u-colorWhite">
                <h3 class="ct-u-colorWhite">Media Section with Video Background</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque
                    sed, lacinia in, mi. Cras vel lorem.</p>
            </div>
        </div>
    </div>

</video>

</div>

<h3 class="ct-u-colorWhite">Media Section with Video Background</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque

sed, lacinia in, mi. Cras vel lorem.</p>

</div>

Section header

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

HTML markup:

<div class="ct-sectionHeader ct-sectionHeader--left">
    <div class="container">
        <h5 class="ct-u-hr ct-u-hr--left ct-sectionHeader-title ct-u-marginBottom10">Who we are ?</h5>
        <h3 class="ct-sectionHeader-subtitle ct-u-marginBoth0">About Us</h3>
    </div>
</div>

<h3 class="ct-sectionHeader-subtitle ct-u-marginBoth0">About Us</h3>

</div>

Navbar

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

HTML markup:

<nav class="navbar navbar-default ct-navbar--type1">

    <div class="navbar-header">
        <a href="index.html">
            <img id="ct-navbar--logoDark" src="../assets/images/demo-content/fancylogo.png" alt="JuGas">
            <img id="ct-navbar--logoWhite" src="../assets/images/demo-content/fancylogo2.png" alt="JuGas">
        </a>
    </div>

    <div class="container-fluid">

        <ul class="nav navbar-nav yamm ct-navbar--fadeIn">

            <!-- =========================== -->
            <li class="active"><a href="index.html">Home</a></li>
            <!-- =========================== -->
            <li><a href="about.html">About</a></li>
            <!-- =========================== -->
            <li class="dropdown"><a class="dropdown-toggle" href="single-work-floading.html">Works</a>
                <ul class="dropdown-menu">
                    <li>
                        <div class="yamm-content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h5 class="ct-dropdownHeader">Works</h5>
                                    <ul class="list-unstyled">
                                        <li><a href="single-work-floading.html">Single Work - Floading</a></li>
                                        <li><a href="single-work-standard.html">Single-work - Standard</a></li>
                                        <li><a href="single-work-video.html">Single Work - Video</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <!-- =========================== -->
            <li><a href="boxed.html">Boxed</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li>
                <a class="ct-js-navSearch ct-navbar-navSearch" href="#">
                    <i class="fa fa-search"></i>
                </a>
            </li>
        </ul>

        <div class="ct-navbar-search">
            <form role="form">
                <div class="form-group  ct-input--type2">
                    <input id="search" required="" type="text" name="field[]" class="form-control">
                    <label for="search"><span>Search</span></label>
                    <button class="ct-navbar-search-button" type="submit">
                        <i class="fa fa-search fa-fw"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</nav>

</a>

</div>

<li><a href="about.html">About</a></li>

<li class="dropdown"><a class="dropdown-toggle" href="single-work-floading.html">Works</a>

<li>

<h5 class="ct-dropdownHeader">Works</h5>

<li><a href="single-work-floading.html">Single Work - Floading</a></li>

<li><a href="single-work-standard.html">Single-work - Standard</a></li>

<li><a href="single-work-video.html">Single Work - Video</a></li>

</ul>

</div>

</li>

</ul>

</li>

<li><a href="boxed.html">Boxed</a></li>

<li><a href="contact.html">Contact</a></li>

<li>

</a>

</li>

</ul>

<label for="search"><span>Search</span></label>

</button>

</div>

</form>

</div>

</nav>

News > jugas-html

Footer

Socials

Slider

Person box

Icon Box

Text box

Media sections

Section header

Navbar

Siver

Estato

Disrupt

We are elite