CINXE.COM
Video and Sound Sites - A Gallery of Video and Sound Site Designs via 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" /> <title>Video and Sound Sites - A Gallery of Video and Sound Site Designs via CSS Design Awards</title> <meta name="description" content="The biggest collection of Video and Sound site designs to inspire your next project can be found here on CSS Design Awards. Video and sound is primarily used in web design to add depth and greater expression. Rather than static imagery, the user can watch TV style presentations, animations or many other visually appealing content." /> <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> <!-- /.modal-content --> </div> </div> </div> <!-- /.modal --> <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> <!-- /.modal-content --> </div> </div> </div> <!-- /.modal --> </header> <div class="filters gallery-filters"> <nav class="filters__nav gallery-filters__nav"> <div class="container text-center"> <ul class="filters__list gallery-filters__list"> <li class="filters__list-item gallery-filters__list-item"> <a href="/wotd-award-nominees" class="filters__link gallery-filters__link">Nominees</a> </li> <li class="filters__list-item gallery-filters__list-item"> <a href="/wotd-award-winners" class="filters__link gallery-filters__link">WOTD</a> </li> <li class="filters__list-item gallery-filters__list-item"> <button class="filters__trigger gallery-filters__trigger" data-drawer-open="winners"> More Sites </button> </li> <li class="filters__list-item gallery-filters__list-item"> <button class="filters__trigger gallery-filters__trigger" data-drawer-open="features"> Features </button> </li> <li class="filters__list-item gallery-filters__list-item"> <button class="filters__trigger gallery-filters__trigger" data-drawer-open="industry"> Industry </button> </li> <li class="filters__list-item gallery-filters__list-item"> <button class="filters__trigger gallery-filters__trigger" data-drawer-open="colour"> Color </button> </li> </ul> </div> </nav> <div class="filters__drawers gallery-filters__drawers" data-drawer-container> <div class="subfilters gallery-subfilters" data-drawer="winners"> <div class="container text-center"> <div class="subfilters__list gallery-subfilters__list"> <a href="/special-kudos-award-winners">Special Kudos</a>, <a href="/wotm-award-winners">WOTM</a>, <a href="/woty-award-winners">WOTY</a> </div> </div> </div> <div class="subfilters gallery-subfilters" data-drawer="features"> <div class="container text-center"> <div class="subfilters__list gallery-subfilters__list"> <a href="/website-gallery?feature=animated">animated</a>, <a href="/website-gallery?feature=colorful">colorful</a>, <a href="/website-gallery?feature=eCommerce">eCommerce</a>, <a href="/website-gallery?feature=flat+design">flat design</a>, <a href="/website-gallery?feature=fullscreen">fullscreen</a>, <a href="/website-gallery?feature=grid">grid</a>, <a href="/website-gallery?feature=illustrated">illustrated</a>, <a href="/website-gallery?feature=jQuery">jQuery</a>, <a href="/website-gallery?feature=liquid">liquid</a>, <a href="/website-gallery?feature=material+design">material design</a>, <a href="/website-gallery?feature=minimal">minimal</a>, <a href="/website-gallery?feature=one+page">one page</a>, <a href="/website-gallery?feature=parallax">parallax</a>, <a href="/website-gallery?feature=photographic">photographic</a>, <a href="/website-gallery?feature=responsive">responsive</a>, <a href="/website-gallery?feature=scroll">scroll</a>, <a href="/website-gallery?feature=SVG">SVG</a>, <a href="/website-gallery?feature=typographic">typographic</a>, <a href="/website-gallery?feature=video%2Fsound">video/sound</a>, <a href="/website-gallery?feature=VR">VR</a>, <a href="/website-gallery?feature=WebGL">WebGL</a> </div> </div> </div> <div class="subfilters gallery-subfilters" data-drawer="industry"> <div class="container text-center"> <div class="subfilters__list gallery-subfilters__list"> <a href="/website-gallery?industry=agency">agency</a>, <a href="/website-gallery?industry=app">app</a>, <a href="/website-gallery?industry=art">art</a>, <a href="/website-gallery?industry=blog">blog</a>, <a href="/website-gallery?industry=community">community</a>, <a href="/website-gallery?industry=education">education</a>, <a href="/website-gallery?industry=entertainment">entertainment</a>, <a href="/website-gallery?industry=fashion">fashion</a>, <a href="/website-gallery?industry=food%2Fdrink">food/drink</a>, <a href="/website-gallery?industry=graphic+design">graphic design</a>, <a href="/website-gallery?industry=photography">photography</a>, <a href="/website-gallery?industry=products">products</a>, <a href="/website-gallery?industry=real+estate">real estate</a>, <a href="/website-gallery?industry=services">services</a>, <a href="/website-gallery?industry=sport">sport</a>, <a href="/website-gallery?industry=travel">travel</a>, <a href="/website-gallery?industry=web+design%2Fdev">web design/dev</a>, <a href="/website-gallery?industry=wellbeing">wellbeing</a>, <a href="/website-gallery?industry=other">other</a> </div> </div> </div> <div class="subfilters gallery-subfilters" data-drawer="colour"> <div class="container text-center"> <div class="subfilters__list gallery-subfilters__list"> <a href="/website-gallery?color=Red">Red</a>, <a href="/website-gallery?color=Black">Black</a>, <a href="/website-gallery?color=Yellow">Yellow</a>, <a href="/website-gallery?color=Blue">Blue</a>, <a href="/website-gallery?color=Orange">Orange</a>, <a href="/website-gallery?color=Grey">Grey</a>, <a href="/website-gallery?color=Purple">Purple</a>, <a href="/website-gallery?color=Green">Green</a>, <a href="/website-gallery?color=Pink">Pink</a>, <a href="/website-gallery?color=Beige">Beige</a>, <a href="/website-gallery?color=Brown">Brown</a>, <a href="/website-gallery?color=White">White</a>, <a href="/website-gallery?color=Multi">Multi</a> </div> </div> </div> </div> </div> <h3 style="text-align: center; margin-bottom: 50px;">Video/sound Sites</h3> <section class="gallery-projects"> <div class="container"> <div class="gallery-projects__list projects__list"> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241211005256.jpg" width="360" alt="Utsubo website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">DEC 11</span> </div> <a href="/sites/utsubo/46751/" class="sp__full-size-link"></a> <a href="https://www.utsubo.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Utsubo website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/utsubo/46751/">Utsubo</a></h3> <div class="single-project__scores"> <span class="sp__single-score">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241209132724.jpg" width="360" alt="Landways website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">DEC 9</span> </div> <a href="/sites/landways/46742/" class="sp__full-size-link"></a> <a href="https://landways.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Landways website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/landways/46742/">Landways</a></h3> <div class="single-project__scores"> <span class="sp__single-score">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241209072759.jpg" width="360" alt="Matt Shuter + Associates website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">DEC 9</span> </div> <a href="/sites/matt-shuter-associates/46736/" class="sp__full-size-link"></a> <a href="https://msaconsultants.com.au/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Matt Shuter + Associates website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/matt-shuter-associates/46736/">Matt Shuter + Associates</a></h3> <div class="single-project__scores"> <span class="sp__single-score">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241206011503.jpg" width="360" alt="Hocus Pocus Studio website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">DEC 6</span> </div> <a href="/sites/hocus-pocus-studio/46721/" class="sp__full-size-link"></a> <a href="https://hocuspocus-studio.fr/en/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Hocus Pocus Studio website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/hocus-pocus-studio/46721/">Hocus Pocus Studio</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241206074909.jpg" width="360" alt="Make Way For Nature website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">DEC 6</span> </div> <a href="/sites/make-way-for-nature/46724/" class="sp__full-size-link"></a> <a href="https://biodiversity.swireproperties.com/en" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Make Way For Nature website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/make-way-for-nature/46724/">Make Way For Nature</a></h3> <div class="single-project__scores"> <span class="sp__single-score">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241202054409.jpg" width="360" alt="Agorespace website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">S.KUDOS</span> <span class="sp__meta__date">DEC 7</span> </div> <a href="/sites/agorespace/46696/" class="sp__full-size-link"></a> <a href="https://www.agorespace.com/en-us" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Agorespace website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/agorespace/46696/">Agorespace</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> <span class="sp__single-score jpanel">JPANEL 7.66</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241129090247.jpg" width="360" alt="Loewe Craftball website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">NOV 29</span> </div> <a href="/sites/loewe-craftball/46683/" class="sp__full-size-link"></a> <a href="https://craftball.loewe.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Loewe Craftball website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/loewe-craftball/46683/">Loewe Craftball</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241128084157.jpg" width="360" alt="AlphaWave website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">NOV 28</span> </div> <a href="/sites/alphawave/46669/" class="sp__full-size-link"></a> <a href="https://alpha-wave.ai" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="AlphaWave website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/alphawave/46669/">AlphaWave</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241126104125.jpg" width="360" alt="Vantage Inc website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">NOV 26</span> </div> <a href="/sites/vantage-inc/46663/" class="sp__full-size-link"></a> <a href="https://vantage.ava-case.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Vantage Inc website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/vantage-inc/46663/">Vantage Inc</a></h3> <div class="single-project__scores"> <span class="sp__single-score">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241125085732.jpg" width="360" alt="Benjamin Balazs — Portfolio website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">NOV 25</span> </div> <a href="/sites/benjamin-balazs-portfolio/46661/" class="sp__full-size-link"></a> <a href="https://benjaminbalazs.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Benjamin Balazs — Portfolio website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/benjamin-balazs-portfolio/46661/">Benjamin Balazs — Portfolio</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241118135355.jpg" width="360" alt="Daniel Vaszka — Portfolio 2024 website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">DEC 5</span> </div> <a href="/sites/daniel-vaszka-portfolio-2024/46630/" class="sp__full-size-link"></a> <a href="https://www.danielvaszka.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Daniel Vaszka — Portfolio 2024 website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/daniel-vaszka-portfolio-2024/46630/">Daniel Vaszka — Portfolio 2024</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> <span class="sp__single-score jpanel">JPANEL 8.46</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241114083525.jpg" width="360" alt="LCY Global Enterprise website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">S.KUDOS</span> <span class="sp__meta__date">NOV 19</span> </div> <a href="/sites/lcy-global-enterprise/46613/" class="sp__full-size-link"></a> <a href="https://www.lcycic.com/en" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="LCY Global Enterprise website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/lcy-global-enterprise/46613/">LCY Global Enterprise</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> <span class="sp__single-score jpanel">JPANEL 6.19</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241108134403.jpg" width="360" alt="DENTSU Lab Showreel website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">S.KUDOS</span> <span class="sp__meta__date">NOV 24</span> </div> <a href="/sites/dentsu-lab-showreel/46589/" class="sp__full-size-link"></a> <a href="https://reel.dentsulab.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="DENTSU Lab Showreel website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/dentsu-lab-showreel/46589/">DENTSU Lab Showreel</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> <span class="sp__single-score jpanel">JPANEL 7.98</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241105112758.jpg" width="360" alt="Banzai Izakaya Experience website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">NOV 17</span> </div> <a href="/sites/banzai-izakaya-experience/46562/" class="sp__full-size-link"></a> <a href="https://www.nudolsbanzai.it/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Banzai Izakaya Experience website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/banzai-izakaya-experience/46562/">Banzai Izakaya Experience</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> <span class="sp__single-score jpanel">JPANEL 7.98</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241103011819.jpg" width="360" alt="Runaween website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">NOV 16</span> </div> <a href="/sites/runaween/46546/" class="sp__full-size-link"></a> <a href="https://runaween.amce-studios.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Runaween website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/runaween/46546/">Runaween</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> <span class="sp__single-score jpanel">JPANEL 8.62</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202410/20241028121915.jpg" width="360" alt="FADRINES website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">S.KUDOS</span> <span class="sp__meta__date">OCT 31</span> </div> <a href="/sites/fadrines/46485/" class="sp__full-size-link"></a> <a href="https://fadrines.dival.es/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="FADRINES website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/fadrines/46485/">FADRINES</a></h3> <div class="single-project__scores"> <span class="sp__single-score">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">INN</span> <span class="sp__single-score jpanel">JPANEL 7.25</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202410/20241026091832.jpg" width="360" alt="Exit Eleven website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">S.KUDOS</span> <span class="sp__meta__date">NOV 1</span> </div> <a href="/sites/exit-eleven/46494/" class="sp__full-size-link"></a> <a href="https://exit11.io/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Exit Eleven website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/exit-eleven/46494/">Exit Eleven</a></h3> <div class="single-project__scores"> <span class="sp__single-score">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">INN</span> <span class="sp__single-score jpanel">JPANEL 7.36</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202410/20241025064137.jpg" width="360" alt="Cell Interactive Co.,Ltd. website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">S.KUDOS</span> <span class="sp__meta__date">OCT 31</span> </div> <a href="/sites/cell-interactive/46487/" class="sp__full-size-link"></a> <a href="https://cellinteractive.jp/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Cell Interactive Co.,Ltd. website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/cell-interactive/46487/">Cell Interactive Co.,Ltd.</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> <span class="sp__single-score jpanel">JPANEL 7.55</span> </div> </div> </article> </div> <div class="gallery-projects__pagination"> <div class="pagination text-center"> <ul class="pagination__list"> <li class="pagination__item current"><a href="/website-gallery?feature=video/sound&page=1" class="pagination__link">1</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=2" class="pagination__link">2</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=3" class="pagination__link">3</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=4" class="pagination__link">4</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=5" class="pagination__link">5</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=6" class="pagination__link">6</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=7" class="pagination__link">7</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=8" class="pagination__link">8</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=9" class="pagination__link">9</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=10" class="pagination__link">10</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=11" class="pagination__link">11</a></li> <li class="pagination__item">...</li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=98" class="pagination__link">98</a></li> <li class="pagination__item"><a href="/website-gallery?feature=video/sound&page=2" class="pagination__link">›</a></li> </ul> <!-- /.pagination-list --> </div> <!-- /.pagination --> </div> </div> </section> <div class="page-modals"> </div> <div class="container smsc-button-wrapper"> <a class="smsc-button light" href="#">Go to Top</a> </div> <footer class="main light"> <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>