Skip to content

Commit c5f156a

Browse files
ShiveshNandanShiveshNandan
committed
created new UI card
1 parent ff43fd5 commit c5f156a

File tree

2 files changed

+167
-0
lines changed

2 files changed

+167
-0
lines changed

‎New_UI_Card/Index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
<body>
11+
<div class="card">
12+
<div class="content">
13+
<h2 class="title">Tittle for the background</h2>
14+
<p class="copy">
15+
short note about background or anything we want to add. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, officiis cumque odit deleniti tenetur possimus, eligendi praesentium veniam dolor assumenda deserunt!
16+
</p>
17+
<button class="btn">More Info</button>
18+
</div>
19+
</div>
20+
</body>
21+
</html>

‎New_UI_Card/index.css

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
2+
:root {
3+
--d: 700ms;
4+
--e: cubic-bezier(0.19, 1, 0.22, 1);
5+
}
6+
.page-content {
7+
display: flex;
8+
flex-wrap: wrap;
9+
grid-gap: 1.3vw;
10+
padding: 1vw;
11+
justify-content: left;
12+
/* width: 100vw; */
13+
max-width: 1024px;
14+
margin: 0 auto;
15+
}
16+
@media (min-width: 600px) {
17+
.page-content {
18+
grid-template-columns: repeat(2, 1fr);
19+
}
20+
}
21+
@media (min-width: 800px) {
22+
.page-content {
23+
grid-template-columns: repeat(4, 1fr);
24+
}
25+
}
26+
.card {
27+
position: relative;
28+
display: flex;
29+
align-items: flex-end;
30+
overflow: hidden;
31+
padding: 1vw;
32+
margin-bottom: 1vw;
33+
width: 18vw;
34+
height: 25vw !important;
35+
border-radius: 1vw;
36+
text-align: center;
37+
color: whitesmoke;
38+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
39+
}
40+
@media (min-width: 600px) {
41+
.card {
42+
height: 350px;
43+
}
44+
}
45+
.card:before {
46+
content: '';
47+
position: absolute;
48+
top: 0;
49+
left: 0;
50+
width: 100%;
51+
height: 110%;
52+
background-size: cover;
53+
background-position: 0 0;
54+
transition: transform calc(var(--d) * 1.5) var(--e);
55+
pointer-events: none;
56+
}
57+
.card:after {
58+
content: '';
59+
display: block;
60+
position: absolute;
61+
top: 0;
62+
left: 0;
63+
width: 100%;
64+
height: 200%;
65+
pointer-events: none;
66+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.320) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.540) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.790) 100%);
67+
transform: translateY(-50%);
68+
transition: transform calc(var(--d) * 2) var(--e);
69+
}
70+
.card:before {
71+
background-image: url(https://image.winudf.com/v2/image1/Y29tLmZyZXNoZW52aXJvbm1lbnQuY29vbHdhbGxwYXBlcnNoZF9zY3JlZW5fMF8xNTk4OTcwMDU3XzA3MQ/screen-0.jpg?fakeurl=1&type=.webp);
72+
}
73+
.content {
74+
position: relative;
75+
display: flex;
76+
flex-direction: column;
77+
align-items: center;
78+
width: 100%;
79+
padding: 1vw;
80+
transition: transform var(--d) var(--e);
81+
z-index: 1;
82+
}
83+
84+
.title {
85+
font-size: 1.3vw;
86+
font-weight: bold;
87+
line-height: 1.2;
88+
}
89+
.copy {
90+
font-size: 1.125vw;
91+
font-style: italic;
92+
line-height: 1.35;
93+
color: #fcfffa;
94+
}
95+
.btn {
96+
cursor: pointer;
97+
margin-top: 1.5vw;
98+
padding: 0.75vw 1.5vw;
99+
font-size: 0.65vw;
100+
font-weight: bold;
101+
letter-spacing: 0.025vw;
102+
text-transform: uppercase;
103+
color: white;
104+
background-color: black;
105+
border: none;
106+
}
107+
.btn:hover {
108+
background-color: #0d0d0d;
109+
}
110+
111+
@media (hover: hover) and (min-width: 600px) {
112+
.card:after {
113+
transform: translateY(0);
114+
}
115+
.content {
116+
transform: translateY(calc(100% - 4.5rem));
117+
}
118+
.content > *:not(.title) {
119+
opacity: 0;
120+
transform: translateY(1rem);
121+
transition: transform var(--d) var(--e), opacity var(--d) var(--e);
122+
}
123+
.card:hover, .card:focus-within {
124+
align-items: center;
125+
}
126+
.card:hover:before, .card:focus-within:before {
127+
transform: translateY(-4%);
128+
filter: blur(8px);
129+
transition: all 0.7s;
130+
}
131+
.card:hover:after, .card:focus-within:after {
132+
transform: translateY(-50%);
133+
}
134+
.card:hover .content, .card:focus-within .content {
135+
transform: translateY(0);
136+
}
137+
.card:hover .content > *:not(.title), .card:focus-within .content > *:not(.title) {
138+
opacity: 1;
139+
transform: translateY(0);
140+
transition-delay: calc(var(--d) / 8);
141+
}
142+
.card:focus-within:before, .card:focus-within:after, .card:focus-within .content, .card:focus-within .content > *:not(.title) {
143+
transition-duration: 0s;
144+
}
145+
}
146+

0 commit comments

Comments
 (0)