https://github.com/sojibpannashovon2/unlocklive-assignment

Assignment Given By Unlocklive Software Company For Frontend Development
https://github.com/sojibpannashovon2/unlocklive-assignment

css3 figma javascript react react-router react-router-dom responsive tailwind-css

Last synced: 2 months ago
JSON representation

Assignment Given By Unlocklive Software Company For Frontend Development

• Host: GitHub
• URL: https://github.com/sojibpannashovon2/unlocklive-assignment
• Owner: sojibpannashovon2
• Created: 2024-03-06T17:55:45.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-13T09:47:27.000Z (over 2 years ago)
• Last Synced: 2025-09-10T06:13:30.193Z (10 months ago)
• Topics: css3, figma, javascript, react, react-router, react-router-dom, responsive, tailwind-css
• Language: JavaScript
• Homepage: https://unlocklivemdarifurrahman.netlify.app/
• Size: 47.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
#Unloclive

##Md Arifur Rahman

##Email: mdarifur554@gmail.com

##Mobile: +8801616841446

#Firstly Installtion react vite app with tailwind css.

#Include provided local font file into project public folder, then connect the fonts family with multiple different font family name to index.css file and tailwind config.js file

##Nabar component

##Responive navbar added to the MainLayout

         

![Screenshot 2024-03-13 151840](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/d53ccc57-8f1f-41c9-8936-64b15e79a8cb)

##Banner Section

![Screenshot 2024-03-13 152049](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/052f672e-416d-4c95-b24b-7fe07746a9ee)

#At first export require image from given figma design

#Responsive the banner section with 

 

#Second Section

![Screenshot 2024-03-13 152334](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/0e3a57dc-a578-4c65-95cc-18a37f5d0492)

## Third section 

In thrid section I have face some problem for setting the background image and  can not fix the border issue which the company require or want.

![Screenshot 2024-03-13 152755](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/81776449-0c1d-4f4e-85ac-34f66ba076e6)

##Fourth Section

![Screenshot 2024-03-13 152934](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/965bc88f-db4a-4140-b0b8-8283edd6aa2d)

##Fifth section

In the fourth section I have faced more difficulty then any other section of the design 

#For this I have to install to my app ---

                npm install @glidejs/glide

#Then have to red-design the shape for getting multiple slide image at a time and locate controle into another section.

![Screenshot 2024-03-13 153603](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/9a038250-b394-409a-ba83-1da85f9185af)

##Sixth section 

For the fifth section I didn't install any technology . I was used chatgpt for getting the correct functionlity for tab system and I was also manupulate the style and get the require design.

![Screenshot 2024-03-13 154332](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/baf035ca-eaee-4241-8f7f-c7e83c4d2ace)

![Screenshot 2024-03-13 154431](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/f7de61d3-a5d3-434a-aa6b-f71968310757)

##Finally Design Responsive footer

![Screenshot 2024-03-13 154609](https://github.com/sojibpannashovon2/unlocklive-assignment/assets/108423803/8977bb97-cf04-48e8-bff6-9c5e9b3aee8e)

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh