Skip to content

Commit 75d8b88

Browse files
Aerospace-progAerospace-prog
committed
feat: Redesign article cards with glassmorphism effect
1 parent be7b7e4 commit 75d8b88

File tree

2 files changed

+55
-29
lines changed

2 files changed

+55
-29
lines changed

‎assets/style/style.css‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,10 @@
4848
body {
4949
font-family: var(--font-family-sans-serif);
5050
line-height: 1.6;
51-
background-color: #f8f9fa;
51+
background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url('../img/hero-blog.jpg') no-repeat center center/cover;
52+
background-attachment: fixed;
5253
color: var(--dark-color);
53-
padding-top: 70px; /* For fixed navbar */
54+
padding-top: 70px;
5455
}
5556

5657
a {
@@ -86,18 +87,43 @@ a:hover {
8687
/* Hero Section */
8788
.hero-section {
8889
padding: 120px 0;
89-
background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url('../img/hero-blog.jpg') no-repeat center center/cover;
90+
/* The background is now on the body, so we can remove it from here or keep it for structure */
91+
background: transparent;
92+
}
93+
94+
.featured {
95+
color: #fff; /* Ensure heading is visible on dark background */
9096
}
9197

9298
/* Article Card */
9399
.article-card {
100+
background: rgba(255, 255, 255, 0.15) !important;
101+
-webkit-backdrop-filter: blur(10px);
102+
backdrop-filter: blur(10px);
103+
border: 1px solid rgba(255, 255, 255, 0.2);
104+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
105+
border-radius: 12px;
94106
transition: transform 0.3s;
95107
}
96108

97109
.article-card:hover {
98110
transform: translateY(-10px);
99111
}
100112

113+
.article-card .card-body {
114+
background: transparent;
115+
}
116+
117+
.article-card .card-title a,
118+
.article-card .card-text {
119+
color: #fff !important;
120+
}
121+
122+
.article-card .card-text.text-muted,
123+
.article-card .card-text small.text-muted {
124+
color: #dcdcdc !important;
125+
}
126+
101127
/* Footer */
102128
.footer-dark {
103129
background-color: var(--dark-color);

‎index.html‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -148,8 +148,8 @@ <h5 class="card-title">
148148
<h2 class="text-center mb-5 featured">Featured Articles</h2>
149149
<div class="row g-4" id="articles-row">
150150
<div class="col-lg-3 col-md-6 article-item">
151-
<div class="card h-100 shadow-sm article-card">
152-
<img src="assets/img/1.png" class="card-img-top" alt="article writing" />
151+
<div class="card h-100 article-card">
152+
<img src="assets/img/1.png" class="card-img-top" alt="articles" />
153153
<div class="card-body d-flex flex-column">
154154
<h5 class="card-title"><a href="blogpost.html">Migrate your Kubernetes (From AKS to EKS). How?</a></h5>
155155
<p class="card-text text-muted">Developer 101</p>
@@ -159,8 +159,8 @@ <h5 class="card-title"><a href="blogpost.html">Migrate your Kubernetes (From AKS
159159
</div>
160160
</div>
161161
<div class="col-lg-3 col-md-6 article-item">
162-
<div class="card h-100 shadow-sm article-card">
163-
<img src="assets/img/2.png" class="card-img-top" alt="people wearing masks" />
162+
<div class="card h-100 article-card">
163+
<img src="assets/img/2.png" class="card-img-top" alt="articles" />
164164
<div class="card-body d-flex flex-column">
165165
<h5 class="card-title"><a href="blogpost.html">Become a Master in Linux. How?</a></h5>
166166
<p class="card-text text-muted">Linux-King 123</p>
@@ -170,8 +170,8 @@ <h5 class="card-title"><a href="blogpost.html">Become a Master in Linux. How?</a
170170
</div>
171171
</div>
172172
<div class="col-lg-3 col-md-6 article-item">
173-
<div class="card h-100 shadow-sm article-card">
174-
<img src="assets/img/1.png" class="card-img-top" alt="article writing" />
173+
<div class="card h-100 article-card">
174+
<img src="assets/img/1.png" class="card-img-top" alt="articles" />
175175
<div class="card-body d-flex flex-column">
176176
<h5 class="card-title"><a href="blogpost.html">The Ultimate guide to Center a Div</a></h5>
177177
<p class="card-text text-muted">WebD68</p>
@@ -181,8 +181,8 @@ <h5 class="card-title"><a href="blogpost.html">The Ultimate guide to Center a Di
181181
</div>
182182
</div>
183183
<div class="col-lg-3 col-md-6 article-item">
184-
<div class="card h-100 shadow-sm article-card">
185-
<img src="assets/img/11.svg" class="card-img-top" alt="workspace" />
184+
<div class="card h-100 article-card">
185+
<img src="assets/img/11.svg" class="card-img-top" alt="articles" />
186186
<div class="card-body d-flex flex-column">
187187
<h5 class="card-title"><a href="blogpost.html">Is HTML a programming language?</a></h5>
188188
<p class="card-text text-muted">Developer MythBuster</p>
@@ -193,8 +193,8 @@ <h5 class="card-title"><a href="blogpost.html">Is HTML a programming language?</
193193
</div>
194194
<!-- duplicate items for pagination testing -->
195195
<div class="col-lg-3 col-md-6 article-item">
196-
<div class="card h-100 shadow-sm article-card">
197-
<img src="assets/img/css.png" class="card-img-top" alt="css" />
196+
<div class="card h-100 article-card">
197+
<img src="assets/img/css.png" class="card-img-top" alt="articles" />
198198
<div class="card-body d-flex flex-column">
199199
<h5 class="card-title"><a href="blogpost.html">Quick CSS Tricks You Should Know</a></h5>
200200
<p class="card-text text-muted">Frontend Tips</p>
@@ -204,8 +204,8 @@ <h5 class="card-title"><a href="blogpost.html">Quick CSS Tricks You Should Know<
204204
</div>
205205
</div>
206206
<div class="col-lg-3 col-md-6 article-item">
207-
<div class="card h-100 shadow-sm article-card">
208-
<img src="assets/img/2.png" class="card-img-top" alt="people wearing masks" />
207+
<div class="card h-100 article-card">
208+
<img src="assets/img/2.png" class="card-img-top" alt="articles" />
209209
<div class="card-body d-flex flex-column">
210210
<h5 class="card-title"><a href="blogpost.html">Importance of DSA</a></h5>
211211
<p class="card-text text-muted">Linux-King 123</p>
@@ -215,8 +215,8 @@ <h5 class="card-title"><a href="blogpost.html">Importance of DSA</a></h5>
215215
</div>
216216
</div>
217217
<div class="col-lg-3 col-md-6 article-item">
218-
<div class="card h-100 shadow-sm article-card">
219-
<img src="assets/img/1.png" class="card-img-top" alt="article writing" />
218+
<div class="card h-100 article-card">
219+
<img src="assets/img/1.png" class="card-img-top" alt="articles" />
220220
<div class="card-body d-flex flex-column">
221221
<h5 class="card-title"><a href="blogpost.html">Coding v/s Programming</a></h5>
222222
<p class="card-text text-muted">WebD68</p>
@@ -227,8 +227,8 @@ <h5 class="card-title"><a href="blogpost.html">Coding v/s Programming</a></h5>
227227
</div>
228228
<!-- Extra Articles for Pagination Testing -->
229229
<div class="col-lg-3 col-md-6 article-item">
230-
<div class="card h-100 shadow-sm article-card">
231-
<img src="assets/img/3.png" class="card-img-top" alt="two women lighting diyas" />
230+
<div class="card h-100 article-card">
231+
<img src="assets/img/3.png" class="card-img-top" alt="articles" />
232232
<div class="card-body d-flex flex-column">
233233
<h5 class="card-title"><a href="blogpost.html">Mastering Git in 2025</a></h5>
234234
<p class="card-text text-muted">CodeWizard</p>
@@ -242,8 +242,8 @@ <h5 class="card-title"><a href="blogpost.html">Mastering Git in 2025</a></h5>
242242
</button>
243243
</div>
244244
<div class="col-lg-3 col-md-6 article-item">
245-
<div class="card h-100 shadow-sm article-card">
246-
<img src="assets/img/1.png" class="card-img-top" alt="article writing" />
245+
<div class="card h-100 article-card">
246+
<img src="assets/img/1.png" class="card-img-top" alt="articles" />
247247
<div class="card-body d-flex flex-column">
248248
<h5 class="card-title"><a href="blogpost.html">10 React Tricks You Must Know</a></h5>
249249
<p class="card-text text-muted">ReactQueen</p>
@@ -253,8 +253,8 @@ <h5 class="card-title"><a href="blogpost.html">10 React Tricks You Must Know</a>
253253
</div>
254254
</div>
255255
<div class="col-lg-3 col-md-6 article-item">
256-
<div class="card h-100 shadow-sm article-card">
257-
<img src="assets/img/2.png" class="card-img-top" alt="people wearing masks" />
256+
<div class="card h-100 article-card">
257+
<img src="assets/img/2.png" class="card-img-top" alt="articles" />
258258
<div class="card-body d-flex flex-column">
259259
<h5 class="card-title"><a href="blogpost.html">Docker Containers Simplified</a></h5>
260260
<p class="card-text text-muted">DevOpsGuru</p>
@@ -264,8 +264,8 @@ <h5 class="card-title"><a href="blogpost.html">Docker Containers Simplified</a><
264264
</div>
265265
</div>
266266
<div class="col-lg-3 col-md-6 article-item">
267-
<div class="card h-100 shadow-sm article-card">
268-
<img src="assets/img/3.png" class="card-img-top" alt="two women lighting diyas" />
267+
<div class="card h-100 article-card">
268+
<img src="assets/img/3.png" class="card-img-top" alt="articles" />
269269
<div class="card-body d-flex flex-column">
270270
<h5 class="card-title"><a href="blogpost.html">Async/Await in JS Explained</a></h5>
271271
<p class="card-text text-muted">JSNinja</p>
@@ -275,8 +275,8 @@ <h5 class="card-title"><a href="blogpost.html">Async/Await in JS Explained</a></
275275
</div>
276276
</div>
277277
<div class="col-lg-3 col-md-6 article-item">
278-
<div class="card h-100 shadow-sm article-card">
279-
<img src="assets/img/4.png" class="card-img-top" alt="person holding mask" />
278+
<div class="card h-100 article-card">
279+
<img src="assets/img/4.png" class="card-img-top" alt="articles" />
280280
<div class="card-body d-flex flex-column">
281281
<h5 class="card-title"><a href="blogpost.html">CSS Grid vs Flexbox</a></h5>
282282
<p class="card-text text-muted">StyleMaster</p>
@@ -286,8 +286,8 @@ <h5 class="card-title"><a href="blogpost.html">CSS Grid vs Flexbox</a></h5>
286286
</div>
287287
</div>
288288
<div class="col-lg-3 col-md-6 article-item">
289-
<div class="card h-100 shadow-sm article-card">
290-
<img src="assets/img/2.png" class="card-img-top" alt="people wearing masks" />
289+
<div class="card h-100 article-card">
290+
<img src="assets/img/2.png" class="card-img-top" alt="articles" />
291291
<div class="card-body d-flex flex-column">
292292
<h5 class="card-title"><a href="blogpost.html">Understanding REST APIs</a></h5>
293293
<p class="card-text text-muted">APIPro</p>

0 commit comments

Comments
 (0)