Upload files to "/"
This commit is contained in:
244
style.css
Normal file
244
style.css
Normal file
@@ -0,0 +1,244 @@
|
||||
/* Reset & Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: #111;
|
||||
color: #eee;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #1b1b1b;
|
||||
padding: 1rem 2rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #e63946;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: #eee;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: #e63946;
|
||||
}
|
||||
|
||||
/* Dev*/
|
||||
.Dev {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(to bottom, #222, #111);
|
||||
}
|
||||
|
||||
.Dev h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dev p {
|
||||
font-size: 1.1rem;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: 3rem 2rem;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #e63946;
|
||||
}
|
||||
|
||||
/* Project Cards */
|
||||
.project-card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background-color: #1b1b1b;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s, background-color 0.3s;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background-color: #1b1b1b;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s, background-color 0.3s;
|
||||
}
|
||||
|
||||
.feature-list p {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.feature-list h3 {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
/* Project header with image */
|
||||
.project-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.project-header img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
background-color: #222;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.project-header h3 {
|
||||
font-size: 1.4rem;
|
||||
color: #fff;
|
||||
}
|
||||
/* Additional license-specific styling */
|
||||
.license-container {
|
||||
max-width: 900px;
|
||||
margin: 3rem auto;
|
||||
background-color: #1b1b1b;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.license-container pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
background-color: #111;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
color: #ddd;
|
||||
font-family: monospace;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.license-container h2 {
|
||||
color: #e63946;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: 1.5rem;
|
||||
color: #e63946;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.logoLink{
|
||||
color: #e63946;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: #1b1b1b;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
/* ============================= */
|
||||
/* SLIDE-IN SIDEBAR HAMBURGER NAV */
|
||||
/* ============================= */
|
||||
|
||||
/* hide checkbox */
|
||||
#menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hamburger button */
|
||||
.hamburger {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
gap: 5px;
|
||||
margin-left: auto;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: #eee;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* SIDEBAR MENU */
|
||||
.nav-links {
|
||||
position: fixed; /* makes it overlay page */
|
||||
top: 0;
|
||||
right: -260px; /* hidden off screen */
|
||||
height: 100vh;
|
||||
width: 260px;
|
||||
|
||||
background: #111;
|
||||
padding-top: 80px;
|
||||
|
||||
flex-direction: column; /* vertical links */
|
||||
gap: 2rem;
|
||||
|
||||
display: flex !important;
|
||||
|
||||
transition: right 0.3s ease;
|
||||
box-shadow: -5px 0 15px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* show menu when toggled */
|
||||
#menu-toggle:checked + .hamburger + .nav-links {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* make links bigger and spaced */
|
||||
.nav-links li {
|
||||
list-style: none;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
Reference in New Issue
Block a user