Skip to content

Commit 6f73feb

Browse files
abstrxtInfinityabstrxtInfinity
committed
foldable card
1 parent 019ab98 commit 6f73feb

2 files changed

Lines changed: 179 additions & 0 deletions

File tree

‎foldableCard/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>FoldableCard</title>
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
10+
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
11+
<link rel="stylesheet" href="./style.css">
12+
</head>
13+
14+
<body>
15+
<div class="top">
16+
<h1>Hover Me!</h1>
17+
<img src="https://i.ibb.co/L8WPydB/unnamed-removebg-preview.png" alt="" srcset="">
18+
</div>
19+
<div class="card">
20+
<div class="imgBox">
21+
<img src="https://d7hftxdivxxvm.cloudfront.net/?resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2Ftld3gmmtrgSi9-jOOYCwMQ%252F2cbd9945ebb5a2069f18c8e82d69bb04.gif&width=600&quality=80"
22+
alt="#Image Not Found!#" />
23+
<img src="https://i.ibb.co/cF3R9Jj/IMG-20200222-164350.jpg" alt="#Image Not Found!#" />
24+
</div>
25+
<div class="details">
26+
<div class="content">
27+
<h2>Anant Verma<br><span>Sophomore||CSE||NITH</span></h2>
28+
<div class="social-icons">
29+
<a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
30+
<a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
31+
<a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
32+
<a href=""><i class="fa fa-github" aria-hidden="true"></i></a>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
38+
39+
</body>
40+
41+
</html>

‎foldableCard/style.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
2+
3+
4+
*{
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: 'Roboto',sans-serif;
9+
}
10+
11+
body{
12+
display: flex;
13+
flex-direction: column;
14+
justify-content: center;
15+
align-items: center;
16+
min-height: 100vh;
17+
background: #FFE11D;
18+
overflow: hidden;
19+
}
20+
.top{
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: center;
24+
align-items: center;
25+
}
26+
.top h1{
27+
font-size: 2.5em;
28+
color: #fff;
29+
padding-bottom: 10px;
30+
text-transform: uppercase;
31+
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
32+
}
33+
.top img{
34+
35+
width: 100px;
36+
height: 100px;
37+
object-fit: contain;
38+
}
39+
40+
.card{
41+
position: relative;
42+
width: 300px;
43+
height: 400px;
44+
background: #fff;
45+
transform-style: preserve-3d;
46+
transform: perspective(1000px);
47+
box-shadow: 10px 20px 40px rgba(0,0,0,0.4);
48+
transition: 1.5s;
49+
}
50+
51+
.card:hover{
52+
transform: translateX(50%);
53+
}
54+
55+
.card .imgBox {
56+
57+
position: relative;
58+
height: 400px;
59+
width: 300px;
60+
z-index: 1;
61+
transform-origin: left;
62+
transform-style: preserve-3d;
63+
background-color: #000;
64+
transition: 1.5s;
65+
}
66+
67+
.card:hover .imgBox{
68+
transform: rotateY(-180deg);
69+
}
70+
71+
.card .imgBox img {
72+
position: absolute;
73+
top: 0;
74+
left: 0;
75+
width: 100%;
76+
height: 100%;
77+
transform-style: preserve-3d;
78+
object-fit: cover;
79+
backface-visibility: hidden;
80+
}
81+
82+
.card .imgBox img:nth-child(2){
83+
transform: rotateY(180deg);
84+
85+
}
86+
.card .details {
87+
position: absolute;
88+
top: 0;
89+
left: 0;
90+
width: 100%;
91+
height: 100%;
92+
padding: 20px;
93+
display: flex;
94+
justify-content: center;
95+
align-items: center;
96+
}
97+
98+
.card .details .content{
99+
display: flex;
100+
justify-content: center;
101+
align-items: center;
102+
flex-direction: column;
103+
104+
}
105+
106+
.card .details .content h2{
107+
text-align: center;
108+
font-weight: 700;
109+
line-height: 1em;
110+
}
111+
.card .details .content h2 span {
112+
color:rgb(0, 183, 255);
113+
font-size: 0.8em;
114+
}
115+
116+
.card .details .content .social-icons {
117+
position: relative;
118+
display: flex;
119+
margin-top: 10px;
120+
}
121+
.card .details .content .social-icons a{
122+
display: inline-block;
123+
width: 35px;
124+
height: 35px;
125+
background: #333;
126+
color: #fff;
127+
display: flex;
128+
justify-content: center;
129+
align-items: center;
130+
text-decoration: none;
131+
margin: 5px;
132+
font-size: 18px;
133+
transition: 0.2s;
134+
135+
}
136+
.card .details .content .social-icons a:hover{
137+
background: rgb(0, 183, 255);
138+
}

0 commit comments

Comments
 (0)