CINXE.COM
Scroll Sites - A Gallery of Sites Designed For Scrolling 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>Scroll Sites - A Gallery of Sites Designed For Scrolling via CSS Design Awards</title> <meta name="description" content="The biggest collection of Scroll site designs to inspire your next project can be found here on CSS Design Awards. Scroll sites are websites designed to maximize the use of the scrolling ability of websites within a browser." /> <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;">Scroll 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/20241204092459.jpg" width="360" alt="Casa Mon 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/casa-mon/46712/" class="sp__full-size-link"></a> <a href="https://www.casamon.it/en/home/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Casa Mon website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/casa-mon/46712/">Casa Mon</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/20241202114121.jpg" width="360" alt="Tanya Timal Photographer 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 2</span> </div> <a href="/sites/tanya-timal-photographer/46699/" class="sp__full-size-link"></a> <a href="https://tanyatimal.studio/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Tanya Timal Photographer website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/tanya-timal-photographer/46699/">Tanya Timal Photographer</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/20241202054423.jpg" width="360" alt="Heave Corp 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 2</span> </div> <a href="/sites/heave-corp/46694/" class="sp__full-size-link"></a> <a href="https://heavecorp.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Heave Corp website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/heave-corp/46694/">Heave Corp</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/20241202054356.jpg" width="360" alt="Mas Girbau 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 2</span> </div> <a href="/sites/mas-girbau/46698/" class="sp__full-size-link"></a> <a href="https://www.masgirbau.com/en" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Mas Girbau website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/mas-girbau/46698/">Mas Girbau</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/20241129101413.jpg" width="360" alt="Swire Properties GPP Website 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 3</span> </div> <a href="/sites/swire-properties-gpp-website/46685/" class="sp__full-size-link"></a> <a href="https://gpp.swireproperties.com/en/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Swire Properties GPP Website website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/swire-properties-gpp-website/46685/">Swire Properties GPP Website</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.15</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241129043713.jpg" width="360" alt="AYANA BALI 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/ayana-bali/46680/" class="sp__full-size-link"></a> <a href="https://www.ayana.com/bali/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="AYANA BALI website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/ayana-bali/46680/">AYANA BALI</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/20241129043648.jpg" width="360" alt="Isabl 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 3</span> </div> <a href="/sites/isabl/46673/" class="sp__full-size-link"></a> <a href="https://www.isabl.io/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Isabl website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/isabl/46673/">Isabl</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.93</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241128092338.jpg" width="360" alt="Future Crew 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 2</span> </div> <a href="/sites/future-crew/46671/" class="sp__full-size-link"></a> <a href="https://futurecrew.tech/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Future Crew website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/future-crew/46671/">Future Crew</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.59</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/20241125062643.jpg" width="360" alt="Sentosa Sensoryscape 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 29</span> </div> <a href="/sites/sentosa-sensoryscape/46660/" class="sp__full-size-link"></a> <a href="https://sensoryscape.sentosa.com.sg/en/index.html" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Sentosa Sensoryscape website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/sentosa-sensoryscape/46660/">Sentosa Sensoryscape</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.24</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241122105317.jpg" width="360" alt="Ronce Bleue 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/ronce-bleue/46650/" class="sp__full-size-link"></a> <a href="https://ronce-bleue.com/en/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Ronce Bleue website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/ronce-bleue/46650/">Ronce Bleue</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.53</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241122091936.jpg" width="360" alt="Dodivetro 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/dodivetro/46649/" class="sp__full-size-link"></a> <a href="https://dodivetro.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Dodivetro website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/dodivetro/46649/">Dodivetro</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> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241122062849.jpg" width="360" alt="Jazean Coffee 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/jazean-coffee/46646/" class="sp__full-size-link"></a> <a href="https://www.jazeancoffee.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Jazean Coffee website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/jazean-coffee/46646/">Jazean Coffee</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.86</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241119034031.jpg" width="360" alt="MOLO 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 19</span> </div> <a href="/sites/molo/46628/" class="sp__full-size-link"></a> <a href="https://www.molohouse.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="MOLO website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/molo/46628/">MOLO</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/202410/20241009075111.jpg" width="360" alt="Jasmina Denner 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 1</span> </div> <a href="/sites/jasmina-denner/46402/" class="sp__full-size-link"></a> <a href="https://jasminadenner.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Jasmina Denner website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/jasmina-denner/46402/">Jasmina Denner</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/20241117071951.jpg" width="360" alt="Riad Mammadov 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 17</span> </div> <a href="/sites/riad-mammadov/46624/" class="sp__full-size-link"></a> <a href="https://riadmammadov.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Riad Mammadov website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/riad-mammadov/46624/">Riad Mammadov</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/20241116235828.jpg" width="360" alt="Q Refinish 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 17</span> </div> <a href="/sites/q-refinish/46620/" class="sp__full-size-link"></a> <a href="https://www.qrefinish.com/en" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Q Refinish website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/q-refinish/46620/">Q Refinish</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/20241112123053.jpg" width="360" alt="ATMOS® Lamp by AYOCIN 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 25</span> </div> <a href="/sites/atmos-lamp-by-ayocin/46604/" class="sp__full-size-link"></a> <a href="https://ayocin.com/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="ATMOS® Lamp by AYOCIN website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/atmos-lamp-by-ayocin/46604/">ATMOS® Lamp by AYOCIN</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 9.28</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=scroll&page=1" class="pagination__link">1</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=2" class="pagination__link">2</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=3" class="pagination__link">3</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=4" class="pagination__link">4</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=5" class="pagination__link">5</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=6" class="pagination__link">6</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=7" class="pagination__link">7</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=8" class="pagination__link">8</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=9" class="pagination__link">9</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=10" class="pagination__link">10</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=11" class="pagination__link">11</a></li> <li class="pagination__item">...</li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&page=157" class="pagination__link">157</a></li> <li class="pagination__item"><a href="/website-gallery?feature=scroll&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>