member9.html

<div class="cbp-l-member-img">
    <img src="http://img.djavaui.com/?create=410x310,c0cabf?f=ffffff" alt="...">
</div>
<div class="cbp-l-member-info">
    <div class="cbp-l-member-name">Jeck Joko <i class="fa fa-check-circle text-success"></i></div>
    <div class="cbp-l-member-position">Web Design</div>
    <div class="cbp-l-member-desc">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perspiciatis, corporis, iusto a saepe iste ea odit quas fugit amet nisi adipisci excepturi ipsam quae asperiores sit blanditiis sunt ducimus magni eos non et quos dignissimos quaerat aspernatur. Enim, temporibus, ullam, vitae, accusantium veniam ut odio magni nobis animi ratione eaque at aliquam eos error quas eum unde laudantium quisquam dolores voluptas velit corporis fuga! Error, soluta, consequatur, excepturi earum laudantium ab magnam vitae eligendi consectetur dicta quo nesciunt eveniet facere iusto praesentium aliquid impedit tempora nobis deleniti fugiat corporis maiores cupiditate provident veritatis quod odio nulla vel ratione quas.
    </div>
    <div class="cbp-l-member-meta">
        <ul class="list-inline">
            <li>
                <a href="mailto:maildjavaui@gmail.com" target="_blank"><i class="fa fa-envelope-o"></i></a>
            </li>
            <li>
                <a href="javascript:void(0)"><i class="fa fa-phone"></i></a>
            </li>
            <li>
                <a href="http://twitter.com/djavaui" target="_blank"><i class="fa fa-twitter"></i></a>
            </li>
        </ul>
    </div>
</div>
<div class="clearfix"></div>
<div class="cbp-l-member-biodata">
    <div class="row">
        <div class="col-md-9">
            <div class="resume-category">
                <h3 class="resume-category-title clearfix">EDUCATION <span class="icon-plus"><i class="fa fa-plus"></i></span></h3>

                <div class="resume-post">
                    <div class="resume-post-body">
                        <div class="resume-post-date">2005 - 2007</div>
                        <h4 class="resume-post-title">Djava UI Programming School</h4>
                        <h5 class="resume-post-subtitle">Learn web programming</h5>
                        <div class="resume-post-cont">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perspiciatis, corporis, iusto a saepe iste ea odit quas fugit amet nisi adipisci excepturi ipsam quae asperiores sit blanditiis sunt ducimus magni eos non et quos dignissimos quaerat aspernatur.</p>
                        </div>
                    </div>
                </div>

                <div class="resume-post">
                    <div class="resume-post-body">
                        <div class="resume-post-date">2007 - 2011</div>
                        <h4 class="resume-post-title">Sekolah Tinggi Teknologi Adisutjipto University</h4>
                        <h5 class="resume-post-subtitle">Yogyakarta University</h5>
                        <div class="resume-post-cont">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perspiciatis, corporis, iusto a saepe iste ea odit quas fugit amet nisi adipisci excepturi ipsam quae asperiores sit blanditiis sunt ducimus magni eos non et quos dignissimos quaerat aspernatur.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="resume-category">
                <h3 class="resume-category-title clearfix">Professional experience <span class="icon-plus"><i class="fa fa-plus"></i></span></h3>

                <div class="resume-post">
                    <div class="resume-post-body">
                        <div class="resume-post-date">2015 - Present</div>
                        <h4 class="resume-post-title">Senior Web Designer</h4>
                        <h5 class="resume-post-subtitle">Company Name</h5>
                        <div class="resume-post-cont">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perspiciatis, corporis, iusto a saepe iste ea odit quas fugit amet nisi adipisci excepturi ipsam quae asperiores sit blanditiis sunt ducimus magni eos non et quos dignissimos quaerat aspernatur.</p>
                        </div>
                    </div>
                </div>

                <div class="resume-post">
                    <div class="resume-post-body">
                        <div class="resume-post-date">2012 - 2015</div>
                        <h4 class="resume-post-title">Senior Web Designer</h4>
                        <h5 class="resume-post-subtitle">Company Name</h5>
                        <div class="resume-post-cont">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perspiciatis, corporis, iusto a saepe iste ea odit quas fugit amet nisi adipisci excepturi ipsam quae asperiores sit blanditiis sunt ducimus magni eos non et quos dignissimos quaerat aspernatur.</p>
                        </div>
                    </div>
                </div>

                <div class="resume-post">
                    <div class="resume-post-body">
                        <div class="resume-post-date">2011 - 1012</div>
                        <h4 class="resume-post-title">Junior Web Designer</h4>
                        <h5 class="resume-post-subtitle">Company Name</h5>
                        <div class="resume-post-cont">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perspiciatis, corporis, iusto a saepe iste ea odit quas fugit amet nisi adipisci excepturi ipsam quae asperiores sit blanditiis sunt ducimus magni eos non et quos dignissimos quaerat aspernatur.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="resume-btns noprint" id="resume-btns">
                <a target="_blank" href="javascript:void(0)" class="btn btn-success btn-mini"><i class="fa fa-download"></i> Download resume</a>
                <a id="printBtn" onclick="window.print();return false;" target="_blank" href="#" class="btn btn-success btn-mini"><i class="fa fa-print"></i> print resume</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="resume-sidebar">
                <aside class="skill-box">
                    <h3>DESIGN SKILLS <span class="icon-plus"><i class="fa fa-plus"></i></span></h3>

                    <div class="textwidget">
                        <div class="skill-row">
                            <h4 class="skill-title">PHOTOSHOP</h4>
                            <div class="skill-data">
                                <span style="width: 99%;" class="skill-percent-line" data-width="99"></span>
                                <span class="skill-percent">99%</span>
                            </div>
                        </div>

                        <div class="skill-row">
                            <h4 class="skill-title">FIREWORKS</h4>
                            <div class="skill-data">
                                <span style="width: 90%;" class="skill-percent-line" data-width="90"></span>
                                <span class="skill-percent">90%</span>
                            </div>
                        </div>

                        <div class="skill-row">
                            <h4 class="skill-title">ILLUSTRATOR</h4>
                            <div class="skill-data">
                                <span style="width: 76%;" class="skill-percent-line" data-width="76"></span>
                                <span class="skill-percent">76%</span>
                            </div>
                        </div>

                    </div>
                </aside>

                <aside class="skill-box">
                    <h3>DEVELOPMENT SKILLS <span class="icon-plus"><i class="fa fa-plus"></i></span></h3>

                    <div class="textwidget">
                        <div class="skill-row">
                            <h4 class="skill-title">HTML 5</h4>
                            <div class="skill-data">
                                <span style="width: 99%;" class="skill-percent-line" data-width="99"></span>
                                <span class="skill-percent">99%</span>
                            </div>
                        </div>

                        <div class="skill-row">
                            <h4 class="skill-title">CSS 3</h4>
                            <div class="skill-data">
                                <span style="width: 70%;" class="skill-percent-line" data-width="70"></span>
                                <span class="skill-percent">70%</span>
                            </div>
                        </div>

                        <div class="skill-row">
                            <h4 class="skill-title">JQUERY</h4>
                            <div class="skill-data">
                                <span style="width: 80%;" class="skill-percent-line" data-width="80"></span>
                                <span class="skill-percent">80%</span>
                            </div>
                        </div>

                        <div class="skill-row">
                            <h4 class="skill-title">ANGULARJS</h4>
                            <div class="skill-data">
                                <span style="width: 70%;" class="skill-percent-line" data-width="70"></span>
                                <span class="skill-percent">70%</span>
                            </div>
                        </div>

                        <div class="skill-row">
                            <h4 class="skill-title">WORDPRESS</h4>
                            <div class="skill-data">
                                <span style="width: 89%;" class="skill-percent-line" data-width="89"></span>
                                <span class="skill-percent">89%</span>
                            </div>
                        </div>
                    </div>
                </aside>

                <aside class="skill-box">
                    <h3>LANGUAGE SKILLS <span class="icon-plus"><i class="fa fa-plus"></i></span></h3>

                    <div class="textwidget">
                        <aside class="skill-language">
                            <div class="skill-row clearfix">
                                <h4 class="skill-title clearfix">
                                    <div class="flag flag-icon-background flag-icon-gb" title="English"></div> <span>ENGLISH</span>
                                    <div class="rating rating-success pull-right">
                                        <span class="star"></span>
                                        <span class="star active"></span>
                                        <span class="star"></span>
                                        <span class="star"></span>
                                        <span class="star"></span>
                                    </div><!-- /.rating -->
                                </h4>
                            </div>
                        </aside>

                        <aside class="skill-language">
                            <div class="skill-row clearfix">
                                <h4 class="skill-title clearfix">
                                    <div class="flag flag-icon-background flag-icon-gr" title="German"></div> <span>GERMAN</span>
                                    <div class="rating rating-success pull-right">
                                        <span class="star"></span>
                                        <span class="star"></span>
                                        <span class="star active"></span>
                                        <span class="star"></span>
                                        <span class="star"></span>
                                    </div><!-- /.rating -->
                                </h4>
                            </div>
                        </aside>

                        <aside class="skill-language">
                            <div class="skill-row clearfix">
                                <h4 class="skill-title clearfix">
                                    <div class="flag flag-icon-background flag-icon-id" title="Indonesian"></div> <span>INDONESIAN</span>
                                    <div class="rating rating-success pull-right">
                                        <span class="star active"></span>
                                        <span class="star"></span>
                                        <span class="star"></span>
                                        <span class="star"></span>
                                        <span class="star"></span>
                                    </div><!-- /.rating -->
                                </h4>
                            </div>
                        </aside>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</div>