Skip to content

I have added the space animation #69

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
manognyaa wants to merge 8 commits into
base: master
Choose a base branch
from
Open

I have added the space animation #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9884cf5
I have added the space animation
manognyaa Jun 11, 2021
2aabf31
Update main.css
manognyaa Jun 13, 2021
b199ac6
Add files via upload
manognyaa Jun 13, 2021
48fa77c
Update index.html
manognyaa Jun 13, 2021
35d8888
Update index.html
manognyaa Jun 13, 2021
3e397f4
Merge branch 'master' into master
manognyaa Jun 13, 2021
726c84f
Merge branch 'master' into master
manognyaa Jun 26, 2021
2425feb
Update README.md
manognyaa Jun 26, 2021
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ git push -u origin <your_branch_name>

**13.** Add appropriate title and description to your pull request explaining your changes and efforts done. Always make sure you have pulled the latest code from the master branch before making a PR.

**14.** Click on `Create Pull Request`.
**14.** Click on `Create Pull Request` .
## 📌 Opensource Programs

### This project is a part of the following Open Source Program(s)
Expand Down
18 changes: 15 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

<!DOCTYPE html>
<html lang="en">
<head>
Expand All @@ -6,14 +7,16 @@
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>SpacexMK</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="shortcut icon" href="images/fav.png" type="image/x-icon">
<link rel="shortcut icon" href="fav.png" type="image/x-icon">
<link rel="stylesheet" href="main.css"/>

</head>
<body onload="removeload()">
<div id="particles-js"></div>
<script type="text/javascript" src="js/particles.js"></script>

<script type="text/javascript" src="bg.css"></script>
<script type="text/javascript" src="app.js"></script>

<script type="text/javascript" src="js/app.js"></script>
<div id="preloading">
</div>
Expand Down Expand Up @@ -51,6 +54,7 @@
</nav>
<!-- Navbar -->


<div class="app-wrap">
<header>
<input id="fnumber" type="text" autocomplete="off" class="search-box" placeholder="Enter mission number">
Expand Down Expand Up @@ -82,6 +86,11 @@
<div id="year" class="year">2006</div>
</div>
</div>

<div class="rocket">
<img background="rocket.png">
</div>

<div class="vehicle detail_row">
<div class="detail_block">
<div class="label"> Rocket Name :</div>
Expand Down Expand Up @@ -114,6 +123,9 @@
</div>
</div>
</div>

<script src="bg.css"></script>

<footer>
<div class="sm-handle">
<a href="https://linkedin.com/in/manan-kohli" class="sm-button" target="_blank">
Expand Down
23 changes: 20 additions & 3 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@
}

body {
font-family: "verdana", sans-serif;
background: url("images/bg1.png") no-repeat center center/cover fixed;

font-family: 'verdana' , sans-serif;
background: url('space\ animation.gif') no-repeat center center/cover fixed;

}
.back{
padding: 0;
Expand Down Expand Up @@ -37,6 +39,7 @@ body {
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.6)
);

}

header {
Expand Down Expand Up @@ -541,6 +544,20 @@ footer {
pointer-events: none;
transition: all .4s;
}


.fab{
color: #fff;
font-size: 16px;

}
.copyright{
font-size: 10px;
word-spacing: 2px;
color: white;
letter-spacing: 1.5px;
}

.to-top:hover{
color: goldenrod;
background-color: lightgray;
Expand All @@ -551,4 +568,4 @@ footer {
bottom: 32px;
pointer-events: auto;
opacity: 1;
}
}
Binary file added rocket.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added space animation.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 73 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.scene i{
position: absolute;
top: -250px;
background: rgba(255, 255, 255, 0.5);
animation: animateStars linear infinite;
}
@keyframes animateStars{
0%{
transform: translateY(0);
}
100%{
transform: translateY(200vh);
}
}
.scene
{
position: relative;
width: 100%;
height: 100vh;
background: black;
overflow: hidden;
display:flex;
justify-content: center;
align-items: center;
}
.scene .rocket
{
position: relative;
z-index: 100;
animation: animate 0.2s ease infinite;
}
@keyframes animate
{
0%, 100%
{
transform: translateY(-2px);
}
50%
{
transform: translateY(2px);
}
}
.scene .rocket::before
{
content: '';
position: absolute;
bottom: -200px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 200px;
background: linear-gradient(#fdec00, transparent);

}
.scene .rocket::after
{
content: '';
position: absolute;
bottom: -200px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 200px;
background: linear-gradient(#17ce17, transparent);
filter: blur(20px);
}