All presented templates for their site are built on modern versions of HTML5 and CSS3. In addition, the authors use such trendy features as flat design, responsive design, adaptive layout, jQuery sliders, CSS3 animations, etc. That is, if you are looking for a mobile site template, you can choose any of the presented ones. Beautiful html5 templates 2017, though free, but look at the premium level.

Here you will find over 50 free high quality HTML5 and CSS3 responsive website templates that can be used for both new websites and redesigns of existing ones. Stylish html5 website templates- that's what you need!

Updated 03/12/2019: Since the article was written 2 years ago, many links have become broken. Either the template owners merged, or the status of the templates changed from free to paid, or the aliens screwed everything up. A request to you, dear readers, if you find such a link, throw it in the comments, I will correct it.

1. Snow - Free HTML5 and CSS3 Landing Page Template

The Snow landing page html5 css3 template is built on the Bootstrap framework. The template is very stylish and cool! A fixed background and a huge Jumbotron is the thing that shows the main content of the site. And what is the most important thing on the landing page? That's right, a call to action. Naturally, the template is fully adapted for mobile devices. You can even use it as the basis for your own templates.

2. Sima - chic commercial website template

This html5 css3 template is also built on the Bootstrap framework. You can use this template to create a unique site with a portfolio, your team, prices, reviews and everything else that will be needed. For example, this template is perfect for a cleaning services website. The animation in this template is smooth and effective, fonts are clean and easy to read. Just the perfect template!

3. White is a great one page template!

A distinctive feature of the White website template is two background options at the top. Your choice of either an image slider or a video background. Very high quality and spectacular template for the site!

4. Platz - Free HTML5 Grid Website Template

A modern, visually appealing HTML5 website template designed around a grid (read more about grid). Beautiful and responsive template design for a blog or website.

5. Mart eCommerce - Beautiful HTML5 and CSS3 eCommerce Website Template

The fresh and stylish design of the website template is best for all kinds of fashion websites selling shoes, clothes, watches, accessories, sportswear, etc. It comes with a PSD file that you can adjust to your needs.

6. Nava - a spectacular HTML5 and CSS3 template for creative websites

Nava is a modern HTML5 website template that is used primarily for creative professionals who want to showcase their work in all its glory. Many variations of template settings allow you to make your site unique. Lightweight, beautiful and responsive website template.

7. Box Portfolio - Unique Creative HTML5 & CSS3 Website Template

The Box Portfolio website template has a clean and modern minimalistic design. Perfect for professionals who want to effectively show their work online. As the name suggests, the site template is ideally tailored for portfolios.

8. Mountain King - Popular and Functional HTML5 and CSS3 Website Template

The mountain theme in website design is very popular lately. The Mountain King website template is no exception. Includes 336 vector icons from Typicons. Plus great CSS3 animation. The template is perfect for travel and portfolio websites.

9. Beauty Spa - Cool HTML5 and CSS3 Website Template for Spa Salons

Beauty Spa is a responsive website template with many features ideal for spa, health or fitness centers, yoga websites or even hair salons. Excellent readability of fonts and unobtrusive minimalism.

10. Bent - Stylish and Effective Landing Page for HTML5 and CSS3 Websites

Bent is a great free html5 and css3 website template. Responsive design, CSS3 animation, parallax scrolling, customizable navigation and other goodies. This is a clean template design for sites that want to use a balanced design to ensure that visitors enjoy the look and feel of the site while still seeing the main content clearly.

11. Triangle - Free Responsive Multipurpose HTML5 & CSS3 Template

Triangle is an exclusive creative HTML5 and CSS3 website template especially for those who want to kick their cool design without making it worse. The template has over 40 pre-designed pages that let you customize your site to your heart's content.

12. Future Imperfect - a brilliant website template for creative people!

Experience a genuine sense of pleasure with this website template, perfect for writers, authors, copywriters and other pen and paper workers. The template can also be used for a personal blog, a blog about travel, creativity, etc. The creative design and adaptive layout of the template will appeal to many.

13. Bodo is a great personal website template

Bodo is a beautiful HTML5 and CSS3 website template that is perfect for a personal website. Especially for portfolio organization. Clean and crisp typography, carousel slider, popups to showcase your work, and more.

14. Lens is the perfect HTML5 website template for photographers

Photographers are always looking for the perfect template for their site to showcase their work in all its glory, spectacularly, and most importantly - big! Rare site template meets these requirements. Lens is one such photographer website template.

15. Spectral - Unique Handcrafted HTML5 & CSS3 Website Template

If you are looking for free auto website templates, then Spectral would be the ideal solution. Here is a completely unique handcrafted one page website template design. The design can be changed as you wish. With this template, you can make a stunning site on absolutely any topic, whether it's an impressive travel blog or photo gallery, an automotive site or a hosting provider.

16. Oxygen - One Page HTML5 & CSS3 Website Template

Oxygen is a convenient and unique business website template. Modern flat design, responsive layout. For example, this template is ideal for a website about mobile applications or mobile technology.

17. Mobirise Bootstrap - Perfect Free HTML5 & CSS3 Website Template

If you're looking for a free website template, then Mobirise Bootstrap is the perfect place to get started. This is a multifunctional template with a lot of add-ons included. Three pre-made homepage and blog layouts will help you with this. Mobirise Bootstrap is also 100% SEO optimized and responsive to all screen sizes.

18. La Casa - Beautiful and Free HTML5 Real Estate Website Template

The Brandy template is perfect for organizing a commercial real estate website. Responsive and very beautiful design will appeal not only to the site owner, but also to visitors.

19. Drifolio - Stylish HTML5 Portfolio Website Template

Stylish and animated HTML5 and CSS3 portfolio website template. Clean design, great typography, beautiful icons and more.

20. Pluton - bright and stylish one-page website template

Pluton is a bright and eye-catching Bootstrap website template. A modern website template with its unique one-page layout and responsive design that is great for studios, photographers and creative designers.

21. SquadFree - Professional HTML5 One Page Website Template

The SquadFree template is perfect for creating a commercial one-page website. The template looks not only professional, but also adapted to all types of screens. The template is based on Bootstrap.

22. Sublime - mesmerizing HTML5 and CSS3 website template

Sublime is a clean and stunningly beautiful HTML5 and CSS3 website template perfect for a startup, creative agency or portfolio site. Responsive design and two page options to choose from.

23. Timber - unusual and beautiful HTML5 and CSS3 website template

Timber is a fresh, stylish and unusual one page website template theme. The diagonal is the main design feature of this template. The template is perfect for a business website or portfolio. There is a built-in gallery, map and contact information that you can easily customize for yourself.

24. E-Shopper - Best Ecommerce Website Template

E-Shopper is a great e-commerce site template. Built on top of bootstrap with an amazing feature set for a complete and efficient online store.

25. Magnetic - Free HTML5 & CSS3 Photo Website Template

An absolutely stunning HTML5 and CSS3 template for creating a photo site or portfolio for a designer, illustrator or artist. This template raises the bar for professional templates to the next level! Responsive design, excellent support for all kinds of display devices, easy and convenient navigation and much more.

26. Mabur Portfolio - Beautiful Minimalist HTML5 & CSS3 Website Template

The flat design of this minimalist website template is perfect for creating a portfolio. In the template, all the details are verified perfectly!

27. Modern Bootstrap HTML5 - Free One Page Website Template

This free Bootstrap-based one-pager is perfect for corporate websites, both for small companies and large ones. Flat design, responsive layout, all high quality design elements. The template comes in 4 different colors.

28. Infusion - Stylish One Page Website Template in HTML5 and CSS3

Infusion is a great example of a HTML5 and CSS3 website template that is specifically designed for building a business portfolio. The rich functionality of this template allows you to work effectively with customers and attract new ones.

29. Yebo - corporate website template in HTML5 and CSS3

This high quality flat style website template is perfect for any corporate website. Responsive design, lots of settings and editing options.

30. Twenty - Spectacular HTML5 and CSS3 Parallax Website Template

This unique and very beautiful website template with parallax effect will not leave anyone indifferent. The one page template is built on pure HTML5 and CSS3 with responsive layout, impressive backgrounds, social media support and more.

31. Urbanic - Great HTML5 & CSS3 Bootstrap Website Template

Urbanic is a fresh and cool HTML5 and CSS3 website template built on the Bootstrap engine. Perfect to start building your site right away without too much trouble. The template is perfectly adapted to any screen size.

32. Design Showcase - HTML5 Portfolio Website Template

Visually harmonious and effective HTML5 website template for organizing your portfolio. The template is perfectly adapted for mobile devices, which is very difficult to do for sites of this format.

33. Mamba One - simple and stylish HTML5 and CSS3 website template

Mamba One is an example of a simple yet stylish one page website template. Compatible with all modern browsers and will be displayed adequately everywhere.

34. KreativePixel - Free Website Template for Photographers

Another great website template for photographers. Responsive design and very convenient sorting of photos in portfolios and galleries will appeal to many photography lovers. The template also uses a parallax effect, which also impresses viewers when viewing photos.

35. Retina Ready Responsive App - Free HTML5 and CSS3 Landing Page Template

As the name suggests, this amazing website template is not only perfect for landing pages, but also meets the new mobile trends, especially in terms of clarity on Retina devices.

36. Brushed - Responsive HTML5 and CSS3 Website Template powered by Bootstrap

Brushed is a responsive, free HTML5 and CSS3 website template based on the Bootstrap engine. Also optimized for Retina displays (iPhone, iPad, iPod touch and Macbook Pro retina).

37. Big Picture HTML5 and CSS3 Website Template

Welcome to Big Picture! This responsive HTML5 website template is perfect for all creative people who have something to show and show it big and spectacular on their website. In addition, the template used excellent animation.

38. Tesselatte - Free HTML5 & CSS3 Responsive Template

A simple one-page template that takes into account all the necessary tools to successfully create a site. Ideal for a personal blog of a writer, copywriter and just a lover of the printed word.

39. Overflow - unique HTML5 and CSS3 website template

This unique pure HTML5 and CSS3 website template is perfect for any creative person. It is fully responsive and completely free.

40. Runkeeper - responsive and very beautiful website template

Runkeeper is a free, responsive and very beautiful website template. It can be used for any site. Brilliant style and crisp fonts, responsive design and impressive template details. Everything works for you!

41. Pinball Responsive Grid Style - Great Grid Based Website Template

This amazing professional grid based website template is perfect for a corporate website. Modern flat design and responsive structure of the template is perfectly displayed on the screens of large monitors and mobile devices.

42. Prologue - Pure HTML5 & CSS3 Single Page Website Template

This clean, simple and crisp HTML5 and CSS3 website template is perfect for building a landing page. Minimalistic design does not distract from the main thing. A spectacular scrolling side navigation bar and clean page lines are just the perfect combination!

43. Helios - Modern Website Template with Pure HTML5 and CSS3

Another website template in the style of minimalism and clean forms. Specially designed to take advantage of large display screens, but is also perfectly adapted to the small screens of mobile devices.

44. Telephasic - Free and Responsive HTML5 Website Template

This modern, responsive and completely free website template has one big advantage - it is simple and concise, but this is exactly what many lack.

45. Strongly Typed - very beautiful semi-retro website template

New website template with a minimalistic semi-retro style. It's just that retro is no longer in fashion, but a slight hint of it is very welcome. This website template is fully responsive, built with pure HTML5 and CSS3, and includes all the necessary basic page elements. The Strongly Typed template is ideal for creative sites. For example, for a website about home decor.

46. ​​Striped - Clean, Beautiful and Functional HTML5 & CSS3 Website Template

Fresh and clean, beautiful and functional, new website template in HTML5 and CSS3. It has all the necessary page elements in its arsenal, including decorated quotes, tables and lists, as well as an adapted sidebar (on the right or left - as you wish).

47. Parallelism - unusual and stylish website template on HTML5 and CSS3

Parallelism is a stylish website template for organizing portfolios or photos. Its unusualness is that the scrolling here is not vertical, as usual, but horizontal. This gives the site a special glamor and memorability.

48. Miniport - Fully Responsive Minimalist HTML5 Website Template

A great minimalist HTML5 website template. Perfect for a personal site / blog, as well as for a small corporate one-page site or as a business card site.

49. Verti - Spacious and Free Responsive HTML5 Website Template

The clean and spacious design of this website template is perfect for small corporate websites or commercial projects. Responsive and convenient for both the author and users.

50. ZeroFour - Impressive and Stylish HTML5 & CSS3 Website Template

And the last in the list, but not the last in terms of quality and external showiness, is the ZeroFour website template. Stylish design, very beautiful menu, perfectly adjusted forms and buttons, beautiful icons and much more. And all this is absolutely free!

I hope you have found something suitable among these wonderful HTML5 and CSS3 website templates. Good luck!

Bookmark it so you can quickly find it later.

PS: If you can’t decide on a choice, read the article “I don’t know what I want”. It will be helpful.

• Graphic designer portfolio

  Price: Free

  Good for

  designers, photographers, portfolio sites, creative professionals.

  Description

  An interesting and stylish template for a portfolio site. Showcase all your projects in a simple yet catchy way that will help visitors to fully focus on your creativity. The template is built with usability in mind and follows web design trends, so all you have to do is upload your photos, set up a page to connect with visitors, and start blogging to promote yourself online.

  Price: Free

• UX/UI designer resume

  UX/UI designer resume

  Price: Free

  

  Good for

  UX designer, UI designer, web designer.

  Description

  Portfolio website template for a creative professional. Upload high-quality examples of your work, show off your skills, and help visitors get in touch with you quickly with a contact form. The template uses animation, convenient strips with information, a professional gallery where you can upload photos, video files and add text posters. Any element is edited by clicking the mouse.

  Price: Free

• Interior designer portfolio

  Price: Free

  

  Good for

  interior designers, architects, portfolio sites, creative professionals.

  Description

  The clean and simple design of this free portfolio website template is great for showcasing your design work. Upload project photos, add contact information, customize all the elements to your taste and publish the site in one click.

  Price: Free

• Architect portfolio

  Architect portfolio

  Price: Free

  

  Good for

  portfolio of architects, designers and other professionals.

  Description

  Use this minimalistic free website template to create a stylish online portfolio. Submit all your projects to home page using the grid gallery. Add a link to an internal page on your site for each image in the gallery. By clicking on any image, the visitor will be taken to a separate page of a specific project. Hide many pages from the main menu to make site navigation easy and convenient. Add your information, resume, and don't forget to set up a contact form to make it easy to contact you.

  Price: Free

• Web designer portfolio

  Web designer portfolio

  Price: Free

  

  Good for

  graphic designers, web designers, photographers, creative professionals and portfolio sites.

  Description

  An excellent template for a designer portfolio site - it will help to reflect your creative personality and present all projects online in a winning way. Just add your photos and text descriptions, edit any elements the way you want, and publish your site in one click. Don't forget to connect your social media accounts and set up a contact form to connect with customers.

  Price: Free

• Graphic and web designer

  Graphic and web designer

  Price: Free

  

  Good for

  web designer, graphic designer.

  Description

  If you need to create an impressive resume, use this website template. It consists of two pages: a biography and a portfolio gallery, where each image is clickable and leads to a page with more detailed information. Start editing and replace the example template information with your own data and images. You can add high quality photos to your portfolio gallery to showcase your work in the best possible way. Any detail of the template is edited according to your desire.

  Price: Free

• 3D designer portfolio

  3D designer portfolio

  Price: Free

  

  Good for

  art director, motion designer.

  Description

  A template for creating a custom portfolio site. Any element is customizable as you wish. The anchor menu and gallery of projects on the main page will help you quickly attract attention and showcase your work. Each project opens on a separate page with photos, videos and detailed information. The unusual menu expands to full screen and contains three sections: projects, contacts and bio. Start editing and add any number of sections and pages to present yourself to clients.

  Price: Free

• Illustrator

  Illustrator

  Price: Free

  

  Good for

  illustrators, artists, designers.

  Description

  The illustrations you create reflect your character and personality. Your website should do the same. Clean and simple, this template is perfect for keeping your audience focused on your work, and the Wix Art Store app helps you sell digital files online.

  Price: Free

• Illustrator portfolio

  Illustrator portfolio

  Price: Free

  

  Good for

  illustrators, artists, designers, photographers, portfolio sites, creative professionals.

  Description

  The sleek design of this portfolio website template lets your work speak for itself. Nothing will distract your visitors from the most important thing - the image gallery. Just upload your photos, customize your contact page, and add interesting information about yourself. Your stylish modern website will be ready in no time!

  Price: Free

• residential architecture

This modern age is filled with great paradoxes and turnings of time and fate. As the world grows more connected and globalized, disparities seem to increase, yet opportunities conversely abound in this bright new era, ushered in by the total communication the internet has provided for mankind. And while the world's largest nations and economies rise and fall in endless cycles, the business savvy, the entrepreneurs and the go-getters of the Earth are thriving in a world full of possibilities, where your talent and hard work, if unrecognized or unappreciated in whatever context you find yourself in, can just as easily be your sustenance-or even, your great success-elsewhere on this planet.

The internet is just the tool to help you find your place to shine, but you'll get nowhere without a handsome, modern and appealing portfolio website, that acts as a calling card and an exposition of your skills, whatever your trade or craft may be-from artists and photographers to designers and architects, from engineers and decorators to constructors and landscapers, a portfolio is a place to start. And to start off in style and grace, nothing beats the top of the line web technology combo of a solid HTML5 framework with smooth CSS3 stylesheets. The following collection of website templates exhibits the best and brightest HTML5/CSS3 Portfolio Website Templates on the market. They won't disappoint.

Explore 2.5 Million Digital Assets including 4,700+ Portfolio Website Templates

2M+ items from the worlds largest marketplace for HTML5 Templates, Themes & Design Assets. Whether that’s what you need, or you’re just after a few Stock Photos – all of it can be found here at Envato Market.

DOWNLOAD NOW

Divi

There is nothing else that you need in life when it comes to building the most remarkable portfolio website other than Divi. This is not just a tool for developing websites of all kinds. It turns you into a pro designed and developer in an instant and even if you are not one of those just yet. As a matter of fact, even if you are still a complete beginner, you can use Divi and craft a custom page for your online project to push your services and talent.

While Divi comes with quite a considerable amount of predefined material, you can always do things your way. Improve and edit what is at your disposal or create entirely custom layouts that fit your demands to the last detail. With Divi, anything is possible since the options you have are endless.

Webify

If you are looking to establish an or , you came to the right place. Webify is a spectacular portfolio website template that will get you sorted out in close to no time. Have in mind that the major part of the work is already done for you. From the technicalities to the web design, Webify rocks it all for your convenience. With the predefined demos, you can have a functional online portfolio, stuffed with your awesome contents, ready for the launch sooner rather than later.

In the package of twenty different samples, you will find four exclusive ones which are perfect for crafting modern online portfolios. To make you feel even more comfortable, approaching web development, you do not need to be tech-savvy to have a chance to work with Webify. Anyone can do it, beginner coders and those who are about to make their very first page, too.

Jevelin

Jevelin is a responsive WordPress theme that requires no previous knowledge for anything. It is perfect for lazy, non-programmers, or simply busy people. It comes with tons of demos and pre-built choices for page elements. Jevelin is well documented and even provides video tutorials to guide you all the way through. It uses a Drag & Drop page builder and a MegaMenu that simplify many panel tasks. +40 amazing shortcodes are also included to get creative and crafty! Additionally, Jevelin is essentially multipurpose and adaptable to browsers or devices. It is made with many possible actions, but only one real goal: quality page building. Also, special add-ons that make it great include WPML for translation and Google Maps. Moreover, you get to share your posts and new son anything you want with social media buttons.

Jevelin is also fast and optimized for navigation with SEO. It comes with +10 portfolio layouts and 6 blog pages too. Get it all ready to make commercial transactions and forms for potential customers. Furthermore, it has been integrated with awesome WooCommerce and Contact Form 7 plugins. Lastly, it will provide you with a child theme and free constant updates! Have a quick look, and you won't turn back! Go for Jevelin!

Maree

Marée is an exciting, easy to use and interest sparking portfolio website template for illustrators and designers. However, anyone can utilize the amazingness of Marée if you find the web design resonating with you. There are several different demos to choose from, all creative, original and innovative. While simple at first glance, Marée ensures a fantastic and unforgettable experience. Along with several predefined homes, Marée also includes loads of inner pages for your convenience.

Mix and match the available with your creative touch and personalize Marée according to your taste. Marée also comes with WPBakery drag and drop page builder, Revolution Slider, unlimited colors, online store section, three paginations and several custom-made shortcodes. You can quickly establish the exact online portfolio you want with Marée. That said, take action now and bring your project to new heights.

More info / Download Demo

Molly

Molly is another magnificent solution for agencies and freelancers. If in need to sort out an attention-grabbing website as fast as possible, Molly is your best bet. Instead of starting from scratch, you can now go all-in with Molli and experience speedy and spectacular results. Once you see that all the work is already done for you, you will start creating the desired page with confidence and comfort. Have in mind, with Molli, you do not need to know how to code, thanks to the drag and drop page building technique.

Stunning index and internal page layouts await every Molly user out of the box. Feel free to use them precisely as they are or step things up a bit by introducing your originality to them. As mentioned earlier, any editing and improving happen with no need to know how to do any of the programming work. With Molly, you create a page like a pro even if you are still an utter beginner. Molli is also optimized for and SEO, responsive and cross-browser compatible. Get things going with Molly and shine on the internet.

More info / Download Demo

Forzo

Forzo has a distinct touch to it, which easily sets you apart from the competition. If that is something that sparks your curiosity, you better check out the live preview of Forzo. Be prepared as the amazingness and innovative look with surely blow you away. You start working with Forzo by selecting one from four predefined home page demos. Whichever you choose, you can expect a banging outcome that will impress everyone who pays your online portfolio a visit. Forzo is striking, indeed.

Forzo sports a minimal look with strong attention to details. It has a fluid layout which effortlessly readjusts to all devices, from handheld to desktop. It is retina ready. Additionally, Forzo includes two menus, blog, ACF Pro plugin, widgets and detailed UI. You can also translate Forzo to any language you want.

More info / Download Demo

Mono

Everything that you need to build the perfect website for is available in the Mono portfolio website template. It is this creative tool with all the features and elements that you need to create your website. In the bundle, Mono has a huge amount of 38 home pages for you to find the ideal one easily. On top of that, Mono also comes with several different navigation layouts for a killer overall site experience.

Mono is built with Bootstrap 4 and the layout comes fully responsive and lightweight. Your works will always look amazing, no matter the device they use to browse it. Multiple page preloaders, over fifty button styles, different portfolio arrangements and even predefined footers, Mono is here to deliver. When it is finally time to get the page that you always wanted, all you need is Mono.

More info / Download Demo

Quadra

Quadra is a multi-purpose, powerful and high performing template with creative individuals and agencies in mind. That said, you can also call Quadra a portfolio website template full of great assets and characteristics. It is one of those site skins that quickly adapts to all your needs and demands. In other words, it is the exact template you have always wanted to speed up the creation of your portfolio.

This tool practices all the latest and greatest technologies to ensure stability and smooth experience for all your visitors. No matter what you have to show off, this package is retina ready so it will always look amazing. With over seven hundred unique templates, you will never have to worry about your web design again. It is all done for you and is just waiting for you to jump in and use it. Let Quadra take the hassle of web design away from you.

More info / Download Demo

Cvio

As a freelancer or a professional individual, you would want to expand your reach one way or another. A fantastic solution to reach new clients is by making a page that pushes your skills and talents over and beyond. To your luck, you can now get things going forward instantly with Cvio. This portfolio website template is packed with handy treats that you can put into play and shine online. You can now kick things off like a pro right away and establish a website that will help you scale your business to new successes.

First and foremost, with Cvio, you can build both a one- or a multi-page website. Moreover, you will also benefit from six different index and other internal page layouts. Mix and match the available, introduce your signature style and have a page all set sooner rather than later.

Ryan

Ryan is an all-around and versatile portfolio website template for every professional who is looking to take his or her project to a new degree. Designers, programmers, app developers, freelancers and pretty much anyone else who is interested in building a personal website or an online portfolio can greatly benefit from the spectacular Ryan. Instead of doing all the heavy lifting yourself, save time and energy by using the powerful and practical Ryan.

In the massive bundle of features, you will find all sorts of goodies, like six preset color skins, page transitions, five layouts, dark and light mode, you name it. Build trust with testimonials, start a blog and let them get in touch with you via the integrated contact form. You will find Google Maps, too!

Of course, Ryan is also 100% mobile-ready and cross-browser compatible, ensuring a killer performance at all times.

glitch

Glitch is a modern, with a stunning and minimal look. It has loads of awesome features and functions which will help you create a striking web presence. There are four demos to choose from, but you can expect even more to drop with upcoming updates. Also, Glitche keeps on adding new amenities regularly to keep you stuffed with goodness for years to come.

Moreover, with the out of the box web design, you can quickly set up the desired page and shine online like a champ. Of course, you can also perform additional customization tweaks and make Glitche your own.

Other goodies include dark and light mode, one- and multi-page layouts, unlimited colors, six background options, Contact Form 7 and blog pages. Create a full-blown online presence with Glitche and take your project to new heights.

More info / Download Demo

MacLaren

MacLaren is a stunning portfolio website template with a striking dark look. If you would like to establish a strong first impression, do things with MacLaren and shine online. It is a tool you can utilize out of the box or improve further. MacLaren also follows all the modern trends and regulations, making sure the outcome operates without a hitch on all devices and platforms. In other words, MacLaren is 100% responsive and flexible, cross-browser compatible and in tune with retina screens. The tool loads exceptionally fast to ensure A-grade performance.

Google fonts, Font Awesome icons, animations, Google Maps, Bootstrap Framework and SEO optimization are just some of the other goodies that you get with MacLaren. Additionally, MacLaren comes with in-depth documentation for you to have a breeze using it. That’s that, create an online presentation that will impact everyone and raise your potential of winning over new gigs.

Wizzard

You can expect magical things to happen when you get access to Wizzard portfolio website template. If not magical, than wizardry for sure. Anyhow, Wizzard is a stunning and original approach to portfolio canvases for agencies and professional individuals. Be impressed by the one-of-a-kind home page design and grab the attention of everyone who visits your page.

With Wizzard, you display your works and projects in a distinctive way, rarely seen anywhere else. Meaning, use it, go against the norm and stand out from the crowd. The original grid appears gorgeously on any screen due to Wizzard's mobile-ready layout. On top of that, Wizzard also comes with an active contact form, a full-screen overlay menu and smooth scroll plugin. No questions asked, the final outcome will surely be one to remember.

More info / Download Demo

Casely

No matter what your talent is and what type of work you would like to display, it is Casely portfolio website template that is always going to be the very best way to do it. In short, Casely is a creative and modern design that always looks great. That said, Casely is compatible with all high-tech devices and modern web browsers what makes it work flawlessly at all times.

Casely comes packed with amazing animations to wow all your visitors as soon as they reach the home page. There are over twelve sample layouts to check out before you decide on your final design. Put together with beginners in mind, Casely is easy to use and work with, built with valid HTML5 and CSS3. Casely makes sure that browsing and investigating your content and work is always a fun experience.

More info / Download Demo

Arlo

Arlo is a superbly conceptualized template, following the notion of conveying fantastic service to its customers. This portfolio website template awakens your creativity by keeping things stress-free. However, it also takes business seriously. With various personalized layouts in store, you can design your site as an online resume, a portfolio or an interactive platform for your brand. In brief, with Arlo, you can hammer out the right website to take your business to a new degree.

This cracking template has a flexible and responsive layout, which enables you to present your products and services on all devices seamlessly. Core features include five homes, impressive and attention-grabbing animations, SEO, social integration, friendly support and more. You can also start writing a blog and let potential get in touch with you via the integrated and functional contact form.

More info / Download Demo

Satellite

From the name alone, you could surmise that Satelite is all about establishing a strong reach with your prospects. In fact, this portfolio website template is packed with advantageous features that turns simple into lucrative. All the designs that Satelite has available for you are responsive, which makes viewing hassle-free and engaging. Satelite is one of those templates that will easily differentiate you from the masses and put your right on top.

Some of the very many features of Satelite are intuitive shortcodes, smooth scrolling, outstanding page transitions and full-screen overlay menu. Your website will also load super fast and deliver a cracking experience for every site visitor. What’s also pretty cool about Satelite is the fact that it offers a 14-day money back guarantee which is not that common in the template space.

More info / Download Demo

Malena

An artist values ​​his or her portfolio the most. If you are on the same boat, the Malena portfolio website template offers its services which you can take to your full advantage. If you are curious, here's how it works. Creating a website with Malena is so easy, you can choose demos and other stuff or code your way out of it. Select from six available layouts and go from there. Mix and match the accessible components with your works and services and complete the process of establishing your online portfolio faster than possibly imagined.

Portfolio & CV

If you are looking for a remarkable approach to your web presence, is the way to go. This up to date page canvas will never go out of style and always treat you and your visitors right. There are both a light and a dark version to choose from, so you never feel like you are out of options. Bear in mind, the portfolio website template is also adjustments ready for you to tweak it to your needs however you fancy.

Along with all other great sections, the included portfolio is always the best way to showcase your works. It keeps all the visuals crisp and clean. Besides, the template is responsive and cross-browser compatible to smoothly adapt no matter the device or platform your visitors happen to use.

More info / Download Demo

Funky

Funky offers you over two hundred interface blocks and two thousand premium icons to give you the very best portfolio website template on the market. You can check over one hundred demo pages to find the design that works best for you. From index pages to all other inner sections, with Funky, you save yourself plenty of time. Funky is a Bootstrap 4 template to always provide you and your users with a stable and seamless experience.

In the Funky kit, you will find single- and multi-page concepts what opens the doors to a new specter of possibilities for you. No matter what your talent is, Funky is here to help you out pushing it to the outer world. All the elements you find are reusable for you to create the exact space that your best work truly deserves.

More info / Download Demo

Emily

For every photographer out there who is in need to showcase his or her work, Emily is the photography portfolio website template that you need. It is responsive, retina ready and practices all the modern technologies. Meaning, Emily performs extremely well across all platforms and devices. That said, expand your potential and attract potential new clients interested in working with you.

The code of Emily is clean and organized for beginners and pros to get the most out of it. Parallax effect, image slider, animated page transitions and social media icons, all these and loads more are the cool features of Emily. You also get a functional AJAX contact form and do not have to worry about the search engine optimization. Expand your reach, go online and push your photo project to the limits.

More info / Download Demo

Gullu.ly

It is not only that the web design of this next template will surely spark your interest, but it is the name that will do the same thing, too. Meet, Gullu.ly. It is a creative website template for agencies willing to push their portfolio and services. While Gullu.ly is primarily for small businesses, many freelancers will find it a great fit for their projects as well. After all, Gullu.ly is a multi-functional template, easy to edit and simple to maintain.

Gullu.ly comes with four home variations, is retina ready, sports pixel perfect coding and cross-browser compatibility. Working contact form, documentation and fast and reliable support are also available to everyone who downloads the template. Take a test run by checking Gullu.ly’s live preview of the demos, four portfolio layouts and other goodies.

More info / Download Demo

Inshot

For the most flexibility with galleries, check out Inshot portfolio website template today. It is a contemporary and responsive website template for photographers, as well as designers and anyone else who needs a quick way to put their work on display. Inshot will show your masterpieces in the very best light possible. It comes with seven different unique index pages and six different portfolio variations to choose from.

Due to its mobile readiness, Inshot works perfectly fine with both mice on a desktop and touching and swiping on a tablet or mobile device. You can also set up a Twitter feed to make sure your users always stay up to date with everything that you are currently up to. Besides, Inshot is also compatible with MailChimp subscription form for you to start capturing your visitors’ emails right away.

More info / Download Demo

Alpha

If you truly want to have the power of web design in your hands, then you, undoubtedly, need Alpha portfolio website template on your side. In the bundle, you will find everything that you demand to craft an awe-inspiring space on the web. Alpha is great for resumes, CVs, vCards, as well as for those who want to appear differently. Whether you are a job seeker or a freelancer, having a solid online appearance will do you great.

Alpha comes with 38 HTML pages of which thirteen are home pages, nine are portfolio layouts and two ready for pricing tables. Blog and blog details included! Alpha comes with four different navigation and menu types that you can go through first before you settle on the one that you genuinely like. Whatever you have in mind, you are able to create it with Alpha. Jump in with both feet and develop a cracking page for your creations.

More info / Download Demo

Sepia

This collection of the best portfolio website templates is a great resource for every creative mind out there, including photographers. Speaking of which, Sepia is an exclusive photo website template with more than 78 predefined pages, front and inner. As for the former, Sepia has eight at your disposal and more coming your way with future updates. Seven main styles of albums and four galleries are also available for you to push your works.

Sepia does come with Google Maps, Google Fonts, Font Aweomse icons, content carousel and a wide collection of other stuff. Building and customizing a page to your needs with Sepia is a solid opportunity to take your adventure to attain the goals you set for yourself. There is no time to waste anymore, start the process of refining your website today with Sepia.

More info / Download Demo

canna

You will not need to look any further than Canna when you are in search of a portfolio website template that works right for you. Canna is based on Bootstrap for the page pliability that you must not avoid in the mobile-first era we live. You get twelve stunning home page demos which you can use out of the box or adjust them to your requirements. When it comes to colors, Canna comes with six color schemes for you to quickly find the one that suits your branding best. But introducing other colors is possible, too.

More goodies of Canna come in the form of Revolution Slider, Hero video background, parallax sections and CSS animations. It also sorts out the process of clients getting in touch with you with an integrated and working form. Of course, you also receive exhaustive documentation so you never run into troubles.

More info / Download Demo

Stash

Stash is a dynamic and versatile WordPress theme. It suits any person at any given moment as long as they have a project in mind. It does have potential to benefit those with and artistic side and all professionals. Stash is based on a Visual Composer block builder, +260 blocks and +85 to play with. Stash is also entirely responsive and has tons of customizations to make. It adapts to screens and devices with ease! In addition, dropdown menus help you out with that a lot. Stash counts with tons of specialized demos and pre-built options to get crafty. It is the best on image display and appeal. You will get Slider Revolution integrated for galleries and and 7 built-in portfolios. Set amazing detailed layouts with multiple headers, unlimited colors and blogs.

Stash will let you beautify backgrounds too with CSS3 animations and Parallax. Attract clients with amazing features and get them to appreciate what you offer! Stash is compatible, to impress you even more, with WooCommerce. Set gorgeous shops to make your site ready to make business. WPML for translations and Minimal Forms are also available. Overall, this is a fast and SEO improved tool that will simply make you feel reassured and listened! Don't hesitate! Get Stash!

massive

Massive is a truly humongous, vastly expansive, deeply resourceful, feature-rich and function-dense, graphically polished and visually stunning, endlessly flexible and easily customizable, fast loading and superbly modern HTML5 and CSS3 responsive multipurpose website template, a truly mindboggling website template that has been put together with the utmost care and thoroughness. The end result is a staggering 260 different, completely preconfigured HTML5 unique webpages for all sorts of different purposes and applications.

Among them, 85 entirely unique, creative and outstanding portfolio template pages make Massive a remarkable website template for all sorts of webmasters seeking to establish their online portfolio websites with a set of tools that is all-inclusive, thoughtful and polished, as well as capable of having a fully functional, fleshed out portfolio website set up and running within minutes, owing to the great amount of flexible, ready to use templates included with Massive. Over 15 preconfigured sliders can live up any website whatsoever, while 6 different footer options keep things diverse and 20 different menu styles let your users explore your content just the way you want them to. What you cannot find ready-made outright within Massive, you can easily build yourself, with an excess of 150 custom-built shortcodes ready to deploy on any page you see fit. Massive-it really is the endless template.

Haswell

Haswell is a visually accomplished and aesthetically minimalist, tasteful and fashionable, aesthetically polished and functionally resourceful multipage website template. It’s also highly customizable and extremely easy to use, function-dense and plugin-rich responsive HTML5 and CSS3 multipurpose template. The developers built this extraordinarily powerful website template with raw strength and sheer pliability. It seamlessly lends itself to a wide range of diverse uses and applications. They also suited Haswell uniquely for deployment among portfolio websites of all kinds and natures.

The developers uniquely constructed Haswell to add a layer of tasteful refinement to essentially any content it handles. On top of that, a wealth of diverse portfolio template pages included out of the box make hitting the ground running a matter of course with Haswell. You will have a fully fleshed out portfolio website within minutes, decked out with a diversity of customizable headers, menus, social media feeds, specialized video and image masks, containers and plugins, and so much more it will make your head spin, all packed into a stylish package based on the potent HTML5 framework, dynamic and and the wonderfully responsive and easily modifiable modular Bootstrap codebase, that renders your Haswell native portfolioly cross-compatible across all devices and platforms. What else can you ask for?

Jango

Jango is a completely customizable, visually expansive and highly graphically polished, functionally flexible and feature-rich, smart and cleverly coded, efficient and fast loading, modern and reliable responsive HTML5 and CSS3 multipurpose website template, an incredibly handy and powerful toolkit that has been deliberately crafted as an all-inclusive website solution for a huge range of different website applications, but that is peculiarly well equipped for handling the needs of modern, responsive and flexible portfolio of websites of all kinds.

Disclosure: This page contains external affiliate links that may result in us receiving a commission if you choose to purchase the mentioned product. The opinions on this page are our own and we don't receive additional bonus for positive reviews.

Competently composed and visually designed, in our case, this is a separate page, it is an important element of a personal website or blog, of any specialist who has reached a certain level of skill in his professional activity.
A portfolio page is a kind of report, or a visual summary, with the help of which you can clearly demonstrate to readers and visitors of the site / blog, a set of the most successful completed works, whether it be photos, articles, publications, design elements, etc.
I don’t have such a page and, on my part, this is an unfortunate omission that needs to be corrected as soon as possible, which I’m actually working on at the moment.
In the vast expanses of the global network, you can find a huge number ready-made templates pages for portfolio organization, and the variety of such pages is truly impressive. So, whoever cares about all the intricacies of web design and development will always be able to find a suitable option for themselves. Well, for those who suffer from knowledge in website building, I propose to analyze an example adaptive layout, a simple portfolio page, with filtering of completed work by category, done on , diluted with an attractive transition effect, with animation elements.

The layout of the page, executable javascript and some design elements, gave out "to the mountain", a wonderful web designer and developer Kevin Liew (queness.com). When choosing the optimal solution, it was important for me that it was ease of execution, the functionality of the jQuery plugin, correct operation in all modern browsers, and given the ever-increasing popularity of using various mobile devices for Internet surfing, the adaptability of the design of the future page. No pretentious, designer bells and whistles and heavy plug-ins.

The basic layout consists of two main elements user interface The ones we need to build are tabbed navigations for filtering the categories of submitted work, and the thumbnail grid itself with a pop-up caption effect on hover.
For starters, in order for everything to eventually work, jQuery will be required at least version 1.7.0. If you have not yet connected it, then add the following line before the tag :

Run the MixItUp plugin, paste this code after the above files:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] , easing : "snap" , // call the hover effect onMixEnd: filterList. hoverEffect() ) ) ; ) , hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function () ( $(this) . find(".label" ) .stop() .animate(( bottom: 0 ) , 200 , "easeOutQuad" ) ; $(this) .find("img" ) .stop() .animate(( top: - 30 ) , 500 , "easeOutQuad" ) ; ) , function () ( $(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this) .find("img" ) .stop() .animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList.init() ; ) ) ;

It makes no sense to consider all the plugin options separately, the default is quite the best option. Well, if anyone is put into experiments with parameters, please, everything is in your power.

To form the page layout and the appearance of the elements, connect a couple of files to the document . , one for the base styles, let's call it layout.css and another small CSS file normalize.css , for better browser consistency in standard design elements:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Now we will analyze everything in order, if possible without unnecessary water, in an accessible and understandable way, in our native, long-suffering language.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >All < li>< span class = "filter" data- filter= "app" >Applications < li>< span class = "filter" data- filter= "card" >business cards < li>< span class = "filter" data- filter= "icon" >Icons < li>< span class = "filter" data- filter= "logo" >Logo < li>< span class = "filter" data- filter= "web" >Web design

• All
• Applications
• business cards
• Icons
• Logo
• Web design

On the navigation panel, we place the entire list of works, divided into categories. We need to connect each portfolio category through the data-cat attribute with one or another navigation bar item in accordance with the value in the data-filter attribute. By matching data-filter values ​​with data-cat , portfolio items will be filtered by category.
In addition, to the thumbnail, hidden for the time being, we will add a small panel with the name of the work and the category title, which pops up only when you hover over the image. And to make it easier to form the appearance of this entire structure in CSS, we will write the corresponding classes to the elements:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Hosting Beget. Ru < span class = "text-category" >Logo < div class = "label-bg" > .........

Please note that you can add links to the picture or directly to the signature so that the user can see all your work in full.

css

Now, quietly glanders, let's move on to the most interesting part, to the formation in CSS of the general styles of the user interface of our portfolio page and its adaptive version. In the article I will indicate only the basic (default) values, that is, without any background images and connected fonts, all this, who needs it, can be seen in the demo, or found in the source archive.

.container ( position : relative ; width : 960px ; margin : 0 auto ; /* You will be able to see the navigation chain when the browser window is resized */-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition : all 1s ease; ) #filters ( margin : 1% ; padding : 0 ; list-style : none ; ) #filters li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* add some shadow to the text */ text-shadow : 1px 1px #FFFFFF ; cursor : pointer ; ) /* change category background on hover */#filters li span: hover ( background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* background of active category item */#filters li span.active ( background : rgb (62 , 151 , 221 ) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; width : 23% ; margin : 1% ; display : none ; float : left ; overflow : hidden ; ) .portfolio-wrapper ( overflow : hidden ;position : relative !important;background : #666 ; cursor : pointer ; ) .portfolio img ( max-width : 100% ; position : relative ; ) /* captions are hidden by default */.portfolio .label ( position : absolute ; width : 100% ; height : 40px ; bottom : -40px ; ) % ; position : absolute ; top : 0 ; left : 0 ; ) .portfolio .label-text ( color : #fff ; position : relative ; z-index : 500 ; padding : 5px 8px ; ) display : block ; font-size : 9px ; )

Container ( position: relative; width: 960px; margin: 0 auto; /* You will be able to see the transition chain when the browser window is resized */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o- transition: all 1s ease; transition: all 1s ease; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* add some shadow to the text */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) /* change category background on hover */ #filters li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* background of active category item */ #filters li span.active ( background: rgb(62, 151, 221 ); text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box- sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .po rtfolio-wrapper ( overflow:hidden; position: relative !important; background: #666; cursor:pointer; ) .portfolio img ( max-width:100%; position: relative; ) /* labels are hidden by default */ .portfolio .label ( position: absolute; width: 100%; height:40px; bottom:-40px; ) . portfolio .label-bg ( background: rgb(62, 151, 221); width: 100%; height:100%; position: absolute; top:0; left:0; ) .portfolio .label-text ( color:# fff; position: relative; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

In the second part, right in the same style sheet, with the help of several media queries, we will create alternative CSS sections. In order for the layout of our page to display correctly on the screens of various mobile devices, we will add alternative CSS rules for different screens to these sections. Thus, we easily override any rules previously set in our CSS table for regular browsers and achieve the very desired adaptability.

/* Tablet */ @media only screen and (min-width : 768px ) and (max-width : 959px ) ( .container ( width : 768px ; ) ) /* Mobile - Note: Design for 320px width*/@media only screen and (max-width : 767px ) ( .container ( width : 95% ; ) #portfoliolist .portfolio ( width : 48% ; margin : 1% ; ) ) /* Mobile - Note: Design for 480px width */@media only screen and (min-width : 480px ) and (max-width : 767px ) ( .container ( width : 70% ; ) )

/* Tablet */ @media only screen and (min-width: 768px) and (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobile - Note: Design for 320px width*/ @media only screen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Mobile - Note: Designed for 480px width */ @media only screen and (min-width: 480px) and (max-width: 767px) ( .container ( width: 70%; ) )

That's all. Our wonderful page under the capacious name "Portfolio" is ready, it remains only to fill it with your no less wonderful and outstanding works, and put it on display for the whole world. You can still quietly, modestly, be proud of yourself. The main thing is not to overdo it in this matter.
See the example again and, if necessary, take the source code, at your leisure, in a quiet home environment, you can bring this work to perfection.

When creating the lesson, the material used was: . The original, pristine, just from the author's pen, portfolio page, is located there.

Good luck to everyone and with the benefit of the body, spend the rest of the short summer!