Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <title>&#9825; CL4M0 &dagger; ART &#9825; : Commissions Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cl4m0.com/lightbox.css">
</head>
<body>
<div class="wrapper">
<div class="content">
  <h1>Commission Page Template</h1>
<div class="navigation">
  <div class="card" id="card1"><a href="#"><img src="https://clamverse.neocities.org/coding/images/pela/fishesT.jpeg" class="banner" alt="style 1"></a><div class="label"><a href="#">style 1</a></div></div>
<div class="card" id="card2"><a href="#"><img src="https://clamverse.neocities.org/coding/images/carv/saintjeromeT.jpg" class="banner" alt="style 2"></a><div class="label"><a href="#">style 2</a></div></div>
  <div class="card" id="card3"><a href="#"><img src="https://clamverse.neocities.org/coding/images/sade/coupleT.jpg" class="banner" alt="style 3"></a><div class="label"><a href="#">style 3</a></div></div>
  <div class="card" id="card4"><a href="#"><img src="https://clamverse.neocities.org/coding/images/domi/vestidodegalaT.jpeg" class="banner" alt="style 4"></a><div class="label"><a href="#">style 4</a></div></div>
</div>
  
  <div id="section1" class="box">
    <div class="quad">
      <a href="https://clamverse.neocities.org/coding/images/pela/bucaro.jpg" class="th" data-lightbox="style1" data-title="Búcaro y Mujer (1943)"><img src="https://clamverse.neocities.org/coding/images/pela/bucaroT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/pela/fishes.jpeg" class="th" data-lightbox="style1" data-title="Fishes (1943)"><img src="https://clamverse.neocities.org/coding/images/pela/fishesT.jpeg"></a>
      <a href="https://clamverse.neocities.org/coding/images/pela/stilllifeinred.jpg" class="th" data-lightbox="style1" data-title="Still Life in Red (1938)"><img src="https://clamverse.neocities.org/coding/images/pela/stilllifeinredT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/pela/youngladywithflowers.jpg" class="th" data-lightbox="style1" data-title="Young Lady with Flower (1960)"><img src="https://clamverse.neocities.org/coding/images/pela/youngladywithflowersT.jpg"></a>
    </div>
    <h1>
      type a - $100<br>
      type b - $250
    </h1>
    <h3>
Aenean cursus, enim non faucibus maximus,<br>felis metus tempor mauris, et pellentesque velit dolor at leo.</h3>
    <p>Artist: Amelia Peláez del Casal (1896-1968)</p>
  </div>
  <div id="section2" class="box">
    <div class="quad">
      <a href="https://clamverse.neocities.org/coding/images/carv/christ.jpg" class="th" data-lightbox="style2" data-title="The Entombment of Christ (1603)"><img src="https://clamverse.neocities.org/coding/images/carv/christT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/carv/conversion.jpg" class="th" data-lightbox="style2" title="Conversion on the Way to Damascus (1601)"><img src="https://clamverse.neocities.org/coding/images/carv/conversionT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/carv/davidwithgoliath.jpg" class="th" data-lightbox="style2" data-title="David with the Head of Goliath (1610)"><img src="https://clamverse.neocities.org/coding/images/carv/davidwithgoliathT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/carv/emmaus.jpg" class="th" data-lightbox="style2" data-title="Supper at Emmaus (1601)"><img src="https://clamverse.neocities.org/coding/images/carv/emmausT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/carv/judith.jpg" class="th" data-lightbox="style2" data-title="Judith Beheading Holofernes (1602)"><img src="https://clamverse.neocities.org/coding/images/carv/judithT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/carv/mercy.jpg" class="th" data-lightbox="style2" data-title="The Seven Works of Mercy (1607)"><img src="https://clamverse.neocities.org/coding/images/carv/mercyT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/carv/saintjerome.jpg" class="th" data-lightbox="style2" data-title="Saint Jerome Writing (1606)"><img src="https://clamverse.neocities.org/coding/images/carv/saintjeromeT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/carv/strancis.jpeg" class="th" data-lightbox="style2" data-title="Saint Francis of Assisi in Ecstasy (1595)"><img src="https://clamverse.neocities.org/coding/images/carv/strancisT.jpeg"></a>
    </div>
    <h1>
      type a - $50 usd<br>
      type b - $100 usd<br>
      type c - $200 usd
      </h1>
    <h3>Curabitur in magna et erat fermentum iaculis sit amet a tellus.</h3>
    <p>Artist: Michelangelo Merisi da Caravaggio (1571-1610)</p>
  </div>
  <div id="section3" class="box">
    <div class="quad">
      <a href="https://clamverse.neocities.org/coding/images/sade/aftaabetaaza.jpg" class="th" data-lightbox="style3" data-title="Aftaab-e-Taaza (1985)"><img src="https://clamverse.neocities.org/coding/images/sade/aftaabetaazaT.jpg"></a> 
      <a href="https://clamverse.neocities.org/coding/images/sade/frerehall1.jpg" class="th" data-lightbox="style3" data-title="Frere Hall detail (1986)"><img src="https://clamverse.neocities.org/coding/images/sade/frerehall1T.jpg"></a> 
      <a href="https://clamverse.neocities.org/coding/images/sade/calligraphy.jpg" class="th" data-lightbox="style3" data-title="Frere Hall detail (1986)"><img src="https://clamverse.neocities.org/coding/images/sade/calligraphyT.jpg"></a>  
      <a href="https://clamverse.neocities.org/coding/images/sade/frerehall2.jpg" class="th" data-lightbox="style3" data-title="Frere Hall detail (1986)"><img src="https://clamverse.neocities.org/coding/images/sade/frerehall2T.jpg"></a> 
      <a href="https://clamverse.neocities.org/coding/images/sade/couple.jpg" class="th" data-lightbox="style3" data-title="Couple in an Embrace (1958)"><img src="https://clamverse.neocities.org/coding/images/sade/coupleT.jpg"></a> 
      <a href="https://clamverse.neocities.org/coding/images/sade/stripedskirt.jpeg" class="th" data-lightbox="style3" data-title="Female Nude with a Striped Skirt (1973)"><img src="https://clamverse.neocities.org/coding/images/sade/stripedskirtT.jpeg"></a> 
      <a href="https://clamverse.neocities.org/coding/images/sade/sunrise.jpg" class="th" data-lightbox="style3" data-title="Sunrise (1968)"><img src="https://clamverse.neocities.org/coding/images/sade/sunriseT.jpg"></a> 
      <a href="https://clamverse.neocities.org/coding/images/sade/untitled.jpg" class="th" data-lightbox="style3" data-title="Untitled (1985)"><img src="https://clamverse.neocities.org/coding/images/sade/untitledT.jpg"></a> 
    </div>
    <h1>type a - $75 usd<br>
      type b - $150 usd
    </h1>
    <h3>Quisque ullamcorper et purus et consectetur.<br>Donec magna sapien, fringilla id vehicula a, suscipit nec elit.</h3>
    <p>Artist: Syed Sadequain Ahmed Naqvi (1930-1987)</p>
  </div>
  <div id="section4" class="box">
    <div class="quad">
      <a href="https://clamverse.neocities.org/coding/images/domi/indiamanila.jpg" class="th" data-lightbox="style4" data-title="Una India de Manila (1830)"><img src="https://clamverse.neocities.org/coding/images/domi/indiamanilaT.jpg"></a> 
      <a href="https://clamverse.neocities.org/coding/images/domi/noblemanila.jpg" class="th" data-lightbox="style4" data-title="Un Indio Noble de Manila (1830)"><img src="https://clamverse.neocities.org/coding/images/domi/noblemanilaT.jpg"></a>
      <a href="https://clamverse.neocities.org/coding/images/domi/vestidodegala.jpeg" class="th" data-lightbox="style4" data-title="Una India Visayota, vestido de Gala (1830)"><img src="https://clamverse.neocities.org/coding/images/domi/vestidodegalaT.jpeg"></a>
      <a href="https://clamverse.neocities.org/coding/images/domi/yatteral.jpeg" class="th" data-lightbox="style4" data-title="Un Yatteral de la Provincia de Bissaya (1830)"><img src="https://clamverse.neocities.org/coding/images/domi/yatteralT.jpeg"></a> 
    </div>
    <h1>style 4 - $100 usd</h1>
    <h3>Pellentesque at augue at mi blandit fermentum vitae imperdiet elit. Mauris aliquet mauris interdum mauris mattis porta.</h3>
    <p>Artist: Damián Domingo y Gabor (1796-1834)</p>
    
  </div>
  <div id="home" class="box">
    <div class="col2">
      <a href="#" title="">button left</a>
      <a href="#" target="_blank" title="">button right</a>
    </div>
    <hr>
    <h2>Forward</h2>
    <p>This is a template based on my own personally coded Commissions page (<a href="https://cl4m0.com/commissions" target="_blank">here</a>, for reference) to be studied or used as a base for your own use. You should have a basic knowledge of CSS and HTML to use and customize this. While there is some Script here, it does not require any previous knowledge. (Also this is designed to be responsive to mobile devices/smaller screens!)</p>
    <p>&#9825;</p>
    <p><b><i>I AM NOT A PROFESSIONAL WEB DESIGNER.</i></b> This template was made on request, and I have chosen to make it free to use for all, but I cannot really answer a lot of complex questions.</p>
    <p>&#9825;</p>
    <p>The code provided does <b>not</b> include all of the styling on this page--this is a demonstration based on my own personal page. You are welcome to study this page's formatting in <a href="https://codepen.io/sean666/pen/poKbexz" target="_blank">Codepen</a>, but if you use my own styling as your base I just ask that you tweak it so it isn't a carbon copy of mine LOL</p>
    <hr>
    <h3>Licensing and Additional Scripts</h3>
      <p>My code base is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>. I would appreciate it if you leave my credit in the code (it does not appear in the page) but it is not mandatory.</p>
    <p>&#9825;</p>
    <p>This template is intended to be used with a basic lightbox script. While I have provided a basic lightbox here, it is based on and I recommend using <a href="https://lokeshdhakar.com/projects/lightbox2/" target="_blank">Lightbox2 by Lokesh Dhakar</a> as the basis for your lightbox. You can also just make thumbnails that link to full-size images if that is more your preference.</p>
  <hr>
    <h2>Template Code</h2>
    <p>Because my lightbox script is NOT included, these templates static thumbnails that open the full view in a new tab. I apologize for any difficulty this causes, but you will fair better using a dedicated script such as the one I have linked.</p>
    <p>&#9825;</p>
    <h3>CSS</h3>
    <textarea rows="6">/* 

STYLE INFORMATION - Commissions Page Template
( https://codepen.io/sean666/pen/poKbexz )
( https://clamverse.neocities.org/coding/templates/01/ )

- Template by Sean "Clamo" Amanita -
- CL4M0.com | clamverse.neocities.org -
- asbestosmammal at gmail dot com -
- Credit appreciated but not required! <3 -

- Colors and Styles to Replace -
BACKGROUND COLOR - #000000 (black)
TEXT BODY AND BOX BORDER COLOR - #eeeeee (grey)
LINK/ACCENT COLOR 1 - #ffffff (white)
LINK/ACCENT COLOR 2 - #ccff00 (green)
LINK HOVER COLOR 1 - #ff0000 (red)
LINK HOVER COLOR 2 - #00ddff (blue)
BODY FONT FAMILY - 'Times New Roman'
HEAD/ACCENT FONT FAMILY = 'Brush Script MT'

*/

* {
  padding: 0;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background:#000000;
  color: #eeeeee;
  font-family:'Times New Roman';
  font-size: 1em;
}
a {
  text-decoration: none;
  color: #ffffff;
}
a:hover,
.button:hover { /* 2-tone text shadows on link hover */
  text-shadow: 1px 1px 2px #00ddff, -1px -1px 2px #ff0000;
}
hr {
  height: 1px;
  max-width: 100%;
  border: 1px solid #999999;
  margin: 15px auto;
}
h1 {
  color: #ffffff;
  font-family: "Brush Script MT";
  margin: 15px;
  text-align: center;
  font-size: 2.5em;
}
h2 {
  color: #ffffff;
  font-family: "Brush Script MT";
  margin: 15px;
}
h3  {
  margin: 10px;
  font-size:1.2em;
}
p {
  margin: 5px;
}
p a {
  color:#ccff00;
}
p a:hover {
  color:#ffffff;
}
.wrapper { /* contains the page layout */
  width: 100%;
  margin: auto;
  text-align: center;
  background: none;
}
.content { /* sets the width of the page content and centers */
  margin: auto;
  background: none;
  max-width: 750px;
}
.box { /* contains individual element sections, including the main section and all the expandable options sections. This also is where you style the box border, background, etc */
  width: 500px;
  background: none;
  margin: auto;
  border: 3px double #eeeeee;
  padding: 5px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.quad { /* where the preview thumbnails are contained, allowing additional images to wrap and ensuring it spans the entire width of the box */
  width:100%;
  flex:flex-wrap;
  margin:auto;
}
.th img { /* Styles the preview thumbnails */
  width:calc(25% - 5px);
  border:1px solid #ffffff;
}
.th img:hover { 
  border-top: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: 1px solid #00ddff;
  border-right: 1px solid #00ddff;
}
#section1, #section2, #section3, #section4 { /* hides style sections on load */
  display:none;
}
.col2 { /* container for responsive two-column buttons */
  display:flex-wrap;
  max-width:100%;
}
.col2 a { /* two-column button styles */
  display:inline-block;
  width:45%;
  padding:10px;
  margin:5px 0px;
  font-family:'Brush Script MT';
  font-size:1.5em;
  transition:0.2s ease-in;
}
.col2 a:hover {
  background:#ffffff;
  color:#000000;
}
.navigation { /* container for navigation "style" cards */
  background:none;
  display:flex;
  justify-content:center;
}
.card { /* formatting for individual cards, sized for 4 sections */
  display:block;
  position:relative;
  background:#000000;
  width:120px;
  height:120px;
  margin:5px;
  overflow:hidden;
  border-radius:10px;
  border:1px solid #000000;
}
.card:hover {
  border:1px solid #ffffff;
  box-shadow:-1px -1px 4px #ff0000, 1px 1px 4px #00ddff;
}
.banner { /* formatting for images used for cards, necessary to create the opacity hover effect without additional images or affecting the text */
  height:100%;
  transition:0.3s;
  opacity:.6;
}
.banner:hover {
  opacity:1;
}
.label { /* text overlay for the cards */
  position:absolute;
  background:none;
  width:120px;
  height:120px;
  top:85px;
  text-align:center;
  font-family:'Brush Script MT';
  font-size:1.7em;
  text-shadow:1px 1px 3px #000000, -1px -1px 3px #000000;
}
@media screen and (max-width: 650px) { /* Mobile Layout Adjustments, add or remove as you please. */
  .content {
    width: 100%;
  }
  .box {
    width: 90%;
  }
  .col2 a{
    font-size:1em;
    max-width:40%;
    margin-top:10px;
    border:1px solid #ffffff;
  }
   .banner { /* Turns the style banners and stacks them for better mobile navigation. Top margin offsets the images for a more interesting crop. */
    transform:rotate(90deg);
    height:500px;
    margin:auto;
    margin-top:-200px;
  }
    .card {
    margin:auto;
    margin-bottom:5px;
    width:500px;
    max-width:95%;
    height:50px;
    overflow:hidden;
  }
  .navigation {
    display:block;
    margin:auto;
  }
  .label {
    position:absolute;
    width:100%;
    height:45px;
    background:none;
    z-index:99;
    top:0px;
    font-size:3em;
  }
}</textarea>
    <h3>HTML</h3>
    <textarea rows="6"><head>
  <title>PAGE TITLE</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="content">
  
  <h1> Page Title </h1>

  <div class="navigation">
  <div class="card" id="card1">
    <a href="#"> 
      <img src="STYLE 1 BANNER" class="banner" alt="style 1">
    </a>
    <div class="label">
      <a href="#">style 1</a>
    </div>
  </div>
  <div class="card" id="card2">
    <a href="#">
      <img src="STYLE 2 BANNER" class="banner" alt="style 2">
    </a>
    <div class="label">
      <a href="#">style 2</a>
    </div>
  </div>
  <div class="card" id="card3">
    <a href="#">
      <img src="STYLE 3 BANNER" class="banner" alt="style 3">
    </a>
    <div class="label">
      <a href="#">style 3</a> 
    </div> 
  </div>
  <div class="card" id="card4">
    <a href="#">
      <img src="STYLE 4 BANNER" class="banner" alt="style 4"> 
    </a>
    <div class="label"> 
      <a href="#">style 4</a> 
    </div> 
  </div>
</div>
  
<div id="section1" class="box">
    <div class="quad">
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
    </div>
    <h2> section 1 </h2>
    <h3> description </h3>
    <p> additional information </p>
</div>

<div id="section2" class="box">
    <div class="quad">
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
    </div>
    <h2> section 2 </h2>
    <h3> description </h3>
    <p> additional information </p>
</div>
  
<div id="section3" class="box">
    <div class="quad">
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
    </div>
    <h2> section 3 </h2>
    <h3> description </h3>
    <p> additional information </p>
</div>
  
<div id="section4" class="box">
    <div class="quad">
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
      <a href="FULLSIZE IMAGE" class="th" title="">
        <img src="THUMBNAIL">
      </a>
    </div>
    <h2> section 4 </h2>
    <h3> description </h3>
    <p> additional information </p>
</div>

<div id="home" class="box">
    <div class="col2">
      <a href="LEFT BUTTON LINK" target="_blank" title="LEFT BUTTON"> button left </a>
      <a href="RIGHT BUTTON LINK" target="_blank" title="RIGHT BUTTON"> button right </a>
    </div>
    <hr>
    <h2> home section </h2>
    <h3> subheading </h3>
    <p> 
      paragraph 
    </p>
    <p>&#9825;</p>
</div>
  </div>

  <p>
    <sup>
      footer / copyright / <a href="LINK" title="LINK">link</a>
    </sup>
    </p>
    </div>
  </div>

  <script type="text/javascript" src="https://cl4m0.com/lightbox-plus-jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body></textarea>
    <h3>Script</h3>
    <textarea rows="6">$("#card1").click(function() {
  $("#section1").slideToggle("slow");
})
.click(function() {
  $("#section2").slideUp("");
})
.click(function() {
  $("#section3").slideUp("");
})
.click(function() {
  $("#section4").slideUp("");
});
$("#card2").click(function() {
  $("#section2").slideToggle("slow");
})
.click(function() {
  $("#section1").slideUp("");
})
.click(function() {
  $("#section3").slideUp("");
})
.click(function() {
  $("#section4").slideUp("");
});
$("#card3").click(function() {
  $("#section3").slideToggle("slow");
})
.click(function() {
  $("#section2").slideUp("");
})
.click(function() {
  $("#section1").slideUp("");
})
.click(function() {
  $("#section4").slideUp("");
});
$("#card4").click(function() {
  $("#section4").slideToggle("slow");
})
.click(function() {
  $("#section2").slideUp("");
})
.click(function() {
  $("#section3").slideUp("");
})
.click(function() {
  $("#section1").slideUp("");
})</textarea>
    <hr>
  <h3>additional resources</h3>
  <p><a href="https://lokeshdhakar.com/projects/lightbox2/" target="_blank">Lightbox2 by Lokesh Dhakar</a> - Lightbox (pop-out) script
  <br>
  <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> - Open source fonts with seemless integration
    <br>
  <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> - Icons for navigation, social media, decor, et al.<br>
    <a href="https://www.w3schools.com/" target="_blank">W3Schools</a> - My go-to resource for html/css/javascript help.<br>
    <a href="https://gifcities.org/" target="_blank">GifCities</a> - Geocities .gif archive by the Internet Archive.<br>
    <a href="https://neocities.org" target="_blank">Neocities</a> - Make a free website without ads <i>today!</i>
  </p>
    <div class="logos">
<a href="https://cl4m0.com"><img src="https://cl4m0.com/images/metallogo/cl4m01kWHITEsmooth3d.png" alt="CL4M0 ART"></a>
</div>
  </div>

  <p><span class="note">Created: 13 December 2022 / Last Update: 13 December 2022<br>
    Contact me: <b><i>asbestosmammal @ gmail.com</i></b> /  <a href="https://twitter.com/cl4m0art" target="_blank">Twitter @cl4m0art</a></span>
      </p>
    </div>
  </div>

  <script type="text/javascript" src="https://cl4m0.com/lightbox-plus-jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
              
            
!

CSS

              
                /* This mess is some of my own extra formatting I wanted to get out of the way on this page. You can pick through this if you want, but this is all personal styling and whatnot that doesn't really serve much purpose for the template. Please do not directly link my files; all the fonts and images (minus my logo) are freely available online. */

@font-face { font-family: "UnifrakturMaguntia"; src: url("https://cl4m0.com/files/UnifrakturMaguntia-Regular.ttf"); }
@font-face { font-family:'Crimson'; src:url(https://clamverse.neocities.org/assets/CrimsonText-Regular.ttf); }
@font-face { font-family:'Crimson'; src:url(https://clamverse.neocities.org/assets/CrimsonText-SemiBold.ttf); font-weight:bold; }
@font-face { font-family:'Crimson'; src:url(https://clamverse.neocities.org/assets/CrimsonText-SemiBoldItalic.ttf); font-style:italic; }
@font-face { font-family:'Crimson'; src:url(https://clamverse.neocities.org/assets/CrimsonText-BoldItalic.ttf); font-style:italic; font-weight:bold; }
.logos img { height:100px; }
::selection { color: #000000; background: #eeeeee; }
textarea { width:100%; background:#000000; color:#ffffff; border:1px solid #ffffff; }
.note { display: block; font-size: 0.8em; }

/* This is where the formatting begins, with some small variations from the template I provided for use. */

* {
  padding: 0;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background:#000000;
  color: #eeeeee;
  font-family:'Crimson';
  font-size: 1em;
}
a {
  text-decoration: none;
  color: #ffffff;
}
a:hover,
.button:hover { /* OPTIONAL text shadows on link hover */
  text-shadow: 1px 1px 2px #00ddff, -1px -1px 2px #ff0000;
}
hr {
  height: 1px;
  max-width: 100%;
  border: 1px solid #999999;
  margin: 15px auto;
}
h1 {
  color: #fff;
  text-shadow: 0px 0px 5px #000;
  font-family: "unifrakturmaguntia";
  margin: 15px;
  text-align: center;
  font-size: 2.5em;
}
h2 {
  color: #fff;
  text-shadow: 0px 0px 5px #000;
  font-family: "unifrakturmaguntia";
  margin: 15px;
}
h3  {
  margin: 10px;
  font-size:1.2em;
}
p {
  margin: 5px;
}
p a {
  color:#00ddff;
}
p a:hover {
  color:#ffffff;
}
.wrapper { /* contains the page layout */
  width: 100%;
  margin: auto;
  text-align: center;
  background: none;
}
.content { /* sets the width of the page content and centers */
  margin: auto;
  background: none;
  max-width: 750px;
}
.box { /* contains individual element sections, including the main section and all the expandable options sections. This also is where you style the box border, background, etc */
  width: 500px;
  background: none;
  margin: auto;
  border: 3px double #ffffff;
  padding: 5px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.quad { /* where the lightbox preview thumbnails are contained, allowing additional images to wrap and ensuring it spans the entire width of the box */
  width:100%;
  flex:flex-wrap;
  margin:auto;
}
.th img { /* Styles the lightbox preview thumbnails */
  width:calc(25% - 5px);
  border:1px solid #ffffff;
}
.th img:hover { 
  border-top: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: 1px solid #00ddff;
  border-right: 1px solid #00ddff;
}
#section1, #section2, #section3, #section4 { /* hides style sections on load */
  display:none;
}
.col2 { /* container for responsive two-column buttons */
  display:flex-wrap;
  max-width:100%;
}
.col2 a { /* two-column button styles */
  display:inline-block;
  width:45%;
  padding:10px;
  margin:5px 0px;
  font-family:'UnifrakturMaguntia';
  font-size:1.5em;
  transition:0.2s ease-in;
}
.col2 a:hover {
  background:#ffffff;
  color:#000000;
}
.navigation { /* container for navigation "style" cards */
  background:none;
  display:flex;
  justify-content:center;
}
.card { /* formatting for individual cards, sized for 4 sections */
  display:block;
  position:relative;
  background:#000000;
  width:120px;
  height:120px;
  margin:5px;
  overflow:hidden;
  border-radius:10px;
  border:1px solid #000000;
}
.card:hover {
  border:1px solid #ffffff;
  box-shadow:-1px -1px 4px #ff0000, 1px 1px 4px #00ddff;
}
.banner { /* formatting for images used for cards, necessary to create the opacity hover effect without additional images or affecting the text */
  height:100%;
  transition:0.3s;
  opacity:.6;
}
.banner:hover {
  opacity:1;
}
.label { /* text overlay for the cards */
  position:absolute;
  background:none;
  width:120px;
  height:120px;
  top:85px;
  text-align:center;
  font-family:'UnifrakturMaguntia';
  font-size:1.7em;
  text-shadow:1px 1px 3px #000000, -1px -1px 3px #000000;
}
@media screen and (max-width: 650px) { /* Mobile Layout Adjustments, add or remove as you please. */
  .content {
    width: 100%;
  }
  .box {
    width: 90%;
  }
  .col2 a{
    font-size:1em;
    max-width:40%;
    margin-top:10px;
    border:1px solid #fff;
  }
   .banner { /* Turns the style banners and stacks them for better mobile navigation. Top margin offsets the images for a more interesting crop. */
    transform:rotate(90deg);
    height:500px;
    margin:auto;
    margin-top:-200px;
  }
    .card {
    margin:auto;
    margin-bottom:5px;
    width:500px;
    max-width:95%;
    height:50px;
    overflow:hidden;
  }
  .navigation {
    display:block;
    margin:auto;
  }
  .label {
    position:absolute;
    width:100%;
    height:45px;
    background:none;
    z-index:99;
    top:0px;
    font-size:3em;
  }
}
              
            
!

JS

              
                $("#card1").click(function() {
  $("#section1").slideToggle("slow");
})
.click(function() {
  $("#section2").slideUp("");
})
.click(function() {
  $("#section3").slideUp("");
})
.click(function() {
  $("#section4").slideUp("");
});
$("#card2").click(function() {
  $("#section2").slideToggle("slow");
})
.click(function() {
  $("#section1").slideUp("");
})
.click(function() {
  $("#section3").slideUp("");
})
.click(function() {
  $("#section4").slideUp("");
});
$("#card3").click(function() {
  $("#section3").slideToggle("slow");
})
.click(function() {
  $("#section2").slideUp("");
})
.click(function() {
  $("#section1").slideUp("");
})
.click(function() {
  $("#section4").slideUp("");
});
$("#card4").click(function() {
  $("#section4").slideToggle("slow");
})
.click(function() {
  $("#section2").slideUp("");
})
.click(function() {
  $("#section3").slideUp("");
})
.click(function() {
  $("#section1").slideUp("");
})
              
            
!
999px

Console