Interstellar commit
This commit is contained in:
Sage The DM
parent
f34cd19677
commit
0fa4dc78dd
11 changed files with 669 additions and 0 deletions
353
styles.css
Normal file
353
styles.css
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Body styling */
|
||||
body {
|
||||
background-color: #0b0c1d; /* Deep space blue */
|
||||
color: #c7d5e0; /* Light gray-blue text for contrast */
|
||||
font-family: "Arial", sans-serif;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
background-image: url("images/star.jpg"); /* Starry, mystical background */
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
header {
|
||||
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-bottom: 10em;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7); /* Deeper shadow for a mystic effect */
|
||||
backdrop-filter: blur(5px); /* Blur effect for a mystical aura */
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
header ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
text-decoration: none;
|
||||
color: #ffdd55; /* Warm star-like yellow */
|
||||
font-weight: bold;
|
||||
padding: 5px 10px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
header ul li a:hover {
|
||||
background-color: rgba(255, 221, 85, 0.3); /* Glowing yellow hover effect */
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px #ffdd55; /* Subtle glow on hover */
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 1.5em;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-name:hover {
|
||||
color: #ffd700; /* Bright golden-yellow for hover effect */
|
||||
text-shadow: 0 0 10px #ffd700; /* Glowing text effect */
|
||||
}
|
||||
|
||||
/* Article styling */
|
||||
article {
|
||||
max-width: 800px;
|
||||
margin: 6.25em auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
|
||||
backdrop-filter: blur(5px); /* Blur effect for mystical atmosphere */
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
text-shadow: 0 0 15px #ffdd55; /* Glowing text effect */
|
||||
}
|
||||
|
||||
article p {
|
||||
hyphens: auto;
|
||||
color: #c7d5e0; /* Light gray-blue text for better readability */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Download list styling */
|
||||
article h2 {
|
||||
font-size: 1.8em;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 0 10px #ffdd55; /* Subtle glow for headings */
|
||||
}
|
||||
|
||||
article ul {
|
||||
list-style-type: none; /* Remove bullet points */
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
article ul li {
|
||||
background-color: rgba(46, 58, 95, 0.8); /* Dark blue with transparency */
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
article ul li a {
|
||||
text-decoration: none;
|
||||
color: #ffdd55; /* Warm yellow for links */
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article ul li:hover {
|
||||
background-color: rgba(68, 80, 124, 0.9); /* Lighter blue on hover */
|
||||
box-shadow: 0 0 10px #ffdd55; /* Soft glow effect on hover */
|
||||
}
|
||||
|
||||
/* Footer styling */
|
||||
footer {
|
||||
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
|
||||
padding: 10px 20px;
|
||||
color: #c7d5e0; /* Light gray-blue text */
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7); /* Shadow for depth */
|
||||
backdrop-filter: blur(5px); /* Mystical blur effect */
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
section .cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
section .card {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
|
||||
border: 1px solid #3a4971; /* Slightly lighter border for card edges */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
section .card:hover {
|
||||
transform: translateY(-5px); /* Slight lift effect */
|
||||
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
|
||||
}
|
||||
|
||||
section .card img {
|
||||
height: 80px; /* Image size */
|
||||
width: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%; /* Circular image */
|
||||
margin: 0 auto 15px;
|
||||
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
|
||||
}
|
||||
|
||||
section .card h3 {
|
||||
margin: 10px 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #ffdd55; /* Star yellow for card titles */
|
||||
text-shadow: 0 0 10px #ffdd55; /* Glow effect */
|
||||
}
|
||||
|
||||
section .card p {
|
||||
flex-grow: 1;
|
||||
color: #c7d5e0; /* Light gray-blue for card content */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section .card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("path-to-cosmic-icon.svg") no-repeat center; /* Space-themed icon */
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
section .card .suit-icon {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("path-to-suit-icon.svg") no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
/* Contact form styles */
|
||||
form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Shadow for depth */
|
||||
backdrop-filter: blur(5px); /* Mystical blur effect */
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
}
|
||||
|
||||
form input,
|
||||
form textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #3a4971; /* Slightly lighter border for input fields */
|
||||
border-radius: 4px;
|
||||
background: rgba(
|
||||
46,
|
||||
58,
|
||||
95,
|
||||
0.7
|
||||
); /* Slightly lighter background for inputs */
|
||||
color: #c7d5e0; /* Light gray-blue text for inputs */
|
||||
}
|
||||
|
||||
form button {
|
||||
background-color: #ffdd55; /* Star yellow */
|
||||
color: #0b0c1d; /* Deep space blue for text */
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
form button:hover {
|
||||
background-color: #ffd700; /* Bright golden-yellow on hover */
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
/* Header */
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
header ul {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
header ul li {
|
||||
display: block; /* Ensure list items stack vertically */
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Article */
|
||||
article {
|
||||
margin: 12em 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 1.8em; /* Adjust font size for smaller screens */
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
article ul {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
article ul li {
|
||||
font-size: 1em;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
article ul li a {
|
||||
font-size: 1em; /* Ensure links are readable */
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 10px 15px; /* Adjust padding for smaller screens */
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
font-size: 0.9em; /* Ensure footer text is readable but not oversized */
|
||||
}
|
||||
|
||||
/* Project Name */
|
||||
.project-name {
|
||||
font-size: 1.2em; /* Slightly smaller project name font size for smaller screens */
|
||||
margin-bottom: 10px; /* Adjust spacing below project name */
|
||||
}
|
||||
|
||||
section .card {
|
||||
padding: 12px; /* Adjusted padding */
|
||||
}
|
||||
|
||||
section .card img {
|
||||
height: 60px; /* Adjusted height */
|
||||
width: 60px; /* Adjusted width */
|
||||
border-radius: 8px; /* Adjusted border-radius */
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue