create CSS stylesheets for web audio player widget

  • Status: Closed
  • Prize: $50
  • Entries Received: 8
  • Winner: mihrana94

Contest Brief

Using mostly CSS3, I want to STYLE a web widget that is ugly now. It is an audio player to be embedded on various websites. It should use responsive design so it looks acceptable on phone, tablet, and computer monitor (mostly width considerations).

Do not be concerned about functionality but you can use this non-working example. This IS the layout:

http://boldfx.com/client_playlist.html

1. Refine the "main theme". There is a basic set of CSS classes to start with in the example. This .css stylesheet will be the DEFAULT theme for the widget.

2. Using that main stylesheet as a base set of css classes, I want a set of 8 other themes... mostly just compatible COLOR variations (so people can choose one that looks best on their site)... OR, if you are innovative... maybe there are some things that would affect the size of text inside (depending on how much room is available on the display)? Remember, some might view this on a small device, others on a wide display.

NOTES: The image in the upper left WILL CHANGE depending on the program playing, so colors vary there. The logo in the lower right will always be the SAME. Styling should not affect the text and such above/below the widget.

So, the final deliverables are a CSS stylesheet for primary use PLUS EIGHT (8) variations on that stylesheet (all in separate .css files), mostly optional color sets. 9 stylesheets total, all with same classes but different settings.

Recommended Skills

Employer Feedback

“no problems”

Profile image gluedtothescreen, United States.

Public Clarification Board

  • mihrana94
    mihrana94
    • 7 years ago

    It's just my mistake to uploading an entry for you.

    • 7 years ago
  • mihrana94
    mihrana94
    • 7 years ago

    Any changes that make you feel better? #9

    • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    https://coolors.co

    • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    If you haven't already, consider using a palette generator to find compatible colors, like:

    • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    Thanks for everyone's work!

    • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    Color combinations should tend to softer shades of basic colors, NOT bright or garish ones.

    • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    I would like to see more COMPATIBLE colors/accents. A plain background is preferred, whether white or some other solid color/gradient so long as you can EASILY read the text on top of it.

    • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    I like the wide/narrow examples in #8 ... but want to keep all icons SIMPLE (use play button from #4 , for example). Same with the Share button... keep it plain OR inside circles, like Play button.

    • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    While I like #2, the top logo section has too much wasted space...

    • 7 years ago
    1. cristisatcovschi
      cristisatcovschi
      • 7 years ago

      I'm the author of that entry. I can adjust that by putting the title and the logo on the same row

      • 7 years ago
  • edwinchiwona8
    edwinchiwona8
    • 7 years ago

    The HTML is a bit Off, is ok to modify the The Javascipt plus add a few Controls?

    • 7 years ago
    1. gluedtothescreen
      Contest Holder
      • 7 years ago

      sure, so long as it works

      • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    The link in the description should be an actual page (even though the player itself does not work there yet), it IS the general layout in mind.

    You SHOULD be able to save the page, including .css in any browser and do what you want with that copy.

    • 7 years ago
  • gluedtothescreen
    Contest Holder
    • 7 years ago

    if you think it best, yes, go ahead and make a change but don't get too fancy. It is meant to be a simple embed widget.

    • 7 years ago
  • tasarimabi
    tasarimabi
    • 7 years ago

    Can you share sources ? HTML page and current css doc etc.

    • 7 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!