フロントエンドの試行

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

への提出です。

私が作ったもの

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

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

宇宙探査ランディング ページ

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

旅

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

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

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

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

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

コード

HTML

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Exploration</title>
    <link rel="stylesheet" href="styles.css">


    <header class="space-background">
        <h1 id="Welcome-to-Space-Exploration">Welcome to Space Exploration</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#history">History</a></li>
                <li><a href="#current-missions">Current Missions</a></li>
                <li><a href="#future-missions">Future Missions</a></li>
                <li><a href="#questionnaire">Questionnaire</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main class="space-background">
        <section id="home">
            <h2 id="Home">Home</h2>
            <p>Discover the wonders of the universe and our journey into space.</p>
        </section>
        <section id="about">
            <h2 id="About">About</h2>
            <p>Learn about the history and future of space exploration.</p>
        </section>
        <section id="history">
            <h2 id="History-of-Space-Exploration">History of Space Exploration</h2>
            <h3 id="Early-Concepts-Pre-th-Century">1. Early Concepts (Pre-20th Century)</h3>
            <p><strong>Ancient Civilizations:</strong> 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.</p>
            <p><strong>17th Century:</strong> Johannes Kepler’s laws of planetary motion and Isaac Newton’s law of universal gravitation provided the necessary understanding for future space travel concepts.</p>
            <h3 id="Early-th-Century">2. Early 20th Century</h3>
            <p><strong>Tsiolkovsky's Rocket Equation (1903):</strong> Russian scientist Konstantin Tsiolkovsky proposed the idea of space travel using rockets and formulated the Tsiolkovsky rocket equation, a fundamental principle in astronautics.</p>
            <p><strong>Robert Goddard (1926):</strong> An American physicist, Robert Goddard, successfully launched the world's first liquid-fueled rocket, proving that space travel was possible.</p>
            <h3 id="The-Space-Race-s-s">3. The Space Race (1950s-1970s)</h3>
            <p><strong>Sputnik 1 (1957):</strong> The Soviet Union launched the first artificial satellite, Sputnik 1, into space, marking the beginning of the Space Age.</p>
            <p><strong>Yuri Gagarin (1961):</strong> Soviet cosmonaut Yuri Gagarin became the first human to orbit Earth aboard Vostok 1, a major milestone in space exploration.</p>
            <p><strong>Apollo 11 (1969):</strong> 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."</p>
            <h3 id="Post-Moon-Landings-and-the-Space-Shuttle-Era-s-s">4. Post-Moon Landings and the Space Shuttle Era (1970s-1990s)</h3>
            <p><strong>Space Stations:</strong></p>
            <ul>
                <li>
<strong>Salyut and Mir (1971-1986):</strong> The Soviet Union launched a series of space stations, culminating in the long-lasting Mir, which operated until 2001.</li>
                <li>
<strong>Skylab (1973):</strong> The United States launched its first space station, Skylab, which was operational for six years.</li>
            </ul>
            <p><strong>Space Shuttle Program (1981-2011):</strong> 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).</p>
            <h3 id="International-Cooperation-and-Space-Exploration-s-Present">5. International Cooperation and Space Exploration (1990s-Present)</h3>
            <p><strong>International Space Station (ISS) (1998-present):</strong> 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.</p>
            <p><strong>Mars Exploration:</strong></p>
            <ul>
                <li>
<strong>Rovers and Orbiters:</strong> The Mars rovers like Spirit, Opportunity, Curiosity, and Perseverance have provided detailed information about the Martian surface and its potential to support life.</li>
                <li>
<strong>ExoMars (2020):</strong> A European-Russian mission designed to search for signs of life on Mars.</li>
            </ul>
            <h3 id="Private-Space-Exploration-and-the-Future-s-Present">6. Private Space Exploration and the Future (2000s-Present)</h3>
            <p><strong>Commercial Spaceflight:</strong> Companies like SpaceX, Blue Origin, and Virgin Galactic are pioneering commercial space travel, aiming to make space more accessible to private individuals and researchers.</p>
        </section>
        <section id="current-missions">
            <h2 id="Current-Missions">Current Missions</h2>
            <p>Explore the ongoing missions that are expanding our understanding of the universe.</p>
        </section>
        <section id="future-missions">
            <h2 id="Future-Missions">Future Missions</h2>
            <p>Learn about the upcoming missions that aim to push the boundaries of space exploration.</p>
        </section>
        <section id="questionnaire">
            <h2 id="Questionnaire">Questionnaire</h2>
            <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required><br><br>

                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required><br><br>

                <label for="question1">1. What is your favorite planet?</label><br>
                <input type="text" id="question1" name="question1" required><br><br>

                <label for="question2">2. Have you ever visited a space museum?</label><br>
                <input type="radio" id="yes" name="question2" value="yes">
                <label for="yes">Yes</label><br>
                <input type="radio" id="no" name="question2" value="no">
                <label for="no">No</label><br><br>

                <label for="question3">3. What interests you the most about space exploration?</label><br>
                <textarea id="question3" name="question3" rows="4" cols="50" required></textarea><br><br>

                <input type="submit" value="Submit">
            </form>
        </section>
        <section id="contact">
            <h2 id="Contact">Contact</h2>
            <p>Get in touch with us for more information about space exploration.</p>
        </section>
    </main>
    <footer class="space-background">
        <p>© 2024 Space Exploration. All rights reserved.</p>
    </footer>

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 ライセンスに基づいてライセンスされています。必要に応じてコードを自由に使用および変更してください。

以上がフロントエンドの試行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。