Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Die Frontend-Challenge verschönert mein Markup: Erholung

WBOY
Freigeben: 2024-08-05 17:23:35
Original
1102 Leute haben es durchsucht

Dies ist eine Einreichung für Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

Was ich gebaut habe

Nach einer kleinen Pause kam ich zurück, um mich dieser Herausforderung zu stellen. Mir gefiel die Prämisse wirklich und ich habe versucht, ein glattes und dynamisches Design zu schaffen, schließlich handelt es sich hier um eine Sportseite. Ist nicht so reaktionsschnell und zugänglich, wie ich es wollte, aber das ist das Beste, was ich angesichts meiner aktuellen Zeitknappheit und all der schwierigen Situationen in meinem Land tun kann.

Natürlich versuche ich immer, mich an die Challenge-Regeln zu halten, aber dieses Mal habe ich bei den Animationen alles gegeben, sie sind der Star der Show, insbesondere die Scroll-Animation.

Demo

Für diese Demo empfehle ich, sie immer in der Vollseitenansicht anzuzeigen, insbesondere in einem neuen Tab (bitte), und natürlich funktioniert sie sowohl auf dem Desktop (das beste Erlebnis) als auch auf Mobilgeräten (die gebräuchlichste Methode).

Reise

Ich kann den Code mit einigen trockenen Prinzipien weiter verbessern, insbesondere mit der oben genannten Scroll-Animation. Ich habe viel Logik im Code wiederholt, aber ich habe mein Bestes gegeben, um ihn so sauber und klar wie möglich zu halten. Der Designprozess für diesen Beitrag hat mir am besten gefallen. Es war nicht einfach, ein gutes Farbschema auszuwählen, aber ich bin froh, dass ich mich für die Kombination aus Rot, Grau und Creme entschieden habe und hoffe, dass Sie sie auch hübsch ansehen.

The Frontend Challenge  Glam Up My Markup: Recreation

Mit meinen neuen Kenntnissen der Commons Creative License war es einfach, einige „echte“ Cricket-Bilder zu finden, und ich habe einige gute Symbole in einem Tool gefunden, das ich kürzlich in einem DEV-Beitrag entdeckt habe (ich werde versuchen, den Beitrag zu finden, um ihn zu würdigen). in den Kommentaren). Aber ich habe auch einige Assets erstellt, wie das Cricketball-Muster im Zeitplanbereich und natürlich das Titelbild für diesen Beitrag.

The Frontend Challenge  Glam Up My Markup: Recreation

Und das ist alles für dieses hier. Wenn Sie an der Herausforderung teilnehmen, hoffe ich, dass Sie mit Ihrer Arbeit genauso zufrieden sind wie ich mit meiner. Wenn nicht, ist die bevorstehende Herausforderung vielleicht der richtige Zeitpunkt für Sie, um zu glänzen.

Und wenn du Feedback hast, kannst du wie immer einen Kommentar schreiben oder mir eine DM schicken. Englisch ist meine Zweitsprache, also sei bitte nett zu mir ❣️ Danke, dass du bis hierhin gelesen hast, und bis zum nächsten Mal, tschüss!

Das obige ist der detaillierte Inhalt vonDie Frontend-Challenge verschönert mein Markup: Erholung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage