chore: finalize about and contact pages, fix stylesheet path, add TODO comments for future improvements
This commit is contained in:
parent
16d93122ca
commit
4f9299e8b2
10
.eleventy.js
10
.eleventy.js
|
|
@ -1,8 +1,8 @@
|
|||
module.exports = function (eleventyConfig) {
|
||||
// Pass through static assets without processing
|
||||
eleventyConfig.addPassthroughCopy("src/images");
|
||||
eleventyConfig.addPassthroughCopy("src/styles");
|
||||
eleventyConfig.addPassthroughCopy("src/scripts");
|
||||
// ✅ Pass through static assets to the root of output
|
||||
eleventyConfig.addPassthroughCopy({ "src/images": "images" });
|
||||
eleventyConfig.addPassthroughCopy({ "src/styles": "styles" });
|
||||
eleventyConfig.addPassthroughCopy({ "src/scripts": "scripts" });
|
||||
|
||||
return {
|
||||
dir: {
|
||||
|
|
@ -11,4 +11,4 @@ module.exports = function (eleventyConfig) {
|
|||
includes: "_includes",
|
||||
},
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@
|
|||
|
||||
{% include "footer.html" %}
|
||||
|
||||
{% if pageScripts %}
|
||||
{% for script in pageScripts %}
|
||||
<script src="{{ script }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<footer>
|
||||
<ul class="social-links">
|
||||
<li><a href="https://linkedin.com/in/dereklseitz" target="_blank">Connect on LinkedIn</a></li>
|
||||
<li><a href="https://git.dsnet.pro/dereklseitz" target="_blank">My Project Repos</a></li>
|
||||
<li class="linkedin"><a href="https://linkedin.com/in/dereklseitz" target="_blank">Connect on LinkedIn</a></li>
|
||||
<li class="gitea"><a href="https://git.dsnet.pro/dereklseitz" target="_blank">My Project Repos</a></li>
|
||||
</ul>
|
||||
|
||||
<nav aria-label="Footer navigation">
|
||||
<ul class="footer-links">
|
||||
<li><a href="#top">Back to Top</a></li>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="demos.html">Demos</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
<li><a href="/demos/">Demos</a></li>
|
||||
<li><a href="/about/#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<p>© 2025, Derek L.Seitz, All rights reserved.</p>
|
||||
<p class="copyright">© 2025, Derek L. Seitz, All rights reserved.</p>
|
||||
|
||||
</footer>
|
||||
|
|
@ -3,10 +3,10 @@
|
|||
<nav class="main-nav">
|
||||
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item nav-logo"><a href="#home">Derek L. Seitz</a></li>
|
||||
<li class="nav-item nav-about"><a href="#about">About</a></li>
|
||||
<li class="nav-item nav-demos"><a href="#demos">Demos</a></li>
|
||||
<li class="nav-item nav-contact"><a href="#contact">Contact</a></li>
|
||||
<li class="nav-item nav-logo"><a href="/">Derek L. Seitz</a></li>
|
||||
<li class="nav-item nav-about"><a href="/about/">About</a></li>
|
||||
<li class="nav-item nav-demos"><a href="/demos/">Demos</a></li>
|
||||
<li class="nav-item nav-contact"><a href="/about/#contact">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,66 @@
|
|||
---
|
||||
layout: base.njk
|
||||
title: About Derek
|
||||
stylesheet: styles/about.css
|
||||
title: "About Derek"
|
||||
stylesheet: /styles/about.css
|
||||
isLandingPage: false
|
||||
pageScripts: "/scripts/contact-form.js"
|
||||
---
|
||||
|
||||
<h1>More About Derek</h1>
|
||||
<h2>Coming Soon!</h2>
|
||||
<section class="about-section" id="bio" role="region" aria-labelledby="about-heading">
|
||||
<h1 id="about-heading">About Derek L. Seitz</h1>
|
||||
|
||||
<p>I’m a freelance developer dedicated to building clean, functional, and accessible web experiences. But beyond the code, I’m someone driven by a deep sense of purpose and a commitment to creating digital solutions that <strong>genuinely</strong> serve people.</p>
|
||||
|
||||
<p>My approach is simple: solve real problems and build with integrity. I believe great websites don’t just look good—they respect users’ time, adapt to diverse needs, and are built on a foundation of honesty and transparency. That’s why I communicate openly with clients, build trust through consistency, and deliver work that is both technically sound and thoughtfully designed.</p>
|
||||
|
||||
<h2>Accessibility is a Core Value</h2>
|
||||
|
||||
<p>Accessibility isn't just a buzzword for me—it’s a core value. From the start of any project, it’s built into my development process. I aim to align my work with the <a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener">Web Content Accessibility Guidelines (WCAG) 2.1 Level AA</a>, and I continuously review my practices to improve usability. By championing accessibility-first development, I ensure my work reflects my values of inclusivity and mutual respect.</p>
|
||||
|
||||
<h2>Driven by Curiosity and Empathy</h2>
|
||||
|
||||
<p>What truly drives me is an insatiable curiosity. I'm a critical thinker with a passion for understanding the world—whether through my work or my personal interests. From earning a recent Bachelor’s degree in Information Technology to conducting research for a master’s program, I’m always looking to grow. I believe this analytical mindset, paired with a strong sense of empathy, helps me not just understand a client’s vision, but also the people and purpose behind it.</p>
|
||||
|
||||
<h2>A Real Partner, Not an Agency</h2>
|
||||
|
||||
<p>I’m not a faceless agency—I’m a collaborative partner. My business is built on shared success and a belief that transparency, empathy, and high standards can coexist. When you work with me, you’re not just hiring a developer. You’re gaining a partner committed to bringing your unique vision to life—<strong>ethically</strong>, <strong>effectively</strong>, and <strong>accessibly</strong>.</p>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="contact" class="contact-section" role="region" aria-labelledby="contact-heading">
|
||||
<h2 id="contact-heading">Don't Hesitate to Reach Out!</h2>
|
||||
<p>A website is often the most powerful marketing tool a business has, so it's normal to have questions. I'm here to answer those questions so you can have peace of mind in enhancing your web presence.</p>
|
||||
|
||||
<form id="contact-form" aria-labelledby="contact-form-heading">
|
||||
<fieldset>
|
||||
<legend id="contact-form-heading">Contact Me</legend>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" placeholder="Your Name" required>
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" placeholder="you@example.com" required>
|
||||
|
||||
<label for="phone">Phone Number:</label>
|
||||
<input type="tel" id="phone" name="phone" placeholder="(123) 456-7890" aria-describedby="phone-help">
|
||||
<small id="phone-help">Optional. Format: (123) 456-7890</small>
|
||||
|
||||
<fieldset>
|
||||
<legend>Preferred Contact Method:</legend>
|
||||
<div>
|
||||
<input type="radio" id="contact-email" name="contact-method" value="email" checked>
|
||||
<label for="contact-email">Email</label>
|
||||
|
||||
<input type="radio" id="contact-phone" name="contact-method" value="phone">
|
||||
<label for="contact-phone">Phone</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
|
||||
|
||||
<button type="submit">Send Message</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,38 @@
|
|||
layout: base.njk
|
||||
title: Contact Derek
|
||||
stylesheet: styles/contact.css
|
||||
isLandingPage: false
|
||||
pageScript: "/scripts/contact-form.js"
|
||||
---
|
||||
|
||||
<h1>Contact Form Coming Soon!</h1>
|
||||
<h1>Contact Me</h1>
|
||||
<p>A website is often the most powerful marketing tool a business has, so it's normal to have questions. I'm here to answer those questions so you can have peace of mind in enhancing your web presence..</p>
|
||||
|
||||
<form id="contact-form">
|
||||
<fieldset>
|
||||
<legend>Contact Me</legend>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" placeholder="Your Name" required>
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" placeholder="you@example.com" required>
|
||||
|
||||
<label for="phone">Phone Number:</label>
|
||||
<input type="tel" id="phone" name="phone" placeholder="(123) 456-7890">
|
||||
|
||||
<label>Preferred Contact Method:</label>
|
||||
<div>
|
||||
<input type="radio" id="contact-email" name="contact-method" value="email" checked>
|
||||
<label for="contact-email">Email</label>
|
||||
|
||||
<input type="radio" id="contact-phone" name="contact-method" value="phone">
|
||||
<label for="contact-phone">Phone</label>
|
||||
</div>
|
||||
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
|
||||
|
||||
<button type="submit">Send Message</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
120
src/index.njk
120
src/index.njk
|
|
@ -2,6 +2,10 @@
|
|||
layout: base.njk
|
||||
title: "Derek L. Seitz - Portfolio"
|
||||
stylesheet: styles/index.css
|
||||
isLandingPage: true
|
||||
pageScripts:
|
||||
- "/scripts/benefits.js"
|
||||
- "/scripts/carousel.js"
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -11,52 +15,54 @@ stylesheet: styles/index.css
|
|||
|
||||
<!-- ↓ Start Main ↓ -->
|
||||
<div id="top"></div>
|
||||
<h1>Grow Your Online Presence with Me, Derek L. Seitz</h1>
|
||||
<p>A great website is often your most powerful sales tool. It's the first impression you make and the cornerstone of your online presence.</p>
|
||||
|
||||
|
||||
<!-- ↓ Start "Benefits" ↓ -->
|
||||
<h2>What a Well-Designed Website Can Do</h2>
|
||||
<p>There are countless benefits to having a professionally developed website. Some of the most impactful may be in areas where your business struggles the most.</p>
|
||||
|
||||
<!--? The .benefits-list list will be a JavaScript feature that cycles through the list of benefits. The list likely needs to be lengthened further, and instead of flashing them one by one, perhaps use an accordion feature as a pop-out for different categories, or even a hover that expands the displayed benefits (tap-to-expand using javaScript for mobile devices)-->
|
||||
|
||||
<div class="benefits-container">
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Grow Your Business</h3>
|
||||
|
||||
<ul class="growth">
|
||||
<li>Attract more visitors</li>
|
||||
<li>Expand your availability</li>
|
||||
<li>Convert visitors into customers</li>
|
||||
<li>Engage with your audience</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Establish Your Brand's Authority</h3>
|
||||
|
||||
<ul class="brand-cred">
|
||||
<li>Share your expertise</li>
|
||||
<li>Build trust and credibility</li>
|
||||
<li>Showcase your products and services</li>
|
||||
<li>Communicate your vision</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Streamline Your Business Operations</h3>
|
||||
|
||||
<ul class="operations">
|
||||
<li>Transform your workflow</li>
|
||||
<li>Provide cost-effective marketing</li>
|
||||
<li>Enhance customer service</li>
|
||||
<li>Improve data analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="intro">
|
||||
<h1>Grow Your Online Presence with Me, <span class="accent-name">Derek L. Seitz</span></h1>
|
||||
<p>A great website is often your most powerful sales tool. It's the first impression you make and the cornerstone of your online presence.</p>
|
||||
</div>
|
||||
<div class="benefits-container">
|
||||
<!-- ↓ Start "Benefits" ↓ -->
|
||||
<h2>What a Well-Designed Website Can Do</h2>
|
||||
<p>There are countless benefits to having a professionally developed website. Some of the most impactful may be in areas where your business struggles the most.</p>
|
||||
|
||||
<!--? The .benefits-list list will be a JavaScript feature that cycles through the list of benefits. The list likely needs to be lengthened further, and instead of flashing them one by one, perhaps use an accordion feature as a pop-out for different categories, or even a hover that expands the displayed benefits (tap-to-expand using javaScript for mobile devices)-->
|
||||
|
||||
|
||||
<div class="benefits-visual">
|
||||
<div class="benefits-card">
|
||||
<h3>Grow Your Business</h3>
|
||||
|
||||
<ul class="growth">
|
||||
<li>Attract more visitors</li>
|
||||
<li>Expand your availability</li>
|
||||
<li>Convert visitors into customers</li>
|
||||
<li>Engage with your audience</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Establish Your Brand's Authority</h3>
|
||||
|
||||
<ul class="brand-cred">
|
||||
<li>Share your expertise</li>
|
||||
<li>Build trust and credibility</li>
|
||||
<li>Showcase your products and services</li>
|
||||
<li>Communicate your vision</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="benefits-card">
|
||||
<h3>Streamline Your Business Operations</h3>
|
||||
|
||||
<ul class="operations">
|
||||
<li>Transform your workflow</li>
|
||||
<li>Provide cost-effective marketing</li>
|
||||
<li>Enhance customer service</li>
|
||||
<li>Improve data analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Tackling these areas yourself can demand a huge amount of your time.</p>
|
||||
<p>Trusting me to focus on getting your website noticed, you can instead focus on what makes your business thrive: the people and communities you serve.</p>
|
||||
|
|
@ -66,7 +72,7 @@ stylesheet: styles/index.css
|
|||
<!--? This section will feature a carousel of services on cards. The carousel will be scrollable, and when the card is clicked or touched, it will expand to provide a clearer description of the service. This will be accomplished with JavaScript-->
|
||||
|
||||
|
||||
<div class="services-container">
|
||||
<div class="carousel-container">
|
||||
<h2>The Ways I Can Help</h2>
|
||||
|
||||
<button class="carousel-button prev-button">❮</button>
|
||||
|
|
@ -109,15 +115,17 @@ stylesheet: styles/index.css
|
|||
|
||||
</div>
|
||||
|
||||
<p>Perhaps you need inspiration... <a href="#demos" class="demos-link"> Explore My Work!</a></p>
|
||||
<div class="cta-section">
|
||||
<p>Perhaps you need inspiration... <a href="/demos/" class="demos-link" target="_blank"> Explore My Work!</a></p>
|
||||
|
||||
<div class="project-steps">
|
||||
<h2>My Project Process</h2>
|
||||
<ol class="steps-list">
|
||||
<li id="li-1">Discovery: We'll begin with a conversation to understand your business, your goals, and your unique challenges. This is where we lay the groundwork for your project.</li>
|
||||
<li id="li-2">Planning: I will create a custom project plan and proposal that outlines the scope, timeline, and investment required to achieve your objectives.</li>
|
||||
<li id="li-3">Execution: Once we're aligned on the plan, I'll build and launch your website, ensuring it delivers on our shared vision.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="project-steps">
|
||||
<h2>My Project Process</h2>
|
||||
<ol class="steps-list">
|
||||
<li id="li-1"><h3>Discovery</h3> We'll begin with a conversation to understand your business, your goals, and your unique challenges. This is where we lay the groundwork for your project.</li>
|
||||
<li id="li-2"><h3>Planning</h3> I will create a custom project plan and proposal that outlines the scope, timeline, and investment required to achieve your objectives.</li>
|
||||
<li id="li-3"><h3>Execution</h3> Once we're aligned on the plan, I'll build and launch your website, ensuring it delivers on our shared vision.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p>Interested in working together? <a href="#contact" class="cta-button">Let's Get Started on a Plan!</a></p>
|
||||
<p>Ready to get started - or just have a few questions first? <a href="/about/#contact" class="cta-button" target="_blank">Let's Talk About How to Grow Your Business Online!</a></p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const benefitsCards = document.querySelectorAll('.benefits-card');
|
||||
|
||||
benefitsCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', () => {
|
||||
const ulElement = card.querySelector('ul');
|
||||
card.style.setProperty('--ul-height', `${ulElement.scrollHeight}px`);
|
||||
card.classList.add('is-expanded');
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.classList.remove('is-expanded');
|
||||
card.style.removeProperty('--ul-height');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,5 +1,151 @@
|
|||
/* about.css */
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
/*? ↓ About Section Styles ↓ */
|
||||
|
||||
.about-section {
|
||||
max-width: 1000px;
|
||||
margin: 60px auto;
|
||||
padding: 0 20px;
|
||||
color: #495057;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.about-section h1,
|
||||
.about-section h2 {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about-section h1 {
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.about-section h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.about-section p {
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.about-section a {
|
||||
color: #2e97be;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.about-section a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*? ↓ Contact Section Styles ↓ */
|
||||
|
||||
.contact-section {
|
||||
max-width: 800px;
|
||||
margin: 80px auto;
|
||||
padding: 0 20px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.contact-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-section p {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/*? ↓ Contact Form Styles ↓ */
|
||||
|
||||
#contact-form {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
#contact-form fieldset {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#contact-form legend {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 25px;
|
||||
color: #2e97be;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#contact-form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#contact-form input,
|
||||
#contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
#contact-form input:focus,
|
||||
#contact-form textarea:focus {
|
||||
border-color: #2e97be;
|
||||
outline: none;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(46, 151, 190, 0.2);
|
||||
}
|
||||
|
||||
#contact-form small {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: #868e96;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#contact-form .radio-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#contact-form .radio-group label {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#contact-form button[type="submit"] {
|
||||
margin-top: 30px;
|
||||
padding: 12px 25px;
|
||||
background-color: #2e97be;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#contact-form button[type="submit"]:hover {
|
||||
background-color: #2781a5;
|
||||
box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,63 +12,137 @@ body {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/*? ↓ Start Header ↓ */
|
||||
/*? ↓ Start Header ↓ */
|
||||
.main-header {
|
||||
background-color: #333; /* Dark background for the header */
|
||||
color: #fff; /* White text color */
|
||||
padding: 10px 20px; /* Add some padding for spacing */
|
||||
background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 10%, #E8F3FF 40%, #1E2A38 100%);
|
||||
color: #495057;
|
||||
padding: 20px 40px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex; /* Use flexbox to align items in a row */
|
||||
justify-content: space-between; /* Space items evenly */
|
||||
align-items: center; /* Vertically center items */
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none; /* Remove default list styling */
|
||||
display: flex; /* Use flexbox to align list items in a row */
|
||||
gap: 20px; /* Add some space between list items */
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
background-color: #2e97be;
|
||||
color: #fff; /* White text color for links */
|
||||
text-decoration: none; /* Remove underline from links */
|
||||
font-weight: bold; /* Make text bold */
|
||||
transition: color 0.3s; /* Smooth color transition on hover */
|
||||
padding: 5px 10px; border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-item a:hover {
|
||||
color: #2e97be;
|
||||
background-color: #fff /* Change link color on hover */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-logo a {
|
||||
font-size: 1.5em; /* Make the logo text larger */
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
color: #2E97BE;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
background-color: transparent;
|
||||
color: #495057;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-item a:hover {
|
||||
color: #ffffff;
|
||||
background-color: #2E97BE;
|
||||
transform: none;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-item a:hover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, #2E97BE, #3498db);
|
||||
border-radius: 10px;
|
||||
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-item a:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
margin-right: 20vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/*? ↓ Start Footer ↓ */
|
||||
|
||||
/*? ↓ Start Footer ↓ */
|
||||
footer {
|
||||
background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 33%, #E8F3FF 66%, #1E2A38 100%);
|
||||
color: #495057;
|
||||
border-top: 1px solid #dee2e6;
|
||||
margin-top: 30px;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex; /* Use flexbox to align items in a row */
|
||||
align-items: center;
|
||||
justify-content: space-between; /* Center the footer links */
|
||||
gap: 20px; /* Add some space between links */
|
||||
margin-top: 20px; /* Add some space above the footer links */
|
||||
width: 75vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
padding: 0;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.external-links {
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center; /* Center the external links */
|
||||
gap: 50px; /* Add some space between links */
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.social-links a,
|
||||
.footer-links a {
|
||||
font-size: 1.1em;
|
||||
display: inline-block;
|
||||
color: #495057;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.social-links a:hover,
|
||||
.footer-links a:hover {
|
||||
color: #2e97be;
|
||||
transform: scale(1.1) translateY(-2px);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin: 20px 0 0;
|
||||
font-size: 0.9em;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
|
@ -1,99 +1,150 @@
|
|||
/* index.css */
|
||||
|
||||
/*? ↓ Start Intro ↓ */
|
||||
|
||||
/*? ↓ Start Benefits Section ↓ */
|
||||
.intro {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.intro h1 .accent-name {
|
||||
color: #2e97be;
|
||||
}
|
||||
|
||||
/*? ↓ Start Benefits Section ↓ */
|
||||
|
||||
.benefits-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 60vw;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 20px;
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.benefits-container div {
|
||||
border: 2px solid darkslategray;
|
||||
.benefits-container h2,
|
||||
.benefits-container p {
|
||||
color: #495057;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.benefits-visual {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
|
||||
.benefits-card {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
padding: 15px 10px 15px 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.benefits-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.benefits-card ul {
|
||||
list-style: none;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.benefits-card.hover ul {
|
||||
max-height: var(--ul-height);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*? ↓ Start Services Container ↓ */
|
||||
|
||||
.service-cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;;
|
||||
}
|
||||
|
||||
.service card {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid darkslategray;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service-card ul {
|
||||
list-style: none;
|
||||
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.benefits-card:hover ul {
|
||||
max-height: var(--ul-height);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
/*? ↓ Start Services Container ↓ */
|
||||
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
margin: 50px auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center; /* Center the carousel vertically */
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.service-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
min-width: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-size: 1.3em;
|
||||
color: #495057;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-shadow: none;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.service-card li {
|
||||
padding: 10px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.service-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.carousel-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(46, 151, 190, 0.8);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
z-index: 1;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.carousel-button:hover {
|
||||
background-color: rgba(46, 151, 190, 1);
|
||||
}
|
||||
|
||||
.prev-button {
|
||||
|
|
@ -102,4 +153,102 @@
|
|||
|
||||
.next-button {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/*? ↓ Start CTA Section ↓ */
|
||||
|
||||
.cta-section {
|
||||
max-width: 1200px;
|
||||
margin: 80px auto;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.cta-section p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.demos-link,
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
padding: 12px 25px;
|
||||
margin-top: 20px;
|
||||
background-color: #2e97be;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
border-radius: 50px;
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.demos-link:hover,
|
||||
.cta-button:hover {
|
||||
background-color: #2781a5;
|
||||
box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2);
|
||||
}
|
||||
|
||||
.project-steps {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.project-steps h2 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
|
||||
.steps-list li {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.steps-list li:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.steps-list li h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #2e97be;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
counter-reset: step-counter;
|
||||
}
|
||||
|
||||
.steps-list li::before {
|
||||
counter-increment: step-counter;
|
||||
content: counter(step-counter);
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #2e97be;
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
Loading…
Reference in New Issue