<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page & Space Shop</title>
<link href=" https://fonts.googleapis.com/css?family=Orbitron " rel="stylesheet">
<style>
body {
overflow: auto;
height: 100vh;
background: #000;
padding: 0;
margin: 0;
font-family: 'Orbitron', sans-serif;
color: #fff;
}
#stars {
position: absolute;
width: 1px;
height: 1px;
background: transparent;
box-shadow: 500px 500px #ffffff;
animation: animStar 50s linear infinite;
}
#stars:after {
content: " ";
position: absolute;
top: 5000px;
width: 1px;
height: 1px;
background: transparent;
box-shadow: 500px 500px #ffffff;
}
@keyframes animStar {
from { transform: translateY(0px); }
to { transform: translateY(-5000px); }
}
form {
z-index: 1;
background: #000;
max-width: 380px;
padding: 60px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
border-radius: 5px;
margin: 0 auto;
}
.form-control {
background: #1a1a1a;
border: none;
border-radius: 0;
box-shadow: none;
color: #fcfcfc;
margin-bottom: 25px;
}
.form-control:focus {
background: #313131;
color: #fcfcfc;
}
.btn {
border-radius: 0;
text-transform: uppercase;
font-size: 13px;
padding: 10px;
letter-spacing: 2px;
font-weight: bold;
transition: all 0.4s;
}
.btn-primary {
background: #007bff;
border-color: #007bff;
box-shadow: 0 4px 15px 0 rgba(0, 123, 255, 0.45);
}
.btn-primary:hover, .btn-primary:focus {
background: #0056b3;
border-color: #0056b3;
}
#space-shop {
display: flex;
justify-content: center;
