Legend: Free Responsive One Page Template

475 Flares 475 Flares ×

Legend: Free Responsive One Page Template

We are happy to give this responsive one page template as a freebie to our readers. This is our second free responsive bootstrap template. Legend is multi-purpose responsive one page template built on Twitter Bootstrap. You can use this template as a landing page, online portfolio for creative folks or even as a business theme.

Some Features:

  • Built on Twitter Bootstrap
  • Responsive design, compatible with all media screen
  • Fontello: font icon included
  • Elegant & Minimal Design
  • Template is compatible with IE8+, Firefox, Safari, Chrome, Opera
  • Valid HTML5 & CSS3
  • Expanding Works Preview
  • Always on Top Navigation


Legend - Free responsive one page template preview

Full Preview

Legend - Free responsive one page template preview

We tried to make the design as per the new flat UI design trend. And indeed we are fan of that. Don’t forget to have a look at our one more free responsive bootstrap template from Dzyngiri and that is Codester.

We take lots of efforts to deliver these freebies to you and you can pay us back just by sharing this via various networks. And we will really appreciate that. To stay updated on our useful articles, tutorials, freebies and inspiration, you can get connected with us via various socials.

NEWS: Legend Free Responsive WordPress Theme is available now!
475 Flares Twitter 59 Facebook 87 Google+ 73 LinkedIn 225 Pin It Share 31 475 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him akash@dzyngiri.com | Twitter | Facebook

Connect with us


  1. Congratulations superior design, we have made our blog from your template.
    As this is the first time we use html5, asked as assigning e-mail response and newsletter, we do not know the code we have to use.
    your answer will be valuable to leave 100% functional.

  2. Hi,

    I am installing this theme in wordpress but its giving me an error. how to resolve?

    The package could not be installed. The theme is missing the style.css stylesheet.

    Theme install failed.

  3. Awesome template. Bootstrap makes it more powerful. It is indeed a pleasure to download your theme. Keep up the good work. Will be following you soon..!

  4. hello,

    for starters thank you for the template. i will use it as an under construction landing page. i am in the need of some help about the contact from if possible.

    how should i activate it?

    thanks in advance

  5. I am having trouble with the contact form, where do I put in my email to have the contact form sent to me?

  6. Great job, how I can configure the contact form to get my mail? I could suggest a sample php code for this template. thanks

  7. has anyone determined if there is a missing .php file for the contact page as well as the first page email sign up. It seems that there are a few people confused by this, could someone please help.

    I tried MailChimp but that is not what I was looking for. Thanks

      • Thanks for the reply guys.

        I actually have my own form created and will just use that in the mean time. I still have a question about the home page email submission for the newsletter. Could you please advise what would be the best approach for getting this customized or would this be something fixed in the next version? Is there a timeline for that next release? You guys are awesome for getting these out to the public

  8. How do you change the icons. I see the folder will all of the images but it seems like the circle brown icons are embedded into the CSS somehow. Could someone explain to me how to change or atleast edit the existing icons?

    • Hello Ashley,
      We are using icon font called Fontello.
      Which is rendered as

      <i class="facebook"></i>

      You can change the class if you want to change the icon.
      Check the fontello image above for some other classes.

  9. Hello!

    I want to say that the template is beautiful, thank you for your work. Thanks for sharing. One question I need to do. I can use another font from google? How I can do?

      • Hello Santi,
        Sorry we couldn’t replyed to your first query. We hope you have solved it.
        For logo as a image, you need to make change in index.html file.
        Search for the following code in the file

        <a href="#top">Legend!</a>

        put your logo image file (name it logo.png) in img folder. Replace text “Legend!” with following html image tag

        <img src="img/logo.png" alt="" />

        We hope this will solve your query.

  10. Pingback: The Best Freebies for Designers (May 2013)

  11. why does the website resize between Browser-width 750px and 751px and gets white from the left and right site of the page?
    Can I fix that?

    • Yes you can fix it.
      in bootstrap-responsive.css, on line no 723, you will see

      body {
          padding-left: 20px;
          padding-right: 20px;

      Just remove this padding and you are done! :)

  12. fantastic template! Nice scroll effect too, not a lot do that well on mobile. One question though, is there a way to keep the nav always on-screen for android? (i’m using v.4 ice cream sandwich) right now I have to scroll all the way back up to find it.


  13. How can I download this template? There doesn’t seem to be a link anywhere that I could simply download the source code….:(

  14. one more quick question about the nav bar – i noticed on both your demo and the copy i’ve been tinkering with that the last item on the menu gets cut off when you go to drop-down for mobile (or resize browser below min. width). I tried changing the .collapse parameter to visible, and made sure responsive bootstrap css was linked in the header. Anyone know how to fix this? thanks so much!

  15. thank you for sharing this template, I’m going to use this theme for my website, is it ok if i change the color or give an image background for each page ?
    *I’m sorry for my English,

  16. Could you please explain to me how I can make an image I have used in place of the logo at the top responsive so that the logo image I am using does not cover the nav bar on smaller screens such as mobile screens? Right now the logo image I am using does not shrink down to fit the screen properly and covers the nav button on mobile screens. Thank you and great work!

  17. The cloud background image disappears on ipad using safari and chrome. It also goes if I change the image. Is this an ipad fault or the css?

  18. I’m having a hard time embedding YouTube videos on the template. Any thoughts as to why? Any help would be appreciated. I’ve used a number of codes like iframe, embed, and object, but they don’t bring up the video.

    • Update: I was able to embed in other sections than what I want. Is it possible to embed videos in the News Section of this template?

  19. Hi, I downloaded the zip file but I dont know how to proceed. Where can I upload the bootstrap file? I am using godaddy FTP, I already uploaded the files there but when I try to open the page its say 403 forbidden (you have no permission to access this page)
    Thanks for the help

  20. Hello! Thank you for this amazing theme. I can’t wait for the update! I’m having some troubles with Fontello, but I’m sure I’ll get them fixed on my own. It seems that I can’t get some of the icons to work oddly. Anyways, Keep up the work!

  21. Hi, I wanted to ask you if the 2 contact forms ( only email and full form ) are implemented, because I can’t find the code….
    Thank you in advanced !

  22. Hi,

    Thanks for the template… It works great… I am just short of finishing and uploading it…

    I am a newbie and tried using this as my option to create a website…

    The issue I am facing is to create a new page for the view project link.. I tried creating a new page and link it but the theme goes for a toss…
    Could you help???

  23. Hi,
    thanks great job!!!

    Only a problem: when I watch it on Ipad, the background image (top-bg.jpg) don’t resize.

    Could you help me, please???

  24. Excellent! Is there a way to make the links active as you click on a section? That is, if I am on the about section my link will have the color of the hover effect.

  25. Thank you. I’ll use this to learn HTML to WP conversion. I don’t have enough time to do that but I’ll do my best.

  26. Hey there

    Im starting to use your template and I may have changed something that Im hoping you can help with. My navigation will no longer work on the ipad. What do I need to make sure is there for that to function properly?

  27. Hi thanks for the awesome template
    Just wondering if you could help me I have the site up and running and everything is fine on my desktop but when I go to use my ipad the twitter and facebook buttons don’t work how do i get these to activate.

  28. Hello :) First I want to thank you for your template ! So great & easy to adapt.
    I just have a question about the contact form. Should i use mailto:email@gmail.com in the form action ? ?

  29. Thanks for this great template. The ‘font’ doesn’t seem to work well in Firefox anymore.
    Is this a known issue? I am using Firefox 24.0

  30. hi, there is a link “Demo and Download”, but it is not active. Please help me to download source code. Thanks and regards,

  31. Hi! How I change the social icons?

    I need change one for youtube icon.

    thanks! And congratulations, the template is amazing

    • Hi JJ,
      Sorry for replying late.
      Follow the following steps to change the icons.
      1. Go to fontello.com
      2. Select the icons of your choice.
      3. Download the icon-font file and put into font folder
      4. Change the classes of icons in your html file

      Let me know in case of any confusion.

  32. Hi, I’m from Holland and I already did some customizing in your beautiful designed template. I was wondering where I could find ‘the css files’ you referred to in an answer for the form. Now I am actually stuck in some hard php coding..:(
    Thanks a lot!

  33. thnaks a lot for the beautiful template, i did some customization in your template and when i am checking with IE 8, 9 , 10 is not working properly, the main img is coming bigger and top part where the logo n links is not showing in IE but its ok with chrome n firfox could u please help to sort it out and alignment is also not working properly with IE please help

    • Hi Sudheer,
      As I am not aware of the customizations you have done in the template, then it’s difficult for me to comment on why it’s not working in IE.
      Will you please tell me, in which and what customization you have done.

      • customization in the sense only design part i didnt touch any of the css or any other file only changes the design layout thats it. pls help me yarr and how can i change the fonts could you please explain that also

        • You can change the fonts from CSS file. And remove the line

          <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>

          from the head of html files. You can also replace it with another font file.

  34. Thank you for sharing the template, it’s a beauty. But I too am having contact form issues. If the code is not ready, is there a site that explains how to create it that you would recommend?

  35. Love the site, having issues with the contact form. not sure where to change the info to have the mail sent to a certain email address (want the newsletter and contact form emails to differ). could someone help plz. I’m using dreamweaver cs6 if thats going to help

  36. really good work ,well done. I have an error when I view the site on my ipad and iphone. then the background isn’t working :(

  37. I am unable to download this template. It is going to loading the page infinitely and on clicking download button couldn’t download. Is any server issues right now or other issues.


  38. Where did you find out how to download the css on fontello for circled icons? I need icon-home but I’d like it circled. When I click to download it, it only gives me the code for the non-circled icon. Thanks!

  39. Thanks, it´s beautiful!
    I cant find the license of the templates (all of them, not only this one). I know they are allowed for commercial use, but do we have to keep a linkback, or it´s open source? No license with the downloaded zip.

  40. Hi Akash,
    I was wondering if this is free to modify and re-distribute this awesome template as a WordPress theme. Do you have any restriction or license for this ?

  41. Thanks! A nice website. May I know how to embed a mp4 video in the popup window? It seems that the fancy box scripts doesn’t work well except photos? Could you help? Thank you!


  42. Thank you very much for offering this template! It is amazing!

    The template works perfectly in Firefox, but for me it has issues in Internet Explorer.
    IE Version: 10.0.9200.16736
    – Top menu missing
    – (bootstrap) icons missing
    – grey seperators next to the boxes missing in the service and blog section missing

    Here are two screenshots:

    Could this have anything todo with the bootstrap template? So that javascript is not loaded properly?
    Thank you!

  43. Any plans to get this updated to Bootstrap 3?
    Or maybe you can point us of how the upgrade should take place, and maybe we can do it and distribute it back?

    It’s an awesome template nevertheless.

  44. hi i’ve tried mailchimp to embed the script inside the template but the problem is, the input text form become so small, how to change that? or maybe you have another solutions?

    Best Regards.

    #newsletter optin.

  45. First of all amazing work guys :)
    Sorry for my stupit question ,but where do I add my email if I want the contact form to be send to me?

    Thank You

  46. Hi Team,

    First of all thanks for the great free one page responsive template “Legend”.

    I have one query regarding the license of using “Legend” template.

    Currently I am developing one PHP script and I wanted to use your Legend template for that.And I wanted to sell my script online which contains your “Legend” template files.

    I also wanted to modify the styles and js of your legend template as per my requirement.

    Am I eligible to use and modify it? Please confirm me.Waiting to hear from you.


  47. Hey, Its amazing template.

    I have one question for u. Ff i test your template offline (localhost) “the slide is working between the menu sections” ( not jumping ) after i upload it to the server, it’s only jumping and not sliding. js/css and all folders are uploaded… Any idea?

  48. This might be a weird question, but there is a missing asset called “dot-row-2.png”, and I am wondering what it does or what it is supposed to be? It is in Style.css on line 519 under the article .inside background property. It is even labeled as IMPORTANT yet the file is not where it says it should be and the section looks fine as it is. I’m wondering the importance of the line of code, ideally it could be removed to clean it up a bit maybe

  49. Thanks for the template ! One thing if someone can help .. How can I add Next Previous button at the bottom so clicking on them scroll to next page and or previous page. Thanks !

  50. Hi, Is there any .php for the contact and newsletter, I have tried to settle a php of my own, though it doesn’t works. Thanks, I appreciate your response.

  51. Here is a Contact.php


    error_reporting (E_ALL ^ E_NOTICE);
    $post = (!empty($_POST)) ? true : false;


    $name = stripslashes($_POST['your-name']);
    $email = trim($_POST['your-email']);
    $message = stripslashes($_POST['message']);

    $error = '';

    // Check name
    $error .= 'I think you forget to enter your name.
    // Check email
    $error .= 'I think you forget to enter your e-mail id.

    $mail = mail("YOUR EMAIL HERE", $subject, $message,
    "From: ".$name." \r\n"
    ."Reply-To: ".$email."\r\n"
    ."X-Mailer: PHP/" . phpversion());
    echo 'OK';
    echo '

  52. Hi, just wondering… where can I find the source of the social icons and also the small icons on the services area?
    I cannot find them anywhere inside the website folders! :(


  53. Hi i just have a quick question the “scroll too ” isnt working at all on firefox but it works on safari I dont understand why it dosent work ?

  54. Hi Team,

    Thanks for the great template!!!!

    One quesiotn – which seems to have been asked a few times on here without a response…

    The ‘header wrap’ div seems to lack the desired resizing for iPhone/iPad safari browser (even on your demo). The image stays displayed at an enlarged dim, showing a pixelated background image (top topper of the sample clouds image you’ve provided).

    I’m hoping there’s an easy fix to this. If you guys could have a look and get back to us on this small issue – that’d be awesome; thanks!!

    – j.

Leave a Reply

(*) Required, Your email will not be published