Desktop Design

Inner Pages

Tablet Design

Mobile Design

Photosnap multi-page website

<h3 class="text-lg font-bold">100% responsive</h3>

<li class=" mx-6 cursor-pointer duration-300 hover:text-light-gray ">STORIES</li>

<li class=" mx-6 cursor-pointer duration-300 hover:text-light-gray ">FEATURES</li>

<li class=" mx-6 cursor-pointer duration-300 hover:text-light-gray ">PRICING</li>

<li class=" text-sm text-white font-bold tracking-[2px] lg:mb-[20.6px] cursor-pointer duration-300 hover:opacity-30 max-lg:pr-6 max-lg:mt-8 max-md:mt-5 max-md:pl-5 ">STORIES</li>

<li class=" text-sm text-white font-bold tracking-[2px] lg:mb-[20.6px] cursor-pointer duration-300 hover:opacity-30 max-lg:pr-6 max-lg:mt-8 max-md:mt-5 max-md:pl-5 ">FEATURES</li>

<li class=" text-sm text-white font-bold tracking-[2px] lg:mb-[20.6px] cursor-pointer duration-300 hover:opacity-30 max-lg:pr-6 max-lg:mt-8 max-md:mt-5 max-md:pl-5 ">PRICING</li>

zes="any"><meta name="next-size-adjust"><scrip

href="/"><img alt="Logo" loading="lazy" width="170" height="16" decoding="async" data-nimg="1" class="mobile:w-auto w-[100px] h-auto cursor-pointer" style="color: transparent;" src="assets/logo.svg"></a></

"><div class="flex justify-between"><p>GET

div></div><img alt="main-img" loading="lazy" width="850" height="650" decoding="async" data-nimg="1" class="  w-full  md:h-auto  max-md:h-[300px]  object-cover  max-md:object-top  block  overflow-x-hidden  max-md:block  " style="color: transparent;" srcset="/_next/image?url=%2Fassets%2Fcreate-and-share.jpg&amp;w=1080&amp;q=75 1x, /_next/image?url=%2Fassets%2Fcreate-and-share.jpg&amp;w=1920&amp;q=75 2x" src="/_next/image?url=%2Fassets%2Fcreate-and-share.jpg&amp;w=1920&amp;q=75"></sect

ck false"><img alt="beautiful-stories" loading="lazy" width="830" height="600" decoding="async" data-nimg="1" class=" lg:w-[54%] md:w-[273px] md:h-[600px] h-[400px] object-cover " style="color: transparent;" srcset="/_next/image?url=%2Fassets%2Fbeautiful-stories.jpg&amp;w=1080&amp;q=75 1x, /_next/image?url=%2Fassets%2Fbeautiful-stories.jpg&amp;w=1920&amp;q=75 2x" src="/_next/image?url=%2Fassets%2Fbeautiful-stories.jpg&amp;w=1920&amp;q=75"><div c

/stories"><button class="  w-40  h-10  text-xs  font-bold  tracking-widest select-none  cursor-pointer  duration-300  false  false  text-black  false  false  w-52  h-auto  text-left  bg-transparent  hover:bg-transparent  hover:underline  "><div c

"><div class="flex justify-between"><p>VIE

-reverse"><img alt="beautiful-stories" loading="lazy" width="830" height="600" decoding="async" data-nimg="1" class=" lg:w-[54%] md:w-[273px] md:h-[600px] h-[400px] object-cover " style="color: transparent;" srcset="/_next/image?url=%2Fassets%2Fdesigned-for-everyone.jpg&amp;w=1080&amp;q=75 1x, /_next/image?url=%2Fassets%2Fdesigned-for-everyone.jpg&amp;w=1920&amp;q=75 2x" src="/_next/image?url=%2Fassets%2Fdesigned-for-everyone.jpg&amp;w=1920&amp;q=75"><div c

start-1 "><img alt="card-img" loading="lazy" width="384" height="600" decoding="async" data-nimg="1" class=" w-[100%] h-[34rem] object-cover mix-blend-multiply " style="color: transparent;" srcset="/_next/image?url=%2Fimages%2Fmountains.jpg&amp;w=384&amp;q=75 1x, /_next/image?url=%2Fimages%2Fmountains.jpg&amp;w=828&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fmountains.jpg&amp;w=828&amp;q=75"></div>

Y</p><div><img alt="Arrow" loading="lazy" width="42" height="12" decoding="async" data-nimg="1" class="w-auto h-auto" style="color:transparent" src="assets/arrow-white.svg"></div>

start-1 "><img alt="card-img" loading="lazy" width="384" height="600" decoding="async" data-nimg="1" class=" w-[100%] h-[34rem] object-cover mix-blend-multiply " style="color: transparent;" srcset="/_next/image?url=%2Fimages%2Fcityscapes.jpg&amp;w=384&amp;q=75 1x, /_next/image?url=%2Fimages%2Fcityscapes.jpg&amp;w=828&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fcityscapes.jpg&amp;w=828&amp;q=75"></div>

start-1 "><img alt="card-img" loading="lazy" width="384" height="600" decoding="async" data-nimg="1" class=" w-[100%] h-[34rem] object-cover mix-blend-multiply " style="color: transparent;" srcset="/_next/image?url=%2Fimages%2F18-days-voyage.jpg&amp;w=384&amp;q=75 1x, /_next/image?url=%2Fimages%2F18-days-voyage.jpg&amp;w=828&amp;q=75 2x" src="/_next/image?url=%2Fimages%2F18-days-voyage.jpg&amp;w=828&amp;q=75"></div>

start-1 "><img alt="card-img" loading="lazy" width="384" height="600" decoding="async" data-nimg="1" class=" w-[100%] h-[34rem] object-cover mix-blend-multiply " style="color: transparent;" srcset="/_next/image?url=%2Fimages%2Farchitecturals.jpg&amp;w=384&amp;q=75 1x, /_next/image?url=%2Fimages%2Farchitecturals.jpg&amp;w=828&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Farchitecturals.jpg&amp;w=828&amp;q=75"></div>

s-center"><img alt="img-icon" loading="lazy" width="72" height="72" decoding="async" data-nimg="1" class="w-auto h-auto my-11" style="color:transparent" src="/assets/icons-svg/responsive.svg"><div c

s-center"><img alt="img-icon" loading="lazy" width="72" height="72" decoding="async" data-nimg="1" class="w-auto h-auto my-11" style="color:transparent" src="/assets/icons-svg/no-limit.svg"><div c

s-center"><img alt="img-icon" loading="lazy" width="72" height="72" decoding="async" data-nimg="1" class="w-auto h-auto my-11" style="color:transparent" src="/assets/icons-svg/embed.svg"><div c

href="/"><img alt="Logo" loading="lazy" width="170" height="16" decoding="async" data-nimg="1" class="w-auto h-auto mt-[2.5px]" style="color: transparent;" src="assets/logo-white.svg"></a><u

"md:pr-3"><img id="social-media-icon" alt="Social Media Icon" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" class="w-auto h-auto duration-500 cursor-pointer" style="color:transparent" src="assets/facebook.svg"></li><

"md:pr-3"><img id="social-media-icon" alt="Social Media Icon" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" class="w-auto h-auto duration-500 cursor-pointer" style="color:transparent" src="assets/youtube.svg"></li><

"md:pr-3"><img id="social-media-icon" alt="Social Media Icon" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" class="w-auto h-auto duration-500 cursor-pointer" style="color:transparent" src="assets/twitter.svg"></li><

"md:pr-3"><img id="social-media-icon" alt="Social Media Icon" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" class="w-auto h-auto duration-500 cursor-pointer" style="color:transparent" src="assets/pinterest.svg"></li><

"md:pr-3"><img id="social-media-icon" alt="Social Media Icon" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" class="w-auto h-auto duration-500 cursor-pointer" style="color:transparent" src="assets/instagram.svg"></li><

g-black "><section class="grid md:grid-cols-2 max-md:grid-rows-2"><a hre

</section><section class="text-white max-md:mt-[120px]"><div><

Design comparison

Please log in to post a comment

Responsive Photosnap project using React, Next and Tailwind

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community