「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > フロントエンドの試行

フロントエンドの試行

2024 年 11 月 4 日に公開
ブラウズ:817

これはフロントエンド チャレンジ v24.09.04、Glam Up My Markup: Space

への提出です。

私が作ったもの

宇宙探査に関する情報を提供する、宇宙をテーマにしたランディング ページを作成しました。目標は、宇宙の歴史、現在のミッション、将来のミッションなどの重要な側面を強調する、魅力的でミニマルなデザインを作成することでした。このページには、ホーム、概要、歴史、現在のミッション、将来のミッション、アンケート、連絡先情報のセクションが含まれています。

デモ
ここでプロジェクトをライブで見ることができます。以下はランディング ページのスクリーンショットです:
Frontend Attempt
宇宙探査ランディング ページ

Github でコードをチェックアウトすることもできます

このプロジェクトの作成はエキサイティングな旅でした。このプロセスに関する重要なポイントをいくつか示します:

デザインとレイアウト: 没入型の体験を生み出すために、宇宙をテーマにした暗い背景を持つクリーンでミニマルなデザインを目指しました。レイアウトはシンプルですが有益なので、ユーザーはさまざまなセクションに簡単に移動できます。

コンテンツ: 宇宙探査の歴史、現在および将来のミッションに関する詳細な情報を含めました。アンケート セクションでは、ユーザーが宇宙探査について対話し、意見を共有することができます。

課題: 課題の 1 つは、アニメーションのインタラクティブ性がさまざまなデバイスや画面サイズでスムーズに動作するようにすることでした。このプロセス中に、レスポンシブ デザインとブラウザ間の互換性について多くのことを学びました。

将来の計画: 宇宙の事実に関するクイズや宇宙探査における重要な出来事の年表など、よりインタラクティブな要素を追加する予定です。また、より高度なアニメーションやトランジションを統合して、ページをさらに魅力的なものにしたいと考えています。

コード

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.

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;
}

チーム
このプロジェクトは単独での取り組みでしたが、次のリソースとインスピレーションをクレジットしたいと思います:

  • NASA の素晴らしい宇宙画像。

  • Web 開発に関する優れたドキュメントの MDN Web ドキュメント。

ライセンス
このプロジェクトは MIT ライセンスに基づいてライセンスされています。必要に応じてコードを自由に使用および変更してください。

リリースステートメント この記事は次の場所に転載されています: https://dev.to/abhiramp_2005/frontend-attempt-pp0?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3