Glam Up My Markup: Wintersonnenwende

Dies ist eine Einreichung für Frontend Challenge – Dezemberausgabe, Glam Up My Markup: Winter Solstice

Was ich gebaut habe

Ich habe eine interaktive und responsive Landingpage zur Wintersonnenwende erstellt.

Demo

Werfen Sie einen Blick auf den Code

Live ansehen

Reise

Schritt 1: Navigationsleiste und Fußzeile gestalten

Ich habe ein CSS-Raster für die gesamte Seite und eine CSS-Flexbox verwendet, um die Links in der Navigationsleiste anzuordnen. Schließlich habe ich eine Medienabfrage verwendet, um die Navigationslinks bei der Anzeige auf kleineren Bildschirmen zu stapeln.

Es war interessant zu erfahren, wie wichtig dieses Viewport-Meta-Tag ist, um die Seite responsive zu machen

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Schritt 2: Zwischen Tabs wechseln

Dieser zweite Schritt umfasste die Verwendung von JavaScript, um die Anzeige jedes Abschnitts abhängig davon umzuschalten, welcher Navigationslink angeklickt/aktiv war. Dies verleiht ihm die Interaktivität der Navigation zwischen verschiedenen Seiten

Schritt 3: Es schöner machen

Im letzten Schritt habe ich jedem Abschnitt verschiedene Hintergrundbilder zugewiesen, um ihn interessanter zu machen

Attribute

• Baumfoto von Fabrice Villard auf Unsplash
• Schneeballschlacht-Bild von freepik
• Bild „Wintermenschen“ von freepik
• Virtual-Reality-Bild von freepik
• Frau Eskimo und Hund Bild von freepix
• Winter-Eskimo-Bild von freepix

Das obige ist der detaillierte Inhalt vonGlam Up My Markup: Wintersonnenwende. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!