프런트엔드 시도

Frontend Challenge v24.09.04, Glam Up My Markup: Space

에 대한 제출물입니다.

내가 만든 것

우주 탐험에 대한 정보를 제공하는 우주 테마의 랜딩페이지를 구축했습니다. 목표는 우주 역사, 현재 임무, 미래 임무 등의 주요 측면을 강조하는 매력적이고 미니멀한 디자인을 만드는 것이었습니다. 페이지에는 홈, 정보, 역사, 현재 임무, 향후 임무, 설문지 및 연락처 정보에 대한 섹션이 포함되어 있습니다.

데모
여기에서 프로젝트를 실시간으로 볼 수 있습니다. 아래는 랜딩 페이지의 스크린샷입니다:

우주탐사 랜딩페이지

Github에서도 코드를 확인할 수 있습니다

여행

이 프로젝트를 만드는 것은 흥미진진한 여정이었습니다. 프로세스에 대한 몇 가지 주요 사항은 다음과 같습니다.

디자인 및 레이아웃: 몰입감 있는 경험을 만들기 위해 어두운 공간 테마의 배경에 깔끔하고 미니멀한 디자인을 목표로 했습니다. 레이아웃은 간단하면서도 유익하므로 사용자가 다양한 섹션을 쉽게 탐색할 수 있습니다.

내용: 우주 탐사의 역사, 현재와 미래의 임무에 대한 자세한 정보를 담았습니다. 설문지 섹션을 통해 사용자는 우주 탐사에 대한 상호 작용과 생각을 공유할 수 있습니다.

과제: 과제 중 하나는 애니메이션 상호 작용이 다양한 기기와 화면 크기에서 원활하게 작동하는지 확인하는 것이었습니다. 이 과정에서 반응형 디자인과 브라우저 간 호환성에 대해 많은 것을 배웠습니다.

향후 계획: 우주 사실에 대한 퀴즈, 우주 탐사에 있어서 중요한 사건의 타임라인 등 대화형 요소를 더 추가할 계획입니다. 또한 페이지를 더욱 매력적으로 만들기 위해 고급 애니메이션과 전환 기능을 통합하고 싶습니다.

암호

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는 멋진 우주 이미지를 제공합니다.

• 웹 개발에 대한 훌륭한 문서를 제공하는 MDN 웹 문서입니다.

라이센스
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다. 코드를 원하는 대로 자유롭게 사용하고 수정하세요.

위 내용은 프런트엔드 시도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!