Skip to content

Commit ee8d744

Browse files
he-is-talhahe-is-talha
committed
Added 15 cards
1 parent 0488527 commit ee8d744

File tree

38 files changed

+3273
-0
lines changed

38 files changed

+3273
-0
lines changed

‎01-Expanding-Cards/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<!-- <link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/> -->
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Talha - Expanding cards</title>
14+
</head>
15+
<body>
16+
<div class="container">
17+
<div
18+
class="panel active"
19+
style="
20+
background-image: url('https://images.unsplash.com/photo-1610212570473-6015f631ae96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
21+
"
22+
>
23+
<h3>Explore the world</h3>
24+
</div>
25+
<div
26+
class="panel"
27+
style="
28+
background-image: url('https://images.unsplash.com/photo-1606838830438-5f380a664a4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
29+
"
30+
>
31+
<h3>Explore the world</h3>
32+
</div>
33+
<div
34+
class="panel"
35+
style="
36+
background-image: url('https://images.unsplash.com/photo-1606059100151-b09b22709477?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80');
37+
"
38+
>
39+
<h3>Explore the world</h3>
40+
</div>
41+
<div
42+
class="panel"
43+
style="
44+
background-image: url('https://images.unsplash.com/photo-1603048675767-6e79ff5b8fc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
45+
"
46+
>
47+
<h3>Explore the world</h3>
48+
</div>
49+
<div
50+
class="panel"
51+
style="
52+
background-image: url('https://images.unsplash.com/photo-1595433502559-d8f05e6a1041?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
53+
"
54+
>
55+
<h3>Explore the world</h3>
56+
</div>
57+
</div>
58+
<script src="script.js"></script>
59+
</body>
60+
</html>

‎01-Expanding-Cards/script.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const panels = document.querySelectorAll(".panel");
2+
3+
panels.forEach((panel) => {
4+
panel.addEventListener("click", () => {
5+
removeActiveClasses();
6+
panel.classList.add("active");
7+
});
8+
});
9+
10+
const removeActiveClasses = () => {
11+
panels.forEach((panel) => {
12+
panel.classList.remove("active");
13+
});
14+
};

‎01-Expanding-Cards/style.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
2+
3+
* {
4+
box-sizing: border-box; /* to avoid width problems if padding */
5+
}
6+
7+
body {
8+
font-family: "Muli", sans-serif;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
height: 100vh;
13+
overflow: hidden; /* to hide scrollbars */
14+
margin: 0;
15+
}
16+
17+
.container {
18+
display: flex;
19+
width: 90vw;
20+
}
21+
22+
.panel {
23+
background-size: auto 100%;
24+
background-position: center;
25+
background-repeat: no-repeat;
26+
height: 80vh;
27+
border-radius: 50px;
28+
color: #fff;
29+
cursor: pointer;
30+
flex: 0.5;
31+
margin: 10px;
32+
position: relative;
33+
transition: flex 0.7s ease-in;
34+
-webkit-transition: all 700ms ease-in;
35+
}
36+
37+
.panel h3 {
38+
font-size: 24px;
39+
position: absolute;
40+
bottom: 20px;
41+
left: 20px;
42+
margin: 0;
43+
opacity: 0;
44+
}
45+
46+
.panel.active {
47+
flex: 5;
48+
}
49+
50+
.panel.active h3 {
51+
opacity: 1;
52+
transition: opacity 0.3s ease-in 0.4s;
53+
}
54+
55+
@media (max-width: 480px) {
56+
.container {
57+
width: 100vw;
58+
}
59+
60+
.panel:nth-of-type(4),
61+
.panel:nth-of-type(5) {
62+
display: none;
63+
}
64+
}

‎02-3d-Card-With-Hover/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Talha - 3D Card Hover Effect</title>
6+
<link rel="stylesheet" href="./style.css" />
7+
</head>
8+
<body>
9+
<!-- partial:index.partial.html -->
10+
<div class="card">
11+
<div class="wrapper">
12+
<img
13+
src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg"
14+
class="cover-image"
15+
/>
16+
</div>
17+
<img
18+
src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png"
19+
class="title"
20+
/>
21+
<img
22+
src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp"
23+
class="character"
24+
/>
25+
</div>
26+
27+
<div class="card">
28+
<div class="wrapper">
29+
<img
30+
src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg"
31+
class="cover-image"
32+
/>
33+
</div>
34+
<img
35+
src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png"
36+
class="title"
37+
/>
38+
<img
39+
src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp"
40+
class="character"
41+
/>
42+
</div>
43+
<!-- partial -->
44+
</body>
45+
</html>

‎02-3d-Card-With-Hover/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:root {
2+
--card-height: 300px;
3+
--card-width: calc(var(--card-height) / 1.5);
4+
}
5+
* {
6+
box-sizing: border-box;
7+
}
8+
body {
9+
width: 100vw;
10+
height: 100vh;
11+
margin: 0;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
background: #191c29;
16+
}
17+
.card {
18+
width: var(--card-width);
19+
height: var(--card-height);
20+
position: relative;
21+
display: flex;
22+
justify-content: center;
23+
align-items: flex-end;
24+
padding: 0 36px;
25+
perspective: 2500px;
26+
margin: 0 50px;
27+
}
28+
29+
.cover-image {
30+
width: 100%;
31+
height: 100%;
32+
object-fit: cover;
33+
}
34+
35+
.wrapper {
36+
transition: all 0.5s;
37+
position: absolute;
38+
width: 100%;
39+
z-index: -1;
40+
}
41+
42+
.card:hover .wrapper {
43+
transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
44+
box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
45+
-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
46+
-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
47+
}
48+
49+
.wrapper::before,
50+
.wrapper::after {
51+
content: "";
52+
opacity: 0;
53+
width: 100%;
54+
height: 80px;
55+
transition: all 0.5s;
56+
position: absolute;
57+
left: 0;
58+
}
59+
.wrapper::before {
60+
top: 0;
61+
height: 100%;
62+
background-image: linear-gradient(
63+
to top,
64+
transparent 46%,
65+
rgba(12, 13, 19, 0.5) 68%,
66+
rgba(12, 13, 19) 97%
67+
);
68+
}
69+
.wrapper::after {
70+
bottom: 0;
71+
opacity: 1;
72+
background-image: linear-gradient(
73+
to bottom,
74+
transparent 46%,
75+
rgba(12, 13, 19, 0.5) 68%,
76+
rgba(12, 13, 19) 97%
77+
);
78+
}
79+
80+
.card:hover .wrapper::before,
81+
.wrapper::after {
82+
opacity: 1;
83+
}
84+
85+
.card:hover .wrapper::after {
86+
height: 120px;
87+
}
88+
.title {
89+
width: 100%;
90+
transition: transform 0.5s;
91+
}
92+
.card:hover .title {
93+
transform: translate3d(0%, -50px, 100px);
94+
}
95+
96+
.character {
97+
width: 100%;
98+
opacity: 0;
99+
transition: all 0.5s;
100+
position: absolute;
101+
z-index: -1;
102+
}
103+
104+
.card:hover .character {
105+
opacity: 1;
106+
transform: translate3d(0%, -30%, 100px);
107+
}

‎03-Creative-Cards/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Talha - Creative Card</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="card">
11+
<section class="imgBox">
12+
<img src="marian-oleksyn-Edv_EEWiB3E-unsplash.jpg" />
13+
</section>
14+
<article class="details">
15+
<h2>Olivia</h2>
16+
</article>
17+
</section>
18+
</body>
19+
</html>

‎03-Creative-Cards/marian-oleksyn-Edv_EEWiB3E-unsplash.jpg‎

591 KB
Loading

‎03-Creative-Cards/style.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
background: linear-gradient(#0093e9, #80d0c7);
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
font-family: sans-serif;
9+
}
10+
11+
.card {
12+
position: relative;
13+
width: 30rem;
14+
height: 30rem;
15+
background: white;
16+
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
17+
}
18+
19+
.card:before,
20+
.card:after {
21+
content: "";
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
width: 100%;
26+
height: 100%;
27+
background: white;
28+
transition: 1s;
29+
z-index: -1;
30+
}
31+
32+
.card:hover:before {
33+
transform: rotate(20deg);
34+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
35+
}
36+
37+
.card:hover:after {
38+
transform: rotate(10deg);
39+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
40+
}
41+
42+
.imgBox {
43+
position: absolute;
44+
top: 10px;
45+
left: 10px;
46+
bottom: 10px;
47+
right: 10px;
48+
background: #222;
49+
transition: 1s;
50+
z-index: 2;
51+
}
52+
53+
img {
54+
position: absolute;
55+
top: 0;
56+
left: 0;
57+
width: 100%;
58+
height: 100%;
59+
object-fit: cover;
60+
}
61+
62+
.card:hover .imgBox {
63+
bottom: 80px;
64+
}
65+
66+
.details {
67+
position: absolute;
68+
left: 10px;
69+
right: 10px;
70+
bottom: 10px;
71+
height: 60px;
72+
text-align: center;
73+
}

0 commit comments

Comments
 (0)