File size: 4,250 Bytes
01c169c 721fd2a eee9b64 721fd2a eee9b64 57b7ffa eee9b64 efe0b2d eee9b64 efe0b2d eee9b64 dbd42f7 eee9b64 49302b4 eee9b64 721fd2a eee9b64 43ebfb6 721fd2a 43ebfb6 eee9b64 6170d31 eee9b64 6170d31 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 117 118 119 |
<!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: #cccccc;
font-family: 'Noto Sans KR', sans-serif;
background-image: url('paintshopbg2.png'); /* 배경 이미지 추가 */
background-size: cover; /* 이미지가 화면을 꽉 채우도록 설정 */
background-position: center; /* 이미지가 화면 중앙에 위치하도록 설정 */
}
.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: #000; /* 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>
|