diff options
| author | Natasha Moongrave <natasha@256phi.eu> | 2026-03-31 15:01:24 +0200 |
|---|---|---|
| committer | Natasha Moongrave <natasha@256phi.eu> | 2026-03-31 15:01:32 +0200 |
| commit | 4a2b1660b699e21b674ef470662a5719bc9050f4 (patch) | |
| tree | b8fab5c9210b4d90ac8e8fde31a57fa0f9496221 | |
| parent | f94a000a8a8d7160b4261849a1106616ab1c8e93 (diff) | |
Add example image slots to commission types on commissions page
Replaced table layout with flexbox cards showing placeholder images for each commission type (Icon, Bust, Half-Body, Full-Body, Half Scene, Full Scene). Images to be replaced with actual examples later.
| -rw-r--r-- | src/Pages/commissions/commissions.php | 149 |
1 files changed, 112 insertions, 37 deletions
diff --git a/src/Pages/commissions/commissions.php b/src/Pages/commissions/commissions.php index 6304f2c..010bf4e 100644 --- a/src/Pages/commissions/commissions.php +++ b/src/Pages/commissions/commissions.php @@ -134,6 +134,51 @@ color: #00ffff; font-weight: bold; } + .commission-type { + display: flex; + gap: 20px; + padding: 20px 0; + border-bottom: 1px solid rgba(255, 0, 255, 0.2); + align-items: center; + } + .commission-type:last-of-type { + border-bottom: none; + } + .commission-type-info { + flex: 1; + } + .commission-type-info h3 { + color: #00ffff; + margin: 0 0 8px 0; + } + .commission-type-info p { + margin: 4px 0; + } + .commission-type-info .price { + color: #ff00ff; + font-weight: bold; + } + .commission-type-example { + flex-shrink: 0; + width: 150px; + height: 150px; + } + .commission-type-example img { + width: 100%; + height: 100%; + object-fit: cover; + border: 1px solid rgba(255, 0, 255, 0.3); + } + @media (max-width: 500px) { + .commission-type { + flex-direction: column; + text-align: center; + } + .commission-type-example { + width: 120px; + height: 120px; + } + } </style> </head> <body> @@ -178,43 +223,73 @@ <div class="commission-section"> <h2>Sizes & Types</h2> <p>Prices vary based on complexity. Contact me for a quote.</p> - <table class="size-table"> - <tr> - <th>Type</th> - <th>Description</th> - <th>Price Range</th> - </tr> - <tr> - <td>Icon</td> - <td>Small profile picture or avatar, simple background</td> - <td>N/A</td> - </tr> - <tr> - <td>Bust</td> - <td>Head and shoulders, chest up</td> - <td>N/A</td> - </tr> - <tr> - <td>Half-Body</td> - <td>Waist up, more detail and pose options</td> - <td>N/A</td> - </tr> - <tr> - <td>Full-Body</td> - <td>Complete character from head to toe</td> - <td>N/A</td> - </tr> - <tr> - <td>Half Scene</td> - <td>Character with partial background or simple environment</td> - <td>N/A</td> - </tr> - <tr> - <td>Full Scene</td> - <td>Complete illustration with detailed background and composition</td> - <td>N/A</td> - </tr> - </table> + + <div class="commission-type"> + <div class="commission-type-info"> + <h3>Icon</h3> + <p>Small profile picture or avatar, simple background</p> + <p class="price">Price: N/A</p> + </div> + <div class="commission-type-example"> + <img src="../../Assets/ImageNotFound.png" alt="Icon example" loading="lazy"> + </div> + </div> + + <div class="commission-type"> + <div class="commission-type-info"> + <h3>Bust</h3> + <p>Head and shoulders, chest up</p> + <p class="price">Price: N/A</p> + </div> + <div class="commission-type-example"> + <img src="../../Assets/ImageNotFound.png" alt="Bust example" loading="lazy"> + </div> + </div> + + <div class="commission-type"> + <div class="commission-type-info"> + <h3>Half-Body</h3> + <p>Waist up, more detail and pose options</p> + <p class="price">Price: N/A</p> + </div> + <div class="commission-type-example"> + <img src="../../Assets/ImageNotFound.png" alt="Half-body example" loading="lazy"> + </div> + </div> + + <div class="commission-type"> + <div class="commission-type-info"> + <h3>Full-Body</h3> + <p>Complete character from head to toe</p> + <p class="price">Price: N/A</p> + </div> + <div class="commission-type-example"> + <img src="../../Assets/ImageNotFound.png" alt="Full-body example" loading="lazy"> + </div> + </div> + + <div class="commission-type"> + <div class="commission-type-info"> + <h3>Half Scene</h3> + <p>Character with partial background or simple environment</p> + <p class="price">Price: N/A</p> + </div> + <div class="commission-type-example"> + <img src="../../Assets/ImageNotFound.png" alt="Half scene example" loading="lazy"> + </div> + </div> + + <div class="commission-type"> + <div class="commission-type-info"> + <h3>Full Scene</h3> + <p>Complete illustration with detailed background and composition</p> + <p class="price">Price: N/A</p> + </div> + <div class="commission-type-example"> + <img src="../../Assets/ImageNotFound.png" alt="Full scene example" loading="lazy"> + </div> + </div> + <p><em>+ Complex backgrounds cost extra<br> + Additional characters cost extra<br> + Commercial use costs extra<br> |