alison/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added fixes to links and lightbox

Browse source
This commit is contained in:
alisonkit 2024-09-04 11:35:24 -07:00
parent 37ddf9050d
commit 09aa61bb13
2 changed files with 72 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
main/index.html
View file

@ -26,14 +26,14 @@
<div id="gallery">
<h2>Gallery</h2>
<div id="photos">
<img src="images/xenia.webp">
<img src="images/niko.webp">
<img src="images/nona.webp">
<img src="images/alisonterra.webp">
<img src="images/sybil.webp">
<img src="images/pueblomagico.webp">
<img src="images/mystfawf.webp">
<img src="images/akautomata.webp">
<a href="#img1"><img src="images/xenia.webp"></a>
<a href="#img2"><img src="images/niko.webp"></a>
<a href="#img3"><img src="images/nona.webp"></a>
<a href="#img4"><img src="images/alisonterra.webp"></a>
<a href="#img5"><img src="images/sybil.webp"></a>
<a href="#img6"><img src="images/pueblomagico.webp"></a>
<a href="#img7"><img src="images/mystfawf.webp"></a>
<a href="#img8"><img src="images/akautomata.webp"></a>
</div>
</div>
<!-- about-->
@ -75,5 +75,40 @@
<a href="https://cd5k.net/tau/">&tau;</a>
</div>
</div> <!-- main -->
<!-- LIGHTBOX -->
<div>
<div class="lightbox" id="img1">
<a href="#_"> <img src="images/xenia.webp" /></a>
<p>Fanart of Xenia</p>
</div>
<div class="lightbox" id="img2">
<a href="#_"> <img src="images/niko.webp" /></a>
<p>Fanart of Niko from Oneshot</p>
</div>
<div class="lightbox" id="img3">
<a href="#_"> <img src="images/nona.webp" /></a>
<p>Fanart of Nona from Gunfire Reborn</p>
</div>
<div class="lightbox" id="img4">
<a href="#_"> <img src="images/alisonterra.webp" /></a>
<p>Alison as Terra from Final Fantasy VI</p>
</div>
<div class="lightbox" id="img5">
<a href="#_"> <img src="images/sybil.webp" /></a>
<p>Fanart of Sybil from Pseudoregalia</p>
</div>
<div class="lightbox" id="img6">
<a href="#_"> <img src="images/pueblomagico.webp" /></a>
<p>A Mexican Town</p>
</div>
<div class="lightbox" id="img7">
<a href="#_"> <img src="images/mystfawf.webp" /></a>
<p>Commission made as a gift</p>
</div>
<div class="lightbox" id="img8">
<a href="#_"> <img src="images/akautomata.webp" /></a>
<p>Alison as a Nier Android</p>
</div>
</div><!-- end lightbox -->
</body>
</html>

29
main/style.css
View file

@ -115,3 +115,32 @@ a{
text-align:center;
font-weight:bold;
}
.lightbox {
background: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 1000;
}
.lightbox:target {
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
right: 0;
top: 0;
}
.lightbox img {
border-radius: 1em;
display: block;
max-height: 80vh;
}
.lightbox p {
font-weight: bold;
text-align: center;
}
.lightbox a {
display: flex;
margin: 4.5%;
text-align: center;
}