RESPONSIVE RETINA-READY MENU FOR WEBSITE

<div class="separator" style="clear: both; text-align: center;"><br /><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><img alt="RESPONSIVE RETINA-READY MENU FOR WEBSITE" border="0" src="http://content.screencast.com/users/Sanaullahrais/folders/Snagit/media/7dd4a23f-0f13-4971-ad5f-1c7f5173b920/01.30.2015-10.05.png" title="RESPONSIVE RETINA-READY MENU FOR WEBSITE" /></div><br /><br><br /><div class="big-heading-blue"><br />RESPONSIVE RETINA-READY MENU</div><br /><div class="small-text"><br /><div style="text-align: left;"><br />Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize.</div><br /></div><br /><br /><br /><div class="big-heading"><br />View the Demo of Retina Menu</div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><img alt="RESPONSIVE RETINA-READY MENU FOR WEBSITE" border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AgS-9oGOQOMWWc3az4Pu0rmWzLSf_g9LW-Z3W7DjZD7t-j9hDvz6fDVDFnRDIqxG79d3fpAW1UXnmL_kl4prVZLLyVo7MmS-mvXwim8vUFPvp2rTK8UC_P2iuuYRgq9_D9WNXtm360Y/s1600/1.png" title="RESPONSIVE RETINA-READY MENU FOR WEBSITE" width="640" /></div><br /><br /><br /><a class="dlbtn" href="http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/" target="_blank">View Demo!</a><br /><br /><br /><div class="big-heading"><br />THE HTML OF THE MENU</div><br /><br /><br /><div class="scrollbarsDemo"><br /><nav  id="menu" class="nav"> <br /><br />    <ul><br /><br />        <li><br /><br />            <a  href="#" title=""><br /><br />                <span  class="icon"> <i aria-hidden="true"  class="icon-home"></i></span><span>Home</span><br /><br />            </a><br /><br />        </li><br /><br />        <li>     <br /><br />            <a href="#" title=""><span class="icon"> <i aria-hidden="true" class="icon-services"></i></span><span>Services</span></a> <br /><br />        </li><br /><br />        <li><br /><br />            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-portfolio"></i></span><span>Portfolio</span></a><br /><br />        </li><br /><br />        <li><br /><br />            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-blog"></i></span><span>Blog</span></a><br /><br />        </li><br /><br />        <li><br /><br />            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-team"></i></span><span>The  team</span></a>   <br /><br />        </li><br /><br />        <li><br /><br />            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-contact"></i></span><span>Contact</span></a><br /><br />        </li><br /><br />    </ul><br /><br /></nav></div><br /><br /><br /><div class="big-heading"><br />Browser Support</div><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><img border="0" height="61" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTvMmNu16on3g53YzMVDFwe5A0mhcCNymz_6LsDHVIo_j_RLsB9ogiINEy8dQxO5pvBMF6ZsFVxFaYJGrHkzO1TxbaO3bfLcFIU_LhyphenhyphenWJFVAqQ5PX_XNGF0ZxxA8BDhXEQ95NZTAqJwY/s1600/2.png" width="640" /></div><br /><br /><br /><div class="big-heading"><br />Downlaod Source Code</div><br /><br /><br /><div class="small-text"><br /><div style="text-align: center;"><br />Download the complete source code with html, CSS,and JavaScript from here.</div><br /></div><br /><br /><br /><a class="dlbtn" href="http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/ResponsiveRetinaReadyMenu.zip">Download Source!<span class="details">File Size:<span class="size">42.19 kb</span></span></a><br /><br /><br /><div class="big-heading"><br />PREPARING THE ICON FONT</div><br /><br /><br /><div class="small-text"><br /><div style="text-align: left;"><br />Creating a custom icon font might look a bit complicated, but with tools like IcoMoon it’s just a matter of creating the icons and importing them into the tool. Icon fonts behave like any font, so you can easily change the color, adapt the size and it won’t get pixelized. Perfect for retina devices without having to use multiple assets for different screen resolutions.<br />The first thing we need to do is to create the icons for the menu. I use Illustrator, but any vector graphics editor like, for example Inkscape, will do. We need to create each icon and export them as a SVG file. To make sure the icon will work properly in every browser, we have to convert all lines into full objects, and merge all the objects into one big shape for each icon. Once all have been exported into nice SVG files, we can import them all into the IcoMoon App tool:</div><br /></div><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><img border="0" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2013/05/icomoon-import.jpg" /></div><br /><br /><br /><div class="small-text"><br /><div style="text-align: left;"><br />We can also enhance our font with icons from the big library that IcoMoon offers. Once we have all the icons we need, we click on the “Font” button at the bottom of the page to enter the detailed settings. On this page we can choose the encoding settings for the font, and also choose if we want to assign some letters for each icon, or prefer to use the Private Use Area of the font to make sure screen readers won’t be able to output them. I recommend using the default settings that work pretty well.<br /></div><br /></div><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><img border="0" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2013/05/font-settings.jpg" /></div><br /><br /><br /><div class="small-text"><br /><div style="text-align: left;"><br />When we click on “Download” we get a ZIP file with 4 font formats (SVG, EOT, TTF and WOFF), the CSS styling and a demo page.<br /><br /><br />The first thing to do to be able to use the icons is to copy and paste the CSS IcoMoon provides to the top of our CSS file and make sure we also copy the font folder.<br /><br /><br />There’s also <a href="http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363" target="_blank">a little “hack” to make the fonts look nicer on Chrome Windows</a> <br /><br /><br />you might want to check it out.<br /></div><br /></div><br /><br /><br /><div class="small-text"><br /><div style="text-align: center;"><br />And that’s it, we’ve build a nice, touch-friendly and retina-ready navigation that works fine on desktop, tablet and mobile devices. Hope you liked it!</div><br /></div><br /><br />

RESPONSIVE RETINA-READY MENU FOR WEBSITE

RESPONSIVE RETINA-READY MENU Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufact...

Read more »

Stellar Phoenix Registered Windows Data Recovery Professional with keygen

<div class="thank-you"><br />Stellar Phoenix<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><img border="0" src="http://content.screencast.com/users/Sanaullahrais/folders/Snagit/media/113e93e1-6b50-4b7e-820f-512c4c962f21/01.29.2015-22.24.png" /></div><br /><br /></div><br /><div class="big-heading-blue"><br />Stellar Phoenix Windows Data Recovery</div><br /><div class="big-heading"><br />About Stellar Phoenix Software </div><br /><div class="box"><br />Now Finding Lost Data is Just a Few Clicks Away.<br /><br /><br />Fend off data loss with this immaculate Windows data recovery solution. The software comes as a rescuer in times when your precious photos, music, videos, documents, and other files get deleted accidentally or in a frenzy to free up storage.<br /><br /><br /><br /><div class="big-heading"><br />Features</div><br /><ul style="margin: 10px 0px 0px; padding: 0px; text-align: justify;"><br /><li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.stellarinfo.com/images/arrow-blue.gif); background-origin: initial; background-position: 0px 7px; background-repeat: no-repeat; background-size: initial; list-style: none; margin: 0px; padding: 0px 0px 0px 25px;">Recovers photos, videos, and other multimedia files</li><br /><li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.stellarinfo.com/images/arrow-blue.gif); background-origin: initial; background-position: 0px 7px; background-repeat: no-repeat; background-size: initial; list-style: none; margin: 0px; padding: 0px 0px 0px 25px;">Supports efficient scanning of storage space greater than 2TB</li><br /><li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.stellarinfo.com/images/arrow-blue.gif); background-origin: initial; background-position: 0px 7px; background-repeat: no-repeat; background-size: initial; list-style: none; margin: 0px; padding: 0px 0px 0px 25px;">Searches lost or deleted volumes on Windows hard drive</li><br /><li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.stellarinfo.com/images/arrow-blue.gif); background-origin: initial; background-position: 0px 7px; background-repeat: no-repeat; background-size: initial; list-style: none; margin: 0px; padding: 0px 0px 0px 25px;">Supports recovery from Windows 8/ Windows 7/ Vista / XP</li><br /><li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.stellarinfo.com/images/arrow-blue.gif); background-origin: initial; background-position: 0px 7px; background-repeat: no-repeat; background-size: initial; list-style: none; margin: 0px; padding: 0px 0px 0px 25px;">Resurrect Lost Files in a flash</li><br /><li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.stellarinfo.com/images/arrow-blue.gif); background-origin: initial; background-position: 0px 7px; background-repeat: no-repeat; background-size: initial; list-style: none; margin: 0px; padding: 0px 0px 0px 25px;">Restore once-in-a-life-time memories</li><br /><li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.stellarinfo.com/images/arrow-blue.gif); background-origin: initial; background-position: 0px 7px; background-repeat: no-repeat; background-size: initial; list-style: none; margin: 0px; padding: 0px 0px 0px 25px;">Bring back lost or deleted volumes</li><br /></ul><br /><div style="text-align: justify;"><br /><span style="font-family: Arimo, sans-serif;"><span style="font-size: 13px; line-height: 24px;"><br /></span></span></div><br /></div><br /><br /><br /><div class="big-heading-blue">Screenshots</div><br /><br><br /><div id="comslider_in_point_526872"></div><script type="text/javascript">var oCOMScript526872=document.createElement('script');oCOMScript526872.src="http://commondatastorage.googleapis.com/comslider/target/users/1422553614xa3c7f0305c9e4d822133cbb961d9b633/comslider.js?timestamp=1422553964";oCOMScript526872.type='text/javascript';document.getElementsByTagName("head").item(0).appendChild(oCOMScript526872);</script><br /><br><br /><a class="dlbtn" href="http://www.teezcom.com/softwares/Stellar-Phoenix-Windows-Data-Recovery-Professional.zip">Download Now!<span class="details">File Size:<span class="size">5.92 MB</span></span></a><br /><br /><br /><a class="dlbtn" href="http://www.teezcom.com/softwares/">Mirror Link 2<span class="details">File Size:<span class="size">5.92 MB</span></span></a>

Stellar Phoenix Registered Windows Data Recovery Professional with keygen

Stellar Phoenix Stellar Phoenix Windows Data Recovery About Stellar Phoenix Software Now Finding Lost Data is Just a Few Clicks Away. Fend o...

Read more »

Beautiful Responsive one page website template free

<div class="separator" style="clear: both; text-align: center;"><br /><img border="0" src="http://content.screencast.com/users/Sanaullahrais/folders/Snagit/media/89f99b90-94b0-4904-aa12-32ba35775e42/01.29.2015-21.37.png" /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><br /></div><br /><div class="big-heading-blue"><br />FREEBIE: “BOXIFY” ONE PAGE WEBSITE TEMPLATE</div><br /><span style="background-color: white; color: #999999; font-family: 'Open Sans', Arial, sans-serif; font-size: 18px; font-style: italic; line-height: 29.439998626709px;">A modern free HTML5/CSS3 website template with a polished look and smooth animations, carefully crafted with the latest web technologies.</span><br /><br /><br /><br /><div class="box"><br />Today we are very happy to share a beautiful and modern one page website template with you.<br />Boxify is a stylish HTML5/CSS3 template that was carefully crafted and enhanced with some smooth effects. It’s fitting for any type of portfolio or start-up website, but it’s very flexible and can be used for many other projects.<br /><br /><br /></div><br /><br /><br /><div class="big-heading-blue"><br />ABOUT THE WEBSITE TEMPLATE</div><br /><div class="small-text"><br /><div style="text-align: center;"><br /><div style="text-align: left;"><br />The responsive template is made with the freshest web technologies and it’s build with<br /><br /><ul style="background-color: white; clear: both; color: #414a51; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 18px; line-height: 29.439998626709px; list-style: square inside; margin: 0px; padding: 1em 0px;"><br /><li style="margin: 0px 0px 0px 1em; padding: 5px 0px 5px 5px;"><a href="http://getbootstrap.com/" style="color: #237dac; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">Bootstrap</a></li><br /><li style="margin: 0px 0px 0px 1em; padding: 5px 0px 5px 5px;"><a href="http://flickity.metafizzy.co/" style="color: #237dac; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">Flickity</a></li><br /><li style="margin: 0px 0px 0px 1em; padding: 5px 0px 5px 5px;"><a href="http://fancyapps.com/fancybox/" style="color: #237dac; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">fancyBox</a></li><br /><li style="margin: 0px 0px 0px 1em; padding: 5px 0px 5px 5px;"><a href="https://github.com/imakewebthings/jquery-waypoints/" style="color: #237dac; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">jQuery Waypoints</a></li><br /><li style="margin: 0px 0px 0px 1em; padding: 5px 0px 5px 5px;"><a href="http://daneden.me/animate" style="color: #237dac; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">Animate.css</a></li><br /></ul><br /></div><br /></div><br /></div><br /><div class="big-heading"><br />PREVIEW</div><br /><div class="small-text"><br /><div style="text-align: center;"><br />Have a look at the whole template design:<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><img border="0" src="http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/01/Boxify_Preview.jpg" /></div><br /><br /></div><br /></div><br /><a class="dlbtn" href="http://tympanus.net/Freebies/Boxify/" target="_blank">View Demo Boxify</a><br /><br /><br /><br /><div class="big-heading-blue"><br />DOWNLOAD THE TEMPLATE FOR FREE:</div><br /><a class="dlbtn" href="http://tympanus.net/Freebies/Boxify_PeterFinlan.zip">Download Now!<span class="details">File Size:<span class="size">3.8 MB</span></span></a><br /><br /><br /><div class="small-text"><br /><div style="text-align: center;"><br />We hope you enjoy this freebie and find it useful!</div><br /></div><br />

Beautiful Responsive one page website template free

FREEBIE: “BOXIFY” ONE PAGE WEBSITE TEMPLATE A modern free HTML5/CSS3 website template with a polished look and smooth animations, carefully ...

Read more »