Kevin/test-build
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade website to professional design based on reference image

Browse Source
This commit is contained in:
Agent Zero
2026-02-18 12:31:02 +00:00
parent 74faa2771c
commit d0de630261
1 changed files with 211 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
dist/style.css vendored
View File

@@ -1,10 +1,23 @@
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
/* CSS Variables for Colors */
:root {
--color-mint-green: #A4FF93;
--color-green-pea: #256F50;
--color-white: #FFFFFF;
--color-dark-green: #1A473A; /* A darker shade for backgrounds */
--color-text-light: #E0E0E0;
--color-text-dark: #333333;
}
/* General Body & Typography */ /* General Body & Typography */
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Readex Pro', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f8f8f8; /* Light background */ background-color: var(--color-dark-green);
color: #333; color: var(--color-text-light);
line-height: 1.6; line-height: 1.6;
overflow-x: hidden; overflow-x: hidden;
} }
@@ -16,39 +29,45 @@ body {
} }
h1, h2, h3 { h1, h2, h3 {
font-family: 'Orbitron', sans-serif;
font-weight: 700; font-weight: 700;
color: #222; color: var(--color-mint-green);
} }
p { p {
font-weight: 300; font-weight: 300;
color: var(--color-text-light);
} }
/* Buttons */ /* Buttons */
.btn { .btn {
display: inline-block; display: inline-block;
background-color: #FF6347; /* Tomato Red - vibrant */ background-color: var(--color-mint-green);
color: #fff; color: var(--color-dark-green);
padding: 12px 25px; padding: 12px 25px;
text-decoration: none; text-decoration: none;
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
font-weight: 600; font-weight: 600;
font-family: 'Orbitron', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
} }
.btn:hover { .btn:hover {
background-color: #E5533D; background-color: var(--color-white);
color: var(--color-green-pea);
} }
/* Navbar */ /* Navbar */
.navbar { .navbar {
background-color: #333; /* Dark background for contrast */ background-color: var(--color-green-pea);
color: #fff; color: var(--color-white);
padding: 15px 0; padding: 15px 0;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.2); box-shadow: 0 2px 10px rgba(0,0,0,0.4);
} }
.navbar .container { .navbar .container {
@@ -58,10 +77,12 @@ p {
} }
.navbar .logo { .navbar .logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.8em; font-size: 1.8em;
font-weight: 700; font-weight: 700;
color: #fff; color: var(--color-mint-green);
text-decoration: none; text-decoration: none;
letter-spacing: 2px;
} }
.navbar ul { .navbar ul {
@@ -72,116 +93,147 @@ p {
} }
.navbar ul li { .navbar ul li {
margin-left: 25px; margin-left: 30px;
} }
.navbar ul li a { .navbar ul li a {
color: #fff; color: var(--color-white);
text-decoration: none; text-decoration: none;
font-weight: 400; font-weight: 400;
transition: color 0.3s ease; transition: color 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
} }
.navbar ul li a:hover { .navbar ul li a:hover {
color: #FFD700; /* Gold - accent color */ color: var(--color-mint-green);
} }
/* Hero Section */ /* Hero Section */
.hero { .hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://via.placeholder.com/1920x700/4682B4/FFFFFF?text=Dogs+Golf+Umbrellas') no-repeat center center/cover; background: linear-gradient(rgba(37, 111, 80, 0.8), rgba(37, 111, 80, 0.8)), url('https://via.placeholder.com/1920x700/256F50/A4FF93?text=Professional+Design') no-repeat center center/cover;
color: #fff; color: var(--color-white);
text-align: center; text-align: center;
padding: 100px 20px; padding: 120px 20px;
height: 60vh; height: 70vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(164, 255, 147, 0.1) 25%, transparent 25%, transparent 50%, rgba(164, 255, 147, 0.1) 50%, rgba(164, 255, 147, 0.1) 75%, transparent 75%, transparent);
background-size: 40px 40px;
opacity: 0.2;
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
} }
.hero h1 { .hero h1 {
font-size: 3.5em; font-size: 4em;
margin-bottom: 15px; margin-bottom: 20px;
color: #fff; color: var(--color-mint-green);
text-shadow: 2px 2px 4px rgba(0,0,0,0.7); text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
letter-spacing: 3px;
} }
.hero p { .hero p {
font-size: 1.3em; font-size: 1.5em;
margin-bottom: 30px; margin-bottom: 40px;
color: #eee; color: var(--color-text-light);
max-width: 800px;
margin-left: auto;
margin-right: auto;
} }
/* Features Section */ /* Features Section */
.features-section { .features-section {
padding: 60px 0; padding: 80px 0;
text-align: center; text-align: center;
background-color: #fff; background-color: var(--color-dark-green);
} }
.features-section h2 { .features-section h2 {
font-size: 2.5em; font-size: 3em;
margin-bottom: 40px; margin-bottom: 50px;
color: var(--color-mint-green);
} }
.feature-grid { .feature-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px; gap: 40px;
} }
.feature-item { .feature-item {
background-color: #fefefe; background-color: var(--color-green-pea);
padding: 30px; padding: 40px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1); box-shadow: 0 8px 25px rgba(0,0,0,0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.4s ease, box-shadow 0.4s ease;
border: 1px solid rgba(164, 255, 147, 0.3);
} }
.feature-item:hover { .feature-item:hover {
transform: translateY(-10px); transform: translateY(-15px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15); box-shadow: 0 12px 30px rgba(0,0,0,0.4);
} }
.feature-item img { .feature-item img {
width: 100px; width: 120px;
height: 100px; height: 120px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
margin-bottom: 20px; margin-bottom: 25px;
border: 3px solid #FFD700; border: 4px solid var(--color-mint-green);
box-shadow: 0 0 15px rgba(164, 255, 147, 0.5);
} }
.feature-item h3 { .feature-item h3 {
font-size: 1.5em; font-size: 1.8em;
margin-bottom: 10px; margin-bottom: 15px;
color: #FF6347; color: var(--color-white);
letter-spacing: 1px;
} }
.feature-item p { .feature-item p {
font-size: 0.95em; font-size: 1em;
color: #555; color: var(--color-text-light);
} }
/* Content Sections */ /* Content Sections */
.content-section { .content-section {
padding: 80px 0; padding: 100px 0;
text-align: center; text-align: center;
} }
.content-section.bg-light { .content-section.bg-light {
background-color: #f0f4f8; /* Light blue-grey for contrast */ background-color: var(--color-green-pea);
} }
.content-section h2 { .content-section h2 {
font-size: 2.5em; font-size: 3em;
margin-bottom: 40px; margin-bottom: 50px;
color: var(--color-mint-green);
} }
.content-flex { .content-flex {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 40px; gap: 60px;
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -191,112 +243,126 @@ p {
.content-image { .content-image {
width: 100%; width: 100%;
max-width: 400px; max-width: 450px;
height: auto; height: auto;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1); box-shadow: 0 8px 20px rgba(0,0,0,0.3);
border: 2px solid var(--color-mint-green);
} }
.content-flex div { .content-flex div {
flex: 1; flex: 1;
min-width: 300px; min-width: 350px;
text-align: left; text-align: left;
} }
.content-flex p { .content-flex p {
margin-bottom: 15px; margin-bottom: 20px;
font-size: 1.1em; font-size: 1.15em;
color: #444; color: var(--color-text-light);
} }
/* Contact Section */ /* Contact Section */
.contact-section { .contact-section {
padding: 80px 0; padding: 100px 0;
background-color: #333; /* Dark background */ background-color: var(--color-dark-green);
color: #fff; color: var(--color-white);
text-align: center; text-align: center;
} }
.contact-section h2 { .contact-section h2 {
color: #fff; color: var(--color-mint-green);
font-size: 2.5em; font-size: 3em;
margin-bottom: 30px; margin-bottom: 40px;
} }
.contact-section p { .contact-section p {
font-size: 1.1em; font-size: 1.2em;
margin-bottom: 40px; margin-bottom: 50px;
color: #eee; color: var(--color-text-light);
} }
.contact-form { .contact-form {
max-width: 600px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 25px;
} }
.contact-form input, .contact-form textarea { .contact-form input, .contact-form textarea {
padding: 15px; padding: 18px;
border: none; border: 1px solid rgba(164, 255, 147, 0.3);
border-radius: 5px; border-radius: 5px;
font-family: 'Poppins', sans-serif; font-family: 'Readex Pro', sans-serif;
font-size: 1em; font-size: 1.05em;
background-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.08);
color: #fff; color: var(--color-white);
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
border-color: var(--color-mint-green);
background-color: rgba(255,255,255,0.15);
outline: none;
} }
.contact-form input::placeholder, .contact-form textarea::placeholder { .contact-form input::placeholder, .contact-form textarea::placeholder {
color: #ccc; color: rgba(255,255,255,0.6);
} }
.contact-form textarea { .contact-form textarea {
min-height: 120px; min-height: 150px;
resize: vertical; resize: vertical;
} }
.contact-form .btn { .contact-form .btn {
background-color: #FFD700; /* Gold */ background-color: var(--color-mint-green);
color: #333; color: var(--color-dark-green);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
padding: 15px 30px;
font-size: 1.1em;
} }
.contact-form .btn:hover { .contact-form .btn:hover {
background-color: #E5C100; background-color: var(--color-white);
color: var(--color-green-pea);
} }
/* Footer */ /* Footer */
footer { footer {
background-color: #222; background-color: var(--color-green-pea);
color: #fff; color: var(--color-white);
padding: 30px 0; padding: 40px 0;
text-align: center; text-align: center;
font-size: 0.9em; font-size: 0.95em;
border-top: 1px solid rgba(164, 255, 147, 0.2);
} }
footer .container { footer .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 15px; gap: 20px;
} }
.social-links a { .social-links a {
margin: 0 10px; margin: 0 12px;
display: inline-block; display: inline-block;
} }
.social-links img { .social-links img {
width: 30px; width: 35px;
height: 30px; height: 35px;
border-radius: 50%; border-radius: 50%;
transition: transform 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 2px solid var(--color-mint-green);
} }
.social-links img:hover { .social-links img:hover {
transform: scale(1.1); transform: scale(1.15);
box-shadow: 0 0 15px rgba(164, 255, 147, 0.7);
} }
/* Responsive Design */ /* Responsive Design */
@@ -306,21 +372,25 @@ footer .container {
} }
.navbar ul { .navbar ul {
margin-top: 15px; margin-top: 20px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.navbar ul li { .navbar ul li {
margin: 0 10px 10px 10px; margin: 0 12px 12px 12px;
} }
.hero h1 { .hero h1 {
font-size: 2.5em; font-size: 3em;
} }
.hero p { .hero p {
font-size: 1em; font-size: 1.2em;
}
.features-section h2, .content-section h2, .contact-section h2 {
font-size: 2.5em;
} }
.feature-grid { .feature-grid {
@@ -340,10 +410,54 @@ footer .container {
} }
.content-image { .content-image {
margin-bottom: 20px; margin-bottom: 30px;
} }
.contact-form { .contact-form {
padding: 0 15px; padding: 0 20px;
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 2.2em;
}
.hero p {
font-size: 1em;
}
.navbar .logo {
font-size: 1.5em;
}
.navbar ul li {
margin: 0 8px 8px 8px;
}
.btn {
padding: 10px 20px;
font-size: 0.9em;
}
.features-section h2, .content-section h2, .contact-section h2 {
font-size: 2em;
}
.feature-item {
padding: 30px;
}
.feature-item h3 {
font-size: 1.5em;
}
.content-flex div {
min-width: unset;
}
.contact-form input, .contact-form textarea {
padding: 15px;
font-size: 0.95em;
} }
} }