File size: 3,979 Bytes
01c169c 721fd2a eee9b64 721fd2a eee9b64 721fd2a eee9b64 43ebfb6 721fd2a 43ebfb6 eee9b64 43ebfb6 721fd2a eee9b64 31d1f3d |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #1A1A1A;
font-family: 'Noto Sans KR', sans-serif;
}
.slider-container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 70vw;
height: 60vh;
margin: 0 15px;
background-color: #1F2937; /* Tailwind gray-800 */
color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.slide img {
max-width: 200px; /* Placeholder image width */
max-height: 200px; /* Placeholder image height */
}
.slide button {
background-color: #7C3AED; /* Tailwind purple-600 */
color: white;
padding: 10px 20px;
margin-top: 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
}
.slide button:hover {
background-color: #6D28D9; /* Tailwind purple-700 */
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider">
<!-- Slide 1 -->
<div class="slide" id="slide-1">
<div class="text-xl font-semibold text-red-600">tripleS</div>
<div class="text-sm text-red-400">Cream01 First</div>
<p>First</p>
<p class="text-white text-opacity-50 text-xs">101Z-108Z (8 types)</p>
<img src="https://placehold.co/200x200.png?text=Product+Image&fontsize=18" alt="tripleS Cream01 First product packaging with label FIRST Co1 tripleS" />
<p class="text-white mt-2">KRW 4,400</p>
<button>Objekt 구매하기</button>
</div>
<!-- Slide 2 -->
<div class="slide" id="slide-2">
<div class="text-xl font-semibold text-red-600">tripleS</div>
<div class="text-sm text-red-400">Cream01 First</div>
<p>First</p>
<p class="text-white text-opacity-50 text-xs">101Z-108Z (8 types)</p>
<img src="https://placehold.co/200x200.png?text=Product+Image&fontsize=18" alt="tripleS Cream01 First product packaging with label FIRST Co1 tripleS" />
<p class="text-white mt-2">KRW 4,400</p>
<button>Objekt 구매하기</button>
</div>
<!-- Slide 3 -->
<div class="slide" id="slide-3">
<div class="text-xl font-semibold text-red-600">tripleS</div>
<div class="text-sm text-red-400">Cream01 First</div>
<p>First</p>
<p class="text-white text-opacity-50 text-xs">101Z-108Z (8 types)</p>
<img src="https://placehold.co/200x200.png?text=Product+Image&fontsize=18" alt="tripleS Cream01 First product packaging with label FIRST Co1 tripleS" />
<p class="text-white mt-2">KRW 4,400</p>
<button>Objekt 구매하기</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
|