Skip to content

Commit 1dfca7b

Browse files
parthwebdevparthwebdev
committed
Add Cards Part 03
1 parent ffbe529 commit 1dfca7b

File tree

9 files changed

+191
-0
lines changed

9 files changed

+191
-0
lines changed

‎Cards/03/assets/amsterdam.jpg

3.13 MB
Loading

‎Cards/03/assets/barcelona.jpg

81.4 KB
Loading

‎Cards/03/assets/dubai.jpg

1.66 MB
Loading

‎Cards/03/assets/jaipur.jpg

224 KB
Loading

‎Cards/03/assets/macau.jpg

88 KB
Loading

‎Cards/03/assets/rome.jpg

1.03 MB
Loading

‎Cards/03/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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+
<title>Cards 03</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.css" />
8+
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
9+
<link rel="stylesheet" href="./styles.css">
10+
<script src="./script.js" defer></script>
11+
</head>
12+
<body>
13+
<div class="swiper">
14+
<div class="swiper-wrapper">
15+
<div class="swiper-slide">
16+
<div class="slide-image-wrapper">
17+
<img src="./assets/macau.jpg">
18+
</div>
19+
<div class="slide-content">
20+
<h2>Macau</h2>
21+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.</p>
22+
</div>
23+
</div>
24+
<div class="swiper-slide">
25+
<div class="slide-image-wrapper">
26+
<img src="./assets/rome.jpg">
27+
</div>
28+
<div class="slide-content">
29+
<h2>Rome</h2>
30+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.</p>
31+
</div>
32+
</div>
33+
<div class="swiper-slide">
34+
<div class="slide-image-wrapper">
35+
<img src="./assets/jaipur.jpg">
36+
</div>
37+
<div class="slide-content">
38+
<h2>Jaipur</h2>
39+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.</p>
40+
</div>
41+
</div>
42+
<div class="swiper-slide">
43+
<div class="slide-image-wrapper">
44+
<img src="./assets/dubai.jpg">
45+
</div>
46+
<div class="slide-content">
47+
<h2>Dubai</h2>
48+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.</p>
49+
</div>
50+
</div>
51+
<div class="swiper-slide">
52+
<div class="slide-image-wrapper">
53+
<img src="./assets/barcelona.jpg">
54+
</div>
55+
<div class="slide-content">
56+
<h2>Barcelona</h2>
57+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.</p>
58+
</div>
59+
</div>
60+
<div class="swiper-slide">
61+
<div class="slide-image-wrapper">
62+
<img src="./assets/amsterdam.jpg">
63+
</div>
64+
<div class="slide-content">
65+
<h2>Amsterdam</h2>
66+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.</p>
67+
</div>
68+
</div>
69+
</div>
70+
71+
<div class="swiper-pagination"></div>
72+
</div>
73+
</body>
74+
</html>

‎Cards/03/script.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const swiper = new Swiper(".swiper", {
2+
direction: "horizontal",
3+
slidesPerView: 1,
4+
effect: "fade",
5+
loop: true,
6+
speed: 300,
7+
8+
pagination: {
9+
el: ".swiper-pagination",
10+
clickable: true,
11+
},
12+
});

‎Cards/03/styles.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
2+
3+
*,
4+
*::after,
5+
*::before {
6+
box-sizing: border-box;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
11+
body {
12+
font-family: "Montserrat", sans-serif;
13+
min-height: 100vh;
14+
background-image: linear-gradient(
15+
45deg,
16+
rgba(255, 166, 0, 1) 14.7%,
17+
rgba(255, 99, 97, 1) 73%
18+
);
19+
color: #212121;
20+
display: grid;
21+
place-items: center;
22+
}
23+
24+
.swiper {
25+
width: 100%;
26+
max-width: 420px;
27+
height: 100%;
28+
max-height: 360px;
29+
background-color: #f3f6ff;
30+
border-radius: 10px;
31+
position: relative;
32+
cursor: grab;
33+
}
34+
35+
.slide-image-wrapper {
36+
width: 100%;
37+
height: 190px;
38+
overflow: hidden;
39+
}
40+
.slide-image-wrapper > img {
41+
width: 100%;
42+
height: 100%;
43+
display: block;
44+
object-fit: cover;
45+
}
46+
47+
.slide-content {
48+
padding: 20px;
49+
display: flex;
50+
flex-direction: column;
51+
gap: 0.6rem;
52+
}
53+
54+
.slide-content > h2 {
55+
font-size: 22px;
56+
color: #26384e;
57+
}
58+
.slide-content > p {
59+
font-size: 15px;
60+
line-height: 22px;
61+
color: #6080a9;
62+
}
63+
64+
.slide-content > * {
65+
opacity: 0;
66+
translate: 0 20px;
67+
}
68+
69+
.swiper-slide-active > .slide-content > h2 {
70+
transition-delay: 0.1s;
71+
}
72+
.swiper-slide-active > .slide-content > p {
73+
transition-delay: 0.3s;
74+
}
75+
.swiper-slide-active > .slide-content > * {
76+
opacity: 1;
77+
translate: 0 0;
78+
transition: all 0.3s;
79+
}
80+
81+
.swiper-pagination {
82+
position: absolute;
83+
bottom: 8px;
84+
left: 50% !important;
85+
transform: translatex(-50%);
86+
cursor: default;
87+
}
88+
89+
.swiper-pagination-bullet {
90+
width: 8px;
91+
height: 8px;
92+
border-radius: 50%;
93+
opacity: 1;
94+
background: rgba(255, 185, 0, 0.3);
95+
display: inline-block;
96+
margin-right: 8px;
97+
cursor: pointer;
98+
transition: all 0.2s;
99+
}
100+
101+
.swiper-pagination-bullet-active {
102+
background: #ffb200;
103+
width: 20px;
104+
border-radius: 10px;
105+
}

0 commit comments

Comments
 (0)