Translate

Wednesday, April 17, 2019

Top 3 for the day

Top 3 for the day


30 Beautiful Resume Designs For Your Inspiration

Posted: 17 Apr 2019 08:23 AM PDT

It’s a competitive job market we hunt jobs in and sorry to say, resumes created in MSWord are just not going to cut it anymore. These days, particularly if you are creative, you need an outstanding resume to make an impression on potential employers. When a prospective client looks at your resume, everything you put into your resume is doing all the selling for you.

Not only do you have to ensure that what you put into your resume convinces them that you are the best candidate for the job, you need to create a resume that not only shows them what you can do, but how you are not afraid to break boundaries, and try out new ideas.

Today, I’d like to share with you a collection of 30 outstanding resume designs that come in many forms: infographic designs, booklets, business cards, postcards, personal branding material, posters, website designs and more. Feeling the pressure yet? Perhaps it is time to spruce up your own resume design.

If you need more design ideas, check out some of our published posts below:

#1 @Charlotte Allen
resume design
#2 @Roberta Cicerone
resume design
#3 @Syril Bobadilla
resume design
#4 @Julien Renvoye
resume design
#5 @CodeGrape
resume design
#6 @Jered Odegard
resume design
#7 @Nico Lopez
resume design
#8 @Camila Soto
resume design
#9 @Stefania Capellupo
resume design
#10 @Teesha Masson
resume design
#11 @Mathew Lynch
resume design
#12 @Paula Del Mas
resume design
#13 @Rebecca Fisk
resume design
#14 @Felix Baky
resume design
#15 @Lucrezia Urtis
resume design
#16 @Caseda
resume design
#17 @Carlos Bedoya
resume design
#18 @Simone Primo
resume design
#19 @Lim Zhiyang
resume design
#20 @Martinez-Mercader
resume design
#21 @Matthew Stucky
resume design
#22 @Maria Gabriella Aronne
resume design
#23 @Candice Witpas
resume design
#24 @Marianne Riegelnegg
resume design
#25 @jamiemurphey
resume design
#26 @Varun Sudhakar
resume design
#27 @Francesco Rivieccio
resume design
#28 @Gary Corr
resume design
#29 @Marco Bertoletti
resume design
#30 @Anton Yermolov
resume design

The post 30 Beautiful Resume Designs For Your Inspiration appeared first on Hongkiat.

10+ Free Multi-Purpose Vector Icon Sets for Designers

Posted: 17 Apr 2019 06:17 AM PDT

Any web-related project requires the use of icons. Creating icons for each project you have is not only impractical because it is time-consuming work but also insane! There are already tons of amazing icons sets available for free download, all over the Web. All you have to do is locate those high-quality enough to make it into your project.

Well, we’ve gone and done the legwork for you – all you have to do is take your pick. Below, are 20 free vector icon sets that will fit any kind of project you might have in mind. You will be able to find icon sets perfect for business, fashion, food, mobile apps, weather, flat design and more.

To download the icon set you want, click into the link. Can’t find what you want? Here are 70 more icon sets you can download for free.

#1
vector sets for designers
#2
vector sets for designers
#3
vector sets for designers
#4
vector sets for designers
#5
vector sets for designers
#6
vector sets for designers
#7
vector sets for designers
#8
vector sets for designers
#9
vector sets for designers
#10
vector sets for designers
#11
vector sets for designers
#12
vector sets for designers
#13
vector sets for designers
#14
vector sets for designers
#15
vector sets for designers

The post 10+ Free Multi-Purpose Vector Icon Sets for Designers appeared first on Hongkiat.

Creating CSS Image Sprite with Compass

Posted: 17 Apr 2019 03:19 AM PDT

CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many ways and handy tools to do this, or else you can also do it traditionally with Photoshop.

But, through all my experience of dealing with CSS Image Sprite, there is no other way that much easier than using Sprite Function for Compass. So, let’s take a look at how it works.

Starting Compass

Before working with Compass codes, we need to create Compass project watch it. So, every time there is a change in the project including the images and the .scss, Compass will compile it into the proper form.

Let’s open your Terminal or Command Prompt (if you are on Windows), and run the following commands.

  compass create /path/to/project  cd /path/to/project  compass watch  

Combining Images

As we mentioned above, you can use Photoshop to manually join the images or you can also use some handy tools, such as SpriteBox. Compass integrates this feature in the Function. Let’s say we have the following icons under images/browsers/<images>.png folders.

To join those icons in Compass, we can use @import rule and then direct it to the image folders followed by the image extension through the .scss stylesheet, like so

  @import "browsers/*.png";  

After saving the file, Compass will combine those images and generate new image files, as follows.

image sprite
Layout Orientation

Furthermore, we can also set the sprite orientation. As you can see in the screenshot above, the images are arranged vertically by default. In case vertical orientation does not fit the circumstances, we can direct them horizontally or diagonally with the following variable $<map>-layout: horizontal; or $<map>-layout: horizontal; replace the <map> with the folder name where you saved the images.

Horizontal

  $browsers-layout:horizontal;  @import "browsers/*.png";  
image sprite horizontal

Diagonal

  $browsers-layout:vertical;  @import "browsers/*.png";  
image sprite diagonal

Adding Image in the Stylesheet

Once we have done combining the image, we add the image in the stylesheet through background image. Traditionally we will do it this way.

  .chrome {   	background-position: 0 0; width: 128px; height: 128px;   }   .firefox {   	background-position: 0 -133px; width: 128px; height: 128px;   }   .ie {   	background-position: 0 -266px; width: 128px; height: 128px;   }   .opera {   	background-position: 0 -399px; width: 128px; height: 128px;   }   .safari {   	background-position: 0 -532px; width: 128px; height: 128px;   }   

In Compass, we have a couple of ways that are much simpler. First, we can generate something like those CSS rules with this syntax @include all-<map>-sprites;. Replace the <map> with the folders where we store the images.

  @include  all-browsers-sprites;  

This line above when compiled to regular CSS generates the background image definition as well as each of the position, as shown below.

  .browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari {    background: url('/images/browsers-sad8e949931.png') no-repeat;  }  .browsers-chrome {  	background-position: 0 0;  }  .browsers-firefox {  	background-position: 0 -128px;  }  .browsers-ie {  	background-position: 0 -256px;  }  .browsers-opera {  	background-position: 0 -384px;  }  .browsers-safari {  	background-position: 0 -512px;  }  

Or, we can also add background image individually to particular selectors with this syntax @include <map>-sprite(image-naem);; as in previous codes replace the <map> with the folder where we store these images. Here is an example.

  li {  	@include browsers-sprite(safari);  }  

Then, Compass is clever enough to identify the background position, without us having to specify it explicitly. In regular CSS, that line above will turn into

  .browsers-sprite, li {    background: url('/images/browsers-sad8e949931.png') no-repeat;  }  li {  	background-position: 0 -512px;  }  

Specifying Container Dimension

The last thing we need to do is specifying the container height and width that contain the image. We commonly do it in traditional way by manually inspecting the image width and height (most likely through image info or image properties).

With Compass, we can utilize this function <map>-sprite-height(image-name) or <map>-sprite-width(image-name) to retrieve the image width and height. In this example, we will retrieve one of the image width and height and store the value variables as well assign the background image with @include directive.

  $height: browsers-sprite-height(safari);  $width: browsers-sprite-width(safari);  li {  	display: inline-block;  	height: $height;  	width: $width;  	@include browsers-sprite(safari);  }  

When we compile these codes above, it turns into the following in regular CSS.

  .browsers-sprite, li {  	background: url('/images/browsers-sad8e949931.png') no-repeat;  }  li {  	display: inline-block;  	height: 128px;  	width: 128px;  	background-position: 0 -512px;  }  

Conclusion

There are actually a few other useful functions from Compass to use along with, but these are all the essential functions to create CSS Image Sprite with Compass. Still, if you are unfamiliar with this subject, we reccommend you to follow our previous post series about Sass and Compass. We hope you find this post to be useful.

The post Creating CSS Image Sprite with Compass appeared first on Hongkiat.

12 Eye-candy Multipurpose WordPress Themes to Choose From

Posted: 17 Apr 2019 03:19 AM PDT

How many web designers have dismissed everything they’ve heard about multipurpose themes? They did so under the assumption that a multipurpose theme is like the proverbial Jack of all Trades. It may be able to do anything you ask of it, but none of it never well.

That assumption may or may not have been true when multipurpose themes first came on the scene. We really don’t know. But it’s certainly a false assumption today.

There are situations where a specialized theme may serve you better. But in most cases, a multipurpose theme will not only get the job done but absolutely nail it.

Select one of the themes presented here for your next project and what do you think will happen?

It will absolutely nail it.

These 12 multipurpose website-building solutions are not only that good. They’re the best.

1. Be Theme

be theme

Every multipurpose theme has its own set of special features and tools that enables it to successfully take on virtually any website-building project a web designer puts it to use. Be Theme has them in spades. With 40+ powerful core features including the newly-minted Header Builder this, the biggest WordPress theme ever, also boasts an outstanding collection of over 400 pre-build websites.

These pre-built websites cover more than 30 different business and industry sectors and niches together with every website type and style you’re apt to encounter. They’re responsive, customizable, and include functional design elements that guarantee the finished product will feature a UX that will engage users and successfully guide them to the website owner’s goal.

Other notable core features include the Muffin Builder/Editor, and advanced options panel, shortcode generator, layout generator, and a host of design elements, options, fonts, and special effects.

Select a pre-built website (you can upload it with a single click), start customizing, add your own content, and you can create a ready-to-go website in as little as 4 hours.

2. Jupiter

jupiter

Jupiter X is another multipurpose theme that can handle virtually anything you can throw at it. Go down its list of website-building features, and you’ll likely agree that the claim that Jupiter X enables you to build the unbuildable has merit.

You won’t have to worry about working around header and footer-building limitations common to most themes. You can build your own. You’ll also be able to customize online shop features like carts and checkout pages that many themes don’t allow you to do.

Creating customized popups, special forms, and out-of-the-ordinary menu styles will never be a problem either.

It should not come as a surprise to anyone that this scalable, developer-friendly theme is attracting so many new fans. Jupiter X is a total makeover of Jupiter, a creation of a member of the Power Elite Envato Hall of Fame, Artbees.

3. Uncode — Creative Multiuse WordPress Theme

uncode

Uncode owes it exceptional flexibility in large part to an adaptive grid system that’s by far the most advanced system of its type. This creative theme, one of ThemeForest’s all-time bestsellers, also features an impressive adaptive images system that detects a visitor’s screen size and rescales your images accordingly.

There are 200+ option-rich design modules to work with plus 28 powerful Visual Composer modules. Its hierarchical theme options feature gives you incredible control over your layout and content, a feature you’ll genuinely appreciate whenever you’re tasked with creating a portfolio that’s a cut above average.

Rather than go down the full list of features, we suggest you visit the Uncode site and browse its showcase of user-build websites. You’ll definitely be impressed to see what others have been able to accomplish using Uncode, and most probably inspired as well.

4. Kalium

kalium

This remarkably easy to use multipurpose theme sports an outstanding selection of theme options, layout designs, high-quality full-content design demos. Coupled with its drag and drop page building feature, Kalium gives you the flexibility you need to be able to create websites of any type or style.

You’ll get periodic updates for the life of the product, and you can rely on top-notch customer support as well.

5. TheGem — Creative Multi-Purpose High-Performance WordPress Theme

thegem

A very large Swiss Army knife may or may not have been on TheGem’s authors mind when they created it, but they certainly came up with a software equivalent — a multipurpose theme that many look upon as the ultimate in website-building toolboxes.

Its 150+ demo pages, 50 and counting multipurpose design concepts and flexible page layouts help you get any project for any startup, business niche, or creative agency, off to a quick start.

6. Brook — Creative Multipurpose WordPress Theme

brook

Any listing of Brook’s features in so tight a space is going to miss out of everything this best-selling multipurpose creative theme can offer. The best approach is to visit Brook’s website and see for yourself.

Remarkably worth mentioning here is the bunch of premium plugins namely WPBakery Page Builder, Revolution Slider, Font Awesome 5 Pro, the excellent collection of homepage, blog, portfolio layouts, hundreds of custom shortcodes, mega menu, parallax scrolling, and so on.

7. KLEO — Pro Community Focused, Multi-Purpose BuddyPress Theme

kleo

This community-focused multipurpose theme lets you put a working site in place in minutes. Easy setup, drag and drop page building, and a 1-click demo import are part of the reason. Another part of the reason could be that Kleo is a plugin’s best friend.

If you have a special plugin or two that you need to get the job done, you won’t have to worry about whether it’s compatible with Kleo. Unlimited possibilities await.

8. Bridge

bridge

Bridge is an ideal choice for creating a website for any business niche. It’s more than 110,000 happy customers will attest to that.

The WP Bakery page builder, Revolution Slider, Layer slider and other plugins in combination with Bridge’s open-ended customizability and its library of 370+ pre-made websites will get your project off to a fast start and take you anywhere you want to go.

9. Pofo — Creative Portfolio, Blog and eCommerce WordPress Theme

pofo

If you’re looking for a modern, crazy-fast, and SEO optimized theme for your creative agency or business website endeavors you should consider giving Pofo more than a casual glance.

Pofo’s great selection of 1-click demo pages, ready-to-go home pages, and 150+ pre-built design elements will give you all the flexibility and customization options you’re ever likely to need — whether its for a blog, portfolio, or an eCommerce application.

10. Crocal — Premium WordPress Theme

crocal

Crocal is brand-spankin’ new; and like any new kid on the block it’s eager to show its stuff. Crocal was created by a #1-rated ThemeForest author, which should tell you a lot about it.

This new multipurpose theme features an advanced grid system (i.e.,it’s extremely flexible), its Gutenberg optimized, fully compatible with the latest version of WordPress, and GDPR requirements compliant.

11. Schema

schema

If your website creations are stunning but don’t seem to get much traffic, Schema will solve the problem. Not only is it an outstanding website-building theme, But Schema will also guide search engines through your site, element by element, it will load your website fast, and it will add clean code to your website.

12. Movedo — We DO MOVE Your World

movedo

You won’t find a magic want in any multipurpose themes. You won’t find one in MOVEDO either, although you might think there’s one hidden in there somewhere.

This top-rated theme’s ultra-dynamic parallax effects, unique animations, and ability to make things appear to move that actually don’t, might be just what you need to give your websites that extra dose of spark and pizzazz.

Conclusion

We’ve tried to make your search for a better multipurpose WordPress builder a little easier. Enjoy this selection of the best of the best. You’re not quite done yet, however. You still need to find which one suits your needs best, and that can take a little extra time.

Don’t worry too much about getting hung up on making a decision. You really can’t make a wrong one in this group.

The post 12 Eye-candy Multipurpose WordPress Themes to Choose From appeared first on Hongkiat.