CINXE.COM
Art Sites - A Gallery of Art 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>Art Sites - A Gallery of Art Site Designs via CSS Design Awards</title> <meta name="description" content="The biggest collection of Art site designs to inspire your next project can be found here on CSS Design Awards. Art site design refers to the design of websites specifically used by artists to display their art works." /> <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;">Art 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/20241212135056.jpg" width="360" alt="Color Monkey 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 12</span> </div> <a href="/sites/color-monkey/46759/" class="sp__full-size-link"></a> <a href="https://www.color-monkey.com/en" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Color Monkey website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/color-monkey/46759/">Color Monkey</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/20241212040322.jpg" width="360" alt="Tsai Wei Cheng Creative Scupltur 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 12</span> </div> <a href="/sites/tsai-wei-cheng-creative-scupltur/46757/" class="sp__full-size-link"></a> <a href="https://www.cheng-sculpture.com.tw" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Tsai Wei Cheng Creative Scupltur website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/tsai-wei-cheng-creative-scupltur/46757/">Tsai Wei Cheng Creative Scupltur</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/20241206135355.jpg" width="360" alt="Loraine the Libra 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/loraine-the-libra/46732/" class="sp__full-size-link"></a> <a href="https://www.lorainethelibra.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Loraine the Libra website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/loraine-the-libra/46732/">Loraine the Libra</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/20241206104448.jpg" width="360" alt="Future City Sibuya Exhibition 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/future-city-sibuya-exhibition/46730/" class="sp__full-size-link"></a> <a href="https://en.gyre-omotesando.com/artandgallery/shibuya/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Future City Sibuya Exhibition website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/future-city-sibuya-exhibition/46730/">Future City Sibuya Exhibition</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/20241113060653.jpg" width="360" alt="Gallery of Mo 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/gallery-of-mo/46606/" class="sp__full-size-link"></a> <a href="https://www.galleryofmo.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Gallery of Mo website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/gallery-of-mo/46606/">Gallery of Mo</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.47</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202410/20241012064433.jpg" width="360" alt="FULCRUM STUDIO 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 17</span> </div> <a href="/sites/fulcrum-studio/46411/" class="sp__full-size-link"></a> <a href="https://fulcrumdesignstudio.art/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="FULCRUM STUDIO website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/fulcrum-studio/46411/">FULCRUM 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> <span class="sp__single-score jpanel">JPANEL 7.07</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202410/20241006005138.jpg" width="360" alt="MOYCERAM 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 10</span> </div> <a href="/sites/moyceram/46387/" class="sp__full-size-link"></a> <a href="https://moyceram.tilda.ws" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="MOYCERAM website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/moyceram/46387/">MOYCERAM</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.27</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202409/20240921125325.jpg" width="360" alt="Panelki 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">SEP 27</span> </div> <a href="/sites/panelki/46313/" class="sp__full-size-link"></a> <a href="http://panelkinostalgia.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Panelki website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/panelki/46313/">Panelki</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.09</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202409/20240916101810.jpg" width="360" alt="None Of Your Business 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">SEP 20</span> </div> <a href="/sites/none-of-your-business/46295/" class="sp__full-size-link"></a> <a href="http://noneofyourbusiness.tilda.ws/en" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="None Of Your Business website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/none-of-your-business/46295/">None Of Your Business</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.47</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202409/20240912130547.jpg" width="360" alt="BRICK website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">SEP 28</span> </div> <a href="/sites/brick/46279/" class="sp__full-size-link"></a> <a href="https://www.brickstudio.nyc/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="BRICK website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/brick/46279/">BRICK</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.01</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202409/20240911010434.jpg" width="360" alt="The Story of Baiba Sturite website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">SEP 18</span> </div> <a href="/sites/the-story-of-baiba-sturite/46274/" class="sp__full-size-link"></a> <a href="https://www.baibasturite.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="The Story of Baiba Sturite website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/the-story-of-baiba-sturite/46274/">The Story of Baiba Sturite</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.49</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202409/20240903004036.jpg" width="360" alt="Monolith Studio website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">SEP 9</span> </div> <a href="/sites/monolith-studio/46219/" class="sp__full-size-link"></a> <a href="https://monolithstudio.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Monolith Studio website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/monolith-studio/46219/">Monolith 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> <span class="sp__single-score jpanel">JPANEL 8.36</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202408/20240815063127.jpg" width="360" alt="Art Timeline website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">AUG 31</span> </div> <a href="/sites/art-timeline/46137/" class="sp__full-size-link"></a> <a href="https://art-timeline.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Art Timeline website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/art-timeline/46137/">Art Timeline</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.20</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202408/20240805111311.jpg" width="360" alt="Yorgos Lanthimos website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">AUG 19</span> </div> <a href="/sites/yorgos-lanthimos/46084/" class="sp__full-size-link"></a> <a href="https://lanthimos.tilda.ws/en" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Yorgos Lanthimos website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/yorgos-lanthimos/46084/">Yorgos Lanthimos</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.35</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202407/20240731122158.jpg" width="360" alt="VisualAlloy 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">AUG 7</span> </div> <a href="/sites/visualalloy/46058/" class="sp__full-size-link"></a> <a href="https://visualalloy.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="VisualAlloy website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/visualalloy/46058/">VisualAlloy</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.38</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202407/20240727011101.jpg" width="360" alt="HungChi.Art website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">WOTD</span> <span class="sp__meta__date">OCT 2</span> </div> <a href="/sites/hungchi-art/46028/" class="sp__full-size-link"></a> <a href="https://hungchi.art/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="HungChi.Art website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/hungchi-art/46028/">HungChi.Art</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.05</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202407/20240724055852.jpg" width="360" alt="BRAIN DROOL 2023 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">JUL 31</span> </div> <a href="/sites/brain-drool-2023/46011/" class="sp__full-size-link"></a> <a href="https://brain-drool.jp/2023/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="BRAIN DROOL 2023 website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/brain-drool-2023/46011/">BRAIN DROOL 2023</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.21</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202406/20240617132150.jpg" width="360" alt="SOGAI™ 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">JUN 21</span> </div> <a href="/sites/sogai/45797/" class="sp__full-size-link"></a> <a href="https://www.sogaiart.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="SOGAI™ website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/sogai/45797/">SOGAI™</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.89</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?industry=art&page=1" class="pagination__link">1</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=2" class="pagination__link">2</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=3" class="pagination__link">3</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=4" class="pagination__link">4</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=5" class="pagination__link">5</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=6" class="pagination__link">6</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=7" class="pagination__link">7</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=8" class="pagination__link">8</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=9" class="pagination__link">9</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=10" class="pagination__link">10</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=11" class="pagination__link">11</a></li> <li class="pagination__item">...</li> <li class="pagination__item"><a href="/website-gallery?industry=art&page=31" class="pagination__link">31</a></li> <li class="pagination__item"><a href="/website-gallery?industry=art&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>