Ceci est une soumission pour Frontend Challenge v24.09.04, Glam Up My Markup : Space
Ce que j'ai construit
J'ai créé une page de destination sur le thème de l'espace qui fournit des informations sur l'exploration spatiale. L’objectif était de créer un design attrayant et minimaliste qui met en valeur les aspects clés de l’histoire spatiale, des missions actuelles, des missions futures et bien plus encore. La page comprend des sections pour l'accueil, à propos, l'historique, les missions en cours, les missions futures, un questionnaire et des informations de contact.
Démo
Vous pouvez voir le projet en direct ici. Vous trouverez ci-dessous une capture d'écran de la page de destination :
Page de destination de l'exploration spatiale
Vous pouvez également consulter le code sur Github
Voyage
La création de ce projet a été un voyage passionnant. Voici quelques points clés du processus :
Design et mise en page : j'ai recherché un design épuré et minimaliste avec un arrière-plan sombre sur le thème de l'espace pour créer une expérience immersive. La mise en page est simple mais informative, permettant aux utilisateurs de naviguer facilement dans les différentes sections.
Contenu : J'ai inclus des informations détaillées sur l'histoire de l'exploration spatiale, les missions actuelles et futures. La section questionnaire permet aux utilisateurs d'interagir et de partager leurs réflexions sur l'exploration spatiale.
Défis : L'un des défis consistait à garantir que l'interactivité des animations fonctionnait correctement sur différents appareils et tailles d'écran. J'ai beaucoup appris sur le design réactif et la compatibilité entre navigateurs au cours de ce processus.
Projets futurs : je prévois d'ajouter des éléments plus interactifs, tels qu'un quiz sur les faits spatiaux et une chronologie des événements importants de l'exploration spatiale. J'espère également intégrer des animations et des transitions plus avancées pour rendre la page encore plus attrayante.
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;
}
Équipe
Ce projet était un effort solo, mais je voudrais créditer les ressources et inspirations suivantes :
NASA pour les superbes images spatiales.
MDN Web Docs pour l'excellente documentation sur le développement Web.
Licence
Ce projet est sous licence MIT. N'hésitez pas à utiliser et à modifier le code comme bon vous semble.
Déclaration de sortie
Cet article est reproduit sur : https://dev.to/abhiramp_2005/frontend-attempt-pp0?1 En cas de violation, veuillez contacter [email protected] pour le supprimer.
Comment vérifier les variables entières en JavaScript et générer des erreurs pour les valeurs non entièresDéterminer si une variable JavaScript représ...
Bootstrap 4 Beta : suppression et restauration de la compensation de colonneBootstrap 4, dans sa version bêta 1, a introduit des changements important...
Créer des applications qui nécessitent des mises à jour en temps réel, comme des applications de chat, des notifications en direct ou des outils colla...
Affectation de clés étrangères avec des sérialiseurs imbriqués dans Django REST FrameworkDjango REST Framework (DRF) fournit un moyen pratique de gére...
Structures HTML peu courantes : peut-il accueillir des balises autres que ?Dans le monde du HTML, les balises imbriquées peuvent créer structures co...
Utilisation des conditions XPath pour la sélection des nœudsLors de la navigation dans un document XML via XPath, il est souvent nécessaire de limiter...
Pointeurs Go : types de récepteurs et de valeursDans Go, les pointeurs sont indispensables pour comprendre la programmation orientée objet et la gesti...
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected].
Nous nous en occuperons pour vous dans les plus brefs délais.