Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rayc2045/power-room-website

Website build with Tailwind Starter Kit
https://github.com/rayc2045/power-room-website

gym gym-website landing-page landing-page-theme landing-pages tailwind tailwind-css tailwind-css-template tailwindcss

Last synced: 13 days ago
JSON representation

Website build with Tailwind Starter Kit

Host: GitHub
URL: https://github.com/rayc2045/power-room-website
Owner: rayc2045
Created: 2021-06-14T08:35:17.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2021-06-15T09:40:50.000Z (over 3 years ago)
Last Synced: 2025-01-21T22:39:00.307Z (17 days ago)
Topics: gym, gym-website, landing-page, landing-page-theme, landing-pages, tailwind, tailwind-css, tailwind-css-template, tailwindcss
Language: HTML
Homepage: https://rayc2045.github.io/power-room-website/
Size: 2.87 MB
Stars: 5
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Power Room

![Photo](https://raw.githubusercontent.com/rayc2045/power-room-website/master/assets/img/demo.png)

[> Power Room](https://rayc2045.github.io/power-room-website/)

### 簡介

在網站開發上，不免會遇到 class 命名、以及在 HTML 檔案與 CSS 檔案間來回切換修改的困擾，Tailwind 則透過 Utility-First Class 提出了改良方案，而這次使用開箱即用的 [Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation) 試作一個健身品牌的 Landing Page。

### 開發紀錄

- 使用 [Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation) 作為模板製作健身網站 Landing Page。

- 使用 [Tailwind](https://tailwindcss.com/) 撰寫網頁結構與樣式。

- 載入 [Random Unsplash](https://source.unsplash.com/) API 健身房關聯圖片，使每次開啟網頁時都有不一樣的封面圖片。

- 透過 [AOS (Animate On Scroll)](https://michalsnik.github.io/aos/) 套件達成在滾動網頁時加入轉場動畫。