File size: 4,698 Bytes
01c169c 721fd2a eee9b64 721fd2a eee9b64 57b7ffa eee9b64 efe0b2d eee9b64 efe0b2d eee9b64 dbd42f7 eee9b64 31a4e36 eee9b64 31a4e36 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 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 |
<!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);
overflow: hidden; /* ์ถ๊ฐ๋ ์์ฑ */
}
.slide img {
max-width: 100%; /* ์์ ๋ ์์ฑ */
max-height: 30vh; /* ์์ ๋ ์์ฑ, ํ๋ฉด ๋์ด์ ๋ง์ถฐ ์กฐ์ */
}
/* ๋ฐ์ํ ๋์์ธ์ ์ํ ๋ฏธ๋์ด ์ฟผ๋ฆฌ */
@media (max-height: 500px) {
.slide {
height: 50vh;
}
.slide img {
max-height: 20vh;
}
.slide button {
padding: 8px 16px; /* ๋ฒํผ ํฌ๊ธฐ ์กฐ์ */
font-size: 0.8em; /* ํ
์คํธ ํฌ๊ธฐ ์กฐ์ */
}
}
@media (max-height: 400px) {
.slide {
height: 40vh;
}
.slide img {
max-height: 15vh;
}
.slide button {
padding: 6px 12px;
font-size: 0.7em;
}
}
.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>
|