ホームページ >ウェブフロントエンド >CSSチュートリアル >フロントエンド チャレンジ Glam Up My Markup: レクリエーション

フロントエンド チャレンジ Glam Up My Markup: レクリエーション

WBOY
WBOYオリジナル
2024-08-05 17:23:351127ブラウズ

これはフロントエンド チャレンジ v24.07.24、Glam Up My Markup: Recreation への提出です

私が作ったもの

少し休憩した後、このチャレンジのために戻ってきました。前提がとても気に入ったので、スムーズでダイナミックなデザインを作成しようとしました。これは結局のところスポーツページです。私が望んでいたほど応答性やアクセスしやすさは高くありませんが、現在の時間の制約と母国のあらゆる困難な状況を考慮すると、これが私にできる最善の方法です。

もちろん、私は常にチャレンジのルールに従うよう努めていますが、今回はアニメーションに全力を尽くしました。アニメーションはショーの主役であり、特にスクロールアニメーションです。

デモ

このデモでは、常にページ全体の表示、特に新しいタブで表示することをお勧めします (お願いします)。もちろん、デスクトップ (最高のエクスペリエンス) とモバイル (最も一般的な方法) で機能します。

いくつかのドライな原則に基づいてコードを改善し続けることができます。特に前述のスクロール アニメーションでは、コード内で多くのロジックを繰り返しましたが、できるだけクリーンで明確に保つよう最善を尽くしました。この応募のデザインプロセスは私のお気に入りの部分で、良い配色を選ぶのは簡単ではありませんでしたが、赤、グレー、クリームの組み合わせにたどり着いてよかったです。見た目もかわいいと思っていただければ幸いです。

The Frontend Challenge  Glam Up My Markup: Recreation

「本物の」クリケットの画像を見つけるのは、コモンズ クリエイティブ ライセンスに関する新しい知識があれば簡単でした。最近の DEV の投稿で見つけたツールでいくつかの良いアイコンを見つけました (クレジットを記載するために投稿を探してみます)コメントで)。ただし、スケジュール セクションのクリケット ボールのパターンや、もちろんこの投稿のカバー画像など、いくつかのアセットも作成しました。

The Frontend Challenge  Glam Up My Markup: Recreation

これで終わりです。もしあなたがこのチャレンジに参加するのであれば、私と同じくらい自分の仕事に満足してもらえることを願っています。そうでない場合は、おそらく次の挑戦があなたが輝ける時となるでしょう。

そしていつものように、フィードバックがある場合は、コメントを書くかDMを送ってください。英語は私の第二言語ですので、よろしくお願いします❣️ ここまで読んでいただきありがとうございました。では、次回まで、さようなら!

以上がフロントエンド チャレンジ Glam Up My Markup: レクリエーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。