glass on cards

This commit is contained in:
Flatlogic Bot 2025-09-11 13:41:44 +00:00
parent b94565c1d7
commit f1c6a4b2b4
2 changed files with 19 additions and 12 deletions

View File

@ -182,3 +182,10 @@ section {
#footer a:hover {
text-decoration: underline;
}
.frosted-card {
background: rgba(255, 255, 255, 0.4) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}

View File

@ -90,42 +90,42 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
</div>
<div class="row text-center">
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item p-4 bg-white rounded shadow-sm">
<div class="service-item p-4 rounded shadow-sm frosted-card">
<div class="icon mb-3"><i class="bi bi-display"></i></div>
<h4 class="mb-3">Web Design</h4>
<p>Stunning, responsive websites that capture your brand and engage your audience.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item p-4 bg-white rounded shadow-sm">
<div class="service-item p-4 rounded shadow-sm frosted-card">
<div class="icon mb-3"><i class="bi bi-phone"></i></div>
<h4 class="mb-3">App Development</h4>
<p>Intuitive and powerful mobile apps for iOS and Android that your users will love.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item p-4 bg-white rounded shadow-sm">
<div class="service-item p-4 rounded shadow-sm frosted-card">
<div class="icon mb-3"><i class="bi bi-palette"></i></div>
<h4 class="mb-3">Branding</h4>
<p>Creating memorable brand identities that tell your story and connect with customers.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item p-4 bg-white rounded shadow-sm">
<div class="service-item p-4 rounded shadow-sm frosted-card">
<div class="icon mb-3"><i class="bi bi-search"></i></div>
<h4 class="mb-3">SEO</h4>
<p>Climb the search rankings and drive organic traffic with our proven SEO strategies.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item p-4 bg-white rounded shadow-sm">
<div class="service-item p-4 rounded shadow-sm frosted-card">
<div class="icon mb-3"><i class="bi bi-vector-pen"></i></div>
<h4 class="mb-3">UI/UX Design</h4>
<p>User-centric designs that provide seamless and enjoyable digital experiences.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item p-4 bg-white rounded shadow-sm">
<div class="service-item p-4 rounded shadow-sm frosted-card">
<div class="icon mb-3"><i class="bi bi-card-text"></i></div>
<h4 class="mb-3">Content Strategy</h4>
<p>Engaging content that builds authority and converts readers into customers.</p>
@ -143,7 +143,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
</div>
<div class="row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<div class="card h-100 frosted-card">
<img src="https://picsum.photos/seed/work-1/600/400" class="card-img-top" alt="A sleek website design for a corporate client.">
<div class="card-body">
<h5 class="card-title">Corporate Website Redesign</h5>
@ -152,7 +152,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<div class="card h-100 frosted-card">
<img src="https://picsum.photos/seed/work-2/600/400" class="card-img-top" alt="A vibrant mobile app interface for a startup.">
<div class="card-body">
<h5 class="card-title">E-commerce Mobile App</h5>
@ -161,7 +161,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<div class="card h-100 frosted-card">
<img src="https://picsum.photos/seed/work-3/600/400" class="card-img-top" alt="A complete branding package with logos and mockups.">
<div class="card-body">
<h5 class="card-title">Startup Branding Package</h5>
@ -181,7 +181,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
</div>
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card h-100 frosted-card">
<div class="card-body text-center">
<img src="https://picsum.photos/seed/avatar-1/96/96" class="rounded-circle mb-3" alt="Avatar of a satisfied client.">
<p class="fst-italic">"PixelForge transformed our online presence. Their attention to detail and creative vision is second to none."</p>
@ -191,7 +191,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card h-100 frosted-card">
<div class="card-body text-center">
<img src="https://picsum.photos/seed/avatar-2/96/96" class="rounded-circle mb-3" alt="Avatar of a happy customer.">
<p class="fst-italic">"The mobile app they developed exceeded all our expectations. Our users love it!"</p>
@ -201,7 +201,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card h-100 frosted-card">
<div class="card-body text-center">
<img src="https://picsum.photos/seed/avatar-3/96/96" class="rounded-circle mb-3" alt="Avatar of a project partner.">
<p class="fst-italic">"Working with PixelForge was a seamless experience. They are true professionals and masters of their craft."</p>