Free HTML Template Andia: Responsive Agency/Portfolio Template built with Twitter Bootstrap

Published on: Dec 28 2012 by Anli

Andia: Responsive Agency/Portfolio Template

Today’s free web design resource is a big one! It’s a responsive agency/portfolio HTML template named Andia and built with Bootstrap. Andia comes with 7 fully responsive pages, Home, Home 2, Portfolio, Services, About, Contact, Pricing Tables and it’s perfect for creating a website for a small business or a personal portfolio.

Some of Andia’s features include: responsive layout, responsive image sliders, filterable portfolio, AJAX contact and email subscription forms, Flickr photos, Font Awesome icons, Google Maps, etc. So, take a look at the live preview below, download the template and let me know what you think.


Features

  • Responsive Layout (Bootstrap 3.3.1)
  • 7 Pages: Home, Home 2, Portfolio, Services, About, Contact, Pricing Tables
  • 2 Different Responsive Image Sliders
  • Dropdown Menus
  • Filterable Portfolio (now supports also videos as portfolio items)
  • Working AJAX Contact Form with Validation
  • Working AJAX Email Subscription Form with Validation (you receive the subscribers in your email)
  • Latest Flickr Photos
  • Font Awesome Icons
  • Pricing Tables
  • Google Maps
  • Nice CSS3 Animations
  • HTML5 & CSS3

Demo, Download and License

Version 2.1

Read the ChangeLog and see what has changed.

VIEW DEMO

DOWNLOAD TEMPLATE: Andia - Responsive Agency/Portfolio Template, version 2.1 (24868)

Version 2

Read the ChangeLog and see what has changed.

VIEW DEMO

DOWNLOAD TEMPLATE: Andia - Responsive Agency/Portfolio Template, version 2 (20477)

Version 1

VIEW DEMO

DOWNLOAD TEMPLATE: Andia - Responsive Agency/Portfolio Template (78653)

License:

You can use this template in personal and commercial projects, but you can’t sell or distribute it directly, “as is”. If you plan to use it, a link to this page or any form of spreading the word will be much appreciated.

Photos used in the live preview by:  Paul BicaNorway Geographical’s Nature Photos, Shermeee, envato.

Testing Versions

These are versions of the template that come from the quick tutorials that I publish from time to time. I get the ideas for these tutorials usually from user questions or from my everyday web development work. These versions might have NOT been included in official releases of the template.

Take a look at the Andia testing versions here!

Similar Templates

Jalia - Bootstrap Business Template Asia - One Page Bootstrap Business Theme

120 Comments So Far

  1. andy says:

    Hi there, I hope you can help me, I have adapted your theme Andia and its really working well, there are some questions that I would like you to help me with if possible. I love what you have done and I am learning a lot from the way you do things. Can you help me with the php mail form, at the moment I am not getting the NAME return, also I have added a PHONE field where SUBJECT used to be, that is now working but the phone is coming up as the subject of the email. What I would like is to be able to add other fields such as AREA, PRICE RANGE etc but now not even the NAME is being sent via email, I am just getting the EMAIL FROM , PHONE (subject) and MESSAGE. What am I doing wrong?

    Also in the testimonials area, there are two issues.

    1. how does it work on other pages where I want a different testimonial to be there? also can it cycle through them like the slideshow but for text?

    2.in responsive smaller views such as on an iPhone, the text in the testimonial goes to a very thin long column rather than wrapping around, can this be fixed?

    SLIDER
    1. If you also look at the slider in a small responsive viewer such as iPhone the left and right navigation arrows stay very big which looks odd.

    2. If you click on one of the thumbnails the slider jumps to the picture which is fine, but then the slideshow stops, could it be set so that when there is interaction it stops, even just hovering the cursor over the big picture, and then it carries on when interaction is over? that is how i have it set on another site i did here: http://www.fivestarluxuryclean.com but i cant see how to do it on your system.

    I would love to help you with feedback like this by the way, I think you have a great style so let me know if you want me to get through anything with suggestions.

    Regards
    Andy Reynolds

  2. Yasir Ali says:

    Hi Anil

    I like your theme, and I am interested to use this in my portfolio website. It’s really great design, but I am facing a problem only on my chrome browser, i.e. It view is stretched on Chrome, but working perfect on Firefox and Safari.

    This design is working fine on my friends Chrome browser as well. Could you please help me, how can I fix the design issue with my chrome.

    Thanks in advance.

  3. mark says:

    Hello, very nice! great work!
    I have only a question.
    How I can modify the map to use with another address?
    I don’t understand where is the address to modify.
    Thanks in advance.
    Best Regards,
    Mark

  4. Mark says:

    Hi Anli, I wrote one week ago but I don’t have no email.
    I think that there is a problem with my email.
    Sorry if rewrite.
    Your theme is beautifull, very nice and innovative.
    I have a question for you.
    How to change the address in the map?
    The question may be simple but I don’t understand how change the address to modify tha maps with another address.
    Please Anli, can you replay?
    Thanks a lot in advance.
    Best Regards,
    Mark

    • Anli says:

      Hi Mark, there is no problem with your email. If you see above, this template has more than 4000 downloads so, it’s difficult for me to reply to all questions immediately and also continue creating other freebies.
      Now, to answer to your question, open the “scripts.js” file (assets/js) and find this line:

      var position = new google.maps.LatLng(45.067883, 7.687231);

      Replace the 45.06.. and 7.68… with your coordinates. To get your coordinates make a quick google search: “how to get google maps coordinates”.

      • Mark says:

        Thanks a lot Anli!
        4000 download are a good satisfaction! very nice! great work!
        Sorry Anli but I use Chrome and I have same problems: I didn’t see my first comment in the page of your site.
        Thanks a lot!

  5. Abdul Ahkam says:

    Hey, I wanna use ur theme for donation website 🙂
    But, the web is still under developement. so, i just wanna say thank you, before i forgot ur website 😀

    Thanks for this beautiful theme.

  6. sasa says:

    hey..this is awesome dude 🙂
    and you share it to us ^^
    let me ask ur pemission, wanna use ur template for our school website
    big thanks for all you guys

  7. Juan José González says:

    Hello, great theme I want to know if I can use it in a open source GPLv3 – AGPLv3 web application

  8. Jean says:

    I fell in love whit this template it amazing i incorporated some you layout because it just fantastic

  9. Satyadeep says:

    Thanks for this beautiful template!
    I have just one issue though. In the portfolio page When I click Logo Design/ Web Design filters, the bottom part of the list items are clipped and overlapped by the footer. Can you please help.

  10. mind oxygen says:

    Hi, I loved downloading and using Andia template. It is beautiful. I had one problem. I couldn’t figure out how to get my google maps co-ordinates. Luckily, you answered someone else’s question. I figured out how I can get my locations co-ordinates. It worked like magic.Thanks a lot, buddy!.

  11. Ned says:

    Hey Anli,

    Thanks so much for the template!!! Fits in perfectly for what I need! Just a quick question, how do I change the email address that the contact form sends to?

    Cheers,
    Ned

  12. EJ says:

    Hi Anli –

    Nice work!

    Just an observation here that may be helpful to know –

    It looks like IE is adding a background gradient to the Nav Menu. It does not appear in Firefox and Chrome.

    The theme looks great!

  13. sun says:

    @author

    Hi,

    I plan on converting this to a wordpress template and selling it on my personal site. Is there a fee involved if I wanted to do this? How do you see this working?

    • Anli says:

      You have to modify the graphics so it doesn’t look like this one.
      In the future I may convert this template to wordpress and release it for free.

  14. David says:

    Thanks for this template it is really cool. I am having trouble with the flex slider caption being compatible in IE. I was wondering if anyone has encountered this, and if so, if anyone has come up with a solution. Great theme – thank you!

  15. Freddy Fredy Fred says:

    Hi, and thank you for a beautiful looking template.

    I have successfully edited the layout to suit my needs.
    I am having a problem changing the images in the Portfolio container though. Every time I change one of the images, the hieght, width or both of the spans contained within change.

    I would like to change the images simply by pointing to a different source file.

    Please tell me what stupid mistake am am making and how simple I am for not spotting it myself.

    Thank you in advance.
    Freddy.

  16. Vishal G Kamath says:

    Hi,

    Thanks a lot for the template. I hope I can use it for commercial purpose with a little modification in UI.

    Regards and Keep up the good work 🙂
    Cheers !!!

  17. Leonardo says:

    Hey guys, thank you a lot for collaborate! this is an amazing one. Really liked it .

  18. PhoenixUK says:

    Can you tell me, will this only work within a WordPress powered site or can the template be used without WP as a standalone site?

  19. romeo says:

    Great job man, but i have issues, the template is not compatible with IE and the flex slider is not responding fast when uploaded but on my local system is working well. Can you pls help resolve this.

    Good Job

    • Anli says:

      Thanks, I’m glad you like it. The template is not compatible with IE 6-7-8, but is compatible with IE 9 (and I think also with IE 10, not tested though).

  20. tom says:

    Hi, how do you change the Pink colour to something different?
    Where is colour setting stores?

  21. Edward says:

    Thank you, Anli ! This is a great theme which i am using it for a photography portfolio website ! You are such a good HTML website creator !

    Thanks again ,
    Edward

  22. Antonio says:

    Hey so I’m practicing my HTML/CSS3 skills with this template by reorganizing and editing. I ran into a little stumble though, I removed the “Andia” logo on the top left and replaced it with a google font, BUT for some reason I can’t get the h1 to gain size. I’ve tried the font-size property in your style.css file and some other methods but nothing is really working out. Is there intervening you might know of that is preventing me from raising the size of the h1?

  23. Christian says:

    latest tweets do not update more: help me, please!

  24. marty says:

    Hi,
    Thank you for this awesome theme!
    One question: when using fewer images on the portfolio page, how can I center them? Removing an image creates a blank space in the gallery, and I prefer that the remaining images center themselves within the larger space.
    It’s not hard to do, but the challenge is not breaking the responsiveness in the process!

    Thanks again!
    -Marty

  25. phattharachanon says:

    I have a small business for building a website for customer, i like this template. O can use this template for my customer?

  26. Amiguel says:

    How do I edit so there can be more then 4 testimonials? I’ve searched through every JS & CSS file and I can’t seem to find find or be able to edit it anywhere.

  27. Siba Sankar Samal says:

    Hiiiii, andy luv ur design and want to use fivestarluxuryclean.com so help me out

  28. superbyte says:

    Hi,
    thank you very much for sharing this awesome template with us! I have a task which I cannot solve. I want to change the icon of the google maps marker and programmed a bit of javascript. But it is not working. The map is rendered but the icon not. Could please help me?

  29. Yusuf says:

    Hello there Anli.

    This is an incredible template and I’m excited to use it for my upcoming small business. I’m not familiar with wordpress and learning it as I got along. For this template i downloaded it on Dreamweaver. I looked on your demo and the blog section is missing. Im not sure why, but I would I was hoping you forgot and it’s wordpress friendly. If you there is a request by email to receive the blog section of the site please let me know. I have you bookmarked on my browser and enjoy everything i have seen.

  30. wanchop says:

    Can I re-design and develop this theme and sell it ??

    Thank you

  31. Burak says:

    Hey there Anli,

    Congrats for the great work and for this great template! I’d really liked it and enjoying to customize but I have a problem with Portfolio page. Neither on my PC nor at my hosting space and even not at your demo page it doesn’t work. I mean they open and enlarge but they are not switching with not with keyboard arrows or something. Can you help me with this issue?

    Thanks buddy

  32. Really nice template. Can use this template?

  33. teset says:

    amazing work you are a great human.

  34. JJ Spelman says:

    Very nice theme! Like how you used a logo that is more square than rectangular. many themes out there use very rectangular logo setups which makes it more difficult to accommodate a logo that is more portrait in orientation. Thank you for sharing!!!

  35. filippo says:

    i have a problem whit installation in wordpress.
    the probelm is miss css style

  36. rob says:

    Nice temlate, thank you, but the Twitter module doesn´t seem to work, it keeps saying ´loading´ (like on your site too). I altered the scripts.js accordingly. Is it working=

  37. Rob Taylor says:

    Hi

    This a really excellent theme – Thanks.
    One question, how do I increase the time delay between the page loading and the slider appearing?

    Thnks

    Rob Taylor

  38. yedukondalu says:

    Hi, I’m Yedukondalu Ui and UX designer from Hyderabad, Andhra Pradesh, India.

    I saw your works which as you showed in to the webpage. i really happy with your bootstrap responsive template but now i downloaded on of your done by your template (andia-agency). that’s good. I block any area if any please support me.. Great job dud..

    Tanks in advance.
    I wish you a gud luck..

  39. Tore says:

    Hi there, and thanks for a great design, you are awesome 🙂

    I wanted to add an extra category to the gallery on the portfolio page to sort by, and you have made it so easy to do, that is just great scripting man!

    One question, would it be possible to link to from a page to an already sorted gallery on the portfolio page?

  40. J Palmer says:

    Hello from Downunder Anli,

    Thanks for this great template. It has helped me to understand the structure and function of html5 and css3.

    I’ve checked other comments and your FAQ and can’t figure out how to replace the embedded Google fonts api with local fonts from my server.

    There seems to be a lot of “font” references in the html, boostrap, js and styles.css files.

    Do I just comment out or delete the fonts.googleapis.com stylesheet links in the html page headers, and replace them with local file paths, and also just replace the font-family refernces in the styles.css with my preferred fonts, or are there other refereces I need to change or delete as well?

    Thanks in advance for any help.

    Cheers

  41. Xingo says:

    Thank you for your lovely template.
    I am having difficulty adjusting the hieght of the slider. Try as I might, nothing seems to work.
    If you could point me in the right direction I’d be an even happier man.

    Thanks in advance.

    Xingo

  42. russian says:

    Hi,

    can i use this templete for any project and make changes according to my requirements!!
    your templete is nice, can you make tutorial for it because it really help me to learn and explore new things and skills.

    Thanks!!

  43. Ino says:

    Hi Anli,
    I tried your template & it works perfectly. Thank you so much for allowing me tu use it. The code is so clear, even a non professional like me was able to adapt it…

    (a wedding minister)

  44. valérie RIETSCH says:

    Hello,

    it’s a very beautiful template ! congrats

    I have a problem with the contact form : it seems to do not work. i’ve changed my adress mail in the php file and that’s all.
    Can you help me ?

    Thanks a lot

  45. Nan says:

    Hi, excellent resources!!! *o*
    I was wondering if the link-back in the template is obligatory or not: “If you plan to use it, a link to this page or any form of spreading the word will be much appreciated.”
    Thanks!

  46. Rmist says:

    Hi Anli,

    thank you for this template which is really beautiful.
    I only have an issue with prettyphoto :

    I would like to display social tools when i open a lightbox by clicking on a picture (in the caption of the pic). By default it seems to be disabled, i tried by modifying script.js like that :
    $clientsHolder.quicksand($filters, {duration: 1000}, function() {
    $(“a[rel^=’prettyPhoto’]”).prettyPhoto({social_tools: false}); here i modified the false by true

    But it doesnt work. I tried to get more information about prettyphoto on the official website but i didnt findt the way to solve my pb.

    Thank you for help.

    Rmist

  47. Sanu says:

    In the portfolio page When I click Logo Design/ Web Design filters, the bottom part of the list items are clipped and overlapped by the footer. Can you please help.

  48. kenneth says:

    HI there.
    i want to ask how can i edit the picture and add another tab on the portfolio page you’ve created(e.g print design, web design, logo design) thanks i want to add another tab there and change the pictures.

    thanks!

  49. Barb says:

    Hi Anli, Thanks for this fabulous template. I have converted it for my own portfolio site. I learned so much formatting and working withe template. I originally had it in a test directory below my old site. Everything worked fine there. Once I moved everything within Dreamweaver and used the auto update links feature nd published the site there were 2 errors. The first was the thumbnails on the flexslider. The thumbs kept the old test directory url fort the thumb images. I was all over the html but could find where that info was being stored. When I inspected the element in the live site, I could see the link was wrong but couldn’t figure out where to get at to fix it. I ultimately resolved it, but replacing the jquery.flexslider.js with a clean one and it replaced the thumbnail links. But I’d love more info on the “right” way to fix this. Second issue is the google maps. It doesn’t display in the maps div anymore. I replaced jquery.ui.map.min.js with a clean version but no change. This stopped working when I copied the site to the new directory, but I can’t find the root of the problem. You can see the issue on the Contact page. any ideas what I did to mess this up? Thanks! B

  50. Diego says:

    Hi, great template it’ll be great for http://www.kinemaxilofacial.cl
    but as someone said here:
    “I have just one issue though. In the portfolio page When I click Logo Design/ Web Design filters, the bottom part of the list items are clipped and overlapped by the footer. Can you please help.” PLEASE HELP!

Sorry, the comment form is closed at this time.