Petter – Responsive Graphic Design Portfolio Website Template
Petter is an extremely creative graphic design portfolio website template built with html5, css3 and bootstrap framework suitable for graphic and web designers. It has 100% responsive design and cross browser compatible. View demo!
Free for personal & commercial use · keeps a small “Designed by ThemeVault” footer link · no card needed
- HTML
- CSS
- JS
- Bootstrap 5
- Released Sep 2017
- v2.0 · Oct 2026
- 24 pages+ 2 HTML emails
- v2.0updated Oct 2026
- 3,554views
- 505downloads
Petter is an extremely creative theme for graphic design portfolio website template built with html5, css3 and bootstrap framework. The template is suitable for web designers, artists, graphic designers, web developers and professionals to put their work online in impressive manner. This template for portfolio website comes with enlighting features, high quality images, beautiful hover effects, well structured code, blog section with css effects, easy social shares and a decent contact form which made it easy, attractive and effective to share your work with clients. You can use this template to create your personal portfolio. Check out the demo for deep understanding.
Version 2.0 is a complete redesign on Bootstrap 5, with every behaviour in plain JavaScript, and it ships two portfolio designs in one template, switched from a small View control on the right edge of the screen. Canvas is warm white with orange, teal and violet accents: the hero is laid out like a designer's artboard, with projects as frames, a selection box with handles and two named cursors at work. Cover Story is orange and ink and turns the home page into a magazine cover, with the portrait as the cover photo and cover lines that jump to each section. Every original page remains with real portfolio copy, including the three home pages, four blog layouts with a working search, three single-post layouts with comments, the 404 page and the eleven element pages. The team section became client testimonials tied to the projects, and two new pages join them: a full project case study and a service page with packages and an FAQ. Two ready-to-send HTML emails are included (contact auto-reply and comment received), and the layout is tuned for tablets and phones. Buyers can keep one design by deleting a single script line.
- Two designs in one template (Canvas + Cover Story)
- Project case study and service pages
- Working contact and comment forms with emails
- No jQuery: Bootstrap 5 and plain JavaScript
- Blog with sidebar, grid and search
Pages
- index.html
- home1.html
- home2.html
- project.html
- service.html
- blog.html
- blog-grid-3.html
- blog-left-sidebar.html
- blog-right-sidebar.html
- single-blog.html
- left-sidebar.html
- right-sidebar.html
- accordions.html
- alerts.html
- buttons.html
- feature-box.html
- form-fields.html
- grid.html
- icons.html
- message.html
- page-titles.html
- tab.html
- typography.html
- 404.html
- email-comment.html
- email-contact-reply.html
Features
| Template Type | Free |
|---|---|
| Compatible Browsers | Opera, Firefox, Google Chrome |
| Link hover effetcs | Yes |
| Coding | HTML 5, CSS 3, 1170 Grid System, Bootstrap 5 |
| Forms | Comment Form, Search Form, Contact Form |
| Additional Features | Full Height NavMenu, Masonry Image Grid, Accordian, Light box, Gallery, Favicon, Stick To Top, Responsive Design, Social Links, Back To Top Button |
| Image Sources | Flaticon, Pixabay, Pexels |
| Pages | Blog, 404 Page, Portfolio |
| Banner Slider | Vanilla JS Slider |
What’s new
- Two complete new designs in one template, switched from a small "View" control on the right edge of the screen (the choice is remembered; ?view=canvas or ?view=cover in the address picks one): "Canvas", warm white with orange, teal and violet accents in Gabarito and Instrument Sans: the hero is a designer's artboard, with projects laid out as frames, a selection box with handles and two named cursors at work, and a floating toolbar header; "Cover Story", orange and ink in Rozha One and Golos Text: the home page reads like a magazine cover, with Petter's portrait as the cover photo and cover lines that jump to each section. Buyers keep one design by deleting a single script line.
- Rebuilt on Bootstrap 5 with Font Awesome 6; every behaviour (menu, smooth scroll, portfolio filter, lightbox, slider, tabs, back to top) is now plain JavaScript, with no jQuery, and the fonts are self-hosted.
- Every original page is kept with real portfolio copy in place of the placeholder text: the three home pages (main, slider background, gradient banner), four blog layouts with a working search, three single-post layouts with comments, the 404 page and the eleven element pages.
- The team section became client testimonials, each tied to a project in the portfolio, with a "Trusted by" row.
- Two new pages: a full project case study (brief, goals, results, process timeline, brand system, gallery, credits) and a service page with packages, FAQ and related work.
- Every form works and confirms: the contact form on every page and the blog comment form.
- Two ready-to-send HTML emails: contact auto-reply and comment received.
- Tuned for tablets and phones: centred tablet layouts, no sideways scrolling from 320px up.
Already downloaded this template? Your My Downloads page always serves the latest version — re-download free.
Download Details
- Published
- September 07, 2017
- Categories
- One pagePortfolioFree Responsive Website Templates
- Tags
- CSS3Design PortfolioDesigner PortfolioHTML5One pageOne page templatePortfolioPortfolio TemplatePortfolio Web PagePortfolio Website TemplatePremiumProfessional PortfolioSimple Portfolioresponsiveweb design
Source
- HTML
- CSS
- JS
- Bootstrap 5
Please note that the images in the template will be blurred in the downloaded package.
Support
Facing issues with this template? Write to support@themevault.net and we'll help you out.
License
Free for personal & commercial use with an attribution link to ThemeVault. Read the license.
Reviews
No reviews yet — be the first to review this template.
2 designs in one download
Petter ships two complete designs on the same pages — pick one when you build your site. Switch between them in the live preview with the View control on the right.
See all 26 pages at a glance
Each page is built and ready, including the 404 page and the emails.
Homeindex.html
Home1home1.html
Home2home2.html
Projectproject.html
Serviceservice.html
Blogblog.html
Blog grid 3blog-grid-3.html
Blog left sidebarblog-left-sidebar.html
Blog right sidebarblog-right-sidebar.html
Single blogsingle-blog.html
Left sidebarleft-sidebar.html
Right sidebarright-sidebar.html
Accordionsaccordions.html
Alertsalerts.html
Buttonsbuttons.html
Feature boxfeature-box.html
Form fieldsform-fields.html
Gridgrid.html
Messagemessage.html
Page titlespage-titles.html
Tabtab.html
Typographytypography.html
404404.html
Email: commentemail-comment.html
Email: contact replyemail-contact-reply.html
The home page on a phone, as it looks in the live demo.
What you get in the ZIP
Everything is plain files you can open in any editor. No build step and no installs.
- 115files
- 3.7 MBZIP size
- 26HTML pages
- 38images
Please note that the images in the template will be blurred in the downloaded package.
petter-graphic-design-portfolio-website-template/ ├── index.html ├── 404.html ├── accordions.html ├── alerts.html ├── blog-grid-3.html ├── blog-left-sidebar.html ├── blog-right-sidebar.html ├── blog.html ├── buttons.html ├── email-comment.html ├── email-contact-reply.html ├── feature-box.html ├── form-fields.html ├── grid.html ├── home1.html ├── home2.html ├── icons.html ├── left-sidebar.html ├── message.html ├── page-titles.html ├── project.html ├── right-sidebar.html ├── service.html ├── single-blog.html ├── tab.html └── typography.html
No build tools, no installs
Get the ZIP
Free, instant and no card needed. Unzip it anywhere.
Add your content
Change the text and photos in the HTML files with any code editor.
Upload and go
Upload the folder to any web host. It's plain HTML, so it runs anywhere.
About this template
Can I use Petter for a client's website?
Yes. The free version is licensed for personal and commercial use, including client work, as long as the footer credit stays. Remove it for $9.00₹499 one-time, or with Pro.
Do I need to know how to code?
You'll need to edit the HTML text and swap the images, which any code editor can do.
Will I get updates?
Yes. Your My Downloads page always serves the latest version, so you can re-download an update free. The What's new tab lists what changed in each version.
Are the photos included?
The images in the template are blurred in the downloaded package, and the photos in the live demo are for the demo only. Add your own images.
Subscribe Us
View Similar Templates
FoodFries WordPress
$19.00₹999Blog, Business & Services, Food & Restaurant, Landing Page, One page
- WordPress
- Next.js
- Astro
View Blog
- Wordpress
- August 10, 2017
Bootstrap Portfolio Templates: 5 Free Bootstrap 5 Designs (2026)
Five free portfolio templates built on Bootstrap 5.3, who each one suits, and how to customize the grid, popups and tabs with Bootstrap's own classes.
- Design
- July 13, 2017
Best Fonts for Websites (2026): Free Pairings That Read Well
Twelve free Google Fonts pairings taken from real website templates, the body fonts that do the hard work, and simple rules that make any font read better.
- Design
- July 12, 2017
Web Design Inspiration: Where to Look and How to Use It (2026)
Where I look for web design inspiration, six ideas from our 2026 redesigns that work for almost any site, and how to turn screenshots into your own design.





