feat(ui): refactor page structure with section tags, better spacing, and clean cleanup of legacy containers
This commit is contained in:
119
index.html
119
index.html
@@ -69,11 +69,26 @@
|
||||
</div>
|
||||
</header>
|
||||
<div class="d-flex flex-column min-vh-100" style="position: relative;">
|
||||
<div class="container mt-4">
|
||||
<h2>About Us</h2>
|
||||
<p>Welcome to d@n tech! We specialize in creating stunning and efficient websites for businesses of all sizes. Our team of experienced developers is dedicated to delivering high-quality web solutions that meet your unique needs.</p>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="section-padding">
|
||||
<div class="container">
|
||||
<h2>About Us</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<p class="lead mb-4">Welcome to d@n tech! We specialize in creating stunning and efficient websites for businesses of all sizes.</p>
|
||||
<p>Our team of experienced developers is dedicated to delivering high-quality web solutions that meet your unique needs. We believe in code that is as clean as a fresh pour-over and designs that are as rich as a dark roast.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="section-padding section-alt">
|
||||
<div class="container">
|
||||
<h2>Services</h2>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<ul class="list-group skill-bars">
|
||||
<li class="list-group-item skill-item" data-skill="95">
|
||||
<span class="skill-name">Custom Website Development</span>
|
||||
@@ -106,71 +121,99 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-4 d-none d-lg-block text-center opacity-75">
|
||||
<!-- Decorative Icon/Illustration placeholder or just empty space for balance -->
|
||||
<svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
|
||||
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
||||
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
||||
<line x1="6" y1="1" x2="6" y2="4"></line>
|
||||
<line x1="10" y1="1" x2="10" y2="4"></line>
|
||||
<line x1="14" y1="1" x2="14" y2="4"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container mt-4" id="portfolio">
|
||||
<!-- Portfolio Section -->
|
||||
<section id="portfolio" class="section-padding">
|
||||
<div class="container">
|
||||
<h2>Portfolio</h2>
|
||||
<div class="row g-4">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-2">
|
||||
<div class="card">
|
||||
<div class="col-md-6 col-lg-6 mb-2">
|
||||
<div class="card h-100">
|
||||
<img srcset="assets/images/optimized/pcw-400.webp 400w, assets/images/optimized/pcw-800.webp 800w, assets/images/optimized/pcw.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/pcw.webp" class="card-img-top" alt="Pemu Counseling and Wellness" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Pemu Counseling and Wellness</h5>
|
||||
<p class="card-text">Pemu Counseling and Wellness is a comprehensive mental health service provider offering personalized counseling and wellness programs to help individuals achieve their mental health goals.</p>
|
||||
<a href="https://pemucounselingandwellness.com" target="_blank" class="btn btn-primary" aria-label="View Pemu Counseling and Wellness project">View project<span class="visually-hidden"> about Pemu Counseling and Wellness</span></a>
|
||||
<div class="mt-auto">
|
||||
<a href="https://pemucounselingandwellness.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Pemu Counseling and Wellness project">View project<span class="visually-hidden"> about Pemu Counseling and Wellness</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-2">
|
||||
<div class="card">
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-6 mb-2">
|
||||
<div class="card h-100">
|
||||
<img srcset="assets/images/optimized/knphd-400.webp 400w, assets/images/optimized/knphd-800.webp 800w, assets/images/optimized/knphd.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/knphd.webp" class="card-img-top" alt="Kayla Newkirk" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Kayla Newkirk</h5>
|
||||
<p class="card-text">Kayla Newkirk is a PhD candidate specializing in mental health counseling and supervision, dedicated to advancing the field through research and practice.</p>
|
||||
<a href="https://kaylassafe.space" target="_blank" class="btn btn-primary" aria-label="View Kayla Newkirk project">View project<span class="visually-hidden"> about Kayla Newkirk</span></a>
|
||||
<div class="mt-auto">
|
||||
<a href="https://kaylassafe.space" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Kayla Newkirk project">View project<span class="visually-hidden"> about Kayla Newkirk</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-2">
|
||||
<div class="card">
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-6 mb-2">
|
||||
<div class="card h-100">
|
||||
<img srcset="assets/images/optimized/4th-400.webp 400w, assets/images/optimized/4th-800.webp 800w, assets/images/optimized/4th.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/4th.webp" class="card-img-top" alt="4th & Goal" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">4th & Goal</h5>
|
||||
<p class="card-text">4th & Goal is a hardcore band based out of Syracuse, NY, known for their intense performances and powerful music that resonates with fans across the state.</p>
|
||||
<a href="https://4th.hobokenchicken.com" target="_blank" class="btn btn-primary" aria-label="View 4th & Goal project">View project<span class="visually-hidden"> about 4th & Goal</span></a>
|
||||
<div class="mt-auto">
|
||||
<a href="https://4th.hobokenchicken.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View 4th & Goal project">View project<span class="visually-hidden"> about 4th & Goal</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-2">
|
||||
<div class="card">
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-6 mb-2">
|
||||
<div class="card h-100">
|
||||
<img srcset="assets/images/optimized/pha-400.webp 400w, assets/images/optimized/pha-800.webp 800w, assets/images/optimized/pha.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/pha.webp" class="card-img-top" alt="Powerful Healing Arts" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Powerful Healing Arts</h5>
|
||||
<p class="card-text">Powerful Healing Arts is a sanctuary for women seeking to move beyond physical healing into deeper, energetic and spiritual transformation. Discover how shamanic wisdom and energy work can unlock new pathways to healing and personal growth.</p>
|
||||
<a href="https://powerfulhealingarts.com" target="_blank" class="btn btn-primary" aria-label="View Powerful Healing Arts project">View project<span class="visually-hidden"> about Powerful Healing Arts</span></a>
|
||||
<p class="card-text">Powerful Healing Arts is a sanctuary for women seeking to move beyond physical healing into deeper, energetic and spiritual transformation.</p>
|
||||
<div class="mt-auto">
|
||||
<a href="https://powerfulhealingarts.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Powerful Healing Arts project">View project<span class="visually-hidden"> about Powerful Healing Arts</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-2">
|
||||
<div class="card">
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-6 mb-2">
|
||||
<div class="card h-100">
|
||||
<img srcset="assets/images/optimized/dissertationpath-400.webp 400w, assets/images/optimized/dissertationpath-800.webp 800w, assets/images/optimized/dissertationpath.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="assets/images/optimized/dissertationpath.webp" class="card-img-top" alt="DissertationPath" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">DissertationPath</h5>
|
||||
<p class="card-text">DissertationPath is a comprehensive platform designed to help doctoral candidates navigate the dissertation process with expert guidance, resources, and mentorship to ensure academic success.</p>
|
||||
<a href="https://dissertationpath.com" target="_blank" class="btn btn-primary" aria-label="View DissertationPath project">View project<span class="visually-hidden"> about DissertationPath</span></a>
|
||||
<p class="card-text">DissertationPath is a comprehensive platform designed to help doctoral candidates navigate the dissertation process with expert guidance.</p>
|
||||
<div class="mt-auto">
|
||||
<a href="https://dissertationpath.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View DissertationPath project">View project<span class="visually-hidden"> about DissertationPath</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container mt-4">
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="section-padding section-alt">
|
||||
<div class="container">
|
||||
<h2>Testimonials</h2>
|
||||
<div class="row">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card testimonial-card">
|
||||
|
||||
<div class="card testimonial-card h-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text testimonial-excerpt">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision..."</p>
|
||||
<p class="card-text testimonial-full">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision. In addition to bringing my ideas to life with a clean, professional design, he made the entire process enjoyable and easy. His attention to detail, creativity, and technical skills are excellent. As a result of Dustin's work, I now have a website that truly represents my practice. There is no better person to recommend than him!"</p>
|
||||
@@ -180,7 +223,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card testimonial-card">
|
||||
<div class="card testimonial-card h-100">
|
||||
<div class="card-body">
|
||||
<p class="card-text testimonial-excerpt">"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill..."</p>
|
||||
<p class="card-text testimonial-full">"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill and worked from simple examples provided, which translated into a functional and funky-professional website that represents my brand.
|
||||
@@ -193,21 +236,29 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="container mt-4">
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="section-padding">
|
||||
<div class="container">
|
||||
<h2>Contact Us</h2>
|
||||
<div class="card">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 text-center">
|
||||
<div class="card bg-transparent border-0 shadow-none">
|
||||
<div class="card-body">
|
||||
<p class="card-text">For inquiries, please email us at <a href="mailto:info@dustin.coffee">info@dustin.coffee</a></p>
|
||||
<p class="card-text">View your invoices at <a href="https://invoice.dustin.coffee/client" target="_blank">invoice.dustin.coffee</a></p>
|
||||
<p class="lead mb-4">Ready to start your next project? Let's connect over coffee (or email).</p>
|
||||
<a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg mb-3">Send an Email</a>
|
||||
<p class="card-text text-muted mt-3">View your invoices at <a href="https://invoice.dustin.coffee/client" target="_blank" class="text-decoration-underline">invoice.dustin.coffee</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<footer class="bg-dark text-white text-center py-1 mt-5" >
|
||||
<footer class="bg-dark text-white text-center py-5" >
|
||||
|
||||
<p>© <span id="currentYear"></span> d@n tech. All rights reserved.</p>
|
||||
<p><a href="tos.html" class="text-white">Terms of Service</a> | <a href="privacy.html" class="text-white">Privacy Policy</a></p>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user