”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 前端尝试

前端尝试

发布于2024-11-04
浏览:848

这是前端挑战 v24.09.04 的提交,Glam Up My Markup:Space

我建造了什么

我建立了一个以太空为主题的登陆页面,提供有关太空探索的信息。目标是创造一个有吸引力的、简约的设计,突出太空历史、当前任务、未来任务等的关键方面。该页面包括主页、关于、历史、当前任务、未来任务、调查问卷和联系信息等部分。

演示
您可以在此处实时查看该项目。以下是登陆页面的屏幕截图:
Frontend Attempt
太空探索登陆页面

您也可以在Github上查看代码

旅行

创建这个项目是一次令人兴奋的旅程。以下是有关该过程的一些要点:

设计和布局:我的目标是干净简约的设计,带有黑暗的太空主题背景,以创造身临其境的体验。布局简单但信息丰富,使用户可以轻松浏览不同的部分。

内容:我提供了有关太空探索历史、当前和未来任务的详细信息。问卷部分允许用户互动并分享他们对太空探索的想法。

挑战:挑战之一是确保动画交互在不同设备和屏幕尺寸上顺利运行。在这个过程中我学到了很多关于响应式设计和跨浏览器兼容性的知识。

未来计划:我计划添加更多互动元素,例如有关太空事实的测验和太空探索中重大事件的时间表。我还希望集成更高级的动画和过渡,使页面更具吸引力。

代码

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 提供令人惊叹的太空图像。

  • MDN Web Docs,提供有关 Web 开发的优秀文档。

执照
该项目已获得 MIT 许可证的许可。请随意使用和修改您认为合适的代码。

版本声明 本文转载于:https://dev.to/abhiramp_2005/frontend-attempt-pp0?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换,使您能够在条件语句中直接使用其实例“t”。然而,这种显式转换提出了一个问题:“t”在哪里可以在不进行强制转换的情况下用作 bool?上下文转换场景C 标准指定了四种值可以根据上下文转换为的主要场景bool:语句:if、whi...
    编程 发布于2024-11-16
  • 如何在 Go 中使用反射自定义 JSON 解组?
    如何在 Go 中使用反射自定义 JSON 解组?
    使用反射自定义 JSON 解组在 Go 中,将 JSON 解组为结构体是一个简单的过程。然而,当处理具有自定义标签的字段时,例如 json:"some_field",标准的解组机制可能不够。处理这种情况的一种方法是使用反射。通过使用反射检查结构体的字段,我们可以检查字段是否具有特...
    编程 发布于2024-11-16
  • 如何轻松地将代码传输到 Python 解释器中而不出现缩进问题?
    如何轻松地将代码传输到 Python 解释器中而不出现缩进问题?
    便捷的代码传输:绕过 Python 的空白敏感度由于语言严格的空白,将代码直接复制粘贴到 Python 解释器中可能会出现问题敏感性。这通常会导致意外的代码执行或语法错误。IPython 作为解决方案IPython 是一种高级 Python 命令 shell,通过其专用命令。%cpaste:将剪贴板...
    编程 发布于2024-11-16
  • Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta:列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而,随着 Beta 2 的后续发布,这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    编程 发布于2024-11-16
  • Python 请求如何使用 Javascript 处理动态网站?
    Python 请求如何使用 Javascript 处理动态网站?
    克服 Python 请求的 Javascript 障碍传统的 Python 请求旨在从静态 HTML 页面中提取信息。然而,许多现代网站使用 Javascript 来动态获取数据,这给 Requests 带来了挑战。是否有一种解决方法可以利用 Javascript 页面的 Requests ?绝对可...
    编程 发布于2024-11-16
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-11-16
  • 如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现,该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户: FROM USERS ...
    编程 发布于2024-11-16
  • 从本地主机到生产:OneBootcamp 的问题优先 SRE 之旅
    从本地主机到生产:OneBootcamp 的问题优先 SRE 之旅
    我在 X(以前的 Twitter)上遇到了 One2N 举办的一个问题优先的 SRE 训练营(在这里你可以构建一个应用程序,并将其从本地主机扩展到生产环境),我想,“哎呀是啊!我会尝试一下。”这篇博文开启了我的旅程,我将记录我在训练营中处理每项练习的经验。 这篇介绍性文章将链接到其他条目,详细介绍我...
    编程 发布于2024-11-16
  • 大批
    大批
    方法是可以在对象上调用的 fns 数组是对象,因此它们在 JS 中也有方法。 slice(begin):将数组的一部分提取到新数组中,而不改变原始数组。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index p...
    编程 发布于2024-11-16
  • 如何在Python中递归搜索子文件夹并检索文件?
    如何在Python中递归搜索子文件夹并检索文件?
    递归子文件夹搜索和文件检索在编程领域,遍历目录和检索文件可能是一项常见任务。一种有效的方法是采用递归算法搜索子文件夹并累积满足特定条件的文件列表。遇到的问题用户遇到了障碍尝试在递归子文件夹搜索中构建特定文件的列表时。该问题源于子文件夹变量拉入子文件夹列表而不是包含该文件的当前文件夹。子文件夹的用途子...
    编程 发布于2024-11-16
  • 如何使用 CSS 构建倒计时器
    如何使用 CSS 构建倒计时器
    Written by Carlos Mucuho✏️ Countdown timers are a popular feature on many websites, enhancing functionality for events, sales, and user engagement. Wh...
    编程 发布于2024-11-16
  • ## 像素完美缩小可以在浏览器大小调整期间保存图像质量吗?
    ## 像素完美缩小可以在浏览器大小调整期间保存图像质量吗?
    通过缩小尺寸重新采样会降低图像质量?此处的目标是减小图像的大小,同时在浏览器环境中保持其质量。使用 HTML5 画布缩小图像时会出现此问题,导致图像质量下降。缩小尺寸与插值缩小尺寸和插值是不同的技术。缩小是指通过组合源图像中的像素以在目标图像中创建更少的像素来减小图像尺寸,而插值是指在放大时在目标图...
    编程 发布于2024-11-16
  • Python 3.x 的 super() 函数在没有参数的情况下如何工作,有哪些潜在的陷阱以及如何避免它们?
    Python 3.x 的 super() 函数在没有参数的情况下如何工作,有哪些潜在的陷阱以及如何避免它们?
    揭开Python 3.x神奇Super()的秘密Python 3.x引入了super()函数的一个特殊方面:可以在没有参数的情况下调用它。这种看似平凡的行为隐藏了编译时魔法和运行时支持的强大组合,提供了巨大的灵活性和效率。隐藏的编译时魔法通过无参数的 super() 调用,Python 编译器在编译...
    编程 发布于2024-11-16
  • PHP如何将变量转换为字符串?
    PHP如何将变量转换为字符串?
    PHP中的字符串转换Java和.NET程序员可能习惯toString()方法,它提供了一种便捷的转换方式任何对象到字符串表示形式。 PHP 通过转换运算符提供类似的功能。PHP 的转换运算符要将 PHP 变量转换为字符串,可以使用 (string) 转换运算符。此语法允许您将任何类型的变量显式转换为...
    编程 发布于2024-11-16
  • 如何修复“无法将 MySQL 日期/时间值转换为 System.DateTime”错误?
    如何修复“无法将 MySQL 日期/时间值转换为 System.DateTime”错误?
    了解“无法将 MySQL 日期/时间值转换为 System.DateTime”错误从 MySQL 数据库检索数据有时会导致错误“无法将 MySQL 日期/时间值转换为 System.DateTime”。当从数据库检索的数据的 DbType 与 .NET 数据类型的相应属性不兼容时,就会出现这种情况。...
    编程 发布于2024-11-16

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3