Skip to content

Nasa Space Apps Noida Hackathon 2023 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Nasa Space Apps Noida Hackathon 2023 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cdbf316
Update README.md
Shantanu-Tiwari Oct 8, 2023
74cb5df
Add files via upload
Shantanu-Tiwari Oct 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 10 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,19 @@
# NASA Space Apps Noida Hackathon 2023 - Hack2Skill

Welcome to the official repository for the NASA Space Apps Noida Hackathon 2023 organized by Hack2Skill!
#### Team Name - Coding Triad
#### Problem Statement - Eclipse - Perspective is Everything
#### Team Leader Email - [email protected]

## Getting Started

To get started with the NASA Space Apps Noida Hackathon 2023 repository, follow these steps:

### Submission Instruction:
1. Fork this repository
2. Create a folder with your Team Name
3. Upload all the code and necessary files in the created folder
4. Upload a **README.md** file in your folder with the below mentioned informations.
5. Generate a Pull Request with your Team Name. (Example: submission-XYZ_team)

### README.md must consist of the following information:

#### Team Name -
#### Problem Statement -
#### Team Leader Email -

### A Brief of the Prototype:
This section must include UML Diagrams and prototype description
### A Brief of the Prototype: We made an interactive website that depicts the phenomena of Eclipse and how it occurs. We included an interactive quiz, stories and history with some mythological references. We also made sure to include safety measures and concerns people should have. We will be taking this as our personal project and developing it further on our githup repo.

### Tech Stack:
List Down all technologies used to Build the prototype
HTML, CSS, Javascript

### Step-by-Step Code Execution Instructions:
This Section must contain a set of instructions required to clone and run the prototype so that it can be tested and deeply analyzed
1. Fork this repository
2. Use git bash to clone this on your local machine
3. Run it using an ide or a code editor

### Future Scope:
Write about the scalability and futuristic aspects of the prototype developed
We are considering adding affiliate links for safety equipments and we are going to start a newsletter regarding the moon and its science.
I think we can have a good scalability if we handle it well and give it the right direction.
119 changes: 119 additions & 0 deletions Style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
body {
background-color: black;
overflow-y: scroll;
margin: 0;
background-image: url("background.jpg");
background-attachment: fixed;
background-size: 100% 100%;
}
.logo-image{
img{float: left}
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
margin-top: 0px;
}
h1 {
color: white;
font-size: 200px;
font-family: "Space Mono", monospace;
text-align: center;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

.navbar {
background: Gray;
font-family: calibri;
padding-right: 15px;
padding-left: 15px;
position: fixed;
top: 0;
z-index: 100;
}

.navdiv {
display: flex;
align-items: center;
justify-content: space-between;
}

.logo a {
font-size: 35px;
font-weight: 600;
color: white;
}

li {
list-style: none;
display: inline-block;
}

li a {
color: white;
font-size: 18px;
font-weight: bold;
margin-right: 25px;
margin-left: 10px;
border-radius: 10px;
padding: 10px;
width: 90px;
}

button {
background-color: white;
margin-left: 10px;
border-radius: 10px;
padding: 10px;
width: 90px;
}

button a {
color: white;
font-weight: bold;
font-size: 15px;
}

.footer {
width: 100%;
height: 80px;
background-color: white;
text-align: center;
padding: 20px 0;
}

main {
margin-top: 57px; /* Adjust this margin to avoid content being hidden under the header */
}
p{
color: #dddddd;
}
.collapsible {
background-color: #444444;
color: #dddddd;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;

}

.active, .collapsible:hover {
background-color: #ccc;
}

.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
h2{
background-color: #dddddd;
}
106 changes: 106 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WikiEclipse</title>
<link rel="stylesheet" href="style.css">

<style>
body {
background-color: black;
overflow-y: scroll;
margin: 0;
}

h1 {
color: white;
font-size: 200px;
font-family: "Space Mono", monospace;
text-align: center;
position: relative;
}

.navbar {
background-color: #333;
overflow: hidden;
position: relative;
top: 0;
z-index: 100;
}

.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: #ddd;
color: black;
}


.footer {

width: 100%;
height: 20%;
background-color: #2a2d35;
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<p style="background-image: url('background.jpg');">
<section>
<nav class="navbar">
<div class = "logo-image">

</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="https://6521d090d713cf439d62c65a--idyllic-florentine-3c69e1.netlify.app/" target="_blank">Quiz</a></li>
<li><a href="">About us</a></li>
<li><a href="#">Cities</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</section>
<div class="dropdown">

</div>
<h1 data-value="WikiEclipse">WikiEclipse</h1>
<div class="row">
<div class="column" onclick="open('expand')">
</div>
<h2>To know more about the cultural impact and general knowledge about the eclipse, visit this <a href="https://6521e2dbb245944757c03a4d--gleaming-horse-9946ad.netlify.app/"> site</a> </h2>

</div>
<footer class="footer">
<h2>Contact Us</h2>
<p>If you have any questions or inquiries, please feel free to contact us:</p>
<ul>
<li>Email: <a
href="https://mail.google.com/mail/u/0/#inbox?compose=CllgCHrjDfmxhcZhKmwwtGmBvhvLkPjbTMlqVRnTDkrbrDCJGFHtVHFhMkhcWlsczdnBrMwlCpL"
target="_blank">[email protected]</a></li>
<li>Source Code: <a href ="https://github.com/Shantanu-Tiwari/Shantanu-Tiwari.github.io/tree/main"> Github Repository </a></li>
</ul>
</footer>
<script src="script.js"></script>
</body>
</html>
75 changes: 75 additions & 0 deletions quiz.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
*{
margin : 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}

body{
background-color: #001e4d;
}
.app{
background: #fff;
width: 90%;
max-width: 600px;
margin: 100px auto 0;
border-radius: 10px;
padding: 30px;
}
.app h1{
font-size: 25px;
font-weight: 600;
color: #001e4d;
border-bottom: 1px solid #333;
padding-bottom: 30px;
}
.quiz{
padding: 20px 0;
}
.quiz h2{
font-size: 18px;
color: #001e4d;
font-weight: 600;
}
.btn{
background: #fff;
color: #222;
font-weight: 500;
width: 100%;
border: 1px solid #222;
padding: 10px;
margin: 10px 0;
text-align: left;
border-radius: 4px;
cursor: pointer;
transition: all;
}
.btn:hover:not([disabled]){
background: #222;
color: #fff;
}
.btn:disabled{
cursor: no-drop;
}
#next-btn{
background: #001e4d;
color: #fff;
font-weight: 500;
width: 150px;
border: 0;
padding: 10px;
margin: 20px auto 0;
border-radius: 4px;
cursor: pointer;
display: none;
}
.correct{
background: #9aeabc;
}
.incorrect{
background: #ff9393;
}
p {
background-image: url("eclipse-solar-eclipse.gif");
}

30 changes: 30 additions & 0 deletions quiz.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QUIZ</title>
<link rel="stylesheet" href="quiz.css">
</head>
<body>
<style>
body {
background-image: url('https://i.pinimg.com/originals/67/b0/b1/67b0b12873c04ff00d8168d34a4d0d95.jpg');
}
</style>
<div class="app">
<h1>Eclipse Quiz</h1>
<div class="quiz">
<h2 id="question">Question goes here</h2>
<div id="answer-buttons">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
</div>
<button id="next-btn">Next</button>
</div>
</div>
<script src="quiz.js"></script>
</body>
</html>
Loading