How To Increase Your Blogger Followers

<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTnak1-Veiarso4Coozy1lHR-PE54IEg1UtZyOPa5VflVz6GU4tCr5T2oaFThs0siMkCwVJtKGPRzkOYDvBVYIVftY48bMUghp9q-jHhVDsmmLyhlMEyq5-mMq_6UCQ_xaC9EBPcr0M_I/s1600/followers.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTnak1-Veiarso4Coozy1lHR-PE54IEg1UtZyOPa5VflVz6GU4tCr5T2oaFThs0siMkCwVJtKGPRzkOYDvBVYIVftY48bMUghp9q-jHhVDsmmLyhlMEyq5-mMq_6UCQ_xaC9EBPcr0M_I/s320/followers.jpg" width="308" /></a></div><div style="text-align: left;">You might have seen the blogger followers list on so many blogspot blogs, you had seen the list of followers who follows the blogs which they like to go on with. some blogger users label them with followers, some labeled them as wish list or blogspot friends but i use it as <span style="font-weight: bold; margin: 0px; padding: 0px;">My Friend List</span>, i too follow the blogs which I found interesting while surfing the web. This is the genuine process in which you are not expect the other bloggers to follow you back. so never try to force the people to follow your blog, just Put the stuffs what they like to read.</div><br /><div style="text-align: left;">As you already know you can use <a href="https://support.google.com/blogger/" style="color: #ae2525; font-weight: bold; margin: 0px; padding: 0px; text-decoration: none; transition: color 0.15s linear;" target="_blank">Google Friend Connect</a> which is now an inbuilt feature in the Blogger. You can even keep track of the blogs you follow via your Reading List on the Blogger dashboard.</div><div style="text-align: left;">Now you must ask <span style="font-weight: bold; margin: 0px; padding: 0px;">How To Get Followers?</span></div><div style="text-align: left;"><span style="color: #333333; font-family: "open sans" , sans-serif; font-size: 15px; line-height: 25px;"><br /></span></div><div style="text-align: left;">Below here i have highlighted some points which need to taken care of for successful relationship with you and your followers, rather i should say best friends list.</div><div style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; text-align: left;"><br /></div><br /><ol style="background-color: white; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin: 0px 0px 0px 35px; padding: 10px 0px 20px; text-align: justify;"><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px; text-align: left;"><span style="font-weight: bold; margin: 0px; padding: 0px;">Blog Promotions</span> - Promoting your blog as you can. How you can get visitors without promoting your bog, so do promote the blog in any means.</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px; text-align: left;"><span style="font-weight: bold; margin: 0px; padding: 0px;">Provide Quality Contents</span> - Content is the king forever. Useful contents will attract your visitor to comeback over and over, and then hope your visitors turn become your follower.</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px; text-align: left;"><span style="font-weight: bold; margin: 0px; padding: 0px;">Keep Blog Up to date</span> - Updating your blog on regular base. How can you have loyal visitors without regular update? They will leave you when they see there's no up date for a long time on your blog.</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px; text-align: left;"><span style="font-weight: bold; margin: 0px; padding: 0px;">Blogger Community</span> - Blogger Community is a great place to get follower. You can have friends here and if they like your blog they will follow your blog. If you joined some blog communities, you can send them message just to say thanks for their visit :) Make your readers your friend. A friend never leave you alone, they will keep coming back to your blog.</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px; text-align: left;"><span style="font-weight: bold; margin: 0px; padding: 0px;">Communications</span> - Make communications with your visitors, you can visit them back, commenting back on their blog.</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px; text-align: left;"><span style="font-weight: bold; margin: 0px; padding: 0px;">Twitter Mania</span> - As everybody knows twitter is the highest traffic site in context of traffic. try to make followers by following them back.</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px; text-align: left;"><span style="font-weight: bold; margin: 0px; padding: 0px;">Write a Mail</span> - Believe me this is the top most working way to get followers for your blog, if you like any blog then feel free to write a mail to the site owner of the blog and request them to follow your blog, but again don't force :-).</li><li style="list-style-type: decimal; margin: 0px; padding: 0px 0px 5px; text-align: left;"><span style="font-weight: bold; margin: 0px; padding: 0px;">Don't Stop</span> - Never stops your site or blog promotion, it should be continuous process and believe me you will surely get what you want.</li></ol><div class="separator" style="clear: both; text-align: right;"><span style="background-color: white; color: #333333; font-family: "open sans" , sans-serif; font-size: 15px; line-height: 25px; text-align: justify;"></span><span style="background-color: white; color: #333333; font-family: "open sans" , sans-serif; font-size: 15px; line-height: 25px; text-align: justify;"></span><span style="background-color: white; color: #333333; font-family: "open sans" , sans-serif; font-size: 15px; line-height: 25px; text-align: justify;"></span><a href="https://www.blogger.com/null" name="more" style="background-color: white; margin: 0px; padding: 0px; text-align: justify; transition: color 0.15s linear;"></a></div><div style="text-align: left;"><span style="background-color: white; color: #333333; font-family: "open sans" , sans-serif; font-size: 15px; line-height: 25px; text-align: justify;">So, Now your turn to follow me if you like my blog, and let me know about your blog also, Best Luck to all the Readers.</span></div><div class="separator" style="clear: both; text-align: left;"><br /></div>

How To Increase Your Blogger Followers

You might have seen the blogger followers list on so many blogspot blogs, you had seen the list of followers who follows the blogs which the...

Read more »

10 CSS3 Menu

<div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">From a chosen list of css tutorials we have found some of the best css3 menu tutorials which can help you build a clean navigation by yourself. Some tutorials are old but they are well explained and use css3 styles so that you can start climbing the ladder from the basics to intermediate navigation menu design steadily. Responsive menu design is important so i have also took time to include responsive css3 menu design styles which are lately implemented on newer websites.</div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">With little patience and willingness you can learn these tutorials from the top to bottom in no time. If these are not enough then don’t worry i will include new css3 tutorials as they are found on the web. The simplicity with flat design is currently unrivaled and you can feel it right away why flat design is important in modern menu design. Minimalist menus are very easy to understand as you can see sometimes it is only necessary for the menu item to have only text with no icons. These 10 best css3 menu tutorials are more than enough to get you started and make you an expert navgiation menu developer in no time with some effort.</div><h2 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Best CSS3 Menu Tutorials</h2><div class="clear" style="background-color: white; border: 0px none; clear: both; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; margin: 0px; outline: none; padding: 0px;"></div><div class="divider" style="background: url(http://designscrazed.org/wp-content/themes/dcrazed/images/stripe.png) rgb(255, 255, 255); border: 0px none; clear: both; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; height: 10px; line-height: 19.5px; list-style: none; margin: 10px 0px 20px; outline: none; overflow: hidden; padding: 0px;"></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">CSS3 Responsive menu Tutorial</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">A tutorial which will help you design a flat navigation menu which is also responsive.</div><a class="shortc-button small black" href="http://www.script-tutorials.com/demos/335/index.html" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://www.script-tutorials.com/css3-responsive-menu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcB9pWykXwyWApfRzgnnrZvRQymVTvdyJfbmk50UP7rKSIV1NHz4P5TIp96AllO8fO6VivdN9wYa_6Z2NBuy4Ug1e3BVmfAdOE3X499wlb484QnCx-XZrbT_URzdPH8TgerGbbN7Litmg/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcB9pWykXwyWApfRzgnnrZvRQymVTvdyJfbmk50UP7rKSIV1NHz4P5TIp96AllO8fO6VivdN9wYa_6Z2NBuy4Ug1e3BVmfAdOE3X499wlb484QnCx-XZrbT_URzdPH8TgerGbbN7Litmg/s1600/1.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Facebook like menu</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">This menu is responsive as well and looks similar to the facebook menu bar. You will learn how to create a css3 menu from scratch in this tutorial along with download link for the resources.</div><a class="shortc-button small black" href="http://www.script-tutorials.com/demos/355/index2.html" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://www.script-tutorials.com/facebook-like-menu-responsive/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXi9Re2zzr8LcTSSr4Jv0hBRG3puMHyhTL8qUTUFzQJLQT96XqUgPAmWYImBKjsxtLoccVZmj2s634z2d0SoMuKuFDhZcXdtdjPg5LC7AvFFQ6XluR6GDDy8-cnNqWUEv8vIjyBv29n6E/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXi9Re2zzr8LcTSSr4Jv0hBRG3puMHyhTL8qUTUFzQJLQT96XqUgPAmWYImBKjsxtLoccVZmj2s634z2d0SoMuKuFDhZcXdtdjPg5LC7AvFFQ6XluR6GDDy8-cnNqWUEv8vIjyBv29n6E/s1600/2.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Awesome Cufonized Fly-out Menu with jQuery and CSS3</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">In this tutorial you will find out how to create a full width fly-out menu with a simple hover effect which display the menu item properties to the left in clean text.</div><a class="shortc-button small black" href="http://tympanus.net/Tutorials/CufonizedFlyOutMenu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNQkrYXmoyZIGoa1e-TG1Ek4-EmR1ZgxgMCN43wV-kXRUnHbakdpuHitXGXlT6DQLD77zR7jOWbAZ___xy2GCtmfvIOMyvh6E20M1-kbEf3nmoMx-CyMZEgjj8tVKIEXl61ibJ7rJwGc/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="472" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNQkrYXmoyZIGoa1e-TG1Ek4-EmR1ZgxgMCN43wV-kXRUnHbakdpuHitXGXlT6DQLD77zR7jOWbAZ___xy2GCtmfvIOMyvh6E20M1-kbEf3nmoMx-CyMZEgjj8tVKIEXl61ibJ7rJwGc/s1600/3.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Animated Border Menu</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.</div><a class="shortc-button small black" href="http://tympanus.net/Tutorials/AnimatedBorderMenus/index.html" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://tympanus.net/codrops/2013/09/30/animated-border-menus/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2cTdrVO7m4IZpEFeLJtp5YqgCMzBWKFANxzje7gQYunSJgbaPbepIiijIaW5RP0XzxIXl9y2wPSh2qW9s4tfuHmW2Wqlv3sI4A74IHNtuvf_dR0t2dWhF47skkQUgMvYFLkQmqSvR0w/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2cTdrVO7m4IZpEFeLJtp5YqgCMzBWKFANxzje7gQYunSJgbaPbepIiijIaW5RP0XzxIXl9y2wPSh2qW9s4tfuHmW2Wqlv3sI4A74IHNtuvf_dR0t2dWhF47skkQUgMvYFLkQmqSvR0w/s1600/4.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Google Nexus  website Menu</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">A menu similar to the Google nexus website has been redesigned with proper tutorial so that you can learn it as well.</div><a class="shortc-button small black" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihsRTZQS1guusRH9b57Fu6Jw3TM7bcKSJFlYYBR9WWb370sClgx2rsHNwtIUtVPirFMT2rSDxs1h2LWX98TssOaFopy7L7hY8hHT8yjDKigu6o79aDE9JVIhDJ0e7W_eFqsad5zj8m0iw/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihsRTZQS1guusRH9b57Fu6Jw3TM7bcKSJFlYYBR9WWb370sClgx2rsHNwtIUtVPirFMT2rSDxs1h2LWX98TssOaFopy7L7hY8hHT8yjDKigu6o79aDE9JVIhDJ0e7W_eFqsad5zj8m0iw/s1600/5.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Responsive Retina-Friendly Menu</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">A tutorial to learn to develop a beautiful metro styled menu with responsive flat design as well as retina enabled for bigger monitors.</div><a class="shortc-button small black" href="http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohOueqVx1CFjfFHt_KR7J8gZXMEgZFHkFLhjyesgKzse5bRllfBsty86T6gDZW0GjYty_aTF1tLhwyZaEav2PKdj9fLAmIFQWzN9y6MuIQqHyEV2y5DxVYeYBeYV892FApddtSF48tKo/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohOueqVx1CFjfFHt_KR7J8gZXMEgZFHkFLhjyesgKzse5bRllfBsty86T6gDZW0GjYty_aTF1tLhwyZaEav2PKdj9fLAmIFQWzN9y6MuIQqHyEV2y5DxVYeYBeYV892FApddtSF48tKo/s1600/6.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Flat Dropdown Menu Tutorial</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">This time you can take your time designing a flat dropdown menu for the navigation bar and this has been explained clearly for starters.</div><a class="shortc-button small black" href="http://cssmenumaker.com/blog/flat-dropdown-menu-tutorial" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRWPKsSyrRrJzC8yJUv9bs11zoKoQFmMbPdgNhpU1-_WJhy7yn25yPu6-mLaGsP6NDzHcnSrH5dkNIjUvOAslZUMyyhCB4oPCC7k5q4GM9J8uIVeqgMegRqFKEFEFKT_ahOAAp0VWmDTw/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRWPKsSyrRrJzC8yJUv9bs11zoKoQFmMbPdgNhpU1-_WJhy7yn25yPu6-mLaGsP6NDzHcnSrH5dkNIjUvOAslZUMyyhCB4oPCC7k5q4GM9J8uIVeqgMegRqFKEFEFKT_ahOAAp0VWmDTw/s1600/7.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">How To Create a Pure CSS Dropdown Menu</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">In this tutorial you will learn how to use some advances css selectors and add some fancy effects to build a working css menu with easy coding.</div><a class="shortc-button small black" href="http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKtKKORM-48tYQ3G_xwN4iWZYyybqYjpwyDpwKXFUtxuuwKni1b5YuvEJqK2LUG2VmAX6EEgaV37S_zCb1cPxXA3AZo0nEs6hpzWj5noVetSeva1mCtoXwIpqrDZ5aLlwzhU6QDKMZpc/s1600/8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKtKKORM-48tYQ3G_xwN4iWZYyybqYjpwyDpwKXFUtxuuwKni1b5YuvEJqK2LUG2VmAX6EEgaV37S_zCb1cPxXA3AZo0nEs6hpzWj5noVetSeva1mCtoXwIpqrDZ5aLlwzhU6QDKMZpc/s1600/8.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Colorful CSS3 Animated Navigation Menu Tutorial</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">This tutorial will teach you css3 animated menu with font awesome icons. Text can be converted to icons with font awesome elements and will learn just that from this css tutorial.</div><a class="shortc-button small black" href="http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://tutorialzine.com/2012/10/css3-dropdown-menu/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsgJ0Zcrfjjdt0dWafps9tahUQ5kMQT0UBdJRpB5JoHFTEgzC0LJL5RbjSEHrUbM1hXeWiPVMH9erGT1K6GYJei1_w1-xuePiHcLIJ4QbtfrkPouziOcreQXIseeNNilISKwCDurU5jBc/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsgJ0Zcrfjjdt0dWafps9tahUQ5kMQT0UBdJRpB5JoHFTEgzC0LJL5RbjSEHrUbM1hXeWiPVMH9erGT1K6GYJei1_w1-xuePiHcLIJ4QbtfrkPouziOcreQXIseeNNilISKwCDurU5jBc/s1600/9.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Create a Drop Down Menu with Search Box in CSS3 and HTML</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">In this tutorial, you will able to finish a flat style navigation with a search box and dropdown menu. The HTML code elements and css basic listing styles with search option can be learned from here.</div><a class="shortc-button small black" href="http://designmodo.com/demo/dropdown-menu-search/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"> | </span><a class="shortc-button small black" href="http://designmodo.com/create-drop-down-menu-search-box/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszJKur_NC64-LZRsz5GVGsEFwYb_QFp8iedk8id4lTAYAqMiNRYd6WqdazsEJY5W9ecKYR_CUi-oxAmwB0zsDnzuPyShM0ZgeBqNFCw0HXIQfzdudQ6SY6s1puWctsxN63zBuLCCu1gg/s1600/10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszJKur_NC64-LZRsz5GVGsEFwYb_QFp8iedk8id4lTAYAqMiNRYd6WqdazsEJY5W9ecKYR_CUi-oxAmwB0zsDnzuPyShM0ZgeBqNFCw0HXIQfzdudQ6SY6s1puWctsxN63zBuLCCu1gg/s1600/10.jpg" width="640" /></a></div><br /></div>

10 CSS3 Menu

From a chosen list of css tutorials we have found some of the best css3 menu tutorials which can help you build a clean navigation by yourse...

Read more »

13 Free HTML5 CSS3 Checkout Forms

<span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;">Checkout and order processing is the last part of any marketing campaign without any doubt. Since its the last part of getting a successful lead most web developers neglect the importance of having a useful checkout or order form. This may backfire and cause you lose many of the potential visitors which should have converted easily.</span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">One page checkouts are always great as the visitor gets an option to do the <strong style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">account creation to the final checkout</strong> in one go without needing an additional guided page. Its always good to keep testing the best solution for checkout to improve sales.</div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">What you find here are free <strong style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">html5 css3 and jQuery</strong> checkout forms for completing the order process. It may be always better to use below templates to speed up your own custom checkout pages. Also know that researching what is better for your website design is key to marketing success to get huge number of leads. Please share this topic with your friends and thanks for reading. Have a nice Sunday. Some related topics of interest.</div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">And make sure to download the free landing page templates i have included earlier.<br /><span style="font-family: Helvetica; font-size: 24px; line-height: 1em;"><br /></span><span style="font-family: Helvetica; font-size: 24px; line-height: 1em;">Checkout Form</span></div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">A clean and simple checkout form with credit card fields, submit button and a fancy price badge. All Credit goes to CSSFlow for this beautiful online checkout form which is built with SCSS.</div><a class="shortc-button small black" href="http://www.cssflow.com/snippets/checkout-form/demo" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;">|</span><a class="shortc-button small black" href="http://www.cssflow.com/snippets/checkout-form" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjVSmUNbVMhTumMNFcm1Jrvw0GAzgDhbyY70GcDe4a3S0WBCz0_SrMgBaIdV4pH4x_bk78iu8g12k4rErzmOdsqmg2TpirZmGCrR_6cgCJcB-w2k7HEEqno_FjGG5aXoNzGLhEtU76qo/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjVSmUNbVMhTumMNFcm1Jrvw0GAzgDhbyY70GcDe4a3S0WBCz0_SrMgBaIdV4pH4x_bk78iu8g12k4rErzmOdsqmg2TpirZmGCrR_6cgCJcB-w2k7HEEqno_FjGG5aXoNzGLhEtU76qo/s1600/1.jpg" width="640" /></a></div><br /></div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; margin: 0px; outline: none; padding: 0px;"><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Shopping Cart Checkout Widget</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">Another interesting checkout form made for sidebar as use in widgets but you an try it in multiple parts of the website. A dark shopping cart list with pixel-perfect shadows, a shiny checkout button, and glossy image overlays.</div><a class="shortc-button small black" href="http://www.cssflow.com/snippets/shopping-cart-checkout-widget/demo" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a>|<a class="shortc-button small black" href="http://www.cssflow.com/snippets/shopping-cart-checkout-widget" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil53tX-5Jn8MnveXiDWGTpSvp2NxUD5KkH9XGeup4y1Y028Ie-G6xaKjXIlNXI87EONqbS1k-GO77flMzmrmYXa5j5qLWXQWLskti_LQqfpuPfwqzOTNl92h6iEkx_6wTv8-5_5wiLSpk/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="466" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil53tX-5Jn8MnveXiDWGTpSvp2NxUD5KkH9XGeup4y1Y028Ie-G6xaKjXIlNXI87EONqbS1k-GO77flMzmrmYXa5j5qLWXQWLskti_LQqfpuPfwqzOTNl92h6iEkx_6wTv8-5_5wiLSpk/s1600/2.jpg" width="640" /></a></div><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">CSS Shopping Cart Checkout Basket Details</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">Animated checkout details in CSS. All the animations has been done with pure CSS3 transitions.  This snippet seems to work properly in Firefox and for me the hover  was not working in chrome.</div><a class="shortc-button small black" href="http://cssdeck.com/labs/css-shopping-cart-checkout-basket-details-animated" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a>|<a class="shortc-button small black" href="https://dl.dropboxusercontent.com/u/74113979/html/web/checkout_basket.zip" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vTbAYGwE9EoIQprHmkMbykUiTI_YtL69CDjDNSoYzVTLR6jNBkylXugitqA9kj0wtgdewSrhG3kR_rLP8z1bEiWyeIP4DaBzzSadJj5NPbpwwDzjMTZ6Jwxxj4O9bCs_0FW1c70ZC7k/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="374" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vTbAYGwE9EoIQprHmkMbykUiTI_YtL69CDjDNSoYzVTLR6jNBkylXugitqA9kj0wtgdewSrhG3kR_rLP8z1bEiWyeIP4DaBzzSadJj5NPbpwwDzjMTZ6Jwxxj4O9bCs_0FW1c70ZC7k/s1600/3.jpg" width="640" /></a></div><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Shopping Cart</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">A cart template suited for ecommerce websites which has large amount of orders to be processed and purchased. Uses Zepto, Mustache en Justify Grid. Products can be pulled in as JSON, but in this case hardcoded.</div><a class="shortc-button small black" href="http://codepen.io/bartveneman/full/KHxLG" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a>|<a class="shortc-button small black" href="http://codepen.io/bartveneman/pen/KHxLG" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ZIlMvXGVd4HPi_w2krxq-CRuAd9VSXdfHGdb0qC2IrwLLExyyP5dyUfqMjqpXlPMBLPf32hS6PyxwhVDjQZnOGhtjKUSbiWR0bGnOpzWTfUXFQGW6WdgWzxIe0RWOvUtzoE4Xvt8zrs/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="506" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ZIlMvXGVd4HPi_w2krxq-CRuAd9VSXdfHGdb0qC2IrwLLExyyP5dyUfqMjqpXlPMBLPf32hS6PyxwhVDjQZnOGhtjKUSbiWR0bGnOpzWTfUXFQGW6WdgWzxIe0RWOvUtzoE4Xvt8zrs/s1600/4.jpg" width="640" /></a></div><br /></div><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Accordion Checkout Styling Form</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">Basic structure for accordian style checkout with out functonality.</div><a class="shortc-button small black" href="http://codepen.io/DavieB/full/DonHl" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a>|<a class="shortc-button small black" href="https://dl.dropboxusercontent.com/u/74113979/html/web/accordion_checkout.zip" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjNFtYxMuc-gWATE15iniD7-ZA3MdG_6T2xy8Kw9CCrhcMQ55KPGYs5flqezmVyzE1d9aRl1ie1eTgGk88sj-2X2t4YIIKTlA3MS95MSmpQS-bASzlF-5C1A56N8Q-iz5al3p0CVVjk7o/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjNFtYxMuc-gWATE15iniD7-ZA3MdG_6T2xy8Kw9CCrhcMQ55KPGYs5flqezmVyzE1d9aRl1ie1eTgGk88sj-2X2t4YIIKTlA3MS95MSmpQS-bASzlF-5C1A56N8Q-iz5al3p0CVVjk7o/s1600/5.jpg" width="454" /></a></div><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Column Checkout Styling Form</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">The above form is remade with column style for easy viewing of all elements from creating an account to finalizing an order.</div><a class="shortc-button small black" href="http://codepen.io/DavieB/full/yijdn" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a> | <a class="shortc-button small black" href="https://dl.dropboxusercontent.com/u/74113979/html/web/column_checkout.zip" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXOpcnBfNYZ5MAgAdHNtxUPqybwvO-8o00ENddrIDW8lGjPgPm0jpUUqfbLzaVlS5lfsEPKr7gmb8CSvRDmVYnwLHIAGgOgQGHyCuSz7fZZTHXcIm8XT-hSBKPpESleDmvTSTRUfpEX4/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXOpcnBfNYZ5MAgAdHNtxUPqybwvO-8o00ENddrIDW8lGjPgPm0jpUUqfbLzaVlS5lfsEPKr7gmb8CSvRDmVYnwLHIAGgOgQGHyCuSz7fZZTHXcIm8XT-hSBKPpESleDmvTSTRUfpEX4/s1600/6.jpg" width="640" /></a></div><br /></div><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Responsive Shopping Cart</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">All functionality and calculations are implemented via Javascript. There are responsive breakpoints at 650px and 350px (though you can’t view the latter in Chrome because it won’t scale down below 400px).</div><a class="shortc-button small black" href="http://codepen.io/justinklemm/full/zAdoJ" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a> | <a class="shortc-button small black" href="http://codepen.io/justinklemm/pen/zAdoJ" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmtlD5cqwZCQ5TsyqJjNUaWkoGElbpPvnwyJCK7U2LqRW1rrCpj8jx-VDy1Pohiui6JwewKxBEbVG7Cnxneyoj2yWgArv026MORliSmGa1qWCXcyK7Nanmy033Z3WgVADAhGaaD0A4Ro/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmtlD5cqwZCQ5TsyqJjNUaWkoGElbpPvnwyJCK7U2LqRW1rrCpj8jx-VDy1Pohiui6JwewKxBEbVG7Cnxneyoj2yWgArv026MORliSmGa1qWCXcyK7Nanmy033Z3WgVADAhGaaD0A4Ro/s1600/7.jpg" width="600" /></a></div><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Css3 tooltip shopcart</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">A cool popup cart template which shows the checkout button on shopping button icon.</div><a class="shortc-button small black" href="http://codepen.io/usf/full/GgbEa" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a> | <a class="shortc-button small black" href="http://codepen.io/usf/pen/GgbEa" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZrxKq8FAxB6v9nUZ8G2lhitMkJjJ8L-8o8IP6okY57TzKj8Poc8_E6tAO3OINOsgp7rCgGddbUUSKc4p3ooz4nwW5aXNCGM89aipyNVLEobcYkzX3S1kSdK36LrSZgnuDTHoZzaX3Do/s1600/8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZrxKq8FAxB6v9nUZ8G2lhitMkJjJ8L-8o8IP6okY57TzKj8Poc8_E6tAO3OINOsgp7rCgGddbUUSKc4p3ooz4nwW5aXNCGM89aipyNVLEobcYkzX3S1kSdK36LrSZgnuDTHoZzaX3Do/s1600/8.jpg" width="640" /></a></div><br /></div><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Modern Shopping Checkout Form</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">A flat modern shopping template with a clean layout which will allow clients to make the payments efficiently.</div><a class="shortc-button small black" href="http://codepen.io/didharshthings/full/tCoqK" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a> | <a class="shortc-button small black" href="http://codepen.io/didharshthings/pen/tCoqK" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Ja_B-lbv8rSKzdRGyyukG0ZXjBqxQtmBQA2qy1vDHucw9BKgZrNXINvgv3w0L9hx4ToMayeEQ7iHiNzpzbCY5ISkvxiiR_-hzzTf-F4W4seiftgQEpNoMtgKNCbbe32MkwcUdTWL69E/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="624" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Ja_B-lbv8rSKzdRGyyukG0ZXjBqxQtmBQA2qy1vDHucw9BKgZrNXINvgv3w0L9hx4ToMayeEQ7iHiNzpzbCY5ISkvxiiR_-hzzTf-F4W4seiftgQEpNoMtgKNCbbe32MkwcUdTWL69E/s1600/9.jpg" width="640" /></a></div><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Cart Summary Three</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">A minimal cart design with checkout button.</div><a class="shortc-button small black" href="http://codepen.io/DavieB/full/HznGs" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a> | <a class="shortc-button small black" href="http://codepen.io/DavieB/pen/HznGs" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGffIkMlJDpSHGU_Vhi_HrsyxU5rJWoHUzmV_KJ_F3E6fR-JYDjXvKs8IIDtHuPVu14vrvds8fJUPcNk1vaHeRPlwpXZcV4BnKNcymrfVthPCmKKQKMZ1bxgSCOlij8xiNDryR9vmzUhk/s1600/10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGffIkMlJDpSHGU_Vhi_HrsyxU5rJWoHUzmV_KJ_F3E6fR-JYDjXvKs8IIDtHuPVu14vrvds8fJUPcNk1vaHeRPlwpXZcV4BnKNcymrfVthPCmKKQKMZ1bxgSCOlij8xiNDryR9vmzUhk/s1600/10.jpg" width="640" /></a></div><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Checkout</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">A simple checkout form with cool credit card payment.</div><a class="shortc-button small black" href="http://codepen.io/kennydude/full/kJDxl" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a> | <a class="shortc-button small black" href="http://codepen.io/kennydude/pen/kJDxl" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5to2P96C1FrdPkzX3oUQKG26QQ5BMWeB-Wy-OnP6YV5JYoDDj46znnMQlGl5X4AGlkfg7f8bt0YOibEGLk9s8QkLdL9I-yQ5tq_x8x3f13FeBYuxK5xzwXVDxh8utz8hwgw8givz1ORo/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5to2P96C1FrdPkzX3oUQKG26QQ5BMWeB-Wy-OnP6YV5JYoDDj46znnMQlGl5X4AGlkfg7f8bt0YOibEGLk9s8QkLdL9I-yQ5tq_x8x3f13FeBYuxK5xzwXVDxh8utz8hwgw8givz1ORo/s1600/11.jpg" width="604" /></a></div><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">FlatUI Checkout concept</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">Using the Pure grid, so this is also responsive.</div><a class="shortc-button small black" href="http://codepen.io/TimPietrusky/full/aoBDC" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a> | <a class="shortc-button small black" href="http://codepen.io/TimPietrusky/pen/aoBDC" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs3-GeK7cym_WWppzJtglIrU6NR9KiDdN0CkeG6YXL5iBkr7AYmNkSGVEJ28Cvw8FDlPvOVBTFQSLe6157fn6j-Z9OFPKSynyUGL7MnoG_7Qghql-VduxXjraI0mLOF9YRP20iXBqi-y0/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs3-GeK7cym_WWppzJtglIrU6NR9KiDdN0CkeG6YXL5iBkr7AYmNkSGVEJ28Cvw8FDlPvOVBTFQSLe6157fn6j-Z9OFPKSynyUGL7MnoG_7Qghql-VduxXjraI0mLOF9YRP20iXBqi-y0/s1600/12.png" width="640" /></a></div><br /></div><h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Responsive Shopping Cart</h3><div style="border: 0px none; list-style: none; outline: none; padding: 1em 0px;">A shopping cart template made for all kind of devices which adapt itself for better look and functionality. THis tempalte funactions with the twitter bootstrap framework for responsive layout design.</div><a class="shortc-button small black" href="http://demo.tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3/" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Demo</a> | <a class="shortc-button small black" href="http://demo.tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3/responsive-shopping-cart-layout.zip" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirioUgydFCKceNnoP0AWCme74opYM8DoDdS7Cm3dqM5tSiclFfhf21sepavIzjpWMHNAKP7k5ih5yDJ15HD7E2v8Zb2Y-fBc2ECp9zgc5swukBCmIA0X9VeUzgVWuvGTGqi0lt-QVy8yc/s1600/13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="636" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirioUgydFCKceNnoP0AWCme74opYM8DoDdS7Cm3dqM5tSiclFfhf21sepavIzjpWMHNAKP7k5ih5yDJ15HD7E2v8Zb2Y-fBc2ECp9zgc5swukBCmIA0X9VeUzgVWuvGTGqi0lt-QVy8yc/s1600/13.jpg" width="640" /></a></div><br /></div>

13 Free HTML5 CSS3 Checkout Forms

Checkout and order processing is the last part of any marketing campaign without any doubt. Since its the last part of getting a successful ...

Read more »

15 Best HTML5 CSS3 Accordion Tabs

<div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">Jquery has become very popular and by default most modern browsers allow jquery code to run on them without any issues. We can find many special effects made for html websites with the help of jquery and css. Accordion menu and tabs are very important part of a website either its business website or creative as you cant leave the accordion , tab part. Pure css accordion tabs are rare but once done with css3 alone we can see cross platform support for them. Below you will find free and premium accordion, tabs made to implement on your website. A little HTML , CSS knowledge is required to grab the free ones listed below to implement them freely on your new website. CSS, HTML, Jquery code is shown in codepen or cssdeck website you will have to manually integrate theme without much help. Premium stuff provided here will be much more straight forward with proper docs which will let you to integrate it easily on your website.</div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><span style="font-family: Helvetica; font-size: 24px; line-height: 1em;"><br /></span></div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><span style="font-family: Helvetica; font-size: 24px; line-height: 1em;">Free Simple sass/jQuery Accordion</span></div><a class="shortc-button small black" href="http://codepen.io/jonstuebe/pen/iyhej" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2GCWEJHPlvkmJAh2YBeCQhAu6Diyr-FRukAELrHkXiWyx4cf4dBJ_hC5lzyUnqCHGgj_kTdeW99nGEgl9o0-wgpV-0jGCbq6udXSD0EECf1XK8CIJ8EESJWfz0OIxqdT3JSiWDXF5D3s/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2GCWEJHPlvkmJAh2YBeCQhAu6Diyr-FRukAELrHkXiWyx4cf4dBJ_hC5lzyUnqCHGgj_kTdeW99nGEgl9o0-wgpV-0jGCbq6udXSD0EECf1XK8CIJ8EESJWfz0OIxqdT3JSiWDXF5D3s/s1600/1.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Free Pure CSS Horizontal Accordion</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">I decided to take a CSS3 approach and use elements instead of images. I have use Genericons font for the social networking icons.</div><a class="shortc-button small black" href="http://codepen.io/rrenula/pen/DGrhf" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi38NLBVGqHVwH11B4iicABxCZbElQmjnmyZc8iwNhLEyvxGLx8DSGB3bBQeGmCy1vHFiVw0N61jpVSHu7nNLmoaoT_uJ8V_j_Qu47pEdUBrpdrBDyWzJRnu0y30VETXaxwu1k_yOEwe_o/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi38NLBVGqHVwH11B4iicABxCZbElQmjnmyZc8iwNhLEyvxGLx8DSGB3bBQeGmCy1vHFiVw0N61jpVSHu7nNLmoaoT_uJ8V_j_Qu47pEdUBrpdrBDyWzJRnu0y30VETXaxwu1k_yOEwe_o/s1600/2.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">CSS Responsive Animated Accordion</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">There are some magic numbers in here – as I was animating max height to achieve the accordion effect.</div><a class="shortc-button small black" href="http://codepen.io/chriswrightdesign/pen/cmanI" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7HImRdorpBuhNJ-QPd1vmSjx-4lwYPYeK9WtXR7P5VSxgyKry7D4rvQZ3OQcroqpkgB_7OU2a-wtExF4WRDbHrpRTjuwqwqv7oBUjtsAqJiU7yJ09Pm2Dgj_BeQcnc1COS263TH6dR8/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7HImRdorpBuhNJ-QPd1vmSjx-4lwYPYeK9WtXR7P5VSxgyKry7D4rvQZ3OQcroqpkgB_7OU2a-wtExF4WRDbHrpRTjuwqwqv7oBUjtsAqJiU7yJ09Pm2Dgj_BeQcnc1COS263TH6dR8/s1600/3.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">CSS3 Multiple Accordion Menu</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">A fully functional accordion menu, using unordered lists and checkboxes, to allow users to have accordion open/closed as required.</div><a class="shortc-button small black" href="http://codepen.io/Frecosse/pen/Akwdo" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjSfr57TTADadPUU2YXB9XR1MYcm8HPCIXJnDKnOVPXGwr9TdIfqnwmMK9hXI0VXFwWTGXTNo-_UX7zz-vpXlJ3IoidGgN_lg8IYfvtSonstLn-f9a10aCDtLGIw645wbdEwHdPX8VRUA/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjSfr57TTADadPUU2YXB9XR1MYcm8HPCIXJnDKnOVPXGwr9TdIfqnwmMK9hXI0VXFwWTGXTNo-_UX7zz-vpXlJ3IoidGgN_lg8IYfvtSonstLn-f9a10aCDtLGIw645wbdEwHdPX8VRUA/s1600/4.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Simple Accordion</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">Simple dynamic accordion that can be duplicated as much as you want!</div><a class="shortc-button small black" href="http://codepen.io/agrayson/pen/aLpKB" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpknjk06ine6yzTtQAzVwzEgKL6ozcjvDnIHDv33wTxIV3MVT01ybUpsGfKmH7GqZ6f7ppwCEfkBNe9KiSUOC4t2PqUHTqW5F7bbOYfuBNZ7ofq8ORC82ilwiJqBW_j_AdL6WKdl4pJbE/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="444" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpknjk06ine6yzTtQAzVwzEgKL6ozcjvDnIHDv33wTxIV3MVT01ybUpsGfKmH7GqZ6f7ppwCEfkBNe9KiSUOC4t2PqUHTqW5F7bbOYfuBNZ7ofq8ORC82ilwiJqBW_j_AdL6WKdl4pJbE/s1600/5.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Multi-level Accordion</h3><a class="shortc-button small black" href="http://codepen.io/rbobrowski/pen/likvA" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkrcn0IczqflJdJEERqTli6mHcLeT3PRc8fo29YprSM3b3eVA74orj7Q1qr61Xd37TZAiArIcRqwOmEMucUvpZ_7ygJ6i_7Z8FaOgw3OLRAx0-fF1OoGmcsyA6xtogIuYipXS4HIve5b8/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="404" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkrcn0IczqflJdJEERqTli6mHcLeT3PRc8fo29YprSM3b3eVA74orj7Q1qr61Xd37TZAiArIcRqwOmEMucUvpZ_7ygJ6i_7Z8FaOgw3OLRAx0-fF1OoGmcsyA6xtogIuYipXS4HIve5b8/s1600/6.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Super basic accordion</h3><a class="shortc-button small black" href="http://cssdeck.com/labs/5jlzqlt6" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRv_9LJhAHsWSLEOAJS0oiXNHa8TpoYbhqzQ2iTIbOr9Kk65GcEGsozOVEBpdGx0GkT2hNk-OJIHI1znmY9KxpIJydvrfL0Lg1-6BfJ7bk6vaCxnyrwsKh0Wu-QOiQ42hYbE37xYGcNWU/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRv_9LJhAHsWSLEOAJS0oiXNHa8TpoYbhqzQ2iTIbOr9Kk65GcEGsozOVEBpdGx0GkT2hNk-OJIHI1znmY9KxpIJydvrfL0Lg1-6BfJ7bk6vaCxnyrwsKh0Wu-QOiQ42hYbE37xYGcNWU/s1600/7.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Responsive Accordion to Tabs</h3><a class="shortc-button small black" href="http://codepen.io/jacmaes/pen/miBKI" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Download</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg68ayntbzwXAcJyPTDmfCRVUmH6UMmEg9LEQIWLJ_jG6sY7vw5idnlCk9XpBypHmKTshO1xiF8ZjiXesEofns1lArW4vo6OrgOdgFtBk2q1C9-QvyeowFrZNL6ARjRb1uUXiMeYVPAAY0/s1600/8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg68ayntbzwXAcJyPTDmfCRVUmH6UMmEg9LEQIWLJ_jG6sY7vw5idnlCk9XpBypHmKTshO1xiF8ZjiXesEofns1lArW4vo6OrgOdgFtBk2q1C9-QvyeowFrZNL6ARjRb1uUXiMeYVPAAY0/s1600/8.jpg" width="640" /></a></div><br /></div><div class="clear" style="background-color: white; border: 0px none; clear: both; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; margin: 0px; outline: none; padding: 0px;"></div><div class="divider" style="background: url(http://designscrazed.org/wp-content/themes/dcrazed/images/stripe.png) rgb(255, 255, 255); border: 0px none; clear: both; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; height: 10px; line-height: 19.5px; list-style: none; margin: 10px 0px 20px; outline: none; overflow: hidden; padding: 0px;"></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Sky Tabs</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">Sky Tabs is a clean, responsive solution for creating beautiful tabbed navigation without any javascript usage.</div><a class="shortc-button small black" href="http://codecanyon.net/item/sky-tabs/5808594?ref=hdalive" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkE3BEiyzIcMeJLluSirCjfcfn_GPXWPCk8sIhwQ6tuT3pZdmkhUi4PqQ2fjdMB-UOz8mqLpvbfpqGedU9O45ZBhu-yGsEE1aJp3G0q9vquhTfCTADsghVhGVa2OD2uPb1WhAR1HmVdY/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkE3BEiyzIcMeJLluSirCjfcfn_GPXWPCk8sIhwQ6tuT3pZdmkhUi4PqQ2fjdMB-UOz8mqLpvbfpqGedU9O45ZBhu-yGsEE1aJp3G0q9vquhTfCTADsghVhGVa2OD2uPb1WhAR1HmVdY/s1600/9.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Zozo Tabs</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">Zozo Tabs is a user-friendly, fully customizable, responsive jQuery tabs plugin to take any HTML content, including images, videos and display it in a clean organised and responsive tabbed navigation.</div><a class="shortc-button small black" href="http://codecanyon.net/item/zozo-tabs/3327836?ref=hdalive" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwzkUM4Dt0yfLLPnNFOD_9tKlnPFfOqa49g5ot0fdeI35JMaCkgXXPsJYh6l-JTC490gb0gzXMfud4kNQzH5upSx5srxgLwM5Ng0NgIQDeqs5yhdqV-ZL2zKh6P6Fd8ghoxSZ5iZYEco/s1600/10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwzkUM4Dt0yfLLPnNFOD_9tKlnPFfOqa49g5ot0fdeI35JMaCkgXXPsJYh6l-JTC490gb0gzXMfud4kNQzH5upSx5srxgLwM5Ng0NgIQDeqs5yhdqV-ZL2zKh6P6Fd8ghoxSZ5iZYEco/s1600/10.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Tabbed – HTML5 & CSS3 Responsive Tabs</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">If you wish to spice up your corporate website, blog, ecommerce site or a message board, with Tabbed it’s easy to show any content, video, price or data tables, form or other elements.</div><a class="shortc-button small black" href="http://codecanyon.net/item/tabbed-html5-css3-responsive-tabs/6609747?ref=hdalive" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAODF9mGqR4XIwmNCF4A5VxB6OjOHTwtJaz60cDHIunh8MFCsykECIsviHGhhybHf3KE2nyHmZOQJxsXhTiLu5DJf68lNnz1zdIqlhn37Q_PWbiNgekg3XvM7jBe2IIiEo8wquOuYylEI/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAODF9mGqR4XIwmNCF4A5VxB6OjOHTwtJaz60cDHIunh8MFCsykECIsviHGhhybHf3KE2nyHmZOQJxsXhTiLu5DJf68lNnz1zdIqlhn37Q_PWbiNgekg3XvM7jBe2IIiEo8wquOuYylEI/s1600/11.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Pure CSS3 Tabs</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">`<a class="shortc-button small black" href="http://codecanyon.net/item/pure-css3-tabs/4519485?ref=hdalive" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a></div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7lVf6hcZkCCwi3ZPCJ_MgkAt0ar3Fa59PPYsQihpJvMUcNVICPc1y75NGaO_0PFSsSIVcBJ37dLFRdZRn6w9Wq5xFmmrIjblshWV6-xupCl7mmuyHUTLItrohKtimmUvY__TNCJnxdOg/s1600/12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7lVf6hcZkCCwi3ZPCJ_MgkAt0ar3Fa59PPYsQihpJvMUcNVICPc1y75NGaO_0PFSsSIVcBJ37dLFRdZRn6w9Wq5xFmmrIjblshWV6-xupCl7mmuyHUTLItrohKtimmUvY__TNCJnxdOg/s1600/12.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Tabion – Metro Tab Accordion Switcher CSS</h3><a class="shortc-button small black" href="http://codecanyon.net/item/tabion-metro-tab-accordion-switcher-css/4791028?ref=hdalive" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px;"></span><br /><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJqIvUGu_hUxwsW0ounhkiIEDXlOi4WqGECEf2TtYEayjS8EOfIENitxUBuFGB20r7kAUHOVzoU6KtFqiZtcFYrI4cCsa7FRx3gU0_uCOjT37nnd5PfwhZdx0yCZx8VM4-y4ozvzvC-vY/s1600/13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="438" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJqIvUGu_hUxwsW0ounhkiIEDXlOi4WqGECEf2TtYEayjS8EOfIENitxUBuFGB20r7kAUHOVzoU6KtFqiZtcFYrI4cCsa7FRx3gU0_uCOjT37nnd5PfwhZdx0yCZx8VM4-y4ozvzvC-vY/s1600/13.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">Pure CSS3 Responsive Tab</h3><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;">`<a class="shortc-button small black" href="http://codecanyon.net/item/pure-css3-responsive-tab/6593116?ref=hdalive" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a></div><div style="background-color: white; border: 0px none; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 19.5px; list-style: none; outline: none; padding: 1em 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs2wsPr7PM1QLA4S1DLnV3pfryCdDI4ulDZ5KR3iheCACXz7Q1aWT5ivhgLWcTT5bXlUeeq5gBFK_gnaLIBciOva2JQKZbtnn0h1RAm1WLaPfXw5q_i00-sQm6P21fJkG1vINjXm-7oDY/s1600/14.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs2wsPr7PM1QLA4S1DLnV3pfryCdDI4ulDZ5KR3iheCACXz7Q1aWT5ivhgLWcTT5bXlUeeq5gBFK_gnaLIBciOva2JQKZbtnn0h1RAm1WLaPfXw5q_i00-sQm6P21fJkG1vINjXm-7oDY/s1600/14.jpg" width="640" /></a></div><br /></div><h3 style="background-color: white; border: 0px none; color: #333333; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">CSS3 Flat Accordion</h3><a class="shortc-button small black" href="http://codecanyon.net/item/css3-flat-accordion/6172033?ref=hdalive" style="-webkit-transition: background 0.4s; background: -webkit-linear-gradient(top, rgb(251, 251, 251) 0px, rgb(238, 238, 238) 100%) rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 2px, rgba(255, 255, 255, 0.498039) 0px 1px 0px inset; color: #2d4fd6; display: inline-block; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; height: 25px; line-height: 25px; list-style: none; margin: 0px 5px 20px; outline: none; padding: 0px 10px; position: relative; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: background 0.4s;">Source</a><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPSQw66szlVYec_j6tbaqfoB24dMzh1JDgShFtjei7Y79hL4IrLv9VpR9CuYJQYksGghkckfyS3Bkwrk7jEU_jWx2XWX7ILRpUNUvXkkp8m6iD19OfvEZl0-kJPT2a-wtYVWLC6jW9Cc8/s1600/15.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPSQw66szlVYec_j6tbaqfoB24dMzh1JDgShFtjei7Y79hL4IrLv9VpR9CuYJQYksGghkckfyS3Bkwrk7jEU_jWx2XWX7ILRpUNUvXkkp8m6iD19OfvEZl0-kJPT2a-wtYVWLC6jW9Cc8/s1600/15.jpg" width="640" /></a></div><br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfXpasSP9FEKM6ohR5mFiMzEvYH_w42t52N-9Rg6Vns7Tf9inDD6fr5LHZOX2QIUPr4dN6qhlF-nu_P4pykkJCPPpU3QFlM7TQtYnaMari5QGoNEA6eSjNUl44864UcJB8ZYQu7RzYls/s1600/THANKS.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfXpasSP9FEKM6ohR5mFiMzEvYH_w42t52N-9Rg6Vns7Tf9inDD6fr5LHZOX2QIUPr4dN6qhlF-nu_P4pykkJCPPpU3QFlM7TQtYnaMari5QGoNEA6eSjNUl44864UcJB8ZYQu7RzYls/s1600/THANKS.gif" width="640" /></a></div>

15 Best HTML5 CSS3 Accordion Tabs

Jquery has become very popular and by default most modern browsers allow jquery code to run on them without any issues. We can find many spe...

Read more »