index.html

---
title: PhoenixTales
---
<article>
<div id="GraphicalRow">
  <figure>
    <a href="screenshots/orderedbytime/1998.html"><img loading="lazy" class="ar-413-342" src="{{ imagesRoot }}/img/1998.png" alt="Screenshots from 1998"></a>
    <figcaption>Screens from 1998</figcaption>
  </figure>
  <figure>
    <a href="screenshots/orderedbytime/1999-01-1999-06.html"><img loading="lazy" class="ar-413-272" src="{{ imagesRoot }}/img/early1999.png" alt="Screenshots from early 1999"></a>
    <figcaption>Screens from early 1999</figcaption>
  </figure>
  <figure>
    <a href="screenshots/orderedbytime/1999-07-1999-08.html"><img loading="lazy" class="ar-413-271" src="{{ imagesRoot }}/img/secondalpha.png" alt="Screenshots from late 1999"></a>
    <figcaption>Screens from late 1999</figcaption>
  </figure>
  <figure>
    <a href="screenshots/orderedbytime/1999-09-2000-04.html"><img loading="lazy" class="ar-59-51" src="{{ imagesRoot }}/img/v074.png" alt="Screenshots from around Version 0.74"></a>
    <figcaption>Screens from ~v0.74</figcaption>
  </figure>
  <figure>
    <a href="screenshots/orderedbytime/2000-05-2000-07.html"><img loading="lazy" class="ar-413-342" src="{{ imagesRoot }}/img/v090.png" alt="Screenshots from around Version 0.90"></a>
    <figcaption>Screens from ~v0.90</figcaption>	  
  </figure>
  <figure>
    <a href="screenshots/orderedbytime/2000-07-2001-02.html"><img loading="lazy" class="ar-413-330" src="{{ imagesRoot }}/img/v091.png" alt="Screenshots from around Version 0.91"></a>
    <figcaption>Screens from 0.91</figcaption>
  </figure>
  <figure>
    <a href="https://www.youtube.com/watch?v=kL0XZWUOuvo"><img loading="lazy" class="ar-413-199" src="{{ imagesRoot }}/img/trailer1999.png" alt="Gothic Trailer E3 1999"></a>
    <figcaption>E3 Trailer 1999</figcaption>
  </figure>
  <figure>
    <a href="https://www.youtube.com/watch?v=cwP7oGg_eAw"><img loading="lazy" class="ar-413-310" src="{{ imagesRoot }}/img/gothictrailer2000.png" alt="Gothic Gameplay Trailer 2000"></a>
    <figcaption>Gameplay Trailer 2000</figcaption>
  </figure>
  <figure>
    <a href="{{ sitesRoot }}/gothicthegame.com/1999-2002"><img loading="lazy" class="ar-413-270" src="{{ imagesRoot }}/img/gothicweb.png" alt="gothicthegame.com 1999 reconstructed"></a>
    <figcaption>gothicthegame.com</figcaption>
  </figure>
  <figure>
    <a href="promotion/inex.html"><img loading="lazy" class="ar-413-270" src="{{ imagesRoot }}/img/inex.png" alt="About InExtremo"></a>
    <figcaption>In Extremo</figcaption>
  </figure>
  <figure>
    <a href="artworks/mask.html"><img loading="lazy" class="ar-59-57" src="{{ imagesRoot }}/img/masks.png" alt="Evolution of the Sleeper Mask"></a>
    <figcaption>Sleeper Mask Evolution</figcaption>
  </figure>
  <figure>
    <a href="artworks/menu.html"><img loading="lazy" class="ar-413-330" src="{{ imagesRoot }}/img/menuart.png" alt="Evolution of the Menu"></a>
    <figcaption>Menu Evolution</figcaption>
  </figure>
  <figure>
    <a href="research/hudevolution.html"><img loading="lazy" class="ar-59-37" src="{{ imagesRoot }}/img/hud.png" alt="Evolution of the HUD"></a>
    <figcaption>HUD Evolution</figcaption>
  </figure>
  <figure>
    <a href="artworks/logo.html"><img loading="lazy" class="ar-413-275" src="{{ imagesRoot }}/img/logo.png" alt="Evolution of the Logo"></a>
    <figcaption>Logo Evolution</figcaption>
  </figure>
  <figure>
    <a href="artworks/npcs.html"><img loading="lazy" class="ar-413-310" src="{{ imagesRoot }}/img/npcs.png" alt="NPC Artworks"></a>
    <figcaption>NPC Renderings</figcaption>
  </figure>
  <figure>
    <a href="artworks/refinedmodels.html"><img loading="lazy" class="ar-169-256" src="{{ imagesRoot }}/img/refinedmodels.jpg" alt="Refined NPC Artworks by Uwe Meier"></a>
    <figcaption>NPC Artworks</figcaption>
  </figure>
  <figure>
    <a href="artworks/monsters.html"><img loading="lazy" class="ar-413-345" src="{{ imagesRoot }}/img/monsters.png" alt="Monster Artworks"></a>
    <figcaption>Monster Renderings</figcaption>
  </figure>
  <figure>
    <a href="developers/piranhabytes/presentation.html"><img loading="lazy" class="ar-413-291" src="{{ imagesRoot }}/img/pb.gif" alt="Piranha Bytes Team Presentation"></a>
    <figcaption>Piranha Bytes Team</figcaption>
  </figure>
  <figure>
    <a href="screenshots/screenstory.html"><img loading="lazy" class="ar-910-673" src="{{ imagesRoot }}/img/okyl.jpg" alt="The Screenshot Story about Okyl"></a>
    <figcaption>Screenshot Story</figcaption>
  </figure>
  <figure>
    <a href="promotion/printmedia.html"><img loading="lazy" class="ar-413-292" src="{{ imagesRoot }}/img/printmediapromo.jpg" alt="Print Media Promotion Stuff"></a>
    <figcaption>Printmedia</figcaption>
  </figure>
  <figure>
    <a href="research/inspirations.html"><img loading="lazy" class="ar-413-305" src="{{ imagesRoot }}/img/inspirations.png" alt="Inspirations"></a>
    <figcaption>Trivia</figcaption>
  </figure>
  <figure>
    <a href="https://mdk.gothicarchive.org" target="_blank"><img loading="lazy" class="ar-942-715" src="{{ imagesRoot }}/img/gothicmdk.jpg" alt="GothicMDK & Documentation"></a>
    <figcaption>Gothic MDK</figcaption>
  </figure>
  <figure>
    <a href="artworks/vadim.html"><img loading="lazy" class="ar-493-347" src="{{ imagesRoot }}/img/vadim.jpg" alt="Artworks by Vadim"></a>
    <figcaption>Vadim's Artworks</figcaption>
  </figure>
  <figure>
    <a href="artworks/cover.html"><img loading="lazy" class="ar-413-327" src="{{ imagesRoot }}/img/coverart.png" alt="Cover Art"></a>
    <figcaption>Cover Art</figcaption>
  </figure>
  <figure>
    <a href="demos/finster/"><img loading="lazy" class="ar-16-9" src="{{ imagesRoot }}/demos/finster/FINSTER_thumbnail.jpg" alt="Finster Demo"></a>
    <figcaption>Finster Demo</figcaption>
  </figure>
  <figure>
    <a href="{{ mediaLinkBase }}/promotion/the13thwarrior/Trailer_Der_13te_Krieger.avi"><img loading="lazy" class="ar-499-698" src="{{ imagesRoot }}/img/13thwarrior.jpg" alt="The 13th Warrior Trailer"></a>
    <figcaption>The 13th Warrior (1999)</figcaption>
  </figure>
  <figure>
    <a href="README.txt"><img loading="lazy" class="ar-413-291" src="{{ imagesRoot }}/img/readme.png" alt="Gothic Archive Readme"></a>
    <figcaption>README</figcaption>
  </figure>
</div>

<div id="GraphicalRow2">
  <figure>
    <a href="artworks/tomthiel.html"><img loading="lazy" class="ar-24-17" src="{{ imagesRoot }}/img/tomthiel.png" alt="Artworks by Tom Thiel"></a>
    <figcaption>Tom Thiel Artworks</figcaption>
  </figure>
  <figure>
    <a href="{{ mediaLinkBase }}/documents/manuals/Gothic-Manual_en.pdf"><img loading="lazy" class="ar-376-257" src="{{ imagesRoot }}/img/gothicmanual.jpg" alt="Gothic Manual - English Version"></a>
    <figcaption>Gothic Manual (EN)</figcaption>
  </figure>
  <figure>
    <a href="conceptart/mikehoge/npcs.html"><img loading="lazy" class="ar-49-48" src="{{ imagesRoot }}/img/mike.jpg" alt="Concept Art by Mike Hoge"></a>
    <figcaption>Mike's Concept Art</figcaption>	
  </figure>
  <figure>
    <a href="research/evolutionoftheclasses.html"><img loading="lazy" class="ar-40-27" src="{{ imagesRoot }}/img/classes.jpg" alt="Evolution of the Classes"></a>
    <figcaption>Evolution of the Class Prototypes</figcaption>
  </figure>
  <figure>
    <a href="{{ mediaLinkBase }}/promotion/comic/GothicComic.pdf"><img loading="lazy" class="ar-100-153" src="{{ imagesRoot }}/img/comic_cover.jpg" alt="Gothic Comic Stuff"></a>
    <figcaption>Gothic Comic</figcaption>
  </figure>
  <figure>
    <a href="artworks/paintings.html"><img loading="lazy" class="ar-47-55" src="{{ imagesRoot }}/img/uwe.jpg" alt="Paintings by Uwe Meier"></a>
   <figcaption>Uwe Meier's Paintings</figcaption>
  </figure>
  <figure>
    <a href="artworks/sequel.html"><img loading="lazy" class="ar-5-4" src="{{ imagesRoot }}/artworks/sequel/StartScreen.png" alt="Sequel Artworks"></a>
    <figcaption>Gothic Sequel Art</figcaption>
  </figure>
  <figure>
    <a href="conceptart/ralfmarczinczik/oldcamp.html"><img loading="lazy" class="ar-159-104" src="{{ imagesRoot }}/img/ralf.png" alt="OldCamp Concept Art by Ralf"></a>
    <figcaption>Ralfs Old Camp Concepts</figcaption>
  </figure>
  <figure>
    <a href="https://www.youtube.com/watch?v=SjsJd4iiZsY"><img loading="lazy" class="ar-73-54" src="{{ imagesRoot }}/img/gamestar.jpg" alt="GameStar Preview Video"></a>
    <figcaption>GameStar Preview</figcaption>
  </figure>
  <figure>
    <a href="https://www.youtube.com/watch?v=Iz5WYsSgMLM"><img loading="lazy" class="ar-115-78" src="{{ imagesRoot }}/img/pcgames.jpg" alt="PCGames Preview Video"></a>
    <figcaption>PC Games Preview</figcaption>
  </figure>
  <figure>
    <a href="https://www.youtube.com/watch?v=yABtkrQonD0"><img loading="lazy" class="ar-571-376" src="{{ imagesRoot }}/img/pcaction.jpg" alt="PCAction Preview Video"></a>
    <figcaption>PC Action Preview</figcaption>
  </figure>
  <figure>
    <a href="{{ mediaLinkBase }}/documents/phoenix/PhoenixPitch.pdf"><img loading="lazy" class="ar-5-8" src="{{ imagesRoot }}/img/phoenixconcept.jpeg" alt="Phoenix aka GOTHIC Pitch"></a>
    <figcaption>Gothic ("Phoenix") Pitch</figcaption>
  </figure>
  <figure>
    <a href="misc/logos.html"><img loading="lazy" class="ar-5-4" src="{{ imagesRoot }}/img/greenwood.jpg" alt="Company Logos"></a>
    <figcaption>Company Logos</figcaption>
  </figure>
  <figure>
    <a href="{{ mediaLinkBase }}/documents/publisher/phenomedia_ar_e_99.pdf"><img loading="lazy" class="ar-541-765" src="{{ imagesRoot }}/img/phenomediaannualreport1999.jpg" alt="Phenomedia Document from 1999"></a>
    <figcaption>Phenomedia Report 1999</figcaption>
  </figure>
  <figure>
    <a href="developers/piranhabytes/devlog.txt"><img loading="lazy" class="ar-953-660" src="{{ imagesRoot }}/img/devlog.jpg" alt="Piranha Bytes' Devlog"></a>
    <figcaption>Piranha Bytes' Devlog</figcaption>
  </figure>
  <figure>
    <a href="developers/piranhabytes/photographies.html"><img loading="lazy" class="ar-200-123" src="{{ imagesRoot }}/img/pb-photos.jpg" alt="Piranha Bytes' Team Pictures"></a>
    <figcaption>Piranha Bytes' Photos</figcaption>
  </figure>
  <figure>
    <a href="https://www.youtube.com/watch?v=eyj6TxUzRjc" target="_blank"><img loading="lazy" class="ar-834-703" src="{{ imagesRoot }}/img/v094k.png" alt="v0.94k, full playthrough"></a>
    <figcaption>v0.94k Showcase</figcaption>
  </figure>
  <figure>
    <a href="promotion/presskit2001/index.htm"><img loading="lazy" class="ar-60-23" src="{{ imagesRoot }}/img/PressKit.jpg" alt="Exclusive PressKit from 2001"></a>
    <figcaption>Press-Kit 2001</figcaption>
  </figure>
  <figure>
    <a href="https://phoenixthegame.com" target="_blank"><img loading="lazy" class="ar-629-1039" src="{{ imagesRoot }}/img/phoenixlink.jpg" alt="PHOENIX - A Gothic Alpha Reboot by PhoenixTales"></a>
    <figcaption>phoenixthegame.com</figcaption>
  </figure>
</div>
</article>

<style>
  img {
    /* Disable alt text appearing when loading images in Firefox. Even if the image won't load, there are figcaptions. */
    color: transparent
  }

  article {
    max-width: none;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(200px, 413px) minmax(200px, 500px);
  }
  article a:hover img {
    opacity: initial;
  }

  #GraphicalRow, #GraphicalRow2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  article figure {
    overflow: clip; /* clip the element in case a browser not precisely renders a border of figcaption. This can occur when zooming, and a border can overflow very subtly, which is relatively noticeable. */
  	margin: 0;
  	padding: 0;
    position: relative;
  }
  article figure a {
    height: 100%;
    display: block;
  }
  article figure img { width: 100%; }

  article figure, figcaption {
    border: 1px solid #222222;
    transition: border-color .4s ease-in-out;
  }
  article figure:hover, figure:hover figcaption {
    border: 1px solid #706961;
  }

  article figcaption {
    position: absolute;

    /*-1px to offset the border */
    bottom: -1px;
    left: -1px;

    /* Makes it so the element expands as much as it needs, and if overflows the parent container it can only have a width of a parent container's width + the left and right borders, for it to perfectly overlay the parent container. */
    width: max-content;
    max-width: calc(100% + 2px);

    margin: 0;
    padding: 0.2em 0.6em;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.1em;
    font-family: monospace;
    background: hsla(0, 0%, 0%, 0.9);
  }
  figcaption:empty {
    display: none;
  }

  @media only screen and (max-width: 820px) {
    article {
      padding-bottom: 10px;
  	}
  }

  @media only screen and (max-width: 550px) {
  	article {
      height: auto;
  	  flex-wrap: wrap;
      grid-template-columns: 1fr;
  	}
  }

  /* Aspect Ratio Utils */

  .ar-413-342 { aspect-ratio: 413/342; }
  .ar-413-272 { aspect-ratio: 413/272; }
  .ar-413-271 { aspect-ratio: 413/271; }
  .ar-59-51 { aspect-ratio: 59/51; }
  .ar-413-330 { aspect-ratio: 413/330; }
  .ar-413-199 { aspect-ratio: 413/199; }
  .ar-413-310 { aspect-ratio: 413/310; }
  .ar-413-270 { aspect-ratio: 413/270; }
  .ar-59-57 { aspect-ratio: 59/57; }
  .ar-59-37 { aspect-ratio: 59/37; }
  .ar-413-275 { aspect-ratio: 413/275; }
  .ar-169-256 { aspect-ratio: 169/256; }
  .ar-413-345 { aspect-ratio: 413/345; }
  .ar-413-291 { aspect-ratio: 413/291; }
  .ar-910-673 { aspect-ratio: 910/673; }
  .ar-413-292 { aspect-ratio: 413/292; }
  .ar-413-305 { aspect-ratio: 413/305; }
  .ar-942-715 { aspect-ratio: 942/715; }
  .ar-493-347 { aspect-ratio: 493/347; }
  .ar-413-327 { aspect-ratio: 413/327; }
  .ar-16-9 { aspect-ratio: 16/9; }
  .ar-499-698 { aspect-ratio: 499/698; }
  .ar-24-17 { aspect-ratio: 24/17; }
  .ar-376-257 { aspect-ratio: 376/257; }
  .ar-49-48 { aspect-ratio: 49/48; }
  .ar-40-27 { aspect-ratio: 40/27; }
  .ar-100-153 { aspect-ratio: 100/153; }
  .ar-47-55 { aspect-ratio: 47/55; }
  .ar-5-4 { aspect-ratio: 5/4; }
  .ar-159-104 { aspect-ratio: 159/104; }
  .ar-73-54 { aspect-ratio: 73/54; }
  .ar-115-78 { aspect-ratio: 115/78; }
  .ar-571-376 { aspect-ratio: 571/376; }
  .ar-5-8 { aspect-ratio: 5/8; }
  .ar-541-765 { aspect-ratio: 541/765; }
  .ar-953-660 { aspect-ratio: 953/660; }
  .ar-200-123 { aspect-ratio: 200/123; }
  .ar-834-703 { aspect-ratio: 834/703; }
  .ar-60-23 { aspect-ratio: 60/23; }
  .ar-629-1039 { aspect-ratio: 629/1039; }
</style>