Dies ist eine Einreichung für Frontend Challenge v24.09.04, Glam Up My Markup: Space
Was ich gebaut habe
Ich habe eine Landingpage zum Thema Weltraum erstellt, die Informationen zur Weltraumforschung bietet. Ziel war es, ein attraktives, minimalistisches Design zu schaffen, das wichtige Aspekte der Weltraumgeschichte, aktuelle Missionen, zukünftige Missionen und mehr hervorhebt. Die Seite enthält Abschnitte für Zuhause, Über uns, Geschichte, aktuelle Missionen, zukünftige Missionen, einen Fragebogen und Kontaktinformationen.
Demo
Hier können Sie das Projekt live verfolgen. Unten sehen Sie einen Screenshot der Zielseite:
Zielseite zur Weltraumforschung
Sie können sich den Code auch auf Github ansehen
Reise
Die Erstellung dieses Projekts war eine aufregende Reise. Hier sind einige wichtige Punkte zum Prozess:
Design und Layout: Mein Ziel war ein klares und minimalistisches Design mit einem dunklen, weltraumbezogenen Hintergrund, um ein immersives Erlebnis zu schaffen. Das Layout ist einfach und dennoch informativ und erleichtert Benutzern die Navigation durch die verschiedenen Abschnitte.
Inhalt: Ich habe detaillierte Informationen über die Geschichte der Weltraumforschung sowie aktuelle und zukünftige Missionen beigefügt. Im Fragebogenbereich können Benutzer interagieren und ihre Gedanken zur Weltraumforschung teilen.
Herausforderungen: Eine der Herausforderungen bestand darin, sicherzustellen, dass die Interaktivität der Animationen auf verschiedenen Geräten und Bildschirmgrößen reibungslos funktionierte. Während dieses Prozesses habe ich viel über Responsive Design und Cross-Browser-Kompatibilität gelernt.
Zukunftspläne: Ich plane, weitere interaktive Elemente hinzuzufügen, wie zum Beispiel ein Quiz über Weltraumfakten und eine Zeitleiste wichtiger Ereignisse in der Weltraumforschung. Ich hoffe auch, erweiterte Animationen und Übergänge integrieren zu können, um die Seite noch ansprechender zu gestalten.
CODE
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.
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;
}
Team
Dieses Projekt war ein Einzelprojekt, aber ich möchte die folgenden Ressourcen und Inspirationen erwähnen:
NASA für die atemberaubenden Weltraumbilder.
MDN Web Docs für die hervorragende Dokumentation zur Webentwicklung.
Lizenz
Dieses Projekt ist unter der MIT-Lizenz lizenziert. Fühlen Sie sich frei, den Code nach Belieben zu verwenden und zu ändern.
Freigabeerklärung
Dieser Artikel ist abgedruckt unter: https://dev.to/abhiramp_2005/frontend-attempt-pp0?1 Bei Verstößen wenden Sie sich bitte an [email protected], um ihn zu löschen
Kontextuelle Konvertierung in bool ohne Umwandlung zulässigIhre Klasse definiert eine explizite Konvertierung in bool, sodass Sie ihre Instanz „t“ dir...
Bootstrap 4 Beta: Die Entfernung und Wiederherstellung des SpaltenversatzesBootstrap 4 führte in seiner Beta-1-Version wesentliche Änderungen an der A...
Das Erstellen von Apps, die Echtzeit-Updates erfordern – wie Chat-Anwendungen, Live-Benachrichtigungen oder Tools für die Zusammenarbeit – erfordert e...
Gruppieren von Zeilen in SQL mit SUM() für eindeutige WerteIn Ihrer MySQL-Abfrage möchten Sie die Summe eines Werts berechnen die Konvertierungstabell...
So identifizieren Sie Benutzer mit den heutigen Geburtstagen mithilfe von MySQLUm mithilfe von MySQL festzustellen, ob heute der Geburtstag eines Benu...
In der modernen Webentwicklung ist die Verwaltung vertraulicher Daten wie API-Schlüssel, Datenbankanmeldeinformationen und verschiedener Konfiguration...
CodeIgniter .htaccess und Probleme beim Umschreiben von URLsDas Navigieren in CodeIgniter-Anwendungen erfordert häufig das Entfernen von „index.php“ a...
Ungewöhnliche HTML-Strukturen: Kann andere Tags als aufnehmen?In der Welt von HTML können verschachtelte Tags erstellt werden komplexe Strukturen. A...
Verwenden von XPath-Bedingungen für die KnotenauswahlBeim Navigieren in einem XML-Dokument über XPath ist es häufig erforderlich, die abgerufenen Knot...
Grundlegendes zum Thema „Absolute Positioning Margin Auto“Beim Anwenden von „position: absolute“ auf ein Element mit „margin-left: auto“ und „ margin-...
Go-Zeiger: Empfänger- und WerttypenIn Go sind Zeiger unverzichtbar für das Verständnis der objektorientierten Programmierung und Speicherverwaltung. B...
Wie kann ich mehrere Variablen aus einer Liste von Zeichenfolgen erstellen? [Duplikat]Viele Programmierszenarien erfordern, dass wir mehrere Objekte o...
Kombinieren assoziativer Arrays in PHPIn PHP ist das Kombinieren zweier assoziativer Arrays zu einem einzigen Array eine häufige Aufgabe. Betrachten S...
Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected]
Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.