This was a task for BlockStak company
- Solution URL: github link
- Live Site URL: live site link
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- use dynamic width search bar in header that is made by using focus-within
- view slider of nft pictures from many sections.
- use navigation for navigating through sections.
- use mobile menu for navigating sections in tablet and mobile devices.
- Receive an error message when the footer subscribe now
formis submitted if:- The
inputfield is empty - The email address is not formatted correctly
- The
- Clone the repository:
git clone https://github.com/ankan-782/NFT-landing-page.git- Navigate to the project directory:
cd NFT-landing-page- Install dependencies:
npm install- run the project:
npm run dev- Full website
- Header at smaller devices with normal search bar
- Header at smaller devices with dynamic width search bar closed state
- Header at smaller devices with dynamic width search bar opend state
- Hero section at smaller devices
- Marketplace section at smaller devices.png
- Filter at closed state
- Filter at opened state
- Dropdown filter.png
- Footer at smaller devices
- Subscribe form at normal stage
- Subscribe form at not fitting breakpoint stage
- Mobile menu at certain width at smaller devices
- Mobile menu at full width at very small devices
- React Js
- Semantic JSX markup
- Tailwind CSS
- Flex-box
- CSS Grid
- Position
- Mobile-first workflow
- Various npm packages
-
React scroll - This npm package provides different types of scrolling effect for react website. I have used scroll to top and navigation smooth scrolling feature from react scroll for this website.
-
Swiper JS - This npm package provides many slider as react component. I brought effect coverflow slider and applied in hero section.
- Website - Avijit Roy
- LinkedIn - avijit-roy-ankan
- Twitter - @AvijitAnkan