Bootstrap Snippet tewmp links using HTML CSS

"tewmp links"
Bootstrap 3.3.0 Snippet by rayrc

3.3.0

5.6K 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" id="tie-style-css" href="/css/style.css?ver=3.8" type="text/css" media="all"> <link rel="stylesheet" href="/css/jRating.jquery.css" type="text/css" media="all"> <link rel="stylesheet" id="Droid+Sans-css" href="http://fonts.googleapis.com/css?family=Droid+Sans%3Aregular%2C700&ver=3.8" type="text/css" media="all"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" title="Favicon"> <link href="https://plus.google.com/109300757940511126021" rel="publisher" /> <script type='text/javascript' src='/js/jquery.js?ver=1.10.2'></script> <script type='text/javascript' src='/js/tie-scripts.js'></script> <script type='text/javascript' src='/js/jquery.eislideshow.min.js'></script>      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body id="top" class="home blog"> <div class="background-cover"></div> <div class="wrapper"> <header> <div class="header-content"> <div class="logo" style="margin-top:15px"> <h2> <a title="JS Tutorial" href="/"> <img src="/images/logo.png" alt="JS Tutorial"><strong>JS Tutorial</strong> </a> </h2> </div> <nav id="main-nav" class="fixed-enabled"> <div class="main-menu"> <ul id="menu-main" class="menu"> <li class="menu-item menu-item-home "> <a href="/">Home <span class="sub-indicator"></span></a> </li> <li class="menu-item "> <a href="/category/slideshow-1">Slideshow</a> </li> <li class="menu-item "> <a href="/category/tooltip-2">Tooltip</a> </li> <li class="menu-item "> <a href="/category/autocomplete-3">Autocomplete</a> </li> <li class="menu-item current-menu-item"> <a href="/category/menu-accordion-4">Menu & Accordion</a> </li> <li class="menu-item "> <a href="/category/tabs-5">Tabs</a> </li> <li class="menu-item "> <a href="/category/scroll-6">Scroll</a> </li> <li class="menu-item "> <a href="/category/lightbox-7">Lightbox</a> </li> <li class="menu-item "> <a href="/category/date-time-8">Date & Time</a> </li> <li class="menu-item "> <a href="/category/maps-9">Maps</a> </li> <li class="menu-item "> <a href="/category/charts-10">Charts</a> </li> <li class="menu-item "> <a href="/category/drag-and-drop-11">Drag and drop</a> </li> </ul> </div> <select id="main-menu-mob"> <option value="#">Go to...</option> <option value="/"> Home </option> <option value="/category/slideshow-1"> Slideshow </option> <option value="/category/tooltip-2"> Tooltip </option> <option value="/category/autocomplete-3"> Autocomplete </option> <option value="/category/menu-accordion-4"> Menu & Accordion </option> <option value="/category/tabs-5"> Tabs </option> <option value="/category/scroll-6"> Scroll </option> <option value="/category/lightbox-7"> Lightbox </option> <option value="/category/date-time-8"> Date & Time </option> <option value="/category/maps-9"> Maps </option> <option value="/category/charts-10"> Charts </option> <option value="/category/drag-and-drop-11"> Drag and drop </option> </select> <a href="/submit-plugin" class="random-article ttip" original-title="Submit Plugin">Submit Plugin</a> </nav> </header> <div id="main-content" class="container sidebar-left"> <div class="content"> <script type='text/javascript' src='/js/tabs.min.js'></script> <script type='text/javascript' src='/js/jRating.jquery.min.js'></script> <link rel="stylesheet" href="/js/fancybox/jquery.fancybox.css" type="text/css" media="all"> <script type='text/javascript' src='/js/fancybox/jquery.fancybox.pack.js'></script> <script> jQuery(document).ready(function() { //Slide show //light box jQuery("a.iframe-popup").fancybox({ 'width' : '95%', 'height' : '100%', 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe', 'onComplete' : function() { return false; } }); //Tabs jQuery("ul.tabs-nav").tabs("> .pane"); jQuery(".post-rate").jRating({ phpPath : '/index/vote?id=1377', type:'big', // type of the rate.. can be set to 'small' or 'big' rateMax:5, length : 5, // nb of stars decimalLength : 1 // number of decimal in the rate }); }); </script> <div xmlns:v="http://rdf.data-vocabulary.org/#" id="crumbs"><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" class="crumbs-home" href="/">Home</a></span> / <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="/category/menu-accordion-4" title="View all posts in Menu & Accordion">Menu & Accordion</a></span> / <span class="current">3D Rotating Navigation</span></div> <article class="post-45 post type-post status-publish format-standard hentry category-design category-sports tag-elementum tag-maecenas tag-posuere post-listing tie_slider instock"> <div class="single-post-thumb"> <img width="660" height="330" src="/upload/images/accordion/3d-rotating-navigation/3d-rotating-navigation.jpg" class="attachment-slider" alt="3D Rotating Navigation" title="3D Rotating Navigation"> </div> <div class="post-inner"> <h1 class="name post-title entry-title" itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing"><span itemprop="name">3D Rotating Navigation</span></h1> <p class="post-meta"> <span>Dec 04, 2014</span> <span>in <a href="/category/menu-accordion-4" title="View all posts in Menu & Accordion" rel="category tag">Menu & Accordion</a></span> <span>180 views</span> </p> <div class="clear"></div> <div class="entry"> <div class="post-tabs"> <a href="http://codyhouse.co/redirect/?resource=rotating-navigation" target="_blank" rel="nofollow" class="shortc-button small orange download-btn">Download</a> <a href=" http://codyhouse.co/demo/3d-rotating-navigation/ " rel="nofollow" target="_blank" class="iframe iframe-popup">Demo</a> <ul class="tabs-nav"><li class="current">Overview</li><li class="">Documents</li></ul> <div class="pane" style="display: block;"> <div class="user-rate-wrap"> <span class="user-rating-text"><strong>User Rating: </strong> <span class="taq-score">0/5</span> <small>( <span class="taq-count">0</span> votes)</small> </span> <div class="your-rating"><span class="text"><strong>Your Rating: </strong></span><div class="post-rate" style="float:left;" data-average="0" data-id="0"></div><div class="taq-clear"></div></div> </div> <p> A <strong>3D rotating navigation</strong>, powered by CSS transformations.</p> <p> Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability standards. Another good example is mobile apps: animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.</p> <p class="source">Source: <a href="http://codyhouse.co/gem/3d-rotating-navigation/" rel="nofollow" target="_blank">codyhouse.co</a></p> </div> <div class="pane" style="display: none;"> <p> <strong>1. HTML</strong></p> <p> We created a<em> <header></em> element to wrap the logo and the trigger for the rotating navigation (<em>.cd-3d-nav-trigger</em>) and a <em><main></em> element to wrap the main content. We used an unordered list for the navigation, semantically wrapped into a <em><nav></em> element. As <em>pan.cd-marker</em> has been appended to the <em><nav></em> to create the marker for the selected item in the navigation.</p> <pre class="brush:jscript;"> <header class="cd-header"> <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a> <a href="#0" class="cd-3d-nav-trigger">Menu<span></span></a> </header> <main>  </main> <nav class="cd-3d-nav-container"> <ul class="cd-3d-nav"> <li class="cd-selected"> <a href="#0">Dashboard</a> </li>  </ul> <span class="cd-marker color-1"></span>  </nav></pre> <p> <strong>2. CSS</strong></p> <p> To realise our animation, we used <strong>CSS3 Transformations</strong> applied to the <em><header></em>,<em><main></em> and <em><navigation></em> elements.</p> <p> Here is a quick preview to show you the animation process (.gif created in After Effects).</p> <p style="text-align: center;"> <img alt="3d-nav-animation" src="http://codyhouse.co/wp-content/uploads/2014/12/3d-nav-animation.gif" /></p> <p> By default, the <em>navigation </em>(<em>.cd-3d-nav-container</em>) is hidden right above the viewport (<em>translateY(-100%)</em> and <em>visibility(hidden)</em>), while the unordered list (<em>.cd-3d-nav</em>) is rotated (<em>rotateX(90deg)</em> and<em> transform-origin: bottom center</em>). When user clicks the trigger element, the class <em>.nav-is-visible</em> is added to the <em><main></em>, <em><header></em> and<em> <nav> </em>elements which are translated of a quantity equal to the navigation height while the <em>.cd-3d-nav </em>is rotated back (<em>rotateX(0)</em>). CSS3 Transitions have been used to achieve a smooth animation.</p> <pre class="brush:jscript;"> .cd-header { transition: transform 0.5s; } .cd-header.nav-is-visible { transform: translateY(80px); } .cd-3d-nav-container { /* this is the 3D navigation container */ position: fixed; top: 0; left: 0; visibility: hidden; /* enable a 3D-space for children elements */ perspective: 1000px; transform: translateY(-100%); transition: transform 0.5s 0s, visibility 0s 0.5s; } .cd-3d-nav-container.nav-is-visible { visibility: visible; transform: translateY(0); transition: transform 0.5s 0s, visibility 0.5s 0s; } .cd-3d-nav { /* this is the 3D rotating navigation */ transform-origin: center bottom; transform: rotateX(90deg); transition: transform 0.5s; } main { transition: transform 0.5s; } main.nav-is-visible { transform: translateY(80px); }</pre> <p> The <em>.cd-marker</em> element has been used to create the marker for the selected navigation item (the <em><span></em> is the bottom line, while its <em>::before</em> pseudo-element is the triangle). In order to change the marker color, we defined the <em>.color-n</em> classes (one for each navigation item). These classes change the <em>color </em>property of the<em> .cd-marker</em>. Since we set <em>background-color : currentColor</em>, changing the <em>color </em>updates the <em>background-color </em>too. Beside, we set <em>border-bottom-color: inherit</em> for the <em>.cd-marker::before </em>element, which is also updated changing its parent <em>color </em>property.</p> <pre class="brush:jscript;"> .cd-marker { background-color: currentColor; } .cd-marker::before { /* triangle at the bottom of nav selected item */ height: 0; width: 0; border: 10px solid transparent; border-bottom-color: inherit; } /* these are the colors of the markers - line + arrow */ .color-1 { color: #9a57bd; } .color-2 { color: #c96aa4; } /* other classes here */</pre> <p> <strong>3. EVENTS HANDLING</strong></p> <p> We used jQuery to add/remove the<em> .nav-is-visible </em>class when user clicks the navigation trigger.</p> <p> Besides, when user selects one of the navigation list item, the left position of the <em>span.cd-marker</em> is changed so that it is aligned with the selected element, and the proper <em>.color-n</em> class is added (to change its background color).</p> </div> </div> </div> <div style="display:none" class="vcard author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><strong class="fn" itemprop="name"><a href="http://plus.google.com/109300757940511126021?rel=author">+Js Tutorial</a></strong></div> <div class="share-post"> <span class="share-text">Share</span> <ul> <li><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://js-tutorial.com/3d-rotating-navigation-1377" data-text="3D Rotating Navigation" data-via="http://js-tutorial.com" data-lang="en">tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li> <li><iframe src="http://www.facebook.com/plugins/like.php?href=http://js-tutorial.com/3d-rotating-navigation-1377&layout=button_count&show_faces=false&width=105&share=true&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe></li> <li style="width:80px;"><div class="g-plusone" data-size="medium" data-href="http://js-tutorial.com/3d-rotating-navigation-1377"></div> <script type="text/javascript"> (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js?publisherid=109300757940511126021"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); </script> </li> <li><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-url="http://js-tutorial.com/3d-rotating-navigation-1377" data-counter="right"></script></li> <li style="width:80px;"><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script><a href="http://pinterest.com/pin/create/button/?url=http://js-tutorial.com/3d-rotating-navigation-1377&media=/upload/images/accordion/3d-rotating-navigation/3d-rotating-navigation.jpg" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li> </ul> <div class="clear"></div> </div>  </div> </article> <p class="post-tag">Tagged with: <a href="/tag/3d+rotating+navigation" rel="tag">3d rotating navigation</a> <a href="/tag/css+transformations" rel="tag">css transformations</a> <a href="/tag/3d+rotating" rel="tag">3d rotating</a> <a href="/tag/website+navigation" rel="tag">website navigation</a> <a href="/tag/animated" rel="tag">animated</a> <a href="/tag/3d+menu" rel="tag">3d menu</a> <a href="/tag/navigation" rel="tag">navigation</a> <a href="/tag/3d+navigation+tutorial" rel="tag">3d navigation tutorial</a> <section id="related_posts"> <div class="block-head"> <h3>Related Articles</h3><div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item tie_thumb"> <div class="post-thumbnail"> <a href="/bootstrap-sub-menus-1369" title="Bootstrap Sub-Menus" rel="bookmark"> <img width="272" height="125" src="/upload/images/accordion/bootstrap-submenu/bootstrap-submenu.jpg" class="attachment-tie-medium" alt="Bootstrap Sub-Menus" title="Bootstrap Sub-Menus"> <span class="overlay-icon"></span> </a> </div> <h3><a href="/bootstrap-sub-menus-1369" title="Bootstrap Sub-Menus" rel="bookmark">Bootstrap Sub-Menus</a></h3><span class="stars-small"><span style="width:0%"></span></span> <p class="post-meta"> <span class="date"><span>Nov 25, 2014</span><span>279 views</span></span> </p> </div> <div class="related-item tie_thumb"> <div class="post-thumbnail"> <a href="/bootstrap-pagination-1365" title="Bootstrap Pagination" rel="bookmark"> <img width="272" height="125" src="/upload/images/accordion/bs-pagination/bspagination.jpg" class="attachment-tie-medium" alt="Bootstrap Pagination" title="Bootstrap Pagination"> <span class="overlay-icon"></span> </a> </div> <h3><a href="/bootstrap-pagination-1365" title="Bootstrap Pagination" rel="bookmark">Bootstrap Pagination</a></h3><span class="stars-small"><span style="width:0%"></span></span> <p class="post-meta"> <span class="date"><span>Nov 22, 2014</span><span>297 views</span></span> </p> </div> <div class="related-item tie_thumb"> <div class="post-thumbnail"> <a href="/jquery-sidebar-1404" title="jQuery Sidebar" rel="bookmark"> <img width="272" height="125" src="/upload/images/accordion/jQuery-sidebar/jquery-sidebar.jpg" class="attachment-tie-medium" alt="jQuery Sidebar" title="jQuery Sidebar"> <span class="overlay-icon"></span> </a> </div> <h3><a href="/jquery-sidebar-1404" title="jQuery Sidebar" rel="bookmark">jQuery Sidebar</a></h3><span class="stars-small"><span style="width:100%"></span></span> <p class="post-meta"> <span class="date"><span>Dec 19, 2014</span><span>225 views</span></span> </p> </div> <div class="clear"></div> </div> </section> <div id="comments"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=250734374988837"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-comments" data-href="http://js-tutorial.com/3d-rotating-navigation-1377" data-width="660" data-numposts="10" data-colorscheme="light"></div> </div> <div style="width:100%;margin-top:20px;">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6220630233539413" data-ad-slot="4346675886" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <aside id="sidebar"> <div id="login-widget-2" class="widget login-widget"><div class="widget-top"><h4>Search</h4><div class="stripe-line"></div></div> <div class="widget-container"> <div id="search-form"> <form action="/search" method="get"> <p>Search:<br/><input type="text" name="q" id="keyword" value="" size="33"></p> <p>Categories:<br/> <select name="c" class="orderby"> <option value="0">All</option> <option value="1" >Slideshow</option> <option value="2" >Tooltip</option> <option value="3" >Autocomplete</option> <option value="4" >Menu & Accordion</option> <option value="5" >Tabs</option> <option value="6" >Scroll</option> <option value="7" >Lightbox</option> <option value="8" >Date & Time</option> <option value="9" >Maps</option> <option value="10" >Charts</option> <option value="11" >Drag and drop</option> <option value="12" >Forms</option> <option value="13" >Validation</option> <option value="14" >Rating</option> <option value="15" >Captcha</option> <option value="16" >Mobile</option> <option value="17" >Media</option> <option value="18" >Social & RSS</option> <option value="19" >Text Editor</option> <option value="20" >Image editor</option> <option value="21" >File Upload</option> <option value="22" >Tables</option> <option value="23" >Layout</option> <option value="24" >Drawing & SVG</option> <option value="25" >Reader & Parser</option> <option value="26" >Game</option> <option value="27" >Animation</option> <option value="28" >Others</option> </select> </p> <input type="submit" id="submit" value="Search" class="search-button"> </form> </div> </div> </div> <div id="category-extra" class="widget"><div class="widget-top"><h4>Categories</h4><div class="stripe-line"></div></div> <div class="widget-container"> <a href="/category/slideshow-1" class="even " title="Slideshow">Slideshow<span class="count">282</span></a> <a href="/category/tooltip-2" class="odd " title="Tooltip">Tooltip<span class="count">61</span></a> <a href="/category/autocomplete-3" class="even " title="Autocomplete">Autocomplete<span class="count">24</span></a> <a href="/category/menu-accordion-4" class="odd current-menu-item" title="Menu & Accordion">Menu & Accord<span class="count">90</span></a> <a href="/category/tabs-5" class="even " title="Tabs">Tabs<span class="count">27</span></a> <a href="/category/scroll-6" class="odd " title="Scroll">Scroll<span class="count">84</span></a> <a href="/category/lightbox-7" class="even " title="Lightbox">Lightbox<span class="count">130</span></a> <a href="/category/date-time-8" class="odd " title="Date & Time">Date & Time<span class="count">58</span></a> <a href="/category/maps-9" class="even " title="Maps">Maps<span class="count">24</span></a> <a href="/category/charts-10" class="odd " title="Charts">Charts<span class="count">29</span></a> <a href="/category/drag-and-drop-11" class="even " title="Drag and drop">Drag and drop<span class="count">18</span></a> <a href="/category/forms-12" class="odd " title="Forms">Forms<span class="count">105</span></a> <a href="/category/validation-13" class="even " title="Validation">Validation<span class="count">45</span></a> <a href="/category/rating-14" class="odd " title="Rating">Rating<span class="count">10</span></a> <a href="/category/captcha-15" class="even " title="Captcha">Captcha<span class="count">8</span></a> <a href="/category/mobile-16" class="odd " title="Mobile">Mobile<span class="count">30</span></a> <a href="/category/media-17" class="even " title="Media">Media<span class="count">16</span></a> <a href="/category/social-rss-18" class="odd " title="Social & RSS">Social & RSS<span class="count">31</span></a> <a href="/category/text-editor-19" class="even " title="Text Editor">Text Editor<span class="count">29</span></a> <a href="/category/image-editor-20" class="odd " title="Image editor">Image editor<span class="count">14</span></a> <a href="/category/file-upload-21" class="even " title="File Upload">File Upload<span class="count">19</span></a> <a href="/category/tables-22" class="odd " title="Tables">Tables<span class="count">37</span></a> <a href="/category/layout-23" class="even " title="Layout">Layout<span class="count">110</span></a> <a href="/category/drawing-svg-24" class="odd " title="Drawing & SVG">Drawing & SVG<span class="count">14</span></a> <a href="/category/reader-parser-25" class="even " title="Reader & Parser">Reader & Parser<span class="count">30</span></a> <a href="/category/game-26" class="odd " title="Game">Game<span class="count">3</span></a> <a href="/category/animation-27" class="even " title="Animation">Animation<span class="count">142</span></a> <a href="/category/others-28" class="odd " title="Others">Others<span class="count">53</span></a> <div class="clear"></div> </div> </div> <div id="tags-extra" class="widget"><div class="widget-top"><h4>Tags</h4><div class="stripe-line"></div></div> <div class="widget-container"> <a href="/tag/lightbox" title="lightbox">lightbox</a> <a href="/tag/carousel" title="carousel">carousel</a> <a href="/tag/responsive+slider" title="responsive slider">responsive slider</a> <a href="/tag/modal+box" title="modal box">modal box</a> <a href="/tag/google+map" title="google map">google map</a> <a href="/tag/editor" title="editor">editor</a> <a href="/tag/photo+editor" title="photo editor">photo editor</a> <a href="/tag/wysiwyg" title="wysiwyg">wysiwyg</a> <a href="/tag/map" title="map">map</a> <a href="/tag/ajax" title="ajax">ajax</a> <a href="/tag/horizontal+scroller" title="horizontal scroller">horizontal scroller</a> <a href="/tag/vertical+scroller" title="vertical scroller">vertical scroller</a> <a href="/tag/image+slider" title="image slider">image slider</a> <a href="/tag/share+button" title="share button">share button</a> <a href="/tag/jquery+ui" title="jquery ui">jquery ui</a> <a href="/tag/dropdown" title="dropdown">dropdown</a> <a href="/tag/tutorial" title="tutorial">tutorial</a> <a href="/tag/demos" title="demos">demos</a> <a href="/tag/styled" title="styled">styled</a> <a href="/tag/infowindow" title="infowindow">infowindow</a> <a href="/tag/facebook" title="facebook">facebook</a> <a href="/tag/jquery" title="jquery">jquery</a> <a href="/tag/metro+style" title="metro style">metro style</a> <a href="/tag/datepicker" title="datepicker">datepicker</a> <a href="/tag/scrollbar" title="scrollbar">scrollbar</a> <a href="/tag/dialog" title="dialog">dialog</a> <a href="/tag/sorting" title="sorting">sorting</a> <div class="clear"></div> </div> </div>  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-6220630233539413" data-ad-slot="4765478282"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="posts-list-widget-1" class="widget posts-list"><div class="widget-top"><h4>Recent Posts</h4><div class="stripe-line"></div></div> <div class="widget-container"> <ul> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/jquery-animated-border-1434" title="jQuery Animated Border" rel="bookmark"><img alt="jQuery Animated Border" title="jQuery Animated Border" width="55" height="55" src="/upload/images/animation/animated-borders/animated-borders-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/jquery-animated-border-1434" title="jQuery Animated Border">jQuery Animated Border</a></h3> <span class="date"><span>5 views</span></span><br/> <span class="date"><span>Jan 13, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/dragon-another-draggable-plugin-for-jquery-1433" title="Dragon - Another draggable plugin for jQuery" rel="bookmark"><img alt="Dragon - Another draggable plugin for jQuery" title="Dragon - Another draggable plugin for jQuery" width="55" height="55" src="/upload/images/drag-drop/dragon/dragon-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/dragon-another-draggable-plugin-for-jquery-1433" title="Dragon - Another draggable plugin for jQuery">Dragon - Another draggable plugin for jQuery</a></h3> <span class="date"><span>9 views</span></span><br/> <span class="date"><span>Jan 13, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/circlr-animation-rotation-via-scroll-mouse-and-touch-1432" title="Circlr - Animation rotation via scroll, mouse and touch" rel="bookmark"><img alt="Circlr - Animation rotation via scroll, mouse and touch" title="Circlr - Animation rotation via scroll, mouse and touch" width="55" height="55" src="/upload/images/animation/circlr/circlr-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/circlr-animation-rotation-via-scroll-mouse-and-touch-1432" title="Circlr - Animation rotation via scroll, mouse and touch">Circlr - Animation rotation via scroll, mouse and touch</a></h3> <span class="date"><span>16 views</span></span><br/> <span class="date"><span>Jan 13, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/geometryangle-1431" title="Geometryangle" rel="bookmark"><img alt="Geometryangle" title="Geometryangle" width="55" height="55" src="/upload/images/animation/Geometryangle/geometryangle-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/geometryangle-1431" title="Geometryangle">Geometryangle</a></h3> <span class="date"><span>14 views</span></span><br/> <span class="date"><span>Jan 13, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/jrate-rating-jquery-plugin-1430" title="jRate - Rating jQuery plugin" rel="bookmark"><img alt="jRate - Rating jQuery plugin" title="jRate - Rating jQuery plugin" width="55" height="55" src="/upload/images/rating/jRate/jrate-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/jrate-rating-jquery-plugin-1430" title="jRate - Rating jQuery plugin">jRate - Rating jQuery plugin</a></h3> <span class="date"><span>61 views</span></span><br/> <span class="date"><span>Jan 12, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> </ul> <div class="clear"></div> </div> </div> <div id="posts-list-widget-2" class="widget posts-list"><div class="widget-top"><h4>Most viewed of the week </h4><div class="stripe-line"></div></div> <div class="widget-container"> <ul> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/howlerjs-modern-web-audio-javascript-library-1421" title="Howler.js - Modern Web Audio Javascript Library" rel="bookmark"><img alt="Howler.js - Modern Web Audio Javascript Library" title="Howler.js - Modern Web Audio Javascript Library" width="55" height="55" src="/upload/images/media/howler/howler-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/howlerjs-modern-web-audio-javascript-library-1421" title="Howler.js - Modern Web Audio Javascript Library">Howler.js - Modern Web Audio Javascript Library</a></h3> <span class="date"><span>145 views</span></span><br/> <span class="date"><span>Jan 06, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/snabbtjs-minimalistic-animation-library-1424" title="snabbt.js - Minimalistic animation library" rel="bookmark"><img alt="snabbt.js - Minimalistic animation library" title="snabbt.js - Minimalistic animation library" width="55" height="55" src="/upload/images/animation/snabbt/snabbt-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/snabbtjs-minimalistic-animation-library-1424" title="snabbt.js - Minimalistic animation library">snabbt.js - Minimalistic animation library</a></h3> <span class="date"><span>123 views</span></span><br/> <span class="date"><span>Jan 08, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/jquery-video-background-plugin-1425" title="jQuery Video Background plugin" rel="bookmark"><img alt="jQuery Video Background plugin" title="jQuery Video Background plugin" width="55" height="55" src="/upload/images/animation/jquery-videobackground/jquery-videobackground-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/jquery-video-background-plugin-1425" title="jQuery Video Background plugin">jQuery Video Background plugin</a></h3> <span class="date"><span>92 views</span></span><br/> <span class="date"><span>Jan 08, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/switchery-ios-7-style-switches-for-your-checkboxes-1422" title="Switchery - iOS 7 style switches for your checkboxes" rel="bookmark"><img alt="Switchery - iOS 7 style switches for your checkboxes" title="Switchery - iOS 7 style switches for your checkboxes" width="55" height="55" src="/upload/images/forms/switchery/switchery-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/switchery-ios-7-style-switches-for-your-checkboxes-1422" title="Switchery - iOS 7 style switches for your checkboxes">Switchery - iOS 7 style switches for your checkboxes</a></h3> <span class="date"><span>78 views</span></span><br/> <span class="date"><span>Jan 07, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> <li class="tie_thumb"> <div class="post-thumbnail"> <a href="/zingchart-1418" title="ZingChart" rel="bookmark"><img alt="ZingChart" title="ZingChart" width="55" height="55" src="/upload/images/chart/zingchart/zingchart-thumb.jpg" class="attachment-tie-small"><span class="overlay-icon"></span></a> </div> <h3><a href="/zingchart-1418" title="ZingChart">ZingChart</a></h3> <span class="date"><span>62 views</span></span><br/> <span class="date"><span>Jan 05, 2015</span> | <span>0 votes</span></span> <span class="stars-large"><span style="width:0%"></span></span> </li> </ul> <div class="clear"></div> </div> </div> <div id="facebook-widget-2" class="widget facebook-widget"><div class="widget-top"><h4>Find us on Facebook</h4><div class="stripe-line"></div></div> <div class="widget-container"> <div class="facebook-box"> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://facebook.com/jstutorial&width=300&height=250&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:250px;" allowtransparency="true"></iframe> </div> </div></div>     </aside> <div class="clear"></div> </div> <footer id="theme-footer"> <div id="footer-widget-area" class="footer-3c"> <div class="widget-feedburner footer-widgets-box"> <div class="footer-widget-top"><h4>Get Socials</h4></div> <div class="widget-container social-icons-widget"> <div class="social-icons icon_32"> <a class="ttip" href="https://plus.google.com/+Jstutorialcom" target="_blank" original-title="Google Plus"><img src="/images/socialicons/google_plus.png" alt="JS tutorial Google plus"/></a> <a class="ttip" href="http://www.facebook.com/jstutorial" target="_blank" original-title="Facebook"><img src="/images/socialicons/facebook.png" alt="JS tutorial facebook"/></a> <a class="ttip" href="https://twitter.com/jstutorialcom" target="_blank" original-title="Twitter"><img src="/images/socialicons/twitter.png" alt="JS tutorial twitter"/></a>  <br/><br/><br/> <a href="http://www.arvixe.com/8424-0-1-794.html" rel="nofollow" target="_blank"><img border="0" src="https://affiliates.arvixe.com/banners/234.60.hostreview.coupon.gif" width="234" height="60" alt=""></a> </div> </div> </div> <div class="widget-feedburner footer-widgets-box"> <div class="footer-widget-top"><h4>Newsletters</h4></div> <div class="widget-container"> <div class="widget-feedburner-counter widget-subscribe"> <p>Subscribe to our newsletters and be informed of new posts and other Js-tutorial events.</p> <input class="feedburner-email" type="text" name="email" value="Enter your e-mail address" onfocus="if (this.value == 'Enter your e-mail address') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your e-mail address';}"> <input class="feedburner-subscribe" type="submit" name="submit" value="Subscribe"> </div> <script type="text/javascript"> jQuery(function() { jQuery('.feedburner-subscribe[type="submit"]').click(function(){ var email = jQuery( '.feedburner-email[name="email"]' ).val(); if(email != ''){ var request = jQuery.ajax({ url: "/index/subscribe", type: "POST", data: { email : email }, dataType: "html" }); request.done(function( msg ) { $( ".widget-subscribe" ).find('span').remove(); $( ".widget-subscribe" ).append( '<span style="color:#FF8500">'+msg+'</span>' ); }); request.fail(function( jqXHR, textStatus ) { alert( "Request failed: " + textStatus ); }); } }); }); </script> </div> </div> </div> </div> <div class="clear"></div> </footer> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignright"> </div> <div class="alignleft"> <a href="#">JS Tutorial</a> ©Copyright 2014, All Rights Reserved </div> </div> </div> <div id="topcontrol"><a href="http://js-tutorial.com">Scroll To Top</a></div> </div> </body> </html>

http://blog.knoldus.com/2013/10/24/configure-turn-server-for-webrtc-on-amazon-ec2/ http://js-tutorial.com/3d-rotating-navigation-1377 http://js-tutorial.com/upload/images/accordion/3d-rotating-navigation/ https://bootstraphunter.com/smartadmin-product.php# http://js-tutorial.com/3d-rotating-navigation-1377 #glass http://192.241.236.31/themes/preview/smartadmin/1.5/ajaxversion/#ajax/dashboard.html http://dev.chromium.org/chromium-os/developer-information-for-chrome-os-devices/running-virtual-machines-on-your-chromebook <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Related: See More

Paper Dashboard 2 PRO

Paper Dashboard 2 PRO

Contact form with Social network links

Contact form with Social network links

Responsive Team Profiles with Social Links Free For Bootstrap

Responsive Team Profiles with Social Links Free For Bootstrap

Questions / Comments:

Posting GuidelinesFormatting