Delete temp.md
Browse files
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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|