Skip to content

Commit 986c574

Browse files
ShamikG17ShamikG17
committed
Update Homepage cards
1 parent 22a1e02 commit 986c574

File tree

2 files changed

+149
-26
lines changed

2 files changed

+149
-26
lines changed

‎css/style.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -914,6 +914,69 @@ body.mobile-nav-active #mobile-nav-toggle {
914914
padding: 0 20px 20px 20px;
915915
}
916916

917+
/* Homepage cards */
918+
919+
.flip-card {
920+
background-color: transparent;
921+
cursor: pointer;
922+
height: 330px;
923+
perspective: 1000px;
924+
}
925+
926+
.flip-card img {
927+
height: 220px;
928+
width: 220px;
929+
border-radius: 120px;
930+
}
931+
932+
.flip-card .ach-name {
933+
font-size: 20px;
934+
padding-top: 10px;
935+
padding-bottom: 0px;
936+
}
937+
938+
.flip-card .blue-text {
939+
color: #00aeda;
940+
}
941+
942+
.flip-card .ach-pos {
943+
color: #000;
944+
font-size: 14px;
945+
}
946+
947+
.flip-card-inner {
948+
position: relative;
949+
padding: 10px 0;
950+
width: 100%;
951+
height: 100%;
952+
text-align: center;
953+
transition: transform 0.8s;
954+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
955+
transform-style: preserve-3d;
956+
}
957+
958+
.flip-card:hover .flip-card-inner {
959+
transform: rotateY(180deg);
960+
}
961+
962+
.flip-card-front, .flip-card-back {
963+
position: absolute;
964+
width: 100%;
965+
height: 100%;
966+
backface-visibility: hidden;
967+
}
968+
969+
.flip-card-back {
970+
display: flex;
971+
flex-direction: column;
972+
justify-content: center;
973+
transform: rotateY(180deg);
974+
}
975+
.flip-card-back p {
976+
margin: 0 10px;
977+
}
978+
979+
/* End Homepage cards */
917980
/*--------------------------------*/
918981

919982

‎index.html‎

Lines changed: 86 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -257,49 +257,73 @@ <h3 class="section-title">About The Cells</h3>
257257
<div class="row">
258258

259259
<div class="col-lg-3 col-md-6 wow fadeInUp">
260-
<div class="img-wrap">
261-
<div class="per-wrap">
262-
<img src="images/art.jpg">
263-
<div>
264-
<h3 class="blue-text ach-name">Art Circle</h3>
265-
<p class="ach-pos">Unleash your artistic side</p>
266-
</div>
267-
</div>
260+
<div class="flip-card">
261+
<div class="flip-card-inner">
262+
<div class="flip-card-front">
263+
<img src="images/art.jpg">
264+
<div>
265+
<h3 class="blue-text ach-name">Art Circle</h3>
266+
<p class="ach-pos">Unleash your artistic side</p>
267+
</div>
268+
</div>
269+
<div class="flip-card-back">
270+
<h1 class="blue-text">Art Circle</h1>
271+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
272+
</div>
268273
</div>
274+
</div>
269275
</div>
270276

271277
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
272-
<div class="img-wrap">
273-
<div class="per-wrap">
278+
<div class="flip-card">
279+
<div class="flip-card-inner">
280+
<div class="flip-card-front">
274281
<img src="images/cpdc.jpg">
275282
<div>
276283
<h3 class="blue-text ach-name">CPDC Cell</h3>
277284
<p class="ach-pos">Develop your personality</p>
278285
</div>
286+
</div>
287+
<div class="flip-card-back">
288+
<h1 class="blue-text">CPDC Cell</h1>
289+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
290+
</div>
279291
</div>
280292
</div>
281293
</div>
282294

283295
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
284-
<div class="img-wrap">
285-
<div class="per-wrap">
296+
<div class="flip-card">
297+
<div class="flip-card-inner">
298+
<div class="flip-card-front">
286299
<img src="images/pdc.jpg">
287300
<div>
288301
<h3 class="blue-text ach-name">PDC Cell</h3>
289302
<p class="ach-pos">Improve your professional skills</p>
290303
</div>
304+
</div>
305+
<div class="flip-card-back">
306+
<h1 class="blue-text">PDC Cell</h1>
307+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
308+
</div>
291309
</div>
292310
</div>
293311
</div>
294312

295313
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
296-
<div class="img-wrap">
297-
<div class="per-wrap">
314+
<div class="flip-card">
315+
<div class="flip-card-inner">
316+
<div class="flip-card-front">
298317
<img src="images/nss.jpg">
299318
<div>
300319
<h3 class="blue-text ach-name">NSS Cell</h3>
301320
<p class="ach-pos">Work towards better society</p>
302321
</div>
322+
</div>
323+
<div class="flip-card-back">
324+
<h1 class="blue-text">NSS Cell</h1>
325+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
326+
</div>
303327
</div>
304328
</div>
305329
</div>
@@ -309,49 +333,73 @@ <h3 class="blue-text ach-name">NSS Cell</h3>
309333
<div class="row" style="padding-top: 20px;">
310334

311335
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
312-
<div class="img-wrap">
313-
<div class="per-wrap">
336+
<div class="flip-card">
337+
<div class="flip-card-inner">
338+
<div class="flip-card-front">
314339
<img src="images/isr.jpg">
315340
<div>
316341
<h3 class="blue-text ach-name">ISR Cell</h3>
317342
<p class="ach-pos">Institution as a social paradise</p>
318343
</div>
344+
</div>
345+
<div class="flip-card-back">
346+
<h1 class="blue-text">ISR Cell</h1>
347+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
348+
</div>
319349
</div>
320350
</div>
321351
</div>
322352

323353
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
324-
<div class="img-wrap">
325-
<div class="per-wrap">
354+
<div class="flip-card">
355+
<div class="flip-card-inner">
356+
<div class="flip-card-front">
326357
<img src="images/higher.jpg">
327358
<div>
328359
<h3 class="blue-text ach-name">Higher Studies Cell</h3>
329360
<p class="ach-pos">Learning never stops</p>
330361
</div>
362+
</div>
363+
<div class="flip-card-back">
364+
<h1 class="blue-text">Higher Studies Cell</h1>
365+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
366+
</div>
331367
</div>
332368
</div>
333369
</div>
334370

335371
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
336-
<div class="img-wrap">
337-
<div class="per-wrap">
372+
<div class="flip-card">
373+
<div class="flip-card-inner">
374+
<div class="flip-card-front">
338375
<img src="images/sports.jpg">
339376
<div>
340377
<h3 class="blue-text ach-name">Sports Cell</h3>
341378
<p class="ach-pos">Enjoy a good game</p>
342379
</div>
380+
</div>
381+
<div class="flip-card-back">
382+
<h1 class="blue-text">Sports Cell</h1>
383+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
384+
</div>
343385
</div>
344386
</div>
345387
</div>
346388

347389
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
348-
<div class="img-wrap">
349-
<div class="per-wrap">
390+
<div class="flip-card">
391+
<div class="flip-card-inner">
392+
<div class="flip-card-front">
350393
<img src="images/grievance.jpg">
351394
<div>
352395
<h3 class="blue-text ach-name">Grievance Cell</h3>
353396
<p class="ach-pos">Sharing is caring</p>
354397
</div>
398+
</div>
399+
<div class="flip-card-back">
400+
<h1 class="blue-text">Grievance Cell</h1>
401+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
402+
</div>
355403
</div>
356404
</div>
357405
</div>
@@ -365,25 +413,37 @@ <h3 class="blue-text ach-name">Grievance Cell</h3>
365413
</div>
366414

367415
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
368-
<div class="img-wrap">
369-
<div class="per-wrap">
416+
<div class="flip-card">
417+
<div class="flip-card-inner">
418+
<div class="flip-card-front">
370419
<img src="images/photography.jpg">
371420
<div>
372421
<h3 class="blue-text ach-name">Photography Cell</h3>
373422
<p class="ach-pos">Change your lens, Change you story</p>
374423
</div>
424+
</div>
425+
<div class="flip-card-back">
426+
<h1 class="blue-text">Photography Cell</h1>
427+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
428+
</div>
375429
</div>
376430
</div>
377431
</div>
378432

379433
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
380-
<div class="img-wrap">
381-
<div class="per-wrap">
434+
<div class="flip-card">
435+
<div class="flip-card-inner">
436+
<div class="flip-card-front">
382437
<img src="images/CCC.jpg">
383438
<div>
384439
<h3 class="blue-text ach-name">Competitive Coding Cell</h3>
385440
<p class="ach-pos">Coding is Essential</p>
386441
</div>
442+
</div>
443+
<div class="flip-card-back">
444+
<h1 class="blue-text">Competitive Coding Cell</h1>
445+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
446+
</div>
387447
</div>
388448
</div>
389449
</div>

0 commit comments

Comments
 (0)