SCP Foundation HTML

<!----------------

                ***SCP FOUNDATION LAYOUT***

    Code by https://toyhou.se/Elithian
    Layout by http://www.scp-wiki.net/
    Please read my TOS before using: https://toyhou.se/~bulletins/96449.rules-tos

    This layout can be used to write an SCP-style article for your OCs. You can browse the site for ideas on fun things to add to the article, like interviews and test logs. Feel free to PM me if you'd like me to code in a new section to the template.


  ***CODE RESOURCES AND TIPS***
    USEFUL COLOURS
      Title & accent reds
      #970517

      Background
      #fcfcfc

      Image & interview background
      #f4f4f4

      Hr colour
      #bababa

      Footnote colour
      #632e2d

    FOOTNOTES
      In-text code:
      <sup><a href="#footnoteXb" id="footnoteXa" style="font-size:0.7rem;color:#970517">X</a></sup>

      Footnote footer code:
      <p id="footnoteXb"><a href="#footnoteXa" style="color:#970517">X</a>. text</p>

      Substitute X for the # of your reference.

    REMOVING THE RIGHT MARGIN
      The site has a larger margin on the right than on the left. If you wish to remove this margin, simple ctrl+F or cmd+F, search for pr-md-5, and remove every instance of it.

    REDACTED TEXT
      Copy-paste the following character:
      █


Feel free to remove this section if you don't need this info.
---------------->

<div class="p-2 pr-md-5 rounded-0" style="background-color:#fcfcfc;border-radius:5px;color:#333333;">

<div class="p-3 pr-md-5" style="color:#970517;font-size:1.5rem">SCP-#
<hr class="mt-1" style="border-color:#bbbbbb"></div>

<div class="mx-sm-auto text-center float-lg-right p-4 pr-md-5" style="display:inline-block;margin-top: -20px;">
  <div class="text-center" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)">
    <img src="https://cdn.discordapp.com/attachments/539606154393944104/599640770638774274/user_5-15-512.png" width="300px">
    <div style="background-color:#f4f4f4;" class="text-center p-1"><b>SCP-#.</b></div>
  </div>
</div>

<div class="p-md-3 p-2 pr-md-5">
<!----------------

  BASIC DETAILS

---------------->

  <p><b>Item #:</b> SCP-#</p>


  <p><b>Object class:</b> Safe/Euclid/Keter</p>


  <p><b>Special Containment Procedures:</b> regular containment measures go here</p>

  <p></p>

  <p></p>


  <p><b>Temporary Containment Procedure Update:</b> any additional containment procedures that were added after the initial containment, for example due to an event taking place, go here.</p>

  <p></p>


  <p><b>Description:</b> physical description and powers, abilities, or anomalies go here.</p>

  <p></p>

  <p></p>

  <p></p>

  <p><b>Addendum #.#:</b> Discovery</p>

  <p>How was the entity discovered? How did it become contained?</p>

  <p>The text in this section has been [REDACTED]<sup><a href="#footnote1b" id="footnote1a" style="font-size:0.7rem;color:#970517">1</a></sup> by authorised personnel. It was absolutely ██████████<sup><a href="#footnote2b" id="footnote2a" style="font-size:0.7rem;color:#970517">2</a></sup>.</p>

  <p></p>

  <p></p>

<!----------------

  IMAGE

---------------->
  <div class="row no-gutters">
    <div class="p-md-4 pb-4 mx-auto" style="display:inline-block">
      <div style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)">
        <img src="https://cdn.discordapp.com/attachments/539606154393944104/599640770638774274/user_5-15-512.png" width="500px">
        <div class="text-center p-1" style="background-color:#f4f4f4;"><b>Caption for additional images</b></div>
      </div>
    </div>
  </div>

<!----------------

  INTERVIEW

---------------->
  <p>A word of info about the interview.</p>

  <div class="p-md-3 py-3 px-1 px-md-5">
    <div class="p-3" style="background-color:#f4f4f4;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 6px 0 #f4f4f4;border-style:dashed;border-width:1px;border-color:#bababa">

      <p><b>Date</b>: DD/MM/YYYY</p>

      <p><b>Interviewer</b>: </p>

      <p><b>Interviewee</b>: SCP-#</p>

      <hr style="border-color:#a0a0a0;border-width:2px">

      <p>[BEGIN LOG]</p>


      <p><b>Interviewer</b>: This is something I say. (<i>This is something I do</i>)</p>

      <p><b>SCP-#</b>: (<i>Dabs</i>) Radical<sup><a href="#footnote3b" id="footnote3a" style="font-size:0.7rem;color:#970517">3</a></sup></p>


      <p>[END LOG]</p>

    </div>
  </div>

  <p><i>Interviewer's Note: any thoughts or notes made outside the interview</i></p>

<!----------------

  OBSERVATION LOG

---------------->
  <p><b>Addendum #.#:</b> Observation Log</p>

  <p>Explanation of the study or studies</p>

  <div class="p-md-3 py-3 px-1 px-md-5">
    <div class="p-3" style="background-color:#f4f4f4;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 6px 0 #f4f4f4;border-style:dashed;border-width:1px;border-color:#bababa">

      <p><b>Observational Log #.OL.# SUMMARY</b></p>

      <p><b>Subject:</b> SCP-#</p>

      <p><b>Preface:</b> Conditions before the experiment: how did test subject get here, how did they react before the test, and which preparations were made</p>

      <p><b>Observation Notes:</b> Observed behaviour and effects</p>

      <p></p>

    </div>
  </div>

<!----------------

  FOOTNOTES

---------------->
  <div class="p-md-3 py-3 px-1 px-md-4">
    <div class="p-3" style="background-color:#e5e5e5;border-left-style:solid;border-left-width:10px;border-left-color:#632e2d">

      <p style="font-size:1.3rem"><b>Footnotes</b></p>

      <p id="footnote1b"><a href="#footnote1a" style="color:#970517">1</a>. Footnote #1</p>

      <p id="footnote2b"><a href="#footnote2a" style="color:#970517">2</a>. Footnote #2</p>

      <p id="footnote3b"><a href="#footnote3a" style="color:#970517">3</a>. Footnote #3</p>

    </div>
  </div>

<!---------

    CREDITS

    !Please do not remove!

----------->
<div class="col-md-12 p-1">
  <div class="p-1 text-right"><a data-toggle="tooltip" class="text-muted" title="Coding by ElithianFox, layout by scp-wiki.net" href="https://toyhou.se/5065738.-free-scp-foundation-wiki"><i class="far fa-dna"></i></a></div>
</div>
</div>