Percubaan Frontend

WBOY
Lepaskan: 2024-09-06 06:40:05
asal
503 orang telah melayarinya

Ini adalah penyerahan untuk Frontend Challenge v24.09.04,Glam Up My Markup: Space

Apa yang Saya Bina

Saya membina halaman pendaratan bertema angkasa lepas yang menyediakan maklumat tentang penerokaan angkasa lepas. Matlamatnya adalah untuk mencipta reka bentuk yang menarik dan minimalis yang menyerlahkan aspek utama sejarah angkasa, misi semasa, misi masa hadapan dan banyak lagi. Halaman ini merangkumi bahagian untuk rumah, tentang, sejarah, misi semasa, misi masa depan, soal selidik dan maklumat hubungan.

Demo
Anda boleh melihat projek secara langsung di sini. Di bawah ialah tangkapan skrin halaman pendaratan:
Frontend Attempt
Halaman Pendaratan Penerokaan Angkasa Lepas

Anda juga boleh menyemak kod di Github

Perjalanan

Mencipta projek ini merupakan satu perjalanan yang menarik. Berikut ialah beberapa perkara penting tentang proses:

Reka Bentuk dan Reka Letak: Saya menyasarkan reka bentuk yang bersih dan minimalis dengan latar belakang bertemakan ruang gelap untuk mencipta pengalaman yang mengasyikkan. Reka letaknya ringkas tetapi bermaklumat, memudahkan pengguna menavigasi bahagian yang berbeza.

Kandungan: Saya menyertakan maklumat terperinci tentang sejarah penerokaan angkasa lepas, misi semasa dan akan datang. Bahagian soal selidik membolehkan pengguna berinteraksi dan berkongsi pendapat mereka tentang penerokaan angkasa lepas.

Cabaran:Salah satu cabaran ialah memastikan interaktiviti animasi berfungsi dengan lancar merentas peranti dan saiz skrin yang berbeza. Saya belajar banyak tentang reka bentuk responsif dan keserasian merentas penyemak imbas semasa proses ini.

Rancangan Masa Hadapan: Saya merancang untuk menambah lebih banyak elemen interaktif, seperti kuiz tentang fakta angkasa dan garis masa peristiwa penting dalam penerokaan angkasa lepas. Saya juga berharap dapat menyepadukan animasi dan peralihan yang lebih maju untuk menjadikan halaman itu lebih menarik.

KOD

HTML

     Space Exploration  

Welcome to Space Exploration

Home

Discover the wonders of the universe and our journey into space.

About

Learn about the history and future of space exploration.

History of Space Exploration

1. Early Concepts (Pre-20th Century)

Ancient Civilizations: Ancient cultures like the Babylonians, Egyptians, Greeks, and Chinese were among the first to study the stars and celestial objects, laying the foundation for astronomy.

17th Century: Johannes Kepler’s laws of planetary motion and Isaac Newton’s law of universal gravitation provided the necessary understanding for future space travel concepts.

2. Early 20th Century

Tsiolkovsky's Rocket Equation (1903): Russian scientist Konstantin Tsiolkovsky proposed the idea of space travel using rockets and formulated the Tsiolkovsky rocket equation, a fundamental principle in astronautics.

Robert Goddard (1926): An American physicist, Robert Goddard, successfully launched the world's first liquid-fueled rocket, proving that space travel was possible.

3. The Space Race (1950s-1970s)

Sputnik 1 (1957): The Soviet Union launched the first artificial satellite, Sputnik 1, into space, marking the beginning of the Space Age.

Yuri Gagarin (1961): Soviet cosmonaut Yuri Gagarin became the first human to orbit Earth aboard Vostok 1, a major milestone in space exploration.

Apollo 11 (1969): The United States' NASA successfully landed astronauts Neil Armstrong and Buzz Aldrin on the Moon, with Armstrong famously declaring, "That's one small step for man, one giant leap for mankind."

4. Post-Moon Landings and the Space Shuttle Era (1970s-1990s)

Space Stations:

  • Salyut and Mir (1971-1986): The Soviet Union launched a series of space stations, culminating in the long-lasting Mir, which operated until 2001.
  • Skylab (1973): The United States launched its first space station, Skylab, which was operational for six years.

Space Shuttle Program (1981-2011): NASA’s reusable Space Shuttle fleet completed 135 missions over 30 years, including launching satellites, conducting scientific research, and assembling the International Space Station (ISS).

5. International Cooperation and Space Exploration (1990s-Present)

International Space Station (ISS) (1998-present): A joint effort by NASA, Roscosmos (Russia), ESA (Europe), JAXA (Japan), and other partners, the ISS serves as a hub for scientific research and international collaboration in low Earth orbit.

Mars Exploration:

  • Rovers and Orbiters: The Mars rovers like Spirit, Opportunity, Curiosity, and Perseverance have provided detailed information about the Martian surface and its potential to support life.
  • ExoMars (2020): A European-Russian mission designed to search for signs of life on Mars.

6. Private Space Exploration and the Future (2000s-Present)

Commercial Spaceflight: Companies like SpaceX, Blue Origin, and Virgin Galactic are pioneering commercial space travel, aiming to make space more accessible to private individuals and researchers.

Current Missions

Explore the ongoing missions that are expanding our understanding of the universe.

Future Missions

Learn about the upcoming missions that aim to push the boundaries of space exploration.

Questionnaire















Contact

Get in touch with us for more information about space exploration.

© 2024 Space Exploration. All rights reserved.

Salin selepas log masuk

CSS

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; background-color: #000; color: #fff; } .space-background { background: rgba(0, 0, 0, 0.8) url('https://www.nasa.gov/sites/default/files/thumbnails/image/potw2048a.jpg') no-repeat center center; background-size: cover; } header { padding: 1rem 0; text-align: center; } header h1 { margin-bottom: 0.5rem; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin: 0 10px; } nav ul li a { color: #fff; text-decoration: none; } main { padding: 2rem; } section { margin-bottom: 2rem; } form { background: rgba(255, 255, 255, 0.1); padding: 1rem; border-radius: 5px; } form label { display: block; margin-bottom: 0.5rem; } form input[type="text"], form input[type="email"], form textarea { width: 100%; padding: 0.5rem; margin-bottom: 1rem; border: none; border-radius: 5px; } form input[type="submit"] { background: #333; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; } form input[type="submit"]:hover { background: #555; } footer { text-align: center; padding: 1rem 0; position: fixed; width: 100%; bottom: 0; }
Salin selepas log masuk

Pasukan
Projek ini adalah usaha solo, tetapi saya ingin menghargai sumber dan inspirasi berikut:

  • NASA untuk imej angkasa lepas yang menakjubkan.

  • Dokumen Web MDN untuk dokumentasi yang sangat baik tentang pembangunan web.

Lesen
Projek ini dilesenkan di bawah Lesen MIT. Sila gunakan dan ubah suai kod mengikut kesesuaian anda.

Atas ialah kandungan terperinci Percubaan Frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!