bitstream/uovidiu.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign services section with bold typographic layout and update CTA copy across site

Browse Source
This commit is contained in:
Ovidiu U
2026-03-14 07:18:24 +00:00
parent 484066a80e
commit a4c8912b61
5 changed files with 176 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
css/style.css
View File

@@ -245,51 +245,133 @@ a {
} }
/* ======================================== /* ========================================
SERVICES - GRID BLOCKS SERVICES - LIST ROWS
======================================== */ ======================================== */
.services-grid { .services-section {
display: grid; background: var(--grey-light);
grid-template-columns: repeat(2, 1fr); padding: 3rem 2.5rem 0;
gap: 2rem; margin-bottom: 2rem;
background: transparent;
}
.service-item {
background: var(--black);
padding: 3rem;
border: var(--border-orange);
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: transform 0.2s;
} }
.service-item:hover { .services-section-label {
transform: scale(1.02);
}
.service-num {
font-family: var(--mono); font-family: var(--mono);
font-size: 0.8rem; font-size: 0.8rem;
color: var(--black);
background: var(--accent);
padding: 2px 8px;
display: inline-block;
margin-bottom: 1.5rem;
font-weight: 900;
}
.service-item h3 {
font-family: var(--mono);
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 1rem;
color: var(--accent);
text-transform: uppercase; text-transform: uppercase;
background: var(--black);
color: var(--accent);
padding: 5px 15px;
display: inline-block;
margin-bottom: 2rem;
font-weight: 900;
border: 1px solid rgba(255,255,255,0.15);
} }
.service-item p { .services-heading {
font-family: 'Archivo Black', sans-serif;
font-size: clamp(4rem, 13vw, 13rem);
font-weight: 900;
text-transform: uppercase;
color: #ffffff;
line-height: 0.88;
letter-spacing: -0.02em;
margin-bottom: 3rem;
}
.services-list {
border-top: 1px solid rgba(255,255,255,0.2);
}
.service-row {
display: flex;
align-items: center;
padding: 2.5rem 1rem;
margin: 0 -1rem;
border-bottom: 1px solid rgba(255,255,255,0.2);
cursor: default;
overflow: hidden;
transition: background 0.15s ease;
}
.service-row:hover {
background: var(--black);
}
.service-row-body {
display: flex;
align-items: flex-start;
gap: 1.75rem;
flex: 1;
min-width: 0;
}
.service-row-num {
font-family: var(--mono);
font-size: 1rem; font-size: 1rem;
color: var(--grey-text); font-weight: 700;
color: #ff4d00;
padding-top: 0.6rem;
white-space: nowrap;
flex-shrink: 0;
}
.service-row-content {
flex: 1;
min-width: 0;
}
.service-row-title {
font-family: 'Archivo Black', sans-serif;
font-size: clamp(2.5rem, 6vw, 6rem);
font-weight: 900;
text-transform: uppercase;
color: #ffffff;
line-height: 0.92;
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
transition: color 0.15s ease;
}
.service-row:hover .service-row-title {
color: var(--accent);
}
.service-row-tags {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.service-tag {
font-family: var(--mono);
font-size: 0.7rem;
text-transform: uppercase;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 100px;
padding: 5px 14px;
letter-spacing: 0.06em;
white-space: nowrap;
}
@media (max-width: 768px) {
.services-section {
padding: 2rem 1.5rem 0;
}
.service-row {
padding: 2rem 0;
}
.service-row-num {
padding-top: 0.3rem;
}
.service-row-arrow {
display: none;
}
} }
/* ======================================== /* ========================================

2
includes/cs_footer.php
View File

@@ -4,7 +4,7 @@
<div class="section-content"> <div class="section-content">
<a href="/portfolio" class="cs-back cs-back--lg">← Back to All Work</a> <a href="/portfolio" class="cs-back cs-back--lg">← Back to All Work</a>
<p class="large-text">Got a project in mind?</p> <p class="large-text">Got a project in mind?</p>
<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a> <a href="mailto:hello@uovidiu.com" class="btn">Let's Talk →</a>
</div> </div>
</section> </section>

2
includes/header.php
View File

@@ -7,7 +7,7 @@
<meta name="description" content="<?php echo htmlspecialchars($description); ?>"> <meta name="description" content="<?php echo htmlspecialchars($description); ?>">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;900&family=DM+Sans:wght@400;500&family=Archivo+Black&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<?php if (!empty($extra_css)): ?> <?php if (!empty($extra_css)): ?>
<link rel="stylesheet" href="<?php echo htmlspecialchars($extra_css); ?>"> <link rel="stylesheet" href="<?php echo htmlspecialchars($extra_css); ?>">

81
index.php
View File

@@ -11,7 +11,7 @@ require __DIR__.'/includes/header.php';
<p class="hero-sub">I build web applications that work.<br>PHP, MySQL, clean code, no nonsense.</p> <p class="hero-sub">I build web applications that work.<br>PHP, MySQL, clean code, no nonsense.</p>
<div class="hero-cta"> <div class="hero-cta">
<a href="/portfolio" class="btn">View Work →</a> <a href="/portfolio" class="btn">View Work →</a>
<a href="#contact" class="btn btn-ghost">Get in Touch</a> <a href="#contact" class="btn btn-ghost">Let's Talk</a>
</div> </div>
</header> </header>
@@ -24,29 +24,62 @@ require __DIR__.'/includes/header.php';
</div> </div>
</section> </section>
<section id="services" class="section"> <section id="services" class="services-section">
<div class="section-label">002 — Services</div> <div class="services-section-label">002 — Services</div>
<div class="services-grid"> <h2 class="services-heading">Services</h2>
<div class="service-item"> <div class="services-list">
<span class="service-num">01</span> <div class="service-row">
<h3>Website Design & Development</h3> <div class="service-row-body">
<p>Clean, fast websites that look great on any device. Whether it's a refresh or a brand new site, built to make a good first impression.</p> <span class="service-row-num">(01)</span>
</div> <div class="service-row-content">
<div class="service-item"> <h3 class="service-row-title">Website Design<br>&amp; Development</h3>
<span class="service-num">02</span> <div class="service-row-tags">
<h3>Custom Tools & Systems</h3> <span class="service-tag">Design</span>
<p>Need a booking page, job tracker, or customer portal? I'll build exactly what your business needs — no bloated templates.</p> <span class="service-tag">Development</span>
</div> <span class="service-tag">Responsive</span>
<div class="service-item"> </div>
<span class="service-num">03</span> </div>
<h3>Booking & Scheduling Systems</h3> </div>
<p>Let your customers book online, manage appointments, and cut down on phone tag. Perfect for garages, salons, and service businesses.</p> </div>
</div> <div class="service-row">
<div class="service-item"> <div class="service-row-body">
<span class="service-num">04</span> <span class="service-row-num">(02)</span>
<h3>Ongoing Support & Updates</h3> <div class="service-row-content">
<p>Already got a website that needs some love? I'll tidy it up, speed it up, and keep it running smoothly.</p> <h3 class="service-row-title">Custom Tools<br>&amp; Systems</h3>
</div> <div class="service-row-tags">
<span class="service-tag">PHP</span>
<span class="service-tag">MySQL</span>
<span class="service-tag">Custom Builds</span>
</div>
</div>
</div>
</div>
<div class="service-row">
<div class="service-row-body">
<span class="service-row-num">(03)</span>
<div class="service-row-content">
<h3 class="service-row-title">Booking &amp;<br>Scheduling</h3>
<div class="service-row-tags">
<span class="service-tag">Bookings</span>
<span class="service-tag">Automation</span>
<span class="service-tag">Small Business</span>
</div>
</div>
</div>
</div>
<div class="service-row">
<div class="service-row-body">
<span class="service-row-num">(04)</span>
<div class="service-row-content">
<h3 class="service-row-title">Ongoing Support<br>&amp; Updates</h3>
<div class="service-row-tags">
<span class="service-tag">Maintenance</span>
<span class="service-tag">Performance</span>
<span class="service-tag">Support</span>
</div>
</div>
</div>
</div>
</div> </div>
</section> </section>

2
portfolio.php
View File

@@ -63,7 +63,7 @@ require __DIR__ . '/data/projects.php';
<div class="section-label">002 — Contact</div> <div class="section-label">002 — Contact</div>
<div class="section-content"> <div class="section-content">
<p class="large-text">Got a project in mind?</p> <p class="large-text">Got a project in mind?</p>
<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a> <a href="mailto:hello@uovidiu.com" class="btn">Let's Talk →</a>
</div> </div>
</section> </section>