-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathindex.html
130 lines (107 loc) · 5.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--=============== REMIXICONS ===============-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css" crossorigin="">
<!--=============== SWIPER CSS ===============-->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Responsive card slider - Bedimcode</title>
</head>
<body>
<section class="container">
<div class="card__container swiper">
<div class="card__content">
<div class="swiper-wrapper">
<article class="card__article swiper-slide">
<div class="card__image">
<img src="assets/img/avatar-1.png" alt="image" class="card__img">
<div class="card__shadow"></div>
</div>
<div class="card__data">
<h3 class="card__name">Kell Dawx</h3>
<p class="card__description">
Passionate about development and design,
I carry out projects at the request of users.
</p>
<a href="#" class="card__button">View More</a>
</div>
</article>
<article class="card__article swiper-slide">
<div class="card__image">
<img src="assets/img/avatar-2.png" alt="image" class="card__img">
<div class="card__shadow"></div>
</div>
<div class="card__data">
<h3 class="card__name">Lotw Fox</h3>
<p class="card__description">
Passionate about development and design,
I carry out projects at the request of users.
</p>
<a href="#" class="card__button">View More</a>
</div>
</article>
<article class="card__article swiper-slide">
<div class="card__image">
<img src="assets/img/avatar-3.png" alt="image" class="card__img">
<div class="card__shadow"></div>
</div>
<div class="card__data">
<h3 class="card__name">Sara Mit</h3>
<p class="card__description">
Passionate about development and design,
I carry out projects at the request of users.
</p>
<a href="#" class="card__button">View More</a>
</div>
</article>
<article class="card__article swiper-slide">
<div class="card__image">
<img src="assets/img/avatar-4.png" alt="image" class="card__img">
<div class="card__shadow"></div>
</div>
<div class="card__data">
<h3 class="card__name">Jenny Wert</h3>
<p class="card__description">
Passionate about development and design,
I carry out projects at the request of users.
</p>
<a href="#" class="card__button">View More</a>
</div>
</article>
<article class="card__article swiper-slide">
<div class="card__image">
<img src="assets/img/avatar-5.png" alt="image" class="card__img">
<div class="card__shadow"></div>
</div>
<div class="card__data">
<h3 class="card__name">Lexa Kin</h3>
<p class="card__description">
Passionate about development and design,
I carry out projects at the request of users.
</p>
<a href="#" class="card__button">View More</a>
</div>
</article>
</div>
</div>
<!-- Navigation buttons -->
<div class="swiper-button-next">
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="swiper-button-prev">
<i class="ri-arrow-left-s-line"></i>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
</section>
<!--=============== SWIPER JS ===============-->
<script src="assets/js/swiper-bundle.min.js"></script>
<!--=============== MAIN JS ===============-->
<script src="assets/js/main.js"></script>
</body>
</html>