index.htmlstyles.cssscript.js

Copy

1<div class="container swiper">
2  <div class="slider-wrapper">
3    <div class="card-list swiper-wrapper">
4      <div class="card-item swiper-slide">
5        <h2 class="item-title">Exploring the Stars</h2>
6        <p class="item-text">Embark on a journey through the cosmos and discover the mysteries of the universe.</p>
7        <button class="view-button">View</button>
8      </div>
9      <div class="card-item swiper-slide">
10        <h2 class="item-title">The Art of Cooking</h2>
11        <p class="item-text">Delve into the culinary arts and explore recipes that tantalize the taste buds.</p>
12        <button class="view-button">View</button>
13      </div>
14      <div class="card-item swiper-slide">
15        <h2 class="item-title">Digital Innovation</h2>
16        <p class="item-text">Discover the latest trends in technology and how they shape our world today.</p>
17        <button class="view-button">View</button>
18      </div>
19      <div class="card-item swiper-slide">
20        <h2 class="item-title">Nature's Wonders</h2>
21        <p class="item-text">Experience the beauty of nature and its breathtaking landscapes and wildlife.</p>
22        <button class="view-button">View</button>
23      </div>
24      <div class="card-item swiper-slide">
25        <h2 class="item-title">History's Mysteries</h2>
26        <p class="item-text">Uncover the secrets of ancient civilizations and their enduring legacies.</p>
27        <button class="view-button">View</button>
28      </div>
29      <div class="card-item swiper-slide">
30        <h2 class="item-title">The World of Art</h2>
31        <p class="item-text">Explore the diverse world of art, from classical masterpieces to modern marvels.</p>
32        <button class="view-button">View</button>
33      </div>
34    </div>
35    <div class="swiper-pagination"></div>
36    <div class="swiper-button-prev swiper-slide-btn"></div>
37    <div class="swiper-button-next swiper-slide-btn"></div>
38  </div>
39</div>