Advent Calendar - CSS Design Awards

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="robots" content="index, follow" /> <meta name="author" content="CSS Design Awards" /> <meta name="referrer" content="origin-when-cross-origin" /> <meta property="og:title" content="Advent Calendar - CSS Design Awards"/> <meta property="og:description" content="The main purpose of the tasks in the Calendar is to get you back into the Christmas Mood and encourage you to have a good time."/> <meta property="og:type" content="article"/> <meta property="og:url" content="https://www.cssdesignawards.com/sites/advent-calendar/46695"/> <meta property="og:image" content="https://www.cssdesignawards.com/cdasites/2024/202412/20241201182825.jpg"/> <meta property="og:image:width" content="1068" /> <meta property="og:image:height" content="646" /> <meta property="twitter:image" content="https://www.cssdesignawards.com/cdasites/2024/202412/20241201182825.jpg"/> <title>Advent Calendar - CSS Design Awards</title> <meta name="description" content="The main purpose of the tasks in the Calendar is to get you back into the Christmas Mood and encourage you to have a good time." /> <link rel="canonical" href="https://www.cssdesignawards.com/" /> <link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/images/favicons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/images/favicons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/images/favicons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/images/favicons/favicon-194x194.png" sizes="194x194"> <link rel="icon" type="image/png" href="/images/favicons/android-chrome-192x192.png" sizes="192x192"> <link rel="shortcut icon" href="/images/favicons/favicon.ico"> <link rel="stylesheet" href="/css/style-main.min.css" type="text/css" media="all"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,800" rel="stylesheet"> <link rel="stylesheet" href="/css/vendor/jcf.css" type="text/css" media="all"> </head> <body> <div id="page"> <header class="main"> <nav class="header__main-wrapper"> <div class="flex-grid"> <a href="/" class="header__site-logo"> <img src="/imgs/logo.svg" alt="CSS Design Awards"> </a> </div> <div class="flex-grid text-center mobile-hidden"> <div class="header__fade-slider"> <div class="header__fade-slider__slide active"> <a href="https://kinsta.com/wordpress-hosting/agencies/?utm_source=cssdesignawards&utm_medium=Referral&utm_campaign=homepage" target="_blank" rel="nofollow"> <img src="/imgs/content/2024/kinsta-for-agencies-logo.svg" width="150" height="100" alt="Kinsta"> </a> </div> <div class="header__fade-slider__slide"> <a href="https://redcollar.co/" target="_blank" rel="nofollow"> <img src="/imgs/content/2024/red-collar-logo.svg" width="150" height="100" alt="Red Collar"> </a> </div> </div> </div> <div class="flex-grid text-right"> <div class="header__side-elements"> <a href="#" class="menu-hamburger" data-modal-open="header-main-menu"></a> <a href="#" class="search" data-modal-open="header-search"> <img src="/imgs/loupe.svg" alt="Search"> </a> <a href="/submit" class="cust-btn mobile-hidden">SUBMIT</a> </div> </div> </nav> <div data-modal="header-main-menu" class="modal header-modal-menu"> <div class="modal__hide-scroll"> <div class="container"> <div class="modal__content"> <nav class="header__main-menu"> <div class="header__main-menu__wrapper"> <button class="modal__close">X</button> <ul class="header__main-menu__list"> <li><a href="/" class="cust-btn">Home</a></li> <li><a href="/wotd-award-nominees" class="cust-btn">Nominees</a></li> <li><a href="/wotd-award-winners" class="cust-btn">Winners</a></li> <li><a href="/about" class="cust-btn">About</a></li> <li><a href="/judges" class="cust-btn">Judges</a></li> <li><a href="/blog" class="cust-btn">Blog</a></li> <li><a href="/contact" class="cust-btn">Contact</a></li> <li><a href="/terms" class="cust-btn">Terms / Privacy</a></li> </ul> <ul class="header__main-menu__add-on"> <li><a href="/submit" class="cust-btn special-button">SUBMIT</a></li> <li><a href="/jpanel" target="_blank">JLogin</a></li> </ul> </div> </nav> </div>  </div> </div> </div>  <div data-modal="header-search" class="modal header-modal-search"> <div class="modal__hide-scroll"> <div class="container"> <div class="modal__content"> <form action="/search" method="get" id="frmSearch"> <input type="search" id="search_term" name="search_term" placeholder="Search" autofocus> <a class="modal__close">X</a> </form> </div>  </div> </div> </div>  </header> <nav class="thumbnail-nav"> <a href="/sites/heave-corp/46694/" class="thumbnail-nav__link prev"> <img src="/cdasites/2024/202412/20241202054423.jpg" width="160" alt="Heave Corp" class="thumbnail-nav__thumb prev" /> <span class="thumbnail-nav__label">Prev</span> </a> <a href="/sites/agorespace/46696/" class="thumbnail-nav__link next"> <img src="/cdasites/2024/202412/20241202054409.jpg" width="160" alt="Agorespace" class="thumbnail-nav__thumb next" /> <span class="thumbnail-nav__label">Next</span> </a> </nav>  <section class="single-website single-nominee"> <div class="container"> <div class="single-website__wrapper"> <header class="single-website__header"> <h1 class="single-website__date">Nominated 2024 Dec 2</h1> <div class="single-nominee__header__flex"> <div class="single-nominee__header__left"> <h2 class="single-website__title">Advent Calendar</h2> <h3 class="single-website__author"> <a href="https://astapable.com/en" target="_blank" class="single-website__author__name">Evgenii Astapov</a> <span class="single-website__author__location">USA</span> </h3> </div> <div class="single-nominee__header__right"> <div class="single-nominee__timer"> <div class="single-nominee__time" data-timer="33:47:36"> <span class="timer-js__hours">––</span> <span class="single-nominee__time__sep">:</span> <span class="timer-js__minutes">––</span> <span class="single-nominee__time__sep">:</span> <span class="timer-js__seconds">––</span> </div> <div class="single-nominee__timer__labels"> <span class="single-nominee__hrs">HH</span> <span class="single-nominee__min">MM</span> <span class="single-nominee__sec">SS</span> </div> </div> </div> </div> </header>  <figure class="single-website__thumbnail__wrapper"> <a href="https://xmas.caps-dstudio.com/" target="_blank" class="single-website__thumbnail single-nominee__thumbnail"> <img src="/cdasites/2024/202412/20241201182825.jpg" alt="Advent Calendar website" width="740" /> </a> <figcaption class="single-website__caption"> <div class="single-website__desc"> <div class="single-website__desc__about"> <p><strong>ABOUT: </strong>The main purpose of the tasks in the Calendar is to get you back into the Christmas Mood and encourage you to have a good time.</p> </div> <div class="single-website__desc__meta"> <p><strong>TAGS: </strong> <a href="/website-gallery?feature=animated">animated</a>, <a href="/website-gallery?feature=flat design">flat design</a>, <a href="/website-gallery?feature=illustrated">illustrated</a> </p> <p><strong>CATEGORY: </strong> <a href="/website-gallery?industry=entertainment">entertainment</a> </p> </div> </div> <div class="single-website__votes"> <div class="votes"> <div class="votes__prefix"> <h5 class="votes__title">Public Vote</h5> </div> <div class="votes__body"> <ul class="vote__list "> <li class="vote__item"> <div class="vote__circle" data-count="100" data-ini-score="20" data-total="20" data-site-id="46695" data-cat-id="1"> <button class="vote__circle__button"></button> <div class="vote__circle__slice"> <div class="vote__circle__bar"></div> <div class="vote__circle__fill"></div> </div> </div> <div class="vote__caption"> <div class="vote__cat">UI Design</div> <div class="vote__score"> <strong class="vs-check">8.00</strong> <small><span class="vote__score__count">20</span>/20V</small> </div> </div> </li> <li class="vote__item"> <div class="vote__circle" data-count="100" data-ini-score="20" data-total="20" data-site-id="46695" data-cat-id="2"> <button class="vote__circle__button"></button> <div class="vote__circle__slice"> <div class="vote__circle__bar"></div> <div class="vote__circle__fill"></div> </div> </div> <div class="vote__caption"> <div class="vote__cat">UX Design</div> <div class="vote__score"> <strong class="vs-check">7.55</strong> <small><span class="vote__score__count">20</span>/20V</small> </div> </div> </li> <li class="vote__item"> <div class="vote__circle" data-count="100" data-ini-score="20" data-total="20" data-site-id="46695" data-cat-id="3"> <button class="vote__circle__button"></button> <div class="vote__circle__slice"> <div class="vote__circle__bar"></div> <div class="vote__circle__fill"></div> </div> </div> <div class="vote__caption"> <div class="vote__cat">Innovation</div> <div class="vote__score"> <strong class="vs-check">7.75</strong> <small><span class="vote__score__count">20</span>/20V</small> </div> </div> </li> </ul>  </div> <div class="votes__suffix"> Voting <a href="#" data-modal-open="faq">FAQ</a> </div> </div>  </div>  </figcaption>  </figure>  </div> </div> </section>  <section class="judges"> <div class="container"> <div class="judges__wrapper"> <header class="judges__header"> <h5 class="judges__subtitle">Current Judges' Scores</h5> </header>  <ul class="judges__list"> <li class="judge"> <div class="judge__wrapper"> <a href="/judges/bart-jaillet/1567/" class="judge__link"></a> <div class="judge__total-score"> 8 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/bart-jaillet.jpg" width="90" alt="Bart Jaillet" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Bart Jaillet</h4> <h6 class="judge__title">Design Director</h6> <ul class="judge__score"> <li class="judge__score__item"> <span class="judge__score__label">UI</span> <span class="judge__score__val">9</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">7</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">8</span> </li> </ul>  </div> </div> </div>  </div> </li>  <li class="judge"> <div class="judge__wrapper"> <a href="/judges/achille-calegari/1673/" class="judge__link"></a> <div class="judge__total-score"> 8 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/achille-calegari.jpg" width="90" alt="Achille Calegari" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Achille Calegari</h4> <h6 class="judge__title">CEO & Digital Strategist</h6> <ul class="judge__score"> <li class="judge__score__item"> <span class="judge__score__label">UI</span> <span class="judge__score__val">8</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">8</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">8</span> </li> </ul>  </div> </div> </div>  </div> </li>  <li class="judge"> <div class="judge__wrapper"> <a href="/judges/michela-chiucini/696/" class="judge__link"></a> <div class="judge__total-score"> 7.9 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/michela-chuicini.jpg" width="90" alt="Michela Chiucini" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Michela Chiucini</h4> <h6 class="judge__title">Designer & Art Director</h6> <ul class="judge__score"> <li class="judge__score__item"> <span class="judge__score__label">UI</span> <span class="judge__score__val">8</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">7.7</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">8</span> </li> </ul>  </div> </div> </div>  </div> </li>  <li class="judge"> <div class="judge__wrapper"> <a href="/judges/stefan-mos/1722/" class="judge__link"></a> <div class="judge__total-score"> 7.17 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/stefan-mos.jpg" width="90" alt="Stefan Mos" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Stefan Mos</h4> <h6 class="judge__title">Product Designer and Developer</h6> <ul class="judge__score"> <li class="judge__score__item"> <span class="judge__score__label">UI</span> <span class="judge__score__val">7</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">7.5</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">7</span> </li> </ul>  </div> </div> </div>  </div> </li>  </ul>  <div class="judges__btn-wrapper"> </div>  </div> </div> </section>  <div class="page-modals"> <div data-modal="faq" class="modal "> <div class="modal__hide-scroll"> <div class="container"> <div class="modal__content"> <button class="modal__close">X</button>  <div class="faq"> <h2 class="faq__title">FAQ</h2> <ul class="faq__list"> <li class="faq__item"> <div class="faq__question"> Q. How does the voting system work? </div> <div class="faq__answer"> CSSDA uses two judging systems. The first is for WOTD (Website of the Day) and is determined by the scores from the judging panel. To be considered, sites must receive an average score above 8.0 (this varies depending on quality of the sites submitted). Sites, except WOTDs, that receive above 6 receive Special Kudos. The second system is for the public vote awards and the categories include UI Design, UX Design and Innovation. Winners are determined by votes from both the public and the scores from the judges. To win, sites must receive 20 votes in one or all categories and the total average score from the judges must be above 6. </div> </li> <li class="faq__item"> <div class="faq__question"> Q. What do you mean by UI, UX and Innovation? </div> <div class="faq__answer"> UI refers to the User Interface design such as aesthetics and effects. UX refers to User Experience and functionality. Innovation refers to the use of new development and design ideas. </div> </li> <li class="faq__item"> <div class="faq__question"> Q. Can a site win all four awards including UI, UX, Innovation & WOTD? </div> <div class="faq__answer"> Yes, sites that score highly in all categories have the chance to win both the public awards and the judge's WOTD award. </div> </li> <li class="faq__item"> <div class="faq__question"> Q. Is there a time limit for judging and scoring? </div> <div class="faq__answer"> A time limit of 96 hours pertains to WOTD. Outstanding sites can win both WOTD and the public awards prior to this time if enough votes are received for UI, UX and/or Innovation and the judges' scores are high enough. </div> </li> <li class="faq__item"> <div class="faq__question"> Q. Are the scores updated in real-time? </div> <div class="faq__answer"> Yes. Revisiting the detail pages of nominees during the 96 hour time limit will display updated scores and votes. </div> </li> <li class="faq__item"> <div class="faq__question"> Q. Can the public vote without a login account? </div> <div class="faq__answer"> Yes. Public votes do not require a login account. Please note that a maximum of 1 vote per site applies for each of the UI, UX and Innovation awards giving a total of 3 public votes per site. A combination of IP tracking and human moderators may be used to help deter click-fraud. </div> </li> </ul>  </div>  </div>  </div> </div> </div>  <div data-modal="all-scores" class="modal "> <div class="modal__hide-scroll"> <div class="container"> <div class="modal__content"> <button class="modal__close">X</button>  <div class="all-scores__modal"> <header class="judges__header"> <h5 class="judges__subtitle">Current Judges' Scores</h5> </header>  <ul class="judges__list"> <li class="judge"> <div class="judge__wrapper"> <a href="/judges/bart-jaillet/1567/" class="judge__link"></a> <div class="judge__total-score"> 8 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/bart-jaillet.jpg" width="90" alt="Bart Jaillet" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Bart Jaillet</h4> <h6 class="judge__title">Design Director</h6> <ul class="judge__score"> <li class="judge__score__item"> <span class="judge__score__label">UI</span> <span class="judge__score__val">9</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">7</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">8</span> </li> </ul>  </div> </div> </div>  </div> </li>  <li class="judge"> <div class="judge__wrapper"> <a href="/judges/achille-calegari/1673/" class="judge__link"></a> <div class="judge__total-score"> 8 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/achille-calegari.jpg" width="90" alt="Achille Calegari" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Achille Calegari</h4> <h6 class="judge__title">CEO & Digital Strategist</h6> <ul class="judge__score"> <li class="judge__score__item"> <span class="judge__score__label">UI</span> <span class="judge__score__val">8</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">8</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">8</span> </li> </ul>  </div> </div> </div>  </div> </li>  <li class="judge"> <div class="judge__wrapper"> <a href="/judges/michela-chiucini/696/" class="judge__link"></a> <div class="judge__total-score"> 7.9 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/michela-chuicini.jpg" width="90" alt="Michela Chiucini" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Michela Chiucini</h4> <h6 class="judge__title">Designer & Art Director</h6> <ul class="judge__score"> <li class="judge__score__item"> <span class="judge__score__label">UI</span> <span class="judge__score__val">8</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">7.7</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">8</span> </li> </ul>  </div> </div> </div>  </div> </li>  <li class="judge"> <div class="judge__wrapper"> <a href="/judges/stefan-mos/1722/" class="judge__link"></a> <div class="judge__total-score"> 7.17 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/stefan-mos.jpg" width="90" alt="Stefan Mos" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Stefan Mos</h4> <h6 class="judge__title">Product Designer and Developer</h6> <ul class="judge__score"> <li class="judge__score__item"> <span class="judge__score__label">UI</span> <span class="judge__score__val">7</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">7.5</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">7</span> </li> </ul>  </div> </div> </div>  </div> </li>  </ul>  </div>  </div>  </div> </div> </div>  </div>  <div class="container smsc-button-wrapper"> <a class="smsc-button dark" href="#">Go to Top</a> </div> <footer class="main dark"> <div class="flex-grid">CSS DESIGN AWARDS © 2009 - 2024</div> <div class="flex-grid text-center mobile-top"> <ul class="social-icons"> <li><a href="https://www.facebook.com/CSSDesignAwards/" target="_blank" style="background-image: url(/imgs/social-icons/facebook.svg);"><img src="/imgs/social-icons/facebook.svg" alt="facebook"></a></li> <li><a href="https://x.com/cssdesignawards" target="_blank" style="background-image: url(/imgs/social-icons/x.svg);"><img src="/imgs/social-icons/x.svg" alt="twitter/X"></a></li> <li><a href="https://www.linkedin.com/in/cssda/" target="_blank" style="background-image: url(/imgs/social-icons/linkedin.svg);"><img src="/imgs/social-icons/linkedin.svg" alt="linkedin"></a></li> <li><a href="https://www.instagram.com/cssdesignaward/" target="_blank" style="background-image: url(/imgs/social-icons/instagram.svg);"><img src="/imgs/social-icons/instagram.svg" alt="instagram"></a></li> </ul> </div> <div class="flex-grid text-right mobile-hidden">BE INSPIRED. BE INSPIRING.</div> </footer> </div> <div id="scripts"> <script type="text/javascript" src="/js/vendor/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="/js/vendor/jcf.js"></script> <script type="text/javascript" src="/js/vendor/jcf.select.js"></script> <script type="text/javascript" src="/js/vendor/jcf.checkbox.js"></script> <script type="text/javascript" src="/js/vendor/jcf.file.js"></script> <script type="text/javascript" src="/js/script.min.js"></script> </div> </body> </html>

CINXE.COM

Advent Calendar - CSS Design Awards