studiomac

Studio – One Page Theme

Framework Used: Bootstrap 3.1.1

Studio is a simple one page them, ideal for personal or agency site, comes with an elegant and minimal design. Uses Font Awesome 4.0.3, parallax effect, off-canvas menu & other handsome features.

studio700

Try It: Live Demo

Download Now

Carlos is a self-taught designer & developer working as a freelancer since 2006. He loves creating eye-catching sites and cool user experiences. Since 2011 he develops sites using the awesome Twitter Bootstrap framework. More Here: Alvarez.is

Leave a Reply

*

72 comments

  1. Philippe Gauthier

    Great looking theme, thanks for creating this! I think the parallax images may be busted on iOS devices. They don’t seem to load. Is that true or is it just me?

    • Chris

      I found the solution.
      In the jquery.stellar.min.js file there’s a

      hideDistantElements: !0

      Change it to

      hideDistantElements: !1

      Worked for me.

  2. Pingback: 無料で30枚!スマホ対応HTMLテンプレート 初心者に優しいシングルページばかりを集めました

  3. Becca Clark

    I am also having a problem with the parallax images loading on iPhone or iPad. Has this issue been addressed? Thanks for the awesome theme!

  4. jammie

    Hi Folks,
    firstly great design but iam wondering is there any way to allow the menu (navbar) to close after clicking the menu choices , such as when you click about the menu closes. thanks in advance, keep up the great work.

    • Philippe Gauthier

      Make your main.js file under assets/js/main.js look like this:

      ;(function(){

      // Menu settings
      $(‘#menuToggle, .menu-close’).on(‘click’, function(){
      $(‘#menuToggle’).toggleClass(‘active’);
      $(‘body’).toggleClass(‘body-push-toleft’);
      $(‘#theMenu’).toggleClass(‘menu-open’);
      });
      $(‘.smoothScroll’).on(‘click’,function(){
      $(‘#menuToggle’).removeClass(‘active’);
      $(‘body’).removeClass(‘body-push-toleft’);
      $(‘#theMenu’).removeClass(‘menu-open’);
      });

      })(jQuery)

      • jammie

        there was syntax errors due to ‘ not being ‘ but thanks after changing it works great, thanks so much. heres the corrected code
        ;(function(){

        // Menu settings

        $(‘#menuToggle, .menu-close’).on(‘click’, function(){
        $(‘#menuToggle’).toggleClass(‘active’);
        $(‘body’).toggleClass(‘body-push-toleft’);
        $(‘#theMenu’).toggleClass(‘menu-open’);
        });
        $(‘.smoothScroll’).on(‘click’,function(){
        $(‘#menuToggle’).removeClass(‘active’);
        $(‘body’).removeClass(‘body-push-toleft’);
        $(‘#theMenu’).removeClass(‘menu-open’);
        });

        })(jQuery)

  5. Pingback: Step1 – Create a page | J-SOHO

  6. Agnieszka

    Thanks i will do my new website on this template and back with result 🙂

  7. Tim Nicholson

    Hi, Carlos. I really like the “parallax” effect in this design. I’m currently working on a WordPress version of it. It shouldn’t be too hard as its pretty similar to your link theme that I just released a WordPress version of. I like the variety as compared to link in the color scheme and fonts as well.

  8. Ebrahim

    Hi, How can i make the navigation responsive ?

  9. Pingback: 15 Free Bootstrap 3 Templates and UI Kits

  10. Pingback: Free Bootstrap 3 Templates & UI Kits for Web Developers

  11. Pingback: 50 Free Bootstrap 3 Templates and UI Kits

  12. RDG

    Hi. Thanks for the awesome theme. I have tried the solutions mentioned in the comments above to correct the parralax problem but nothing seems to be working. Only a small section of the image is visible during scrolling. Someone help me !

  13. Pingback: 20 Free Bootstrap Templates | Resources

  14. Pingback: 20 个免费的 Bootstrap 模板 | 我爱互联网

  15. Pingback: 20 个免费的 Bootstrap 模板 – ISURE

  16. Pingback: 20个免费的 Bootstrap模板 | KingSay

  17. Pingback: 20 个免费的 Bootstrap 模板 | 瑞克互动

  18. Pingback: 20 个免费的 Bootstrap 模板 | LAMP新闻|技巧|经验|资讯站

  19. Pingback: 13 Free Bootstrap Themes & Templates 2014 • WPZee

  20. Pingback: Studio – One Page Theme | File-Shack

  21. Liam van Dijk

    I really love the design and features! However, there’s one problem. Is there anything who is able to tell me how the form (at the bottom of the page) can be send to my email?

    • PCLD

      I also would like to know that.

    • Maja Hansen

      Good question, i’m also interested in the answer.

      Great design in this theme.

  22. Pingback: Best Free Bootstrap Templates | Templatespicy

  23. Pingback: 10 个适合网店使用的免费 Bootstrap 模板 | 我爱互联网

  24. Pingback: 10 个适合网店使用的免费 Bootstrap 模板 | 陈学虎

  25. Pingback: 5 FREE Bootstrap templates for your business | Pronsitexpert

  26. Danson

    amazing theme!

    Has anyone successfully combined images and video in the portfolio gallery with a successful video fancybox popout???

  27. Pingback: 10 个适合网店使用的免费 Bootstrap 模板 | KingSay

  28. Pingback: 35 Free Bootstrap HTML5 Website Templates - Webdesigncone

  29. Pingback: 25 Best Free Bootstrap Templates 2014 - Webdesigncube

  30. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 | 我爱互联网

  31. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 | 陈学虎

  32. Pingback: 10 个适合网店使用的免费 Bootstrap 模板 | 第三名吧

  33. Prasanna

    Awesome theme. Thanks !!!

  34. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 | 大分享网

  35. Pingback: 30 Increíbles plantillas web de Bootstrap gratis - jorgelessin.com

  36. Pingback: 15 Latest Bootstrap Themes Free Download | DesignMaz

  37. Mungai

    The world of Bootstrap and coding in general, is very new to me. Thanks to Google and the internet in general, I have managed to customize this template for a personal website I’m building.

    There’s only one problem. I’d like to add links to videos that I’ve posted on Youtube. The most logical choice, is to to use the portfolio section of the website. I’ve changed the default icons to screenshots of the video projects.

    I’ve also added some background info under each one of th icons. How can I make the photos direct a site visitor to a youtube click, by clicking on them? Better yet, how do I embed the videos so that when one clicks on a photo, instead of it bringing up a larger version of the photo, it plays the video on the website?

  38. landing page themes

    superb themes, thanks for the great list mate :0

  39. Tim Nicholson

    Hi, Carlos. I noticed that with this theme and the Link theme, the nav menu gets cut off when the browser window is short, such as on a smartphone in landscape mode. Have you by any chance looked into some minor code adjustments to let the user scroll down on the menu when its opened? Or have you perhaps found a more robust CSS/JS solution?

  40. Pingback: 50 Free Bootstrap HTML5 Website Templates - Dzinepix

  41. Pingback: 50 Best Free Bootstrap HTML5 Website Templates 2015 - Dzinepix

  42. Pingback: 35 Best Free Bootstrap Website Templates 2015 - Webdesignflip

  43. Pingback: 40+ Best Free Bootstrap Website Templates 2015

  44. Shun Shindate

    Really cool, great design. Thanks a lot for this template. I made my firm’s website by this.

  45. Pingback: 50 Best Free Bootstrap HTML5 Website Templates 2015

  46. طراحی داخلی

    Is there anything who is able to tell me how the form (at the bottom of the page) can be send to my email?

  47. Luis

    Great template, however I’m trying to figure out why the parallax dividing images do not show at all on mobile and tablets. Been looking everywhere for a solution and nothing! Anybody?

  48. Pingback: Best Free Bootstrap Template | CenterEnd

  49. Pingback: Studio – One Page Theme - Designer Resource

  50. Pingback: 40+ Free Bootstrap Templates | WebDevAddict

  51. Paul O'Shea

    Love the look of this theme. Thanks for the creation. Has anyone got an amended version with the code to allow the dividing images to work on iOS?

    Ive tried implementing this code and additional iscroll script into this theme, but have not been able to get it to work on iOS 🙁 Looks so good on desktop… hoping it can be adapted to also look nice on iOS. At the moment, the divider images dont show up at all on iPad.

  52. Mauricio Lazo

    Fantastic theme. Thank you for sharing this great work.

    Just a little detail to notice, since the download is a .ZIP and it’s hosted in dropbox, most modern browsers block it or mark it as unsafe.

    Thanks again for sharing this great quality theme.

    Regards,

  53. Tim

    I finally found a parallax bootstrap theme thats actually parallax and not just fixed backgrounds!
    Thank you.

    I noticed that the syntax for half of your HTML comments is wrong. You typed < !– Instead of <!–.

    Also I am trying to make the h1 in the headerwrap scroll down with the page using data-stellar-ratio="-0.5", but without removing the shadow I can't get it to disappear behind the about section. I tried using z-index but that doesn't work. I don't know of anything else I could try.

    Do you know of a solution for this?

    • You need to set it to having an absolute position on the page. And then set the z-index in comparison to the about section, and the menu. I hope this helps, please let me know if it doesn’t.

      • Tim

        I added this to the header’s class and it still acts the same as it did before:
        position: absolute;
        z-index: -50;

        I want it to disappear behind the white background of the about section.

        Thanks for the reply.

        • Tim

          I sort of fixed it. I added a background to the about section and is disappears behind that but then further down the page it appears again where the margins are. I could change the margins to padding but I’m hoping you have a better solution.

  54. Pingback: 2014 年 25 款超棒的免费 Bootstrap 模板 | Gibub_全面的WEB开发资讯

  55. Pingback: 10 个适合网店使用的免费 Bootstrap 模板 | Gibub_全面的WEB开发资讯

  56. Pingback: パララックスサイトとは。作り方や参考例、テンプレート、jQueryプラグインまとめ! | ホームページ大学

  57. Pingback: 12 great free Bootstrap themes – Outranked SEO