CINXE.COM
Colorful Sites - A Gallery of Colorful Website 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>Colorful Sites - A Gallery of Colorful Website Designs via CSS Design Awards</title> <meta name="description" content="The biggest collection of colorful website designs to inspire your next project can be found here on CSS Design Awards. The use of color in web design is used primarily for brand separation, emotion and the hierarchical structure of 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;">Colorful 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/20241204092423.jpg" width="360" alt="Namada 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 4</span> </div> <a href="/sites/namada/46710/" class="sp__full-size-link"></a> <a href="https://namada.net/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Namada website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/namada/46710/">Namada</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/20241203050227.jpg" width="360" alt="Take Me To Christmas 2024 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 3</span> </div> <a href="/sites/take-me-to-christmas-2024/46704/" class="sp__full-size-link"></a> <a href="https://christmas-2024.riven.ch/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Take Me To Christmas 2024 website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/take-me-to-christmas-2024/46704/">Take Me To Christmas 2024</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/20241122115744.jpg" width="360" alt="Recruitment.by 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 27</span> </div> <a href="/sites/recruitment-by/46654/" class="sp__full-size-link"></a> <a href="https://recruitment.by/eng/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Recruitment.by website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/recruitment-by/46654/">Recruitment.by</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.26</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241121080901.jpg" width="360" alt="Vegter 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 21</span> </div> <a href="/sites/vegter/46641/" class="sp__full-size-link"></a> <a href="https://www.vegter.nl/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Vegter website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/vegter/46641/">Vegter</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/20241121062730.jpg" width="360" alt="The Opium Wars — Longread 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 21</span> </div> <a href="/sites/the-opium-wars-longread/46639/" class="sp__full-size-link"></a> <a href="https://opium-wars.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="The Opium Wars — Longread website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/the-opium-wars-longread/46639/">The Opium Wars — Longread</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/20241120053846.jpg" width="360" alt="Graduate Hotels 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 25</span> </div> <a href="/sites/graduate-hotels/46636/" class="sp__full-size-link"></a> <a href="https://www.hilton.com/en/brands/graduate-hotels/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Graduate Hotels website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/graduate-hotels/46636/">Graduate Hotels</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.93</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241113112842.jpg" width="360" alt="La Fiorellaia 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 18</span> </div> <a href="/sites/la-fiorellaia/46608/" class="sp__full-size-link"></a> <a href="https://www.lafiorellaia.it/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="La Fiorellaia website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/la-fiorellaia/46608/">La Fiorellaia</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.29</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">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">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/202411/20241112040614.jpg" width="360" alt="Recharge 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 18</span> </div> <a href="/sites/recharge/46597/" class="sp__full-size-link"></a> <a href="https://company.recharge.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Recharge website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/recharge/46597/">Recharge</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.33</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241111114049.jpg" width="360" alt="Check 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 20</span> </div> <a href="/sites/check/46594/" class="sp__full-size-link"></a> <a href="https://wearecheck.co/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Check website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/check/46594/">Check</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.30</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241111001808.jpg" width="360" alt="Brault 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 15</span> </div> <a href="/sites/brault/46591/" class="sp__full-size-link"></a> <a href="https://brault.app/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Brault website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/brault/46591/">Brault</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.05</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241107043135.jpg" width="360" alt="Eyewear Junkie 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 11</span> </div> <a href="/sites/eyewear-junkie/46583/" class="sp__full-size-link"></a> <a href="https://eyewearjunkie.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Eyewear Junkie website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/eyewear-junkie/46583/">Eyewear Junkie</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.31</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241106103524.jpg" width="360" alt="Radiance — Creative Team 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 19</span> </div> <a href="/sites/radiance-creative-team/46578/" class="sp__full-size-link"></a> <a href="http://radiance.family" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Radiance — Creative Team website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/radiance-creative-team/46578/">Radiance — Creative Team</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.56</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241106071130.jpg" width="360" alt="DELAUNAY Inc. 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 11</span> </div> <a href="/sites/delaunay-inc/46576/" class="sp__full-size-link"></a> <a href="https://delaunay.jp/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="DELAUNAY Inc. website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/delaunay-inc/46576/">DELAUNAY Inc.</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.30</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241105134259.jpg" width="360" alt="Payment Pioneers Untold Story 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 10</span> </div> <a href="/sites/payment-pioneers-untold-story/46565/" class="sp__full-size-link"></a> <a href="https://primer.io/payment-pioneers" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Payment Pioneers Untold Story website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/payment-pioneers-untold-story/46565/">Payment Pioneers Untold Story</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.32</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241104102557.jpg" width="360" alt="AI in Banking UX Design 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 15</span> </div> <a href="/sites/ai-in-banking-ux-design/46554/" class="sp__full-size-link"></a> <a href="https://ai-in-banking-ux-design.videinfra.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="AI in Banking UX Design website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/ai-in-banking-ux-design/46554/">AI in Banking UX Design</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 8.51</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241104085619.jpg" width="360" alt="AMP 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 8</span> </div> <a href="/sites/amp/46552/" class="sp__full-size-link"></a> <a href="https://www.angusmcquadeprojects.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="AMP website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/amp/46552/">AMP</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 6.12</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241103235353.jpg" width="360" alt="A Brighter Year 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 8</span> </div> <a href="/sites/a-brighter-year/46549/" class="sp__full-size-link"></a> <a href="https://abrighteryear.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="A Brighter Year website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/a-brighter-year/46549/">A Brighter Year</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.21</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=colorful&page=1" class="pagination__link">1</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=2" class="pagination__link">2</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=3" class="pagination__link">3</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=4" class="pagination__link">4</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=5" class="pagination__link">5</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=6" class="pagination__link">6</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=7" class="pagination__link">7</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=8" class="pagination__link">8</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=9" class="pagination__link">9</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=10" class="pagination__link">10</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=11" class="pagination__link">11</a></li> <li class="pagination__item">...</li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&page=162" class="pagination__link">162</a></li> <li class="pagination__item"><a href="/website-gallery?feature=colorful&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>