」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 前端嘗試

前端嘗試

發佈於2024-11-04
瀏覽:328

这是前端挑战 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]刪除
最新教學 更多>
  • 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
  • 我們如何計算 JavaScript 物件的大致記憶體佔用量?
    我們如何計算 JavaScript 物件的大致記憶體佔用量?
    確定 JavaScript 物件的記憶體佔用在 JavaScript 中,了解物件的記憶體消耗對於優化效能和避免記憶體洩漏至關重要。本文解決了獲取 JavaScript 物件大小的查詢,深入研究了估計此類物件所佔用的大致記憶體的解決方案。 確定物件大小In JavaScript 中沒有專門設計的內建...
    程式設計 發佈於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 ...
    程式設計 發佈於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中遞歸搜尋子資料夾並檢索檔案?
    如何在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
  • 如何使用 PDO 準備語句將多行插入資料庫?
    如何使用 PDO 準備語句將多行插入資料庫?
    使用PDO 準備好的語句插入多行使用單一準備好的語句將多行插入資料庫不僅是可能的,而且推薦用於使用單一插入查詢的方法第一種方法涉及使用具有多個值的單一INSERT 查詢:INSERT INTO Table (col1, col2, col3) VALUES ('abc', 'def', 'ghi'...
    程式設計 發佈於2024-11-16
  • Java中如何計算兩個日期之間的天數?
    Java中如何計算兩個日期之間的天數?
    在Java 中計算兩個日期之間的天數在Java 程式語言中,計算兩個日期之間的天數可以很簡單任務。但是,當日期儲存為字串時,需要仔細轉換才能準確處理它們。 將字串日期轉換為日期物件要有效地處理日期,您可以將它們從字串轉換為 Date 或 LocalDate 類型。 Java 提供了各種類別和方法來促...
    程式設計 發佈於2024-11-16
  • 如何使用“...”標記在 C++ 可變參數模板中打包和解包參數?
    如何使用“...”標記在 C++ 可變參數模板中打包和解包參數?
    可變參數範本中「...」標記的語法規則在C 中,可變參數範本可以建構接受參數數量可變。 「...」標記在此上下文中起著至關重要的作用,充當參數包或參數解包器。 省略號放置的語法規則The “...”標記的位置決定了其功能:Pack : 當它出現在名稱的左邊時,「...」表示參數套件: ...thin...
    程式設計 發佈於2024-11-16

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3