Glam Up My Markup : Solstice d'hiver

Ceci est une soumission pour Frontend Challenge - Édition de décembre, Glam Up My Markup: Winter Solstice

Ce que j'ai construit

J'ai créé une page de destination interactive et responsive sur le solstice d'hiver.

Démo

Jetez un œil au code

Voir en direct

Voyage

Étape 1 : Styliser la barre de navigation et le pied de page

J'ai utilisé une grille CSS pour l'ensemble de la page et une flexbox CSS pour disposer les liens dans la barre de navigation. Enfin, j'ai utilisé une requête média pour empiler les liens de navigation lorsqu'ils sont affichés sur des écrans plus petits.

C'était intéressant d'apprendre l'importance de cette balise méta viewport pour rendre la page réactive

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

Étape 2 : Basculer entre les onglets

Cette deuxième étape impliquait d'utiliser JavaScript pour basculer l'affichage de chaque section en fonction du lien de navigation cliqué/actif. Cela lui donne l'interactivité de naviguer entre différentes pages

Étape 3 : Le rendre plus beau

Pour la dernière étape, j'ai attribué différentes images d'arrière-plan à chaque section pour la rendre plus intéressante

Attributs

• Photo Arbre par Fabrice Villard sur Unsplash
• Image de combat de boules de neige par freepik
• Image des gens d'hiver par freepik
• Image de réalité virtuelle par freepik
• Image de femme esquimau et de chien par freepix
• Image esquimau d'hiver par freepix

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!