SCP-0

Item #: SCP-0

Object Class: Euclid

Special Containment Procedures:

Right click anywhere on the template page, css page, and the navigation frame and select view page source on the pop-up that appears. Copy the code written there, and paste and modify in your own website.

Alternatively, get the code below:

The page itself: (code copied from the blank template page)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>scp tester</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <style></style>
    <div id="header-full" style="display: block"></div>
    <div id="navbar-full" style="display: block">
      <ul class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <div id="main-container">
      <div class="content-wrap flex alignment">
        <div id="left-sidebar" style="display: block">
          <div class="sidebar-wrapper">
            <iframe name="navi" id="navi" src="navi.html"> navigation </iframe>
            <script>
              // Selecting the iframe element
              var frame = document.getElementById("navi");

// Adjusting the iframe height onload event
              frame.onload =
                function () // function execute while load the iframe
                {
                  // set the height of the iframe as
                  // the height of the iframe content
                  frame.style.height =
                    frame.contentWindow.document.body.scrollHeight + "px";
                };
            </script>
          </div>
        </div>
        <div id="content-container" style="flex-grow: 1">
          <div class="wrapper">
            <h1 style="color: #990011">SCP-???</h1>
            
            <hr />
            <figure style="float: right">
              <img
                src="https://files.catbox.moe/6wni48.png"
                style="width: 120px; height: 223px; margin: 0px 10px 0px 0px"
              /><br />
              <figcaption>image</figcaption>
            </figure>
            <strong>Item #:</strong> SCP-???
            <p><strong>Object Class:</strong> Euclid</p>
            <p><strong>Special Containment Procedures:</strong></p>
            <p><strong>Description:</strong></p>
            <p>
              <strong>Note:</strong> 
            </p>
            
            <br />
            <center>
              <a href="/">asdf</a> | <a href="/">asdf</a> | <a href="/">asdf</a>
            </center>
          </div>
        </div>
      </div>
      <div id="footer">
        <div class="footer-wrapper"></div>
      </div>
    </div>
  </body>
</html>

CSS styles:

body {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 0.92em;
  line-height: 1.3em;
  width: 100%;
}

a {
  color: #990011;
}

.snippet {
  width: 90%;
  position: relative;
  background-color: #f4f4f4;
  padding: 10px;
  padding-left: 15px;
  border: thin dashed black;
  margin-left: 2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
}
@media only screen and (max-width: 1000px) {
  .snippet {
    width: 90%;
    margin-left: 10px;
    margin-right: 40px;
  }
}

:root {
  /* These variables exist so you can make quick and simple style changes without much CSS knowledge */
  /* applies to all areas */
  --font-family: verdana, arial, helvetica, sans-serif;
  --font-size: 0.92em;
  --line-height: 1.3em;
  --font-color: black;
  --link-color: #990011;
  --link-text-decoration: none;
  /* main content (between sidebars) */
  --content-padding: 25px;
  --content-bg-color: #fcfcfc;
  /* header */
  --header-height: 150px;
  --header-background: url("https://files.catbox.moe/yif08e.png");
  --header-margin-bottom: 0px;
  /* sidebar */
  --sidebar-margin: 10px;
  --sidebar-width: 200px;
  --sidebar-padding: 15px;
  --sidebar-bg-color: #ffffff;
  /* footer */
  --footer-height: 30px;
  --footer-bg-color: #414141;
  /* navbar */
  --navitems-alignment: right;
  --space-between-navitems: 20px;
  --navbar-margin-bottom: 10px;
  --nav-bg-color: #414141;
  /* container */
  --container-width: 1000px;
  --container-bg-color: transparent;
  /* controls the gap between the content and the footer */
  --row-gap: 10px;
  /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */
  --sidebar-height: 100%;
  --sidebar-overflow: hidden;
  --background-color: #fcfcfc;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--font-color);
}

body a {
  color: var(--link-color);
  font-weight: bold;
  text-decoration: var(--link-text-decoration);
}

#main-container {
  max-width: var(--container-width);
  margin: 0 auto;
  background-color: var(--container-bg-color);
}

.flex {
  display: flex;
  margin-bottom: var(--row-gap);
}

.content-wrap {
  margin-top: var(--content-margin-top);
}

#content-container {
  width: 60%;
  margin-bottom: var(--row-gap);
  background-color: var(--content-bg-color);
}

#left-sidebar {
  width: var(--sidebar-width);
  margin-right: var(--sidebar-margin);
  margin-bottom: var(--row-gap);
  height: var(--sidebar-height);
  overflow: var(--sidebar-overflow);
  background-color: var(--sidebar-bg-color);
  border-style: solid;
  border-width: thin;
  border-color: #833030;
  box-shadow: 2px 2px 7px -1px #833030;
}

#right-sidebar {
  width: var(--sidebar-width);
  margin-left: var(--sidebar-margin);
  margin-bottom: var(--row-gap);
  height: var(--sidebar-height);
  overflow: var(--sidebar-overflow);
  background-color: var(--sidebar-bg-color);
}

#header-contained {
  height: var(--header-height);
  margin-bottom: var(--header-margin-bottom);
  background-image: var(--header-background);
  background-position: center center;
}

#footer {
  height: var(--footer-height);
  text-align: center;
  color: #fff;
  background-color: var(--footer-bg-color);
}

#header-full {
  display: none;
  height: var(--header-height);
  margin-bottom: var(--header-margin-bottom);
  background-image: var(--header-background);
  background-position: xpos ypos;
  background-repeat: repeat;
}

#navbar-contained {
  margin-bottom: var(--row-gap);
}

#navbar-full {
  display: none;
}

.nav {
  margin-left: 0;
  text-align: var(--navitems-alignment);
  margin-top: 0;
  margin-bottom: var(--navbar-margin-bottom);
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: var(--nav-bg-color);
}

.nav li {
  display: inline-block;
  padding-right: var(--space-between-navitems);
}

.nav li a {
  color: #fff;
}

.wrapper {
  padding: var(--content-padding);
  padding-top: var(--sidebar-padding);
}

.sidebar-wrapper {
  padding: var(--sidebar-padding);
  height: var(--sidebar-height);
  overflow: var(--sidebar-overflow);
}

.footer-wrapper {
  padding: 5px;
}

.footer {
  color: fff;
}

/* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
@media only screen and (max-width: 1000px) {
  .flex {
    flex-wrap: wrap;
  }

#left-sidebar {
    width: 90%;
    display: block;
    order: 1;
    margin-left: 10px;
    margin-right: 0;
    margin-bottom: 10px;
  }

#right-sidebar {
    width: 100%;
    display: block;
    order: 3;
    margin-left: 0;
  }

#content-container {
    width: 100%;
    display: block;
    order: 2;
    margin-bottom: 10px;
  }
  .snippet {
    width: 95%;
    margin-left: 10px;
    margin-right: 40px;
  }
}

iframe{
  width:100%;
  overflow:hidden;
  border-style:none;
}

navigation page

<html>
  <head>
    <link rel="stylesheet" href="/style.css" />
    <style>
      html,body {background-color: white;}
    </style>
  </head>
  <body>
    <h1 style="font-size: 0.9em">Link Category 1</h1>
    <hr />
    <ul style="list-style-type: none; padding-left: 1px">
      <li><a href="page1.html" target="_top">page 1</a></li>
      <li><a href="page2.html" target="_top">page 2</a></li>
      
      <li><a href="temp.html" target="_top">empty template</a></li>
      <li><a href="#" target="_top">asdf</a></li>
    </ul>
    <h1 style="font-size: 0.9em">Link Category 2</h1>
    <hr />
    <ul style="list-style-type: none; padding-left: 1px">
      <li><a href="#" target="_top">asdf</a></li>
      <li><a href="#" target="_top">asdf</a></li>
      <li><a href="#" target="_top">asdf</a></li>
      <li><a href="#" target="_top">asdf</a></li>
    </ul>
    <h1 style="font-size: 0.9em">Credits</h1>
    <hr />
    <p>you can remove this if you want, tho credit is much appreciated!</p>
    <p>
      layout builder from
      <a href="https://sadgrl.online/tools/layout-builder/" target="_blank">sadgrl.online</a>
      | modified by
      <a href="https://vastrecs.neocities.org/" target="_blank">ryan vastrecs</a> | ipsums from
      the <a href="https://makesum.com/bebetime" target="_blank">bebetime generator</a> |
      <a
        href="https://www.geeksforgeeks.org/how-to-adjust-the-width-and-height-of-iframe-to-fit-with-content-in-it/" target="_blank"
        >frame auto height</a
      >
    </p>
  </body>
</html>

Description:

Tayo na sweet dreams pwede ba maging madamot mahal walang iba dapat patawad mahal bebe, izzaprank baby mahal tayo na patawad mahal. Walang iba dapat ilyy gusto ko kasi lagi kita kasama wala akong iba nakakain ka na ba gusto ko kasi lagi kita kasama pahinga ka patawad mahal, bawal iba pahinga ka iintindihin kita tulog ka na mahal. Bebe izzaprank baby tayo na izzaprank baby wag moko iwan sori na mahal ilyy iloveyousomuch.

Note: Babe nakakain ka na ba mahal iloveyousomuch bawal iba patawad mahal sana ako, bebe patawad mahal kumain ka na iloveyousomuch iloveyousomuch nakakain ka na ba bebe. Mahal bebetime pahinga ka gusto ko kasi lagi kita kasama, wala akong iba iloveyousomuch sori na sana ako bawal iba babe ilyy mahal. Wag moko iwan sweet dreams bebetime wag moko iwan sino ba naman ako iintindihin kita tayo na izzaprank baby. Kumain ka na lalayo ako sa iba wag moko iwan tayo na sino ba naman ako, kumain ka na kumain ka na sino ba naman ako sana ako ilyy babe. Bebe iintindihin kita nakakain ka na ba patawad mahal walang iba dapat nakakain ka na ba sori na pahinga ka.

Some snippet of a report or smth

Kumain ka na lalayo ako sa iba wag moko iwan tayo na sino ba naman ako, kumain ka na kumain ka na sino ba naman ako sana ako ilyy babe.

asdf | asdf | asdf