Theme 11

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme 11</title>

<link href="http://fonts.cdnfonts.com/css/fortyseven-micro-nbp" rel="stylesheet">

<style>

body{
background-color: #aca0ce;
background-image: url('https://i.imgur.com/UWhNN49.jpg');
background-attachment: fixed;
background-repeat: repeat-x;
font-family: 'FortySeven Micro NBP', sans-serif;
font-smooth: never;
}

#container{
width: 625px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#box{
background-color: #bfbfbf;
border: 1px outset #dfdfdf;
padding: 2px 2px 15px 2px;
text-align: center;
}

#header{
margin-bottom: 10px;
background-image: linear-gradient(to right, #755f99, #9E94B3);
color: #fff;
font-size: 10px;
}

#header h1{
margin: 0px;
}

#nav{
margin-bottom: 10px;
font-weight: bold;
color: #9E94B3;
}

#nav ul, li{
display: inline;
list-style-type: none;
padding-left: 0px;
}

a{
text-decoration: none;
color: #755f99;
}

a:visited{
color: #755f99;
}

a:hover{
color: #FFFDFA;
}

#gallerycontainer{
width: 608px;
margin: 0 auto;
}

/** LIGHTBOX MARKUP **/ /* courtesy of Gregory Schier on Codepen */

.lightbox {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1em;
background: rgba(0, 0, 0, 0.8);
}

.lightbox:target{
display: block;
}

.lightbox span{
display: block;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: auto; /** change full image size here **/
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

#credit{
font-size: 15px;
position: fixed;
bottom: 0;
right: 0;
}

</style>

</head>

<body>

<div id="container">

<div id="box">

<!-- HEADER -->
<div id="header"><h1>My Gallery</h1></div>

<!-- LINKS -->
<div id="nav">
<ul>
<li><a href="">Link 1</a> |</li>
<li><a href="">Link 2</a> |</li>
<li><a href="">Link 3</a> |</li>
<li><a href="">Link 4</a> |</li>
<li><a href="">Link 5</a> |</li>
<li><a href="">Link 6</a></li>
</ul>
</div>

<div id="gallerycontainer">

<!-- THUMBNAILS 200x200 -->
<a href="#img1"><img src="https://i.imgur.com/NMarNuq.png"><img></a>
<a href="#img2"><img src="https://i.imgur.com/9fdQTrl.png"><img></a>
<a href="#img3"><img src="https://i.imgur.com/AYD6C35.png"><img></a>
<a href="#img4"><img src="https://i.imgur.com/vWtDT2x.png"><img></a>
<a href="#img5"><img src="https://i.imgur.com/kwLddCZ.png"><img></a>
<a href="#img6"><img src="https://i.imgur.com/tre98GP.png"><img></a>
</div>

</div>

</div>

<!-- FULL SIZE IMAGES -->

<a href="#" class="lightbox" id="img1">
  <span style="background-image: url('https://i.imgur.com/H66KOhD.jpg')">
</span>
</a>

<a href="#" class="lightbox" id="img2">
  <span style="background-image: url('https://i.imgur.com/j0ucmM2.jpg')"></span>
</a>

<a href="#" class="lightbox" id="img3">
  <span style="background-image: url('https://i.imgur.com/t2Xgc2y.jpg')"></span>
</a>

<a href="#" class="lightbox" id="img4">
  <span style="background-image: url('https://i.imgur.com/oTenRsB.jpg')"></span>
</a>

<a href="#" class="lightbox" id="img5">
  <span style="background-image: url('https://i.imgur.com/04RtXqu.jpg')"></span>
</a>

<a href="#" class="lightbox" id="img6">
  <span style="background-image: url('https://i.imgur.com/E9fH9D1.jpg')"></span>
</a>

<div id="credit"><a href="https://repth.neocities.org/index.html">@Repth</a></div>

</body>

</html>