%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /www/varak.net/www.varak.net/
Upload File :
Create Path :
Current File : //www/varak.net/www.varak.net/features.html

<!DOCTYPE html>
<html class="no-js" lang="en">
<!-- BEGIN head -->
<head>


    <!-- Meta Tags -->
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="One Page/Multi Page HTML Template">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!-- Title -->
    <title>Ronika - One Page/Multi Page HTML Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">

    <!--[if lte IE 9]
		<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

    <link rel="stylesheet" id="foundation-css" href="css/foundation.css" type="text/css" media="screen">
    <link rel="stylesheet" id="stylesheet-css" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" id="shortcodes-css" href="css/shortcodes.css" type="text/css" media="screen">
    <link rel="stylesheet" id="magnific-popup-css" href="css/magnific.popup.css" type="text/css" media="screen">
    <link rel="stylesheet" id="flexslider-css" href="css/flexslider.css" type="text/css" media="screen">
    <link rel="stylesheet" id="icomoon-ultimate-css" href="css/icomoon.ultimate.css" type="text/css" media="screen">
    <link rel="stylesheet" id="contact-form-7-css" href="css/styles.css" type="text/css" media="all">
    <script type="text/javascript" src="js/modernizr.2.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/jquery/jquery-migrate.min.js"></script>
    <script type="text/javascript" src="js/comment-reply.min.js"></script>

<!-- END head -->
</head>

<body class="blog custom-background  touch-animation-off sticky-header-on">

    <!--[if lte IE 7]>
		<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->

    <noscript class="chromeframe noscript">
        Please Turn On JavaScript For Seeing This Website Properly.
    </noscript>

        <header class="header">
        <div class="row">
            <div class="large-12 columns">

                <div class="logo">
                    <a href="#">
                        <img src="images/logo.png" alt="Ronika">
                    </a>
                </div>

                <nav class="main-navigation">
                    <ul id="main-navigation" class="menu">
                        <li><a href="index.html#Home">Home</a></li>
                        <li><a href="index.html#services">Services</a></li>
                        <li><a href="index.html#works">Works</a></li>
                        <li><a href="index.html#additional-post">Post</a></li>
                        <li><a href="index.html#who-we-are">About us</a></li>
                        <li><a href="index.html#stay-in-touch">Contact us</a></li>
                        <li><a href="blog-sidebar.html" class="external">Blog</a>
                            <ul class="sub-menu">
                                <li><a href="blog-sidebar.html" class="external">BLOG with Sidebar</a></li>
                                <li><a href="blog-fullwidth.html" class="external">BLOG Full Width</a></li>
                            </ul>
                        </li>
                        <li><a href="peresentation-page.html" class="external">Pages</a>
                            <ul class="sub-menu">
                                <li><a href="peresentation-page.html" class="external">Presentation Page</a></li>
                                <li><a href="features.html" class="external">Features</a></li>
                                <li><a href="template-404.html" class="external">404 – Not Found</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>

                <div class="top-social-icons">
                    <ul>
                        <li><a href="#"><span class="icon-twitter" aria-hidden="true"></span></a></li>
                        <li><a href="#"><span class="icon-flickr" aria-hidden="true"></span></a></li>
                        <li><a href="#"><span class="icon-facebook" aria-hidden="true"></span></a></li>
                    </ul>
                </div>

            </div>
        </div>
    </header>

    <div class="page-container">
        <div class="row">
            <div class="large-12 columns">
                <h2 class="content-title blog-title title-animate">
                    <span>|</span>
                    <strong>Features</strong>
                </h2>
            </div>
            <div class="large-12 columns">
                <article>
                    <div class="entry-content">
                        <div class="content">
                            <h2>Alerts</h2>
                            <div class="alert-message notification"><span>Your Notification Message</span></div>
                            <div class="alert-message warning"><span>Warning Message!</span></div>
                            <div class="alert-message error"><span>Error Message.</span></div>
                            <div class="alert-message success"><span>Success Message.</span></div>
                            <div class="alert-message info"><span>Info Message</span></div>
                            <div class="gap" data-height-size="60px"></div>
                            <h2>Buttons</h2>
                            <div class="gap" data-height-size="20px"></div>
                            <a class="ronika-button small default" href="http://www.google.com/">Small Default Color</a>
                            <a class="ronika-button small blue" href="http://www.google.com/">Small Blue</a>
                            <a class="ronika-button small red" href="http://www.google.com/">Small Red</a>
                            <a class="ronika-button small black" href="http://www.google.com/">Small Black</a>
                            <a class="ronika-button small white" href="http://www.google.com/">Small White</a>
                            <div class="gap" data-height-size="20px"></div>
                            <a class="ronika-button medium default" href="http://www.google.com/">Medium Default Color</a>
                            <a class="ronika-button medium blue" href="http://www.google.com/">Medium Blue</a>
                            <a class="ronika-button medium red" href="http://www.google.com/">Medium Red</a>
                            <a class="ronika-button medium black" href="http://www.google.com/">Medium Black</a>
                            <a class="ronika-button medium white" href="http://www.google.com/">Medium White</a>
                            <div class="gap" data-height-size="20px"></div>
                            <a class="ronika-button large default" href="http://www.google.com/">Large Default Color</a>
                            <a class="ronika-button large blue" href="http://www.google.com/">Large Blue</a>
                            <a class="ronika-button large red" href="http://www.google.com/">Large Red</a>
                            <a class="ronika-button large black" href="http://www.google.com/">Large Black</a>
                            <a class="ronika-button large white" href="http://www.google.com/">Large White</a>
                            <div class="gap" data-height-size="60px"></div>
                            <h2>Retina Icons</h2>
                            <div class="gap" data-height-size="20px"></div>
                            <div class="fourcol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <div class="icon-container effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                    <span aria-hidden="true" class="icon-heart ronika-icon small"></span>
                                    <div class="icon-content small">
                                        Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo.<br>
                                    </div>
                                </div>
                            </div>
                            <div class="fourcol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <div class="icon-container effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                    <span aria-hidden="true" class="icon-fire ronika-icon small"></span>
                                    <div class="icon-content small">
                                        Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo.<br>
                                    </div>
                                </div>
                            </div>
                            <div class="fourcol last effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <div class="icon-container effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                    <span aria-hidden="true" class="icon-bubbles ronika-icon small"></span>
                                    <div class="icon-content small">
                                        Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo.<br>
                                    </div>
                                </div>
                            </div>
                            <div class="gap" data-height-size="60px"></div>
                            <h2>Columns</h2>
                            <div class="sixcol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/2 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>
                            </div>
                            <div class="sixcol last effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/2 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>
                            </div>
                            <div class="gap" data-height-size="60px"></div>
                            <div class="fourcol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/3 columns</h4>
                                <p>
                                    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.<br>
                                </p>
                            </div>
                            <div class="fourcol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/3 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            </div>
                            <div class="fourcol last effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/3 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            </div>
                            <div class="gap" data-height-size="60px"></div>
                            <div class="threecol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/4 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            </div>
                            <div class="threecol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/4 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            </div>
                            <div class="threecol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/4 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            </div>
                            <div class="threecol last effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/4 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            </div>
                            <div class="gap" data-height-size="60px"></div>
                            <div class="eightcol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>2/3 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
                            </div>
                            <div class="fourcol last effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/3 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            </div>
                            <div class="gap" data-height-size="60px"></div>
                            <div class="sixcol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/2 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>
                            </div>
                            <div class="threecol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/4 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus.</p>
                            </div>
                            <div class="threecol last effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/4 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus.</p>
                            </div>
                            <div class="gap" data-height-size="60px"></div>
                            <div class="ninecol effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>3/4 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat.Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
                            </div>
                            <div class="threecol last effect-none" data-effect-offset="1" data-effect-speed="1" data-effect-delay="0">
                                <h4>1/4 columns</h4>
                                <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis.</p>
                            </div>
                        </div>
                    </div>
                </article>

            </div>

        </div>
    </div>


    <footer class="footer">
        <p>Copyright © 2013, All Rights Reserved.</p>
    </footer>

    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="js/sly.min.js"></script>
    <script src="js/jquery.stellar.min.js"></script>
    <script type="text/javascript" src="js/jquery.stellar.min.js"></script>
    <script type="text/javascript" src="js/waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.magnific.popup.min.js"></script>
    <script type="text/javascript" src="js/jquery.fitvids.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider.min.js"></script>
    <script type="text/javascript" src="js/tweenlite.min.js"></script>
    <script type="text/javascript" src="js/cssplugin.min.js"></script>
    <script type="text/javascript" src="js/imagesloaded.min.js"></script>
    <script type="text/javascript" src="js/selectnav.min.js"></script>
    <script type="text/javascript" src="js/enquire.min.js"></script>
    <script type="text/javascript" src="js/respond.min.js"></script>
    <script type="text/javascript" src="js/underscore.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="js/jquery.nav.js"></script>
    <script type="text/javascript">
        /* <![CDATA[ */
        var ronika_data = { "home_url": "http:\/\/demo.spnoy.com\/ronika", "lightbox_gallery_mode": "1", "lightbox_close_button": "1", "lightbox_close_button_position": "true", "lightbox_align": "false", "navigation_scroll_speed": "600", "animation_switch": "0", "sticky_header_switch": "1" };
        /* ]]> */
    </script>
    <script type="text/javascript" src="js/custom.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript">
        /* <![CDATA[ */
        var _wpcf7 = { "loaderUrl": "http:\/\/demo.spnoy.com\/ronika\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif", "sending": "Sending ..." };
        /* ]]> */
    </script>
    <script type="text/javascript" src="js/scripts.js"></script>


</body>
</html>

Zerion Mini Shell 1.0