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

???? Pengenalan Ringkas(Mengenai apa yang saya bina)

Selamat datang ke 'Winter Solstice Web', tapak web yang direka dengan cantik dengan tema musim sejuk yang menawarkan reka bentuk angkasa yang sejuk dan sejuk. Ini diilhamkan oleh tema Winter Solistice, semangat Krismas dan salji. Tapak ini menggabungkan tatal lancar dan ciri interaktif untuk pengguna.

? Demo Langsung

Pautan Kod Saya- https://github.com/Divya4879/winter-solistice_web-glam.git

Laman Langsung - https://divya4879.github.io/winter-solistice_web-glam

Pratonton tapak kod saya:-
https://codepen.io/divya-2002/pen/xbKgYZY

Saya berharap anda menyukai yang ini, dan merasai cuaca sejuk, kesejukan musim ini, dan mengetahui fakta acara Winter Solistice, di sini.

??? Reka bentuk

Tapak web ini direka bentuk mengikut tema Winter Solistice, dengan palet warna sejuk (secara literal dan kiasan??) berwarna biru dingin, putih dan latar belakang gelap. Saya menambahkan latar belakang bersalji animasi secara keseluruhan serta salji pada semua bahagian untuk menambah daya tarikannya, dan juga melengkapkan bahagian dengan tindanan lutsinar dan tajuk dengan bayang teks untuk memastikan kebolehbacaan dan meningkatkan kontras.

???? Ciri-ciri Utama

Beberapa ciri utama tapak web saya yang sangat saya sukai dan usahakan adalah:-

1. Tatal Lancar & Kesan Paralaks: Saya menggunakan fungsi tatal berterusan GSAP untuk yang ini. Ia membolehkan pengguna mengalami gelagat tatal yang lancar untuk bahagian semasa mereka menatal ke bawah atau ke atas.

2. Pengepala & Navigasi: Saya menambahkan pengepala melekit untuk memastikan bar navigasi kekal tetap/terlekat pada tempatnya semasa pengguna bergerak melalui tapak saya. Bagi navigasi, saya menjadikannya responsif, dan ia mempunyai susun atur yang berbeza untuk saiz skrin yang berbeza. Saya juga menggunakan beberapa kesan tuding pada bar navigasi untuk menambahkan sedikit sentuhan untuk menjadi lebih menarik padanya.

3. Responsif Mudah Alih: Saya telah menggunakan Flexbox dan bar navigasi menegak untuk tapak saya responsif untuk saiz skrin yang berbeza.

4. Animasi/Kesan Bertemakan Musim Sejuk: Saya menambahkan animasi salji sebagai latar belakang saya untuk mencipta keseluruhan tema musim sejuk untuk tapak tersebut. Saya juga menambahkan sedikit "salji" yang aneh tetapi menyeronokkan pada semua bahagian saya secara individu.

5. Tipografi dan Warna: Saya mencuba dan menggunakan beberapa fon baharu seperti- "Cinzel""Itim",,"Mountains of Christmas" untuk cabaran daripada fon Google ini. Tema warna keseluruhan tapak web mengandungi warna bertema musim sejuk seperti biru dan putih, bersama-sama dengan ungu, dan warnanya yang berbeza.

6. Animasi dan Kesan Tersuai: Saya juga telah menambahkan animasi, kesan tatal, dsb. di seluruh tapak, untuk memberikan rasa moden dan menjemput orang ramai meneroka semuanya.

????? Perjalanan Saya- Pembelajaran, Tertinggi dan Terrendah

Sejujurnya, ini membuatkan saya belajar banyak perkara. Saya tidak pernah menggunakan GSAP sebelum ini, jadi saya perlu meneliti beberapa asas dan asas, menyelidik sama ada apa yang saya mahukan adalah mungkin, dan ya, kemudian bagaimana, cuba, ubahnya seberapa banyak yang mungkin supaya ia berfungsi dengan betul.

Ia merupakan pengalaman pembelajaran dan kreatif yang hebat untuk saya, saya belajar banyak perkara, berjaga sepanjang malam untuk menyelesaikannya dan menyerahkannya, mencuba banyak perkara, dan akhirnya membinanya.

?? Apa yang Saya Belajar Daripada Cabaran Ini??

Disebabkan saya melakukan cabaran ini, saya dapat:-

1. Bina kemahiran animasi menatal saya (GSAP).

2. Tingkatkan, perbaiki & amalkan bahagian "interaktif" tapak web.

3. Mengetahui banyak fakta menarik tentang Winter Solistice, serta penyelidikan tentang fon & palet warna mengikut tema tertentu.

4. Melatih kemahiran CSS saya, berlatih & belajar tentang bahagian JS-> salji, animasi menatal, manipulasi DOM.

5. Gunakan asas pembangunan web- HTML, CSS & JS untuk mencipta rasa estetik dan tapak web interaktif & berfungsi.

Saya tahu kami sudah mempunyai kandungan utama sebagai templat- HTML, tetapi reka bentuk saya juga telah berulang kali melalui pembuatannya. Ia merupakan pengalaman yang hebat untuk saya.

??? Mengapa Nama "Winter Solstice Web"?

Sejujurnya, agak tidak masuk akal, tetapi kerana ia berdasarkan pada malam Winter Solistice dan ia adalah tapak web tentang maklumat asasnya.

???? Kesimpulan

Saya memulakan cabaran ini hanya kerana saya ingin mempraktikkan kemahiran asas hadapan saya dan kerana saya sentiasa mahu mengambil bahagian dalam "cabaran Dev.to". Pada masa ini saya sangat bersemangat, ceria, dijangka, gembira, kecewa, kecewa, berpuas hati. "Web Solstice Musim Sejuk" ini bukan sekadar projek lain untuk saya, ia adalah peringatan tentang perjalanan yang saya lalui semasa pembuatannya, dan ciptaan saya berasaskan acara Web Solstice bertema sejuk yang indah.

Saya harap ia tidak mengecewakan, ini kali pertama saya menulis blog tentang projek saya di mana-mana platform.
Selain itu, saya mempunyai perjalanan yang luar biasa semasa membuat ini, harap anda menikmatinya sama seperti saya melakukannya.

??? Maklum balas

Seperti yang saya nyatakan sebelum ini, saya adalah pengirim projek kali pertama di sini pada platform ini, dan saya tidak pernah menulis blog sedemikian sebelum ini.

Maklum balas anda mengenai Winter Solstice Web saya, dan/atau blog saya amat dihargai. Sila beritahu saya pendapat anda di bahagian komen di bawah.

Terima kasih, kepada yang membaca sejauh ini. Terima kasih kerana memberikan blog saya, dan semoga laman web saya juga sebahagian daripada masa berharga anda.

Atas ialah kandungan terperinci ????Web Solstice Musim Sejuk: Halaman Web Berinspirasikan Solstice Musim Sejuk????. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!