Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ee8d744

Browse files
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>
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)

AltStyle によって変換されたページ (->オリジナル) /