CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Definition

Header intro is a simple module that utilizes the header navigation- bar and contents such as slider, images to display information as a form of introduction usually found in the landing page of website. It is fully responsive and adapt to all device screen sizes.

Structure

intro content

Other layout design options for introductory content is represented below.

intro content

intro content

Class identifier
introChip

Style one

This style combines both the navigation with drop down option and a simple introductory message in addition to a pronounced action button. It is fully responsive and ready to use.

Code with CSS Only

The best and easy fun way to do things bigger

start now


Try it yourself 
 
    <div class="introChip">
    <!-- introchip header -->
    <div class="barHeader color-set-blazeOrange">
	    <div class="barHeaderLeft">
		    <h1><a href="#link">G16</a></h1>
	    </div>
	    <div class="barHeaderRight">
		    <div class="nav-dropDown">
			    <!-- Mobile friendly -->
			    <input id="action-6" type="checkbox" hidden="hidden" />
			    <label for="action-6"><span class="icon icon-menu"></span></label>
			    <nav>
				    <ul>
					  <li><a href="">Home</a></li>
					  <li><a href="">About us</a></li>
					  <li class="parent"><a href="">Services 
                                       <span class="icon icon-caret-down"></span> </a>
						<div class="submenu">
							<a href="#">Mobile first</a>
							<a href="#">Desktop</a>
							<a href="#">Stacked grids</a>
							<a href="#">Inline grid</a>
							<a href="#">Components</a>
						</div>
					  </li>
					  <li><a href="">Our Teams</a></li>
					  <li><a href="">Projects</a></li>
				    </ul>
			    </nav>
		    </div>
	    </div>
    </div>
    <!-- introchip body -->
    <section class="color-set-wildSand introContent">
	    <h1 class="transform-upp">Code with CSS Only</h1>
	    <p>The best and easy fun way to do things bigger</p>
	    <p>
		    <a href="#" class="button color-set-jagua hover-set-blazeOrange">start now</a>
	    </p>
    </section>
    </div>

Style Two

This style used the same approach as the style one, except for the slider. It is a good options for site that has more information to display in form of carousel.

G16

  • Zfold Flyer
  • Creative Flyer
  • Z- Folds Hand out
  • Fanstastic Design
  • Three folds
 
    <div class="introChip">
    <!-- introchip header -->
    <div class="barHeader color-set-black">
	    <div class="barHeaderLeft">
	      <h1><a href="#link">G16</a></h1>
	    </div>
	    <div class="barHeaderRight">
		    <div class="nav-horizontal">
		    <input id="action-6" type="checkbox" hidden="hidden" />
		    <label for="action-6"><span class="icon icon-menu"></span></label>
		    <nav>
			    <ul>
			    <li>
				    <ul>
				    <li><a href=""><span class="icon icon-home"></span></a></li>
				    <li><a href="index.html" class="color-set-blazeOrange hover-text-almond">
				    <span class="icon icon-users"></span></a></li>
				    <li><a href=""><span class="icon icon-cogs"></span></a></li>
				    <li><a href=""><span class="icon icon-stack"></span></a></li>
				    <li><a href=""><span class="icon icon-location"></span></a></li>
				    <li>
				    <form>
				    <input type="text" name="searchterm" placeholder="Search keywords here...." 
				           class="iconSearchWhite color-set-black" required="required">
				    </form>
				    </li>
				    </ul>
			    </li>
			    </ul>
		    </nav>
		    </div>
	    </div>
    </div>
    <!-- introchip body -->
	    <section class="slideshow-slideIn">
	    <!-- previews -->
	    <a id="picture1" data-slideshow="picture1"></a>
	    <a id="picture2" data-slideshow="picture2"></a>
	    <a id="picture3" data-slideshow="picture3"></a>
	    <a id="picture4" data-slideshow="picture4"></a>
	    <a id="picture5" data-slideshow="picture5"></a>
	    <article>
	    <ul>
		    <li>
			    <figure id="shot1" class="color-set-alpine">
			    <figcaption>Nefarious Beaver</figcaption>
			    </figure>
		    </li>
		    <li>
			    <figure id="shot2" class="color-set-acapulo">
			    <figcaption>Honkey Donkey Beaver</figcaption>
			    </figure>
		    </li>
		    <li>
			    <figure id="shot3" class="color-set-alizarinCrimson">
			    <figcaption>Nebatical Nobilis </figcaption>
			    </figure>
		    </li>
		    <li>
			    <figure id="shot4" class="color-set-auchico">
			    <figcaption>Dreaded Spikes</figcaption>
			    </figure>
		    </li>
		    <li>
			    <figure id="shot5" class="color-set-aquamarineBlue">
			    <figcaption>Hypnosis Beaver</figcaption>->
			    </figure>
		    </li>
	    </ul>
	    <!-- Navigation -->
		    <span class="nav">
			    <a href="#picture1"></a>
			    <a href="#picture2"></a>
			    <a href="#picture3"></a>
			    <a href="#picture4"></a>
			    <a href="#picture5"></a>
		    </span>
	    </article>
	    </section>
    </div>

Style three

This option include a search form immediately after the top navigation bar, it is a good choice for search related website with pools of information to fetch from.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat cursus, pellentesque sem eget, finibus elit.

 
        <div class="introChip">
          <!-- introchip header -->
          <div class="barHeader color-set-blazeOrange">
            <div class="barHeaderLeft">
                <h1><a href="#link">G16</a></h1>
            </div>
            <div class="barHeaderRight">
                <div class="nav-dropDown">
                    <!-- Mobile friendly -->
                    <input id="action-6" type="checkbox" hidden="hidden" />
                    <label for="action-6"><span class="icon icon-menu"></span></label>
                    <nav>
                        <ul>
                            <li><a href="">Home</a></li>
                            <li><a href="">About us</a></li>
                            <li class="parent"><a href="">Services 
                            <span class="icon icon-caret-down"></span>
                            </a>
                                <div class="submenu">
                                <a href="#">Mobile first</a>
                                <a href="#">Desktop</a>
                                <a href="#">Stacked grids</a>
                                <a href="#">Inline grid</a>
                                <a href="#">Components</a>
                                </div>
                            </li>
                            <li><a href="">Our Teams</a></li>
                            <li><a href="">Projects</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- introchip body -->
            <section class="color-set-wildSand introContent">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Sed sed erat cursus, pellentesque sem eget, finibus elit.
                </p>
                <form>
                <input type="text" name="searchterm" placeholder="Search keywords here...." 
                class="iconSearchBlack border-all-xxs" required="required">
                </form>
            </section>
        </div>

Style Four

This intro module has a semblance of typical landing page design with a search or request form and a more conspicouos introductory contents that catch the attention of visitor.

Two additional classes are required to be assigned to the class attribute holding introChip, the first extension is the introBack (this class holds any defined background image) and the second extended class introOverlay, this class creates an overlay transparency effect on the defined background.

The tiny CSS tag code snippets shows how to set up new background image for your introductory module, if you have the intention of setting up new one. You can place it inline or create a new external style sheet

 
               Change the background image to your own choice of background
                .introBack{
                background-image:url('your background image url') !important;
                background-position:center center;
                background-size:cover;
                width:100%;
                background-attachment:fixed;
                }
                

Step into the world of CSS Technology, have fun with it, and explore infinitely. Its all free

Code - Style four

 
    <!-- Extended class (introBack) -->               
    <section class="introChip introBack">
      <!-- introchip overlay container -->
       <section class="introOverlay">
        <!-- introchip header (ref: bar header plugin)-->
        <article class="barHeader color-set-jagua">
	        <div class="barHeaderLeft">
		        <h1><a href="#link">G16</a></h1>
	        </div>
	        <div class="barHeaderRight">
		        <div class="nav-dropDown">
			        <!-- Mobile friendly -->
			        <input id="action-6" type="checkbox" hidden="hidden" />
			        <label for="action-6"><span class="icon icon-menu"></span></label>
			        <nav>
				      <ul>
					    <li><a href="" class="color-text-white">Home</a></li>
					    <li><a href="" class="color-text-white">About us</a></li>
					    <li class="parent">
						    <a href="">Services <span class="icon icon-caret-down 
						    color-text-white"></span></a>
						   <div class="submenu">
							<a href="#">Mobile first</a>
							<a href="#">Desktop</a>
							<a href="#">Stacked grids</a>
							<a href="#">Inline grid</a>
							<a href="#">Components</a>
						   </div>
					    </li>
					    <li><a href="" class="color-text-white">Our Teams</a></li>
					    <li><a href="" class="color-text-white">Projects</a></li>
				      </ul>
			        </nav>
		        </div>
	        </div>
        </article>
        <!-- introchip body -->
        <section class="introContent">
	        <h2 class="color-text-white align-center">
	        Step into the world of CSS Technology, have fun with it, and explore
		        infinitely. Its all free
	        </h2>
	        <form class="padding-ver-lar">
		        <input type="text" name="searchterm" 
		        placeholder="Search keywords here...."
		        class="iconSearchBlack border-all-xxs border-color-wildSand" 
		        required="required">
	        </form>
        </section>
      </section>
    </section>

Style Five

This style comes with an exception of search form, but with a more pronounced call to action button.

A healthy living is an exciting one, and having it is a great opportunity money can't buy.

Join the club now

 
        <section class="introChip introBack2">
	        <!-- introchip header -->
	        <section class="introOverlay">
		        <article class="barHeader color-set-jagua">
			        <div class="barHeaderLeft">
				        <h1><a href="#link">G16</a></h1>
			        </div>
			        <div class="barHeaderRight">
				        <div class="nav-dropDown">
				            <!-- Mobile friendly -->
					        <input id="action-6" type="checkbox" hidden="hidden" />
				           <label for="action-6"><span class="icon 
                                 icon-menu"></span></label>
				           <nav>
					        <ul>
						        <li><a href="" class="color-text-white">Home</a></li>
						        <li><a href="" class="color-text-white">About us</a></li>
						        <li class="parent">
							        <a href="">Services <span class="icon icon-caret-down 
                                     color-text-white">
                                    </span></a>
							        <div class="submenu">
								        <a href="#">Mobile first</a>
								        <a href="#">Desktop</a>
								        <a href="#">Stacked grids</a>
								        <a href="#">Inline grid</a>
								        <a href="#">Components</a>
							        </div>
						        </li>
						        <li><a href="" class="color-text-white">Our Teams</a></li>
						        <li><a href="" class="color-text-white">Projects</a></li>
					        </ul>
				          </nav>
				        </div>
			        </div>
		        </article>
		        <!-- introchip body -->
		        <section class="introContent">
			        <h2 class="color-text-white align-center">
				        A healthy living is an exciting one, and having it is a 
				        great opportunity money can't buy.
			        </h2>
		   
			        <p class="align-center">
				        <a href="#" class="button color-set-alizarinCrimson 
				        medium">Join the club now</a>
			        </p>
		        </section>
	        </section>
        </section>

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.