スタバのトップページUIをグリッドレイアウトを使って作ってみました〜tailwindcssライブラリを使って〜
こんにちわ。nap5です。
スタバのトップページUIをグリッドレイアウトを使って作ってみたので、紹介したいと思います。あまり作り込まない段階のスケルトン的なイメージでワークアラウンドしてみました。
多少は変えていますが、ファーストビューのグリッドの部分を今回は再現してみた感じです。
各種メニューに関してはハンバーガーに押し込んでやってサイドバーのstickyには季節の商品の特集やハンディメニューを添えてやるといいかもしれないと考えました。その時はサイドバーを考慮してもう少しメインコンテンツの横幅を小さくする必要があります。
ホームページのタイトル部分にはMarqueeとかでぐるぐる帯をフローさせていくのもいいかもしれませんね。
季節に応じてメニューが変わって楽しいサイトなので、ちょっと手を動かしてみた次第です。
デモサイトです。
デモコードです。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？