boxpress-html-css-template
First of all, I wish you a happy and prosperous New Year 2013, and by this occasion I’m celebrating the thing with sharing the best web creation I’ve made in my life since I was born. It’s “Box Press”, the coolest CSS template in my eyes until now. The only skill I’ve used when coding it, is simplicity and of course some CSS.

It’s a shame that I don’t know how to implement it with WordPress in order to apply it on Geeksband and this is why one of my 2013 resolutions is to learn Javascript, PHP and how to create a WordPress theme. I know that I don’t need to be a PHP guru to create a WordPress theme but I’ll use it in some future projects, and I know also that I’ve talked a little about my life which can be boring for many of you, but I’m taking advantage of the fact that you’re here just for the template, to annoy you with my life ;) .

Let’s talk more about Box Press. It’s a simple, clean and free CSS template. It has a fixed header, an advertisement banner at the top, and everything else in the homepage is distributed in cool boxes. And there are, until now, four kind of boxes which are :

  1. Featured: It’s for the featured article that you highly recommend for your readers.
  2. Normal box: It’s generally for any other article a part the featured one. It contains an image, the title, some lines from the article and the read more button.
  3. Photo Box: Here you can showcase some of your photos, a kind of small gallery.
  4. Sponsors: If you have a nice amount of traffic and want to monetize your website, this box is where you can put 125*125 Ads.

It’s built using the inline-block property to make it easy for non-techy persons to add new boxes. All what you have to do is to add the following code between <section> and </section> tags.

<article>
<a href="#"><img src="your image url" alt=""/></a>
<h1>The Title of Your Article</h1>
<p> And the article here</p>
<a href="#">Read more</a> </article>

You can also add a background instead of the white one using this code

#secwrapper{
background: url('your background url') repeat;
background-color: white ; /*if  you want to change the background color*/
padding-top: 20px;
}

And here is finally the screenshot

boxpressscreenshot

DEMO      |      DOWNLOAD

This is all for now, but the template is still under work and it’s released and licensed under the Creative Commons Attribution 3.0 Unported License, so you can edit it and maybe add some new boxes, but make sure to visibly credit us somewhere on the site using the template.

Feel free to leave a comment if you have a question about anything that was explained.
Creative Commons License

This work is licensed under a Creative Commons Attribution 3.0 Unported License.

    3 Comments

  1. Ay says:

    As always, simple and beautiful. Thanks for this cool template !

  2. Youssef Nassim says:

    @Ay
    Thank you ! Your embarrassing me :)

  3. Pingback: 25 Beautiful Free HTML and CSS Templates - Geeksband

Leave a Reply

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=""> <strike> <strong>