glass on cards
This commit is contained in:
parent
b94565c1d7
commit
f1c6a4b2b4
@ -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);
|
||||
}
|
||||
|
||||
24
index.php
24
index.php
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user