UI Tasks Project

This project contains 7 UI tasks designed using Bootstrap and custom CSS. Each task is implemented as a separate HTML file with its own styles and scripts. The tasks are interconnected via navigation tabs for easy access.

Folder Structure

ui-tasks/
├── task1/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── task2/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── task3/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── task4/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── task5/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── task6/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── task7/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── assets/
│   ├── css/
│   │   └── bootstrap.min.css
│   └── img/
│       ├── yacht.jpg
│       ├── inn.jpg
│       └── super_yatch.png
└── README.md

Features

• Bootstrap Integration: All tasks use Bootstrap for responsive design and styling.
• Custom CSS: Each task has its own styles.css file for additional styling.
• JavaScript Functionality: Interactive elements are implemented using script.js.
• Navigation Tabs: A tab-based navigation system connects all tasks for seamless browsing.
• Images: High-quality images are used to enhance the visual appeal of the tasks.

How to Run

1. Clone the repository or download the project folder.
2. Open any index.html file from the task1 to task7 folders in your browser.
3. Ensure the assets folder is in the correct relative path for images and Bootstrap CSS.

Task Details

Task 1: Welcome Gift

• Displays a polaroid-style image gallery.
• Users can hover over images to reveal hidden content.
• Includes a form to select options and claim rewards.

Task 2-7

• Each task has unique functionality and design.
• Navigate between tasks using the tabs at the top of the page.

Dependencies

• Bootstrap
• GSAP
• Google Fonts

License

This project is open-source and can be modified or distributed freely.

---