olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added html, no images

Browse Source 
Signed-off-by: olya konstantin <olyakonstantin@ya.ru>
This commit is contained in:
Olga Konstantinova 2023-06-23 15:27:39 +08:00
commit a253277106
1 changed files with 103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
index.html Normal file
View File

@ -0,0 +1,103 @@
<html>
<style>
.wishes {
display: flex;
}
.image-block img {
width: 300px;
height: auto;
}
.image-block {
width: 1000px; /*100px фоточки по три в ряд*/
}
.image-block .image input {
display: none;
}
.image-block:has(.image input:checked)
.image:has(input:not(:checked)) {
opacity: 0.5;
}
.image-block .image:has(input:checked) img {
position: absolute;
top: 150px;
left: 300px;
width: 400px;
height: auto;
z-index:1;
}
/* other image */
.image-block:has(.image input:checked)
.image:has(input:not(:checked))
img {
opacity: 0.5;
}
</style>
<body>
<div class="wishes">
<div>
<h2>for functionality</h2>
<ul>
<li>Add drag n drop
<br>(full page is a drop space)</li>
<li>Add add tags</li>
<li>Add "search" (tag/tags)</li>
<li>Add pick up a photo</li>
<li>...</li>
</ul>
</div>
<div>
<h2>for style</h2>
<ul>
<li>Gallery w 5-6 photos (flex w size) in a row,
<br>wich is nice to scroll down</li>
<li>Arrows to see next/prev photo</li>
<li>Fantom next/prev photos on the background</li>
<li>...</li>
</ul>
</div>
</div>
<div class="image-block">
<label class="image">
<input type="checkbox">
<img src="images/1.JPG">
</label>
<label class="image">
<input type="checkbox">
<img src="images/2.JPG">
</label>
<label class="image">
<input type="checkbox">
<img src="images/3.JPG">
</label>
<label class="image">
<input type="checkbox">
<img src="images/4.JPG">
</label>
<label class="image">
<input type="checkbox">
<img src="images/5.JPG">
</label>
<label class="image">
<input type="checkbox">
<img src="images/6.JPG">
</label>
</div>
</body>
</html>