CINXE.COM
Parallax Sites - A Gallery of Parallax 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>Parallax Sites - A Gallery of Parallax Site Designs via CSS Design Awards</title> <meta name="description" content="The biggest collection of Parallax site designs to inspire your next project can be found here on CSS Design Awards. Parallax refers to the visual effect of scrolling different background image movement speeds to create the illusion of depth and layering of content within a website. Parallax is an impressive visual effect when used correctly by web designers and developers." /> <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;">Parallax 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/20241206011503.jpg" width="360" alt="Hocus Pocus Studio website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">DEC 6</span> </div> <a href="/sites/hocus-pocus-studio/46721/" class="sp__full-size-link"></a> <a href="https://hocuspocus-studio.fr/en/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Hocus Pocus Studio website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/hocus-pocus-studio/46721/">Hocus Pocus Studio</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241206074909.jpg" width="360" alt="Make Way For Nature website" /> <div class="single-project__thumbnail__overlay"> <div class="single-project__meta"> <span class="sp__meta__category">NOMINEE</span> <span class="sp__meta__date">DEC 6</span> </div> <a href="/sites/make-way-for-nature/46724/" class="sp__full-size-link"></a> <a href="https://biodiversity.swireproperties.com/en" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Make Way For Nature website"></a> <span class="sp__view-info">Vote</span> </div> </div> <h3 class="single-project__title"><a href="/sites/make-way-for-nature/46724/">Make Way For Nature</a></h3> <div class="single-project__scores"> <span class="sp__single-score">UI</span> <span class="sp__single-score">UX</span> <span class="sp__single-score">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241205002800.jpg" width="360" alt="DG Beauty - My Lip Stylo 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 5</span> </div> <a href="/sites/dg-beauty-my-lip-stylo/46716/" class="sp__full-size-link"></a> <a href="https://lipstylo.dolcegabbana.com/en/master/dg/online" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="DG Beauty - My Lip Stylo website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/dg-beauty-my-lip-stylo/46716/">DG Beauty - My Lip Stylo</a></h3> <div class="single-project__scores"> <span class="sp__single-score active">UI</span> <span class="sp__single-score active">UX</span> <span class="sp__single-score active">INN</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202412/20241205050001.jpg" width="360" alt="Brand Process Playbook 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 11</span> </div> <a href="/sites/brand-process-playbook/46718/" class="sp__full-size-link"></a> <a href="https://learn.forgooddesignlab.com" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Brand Process Playbook website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/brand-process-playbook/46718/">Brand Process Playbook</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.83</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241130045812.jpg" width="360" alt="Leeroy 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 4</span> </div> <a href="/sites/leeroy/46691/" class="sp__full-size-link"></a> <a href="https://www.leeroy.ca/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Leeroy website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/leeroy/46691/">Leeroy</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.85</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202411/20241129114125.jpg" width="360" alt="Dr. Katerina Moustaka 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/dr-katerina-moustaka/46686/" class="sp__full-size-link"></a> <a href="https://www.moustaka.gr/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Dr. Katerina Moustaka website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/dr-katerina-moustaka/46686/">Dr. Katerina Moustaka</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.82</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/20241128092332.jpg" width="360" alt="Solana Payouts 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/solana-payouts/46670/" class="sp__full-size-link"></a> <a href="https://solana-db.webflow.io/#how-it-works" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Solana Payouts website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/solana-payouts/46670/">Solana Payouts</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.95</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/20241123001734.jpg" width="360" alt="Gentlerain.ai 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 12</span> </div> <a href="/sites/gentlerain-ai/46657/" class="sp__full-size-link"></a> <a href="https://www.gentlerain.ai/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Gentlerain.ai website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/gentlerain-ai/46657/">Gentlerain.ai</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.40</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/20241111114148.jpg" width="360" alt="Bike in Portugal 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/bike-in-portugal/46595/" class="sp__full-size-link"></a> <a href="https://www.bikeinportugal.pt/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Bike in Portugal website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/bike-in-portugal/46595/">Bike in Portugal</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/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/202410/20241029131430.jpg" width="360" alt="IoT Squared 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 12</span> </div> <a href="/sites/iot-squared/46515/" class="sp__full-size-link"></a> <a href="https://iotsquared.com.sa/" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="IoT Squared website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/iot-squared/46515/">IoT Squared</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.04</span> </div> </div> </article> <article class="single-project"> <div> <div class="single-project__thumbnail"> <img src="/cdasites/2024/202410/20241028235633.jpg" width="360" alt="Balans Kitchen 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 2</span> </div> <a href="/sites/balans-kitchen/46509/" class="sp__full-size-link"></a> <a href="https://www.balanskitchen.pl" target="_blank" class="sp__project-link"><img src="imgs/link.svg" alt="Balans Kitchen website"></a> <span class="sp__view-info">View</span> </div> </div> <h3 class="single-project__title"><a href="/sites/balans-kitchen/46509/">Balans Kitchen</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.35</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=parallax&page=1" class="pagination__link">1</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=2" class="pagination__link">2</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=3" class="pagination__link">3</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=4" class="pagination__link">4</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=5" class="pagination__link">5</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=6" class="pagination__link">6</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=7" class="pagination__link">7</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=8" class="pagination__link">8</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=9" class="pagination__link">9</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=10" class="pagination__link">10</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=11" class="pagination__link">11</a></li> <li class="pagination__item">...</li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&page=116" class="pagination__link">116</a></li> <li class="pagination__item"><a href="/website-gallery?feature=parallax&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>