https://github.com/ntonbala/tw-mf
https://github.com/ntonbala/tw-mf
check-light-or-dark fontawesome-icons html5 javascript responsive-layout tailwindcss vercel-deployment
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ntonbala/tw-mf
- Owner: NtonBala
- Created: 2024-12-19T15:36:20.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-09T16:11:24.000Z (4 months ago)
- Last Synced: 2025-02-14T15:46:23.922Z (3 months ago)
- Topics: check-light-or-dark, fontawesome-icons, html5, javascript, responsive-layout, tailwindcss, vercel-deployment
- Language: CSS
- Homepage: https://tw-mf-delta.vercel.app
- Size: 19.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tw:mf
**tw:mf** is a mobile first landing page for fictional music festival. Project architecture uses dynamic and custom components, custom plugins for Tailwind CSS (to handle basic styles, static and dynamic utilities, static and dynamic components as well as variants) and own base utility component styles. Layout is created with Flexbox and Grid.
Features:
- Full responsiveness
- Navigation bar transitions
- Hero logo animation
- Subscribe form
- Light/dark mode
- Frosting and shadow effects
- Headliners carousel with snap effect
- Timeline ping effect
- Tickets table
- Text and background gradients
- Order section with diagonal radius effect
Project relates to [Tailwind CSS v3 - Beginner to Pro](https://www.udemy.com/course/tailwind-css-zero-to-hero) Udemy course by [Tom Phillips](https://www.udemy.com/user/e3ccfcc3-dbaa-4ec2-a50f-fe761c2eb901).
Project uses NPM as package manager. Install the dependencies and run `npm run tw:build` then open `src/index.html` file in the browser of your choice (or open it via live server like [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) VSCode extension).
## Deploy
Project is deployed to Vercel: https://tw-mf-delta.vercel.app.
Deployment is done automatically when pushing to the `main` branch.