Glam Up My Markup: Winter Solstice

Ini adalah penyerahan untuk Cabaran Frontend - Edisi Disember, Glam Up My Markup: Winter Solstice

Apa yang Saya Bina

Saya mencipta halaman pendaratan interaktif dan responsif tentang Solstis Musim Sejuk.

Demo

Lihat kod

Lihat secara langsung

Perjalanan

Langkah 1: Menggayakan bar navigasi dan pengaki

Saya menggunakan grid CSS untuk keseluruhan halaman dan CSS flexbox untuk meletakkan pautan dalam bar navigasi. Akhirnya, saya menggunakan pertanyaan media untuk menyusun pautan navigasi apabila dipaparkan pada skrin yang lebih kecil.

Memang menarik mempelajari kepentingan teg meta port pandang ini untuk menjadikan halaman responsif

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

Langkah 2: Bertukar antara tab

Langkah kedua ini melibatkan penggunaan JavaScript untuk menogol paparan setiap bahagian bergantung pada pautan navigasi yang diklik/aktif. Ini memberikannya interaktiviti menavigasi antara halaman yang berbeza

Langkah 3: Menjadikannya lebih cantik

Untuk langkah terakhir, saya menetapkan pelbagai imej latar belakang untuk setiap bahagian untuk menjadikannya lebih menarik

Atribut

• Foto Pokok oleh Fabrice Villard di Unsplash
• Imej Pertarungan Bola Salji oleh freepik
• Imej Orang Musim Sejuk oleh freepik
• Imej Realiti Maya oleh freepik
• Imej Wanita Eskimo dan Anjing oleh freepix
• Imej Winter Eskimo oleh freepix

Atas ialah kandungan terperinci Glam Up My Markup: Winter Solstice. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!