Hocus Pocus Studio - 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="Hocus Pocus Studio - CSS Design Awards"/> <meta property="og:description" content="Hocus Pocus Studio is a VFX and Post-Production studio based in Lyon, specialized in 3D animation and visual effects."/> <meta property="og:type" content="article"/> <meta property="og:url" content="https://www.cssdesignawards.com/sites/hocus-pocus-studio/46721"/> <meta property="og:image" content="https://www.cssdesignawards.com/cdasites/2024/202412/20241205114507.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/20241205114507.jpg"/> <title>Hocus Pocus Studio - CSS Design Awards</title> <meta name="description" content="Hocus Pocus Studio is a VFX and Post-Production studio based in Lyon, specialized in 3D animation and visual effects." /> <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/make-way-for-nature/46724/" class="thumbnail-nav__link prev"> <img src="/cdasites/2024/202412/20241206074909.jpg" width="160" alt="Make Way For Nature" class="thumbnail-nav__thumb prev" /> <span class="thumbnail-nav__label">Prev</span> </a> <a href="/sites/indig-inc/46728/" class="thumbnail-nav__link next"> <img src="/cdasites/2024/202412/20241206083833.jpg" width="160" alt="INDIG Inc." 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 6</h1> <div class="single-nominee__header__flex"> <div class="single-nominee__header__left"> <h2 class="single-website__title">Hocus Pocus Studio</h2> <h3 class="single-website__author"> <a href="https://type8.studio" target="_blank" class="single-website__author__name">type8 studio</a> <span class="single-website__author__location">FRANCE</span> </h3> </div> <div class="single-nominee__header__right"> </div> </div> </header>  <figure class="single-website__thumbnail__wrapper"> <a href="https://hocuspocus-studio.fr/en/" target="_blank" class="single-website__thumbnail single-nominee__thumbnail"> <img src="/cdasites/2024/202412/20241205114507.jpg" alt="Hocus Pocus Studio website" width="740" /> </a> <figcaption class="single-website__caption"> <div class="single-website__desc"> <div class="single-website__desc__about"> <p><strong>ABOUT: </strong>Hocus Pocus Studio is a VFX and Post-Production studio based in Lyon, specialized in 3D animation and visual effects.</p> </div> <div class="single-website__desc__meta"> <p> <span class="tooltip__wrapper"> <strong>COLLABORATORS</strong> <span class="tooltip__body"> <a href="https://akaru.fr" target="_blank">Akaru</a><br /><a href="https://www.thierrychopain.com" target="_blank">Thierry Chopain</a><br /> </span> </span> </p> <p><strong>TAGS: </strong> <a href="/website-gallery?feature=minimal">minimal</a>, <a href="/website-gallery?feature=parallax">parallax</a>, <a href="/website-gallery?feature=video/sound">video/sound</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 Awards</h5> </div> <div class="votes__body"> <ul class="vote__list completed"> <li class="vote__item"> <div class="vote__circle" data-count="100" data-ini-score="" data-total="20" data-site-id="0" data-cat-id="1"> <div class="vote__circle__icon trophy solid"></div> <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>8.25</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="" data-total="20" data-site-id="1" data-cat-id="2"> <div class="vote__circle__icon trophy solid"></div> <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>8.25</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="" data-total="20" data-site-id="2" data-cat-id="3"> <div class="vote__circle__icon trophy solid"></div> <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>8.20</strong> <small><span class="vote__score__count">20</span>/20V</small> </div> </div> </li> </ul>  </div> <div class="votes__suffix"> <span class="vote__closed">Vote Closed. </span> <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">Final Judges' Scores</h5> </header>  <ul class="judges__list"> <li class="judge"> <div class="judge__wrapper"> <a href="/judges/fred-fenouil/1781/" class="judge__link"></a> <div class="judge__total-score"> 9 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/fred-fenouil.jpg" width="90" alt="Fred Fenouil" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Fred Fenouil</h4> <h6 class="judge__title">Creative Director & Producer</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">9</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">9</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"> 8.4 </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.5</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">8.5</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">8.2</span> </li> </ul>  </div> </div> </div>  </div> </li>  <li class="judge"> <div class="judge__wrapper"> <a href="/judges/gabriel-contassot/1806/" 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/gabriel-contassot.jpg" width="90" alt="Gabriel Contassot" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Gabriel Contassot</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">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/federica-gandolfo/1869/" 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/federica-gandolfo.jpg" width="90" alt="Federica Gandolfo" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Federica Gandolfo</h4> <h6 class="judge__title">Digital Art Director and Graphic Designer</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/antino-kila/1874/" 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/antino-kila.jpg" width="90" alt="Antino Kila" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Antino Kila</h4> <h6 class="judge__title">Creative Developer</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/jas-bhachu/1878/" 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/jas-bhachu.jpg" width="90" alt="Jas Bhachu" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Jas Bhachu</h4> <h6 class="judge__title">Senior Digital Designer</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>  </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">Final Judges' Scores</h5> </header>  <ul class="judges__list"> <li class="judge"> <div class="judge__wrapper"> <a href="/judges/fred-fenouil/1781/" class="judge__link"></a> <div class="judge__total-score"> 9 </div> <div class="judge__info"> <div class="judge__info__inner"> <div class="judge__info__col avatar"> <img src="/judges/images/267/fred-fenouil.jpg" width="90" alt="Fred Fenouil" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Fred Fenouil</h4> <h6 class="judge__title">Creative Director & Producer</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">9</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">9</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"> 8.4 </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.5</span> </li> <li class="judge__score__item"> <span class="judge__score__label">UX</span> <span class="judge__score__val">8.5</span> </li> <li class="judge__score__item"> <span class="judge__score__label">INN</span> <span class="judge__score__val">8.2</span> </li> </ul>  </div> </div> </div>  </div> </li>  <li class="judge"> <div class="judge__wrapper"> <a href="/judges/gabriel-contassot/1806/" 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/gabriel-contassot.jpg" width="90" alt="Gabriel Contassot" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Gabriel Contassot</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">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/federica-gandolfo/1869/" 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/federica-gandolfo.jpg" width="90" alt="Federica Gandolfo" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Federica Gandolfo</h4> <h6 class="judge__title">Digital Art Director and Graphic Designer</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/antino-kila/1874/" 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/antino-kila.jpg" width="90" alt="Antino Kila" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Antino Kila</h4> <h6 class="judge__title">Creative Developer</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/jas-bhachu/1878/" 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/jas-bhachu.jpg" width="90" alt="Jas Bhachu" class="judge__avatar" /> </div> <div class="judge__info__col meta"> <h4 class="judge__name">Jas Bhachu</h4> <h6 class="judge__title">Senior Digital Designer</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>  </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

Hocus Pocus Studio - CSS Design Awards