Dies ist eine Einreichung für Frontend Challenge v24.09.04, glamern Sie mein Markup: Space

Was ich gebaut habe

Die Landing Page verfügt über ein retro-inspiriertes Design mit modernen Usability-Überlegungen wie Hell/Dark-Modus, das umschaltet, sanftes Scrollen und ein vollständig reaktionsschnelles Layout. Besucher können Planeten, Monde und himmlische Objekte über ein interaktives Karussell erkunden, und der Inhalt ist so konzipiert, dass er lehrreich ist und dennoch Spaß macht, zu navigieren.

Zu den wichtigsten Funktionen gehören:

• hell/dunkler modus toggle : Benutzer können zwischen hellen und dunklen Themen für eine personalisiertere Erfahrung wechseln.
• interaktives karousel : Dynamische Karussells ermöglichen es den Besuchern, verschiedene Planeten, Monde und himmlische Objekte zu erkunden.
• Smooth Scrolling : Eine Schaltfläche "Erkundung beginnen" löst einen reibungslosen Bildlauf zum Abschnitt "Sonnensystemübersicht" aus.
• Vollständiges Design : Die Website ist so konzipiert, dass sie sowohl auf Desktop- als auch auf mobilen Geräten hervorragend aussehen.

Demo

Sie können den Code auf GitHub: Github repository

und schauen Sie sich die Live -Demo hier an: Live Demo

Screenshots

Lichtmodus:

dunkler Modus:

Karussell Beispiel:

Mobile Ansicht:

Reise

Ich bin ohne Designplan in dieses gegangen, und der Plan änderte sich, als ich das Projekt durcharbeitete, was nachahmen kann, was in der realen Welt passiert. Ich wünschte, ich hätte mehr Zeit damit verbracht, mein Projekt und Brainstorming -Aspekte zu verdrahten, um alles zusammenzubringen.

Ich habe ursprünglich einen Vintage -Terminalstil gegangen. Während ich Spaß machte, hatte ich das Gefühl, dass das Neongrün nicht den professionellen Look gab, nach dem ich strebte.

Also habe ich mich am Ende für ein minimalistischeres Aussehen entschieden, während ich immer noch einige lustige Elemente behalte. Meine neue Vision wurde von einem Vintage -Lehrbuch inspiriert, das durch die verwendeten Farben und einige der Designelemente wie den ASCII -Teiler und die Schriftarten gesehen werden kann.

Die größte Herausforderung, mit der ich mir vorgestellt habe, war, dass das Projekt auf mobilen Geräten großartig aussah. Ich musste spezifische mobile CSS für mehrere Abschnitte schreiben, um das Design zu optimieren. Flexbox hat bei Layoutanpassungen geholfen, aber eine wirklich nahtlose Erfahrung zu schaffen, machte einige Versuch und Irrtum.

Insgesamt hat mich dieses Projekt dazu veranlasst, kreativ zu denken, sich in der laufenden Fliege anzupassen und die Designästhetik mit Benutzerfreundlichkeit zugleichen, die wertvolle Fähigkeiten in der Frontend -Entwicklung sind.