Counter – Coming Soon Page

Framework Used: Bootstrap 3.1.1

Counter is a simple coming soon theme. Uses Revolution Slider to showcase images at the background.  The countdown is powered by a custom Javascript. Modify that script to set the proper date.

counter700

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

*

80 comments

  1. J. Reiss

    How does one specify the target place for all of the inputed email addresses?

    • JC

      First of all, thank you for this simple and beautiful theme! I’m also wondering how to specify the email submission destination. I believe most of us are not terribly savvy with HTML/CSS/JS so any guidance on how to link this to MailChimp would be most helpful. Thank you in advance!

  2. elno

    hi there,
    i realize that the images are loaded instantly (at the original size) at the beginning then they disappear and after they appear again as they should.

    did you realize this? i try it with many browsers and the problem appear on all of them.

    thanks

    • Miguel

      Ignore the “But why disable background image carousel in mobile devises? Specially in iPads?” part…

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

  4. Pingback: 20 Free Coming Soon Under Construction Templates | Webdesignpix

  5. Pingback: 20 Free Coming Soon Under Construction Templates | kamran bhutto | kamran bhutto

  6. Pingback: 20 个免费的“网站构建中”的模板设计下载 | 我爱互联网

  7. Pingback: 20 个免费的“网站构建中”的模板设计下载 | 陈学虎

  8. Pingback: 20 个免费的“网站构建中”的模板设计下载 | 龙生时代

  9. Pingback: 5 Clean and Free Coming Soon Page Templates

  10. Pingback: Free bootstrap coming soon pages | Speak it Now ! The Online Magazine

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

  12. Vivien

    Hi,
    Why does the counter do not work on Safari? It kind of load the first picture but then only the background is shown. The same works perfectly on IE, Firefox and Chrome. What can be done to make it work on Safari?
    Thanks for your feedback.

    • May Saghira

      Hi, Viven plz did u fixe up the problem in Safari , i got the same issu and i can’t fix it ?
      thanks

    • Santosh

      Even i am getting the same issue in safari…

  13. Pingback: 5 Kits minimalistas para Bootstrap | iHtml5Hybrid

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

  15. Pingback: 20 个免费的“网站构建中”的模板设计下载 | KingSay

  16. damjan

    when i try uploading it to wordpress it says “style.css missing” . any solution? I’m beginner in WordPress.

    • Hi, This theme is not for WordPress. Please, find the WP themes navigating the right sidebar of this site. Thanks.

  17. Stephan

    the image isn’t showing in my mobile devices, im trying the demo.

  18. rowland

    Counter is great – but I wish it worked on Safari, anyone got any clues? or do I have to dig into the slider code?
    Thanks
    –R

    • rowland

      Ok, I’ll put my hands up – I haven’t touched it, but it’s working today :-S
      Cacheing problem? /shrug
      Stand down everyone, sorry to bother you
      thx
      –R

  19. udinbang

    Why it doesn’t work with IE, any solution ?

  20. carlcarl

    Hi,

    In the download package, there are two problems:

    1. There is not bootstrap.min.js, only bootstrap.js, this cause 404 when load this resource.
    2. css/soon.css, the following part will break part of the web page on Safari, I think it is a bug:

    @-webkit-keyframes InfiniteTurn {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);};
    }
    @-moz-keyframes InfiniteTurn {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(360deg);};
    }
    @-o-keyframes InfiniteTurn {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);};
    }
    @-keyframes InfiniteTurn {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);};
    }

    • Jeremias

      Hey buddy this solved my problem!!! thanks a lot!

    • aileen

      Thanks! this solves the problem with safari

  21. Pingback: Counter – Coming Soon Page | File-Shack

  22. rdk

    Nice Work.

    Bug: When time difference between now and release date is less then 3 hours, all the time counters re set to 0.

  23. Pingback: 20 Free Coming Soon Page / Under Construction Templates

  24. May Saghira

    Hi Carlos , the framework is great , just i have some bugs to report and need to fix it :
    1 – in Safari the slider is showing the background between images.
    2- in Tablette Device there is a barre in the left side.
    And the other browsers everything is great.
    Thanks.

  25. Ankit

    Hey,
    Thanks for this wonderful utility!
    I had one question though, is there a way I can use this coming soon page in my wordpress website, which btw already has bootstrapped configured in it?

  26. Pingback: 30 Free Coming Soon Pages Under Construction Templates - Webdesigncone

  27. Jocelyn

    Trying to find a way to modify the counter’s date? Which file I should use to change the end date.

      • Théo

        Please, what is a way to modify the counter’s date ?

  28. Antoine

    Nice Theme, like it at first sight. Unfortunately, nothing is working properly, too many display compatibility bugs related to the various devices or kind of browser used. Waste of time to fix it.

  29. Pingback: センスを感じるComing soonやUnder Construction Template 20+ | Qrious Lab.

  30. Romain

    hello,
    First of all thank you for the great templates available.
    For this one I have a problem when I try to add glyphicons, they do not apparraissent.
    Thank you for your help,

  31. Pingback: 8 Coming Soon Templates That Will Spark Interest - Crazyleaf Design Blog

  32. Pingback: 8 Coming Soon Templates That Will Spark Interest | wwwDesigned

  33. Pingback: 40 Free Coming Soon Under Construction Website Templates | Designsfree

  34. Animesh Singh

    Great Design! I am gonna use this in my project.
    Thanks, and Love to the Developers of this beauty!

  35. Pingback: Trendy Free Coming Soon Page HTML PSD Template

  36. Pingback: 20+ Free Bootstrap Templates & Themes | Web Revisions

  37. Rodrigo

    Very good templates, but where to find tutorials to make changes and customize them.Download Counter, Landing Page and Bassic and I have not been able to work, can collaborate me.
    Thank you

    Muy buenas plantillas, pero en donde encuentro tutoriales para hacer las modificaciones y personalizarlas.Descargue Counter, Landing Page y Bassic y no he podido hacer que funcionen, me pueden colaborar.
    Gracias

  38. sol

    hi,it is a great theme,but the pages was lost,could i download the Source Code?thank you very much!

  39. Pingback: 15 Free Coming Soon Templates of 2015 - ThemeMags

  40. Ange

    Beautiful theme, thank you. How do you stop the images in the slider zooming out? I tried to change the size of them but it still zooms them so you only see part of the image. Thanks

    • Alex

      I’m having a problem where the slide images won’t show once its posted in the hosting site, did you run into the same problem ?

      • Hey Alex. Have you tried debugging on the issue using something like Firebug for Firefox? My guess is that your jquery script isn’t being called in the right order so they won’t load.

  41. Pingback: 40 Free Coming Soon Under Construction Templates | Designsfree

  42. Varun Bawa

    Awesome Site really really COOL and EASY.
    Thanks a Lot

  43. Pingback: HTML5&CSS3で作られた無料の美しいテンプレート30選 | NESTonline Blog

  44. Pingback: 50 Free Bootstrap 3 Templates and UI Kits | News Video

  45. Charlotte

    Hi! Thanks a lot for this theme, it works perfect for me!
    I was wondering, is it possible to change the Timezone? I would like the counter to be on Paris Time zone CET (UTC +1), and not GMT+0. I’m not really familiar with JS, so if anyone would help me out on this issue, it would be great! Thanks!!!

    • Hello and thanks for your support of our theme!

      In custom.js you’ll notice that it asks you to set the Launch Date using GMT+0 time. This is just so the javascript can calculate everything correctly. If you look a bit further down, you’ll notice that the script converts all times to the local time of the machine/device you are viewing the site on. So if you set the launch correctly (using GMT+0 time), if you view it, you’ll see it in your timezone.

      For example: If you want to set your launch date for 02 November 2015 at 12:00 PM local Paris Time, you’d put (2015, 10, 02, 10, 00).

      Please let me know if you still need help with this, and thanks again for your support of our themes!

      • Charlotte

        Oh yeah I didn’t thought of it like that, now I get it and it works great 😀
        thanks a lot for taking your time to reply !

  46. aya

    Hi,

    I realize that
    when countdown is ending, “9hours” changes to “0hour” instantly.
    How should I do ?

  47. jimmy

    I can’t seem to find where I can put my email address so when someone puts their email in the form. I get a email.

    • That is a blank form. Most people replace that with a MailChimp subscription box, or use a javascript plugin to send you an email when they try to sign up. Please let us know if you have any other issues!

      • MAK

        Hi
        How I can add my address mail and recived all mail sended ?
        Thanks

        • The most easy and convenient way to achieve this is to use a mailchimp form in place of the one provided, and re-style it to look the same. That way you can keep track of all sorts of information for each user interested!

  48. Jay

    This is a awesome and elegant theme! I love it. I have a couple of questions I have replaced the text “COUNTER SITE IS COMING SOON” with a logo image. Unfortunately the logo would not scale on mobile. I added {max-witdh=100%} Which allowed it to scale. Unfortunately that broke the background slide show. Also noticed the slideshow had an attribute of .nomobile.

    How can i resolve this?

    Thanks!

    • Hello :)

      Hello! Check out the documentation on Boostrap’s website about responsive images. http://getbootstrap.com/css/#images You should be able to just add the class “img-responsive” and that should do what you’re hoping for. 😀

      As for the mobile slideshow – most mobile phones don’t allow for slideshows on a resolution of that size. What it will do instead is use a single image to show as the background. Let me know if you have further questions.

  49. Pingback: 20 Free Coming Soon Pages / Under Construction Templates - Designpixy

  50. Pingback: 22 Coming Soon HTML5 Templates for Free Download and Premium - TemplateFlip

  51. Pingback: 15 Templates grátis de páginas em construção - Portal da Criatividade

  52. Pingback: 15 Templates grátis de páginas para sites em construção - Portal da Criatividade

  53. Pingback: デザインが秀逸なHTML5テンプレートまとめ13選