Scopo del contest: dato il seguente markup
disegnare la bandiera olimpica quanto più fedelmente possibile usando solo i css tenendo come modello di riferimento la seguente bandieracodice HTML:<body> <h1>Stemma olimpico</h1> <ul> <li>Azzurro</li> <li>Giallo</li> <li>Nero</li> <li>Verde</li> <li>Rosso</li> </ul> </body>
Olympic_flag.svg.jpg
Link versione originale: http://4.bp.blogspot.com/-w7JLYjce9i...c_flag.svg.png
Regole
1. Va postato in questo thread un link a jsbin, jsfiddle o codepen contenente il codice ed una descrizione delle scelte tecniche effettuate.
2. Non è permesso usare nessuna tecnologia/linguaggio eccetto il markup indicato e CSS.
Il doctype è a scelta dell'utente. I list-item possono essere riordinati a scelta dell'utente ed è consentito l'uso a piacere di attributi data-* o microformats valorizzati come meglio credete, ma nessun altro elemento di markup deve essere aggiunto al codice sopra riportato (es. altri list-items, elementi annidati ai list-items e così via).
3. L'uso di Javascript, SVG, WebGL, Canvas non è consentito;
4. L'uso di immagini (esterne o in codificate in base64) non è consentito;
5. La demo deve funzionare su almeno uno dei seguenti browser: Chrome 32, Firefox 27 o IE11 (indicare su quale/i browser non funziona)
6. Non copiate. Facendo una ricerca troverete numerosi esempi online, ma la sfida è solo con voi stessi (non c'è proprio nulla in palio e poi sarebbe contrario allo spirito olimpico, però con questo esercizio guadagnerete in serendipità)
7. Se dovete modificare il codice non inserite enne post. Se potete usate solo il link originario su jsbin, jsfiddle o codepen.
8. Leggete questo post e guardate lo stemma con molta attenzione. Non daremo suggerimenti o indicazioni sugli esempi che vedremo per non avvantaggiare nessuno
Valutazione
Ogni demo verrà valutata dai mod di sezione soprattutto in base a
1. Rispondenza alla bandiera sopra linkata (fate attenzione ai dettagli!)
2. Descrizione/documentazione fornita
3. Compatibilità crossbrowser (con i tre browser sopraelencati)
4. Design Responsive
5. Creatività
Termine ultimo per l'invio della demo il 28/02/2014. A partire dal primo marzo valuteremo le demo presentate in questo thread e, visto che siamo in tema, sceglieremo il podio dei vincitori.
Buon lavoro
fcaldera & electric_g
Rispondi quotando