Design challenge: new header section for Bountify.co
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Bountify.co uses a Twitter Bootstrap hero-unit on the front page (the gray intro section containing the text "Post a bounty. Get code.").

I've gotten feedback that it looks pretty generic ('like any other Bootstrap site'), but I'm not much of a designer. Please help me out by submitting css for a better intro section (I call it the 'header' below, but I mean the intro box with the 'Post a bounty' and 'Learn more' buttons).

Guidelines:

  • Please provide CSS for one outer div (.header-container), and two inner divs (.header and .sub-header)
  • I like it to be simple, bold, modern
  • It's ok if it's similar to the current header section. Mostly I want it to look different enough from the Bootstrap hero-unit that people don't automatically recognize it as a Bootstrap div.
  • Background images or textures are ok, but I doubt that would look good unless it were quite subtle or served a specific purpose.
  • .header-container can be transparent/invisible (ie there doesn't necessarily have to be a containing div). The background of the main site is currently a texture, but can be changed if .header-container is transparent and doesn't look good with the current texture background.
  • Buttons: I use Bootstrap buttons throughout the site and will be keeping them for now. Use Bootstrap buttons in the header if you think that's necessary, or use new ones if they can hold their own on the front page alone (I probably won't use them throughout the site).
  • Fonts: feel free to experiment. I generally like Helvetica Neue for the .header, but I understand it may contribute to the 'Bootstrap effect', so I'd consider other clean and modern fonts as well.
  • It should go with the rest of the site as much as possible. Note that the hero-unit is also used in bountify.co/about. I'd prefer if your solution looked good in /about as well.
  • I should be able to test it in a blank HTML document, so the CSS shouldn't rely on the site's current CSS. -The content of the header should remain the same, but feel free to suggest new copy as well.

Normally, bounties on this site can be assigned to a charity if there are no good answers. In this case, I'll pick my favorite winning solution even if I don't use it. Someone will definitely receive the bounty.

Your answer should be in this format:

.header-container {
}
.header {
}
.sub-header {
}

Please let me know if you have any questions (leave your questions via comments).

Thanks for your help!

Am I allowed to change the content of the header?
alex over 7 years ago
Feel free to suggest new content, but I'll pick the solution that looks best with the existing content. Thanks!
bevan over 7 years ago
Is it just me that loves it as it is? :)
andy over 7 years ago
awarded to Wikimedia
Tags
css

Crowdsource coding tasks.

0 Solutions