KBlueLeaf commited on
Commit
42b1eee
·
verified ·
1 Parent(s): 81dab27

Delete temp.md

Browse files
Files changed (1) hide show
  1. temp.md +0 -180
temp.md DELETED
@@ -1,180 +0,0 @@
1
-
2
- <style>
3
- .gallery-container {
4
- position: relative;
5
- width: 100%;
6
- max-width: 800px;
7
- margin: 0 auto;
8
- font-family: Arial, sans-serif;
9
- }
10
-
11
- /* Hide radio buttons */
12
- .gallery-container input[type="radio"] {
13
- display: none;
14
- }
15
-
16
- /* Thumbnail navigation */
17
- .thumbnail-nav {
18
- display: flex;
19
- flex-wrap: wrap;
20
- align-items: center;
21
- justify-content: center;
22
- gap: 8px;
23
- margin-bottom: 20px;
24
- }
25
-
26
- .thumbnail-nav label {
27
- width: 80px;
28
- height: 60px;
29
- border-radius: 8px;
30
- background-color: #B398F5;
31
- background-size: cover;
32
- background-position: center;
33
- cursor: pointer;
34
- border: 3px solid transparent;
35
- transition: all 0.3s ease;
36
- display: block;
37
- }
38
-
39
- .thumbnail-nav label:hover {
40
- border-color: #4C88F5;
41
- transform: scale(1.05);
42
- }
43
-
44
- .gallery-container input[type="radio"]:checked + label {
45
- border-color: #6296F5;
46
- border-width: 4px;
47
- transform: scale(1.1);
48
- }
49
-
50
- /* Main content area */
51
- .content-area {
52
- position: relative;
53
- width: 100%;
54
- min-height: 600px;
55
- border-radius: 10px;
56
- overflow: hidden;
57
- box-shadow: 0 4px 15px rgba(0,0,0,0.1);
58
- }
59
-
60
- /* Individual slide containers */
61
- .slide {
62
- position: absolute;
63
- top: 0;
64
- left: 0;
65
- width: 100%;
66
- height: 100%;
67
- opacity: 0;
68
- visibility: hidden;
69
- transition: opacity 0.5s ease;
70
- background: white;
71
- display: flex;
72
- flex-direction: column;
73
- }
74
-
75
- .slide.active {
76
- opacity: 1;
77
- visibility: visible;
78
- }
79
-
80
- .slide img {
81
- width: 100%;
82
- height: 300px;
83
- object-fit: cover;
84
- border-radius: 10px 10px 0 0;
85
- }
86
-
87
- .slide-content {
88
- padding: 20px;
89
- flex-grow: 1;
90
- }
91
-
92
- .slide-title {
93
- font-size: 1.5em;
94
- font-weight: bold;
95
- margin-bottom: 10px;
96
- color: #333;
97
- }
98
-
99
- .slide-description {
100
- color: #666;
101
- line-height: 1.6;
102
- }
103
-
104
- /* CSS selectors to show active slides */
105
- #slide1:checked ~ .content-area .slide:nth-child(1),
106
- #slide2:checked ~ .content-area .slide:nth-child(2),
107
- #slide3:checked ~ .content-area .slide:nth-child(3) {
108
- opacity: 1;
109
- visibility: visible;
110
- }
111
-
112
- /* Thumbnail background images */
113
- label[for="slide1"] { background-image: url('https://picsum.photos/300/200?random=1'); }
114
- label[for="slide2"] { background-image: url('https://picsum.photos/300/200?random=2'); }
115
- label[for="slide3"] { background-image: url('https://picsum.photos/300/200?random=3'); }
116
-
117
- /* Responsive design */
118
- @media (max-width: 600px) {
119
- .thumbnail-nav label {
120
- width: 60px;
121
- height: 45px;
122
- }
123
-
124
- .slide img {
125
- height: 200px;
126
- }
127
-
128
- .slide-content {
129
- padding: 15px;
130
- }
131
-
132
- .slide-title {
133
- font-size: 1.2em;
134
- }
135
- }
136
- </style>
137
-
138
- <div class="gallery-container">
139
- <input type="radio" id="slide1" name="gallery" checked>
140
- <input type="radio" id="slide2" name="gallery">
141
- <input type="radio" id="slide3" name="gallery">
142
-
143
- <div class="thumbnail-nav">
144
- <label for="slide1"></label>
145
- <label for="slide2"></label>
146
- <label for="slide3"></label>
147
- </div>
148
-
149
- <div class="content-area">
150
- <div class="slide">
151
- <img src="https://picsum.photos/800/300?random=1" alt="Nature Landscape">
152
- <div class="slide-content">
153
- <div class="slide-title">Beautiful Mountain View</div>
154
- <div class="slide-description">
155
- This stunning mountain landscape showcases the raw beauty of nature. The crisp morning air and golden sunlight create a perfect harmony that speaks to the soul of every nature lover.
156
- </div>
157
- </div>
158
- </div>
159
-
160
- <div class="slide">
161
- <img src="https://picsum.photos/800/300?random=2" alt="City Architecture">
162
- <div class="slide-content">
163
- <div class="slide-title">Modern Architecture</div>
164
- <div class="slide-description">
165
- Contemporary urban design meets functional beauty in this architectural masterpiece. The clean lines and innovative use of materials represent the future of sustainable city living.
166
- </div>
167
- </div>
168
- </div>
169
-
170
- <div class="slide">
171
- <img src="https://picsum.photos/800/300?random=3" alt="Ocean Waves">
172
- <div class="slide-content">
173
- <div class="slide-title">Ocean Serenity</div>
174
- <div class="slide-description">
175
- The rhythmic dance of ocean waves against the shore provides a meditative experience. This coastal paradise offers a perfect escape from the hustle and bustle of daily life.
176
- </div>
177
- </div>
178
- </div>
179
-
180
- </div>