tag:blogger.com,1999:blog-87177320399509312222025-01-30T10:52:41.213-08:00free web design resourceseslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.comBlogger79125tag:blogger.com,1999:blog-8717732039950931222.post-42067282760217757482017-08-03T06:00:00.002-07:002017-08-03T06:00:58.874-07:00Upgrade php 5.5.9 to php 5.6 - howtoHi all,<br /> if you deployed a new droplet (digital ocean) , or EC2 (amazon). By default, it's set up with PHP 5.5.9. Now most php package requires 5.6 as minimum due to many problems in 5.5.9<br /> In this short tutorial we will guide you through upgrading php from 5.5.9 to php 5.6<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://www.activelava.net/images/logo-php56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="240" data-original-width="409" src="https://www.activelava.net/images/logo-php56.png" /></a></div> <br /> <br /> <a name='more'></a><br /> first add the php repository which contain php 5.6 and php 7<br /> <br /> <code></code><br /> <pre><code>sudo add-apt-repository ppa:ondrej/php sudo apt-get update</code></pre> <pre><code>&nbsp;</code></pre> <br /> install php5.6 and main modules<br /> <br /> <code></code><br /> <pre><code>sudo apt-get install php5.6 php5.6-mbstring php5.6-mcrypt php5.6-mysql php5.6-xml</code></pre> <pre><code>&nbsp;</code></pre> the next step is very important to make your webserver read the new php5.6 instead of the old one<br /> <br /> <code></code><br /> <pre><code>sudo a2dismod php5 sudo a2enmod php5.6 </code></pre> <br /> <br /> <br /> finally restart apache<br /> <br /> <code></code><br /> <pre><code>sudo service apache2 restart</code></pre> <pre><code>&nbsp;</code></pre> <br /> now php 5.6 should be working correctly<br /> <br /> <code></code><br /> <pre><code>php -v </code></pre> eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-59528267797310574962017-08-01T04:15:00.004-07:002017-08-01T04:15:54.321-07:00Beautifully designed pricing pages for your inspirationtoday we picked up 5 of most beautifully designed pricing pages to insipire you for your next saas project.<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmtCvDE_ceMg-v_ZPynY9DhNxsDZp06EoWyxqt0mrQ_9OynFpxsXd1rn3aXumnKePVKqsXfC8gAPvuMEveHalD171-V_rB_PSXMwoqZ15ePVjPPNTfQ7_kcQqSYSUdg6Zg7zgyZMZgX1W/s1600/circleci.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1197" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmtCvDE_ceMg-v_ZPynY9DhNxsDZp06EoWyxqt0mrQ_9OynFpxsXd1rn3aXumnKePVKqsXfC8gAPvuMEveHalD171-V_rB_PSXMwoqZ15ePVjPPNTfQ7_kcQqSYSUdg6Zg7zgyZMZgX1W/s400/circleci.png" width="400" /></a><br /><br /> enjoy our picks , and if you know another pricing page you like tell us in the comments.<br /> <br /> <b>1. Animaker</b><br /> Animaker uses coloreful page that catch your eye and in a glance you can know which plan suits you according to features and price.<br /> <br /> <a name='more'></a><br /><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMVwxbzZ1KmudsAa_BRHj07305ar2j4MpKYsWUXUGTfrIjQ8FMSeEVC35t20bxIt8_wt8cQul7cnarW03VW-7DDd7QrdMyjySSIjUk2kylFw38j-dAiPtw9oAJW8eA4B8UthSNyUQgT7-9/s1600/animaker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1135" height="432" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMVwxbzZ1KmudsAa_BRHj07305ar2j4MpKYsWUXUGTfrIjQ8FMSeEVC35t20bxIt8_wt8cQul7cnarW03VW-7DDd7QrdMyjySSIjUk2kylFw38j-dAiPtw9oAJW8eA4B8UthSNyUQgT7-9/s640/animaker.png" width="640" /></a></div> <br /> <b>2. CircleCI </b><br /> CircleCI has a different model because the pricing is based on number of containers used in your build and parallel build. so they build the pricing with flexible slider so you can choose number of container and parallel builds you want and the price will show on the right side.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmtCvDE_ceMg-v_ZPynY9DhNxsDZp06EoWyxqt0mrQ_9OynFpxsXd1rn3aXumnKePVKqsXfC8gAPvuMEveHalD171-V_rB_PSXMwoqZ15ePVjPPNTfQ7_kcQqSYSUdg6Zg7zgyZMZgX1W/s1600/circleci.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1197" height="410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmtCvDE_ceMg-v_ZPynY9DhNxsDZp06EoWyxqt0mrQ_9OynFpxsXd1rn3aXumnKePVKqsXfC8gAPvuMEveHalD171-V_rB_PSXMwoqZ15ePVjPPNTfQ7_kcQqSYSUdg6Zg7zgyZMZgX1W/s640/circleci.png" width="640" /></a></div> <br /> <b>3. CodeBeat</b><br /> what we love about codebeat is the simple pricing they are using , free plan and paid plan and the enterprise/on premise<b> </b>plan . no confusing .<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKFNwcgSb1C6VKvYQ7HC541A5g_j5ZxfticMr88ESItRqk6saJhgKv_xynYMs-YlNr3qhfoSNrZiQQHjAmYl1HVKGNxW64dkiEUYJbw2MUjfUvH5DFGgNaj61DjnfZViJ93dB5QNeNJqzg/s1600/codebeat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="612" data-original-width="1143" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKFNwcgSb1C6VKvYQ7HC541A5g_j5ZxfticMr88ESItRqk6saJhgKv_xynYMs-YlNr3qhfoSNrZiQQHjAmYl1HVKGNxW64dkiEUYJbw2MUjfUvH5DFGgNaj61DjnfZViJ93dB5QNeNJqzg/s640/codebeat.png" width="640" /></a></div> <b>4. CodeShip</b><br /> codeship in another hand splitted its pricing page into two pages. in the first page you choose the type of plan you want (basic or pro), then you see the sub-plans according to your choice.<b> </b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZVYmCEMVhDM_CLLU_WgX6tCUx9TLu27KXfZqY3nEA9x1Gm15bV3ybkItsg3-CpqyJwK7v3VS8zSVqnwDflT1_9RnbNbMjQtGbr1KH6v7ump6uXLrokbs0DDPdAry_xuW1raGj_274jvsh/s1600/codeship1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="636" data-original-width="1204" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZVYmCEMVhDM_CLLU_WgX6tCUx9TLu27KXfZqY3nEA9x1Gm15bV3ybkItsg3-CpqyJwK7v3VS8zSVqnwDflT1_9RnbNbMjQtGbr1KH6v7ump6uXLrokbs0DDPdAry_xuW1raGj_274jvsh/s640/codeship1.png" width="640" /></a></div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieoknh1waXjBSG4D_CXwtakHCliOdTdyCCv58s3GCwBo3ROakAvZjohJvRkyyFw3gbHvQQjuAli2Ltg53FMnu_ovyD0kCBZmo3JrahVmzS6rNCvvsasp88kZWKXY4UsffWxneNyhoqxRqq/s1600/codeship2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="736" data-original-width="1227" height="382" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieoknh1waXjBSG4D_CXwtakHCliOdTdyCCv58s3GCwBo3ROakAvZjohJvRkyyFw3gbHvQQjuAli2Ltg53FMnu_ovyD0kCBZmo3JrahVmzS6rNCvvsasp88kZWKXY4UsffWxneNyhoqxRqq/s640/codeship2.png" width="640" /></a></div> <br /> <b>5. Opbeat</b><br /> Opbeat is another example of beautifully designed pricing , you see 4 plans from free to enterprice , each with different color with the price in bigger size.<b> </b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUlgtPbKJEMxRhXqqIkxpAcmiaz5ZddBt0zeIfIRKiGWuJgosqOVXjwftcoKo_0vs94lx5wFX8zFZWUrRpjEfxl9PjvRLm7r1UO1BiZsodzZaMpXaSoOZNPzIbDH0Sr1xd9-IUGI8JiDb/s1600/opbeat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1122" height="438" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUlgtPbKJEMxRhXqqIkxpAcmiaz5ZddBt0zeIfIRKiGWuJgosqOVXjwftcoKo_0vs94lx5wFX8zFZWUrRpjEfxl9PjvRLm7r1UO1BiZsodzZaMpXaSoOZNPzIbDH0Sr1xd9-IUGI8JiDb/s640/opbeat.png" width="640" /></a></div> <br />eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-6974381696748247272017-07-31T11:04:00.000-07:002017-07-31T11:04:32.226-07:00top free bootsrap templates 2017Bootstrap became the most used frontend css template in all time with more than 113K stars on github.<br /> We introduce to you our picks for 2017 bootstrap themes/templates , we hope you like it.<br /> <br /> <b>1. Bell</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://bootstrapmade.com/wp-content/themefiles/Bell/800.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="711" height="640" src="https://bootstrapmade.com/wp-content/themefiles/Bell/800.png" width="568" />&nbsp;</a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> Bell is a single page Bootstrap 4 theme. Bell can be used for multipurpose website including Agency, Startup, Business, Factory, Real Estate, Construction, Finance, Consulting, Cleaning Service or any type of business website. </div> <a href="https://bootstrapmade.com/demo/Bell/" target="_blank">Demo</a> - <a href="https://bootstrapmade.com/bell-free-bootstrap-4-template/#download" target="_blank">Download</a><br /> <br /> <br /> <a name='more'></a><br /> <b>2. Rise&nbsp;</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://shapebootstrap.net/media/com_product/products/thumb/1525198/thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="800" height="480" src="https://shapebootstrap.net/media/com_product/products/thumb/1525198/thumbnail.png" width="640" /></a></div> <br /> RISE is a Modern and flat Multipurpose template.Made with bootstrap v3.3.5 ,sass and compass featuring the latest technologies.<br /> <a href="https://shapebootstrap.net/item/1525198-rise-multipurpose-html5-template/live-demo" target="_blank">Demo</a> - <a href="https://shapebootstrap.net/item/1525198-rise-multipurpose-html5-template" target="_blank">Download</a><br /> <br /> <b>3. Imperial</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://bootstrapmade.com/wp-content/themefiles/Imperial/800.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="711" height="640" src="https://bootstrapmade.com/wp-content/themefiles/Imperial/800.png" width="568" /></a></div> <br /> Imperial is a modern one page Bootstrap template for business websites, creative agencies, studios, digital design agencies or other similar businesses.<br /> <a href="https://bootstrapmade.com/demo/Imperial/" target="_blank">Demo</a> - <a href="https://bootstrapmade.com/imperial-free-onepage-bootstrap-theme/#download" target="_blank">Download </a><br /> <br /> <b>4.backyard</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://shapebootstrap.net/media/com_product/products/thumb/1524948/thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="800" height="480" src="https://shapebootstrap.net/media/com_product/products/thumb/1524948/thumbnail.png" width="640" /></a></div> <br /> Backyard is a free landing page template by Bootstrap Themes. Backyard is a beautiful high converting landing page template built with Bootstrap 3. It has 5 different header styles and 6 color variations. Well organized and comment codes so it’s very easy to customize and use in your projects. Backyard is a multipurpose landing page template that can be adapt to all your needs. You can use it for education, health, start up, web app, phone app, real estate, travel service project, etc.<br /> <a href="https://shapebootstrap.net/item/1524948-backyard-high-converting-landing-page-template/live-demo" target="_blank">Demo</a> - <a href="https://shapebootstrap.net/item/1524948-backyard-high-converting-landing-page-template" target="_blank">Download</a><br /> <b><br /></b> <b>5. techgut</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://shapebootstrap.net//media/com_product/products/thumb/1525005/thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="600" data-original-width="800" height="480" src="https://shapebootstrap.net//media/com_product/products/thumb/1525005/thumbnail.png" width="640" /></a></div> <br /> Techgut-Responsive Corporate One Page Theme for your corporate business, blog, personal portfolio, small business sites and various other services that you do using web. Techgut is featured with bootsrap 3.3.1 in core. Let's have a quick look on features that Techgut possesses: Modern &amp;amp; Elegant Design Built With HTML5 and CSS3 Bootstrap 3 in Core Fully Responsive Fresh and Clean Code Well Commented Code Working PHP Contact Form with a Simple Email Script Includes Entire Font Awesome Includes Amazing Flat Icons Cross Browser Support mmenu Offcanvas for Small Devices, Custom Sticky Menu When Scrolling Down CSS3 Animations Revolution Slider (latest version) Integrated Google Fonts Used Amazing Blog Page with Sidebar Excellent Customer Support<br /> <a href="https://shapebootstrap.net/item/1525005-techgut-responsive-corporate-one-page-theme/live-demo" target="_blank">Demo</a> - <a href="https://shapebootstrap.net/item/1525005-techgut-responsive-corporate-one-page-theme" target="_blank">Download </a><br /> <br /> <b>6. Mentor</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://bootstrapmade.com/wp-content/themefiles/Mentor/800.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="711" height="640" src="https://bootstrapmade.com/wp-content/themefiles/Mentor/800.png" width="568" /></a></div> <br /> Mentor free HTML5 website template is based on Bootstrap framework, fully responsive and retina ready. This free website template is perfect for any kind of Education, like the University, academy, Campus, School, Primary and any activities related to education. This free bootstrap template looks good on desktop and mobile devices due to its responsive design and retina graphics.<br /> <a href="https://bootstrapmade.com/demo/Mentor/" target="_blank">Demo</a> - <a href="https://bootstrapmade.com/mentor-free-education-bootstrap-theme/#download" target="_blank">Download </a><br /> <br /> <b>7. Medilab</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://bootstrapmade.com/wp-content/themefiles/Medilab/800.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="711" height="640" src="https://bootstrapmade.com/wp-content/themefiles/Medilab/800.png" width="568" /></a></div> <br /> Medilab is a clean, free, responsive bootstrap template perfect for hospital, doctors, clinic, medical, health and more. This is a fully dynamic, well structured, easy to use and beautiful free HTML5 template. This free website template developed and designed specially for Medical purposes.<br /> <br /> <a href="https://bootstrapmade.com/demo/Medilab/" target="_blank">Demo</a> - <a href="https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/#download" target="_blank">Download&nbsp;</a><br /> <br /> <b>8. moderna</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://bootstrapmade.com/wp-content/themefiles/ModernaWp/800.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="711" height="640" src="https://bootstrapmade.com/wp-content/themefiles/ModernaWp/800.png" width="568" /></a></div> <br /> Moderna is a Bootstrap 3 WordPress theme for corporate business. This theme is WordPress version of&nbsp; our existing freebie ‘Moderna HTML template‘. This theme has lot of features such as theme shortcodes, theme options panel and meta boxes, just act like premium theme!<br /> <a href="https://bootstrapmade.com/demo/ModernaWp/" target="_blank">Demo</a> - <a href="https://bootstrapmade.com/moderna-wordpress-theme-free/#download" target="_blank">Download</a><br /> <br /> <b>9. Butterfly</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://bootstrapmade.com/wp-content/themefiles/Butterfly/800.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="711" height="640" src="https://bootstrapmade.com/wp-content/themefiles/Butterfly/800.png" width="568" /></a></div> <br /> A clean onepage bootstrap theme for a business startup who would like to showcase a featured section of call to action combined with the power of portfolio elements. The template is well executed throughout to give a clean layout feel and to make your website look professional. Supported features are retina ready layout for larger displays and also support for mobile devices<br /> <a href="https://bootstrapmade.com/demo/Butterfly/" target="_blank">Demo</a> - <a href="https://bootstrapmade.com/butterfly-free-bootstrap-theme/#download" target="_blank">Download </a><br /> <br /> <b>10. Valera</b><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://bootstrapmade.com/wp-content/themefiles/Valera/800.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="711" height="640" src="https://bootstrapmade.com/wp-content/themefiles/Valera/800.png" width="568" /></a></div> <br /> Valera is an awesome bootstrap one page site template equipped with lot of modern features such as video background, minimalist slider, parallax and css3 animations.<br /> <a href="https://bootstrapmade.com/demo/Valera/" target="_blank">Demo</a> - <a href="https://bootstrapmade.com/valera-free-bootstrap-theme/#download" target="_blank">Download </a>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com1tag:blogger.com,1999:blog-8717732039950931222.post-32683484885436029932017-07-25T02:52:00.000-07:002017-07-25T02:52:25.711-07:00Feather Icons : Simply Free beautiful open source icons Hello everybody , We are back with amazing and beautiful new open source icons made by <a href="https://github.com/colebemis" target="_blank">Cole Bemis</a><br /> &nbsp; <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4ZxIwQCKm7BoSUYLb2pWmq7CfowrDZzb8KaqfQ3XNatpC2LAsuaA_bsr6pjIFdtJanYsGgDpPGE5dHSd5IOmDuwBBfMkmlnMR3U10Py4lcsYAyy7UOGpZlhwh6reWBpYUqBGZzVfSdhB/s1600/featherIcons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="651" data-original-width="940" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4ZxIwQCKm7BoSUYLb2pWmq7CfowrDZzb8KaqfQ3XNatpC2LAsuaA_bsr6pjIFdtJanYsGgDpPGE5dHSd5IOmDuwBBfMkmlnMR3U10Py4lcsYAyy7UOGpZlhwh6reWBpYUqBGZzVfSdhB/s400/featherIcons.png" width="400" />&nbsp;</a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br /> You can install the icon via NPM if you are using frontend workflow<br /> <br /> <code>npm install feather-icons</code><br /> <br /> <br /> Or just download the full package <a href="https://github.com/colebemis/feather/archive/v3.1.0.zip" target="_blank">here</a><br /> <br /> Enjoy the icons eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-35819227084564876092014-05-14T13:27:00.002-07:002014-05-14T13:27:47.049-07:00free high quality mobile phones psd mockup<h2> iPhone 5C flat mockups&nbsp;</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwms30sh-7ezE-847pDY609Fk-ZA6V1m2L69Pf6pYREr_vDoI0AZ4HR_UoUUNGCketxESmyWF7ntE3lE0NDnVgiis8dLrOkkjAgcTGRHjMprSLYzs9GvoiC-jtGqHayRvnWrOoOcAIZEU/s1600/iphone_5c.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwms30sh-7ezE-847pDY609Fk-ZA6V1m2L69Pf6pYREr_vDoI0AZ4HR_UoUUNGCketxESmyWF7ntE3lE0NDnVgiis8dLrOkkjAgcTGRHjMprSLYzs9GvoiC-jtGqHayRvnWrOoOcAIZEU/s1600/iphone_5c.jpg" height="300" width="400" /></a></div> - Free iPhone 5C flat mockup .&nbsp; PSD designed and released by <a href="https://dribbble.com/gccumber" target="_blank">Garrett Cumber.</a><br /> <br /> <a name='more'></a><br /> <h3> <b><a href="https://app.box.com/s/8wbqwza37fl5qhxyi0rh" target="_blank">Download</a>&nbsp;</b></h3> <h2> Nexus 5 PSD mockup </h2> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOf2JcccRkGhwFOjAux0qV4kXf-J3WhPfyDKa8mDZaiq__IhErusNDqpZfhwdhQyFT8T8yyNs2Jl5KyPTVVKk8-_TKfBwg_-JQ3KipDCNxeYlAfGahgaaVEwCljLqEasa-tV2Lfp6kknB1/s1600/nexus5-psd-mockup.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOf2JcccRkGhwFOjAux0qV4kXf-J3WhPfyDKa8mDZaiq__IhErusNDqpZfhwdhQyFT8T8yyNs2Jl5KyPTVVKk8-_TKfBwg_-JQ3KipDCNxeYlAfGahgaaVEwCljLqEasa-tV2Lfp6kknB1/s1600/nexus5-psd-mockup.jpg" height="300" width="400" /></a></div> <br /> - Free Nexus 5 mockup with a 3D perspective view. designed and released by <a href="https://dribbble.com/teams/Creativedash" target="_blank">Creativedash</a>.<br /> <br /> <h3> <b><a href="https://dribbble.com/shots/1535518-Nexus-5-Template/attachments/233295" target="_blank">Download </a></b></h3> <br /> <h2> Android devices mockups (Nexus, LG, Galaxy)</h2> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5i5ZiHTmr57JLgF5TzGBrEaZWhtjjxSNbiUug6L8SDPcr_iN1ElVAl6snlrWzc6jYj4NeSSY-AL7DJu5U8vS9lTZKF3lqVPd5-aUTk5HcyL2n7f2mszqHckUxtf-ro7DSwe8YnjEFtW0y/s1600/4-android-psd-mockups.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5i5ZiHTmr57JLgF5TzGBrEaZWhtjjxSNbiUug6L8SDPcr_iN1ElVAl6snlrWzc6jYj4NeSSY-AL7DJu5U8vS9lTZKF3lqVPd5-aUTk5HcyL2n7f2mszqHckUxtf-ro7DSwe8YnjEFtW0y/s1600/4-android-psd-mockups.jpg" height="270" width="400" /></a></div> <br /> <br /> - Free 4 Android devices mockups with subtle shadows and glass reflections created with vector shapes by <a href="https://dribbble.com/FFra" target="_blank">Fritz Franke</a>.<br /> <br /> <h2> &nbsp;</h2> <h3> <a href="http://freebiesbug.com/download/Fullscreen_Devices.zip" target="_blank"><b>Download</b></a></h3> <h3> <b>&nbsp;</b></h3> <h2> Samsung Note 3 PSD mockup</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjiTRcCh4EtVlh_BgDUfxq1kDPEOnOBiKwQslpbVm5c1B9vgcXRuslqsUS_fAMCaX9zFPyyiS-wPC0ekuiSqTDRBaL3WlsMaHJdcH8z3o3Wu520K8pMTL4bUBjQWF5KbSVEa8Rm9wKmrms/s1600/samsung-note-psd-mockup.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjiTRcCh4EtVlh_BgDUfxq1kDPEOnOBiKwQslpbVm5c1B9vgcXRuslqsUS_fAMCaX9zFPyyiS-wPC0ekuiSqTDRBaL3WlsMaHJdcH8z3o3Wu520K8pMTL4bUBjQWF5KbSVEa8Rm9wKmrms/s1600/samsung-note-psd-mockup.jpg" height="262" width="400" /></a></div> <br /> <br /> - Free Samsung Note 3 vector shaped mockup. Free PSD designed and released by <a href="https://dribbble.com/thislooksgreat" target="_blank">Barin Cristian</a>.<br /> <h3> <a href="http://thislooksgreat.net/freebie-psd-samsung-note-3/" target="_blank"><b>Download</b></a></h3> eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-85491765067062499772014-05-13T02:10:00.001-07:002014-05-13T13:04:40.890-07:00Free Small Icons Set - 60 Icons ( PNG, SVG, PSD )today's icon set is extremely easy to use and will most probably be the next&nbsp; resource for any of your design projects<br /> <br /> The set was created and designed by<a href="http://dribbble.com/gimpo" target="_blank"> Nick Frost</a> and <a href="http://dribbble.com/LoonyVoyager" target="_blank">Greg Lapin </a><br /> and brought to us by <a href="http://www.smashingmagazine.com/">smashingmagazine</a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdEH_jQFW1dzIulnJ3A0Aw7Fjsrg4JjwQQULOQMJmBMEGVw4Hx3YhYb0_ALmSno8QwRET9VUN8zFjo8BA47pJwmwFMNTivpfPiXcJ9WkEL3XJbpJM7eMZdKwGDNfiZp8bbj8_idDadK8NF/s1600/release-image-500-opt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdEH_jQFW1dzIulnJ3A0Aw7Fjsrg4JjwQQULOQMJmBMEGVw4Hx3YhYb0_ALmSno8QwRET9VUN8zFjo8BA47pJwmwFMNTivpfPiXcJ9WkEL3XJbpJM7eMZdKwGDNfiZp8bbj8_idDadK8NF/s1600/release-image-500-opt.png" height="288" width="400" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br /> <a name='more'></a><br /> The freebie includes 36 icons drawn from a full commercial set available on Smallicons, plus 18 icons designed exclusively for Smashing Magazine.<br /> <br /> Here’s what you’ll get:<br /> <br /> &nbsp;&nbsp; --&nbsp; PSD file with 32- and 64-pixel versions;<br /> &nbsp;&nbsp; --&nbsp; Ready-to-use PNG files in 32- and 64-pixel versions (@2x sizes are also included with both versions, for making Retina-ready apps and interfaces);<br /> &nbsp; -- &nbsp; SVG vector source files;<br /> &nbsp; -- &nbsp; Photoshop swatches files.<br /> <br /> <h3> <b><a href="http://provide.smashingmagazine.com/smashing-freebie-smallicons-icon-set.zip" target="_blank">Download</a></b></h3> <br />eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-81088010353667252132014-05-12T14:28:00.001-07:002014-05-12T14:29:50.660-07:00Top 5 free mocking and wireframing tools <br /> All of us needs a mocking tool for fast prototyping and to show the client what's our vision is<br /> here is top 10 free wireframing and mocking tools for your next web design project<br /> good luck bros<br /> <br /> <a href="http://www.lumzy.com/" target="_blank"><br /></a> <a href="http://www.lumzy.com/" target="_blank">1- Lumzy</a><br /> From creating a prototype, to sending it to clients, everything is seamless. In fact, Lumzy doesn't have a file extension, so your client need not bother downloading a player to open any prototype files. A link is all they need.<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/01/wireframe_01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/01/wireframe_01.jpg" height="180" width="400" /></a></div> <br /> <a href="http://mockupbuilder.com/" target="_blank">2-&nbsp; Mocking Builder</a><br /> Mocking Builder is a prototyping solution that helps design software or websites while reducing the time and cost spent on the negotiation stage. Identify your requirements and get the job done right!<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/02/wireframe_a.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/02/wireframe_a.jpg" height="181" width="400" /></a></div> <br /> <br /> <a name='more'></a><br /> <br /> <a href="http://appery.io/" target="_blank">3- Appery</a><br /> <br /> The only cloud-based platform with visual development tools and integrated backend services<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://tctechcrunch2011.files.wordpress.com/2013/04/selection_139.png?w=1024&amp;h=494" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://tctechcrunch2011.files.wordpress.com/2013/04/selection_139.png?w=1024&amp;h=494" height="191" width="400" /></a></div> <br /> <a href="http://framebox.org/" target="_blank">4- Framebox</a><br /> You can drag and drop, re-size and copy/paste the UI elements, it allows you to create your mockup/prototype very, very quickly by using its very easy to use drag and drop interface<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/01/wireframe_05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/01/wireframe_05.jpg" height="191" width="400" /></a></div> <br /> <a href="http://pencil.evolus.vn/Default.html" target="_blank">5- Pencil Project</a><br /> Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://pencil.evolus.vn/images/home-ss.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://pencil.evolus.vn/images/home-ss.jpg" height="255" width="400" /></a></div> <br /> that's all folks<br /> see you next posteslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com2tag:blogger.com,1999:blog-8717732039950931222.post-90972497553469422602013-09-26T02:37:00.000-07:002013-09-26T02:37:54.987-07:00Top 10 free tools for designers and frontend developersbelow is top 10 free tools to help designers and frontend developers to get the job done quick<br /> <br /> <a href="http://getbootstrap.com/" target="_blank">1: Bootstrap</a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaiNi7Gfb_6cOovrx429IKJSZgB_Ave2KpL5dygNDjgdVWYl52KS_f8fUUk-xZiz9oNBJ0k402GKmNdhNnhE86e5v2GBTwCogeyrfgo5cajUXV96iipTgQO6EQvU5VASN_sWlSNGA8oQe/s1600/twitter-bootstrap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaiNi7Gfb_6cOovrx429IKJSZgB_Ave2KpL5dygNDjgdVWYl52KS_f8fUUk-xZiz9oNBJ0k402GKmNdhNnhE86e5v2GBTwCogeyrfgo5cajUXV96iipTgQO6EQvU5VASN_sWlSNGA8oQe/s1600/twitter-bootstrap.jpg" /></a></div> <br /> twitter bootstrap is awesome css framework with a lot of features it designed to be mobile first framework with powerful and flexible grid system , i highly recomment it<br /> <br /> <a href="http://mockflow.com/" target="_blank">2: Mockflow</a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://mockflow.com/samples/website1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="http://mockflow.com/samples/website1.jpg" width="400" /></a></div> <br /> mockflow is a cool wireframing tool you can sketch your design first to make sure it good and ui - ux perfect then you jumb to your photoshop :) the website has a free plan and also paid planes<br /> <br /> <a name='more'></a><br /><br /> <br /> <a href="http://cssdeck.com/" target="_blank">3: CSS Deck</a><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZK2TJRPFSpSQs4mGzdjlhYik9wBEhq1P8xraaBdd0uz90Az9z8AhdgswD8pGD0Ujfm936IiNOYST37r5hnY7doTRZch-PsX0jweYpXbdAfIb-en_AXT7EqZLCs6CFNDceWw5V4qVEDBi9/s1600/css-deck-1024x493.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZK2TJRPFSpSQs4mGzdjlhYik9wBEhq1P8xraaBdd0uz90Az9z8AhdgswD8pGD0Ujfm936IiNOYST37r5hnY7doTRZch-PsX0jweYpXbdAfIb-en_AXT7EqZLCs6CFNDceWw5V4qVEDBi9/s400/css-deck-1024x493.png" width="400" /></a></div> <br /> css deck is real tool for editing the css on the fly with awesome library that you can choose and modify<br /> <br /> <a href="http://jsfiddle.net/" target="_blank">4: JSFiddle</a><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGdAEqnrjEYUdQ1m6tRcPOWuUvbaVO73W839D-9KjaTlKfBSncVpvc-4grIZz4xp4fnwptWmfLqXAUqXd7hvvBPaziEmvh7MqY42XeKe7obfQJss1ZbxQwBb2UAaA5SkyKoXTLtTRqxes/s1600/jsfiddle.home_.screen2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGdAEqnrjEYUdQ1m6tRcPOWuUvbaVO73W839D-9KjaTlKfBSncVpvc-4grIZz4xp4fnwptWmfLqXAUqXd7hvvBPaziEmvh7MqY42XeKe7obfQJss1ZbxQwBb2UAaA5SkyKoXTLtTRqxes/s1600/jsfiddle.home_.screen2.png" /></a></div> js fiddle is a javascript playground that you can add modify js codes on the fly , you can load any library you want and try your javascript code before use it<br /> <br /> <a href="http://www.google.com/fonts" target="_blank">5: Google Webfonts</a><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/2hL87a99Iq_CPK0ySQO0_8FhRPv7unLt0StNguEPjlUIW7BjFy3DqukpW10dpFQJZt1wj5fNd92eo6GuwLikP1Ir4pHbn33JJfrsPbiZg0ck5zgO0fQ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="http://2.bp.blogspot.com/2hL87a99Iq_CPK0ySQO0_8FhRPv7unLt0StNguEPjlUIW7BjFy3DqukpW10dpFQJZt1wj5fNd92eo6GuwLikP1Ir4pHbn33JJfrsPbiZg0ck5zgO0fQ" width="400" /></a></div> <br /> google web fonts library with easy to use webfonts in your project it simple as you choose the font put google link for that font in your page and you are done :)<br /> <br /> <a href="http://cdnjs.com/" target="_blank">6: Cdnjs</a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtSVY5TuTAfDKPh3Ya5O44nayk2u09Eqtlie2FE_nU2YhdWi_wWodUaTP85pE2gxGjVq8T7bFDXfVfXGgiNMudGmItnajRhkU5CaKchUolW0F2EN7qVbFwHaqY5bTdcr5yD6iwCetH3Rz/s1600/cdnjs_faster_than_google_microsoft_javascript_cdns.jpg.scaled500.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtSVY5TuTAfDKPh3Ya5O44nayk2u09Eqtlie2FE_nU2YhdWi_wWodUaTP85pE2gxGjVq8T7bFDXfVfXGgiNMudGmItnajRhkU5CaKchUolW0F2EN7qVbFwHaqY5bTdcr5yD6iwCetH3Rz/s400/cdnjs_faster_than_google_microsoft_javascript_cdns.jpg.scaled500.jpg" width="400" /></a></div> <br /> cloudflare company started cdnjs as a cdn for all js library not just the famous one like jquery and backbone but all and you can add your js lib by forking their repo in github , so you can use it with your next web project to load js faster and as they say they 50% faster that Google CDN and 4x as fast as Microsoft CDN<br /> <br /> <a href="http://www.psdgraphics.com/" target="_blank">7: PSD Graphics</a><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2013/09/hand-truck-icon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://www.psdgraphics.com/wp-content/uploads/2013/09/hand-truck-icon.jpg" width="400" /></a></div> <br /> PSD Graphics is a cool website for free psd's with high resolution and direct links to the free :)<br /> <br /> <a href="http://www.templatemo.com/" target="_blank">8: Templatemo</a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://desizntech.info/wp-content/uploads/2009/06/04_templatemo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="273" src="http://desizntech.info/wp-content/uploads/2009/06/04_templatemo.jpg" width="400" /></a></div> nice website with cool free css template , not all the template are good but you can find ideas from it<br /> <br /> <a href="http://refresh-sf.com/yui/" target="_blank">9: YUI compressor</a><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://freelancecrunch.com/wp-content/uploads/2012/02/YUI-Compressor-by-Yahoo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="http://freelancecrunch.com/wp-content/uploads/2012/02/YUI-Compressor-by-Yahoo.jpg" width="400" /></a></div> one useful thing that you compress your javascript and css to make your website load fast , and one of the best tools for that is the YUI Compressor very good compressor you can use<br /> <br /> <a href="http://www.jshint.com/" target="_blank">10: JSHint</a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.jshint.com/src/img/jshint-blue.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.jshint.com/src/img/jshint-blue.png" /></a></div> <br /> JSHint is a tool that helps you to detect errors and potential problems in your JavaScript code , very good tool<br /> <br /> <br /> that's it<br /> have fund and enjoy :)<br /> <br />eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com4tag:blogger.com,1999:blog-8717732039950931222.post-88742122365718134392013-09-18T02:01:00.001-07:002013-09-18T02:01:39.617-07:00Free ecommerce icons 33 PNG icons + PS + AIHey all<br /> another freebie for you guys its from smashing magazine this time its a 33 ecommerce icons in a png and photoshop psd included also the Illustrator ai file with different sizes&nbsp;32 × 32, 64 × 64, 128 × 128 and 256 × 256 pixels<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://media.smashingmagazine.com/wp-content/uploads/2013/09/post-image_mini.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://media.smashingmagazine.com/wp-content/uploads/2013/09/post-image_mini.png" width="400" /></a></div> <br /> it&nbsp;suit your mobile application too :)<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://media.smashingmagazine.com/wp-content/uploads/2013/09/iphone_mini.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://media.smashingmagazine.com/wp-content/uploads/2013/09/iphone_mini.png" width="302" /></a></div> download it its a free<br /> <br /> <a name='more'></a><br /><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://media.smashingmagazine.com/wp-content/uploads/2013/09/icons_all_500_mini.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://media.smashingmagazine.com/wp-content/uploads/2013/09/icons_all_500_mini.png" width="263" /></a></div> <a href="http://media.smashingmagazine.com/wp-content/uploads/2013/09/icons_all_mini.png" target="_blank">Preview </a>- <a href="http://provide.smashingmagazine.com/Freebies/e-commerce%20icons-freebie.zip" target="_blank">Download</a><br /> <br /> have fun and enjoy :)eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-81732656307353311602013-09-17T01:35:00.002-07:002013-09-17T01:36:44.307-07:00Flat UI - free web UI + PSD & HTML<span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px;">Flat UI Free – PSD&amp;HTML User Interface Kit</span><span style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px;"><br /></span><br /> <span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px;">Hey Guys i know that i am not here all the time , but i will try to post at least a post a day so keep tuning</span><br /> <span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px;">today i give you a freebie , an awesome Flat UI Kit you can use it on your next web project , it includes a free PSD and free icons its from the awesome Designmodo guys</span><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://designmodo.com/wp-content/uploads/2013/03/small-preview.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://designmodo.com/wp-content/uploads/2013/03/small-preview.jpg" /></a></div> <span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px;"><br /></span> <span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px;"><a href="http://designmodo.github.com/Flat-UI/" target="_blank">Demo </a>- <a href="http://designmodo.com/flat-free/" rel="nofollow" target="_blank">Download</a></span><br /> <span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px;"><br /></span> <span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px;">Flat UI package includes :-</span><br /> <br /> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- PSD files</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Layered (Shapes)</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Retina Ready</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Color swatches</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Glyphs – svg format</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Free font used – Lato</li> <br /> and<br /> Flat UI html based on Twitter Bootstrap<br /> <br /> HTML version of Flat UI includes :-<br /> <br /> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Twitter Bootstrap Framework based</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Retina Ready Images and Icons</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Custom form components</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Sleek CSS3 effects</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- &nbsp;OOCSS approach</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- Easy configurable color scheme</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">&nbsp;- New web-font and new web-font icons</li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;"><br /></li> <li style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; list-style: none; margin: 0px; padding: 0px;">happy design , enjoy :)</li> <br /> <br />eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com2tag:blogger.com,1999:blog-8717732039950931222.post-27402893683492482412012-12-19T02:09:00.001-08:002012-12-19T02:09:24.812-08:00free youtube background layout to use on your channelthese is a free youtube channel background layout to use for free<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSLHg36Bfv9SrYgGhyphenhyphenuqO0-c9um7fobL67EvSb5zAIFFgYQb3j2PqLuOfeRe6gxScXVYje7P2DS_37foJ7jgIBQCsH2ZOfCaFbTaFOyqK6hYAaUDLIY24lAfBIs40nNpwdCH06Akucruy-/s1600/youtube_layouts_free_for_use_by_demeters-d2xzf3t.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSLHg36Bfv9SrYgGhyphenhyphenuqO0-c9um7fobL67EvSb5zAIFFgYQb3j2PqLuOfeRe6gxScXVYje7P2DS_37foJ7jgIBQCsH2ZOfCaFbTaFOyqK6hYAaUDLIY24lAfBIs40nNpwdCH06Akucruy-/s320/youtube_layouts_free_for_use_by_demeters-d2xzf3t.jpg" width="261" /></a></div> <br /> <br /> <br /> <br /> credits goes to <a href="http://demeters.deviantart.com/" target="_blank">Demeters</a><br /> eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-87763519187223068832012-12-19T01:59:00.000-08:002012-12-19T01:59:13.663-08:00image photo scroller slider for your mobile web application<br /> my co-worker&nbsp; was developing a mobile web version for&nbsp; the company website and we searched alot for an image slider optimized for mobile phone and touch events<br /> and here is the <span class="short_text" id="result_box" lang="en"><span class="">revised list for what we have found</span></span><br /> <span class="short_text" id="result_box" lang="en"><span class="">have fun with programming</span></span><br /> <span class="short_text" id="result_box" lang="en"><span class=""><br /></span></span> <span class="short_text" id="result_box" lang="en"><span class=""><a href="http://www.sequencejs.com/" target="_blank">Sequence JS</a></span></span><br /> <div class="separator" style="clear: both; text-align: left;"> <a href="http://www.sequencejs.com/images/tn-theme-msi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="http://www.sequencejs.com/images/tn-theme-msi.jpg" width="320" /></a></div> <span class="short_text" id="result_box" lang="en"><span class=""><br /></span></span> <span class="short_text" id="result_box" lang="en"><span class="">sequence is a creative content slider , its not really for mobile but it uses css3 and responsive design techniques so it will display correctly in tablets and big screen mobile , it will display in other mobiles but it will not be effective</span></span><br /> <br /> <span class="short_text" id="result_box" lang="en"><span class=""></span></span><br /> <a name='more'></a><span class="short_text" id="result_box" lang="en"><span class="">&nbsp;</span></span><br /> <span class="short_text" id="result_box" lang="en"><span class=""></span></span><br /> <span class="short_text" id="result_box" lang="en"><span class=""></span></span><br /> <span class="short_text" id="result_box" lang="en"><span class=""><br /></span></span> <span class="short_text" id="result_box" lang="en"><span class=""><a href="http://swipejs.com/" target="_blank">Swipe JS</a></span></span><br /> <span class="short_text" id="result_box" lang="en"><span class=""><br /></span></span> <span class="short_text" id="result_box" lang="en"><span class=""></span></span><br /> <div class="separator" style="clear: both; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0kQAfhPJO8rZvUjbYaw20SQXKYge-B3ifn_nKMY1d-G-47NuWtCxLmvmKjlO2VU7z8F5w4Nd05If1OXeMGxv8OuanhdtPCHgGHZf0vTc8z6ga8ES9PaPM_OptIoAhd3m9pyqeJCHp38U/s1600/swipe.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0kQAfhPJO8rZvUjbYaw20SQXKYge-B3ifn_nKMY1d-G-47NuWtCxLmvmKjlO2VU7z8F5w4Nd05If1OXeMGxv8OuanhdtPCHgGHZf0vTc8z6ga8ES9PaPM_OptIoAhd3m9pyqeJCHp38U/s320/swipe.jpg" width="320" /></a></div> <span class="short_text" id="result_box" lang="en"><span class=""><br /></span></span> <span class="short_text" id="result_box" lang="en"><span class=""></span></span><br /> <span class="short_text" id="result_box" lang="en"><span class=""><br /></span></span> <span class="short_text" id="result_box" lang="en"><span class=""></span></span><br /> <span class="short_text" id="result_box" lang="en"><span class="">really good and simple plugin to scroll image or scroll content optimized for touch events , we used swipe js for our project and we tested it on both iphone and android</span></span> <span class="short_text" id="result_box" lang="en"><span class=""></span></span><br /> <span class="short_text" id="result_box" lang="en"><span class=""><br /></span></span> <span class="short_text" id="result_box" lang="en"><span class=""><a href="http://www.digicrafts.com.hk/components/JSMobilePhotoAlbum" target="_blank">JSMobilePhotoAlbum</a></span></span><br /> <span class="short_text" id="result_box" lang="en"><span class=""><br /></span></span> <div class="separator" style="clear: both; text-align: left;"> <a href="http://www.digicrafts.com.hk/components/assets/product/js/mobilephotoalbum/preview.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="http://www.digicrafts.com.hk/components/assets/product/js/mobilephotoalbum/preview.jpg" width="320" /></a></div> <span class="short_text" id="result_box" lang="en"><span class="">This is a&nbsp; JQuery plugin is a easy to use JQuery plugin for web developer to build Javascript gallery for mobile device. The plugin is driven by xml or array data. Easy setup and only minimum programming knowledge is needed. Best for building photo album which target for view on mobile device</span></span>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-30918636321318391012012-05-01T04:57:00.000-07:002012-05-01T05:00:01.707-07:00top 30 background and texture for your design and inspirationhey all<br /> i am collecting the best backgrounds and texture for you to use in your next design<br /> lets div in guys<br /> <br /> <h2 id="post-3803"> 1- Brown textured paper</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2012/03/brown-textured-paper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2012/03/brown-textured-paper.jpg" width="320" /></a></div> <h4 id="post-3842"> &nbsp;<a href="http://www.psdgraphics.com/file/brown-textured-paper.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-3842"> 2- Purple waves background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2012/04/purple-waves-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2012/04/purple-waves-background.jpg" width="320" /></a></div> <h4 id="post-3842"> &nbsp;<a href="http://www.psdgraphics.com/file/purple-waves-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2738"> <a name='more'></a>&nbsp;</h2> <h2 id="post-2738"> &nbsp;3- Blank blueprint paper</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/12/blueprint-paper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/12/blueprint-paper.jpg" width="320" /></a></div> <h4 id="post-3842"> &nbsp;<a href="http://www.psdgraphics.com/file/blueprint-paper.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-3833"> 4- Light wooden background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2012/04/light-wooden-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2012/04/light-wooden-background.jpg" width="320" /></a></div> <h4 id="post-3833"> &nbsp;<a href="http://www.psdgraphics.com/file/light-wooden-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2760"> &nbsp;5- Aluminum sheet texture</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/12/aluminum-texture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/12/aluminum-texture.jpg" width="320" /></a></div> <h4 id="post-2760"> &nbsp;<a href="http://www.psdgraphics.com/file/aluminum-texture.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-3822"> 6- Grunge halftone background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2012/03/grunge-halftone-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2012/03/grunge-halftone-background.jpg" width="320" /></a></div> <h4 id="post-3822"> &nbsp;<a href="http://www.psdgraphics.com/file/grunge-halftone-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-3818"> 7- Yellow and orange bokeh background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2012/03/yellow-bokeh-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2012/03/yellow-bokeh-background.jpg" width="320" /></a></div> <h4 id="post-3818"> &nbsp;<a href="http://www.psdgraphics.com/file/yellow-orange-bokeh-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2698"> 8-&nbsp; Crumpled paper texture</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/10/crumpled-paper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/10/crumpled-paper.jpg" width="320" /></a></div> <h4 id="post-2698"> &nbsp;<a href="http://www.psdgraphics.com/file/crumpled-paper.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2637"> 9- Stone wall texture</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/07/stone-texture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/07/stone-texture.jpg" width="320" /></a></div> <h4 id="post-2637"> &nbsp;<a href="http://www.psdgraphics.com/file/stone-texture.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2698"> </h2> <h2 id="post-3805"> 10- Fresh green background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2012/03/fresh-green-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2012/03/fresh-green-background.jpg" width="320" /></a></div> <a href="http://www.psdgraphics.com/file/fresh-green-background.jpg" rel="nofollow" target="_blank">Download</a><br /> <h2 id="post-2576"> 11- Green grunge pattern</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/05/green-pattern.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/05/green-pattern.jpg" width="320" /></a></div> <h4 id="post-2576"> &nbsp;<a href="http://www.psdgraphics.com/file/green-pattern.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-3786"> 12- Valentine’s Day</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2012/02/valentines-day.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2012/02/valentines-day.jpg" width="320" /></a></div> <h4 id="post-3786"> &nbsp;<a href="http://www.psdgraphics.com/file/valentines-day.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2769"> &nbsp;13- Blurry sparkles background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2012/01/blurry-sparkles-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2012/01/blurry-sparkles-background.jpg" width="320" /></a></div> <h4 id="post-2769"> &nbsp;<a href="http://www.psdgraphics.com/file/blurry-sparkles-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2465"> 14- Retro snowflake paper texture</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/01/retro-snowflake.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/01/retro-snowflake.jpg" width="320" /></a></div> <h4 id="post-2465"> &nbsp;<a href="http://www.psdgraphics.com/file/retro-snowflake.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2444"> &nbsp;15- Radial stainless steel background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/01/radial-steel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/01/radial-steel.jpg" width="320" /></a></div> <h4 id="post-2444"> &nbsp;<a href="http://www.psdgraphics.com/file/radial-stainless-steel.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2394"> 16- Beach sand background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/11/sand-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/11/sand-background.jpg" width="320" /></a></div> <h4 id="post-2394"> &nbsp;<a href="http://www.psdgraphics.com/file/sand-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2740"> 17- Rainbow wheel background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/12/rainbow-wheel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/12/rainbow-wheel.jpg" width="320" /></a></div> <h4 id="post-2740"> &nbsp;<a href="http://www.psdgraphics.com/file/rainbow-wheel.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2390"> &nbsp;18- Military camouflage pattern</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/11/military-camouflage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/11/military-camouflage.jpg" width="320" /></a></div> <h4 id="post-2390"> &nbsp;<a href="http://www.psdgraphics.com/file/military-camouflage.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2725"> &nbsp;19- Abstract Christmas background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/11/abstract-christmas.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/11/abstract-christmas.jpg" width="320" /></a></div> <h4 id="post-2725"> &nbsp;<a href="http://www.psdgraphics.com/file/abstract-christmas.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2721"> 20- Christmas snow background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/11/snow-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/11/snow-background.jpg" width="320" /></a></div> <h4 id="post-2721"> &nbsp;<a href="http://www.psdgraphics.com/file/snow-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2340"> 21- Dark chocolate bar, seamless texture</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/10/chocolate-bar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/10/chocolate-bar.jpg" width="320" /></a></div> <h4 id="post-2721"> &nbsp;<a href="http://www.psdgraphics.com/file/chocolate-texture.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2332"> 22- Chainlink fence texture</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/10/chainlink-fence.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/10/chainlink-fence.jpg" width="320" /></a></div> <h2 id="post-2332"> &nbsp;</h2> <h4 id="post-2721"> &nbsp;<a href="http://www.psdgraphics.com/file/chainlink-fence.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2668"> 23- World map wall</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/09/world-map-wall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/09/world-map-wall.jpg" width="320" /></a></div> <h4 id="post-2668"> &nbsp;<a href="http://www.psdgraphics.com/file/world-map-wall.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2251"> 24- Yellow taxi background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/08/taxi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/08/taxi.jpg" width="320" /></a></div> <h4 id="post-2251"> &nbsp;<a href="http://www.psdgraphics.com/file/taxi-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2152"> &nbsp;25- Abstract rainbow flow background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/05/abstract-rainbow-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/05/abstract-rainbow-background.jpg" width="320" /></a></div> <h4 id="post-2152"> &nbsp;<a href="http://www.psdgraphics.com/file/abstract-rainbow-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2125"> 26- Scratched dark grunge texture, retro backgrounds</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/04/scratched-texture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/04/scratched-texture.jpg" width="320" /></a></div> <h4 id="post-2125"> &nbsp;<a href="http://www.psdgraphics.com/file/blue-scratched-texture.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2656"> 27- Checkered flag</h2> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/08/checkered-flag.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/08/checkered-flag.jpg" width="320" /></a></div> <h4 id="post-2656"> &nbsp;<a href="http://www.psdgraphics.com/file/checkered-flag.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2125"> &nbsp;</h2> <h2 id="post-2082"> 28- Abstract firewall background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/03/firewall-background.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/03/firewall-background.jpg" width="320" /></a></div> <h4 id="post-2082"> &nbsp;<a href="http://www.psdgraphics.com/file/firewall-background.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2152"> &nbsp;</h2> <h2 id="post-2031"> 29- Grunge brick wall background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2010/02/grunge-brick-wall.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2010/02/grunge-brick-wall.jpg" width="320" /></a></div> <h4 id="post-2031"> &nbsp;<a href="http://www.psdgraphics.com/file/grunge-brick-wall.jpg" rel="nofollow" target="_blank">Download</a></h4> <h2 id="post-2721"> &nbsp;</h2> <h2 id="post-2627"> 30- Abstract cubes background</h2> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.psdgraphics.com/wp-content/uploads/2011/06/abstract-cubes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://www.psdgraphics.com/wp-content/uploads/2011/06/abstract-cubes.jpg" width="320" /></a></div> <h4 id="post-2627"> &nbsp;<a href="http://www.psdgraphics.com/file/abstract-cubes.jpg" rel="nofollow" target="_blank">Download</a></h4>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-69219285150826924112011-12-23T11:26:00.000-08:002011-12-23T11:26:47.924-08:00fix indexOf in internet explorerwhen you try to use indexOf javascript it will not work on ie<br /> the perfect solution is to create simulated function if indexOf not exists<br /> <code><br /> if(!Array.indexOf){<br /> &nbsp;&nbsp;&nbsp; Array.prototype.indexOf = function(obj){<br /> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; for(var i=0; i&lt;this.length; i++){<br /> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(this[i]==obj){<br /> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return i;<br /> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br /> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br /> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return -1;<br /> &nbsp;&nbsp;&nbsp; }<br /> }<br /> </code>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com3tag:blogger.com,1999:blog-8717732039950931222.post-50433663877802509212011-07-04T08:01:00.000-07:002011-07-04T08:01:40.560-07:00node up a new podcast for NodJs<div class="separator" style="clear: both; text-align: center;"><a href="http://nodeup.com/logo.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="http://nodeup.com/logo.png" width="291" /></a></div><br /> nodeJS the new technology that brings a new possibilities to javascript and server programming<br /> if you want to keep up with the new of nodejs follow that podcast its a new podcast about node js <a href="http://nodeup.com/">http://nodeup.com/ </a>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com2tag:blogger.com,1999:blog-8717732039950931222.post-74924115539641230982011-06-30T03:30:00.000-07:002011-06-30T03:31:01.835-07:00[Humor] the structure chart of major tech companiessimple funny chart about the structure and organization of the major tech companies<br /> <br /> <div class="separator" style="clear: both; text-align: center;"><a href="http://static7.businessinsider.com/image/4e0b340dcadcbbdd35120000/org-chart.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="388" src="http://static7.businessinsider.com/image/4e0b340dcadcbbdd35120000/org-chart.jpg" width="400" /></a></div>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com1tag:blogger.com,1999:blog-8717732039950931222.post-17966452757306558512011-06-28T11:15:00.000-07:002011-06-28T11:15:59.114-07:00wow slider another awesome jquery slider<div class="separator" style="clear: both; text-align: center;"><a href="http://wowslider.com/images/data/images/slide1new.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="http://wowslider.com/images/data/images/slide1new.jpg" width="400" /></a></div>hey guys <br /> <br /> i was searching for a good transition for a header slider for my new project i tried all easying transition but i am not fuly satisfied because i was looking to blow the client mind :P<br /> so i searched a little bit and found one that blow my mind :D<br /> wow slider uses visual effects (<a href="http://wowslider.com/jquery-slider-mellow-blast-demo.html">Blast</a>, <a href="http://wowslider.com/jquery-slider-pinboard-fly-demo.html">Fly</a>, <a href="http://wowslider.com/ajax-jquery-slider-pulse-blinds-demo.html">Blinds</a>, <a href="http://wowslider.com/automatic-jquery-slider-noir-squares-demo.html">Squares</a>, <a href="http://wowslider.com/jquery-slider-flux-slices-demo.html">Slices</a>, <a href="http://wowslider.com/jquery-slider-crystal-basic-demo.html">Basic</a>, <a href="http://wowslider.com/jquery-slider-noble-fade-demo.html">Fade</a>, <a href="http://wowslider.com/jquery-slider-bar-kenburns-demo.html">Ken Burns</a>, <a href="http://wowslider.com/jquery-slider-carousel-mac-stack-demo.html">Stack</a>, <a href="http://wowslider.com/jquery-slider-3d-digit-stack-v-demo.html">Stack vertical</a> and <a href="http://wowslider.com/best-jquery-slider-crystal-linear-demo.html">Basic linear</a>) and enhanced with tons of professional made template<br /> <a name='more'></a><br /> <br /> <div class="separator" style="clear: both; text-align: center;"><a href="http://wowslider.com/images/data/images/slide2new.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="http://wowslider.com/images/data/images/slide2new.jpg" width="400" /></a></div>it also light weight 4~12 KB full customize ability , valid markup , cross browsers compatibility, SEO friendly<br /> <br /> i really like it<br /> you can see demos <a href="http://www.wowslider.com/jquery-slider-bar-kenburns-demo.html">here</a><br /> and download from <a href="http://www.wowslider.com/index.html#download">here</a>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com3tag:blogger.com,1999:blog-8717732039950931222.post-32315157603823005042011-06-22T06:19:00.000-07:002011-06-22T06:19:14.452-07:00Mobile Web & HTML5 Performance Optimizationhi every body<br /> i m getting to you awesome slides about mobile web specially html5 app optimization for mobile<br /> we all know that mobile web is kinda slow comparing with other web targets , so your app needs to be highly optimized<br /> in these slides <a class="userimage-link j-tooltip-bottom" href="http://www.slideshare.net/firt"><span class="h-username" style="vertical-align: top;">Maximiliano Firtman</span></a> talk about how to optimize html5 web app and why to do that<br /> enjoy :)<br /> <br /> <br /> <div id="__ss_8316962" style="width: 425px;"><b style="display: block; margin: 12px 0 4px;"><a href="http://www.slideshare.net/firt/mobile-web-html5-performance-optimization" title="Mobile Web &amp; HTML5 Performance Optimization">Mobile Web &amp; HTML5 Performance Optimization</a></b> <iframe frameborder="0" height="355" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/8316962" width="425"></iframe> <br /> <div style="padding: 5px 0 12px;">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/firt">Maximiliano Firtman</a> </div></div>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com1tag:blogger.com,1999:blog-8717732039950931222.post-65369602293966773542011-05-31T13:40:00.000-07:002011-05-31T13:40:56.014-07:00build native iphone & android apps with javascript - introduction<div class="separator" style="clear: both; text-align: center;"><a href="http://www.appcelerator.com/wp-content/uploads/2009/05/PROD_tit_platform2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.appcelerator.com/wp-content/uploads/2009/05/PROD_tit_platform2.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.appcelerator.com.s3.amazonaws.com/blog/images/frontpage/top_banner/main_banner_background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /> </a></div><br /> hi all , sorry for not being posting for along time<br /> but i was very busy , now i am back with a fantastic technology that makes code a native iphone or native android app with javascript possible<br /> javascript is a handy language but its a client side language works only on browser or that we was thinking :) in the past few years javascript jumbed too much and entered many fields beside the normal browser thing , and we saw node.js and how to program a webserver in javascript and use websockets and we saw adobe air and how to use javascript to make desktop application .<br /> now we continue by using javascript to make native app for smart mobile phones like iphone , android.<br /> there is several liberaries can do that but one of them i liked too much , its a Titanium Appcelerator.<br /> Titanium Appcelerator is a really amazing lib to make apps for mobile phone using javascript and access native features like phone book , GPS , gravity&nbsp; and accelerometer<br /> Titanium Appcelerator now has 1.5 million active developers and 21,7000 app and 20 million active user , yea thats is a really big stats<br /> i will isA in the next posts show you how to download and install it and how to build your first app and we will go deep and dive a little into it and finally deploy your project and distribute it<br /> so stay tunnedeslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-42124971333030955612011-03-28T02:34:00.000-07:002011-03-28T02:34:43.868-07:00Debuging php through fire fox using FirePHP<div class="separator" style="clear: both; text-align: center;"><a href="http://images.sixrevisions.com/2009/07/10-01_debug_firephp_leading_image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="181" src="http://images.sixrevisions.com/2009/07/10-01_debug_firephp_leading_image.jpg" width="400" /></a></div><br /> i was searching for a php console i can attach it with firefox to instantly debug , but a break points and so on so i can develop faster and find bugs and errors faster<br /> i found awesome addon to firefox called firephp , its attached to famous firefox addon firebug<br /> simply you need :<br /> firefox , firebug , firephp<br /> and just include the firephp class into your code<br /> <br /> <pre>require_once('FirePHPCore/FirePHP.class.PHP'); $firephp = FirePHP::getInstance(true);</pre><pre></pre><br /> <br /> <a name='more'></a><br /> for more information you can&nbsp; go to the official website <a href="http://www.firephp.org/">http://www.firephp.org</a> or this awesome tutorial <a href="http://sixrevisions.com/web-development/how-to-debug-php-using-firefox-with-firephp/%20">http://sixrevisions.com/web-development/how-to-debug-php-using-firefox-with-firephp/ </a>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-60889816252817345202011-03-24T01:33:00.000-07:002011-03-24T01:33:22.209-07:00[tips] the fastest and best ways to send mails in phphey all<br /> i read a great article wrote by Manuel Lemos , he talked about sending e mails in php and what is the best ways to do that and&nbsp; how to deliver the message fast and correct<br /> the article is really awesome so&nbsp; i decided to share it with you guys<br /> <br /> <a href="http://www.blogger.com/goog_880895982"><br /> </a><br /> <a href="http://www.phpclasses.org/blog/package/9/post/2-The-Fastest-Ways-to-Deliver-Email-in-PHP.html">the fastest ways to send mails&nbsp; in php</a>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-91074960973649635252011-02-20T06:15:00.000-08:002011-02-20T06:15:50.617-08:00[css tips] targetting chrome only browser - css chrome hackshi all some times you face problems in css adjustment and many differents between browsers<br /> you can use SSI to target only IE browser but if you want to target Chrome you will have a serious issue here because there is no street way to do that<br /> <br /> you can use some css hacks like:<br /> <br /> 1-:<br /> <br /> <pre><code> body:nth-of-type(1) div.divname{width:500px;} </code></pre><br /> 2-<br /> <pre><code> @media screen and (-webkit-min-device-pixel-ratio:0) { &nbsp; div.divname{width:500px;} } </code></pre><br /> and also you can target it via javascript<br /> <pre><code> &lt;script type="text/javascript"&gt; var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') &gt; -1; if(is_chrome){ document.write('&lt;link rel="stylesheet" href="css/chrome.css" type="text/css" /&gt;'); } &lt;/script&gt; </code></pre><br /> thanks all see you in next tipeslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-50035177718223020032011-02-07T08:38:00.000-08:002011-02-07T08:38:52.997-08:00[tip] optimize your website acceleration via gzip and htaccessif&nbsp; you dont care about ie4 users so use gzip compression now its a technique to compress all media html , js , css , images and the browser can decompress it before viewing that enhance the acceleration of your website<br /> you can do it via htaccess<br /> <br /> just add these few lines<br /> <br /> <pre><code># compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension: &lt;Files *.html&gt; SetOutputFilter DEFLATE &lt;/Files&gt;</code></pre>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-22835451912655934732011-02-07T08:32:00.000-08:002011-02-07T08:35:59.739-08:00sorry for absence<div class="separator" style="clear: both; text-align: center;"><a href="http://t0.gstatic.com/images?q=tbn:ANd9GcTiOnwTCVds3gIpj22nZgEeElourwwf9ThmbSa1rbFLnqCs6p0JAA&amp;t=1" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTiOnwTCVds3gIpj22nZgEeElourwwf9ThmbSa1rbFLnqCs6p0JAA&amp;t=1" /></a></div><br /> hi all<br /> sorry for not being post all previous days and thanks a lot for all message i received , as most of you know i live in Egypt and we now on a serious activity in Egypt towards liberty and democracy&nbsp; so hope us luck and peaceeslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0tag:blogger.com,1999:blog-8717732039950931222.post-88130374824013532902011-01-18T07:08:00.000-08:002011-01-18T07:08:37.627-08:00HTML5 LOGOi found today the officially html5 logo<br /> <div class="separator" style="clear: both; text-align: center;"><a href="http://www.w3.org/html/logo/img/html5-display.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://www.w3.org/html/logo/img/html5-display.png" width="397" /></a></div>actually i hated it its not so good as html5 technique , that is the official link from <a href="http://www.w3.org/html/logo/">w3c</a>eslamhttp://www.blogger.com/profile/10667681381852941225noreply@blogger.com0