type a - $100
type b - $250

Aenean cursus, enim non faucibus maximus,
felis metus tempor mauris, et pellentesque velit dolor at leo.

Artist: Amelia Peláez del Casal (1896-1968)

type a - $50 usd
type b - $100 usd
type c - $200 usd

Curabitur in magna et erat fermentum iaculis sit amet a tellus.

Artist: Michelangelo Merisi da Caravaggio (1571-1610)

type a - $75 usd
type b - $150 usd

Quisque ullamcorper et purus et consectetur.
Donec magna sapien, fringilla id vehicula a, suscipit nec elit.

Artist: Syed Sadequain Ahmed Naqvi (1930-1987)

style 4 - $100 usd

Pellentesque at augue at mi blandit fermentum vitae imperdiet elit. Mauris aliquet mauris interdum mauris mattis porta.

Artist: Damián Domingo y Gabor (1796-1834)

button left button right

Forward

This is a template based on my own personally coded Commissions page (here, 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!)

♡

I AM NOT A PROFESSIONAL WEB DESIGNER. 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.

♡

The code provided does not 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 Codepen, 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

Licensing and Additional Scripts

My code base is licensed under Creative Commons Attribution-ShareAlike 4.0 International License. I would appreciate it if you leave my credit in the code (it does not appear in the page) but it is not mandatory.

♡

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 Lightbox2 by Lokesh Dhakar as the basis for your lightbox. You can also just make thumbnails that link to full-size images if that is more your preference.

Template Code

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.

♡

CSS

/*

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;
  }
}

HTML

<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>♡</p>
</div>
  </div>

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

Script

additional resources

Lightbox2 by Lokesh Dhakar - Lightbox (pop-out) script
Google Fonts - Open source fonts with seemless integration
Font Awesome - Icons for navigation, social media, decor, et al.
W3Schools - My go-to resource for html/css/javascript help.
GifCities - Geocities .gif archive by the Internet Archive.
Neocities - Make a free website without ads today!

Commission Page Template

type a - $100 type b - $250

Aenean cursus, enim non faucibus maximus,felis metus tempor mauris, et pellentesque velit dolor at leo.

type a - $50 usd type b - $100 usd type c - $200 usd