Free Responsive Website Template: Beacon

Free Responsive Website Template: Beacon

It has been a while since I have given something away for free, so today I a giving away a free responsive website template called Beacon. Beacon is fully responsive and is built to show off your latest projects with ease. You can easily integrate your projects into this minimal website template. Style it to make it your own. Link to your social media pages, such as Twitter, Facebook, LinkedIn, Google+ and Dribbble. Use my free responsive website template to build your own custom responsive website, and be up and running in no time! Here are some of Beacon’s features:

The Home Page

Beacon’s Homepage features the Nivo Responsive image slider, so you can dynamically display news and announcements to your visitors. The home page features a 3-cloumn content area, where you can list your newest client, or feature your latest project or event. The featured images scale with the site, so everything stays proportional.

Free Responsive Website Template - Index

The About Page

You’ll love this! Show a high resolution featured image of yourself to make your about page professional, yet personal. Show your contact information, your education, your experience, and your skill set in a neat, organized manner. When being viewed on a mobile device(a tablet or a smartphone), your content stacks on top of each other, but stays legible and clean-looking. Your image scales to fill the entire width at smaller browser sizes, so you’ll never have a tiny image of yourself and your professional image will be prominent!


Free Responsive Website Template - About


Free Responsive Website Template - About Responsive

The Portfolio Page

Beacon’s portfolio page is simple and understated, enabling your projects to stand out. Everywhere you see a colored rectangle is where your project image will go. You can have a sleek title with a brief description below each project, so your viewers will have an idea about the context of each project.  Free Responsive Website Template - Portfolio

At smaller screen sizes, the content stacks here as well, enabling you to show the largest images possible. Your projects will be viewed at the largest size possible, making them look their best. They will be displayed at their full width, so portrait images will be extra large. The titles and descriptions will come along with your images, making them easy to read, so your viewers don’t miss a thing.


Free Responsive Website Template - Portfolio Responsive

Beacon features a responsive contact form. For wide pages, there is a diagonal layout. Each input field highlights when selected so your visitors will always know where they are. Simply entire your email address in the included php file and you’ll be receiving new business emails in no-time.

Free Responsive Website Template-Contact

On Mobile devices the responsive contact form resizes to fill the smaller screen. This makes it easier for your visitors to fill out your contact form at a smaller size.Free Responsive Website Template - Contact Responsive

So How Do I Get My Free Responsive Website Template?

It’s simple: to get your free responsive website template, all you have to do is:

Get My Weekly Newsletter!

What If I Am Already A Member?

Then you’ll be receiving this freebie in your inbox when the next newsletter comes, or if you must have it right now(Which I can’t blame you for), then you can share on Facebook or Twitter, using the button above and get it instantly.


  1. HI – saw your post and wanted to try out your template, but it seems every link I clicked on provided some error data dump on the screen. I am using Safari on a Mac. — K

    • Sorry about that! I ran the update for the W3 Total Cache plugin and everything went bonkers! Everything is back to normal now.

  2. I’m not very good with PHP, and I am having troubles making the contact form work. I changed the email address in $email_to =”[email protected]” in the send_email.php file, but the code doesn’t work when I test the form on a browser. Would I have to change something else?

    • Berna,
      I don’t think so. It should work after changing your email address. Okay here are 2 things to make sure of:

      1. all of the files have to be in the same directory. In other words, don’t have the form and PHP files in different folders.

      2. If you change the fields to be something different in the form, you have to edit the php code as well.

      I hope that helps Berna, and feel free to keep asking questions if you need help.

  3. why does the text on the form disappear when you move from textbox to textbox? Where do I fix that? is Javascript? I don’t see it in the PHP, but I don’t read reg ex very well

    • Jana, What browser are you using? I am using Firefox, and I tested it in Chrome and Safari and it isn’t doing that in any of those. I am on a Mac, if you could give me more details, I will be glad to help.

      • Mac OS X 10.8.3, Chrome Version 26.0.1410.65 Firefox, 20.0; safari Version 6.0.4. I see it on my iPad and iPod touch also (iOS 5.1.1) and also on PC’s running windows 7 in multiple browsers. See here: enter your name in the name field, then click into the e-mail field, and the name info goes away (it’s there, it just goes invisible). How does the font change properties when focus is lost?

        • I have an answer! It isn’t a script issue, it’s a css issue. On line 191 in style.css, the color value is #FFF, change that to #000, which is black, and there you go! the text will be visible when you go to the next area.

          • Ok that fixed one problem, but left the submit button completely black! I assigned the id #submit to the submit button, and added the following css:


            Got it! thanks! Love this template! I plan on a few more tweaks. You see I have credited you in the copyright info, would you also like a link?

          • I am glad you like it! Credit isn’t necessary, but i d really appreciate it. I am glad you could put this to good use!

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>