Skip to content

Commit 377c76f

Browse files
RakibRahmanRakibRahman
committed
Neumorphism Cards
1 parent c554639 commit 377c76f

File tree

3 files changed

+154
-1
lines changed

3 files changed

+154
-1
lines changed

‎.vscode/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"flexbox",
88
"imgbx",
99
"infopedia",
10-
"inputbx"
10+
"inputbx",
11+
"neumorphism"
1112
],
1213
"C_Cpp.errorSquiggles": "Enabled"
1314
}

‎CSS Flexbox/Projects/neumorphism-card/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Neumorphism Card</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<!-- credit: Online Tutorials (YT) -->
13+
<div class="container">
14+
<div class="card">
15+
<div class="box">
16+
<div class="content">
17+
<h2>01</h2>
18+
<h3>Flash News 01</h3>
19+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa saepe, et quas eaque esse alias
20+
odit vero debitis deleniti accusamus neque optio dolorem omnis soluta dignissimos totam.
21+
Adipisci, doloremque recusandae.</p>
22+
<a href="#">Learn More</a>
23+
</div>
24+
</div>
25+
</div>
26+
<div class="card">
27+
<div class="box">
28+
<div class="content">
29+
<h2>02</h2>
30+
<h3>Flash News 02</h3>
31+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa saepe, et quas eaque esse alias
32+
odit vero debitis deleniti accusamus neque optio dolorem omnis soluta dignissimos totam.
33+
Adipisci, doloremque recusandae.</p>
34+
<a href="#">Learn More</a>
35+
36+
</div>
37+
</div>
38+
</div>
39+
<div class="card">
40+
<div class="box">
41+
<div class="content">
42+
<h2>03</h2>
43+
<h3>Flash News 03</h3>
44+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa saepe, et quas eaque esse alias
45+
odit vero debitis deleniti accusamus neque optio dolorem omnis soluta dignissimos totam.
46+
Adipisci, doloremque recusandae.</p>
47+
<a href="#">Learn More</a>
48+
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
54+
</body>
55+
56+
</html>

‎CSS Flexbox/Projects/neumorphism-card/style.css

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
min-height: 100vh;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
background: #1287a5;
12+
}
13+
.container {
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
flex-wrap: wrap;
18+
max-width: 1200px;
19+
padding: 40px 0;
20+
}
21+
.container .card {
22+
position: relative;
23+
width: 320px;
24+
height: 440px;
25+
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05),
26+
inset -5px -5px 5px rgba(255, 255, 255, 0.5),
27+
5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
28+
margin: 30px;
29+
border-radius: 15px;
30+
}
31+
.container .card .box {
32+
position: absolute;
33+
top: 20px;
34+
right: 20px;
35+
bottom: 20px;
36+
left: 20px;
37+
background: #ebf5fc;
38+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
39+
border-radius: 15px;
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
transition: 0.5s;
44+
}
45+
.container .card:hover .box {
46+
transform: translateY(-50px);
47+
background: linear-gradient(to right, rgb(127, 0, 255), rgb(225, 0, 255));
48+
}
49+
50+
.container .card .box .content {
51+
text-align: center;
52+
padding: 20px;
53+
position: relative;
54+
}
55+
.container .card .box .content h2 {
56+
position: absolute;
57+
top: -80px;
58+
right: 30px;
59+
font-size: 8em;
60+
color: rgba(0, 0, 0, 0.02);
61+
transition: 0.5s;
62+
pointer-events: none;
63+
}
64+
.container .card:hover .box .content h2 {
65+
color: rgba(0, 0, 0, 0.06);
66+
}
67+
.container .card .box .content h3 {
68+
margin: 10px 0;
69+
font-size: 1.1em;
70+
z-index: 1;
71+
transition: 0.5s;
72+
color: #777;
73+
}
74+
.container .card .box .content p {
75+
font-size: 1.1em;
76+
font-weight: 300;
77+
z-index: 1;
78+
transition: 0.5s;
79+
color: #777;
80+
}
81+
.container .card .box .content a {
82+
position: relative;
83+
display: inline-block;
84+
margin-top: 20px;
85+
padding: 8px 20px;
86+
background: lightcoral;
87+
color: whitesmoke;
88+
border-radius: 25px;
89+
text-decoration: none;
90+
font-weight: 400;
91+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
92+
}
93+
94+
.container .card:hover .box .content > * {
95+
color: whitesmoke;
96+
}

0 commit comments

Comments
 (0)