KSS Style Guide

<insert-markup>pages.main.page.1-</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Prus lobortis

Pellentesque nec nulla sagittis

Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

large-image

Donec malesuada augue non erat dictum, vitae efficitur

Maecenas vulputate tortor sit amet egestas rhoncus

Dictum erat vitae

Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

User Settings

Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

Viverra mauris feugiat

Nulla sagittis, ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

Pellentesque nec nulla

Nulla sagittis, ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros

Counter Box

This flexibility gives you the ultimate freedom

1123

Awards & Certyfications

Changing the options for each once added

100

Different Layouts

Different theme and content layouts for different app

520

PSDs Included

Layered and organized

30

Color Management Sections

Compatible color templates and advanced color management

Our Team

Nunc sollicitudin vulputate mattis

Jonathan Test

Author

Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium

Jonathan Test

Author

Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium

Jonathan Test

Author

Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium

Jonathan Test

Author

Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium

Slider Sections

Different theme and content layouts for different app

Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

Test Image
Vivamus nec nibh nec sem sagittis mollis et luctus neque.

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

Test Image
Vivamus nec nibh nec sem sagittis mollis et luctus neque.

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

Articles List

Maecenas vulputate tortor sit amet egestas rhoncus

Testimonials List

Tortor sit amet egestas rhoncus

After trying a few other themes (where half of the promised features werent working), I have found the perfect theme for my portfolio website.

After trying a few other themes (where half of the promised features werent working)

Lorem Ipsum Content I have found

After trying a few other themes (where half of the promised features werent working), I have found the perfect theme for my portfolio website.

Pricing boxes

I have found the perfect

Regular Version

$120 / monthly
  • Up to 20 users
  • 50GB
  • Statistics and tracking

Regular Version

$120 / monthly
  • Up to 20 users
  • 50GB
  • Statistics and tracking

Regular Version

$120 / monthly
  • Up to 20 users
  • 50GB
  • Statistics and tracking

Regular Version

$120 / monthly
  • Up to 20 users
  • 50GB
  • Statistics and tracking

Contact Form Section

I have found the perfect

Markup: ..\..\styleguide\templates\pages\main-page-1.html
<body class="rocksite-p-main-page-1">

<div class="rocksite-s-top-bar rocksite-p-main-page-1-s1">

    <div class="container">
        <div class="rocksite-o-top-bar ">
            <div class="rocksite-o-top-bar__language_menu">
            </div>
            <div class="rocksite-o-top-bar__nav_menu">
        
                <ul class="rocksite-m-nav-menu -horizontal -invert -classic-item rocksite-m-nav-menu">
                
                
                    <li class="rocksite-m-nav-menu__item  "><a
                            href="#" class="rocksite-m-nav-menu__link">Contact Us</a>
                
                    </li>
                
                    <li class="rocksite-m-nav-menu__item  "><a
                            href="#" class="rocksite-m-nav-menu__link">About Us</a>
                
                    </li>
                
                
                </ul>
        
            </div>
            <div class="rocksite-o-top-bar__info">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </div>
            <div class="rocksite-o-top-bar__social-menu">
                    <a href="#" class="rocksite-a-button-icon -transparent -invert -small"><i class="fab fa-linkedin-in"></i>	<span>214 K</span>
                    </a>
                    
                    
                    <a href="#" class="rocksite-a-button-icon -transparent -invert -small"><i class="fa fa-envelope"></i>	<span>214 K</span>
                    </a>
                    
                    
                    <a href="#" class="rocksite-a-button-icon -transparent -invert -small"><i class="fab fa-twitter"></i>	<span>214 K</span>
                    </a>
                    
                    
                    <a href="#" class="rocksite-a-button-icon -transparent -invert -small"><i class="fab fa-facebook-f"></i>	<span>214 K</span>
                    </a>
                    
                    
            </div>
        </div>
        
        
        
        
        
    </div>

</div>


<header class="rocksite-s-main-header -border-bottom rocksite-p-main-page-1-s2">
    <div class="container">
        <div class="rocksite-o-navbar-main u-fill-overlay js-menu-to-resize ">
            <div class="rocksite-o-navbar-main__header">
                <h4 class="rocksite-a-logo" itemprop="headline">
                    <a href="#" title="" rel="home" class="rocksite-a-logo__link">
                        <img src="../assets/images/logo.png" alt="" class="rocksite-a-logo__link__image">
                    </a>
                </h4>
                
            </div>
        
        
            <ul class="rocksite-m-nav-menu -dropdown-menu">
            
            
                <li class="rocksite-m-nav-menu__item  "><a
                        href="#" class="rocksite-m-nav-menu__link">Home Page</a>
            
                </li>
            
                <li class="rocksite-m-nav-menu__item  "><a
                        href="#" class="rocksite-m-nav-menu__link">About Us</a>
            
                </li>
            
                <li class="rocksite-m-nav-menu__item -has-children "><a
                        href="#" class="rocksite-m-nav-menu__link">Services</a>
            
            
                <ul class="rocksite-m-nav-menu__sub-nav">
            
            
                <li class="rocksite-m-nav-menu__sub-nav__item"><a
                        href="#" class="rocksite-m-nav-menu__sub-nav__link">Submenu 1</a></li>
            
                <li class="rocksite-m-nav-menu__sub-nav__item"><a
                        href="#" class="rocksite-m-nav-menu__sub-nav__link">Submenu 2</a></li>
            
                <li class="rocksite-m-nav-menu__sub-nav__item"><a
                        href="#" class="rocksite-m-nav-menu__sub-nav__link">Submenu 3</a></li>
                </ul>
                </li>
            
                <li class="rocksite-m-nav-menu__item  "><a
                        href="#" class="rocksite-m-nav-menu__link">Our Offer</a>
            
                </li>
            
                <li class="rocksite-m-nav-menu__item  "><a
                        href="#" class="rocksite-m-nav-menu__link">Contact Us</a>
            
                </li>
            
                <li class="rocksite-m-nav-menu__item js-expand-search -icon-item"><a
                        href="#" class="rocksite-m-nav-menu__link"><i class="fa fa-search"></i></a>
            
                </li>
            
            
            </ul>
        
            <div class="rocksite-o-navbar-main__search-bar js-search-box-to-expand  u-hidden u-fill-overlay__inner -right">
                <div class="rocksite-o-search-navbar">
                	<a href="#" class="rocksite-a-button-icon rocksite-o-search-navbar__close -transparent js-close-search"><i class="la la-close"></i>	<span>214 K</span>
                	</a>
                	
                	
                	<form role="search" method="get" id="searchform-content"
                	      class="rocksite-m-input-connections -searchform rocksite-o-search-navbar__search-box" action="//127.0.0.1:3000/wordpress4.8/">
                	
                	
                	    <div class="rocksite-m-input-connections__group">
                	        <input type="text" value="" name="s" class="rocksite-m-input-connections__group__input" placeholder="Search">
                	
                	        <span class="rocksite-m-input-connections__group__btn">
                	    <button class="rocksite-a-button-icon -secondary">
                			<i class="la la-search"></i>
                		</button>
                	
                	    </span>
                	    </div>
                	
                	</form>
                </div>
            </div>
        
        
        
        </div>
        
        
        
        
        
    </div>
</header>



<section class="rocksite-s-default rocksite-p-main-page-1-s3" style="background-color:#f8f8f8">

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="rocksite-m-hero-content ">
                    <header class="rocksite-m-hero-content__header">
                        <span class="rocksite-m-hero-content__header__above_title">Prus lobortis</span>
                        <h2 class="rocksite-m-hero-content__header__title">Pellentesque nec nulla sagittis</h2>
                    </header>
                    <div class="rocksite-m-hero-content__content">
                
                		<p>Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros</p>
                
                	</div>
                    <div class="rocksite-m-hero-content__footer">
                
                            <a href="#" class="rocksite-a-button -primary">
                            	Read more
                            </a>
                            
                            
                
                
                            <a href="#" class="rocksite-a-button -ghost">
                            	Contact Us
                            </a>
                            
                            
                
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <img src="../assets/images/pages/tablet-large.jpg" alt="large-image"/>
            </div>
        </div>
    </div>
</section>


<section class="rocksite-s-default rocksite-p-main-page-1-s4">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Donec malesuada augue non erat dictum, vitae efficitur</h2>
        	<p class="rocksite-o-section-header__subtitle"> Maecenas vulputate tortor sit amet egestas rhoncus</p>
        </header>

        <div class="row">

            <div class="col-sm-3">
                <div class="rocksite-m-info ">
                	<div class="rocksite-m-info__content">
                
                		<h3 class="rocksite-m-info__content__title">Dictum erat vitae</h3>
                
                		<p>Ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros</p>
                
                	</div>
                    <div class="rocksite-m-info__icon">
                	    <span class="rocksite-a-icon -large"><i class="la la-bullhorn"></i></span>
                	    
                	    
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-info ">
                	<div class="rocksite-m-info__content">
                
                		<h3 class="rocksite-m-info__content__title">User Settings</h3>
                
                		<p>Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros</p>
                
                	</div>
                    <div class="rocksite-m-info__icon">
                	    <span class="rocksite-a-icon -large"><i class="la la-female"></i></span>
                	    
                	    
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-info ">
                	<div class="rocksite-m-info__content">
                
                		<h3 class="rocksite-m-info__content__title">Viverra mauris feugiat</h3>
                
                		<p>Nulla sagittis, ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros</p>
                
                	</div>
                    <div class="rocksite-m-info__icon">
                	    <span class="rocksite-a-icon -large"><i class="la la-user-plus"></i></span>
                	    
                	    
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-info ">
                	<div class="rocksite-m-info__content">
                
                		<h3 class="rocksite-m-info__content__title">Pellentesque nec nulla</h3>
                
                		<p>Nulla sagittis, ut ultrices diam quis purus lobortis, quis viverra mauris feugiat. Pellentesque nec nulla sagittis, dictum erat vitae, venenatis eros</p>
                
                	</div>
                    <div class="rocksite-m-info__icon">
                	    <span class="rocksite-a-icon -large"><i class="la la-hand-pointer-o"></i></span>
                	    
                	    
                    </div>
                </div>
            </div>

        </div>

    </div>

</section>

<section class="rocksite-s-default rocksite-p-main-page-1-s5">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Latest News</h2>
        	<p class="rocksite-o-section-header__subtitle">Maecenas efficitur libero a augue maximus</p>
        </header>

        <div class="row">

            <div class="col-sm-3">
                <div class="rocksite-m-card ">
                
                
                	<div class="rocksite-m-card__content">
                
                		<h5 class="rocksite-m-card__content__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>
                
                		<div class="rocksite-m-card__content__meta">
                			<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href="#"
                																												rel="bookmark">
                				<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
                			</a></span> <span class="rocksite-m-meta-label">Published by:  <a
                			href="#" title="Posts by admin" rel="author">admin</a> </span>
                		</div>
                        <div class="rocksite-m-card__content__button">
                        <a href="#" class="rocksite-a-button-icon "><i class="la la-arrow-right"></i>	<span>214 K</span>
                        </a>
                        
                        
                        </div>
                	</div>
                	<div class="rocksite-m-card__thumbnail">
                
                		<a href="#" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/pages/news1.jpg" alt="Image"></a>
                
                	</div>
                
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-card ">
                
                
                	<div class="rocksite-m-card__content">
                
                		<h5 class="rocksite-m-card__content__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>
                
                		<div class="rocksite-m-card__content__meta">
                			<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href="#"
                																												rel="bookmark">
                				<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
                			</a></span> <span class="rocksite-m-meta-label">Published by:  <a
                			href="#" title="Posts by admin" rel="author">admin</a> </span>
                		</div>
                        <div class="rocksite-m-card__content__button">
                        <a href="#" class="rocksite-a-button-icon "><i class="la la-arrow-right"></i>	<span>214 K</span>
                        </a>
                        
                        
                        </div>
                	</div>
                	<div class="rocksite-m-card__thumbnail">
                
                		<a href="#" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/pages/news2.jpg" alt="Image"></a>
                
                	</div>
                
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-card ">
                
                
                	<div class="rocksite-m-card__content">
                
                		<h5 class="rocksite-m-card__content__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>
                
                		<div class="rocksite-m-card__content__meta">
                			<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href="#"
                																												rel="bookmark">
                				<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
                			</a></span> <span class="rocksite-m-meta-label">Published by:  <a
                			href="#" title="Posts by admin" rel="author">admin</a> </span>
                		</div>
                        <div class="rocksite-m-card__content__button">
                        <a href="#" class="rocksite-a-button-icon "><i class="la la-arrow-right"></i>	<span>214 K</span>
                        </a>
                        
                        
                        </div>
                	</div>
                	<div class="rocksite-m-card__thumbnail">
                
                		<a href="#" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/pages/news3.jpg" alt="Image"></a>
                
                	</div>
                
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-card ">
                
                
                	<div class="rocksite-m-card__content">
                
                		<h5 class="rocksite-m-card__content__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>
                
                		<div class="rocksite-m-card__content__meta">
                			<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href="#"
                																												rel="bookmark">
                				<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
                			</a></span> <span class="rocksite-m-meta-label">Published by:  <a
                			href="#" title="Posts by admin" rel="author">admin</a> </span>
                		</div>
                        <div class="rocksite-m-card__content__button">
                        <a href="#" class="rocksite-a-button-icon "><i class="la la-arrow-right"></i>	<span>214 K</span>
                        </a>
                        
                        
                        </div>
                	</div>
                	<div class="rocksite-m-card__thumbnail">
                
                		<a href="#" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/pages/news4.jpg" alt="Image"></a>
                
                	</div>
                
                </div>
            </div>

        </div>

    </div>

</section>

<section class="rocksite-s-default rocksite-p-main-page-1-s6">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Counter Box</h2>
        	<p class="rocksite-o-section-header__subtitle">This flexibility gives you the ultimate freedom</p>
        </header>

        <div class="row">

            <div class="col-sm-3">
                <div class="rocksite-m-counter-box">
                	<div class="rocksite-m-counter-box__content">
                		<span class="rocksite-m-counter-box__content__counter">1123</span>
                		<p class="rocksite-m-counter-box__content__prefix">Awards &amp; Certyfications</p>
                		<p class="rocksite-m-counter-box__content__sufix">Changing the options for each once added</p>
                	</div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-counter-box">
                	<div class="rocksite-m-counter-box__content">
                		<span class="rocksite-m-counter-box__content__counter">100</span>
                		<p class="rocksite-m-counter-box__content__prefix">Different Layouts</p>
                		<p class="rocksite-m-counter-box__content__sufix">Different theme and content layouts for different app</p>
                	</div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-counter-box">
                	<div class="rocksite-m-counter-box__content">
                		<span class="rocksite-m-counter-box__content__counter">520</span>
                		<p class="rocksite-m-counter-box__content__prefix">PSDs Included</p>
                		<p class="rocksite-m-counter-box__content__sufix">Layered and organized</p>
                	</div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-counter-box">
                	<div class="rocksite-m-counter-box__content">
                		<span class="rocksite-m-counter-box__content__counter">30</span>
                		<p class="rocksite-m-counter-box__content__prefix">Color Management Sections</p>
                		<p class="rocksite-m-counter-box__content__sufix">Compatible color templates and advanced color management</p>
                	</div>
                </div>
            </div>

        </div>

    </div>

</section>

<section class="rocksite-s-default rocksite-p-main-page-1-s7">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Our Team</h2>
        	<p class="rocksite-o-section-header__subtitle">Nunc sollicitudin vulputate mattis</p>
        </header>

        <div class="row">

            <div class="col-sm-3">
                <div class="rocksite-m-team ">
                
                	<div class="rocksite-m-team__image">
                		<img  src="../assets/images/person-men.jpg" class="img-responsive" alt="">
                	</div>
                	<div class="rocksite-m-team__item">
                	<h4 class="rocksite-m-team__item__title">Jonathan Test</h4>
                		<p class="rocksite-m-team__item__subtitle">Author</p>
                		<p class="rocksite-m-team__item__content">Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                
                	</div>
                	<ul class="rocksite-m-team__shares rocksite-m-nav-menu -horizontal -icons">
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -email">
                		<i class="fa fa-envelope"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -twitter">
                		<i class="fab fa-twitter"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -facebook">
                		<i class="fab fa-facebook-f"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -gplus">
                		<i class="fab fa-google-plus-g"></i>
                </a>
                
                
                </li>
                	</ul>
                
                </div>
                
                
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-team ">
                
                	<div class="rocksite-m-team__image">
                		<img  src="../assets/images/person-men.jpg" class="img-responsive" alt="">
                	</div>
                	<div class="rocksite-m-team__item">
                	<h4 class="rocksite-m-team__item__title">Jonathan Test</h4>
                		<p class="rocksite-m-team__item__subtitle">Author</p>
                		<p class="rocksite-m-team__item__content">Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                
                	</div>
                	<ul class="rocksite-m-team__shares rocksite-m-nav-menu -horizontal -icons">
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -email">
                		<i class="fa fa-envelope"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -twitter">
                		<i class="fab fa-twitter"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -facebook">
                		<i class="fab fa-facebook-f"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -gplus">
                		<i class="fab fa-google-plus-g"></i>
                </a>
                
                
                </li>
                	</ul>
                
                </div>
                
                
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-team ">
                
                	<div class="rocksite-m-team__image">
                		<img  src="../assets/images/person-men.jpg" class="img-responsive" alt="">
                	</div>
                	<div class="rocksite-m-team__item">
                	<h4 class="rocksite-m-team__item__title">Jonathan Test</h4>
                		<p class="rocksite-m-team__item__subtitle">Author</p>
                		<p class="rocksite-m-team__item__content">Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                
                	</div>
                	<ul class="rocksite-m-team__shares rocksite-m-nav-menu -horizontal -icons">
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -email">
                		<i class="fa fa-envelope"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -twitter">
                		<i class="fab fa-twitter"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -facebook">
                		<i class="fab fa-facebook-f"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -gplus">
                		<i class="fab fa-google-plus-g"></i>
                </a>
                
                
                </li>
                	</ul>
                
                </div>
                
                
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-team ">
                
                	<div class="rocksite-m-team__image">
                		<img  src="../assets/images/person-men.jpg" class="img-responsive" alt="">
                	</div>
                	<div class="rocksite-m-team__item">
                	<h4 class="rocksite-m-team__item__title">Jonathan Test</h4>
                		<p class="rocksite-m-team__item__subtitle">Author</p>
                		<p class="rocksite-m-team__item__content">Wnde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                
                	</div>
                	<ul class="rocksite-m-team__shares rocksite-m-nav-menu -horizontal -icons">
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -email">
                		<i class="fa fa-envelope"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -twitter">
                		<i class="fab fa-twitter"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -facebook">
                		<i class="fab fa-facebook-f"></i>
                </a>
                
                
                </li>
                		<li class="rocksite-m-nav-menu__item"><a href="#" class="rocksite-a-button-social -gplus">
                		<i class="fab fa-google-plus-g"></i>
                </a>
                
                
                </li>
                	</ul>
                
                </div>
                
                
            </div>

        </div>

    </div>

</section>

<section class="rocksite-s-default rocksite-p-main-page-1-s8">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Slider Sections</h2>
        	<p class="rocksite-o-section-header__subtitle">Different theme and content layouts for different app</p>
        </header>



        <div class="rocksite-o-slider-box">
        	<div class="rocksite-o-slider-box__list js-slider">
        		<div class="rocksite-o-slider-box__list__item">
        			<div class="rocksite-m-content-banner -large-banner">
        			
        			    <div class="rocksite-m-content-banner__image">
        			        <img src="../assets/images/pages/slider1.jpg" alt="Test Image"/>
        			    </div>
        			
        			    <div class="rocksite-m-content-banner__wrapper">
        			
        			        <div class="rocksite-m-content-banner__wrapper__item">
        			
        			            <h5 class="rocksite-m-content-banner__wrapper__item__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>
        			
        			            <div class="rocksite-m-content-banner__wrapper__item__content">
        			                <p>Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.</p>
        			            </div>
        			        </div>
        			    </div>
        			
        			
        			
        			</div>
        		</div>
        		<div class="rocksite-o-slider-box__list__item">
        			<div class="rocksite-m-content-banner -right-side-text">
        			
        			    <div class="rocksite-m-content-banner__image">
        			        <img src="../assets/images/pages/slider2.jpg" alt="Test Image"/>
        			    </div>
        			
        			    <div class="rocksite-m-content-banner__wrapper">
        			
        			        <div class="rocksite-m-content-banner__wrapper__item">
        			
        			            <h5 class="rocksite-m-content-banner__wrapper__item__title"><a href="#">Vivamus nec nibh nec sem sagittis mollis et luctus neque.</a></h5>
        			
        			            <div class="rocksite-m-content-banner__wrapper__item__content">
        			                <p>Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.</p>
        			            </div>
        			        </div>
        			    </div>
        			
        			
        			
        			</div>
        		</div>
        		<div class="rocksite-o-slider-box__list__item">
        			<div class="rocksite-m-content-banner -large-banner">
        			
        			    <div class="rocksite-m-content-banner__image">
        			        <img src="../assets/images/pages/slider3.jpg" alt="Test Image"/>
        			    </div>
        			
        			    <div class="rocksite-m-content-banner__wrapper">
        			
        			        <div class="rocksite-m-content-banner__wrapper__item">
        			
        			            <h5 class="rocksite-m-content-banner__wrapper__item__title"><a href="#">Vivamus nec nibh nec sem sagittis mollis et luctus neque.</a></h5>
        			
        			            <div class="rocksite-m-content-banner__wrapper__item__content">
        			                <p>Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.</p>
        			            </div>
        			        </div>
        			    </div>
        			
        			
        			
        			</div>
        		</div>
        
        	</div>
        </div>



    </div>

</section>

<section class="rocksite-s-default rocksite-p-main-page-1-s9">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Articles List</h2>
        	<p class="rocksite-o-section-header__subtitle"> Maecenas vulputate tortor sit amet egestas rhoncus</p>
        </header>


        <article class="rocksite-o-content -article-short-vertical">
        
        
            <header class="rocksite-o-content__header">
        
        
        
        
                <h3 class="rocksite-o-content__header__title">
                    <a href=""
                       title="Permalink Aliquam varius turpis vel scelerisque molestie Donec ac libero tellus."
                       rel="bookmark">Aliquam varius turpis vel scelerisque molestie Donec ac libero tellus.</a>
                </h3>
        
        
        
        
            </header>
        
            <div class="rocksite-o-content__thumbnail">
                <div class="rocksite-m-thumbnail">
        
                    <img width="1000" height="520" src="../assets/images/large-thumbnail.jpeg" alt="">
        
                </div>
            </div>
        
            <div class="rocksite-o-content__entry entry-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo arcu eu ultrices pellentesque. Aliquam ultricies elit tempor molestie rutrum. Maecenas pharetra sem eu accumsan dignissim. Duis vel purus commodo, semper elit vel, porttitor sem.</p>
                <div class="rocksite-o-content__entry__more">
        
                    <a href="#" class="rocksite-a-button -article-short-vertical">
                    	Continue reading
                    	<i class="la la-arrow-right"></i>
                    </a>
                    
                    
        
                </div>
            </div>
        
        
        </article>


        <article class="rocksite-o-content -article-short-vertical">
        
        
            <header class="rocksite-o-content__header">
        
        
        
        
                <h3 class="rocksite-o-content__header__title">
                    <a href=""
                       title="Permalink Nunc sit amet ipsum vestibulum, posuere felis id, vulputate erat."
                       rel="bookmark">Nunc sit amet ipsum vestibulum, posuere felis id, vulputate erat.</a>
                </h3>
        
        
        
        
            </header>
        
            <div class="rocksite-o-content__thumbnail">
                <div class="rocksite-m-thumbnail">
        
                    <img width="1000" height="520" src="../assets/images/large-thumbnail.jpeg" alt="">
        
                </div>
            </div>
        
            <div class="rocksite-o-content__entry entry-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo arcu eu ultrices pellentesque. Aliquam ultricies elit tempor molestie rutrum. Maecenas pharetra sem eu accumsan dignissim. Duis vel purus commodo, semper elit vel, porttitor sem.</p>
                <div class="rocksite-o-content__entry__more">
        
                    <a href="#" class="rocksite-a-button -article-short-vertical">
                    	Continue reading
                    	<i class="la la-arrow-right"></i>
                    </a>
                    
                    
        
                </div>
            </div>
        
        
        </article>


        <article class="rocksite-o-content -article-short-vertical">
        
        
            <header class="rocksite-o-content__header">
        
        
        
        
                <h3 class="rocksite-o-content__header__title">
                    <a href=""
                       title="Permalink Consectetur adipiscing elit donec commodo arcu"
                       rel="bookmark">Consectetur adipiscing elit donec commodo arcu</a>
                </h3>
        
        
        
        
            </header>
        
            <div class="rocksite-o-content__thumbnail">
                <div class="rocksite-m-thumbnail">
        
                    <img width="1000" height="520" src="../assets/images/large-thumbnail.jpeg" alt="">
        
                </div>
            </div>
        
            <div class="rocksite-o-content__entry entry-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo arcu eu ultrices pellentesque. Aliquam ultricies elit tempor molestie rutrum. Maecenas pharetra sem eu accumsan dignissim. Duis vel purus commodo, semper elit vel, porttitor sem.</p>
                <div class="rocksite-o-content__entry__more">
        
                    <a href="#" class="rocksite-a-button -article-short-vertical">
                    	Continue reading
                    	<i class="la la-arrow-right"></i>
                    </a>
                    
                    
        
                </div>
            </div>
        
        
        </article>


    </div>

</section>
<section class="rocksite-s-default rocksite-p-main-page-1-s10">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Testimonials List</h2>
        	<p class="rocksite-o-section-header__subtitle">Tortor sit amet egestas rhoncus</p>
        </header>
        <div class="row">
            <div class="col-sm-3">
                <div class="rocksite-m-testimonial ">
                
                    <div class="rocksite-m-testimonial__content">
                        <p>After trying a few other themes (where half of the promised features werent working), I have found the perfect theme for my portfolio website.</p>
                    </div>
                    <footer class="rocksite-m-testimonial__footer">
                        <div class="rocksite-m-testimonial__footer__image">
                            <img src="../assets/images/pages/testimonials/person1.jpg" />
                        </div>
                        <div class="rocksite-m-testimonial__footer__content">
                            <h5 class="rocksite-m-testimonial__footer__content__title">
                                Ann Profeska</h5>
                            <span class="rocksite-m-testimonial__footer__content__subtitle">CEO Brand</span>
                        </div>
                
                    </footer>
                </div>            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-testimonial ">
                
                    <div class="rocksite-m-testimonial__content">
                        <p>After trying a few other themes (where half of the promised features werent working)</p>
                    </div>
                    <footer class="rocksite-m-testimonial__footer">
                        <div class="rocksite-m-testimonial__footer__image">
                            <img src="../assets/images/pages/testimonials/person2.jpg" />
                        </div>
                        <div class="rocksite-m-testimonial__footer__content">
                            <h5 class="rocksite-m-testimonial__footer__content__title">
                                Ann Profeska</h5>
                            <span class="rocksite-m-testimonial__footer__content__subtitle">Author</span>
                        </div>
                
                    </footer>
                </div>            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-testimonial ">
                
                    <div class="rocksite-m-testimonial__content">
                        <p>Lorem Ipsum Content I have found</p>
                    </div>
                    <footer class="rocksite-m-testimonial__footer">
                        <div class="rocksite-m-testimonial__footer__image">
                            <img src="../assets/images/pages/testimonials/person3.jpg" />
                        </div>
                        <div class="rocksite-m-testimonial__footer__content">
                            <h5 class="rocksite-m-testimonial__footer__content__title">
                                Cyndi Wallace</h5>
                            <span class="rocksite-m-testimonial__footer__content__subtitle">Author</span>
                        </div>
                
                    </footer>
                </div>            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-testimonial ">
                
                    <div class="rocksite-m-testimonial__content">
                        <p>After trying a few other themes (where half of the promised features werent working), I have found the perfect theme for my portfolio website.</p>
                    </div>
                    <footer class="rocksite-m-testimonial__footer">
                        <div class="rocksite-m-testimonial__footer__image">
                            <img src="../assets/images/pages/testimonials/person4.jpg" />
                        </div>
                        <div class="rocksite-m-testimonial__footer__content">
                            <h5 class="rocksite-m-testimonial__footer__content__title">
                                Peter Smooth</h5>
                            <span class="rocksite-m-testimonial__footer__content__subtitle">Webdeveloper</span>
                        </div>
                
                    </footer>
                </div>            </div>
        </div>
    </div>

</section>

<section class="rocksite-s-default rocksite-p-main-page-1-s11">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Pricing boxes</h2>
        	<p class="rocksite-o-section-header__subtitle">I have found the perfect</p>
        </header>
        <div class="row">
            <div class="col-sm-3">
                <div class="rocksite-m-pricing-box ">
                	<h4 class="rocksite-m-pricing-box__title">
                		Regular Version
                	</h4>
                	<div class="rocksite-m-pricing-box__price">
                		<span class="rocksite-m-pricing-box__price__currency">$</span><span class="rocksite-m-pricing-box__price__amount">120</span>
                		<span class="rocksite-m-pricing-box__price__period"> / monthly</span>
                	</div>
                	<ul class="rocksite-m-pricing-box__features">
                		<li>Up to 20 users</li>
                		<li>50GB</li>
                		<li>Statistics and tracking</li>
                	</ul>
                    <div class="rocksite-m-pricing-box__footer">
                	    <a href="#" class="rocksite-a-button -primary">
                	    	Click me
                	    </a>
                	    
                	    
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-pricing-box ">
                	<h4 class="rocksite-m-pricing-box__title">
                		Regular Version
                	</h4>
                	<div class="rocksite-m-pricing-box__price">
                		<span class="rocksite-m-pricing-box__price__currency">$</span><span class="rocksite-m-pricing-box__price__amount">120</span>
                		<span class="rocksite-m-pricing-box__price__period"> / monthly</span>
                	</div>
                	<ul class="rocksite-m-pricing-box__features">
                		<li>Up to 20 users</li>
                		<li>50GB</li>
                		<li>Statistics and tracking</li>
                	</ul>
                    <div class="rocksite-m-pricing-box__footer">
                	    <a href="#" class="rocksite-a-button -primary">
                	    	Click me
                	    </a>
                	    
                	    
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-pricing-box ">
                	<h4 class="rocksite-m-pricing-box__title">
                		Regular Version
                	</h4>
                	<div class="rocksite-m-pricing-box__price">
                		<span class="rocksite-m-pricing-box__price__currency">$</span><span class="rocksite-m-pricing-box__price__amount">120</span>
                		<span class="rocksite-m-pricing-box__price__period"> / monthly</span>
                	</div>
                	<ul class="rocksite-m-pricing-box__features">
                		<li>Up to 20 users</li>
                		<li>50GB</li>
                		<li>Statistics and tracking</li>
                	</ul>
                    <div class="rocksite-m-pricing-box__footer">
                	    <a href="#" class="rocksite-a-button -primary">
                	    	Click me
                	    </a>
                	    
                	    
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="rocksite-m-pricing-box ">
                	<h4 class="rocksite-m-pricing-box__title">
                		Regular Version
                	</h4>
                	<div class="rocksite-m-pricing-box__price">
                		<span class="rocksite-m-pricing-box__price__currency">$</span><span class="rocksite-m-pricing-box__price__amount">120</span>
                		<span class="rocksite-m-pricing-box__price__period"> / monthly</span>
                	</div>
                	<ul class="rocksite-m-pricing-box__features">
                		<li>Up to 20 users</li>
                		<li>50GB</li>
                		<li>Statistics and tracking</li>
                	</ul>
                    <div class="rocksite-m-pricing-box__footer">
                	    <a href="#" class="rocksite-a-button -primary">
                	    	Click me
                	    </a>
                	    
                	    
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<section class="rocksite-s-default rocksite-p-main-page-1-s12">

    <div class="container">

        <header class="rocksite-o-section-header u-align-center">
        	
        	<h2 class="rocksite-o-section-header__title">Contact Form Section</h2>
        	<p class="rocksite-o-section-header__subtitle">I have found the perfect</p>
        </header>
        <div class="row">

            <div class="col-sm-6">
                <form action="/wordpress4.8/forms/#wpcf7-f1885-p1886-o1" method="post" class="rocksite-o-form wpcf7-form">
                		<div class="rocksite-o-form__line">
                			<div class="rocksite-m-label-input ">
                			
                			
                				<label for="input_text" class="rocksite-m-label-input__label">Your Name</label>
                				<input type="text" value="" id="input_text" name="your-name" placeholder="" class="rocksite-a-input rocksite-m-label-input__input">
                			
                			</div>
                		</div>
                		<div class="rocksite-o-form__line">
                			<div class="rocksite-m-label-input ">
                			
                			
                				<label for="input_surname" class="rocksite-m-label-input__label">Your Surname</label>
                				<input type="text" value="" id="input_surname" name="your-surnname" placeholder="" class="rocksite-a-input rocksite-m-label-input__input">
                			
                			</div>
                		</div>
                		<div class="rocksite-o-form__line">
                			<div class="rocksite-m-label-input ">
                			
                			
                				<label for="input_email" class="rocksite-m-label-input__label">Your E-mail</label>
                				<input type="email" value="" id="input_email" name="your-surnname" placeholder="" class="rocksite-a-input rocksite-m-label-input__input">
                			
                			</div>
                		</div>
                
                	<div class="rocksite-o-form__line">
                		<div class="rocksite-m-label-textarea ">
                		
                		
                			<label for="input_text" class="rocksite-m-label-textarea__label">Your Message</label>
                			<textarea class="rocksite-a-textarea rocksite-m-label-textarea__textarea" id="input_text" name="your-message" rows="" placeholder="" aria-invalid="false"></textarea>
                		
                		</div>
                	</div>
                
                
                
                
                
                
                
                		<div class="rocksite-o-form__btn-line -btn-right">
                				<button class="rocksite-a-input-button " type="submit">Send Message</button>
                		</div>
                </form>

            </div>

        </div>
    </div>

</section>

<section class="rocksite-s-footer rocksite-p-main-page-1-footer-1">

    <div class="container">


        <div class="row">

            <div class="col-lg-3">
                <div id="nav_menu-1" class="rocksite-o-widget -widget_nav_menu  -dark -footer">
                	<header class="rocksite-o-widget__header"><h3 class="rocksite-o-widget__header__title">First Column</h3></header>
                	<div class="menu-menu-sidebar-page-container">
                		<ul class="rocksite-m-nav-menu  -dark -footer">
                		
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Home Page</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">About Us</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item -has-children "><a
                		            href="#" class="rocksite-m-nav-menu__link">Services</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Our Offer</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Contact Us</a>
                		
                		    </li>
                		
                		
                		</ul>
                	</div>
                </div>

            </div>
            <div class="col-lg-3">
                <div id="nav_menu-1" class="rocksite-o-widget -widget_nav_menu  -dark -footer">
                	<header class="rocksite-o-widget__header"><h3 class="rocksite-o-widget__header__title">Second Column</h3></header>
                	<div class="menu-menu-sidebar-page-container">
                		<ul class="rocksite-m-nav-menu  -dark -footer">
                		
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Contact Me</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">About Me</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item -has-children "><a
                		            href="#" class="rocksite-m-nav-menu__link">Services</a>
                		
                		    </li>
                		
                		
                		</ul>
                	</div>
                </div>

            </div>

            <div class="col-lg-3">
                <div id="nav_menu-1" class="rocksite-o-widget -widget_nav_menu  -dark -footer">
                	<header class="rocksite-o-widget__header"><h3 class="rocksite-o-widget__header__title">Third Column</h3></header>
                	<div class="menu-menu-sidebar-page-container">
                		<ul class="rocksite-m-nav-menu  -dark -footer">
                		
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Pages</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Categories</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Depth</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Advanced</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Menu Description</a>
                		
                		    </li>
                		
                		
                		</ul>
                	</div>
                </div>

            </div>
            <div class="col-lg-3">
                <div id="nav_menu-1" class="rocksite-o-widget -widget_nav_menu  -dark -footer">
                	<header class="rocksite-o-widget__header"><h3 class="rocksite-o-widget__header__title">Fourth Column</h3></header>
                	<div class="menu-menu-sidebar-page-container">
                		<ul class="rocksite-m-nav-menu  -dark -footer">
                		
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Contact Me</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">About Me</a>
                		
                		    </li>
                		
                		    <li class="rocksite-m-nav-menu__item  "><a
                		            href="#" class="rocksite-m-nav-menu__link">Home</a>
                		
                		    </li>
                		
                		
                		</ul>
                	</div>
                </div>

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

</section>

</body>
Source: ../source/scss/components/pages/_main-page-1.scss, line 1