-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (152 loc) · 6.85 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Slider | Cosas Learning</title>
<!-- CDN Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
<!-- CDN Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Importing the CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<div class="logo"><img src="images/logo.png" alt="Logo"></div>
<div class="heding"><h1>Card Slider</h1></div>
</header>
<div class="hero_section">
<div class="cards_box swiper">
<div class="cards">
<div class="swiper-wrapper">
<!-- Card details -->
<section class="card_details swiper-slide">
<div class="card_img_box">
<img src="images/image1.jpg" class="card_img">
</div>
<div class="card_data">
<h3 class="card_name">Samuel Techton</h3>
<p class="card_description">
Software engineer with a knack for problem-solving,
I thrive on coding challenges and crafting elegant solutions.
</p>
<a href="#" class="card_button">Follow</a>
</div>
</section>
<!-- Repeat similar sections for other cards -->
<section class="card_details swiper-slide">
<div class="card_img_box">
<img src="images/image2.jpg" class="card_img">
</div>
<div class="card_data">
<h3 class="card_name">Emily Codecraft</h3>
<p class="card_description">
Dedicated to making the digital world more user-friendly,
I specialize in UI/UX design and interface optimization.
</p>
<a href="#" class="card_button">Follow</a>
</div>
</section>
<section class="card_details swiper-slide">
<div class="card_img_box">
<img src="images/image3.jpg" class="card_img">
</div>
<div class="card_data">
<h3 class="card_name">David Datawizard</h3>
<p class="card_description">
Passionate about data analysis,
I transform raw data into actionable insights that drive informed decisions.
</p>
<a href="#" class="card_button">Follow</a>
</div>
</section>
<section class="card_details swiper-slide">
<div class="card_img_box">
<img src="images/image4.jpg" class="card_img">
</div>
<div class="card_data">
<h3 class="card_name">Jessica Cyberstar</h3>
<p class="card_description">
In the realm of cybersecurity, I'm your shield against digital threats.
I ensure your online presence stays safe.
</p>
<a href="#" class="card_button">Follow</a>
</div>
</section>
<section class="card_details swiper-slide">
<div class="card_img_box">
<img src="images/image5.jpg" class="card_img">
</div>
<div class="card_data">
<h3 class="card_name">Olivia AIwhisper</h3>
<p class="card_description">
Fascinated by AI, I develop machine learning models
that enhance automation and decision-making.
</p>
<a href="#" class="card_button">Follow</a>
</div>
</section>
<section class="card_details swiper-slide">
<div class="card_img_box">
<img src="images/image6.jpg" class="card_img">
</div>
<div class="card_data">
<h3 class="card_name">Rachel Cloudmaven</h3>
<p class="card_description">
As a cloud computing expert, I help businesses harness the power of the cloud,
ensuring scalability, and cost-efficiency.
</p>
<a href="#" class="card_button">Follow</a>
</div>
</section>
<section class="card_details swiper-slide">
<div class="card_img_box">
<img src="images/image7.jpg" class="card_img">
</div>
<div class="card_data">
<h3 class="card_name">Michael Appsmith</h3>
<p class="card_description">
With a passion for app development,
I bring your mobile and web app ideas to life with functionality.
</p>
<a href="#" class="card_button">Follow</a>
</div>
</section>
<section class="card_details swiper-slide">
<div class="card_img_box">
<img src="images/image8.jpg" class="card_img">
</div>
<div class="card_data">
<h3 class="card_name">Alex Robotech</h3>
<p class="card_description">
In the world of robotics and automation, I create innovative solutions
that improve efficiency.
</p>
<a href="#" class="card_button">Follow</a>
</div>
</section>
</div>
</div>
<!-- Navigation buttons -->
<div class="swiper-button-next">
<i class="fa-solid fa-angle-right"></i>
</div>
<div class="swiper-button-prev">
<i class="fa-solid fa-angle-left"></i>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- CDN Swiper JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<!-- Importing the JavaScript file -->
<script src="script.js"></script>
</body>
</html>