Skip to content
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

Jump to bottom

button boxstyle #55

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

button boxstyle #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
633ca40
button boxstyle readme
SanjeevKumar22 Jun 11, 2021
afd71df
comments added
SanjeevKumar22 Jun 11, 2021
740a06b
Merge branch 'master' into main
SanjeevKumar22 Jun 11, 2021
916fe76
Merge branch 'master' into main
SanjeevKumar22 Jun 11, 2021
a25f221
Merge branch 'master' into main
SanjeevKumar22 Jun 11, 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
18 changes: 18 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,23 @@ git push -u origin <your_branch_name>
<img src="https://contrib.rocks/image?repo=manankohlii/spacex-launch-data" />
</a>


🌟 Contributors
Thanks goes to these wonderful people ✨✨:
<p style="clear:both;">
<h1><a name="contributing"></a><a name="community"></a>
<a href="https://github.com/manankohlii/spacex-launch-data/graphs/contributors">
<img src="https://contrib.rocks/image?repo=manankohlii/spacex-launch-data" />
</a>

</p>


# Owner

[Manan Kohli👨‍💻](https://github.com/manankohlii)✨


## Project Admin👨‍
<table>
<tr>
Expand All @@ -114,3 +131,4 @@ git push -u origin <your_branch_name>
[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)
[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
[![forthebadge](https://forthebadge.com/images/badges/built-by-developers.svg)](https://forthebadge.com)

104 changes: 74 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,110 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpacexMK</title>

<link rel="shortcut icon" href="fav.png" type="image/x-icon">
<link rel="stylesheet" href="main.css" />

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<link rel="shortcut icon" href="fav.png" type="image/x-icon">
<link rel="stylesheet" href="main.css"/>


</head>

<body>
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<div class="app-wrap">
<header>

<input id="fnumber" type="text" autocomplete="off" class="search-box" placeholder="Enter mission number">
<button onclick="fn()" class="btn" id="sbtn">Search</button>
<!-- Dark mode -->
<div class="mode">
Dark mode:
<span class="change">OFF</span>
</div>
</header>
<main>
<div class="mission_wrapper">
<div class="mission">
<div class="detail_block detail_row">
<span class="name">👨‍🚀</span>
<div id="mname" class="name">Falcon Sat</div>
<span class="name">👨‍🚀</span>
<main>
<div class="mission_wrapper">
<div class="mission">
<div class="detail_block detail_row">
<span class="name">👨‍🚀</span>
<div id="mname" class="name">Falcon Sat</div>
<span class="name">👨‍🚀</span>
</div>
</div>

<div class="lnumber detail_row">
<div class="detail_block">
<div class="label">Mission No : </div>
<div id="number" class="number">1</div>
</div>
<div class="detail_block ">
<div class="label">Launch Year :</div>
<div id="year" class="year">2006</div>
</div>

</div>
<img src = "https://images2.imgbox.com/3c/0e/T8iJcSN3_o.png" id="mission_patch" class="mission_patch" alt = "mission patch" height=200 width=200 align=right>
<div class="lnumber detail_row">
<div class="detail_block">
<div class="label">Mission No : </div>
<div id="number" class="number">1</div>

</div>
<div class="detail_block ">
<div class="label">Launch Year :</div>
<div id="year" class="year">2006</div>
<div class="vehicle detail_row">
<div class="detail_block">
<div class="label"> Rocket Name :</div>
<div id="rname" class="rname">Falcon 1</div>
</div>
</div>
</div>
<div class="vehicle detail_row">
<div class="detail_block">
<div class="label"> Rocket Name :</div>
<div id="rname" class="rname">Falcon 1</div>
<div class="launch_site detail_row">
<div class="detail_block">
<div class="label">Launch Site :</div>
<div id="lsite" class="rtype">Kwajalein Atoll Omelek Island</div>
</div>
</div>
</div>
<div class="launch_site detail_row">
<div class="detail_block">
<div class="label">Launch Site :</div>
<div id="lsite" class="rtype">Kwajalein Atoll Omelek Island</div>
</div>
</div>
<div class="links">
<a id="artlink" class="artlink" target="_blank" href="https://www.space.com/2196-spacex-inaugural-falcon-1-rocket-lost-launch.html">
<button class="btn youBtn">View Full Article</button>
<div class="links">
<a id="v" class="artlink" target="_blank"
href="https://www.space.com/2196-spacex-inaugural-falcon-1-rocket-lost-launch.html">
<!-- Neon button styling -->
<span class="neon"></span>
<span class="neon"></span>
<span class="neon"></span>
<span class="neon"></span>
View Full Article

</a>
<a id="vidlink" class="vidlink" target="_blank" href="https://www.youtube.com/watch?v=0a_00nJ_Y88">
<button class="btn youBtn">Watch Launch</button>
<a id="v" class="vidlink" target="_blank" href="https://www.youtube.com/watch?v=0a_00nJ_Y88">

<!-- Neon button styling -->
<span class="neon"></span>
<span class="neon"></span>
<span class="neon"></span>
<span class="neon"></span>
Watch Launch
</a>
</button>
</button>
</div>
</div>
</div>
</main>
</main>
</div>

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src="main.js"></script>
</body>

</html>

<script src="main.js"></script>
<footer>
<div class="sm-handle">
Expand All @@ -82,3 +125,4 @@
</footer>
</body>
</html>

128 changes: 126 additions & 2 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,18 @@
margin: 0;
padding: 0;
box-sizing: border-box;

}

body {
font-family: 'verdana' , sans-serif;

background: url('bg3.jpg') no-repeat center center/cover fixed;


background: url('bg1.png') no-repeat center center/cover fixed;


}

.app-wrap{
Expand Down Expand Up @@ -42,6 +48,10 @@ header input{
font-size: 20px;
font-weight: 300;
transition: 0.2s ease-out;

}
.bg{
background-color: #313131;
}

header input:focus {
Expand Down Expand Up @@ -80,6 +90,8 @@ main{
font-size: 20px;
margin:10px;
color:#FFCA33;


}


Expand Down Expand Up @@ -143,13 +155,15 @@ main{
padding:10px 20px;
font-size: 20px;
margin:10px;
/* margin-left: 40px; */
margin-left: 40px;
color:#FFCA33;
transition:0.8s;
position: relative;
border-radius: 6px;
overflow:hidden;
cursor: pointer;
cursor: pointer;


}
.btn::before{
content: '';
Expand All @@ -170,6 +184,116 @@ main{
text-shadow: 1px 1px 1px #f1c14ac7;
box-shadow: -1px 2px 7px #f5de69b5;
}

/* neon button css */

#v {


border-radius: 10px;


position: relative;
display: inline-block;
padding: 15px 30px;
color:white;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 20px;
overflow: hidden;
transition: 0.2s;
}

#v:hover {
transform: translate3d(0, 5px,0);

cursor: pointer;


color: #255784;
background-color: #2196f3;
box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay: 1s;
}

.neon{
position: absolute;
display: block;

}
.neon:nth-child(1){

top: 0;
left: -50%;
width: 50%;
height: 3px;
background: linear-gradient(90deg,transparent,#2196f3);
}
#v:hover .neon:nth-child(1){

left: 100%;
transition: 1s;
}
.neon:nth-child(3){
bottom: 0;
right: -50%;
width: 50%;
height: 3px;
background: linear-gradient(270deg,transparent,#2196f3);
}
#v:hover .neon:nth-child(3){
right: 50%;
transition: 1s;
transition-delay: 0.5s;
}
.neon:nth-child(2){
top:-100%;
right: 0;
width: 2px;
height:70%;
background: linear-gradient(180deg,transparent,#2196f3);
}
#v:hover .neon:nth-child(2){
top: 30%;
transition: 1s;
transition-delay: 0.25s;
}

.neon:nth-child(4){
bottom:-100%;
left: 0;
width: 2px;
height:70%;
background: linear-gradient(360deg,transparent,#2196f3);
}
#v:hover .neon:nth-child(4){
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}


.mode {
float:right;
}
.change {
cursor: pointer;
border: 1px solid #555;
border-radius: 40%;
width: 20px;
text-align: center;
padding: 5px;
margin-left: 8px;
}
.dark{

color:greenyellow;
}
.sh{
box-shadow: rgba(0,255,0 ,0.4) 5px 5px, rgba(0,255,0, 0.3) 10px 10px, rgba(0,255,0, 0.2) 15px 15px, rgba(0,255,0, 0.1) 20px 20px, rgba(0,255,0, 0.05) 25px 25px;
}

@media(max-width:550px){
.lnumber .number{
font-size: 30px;
Expand Down
15 changes: 15 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,18 @@ input.addEventListener("keyup", function(event) {
document.getElementById("sbtn").click();
}
});


$( ".change" ).on("click", function() {
if( $( "*" ).hasClass( "dark" )) {
$( "*" ).removeClass( "dark" );
$("header input").removeClass("bg");
$(".detail_block").removeClass("sh")
$( ".change" ).text( "OFF" );
} else {
$( "*" ).addClass( "dark" );
$(".detail_block").addClass("sh")
$("header input").addClass("bg")
$( ".change" ).text( "ON" );
}
});