Responsive html5/css banner (template + coding)

  • Estado: Closed
  • Premio: $100
  • Propuestas recibidas: 2
  • Ganador: jodyjoo

Resumen del concurso

We are in need of a html/css responsive banner with "cards" including a thumbnail, play button, and on bigger sizes also title and/or views and/or date added - it will serve as a template for our banner that will dynamically display the most viewed videos on our website clipz.top.

For reference, our old fixed banners looked like this:
https://clipz.top/dynBan/?size=300x250
https://clipz.top/dynBan/?size=160x600

Our goal is the highest click-through-rate possible, so we need the banner to be fully responsive and attractive. Responsivity is the key for this project, as we need the banner to always fill the space of iframe it's put into. It will always show as many videos as can fit into the space, leaving no white-space or resizing instead of showing more videos on sizes where available.

The best structure of files received by us will be index.html (the banner itself) + banners.html that will contain a set of test iframes like this:
<iframe src="./index.html" width="457" height="654" frameborder="0"></iframe>
<iframe src="./index.html" width="500" height="700" frameborder="0"></iframe>
<iframe src="./index.html" width="160" height="300" frameborder="0"></iframe>
<iframe src="./index.html" width="160" height="600" frameborder="0"></iframe>
<iframe src="./index.html" width="120" height="600" frameborder="0"></iframe>
<iframe src="./index.html" width="300" height="250" frameborder="0"></iframe>
<iframe src="./index.html" width="336" height="280" frameborder="0"></iframe>
<iframe src="./index.html" width="720" height="300" frameborder="0"></iframe>
<iframe src="./index.html" width="468" height="60" frameborder="0"></iframe>
<iframe src="./index.html" width="320" height="50" frameborder="0"></iframe>
<iframe src="./index.html" width="728" height="90" frameborder="0"></iframe>
<iframe src="./index.html" width="300" height="50" frameborder="0"></iframe>
<iframe src="./index.html" width="123" height="123" frameborder="0"></iframe>
<iframe src="./index.html" width="250" height="50" frameborder="0"></iframe>
<iframe src="./index.html" width="200" height="200" frameborder="0"></iframe>
<iframe src="./index.html" width="240" height="400" frameborder="0"></iframe>
<iframe src="./index.html" width="970" height="90" frameborder="0"></iframe>
<iframe src="./index.html" width="300" height="1050" frameborder="0"></iframe>
<iframe src="./index.html" width="682" height="156" frameborder="0"></iframe>
<iframe src="./index.html" width="200" height="563" frameborder="0"></iframe>

For the "MORE VIDEOS HERE" you can use "button.html" attached as a starting point. It is however not complete and will not work standalone - you need to perfect it/change it so the banner is attractive.

Our logo also needs to be on the banner, included as .png and .svg. For thumbnails, you can use an example "video.png" file.

If you can only do the template (PSD/SVG), then you will get $40. If you can do both template and coding of the banner, you will get $100. We prefer getting the whole package - the template first, and after discussing, getting the template coded into a responsive banner (one index.html file).

Habilidades recomendadas

Comentarios del empleador

“Great work! Excellent communication and fast delivery as well. Thank you!”

Imagen del perfil adverticaae, Czech Republic.

Principales propuestas de este concurso

Ver más participaciones

Tablero de aclaración pública

  • shahidujjaman140
    shahidujjaman140
    • 4 años atrás

    Please check my entry #31

    • 4 años atrás
  • skrezwan12
    skrezwan12
    • 4 años atrás

    Please first check entry #27 then #29.
    Entry #27 contains index.html file and #29 shows index file with iframe.
    For more, read descriptions.
    Thanks :)

    • 4 años atrás
  • siddique1092
    siddique1092
    • 4 años atrás

    Please check my entry #19 and #22

    • 4 años atrás
  • abdurrohimbd
    abdurrohimbd
    • 4 años atrás

    Please check entry #17 . thanks

    • 4 años atrás
  • skrezwan12
    skrezwan12
    • 4 años atrás

    Please check entry #16 and read the description for your concern. Thanks :)

    • 4 años atrás
  • BXsolution
    BXsolution
    • 4 años atrás

    Hello please inbox me i will do it, I have 7 years experience.

    • 4 años atrás

Mostrar más comentarios

Cómo comenzar con los concursos

  • Publica tu concurso

    Publica tu concurso Fácil y rápido

  • Recibe montones de propuestas

    Consigue toneladas de propuestas De todo el mundo

  • Elige la mejor propuesta

    Elige la mejor propuesta ¡Descarga fácilmente los archivos!

Publica un concurso ahora o únete a nosotros hoy