Free layouts for all!

Well then, websurfer, you've come to the right place. c|:)

In this page contains a selexion of layouts, all carefully made by the webmaster and 222nd angel herself! All completely free to use, edit, and not credit!

Feel free to use as many as you'd like (on one xception: Try not to use the fandom ones commercially. You are going to be copyright struck by someone who is not me.), be creative, and have fun!

I'm done browsing!

Trollian Window

Preview

A responsive Trollian window for all your needs!

It's styled to be small, but can easily be styled to fit the entire screen without too many problems. Just edit the trollian ID in the CSS. c|:D

The font used here is Typostuck by Speherh. To download it and use on your website, use Fontsquirrel!

It isn't xactly accurate, but I had fun making it. c|:)

Comes with:

Pre-ripped image borders.
Pre-ripped header.
Buttons you can click.
CSS that ~~hopefully~~ doesn't clash with xisting stylesheets..

HTML

<div id="trollian">
  <header>
    <div class="btncontainer">
      <button class="interactivebtn">-</button>
      <button class="interactivebtn">X</button>
    </div>
  </header>

  <div id="content">
    <main id="windowtainer">

      <div class="window">
        <h2>
          <div class="btncontainer">
            <button class="interactivebtn">-</button>
            <button class="interactivebtn">X</button>
          </div>
          trolling: ???
        </h2>

        <div class="loglist" style="height: 200px;">
          <p>-- ?? [??] began trolling ?? [??] --</p>
          ??: Hey.<br>
          <span style="color: #a5a5a5;">??: Who the fuck are you?!</span>
        </div>

        <div class="input">
          <input placeholder="Send a message!" type="text"> <input style="width: 7.5%" type="submit" value="Send">
        </div>
      </div>

      <div class="window">
        <div class="menubar">
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button>4</button>
        </div>

        <h2>
          <div class="btncontainer">
            <button>-</button>
            <button>X</button>
          </div>
          Placeholder..
        </h2>
        <center><img title="Really shitty placeholder image." alt="Really shitty placeholder image." src="https://i.ibb.co/bdZFGP1/timelines.png" width="98%"></center>
      </div>

    </main>

    <aside id="chumproll">
      <h2>ChumpRoll</h2>
      <div class="loglist" style="height: 88%;">
        <span style="color: #000000;">⬤ ??</span><br>
        <span style="color: #a5a5a5;">⬤ ??</span>
      </div>
    </aside>
  </div>
</div>

CSS

  <style>
    body {
      background-color: #1f1f1f;
      margin: 20px;
    }
    /*Thank you to Speherh on Fontstruct for the Typostuck font..*/
    @font-face {
      font-family: typostuck;
      src: url(../../../fonts/typostuck.woff); /* Change the URL part to wherever you placed the font woff. */
    }
  </style>
  <style>
    #trollian {
      /*Optional ->*/ margin: auto;
      border: 5px solid #c20f00;
      font-family: typostuck;
      letter-spacing: 1.5px;
      border-radius: 20px 20px 10px 10px;
      max-width: 1000px;
      background-color: #4d4d4d;
      position: relative;
    }
    #content {
      height: 600px;
      display: grid;
      grid-template-columns: 75% 25%;
    }
    #windowtainer {
      overflow: auto;
      padding: 15px;
      border-right: 5px solid #c20f00;
    }
    #chumproll {
      background-color: #ff5f84;
      border: 2px solid #c2c2c2;
      border-top: none;
      border-bottom: none;
    }
    .window {
      scrollbar-color: #e02413 #cecece;
      scrollbar-width: 50px;
      background-color: #ff5f84;
      margin: 10px;
      margin-top: 45px;
      margin-bottom: 60px;
      min-height: 100px;
      border-image: url('https://i.ibb.co/k8kmvyj/windowborder.png');
      border-image-slice: 20 4 5 3;
      border-image-width: 35px 3px 6px 3px;
      border-image-outset: 35px 3px 6px 3px;
      border-image-repeat: stretch stretch; 
    }
    .menubar {
      background-color: #c2c2c2;
      padding: 5px;
      top: 0;
    }
    .btncontainer {
      position: absolute;
      right: 5px;
    }
    .btncontainer button {
      color: #c2c2c2;
      background-color: #00000000;
    }
    .loglist {
      overflow: auto;
      border-radius: 10px;
      padding: 10px;
      margin: 5px;
      border: 2px solid #c2c2c2;
      background-color: #ffffff;
    }
    .input {
      margin-top: 5px;
      min-height: 30px;
      padding: 5px;
      background-color: #c2c2c2;
      border-radius: 5px;
    }
    #trollian input {
      font-family: typostuck;
      letter-spacing: 1.5px;
      width: 90%;
      height: 29px;
      border: none;
    }
    #trollian header {
      border-radius: 10px 10px 0 0;
      width: 100%;
      height: 100px;
      background-image: url('https://i.ibb.co/M6SnJwS/trollianheader.png');
      background-size: cover;
    }
    #trollian h2 {
      position: relative;
      border-radius: 10px;
      color: #ffffff;
      margin: 5px;
      border: 2px solid #c2c2c2;
      background-color: #ff2612;
      padding-left: 20px;
    }
    #trollian p {
      color: #000000;
    }
    #trollian button {
      font-family: typostuck;
      letter-spacing: 1.5px;
      font-weight: bold;
      cursor: pointer;
      font-size: 20px;
      background-color: #00000000;
      border: none;
      width: 20px;
    }
    #trollian button:hover {
      background-color: #00000020;
    }
    
  /*Responsive stuffs..*/
    @media (max-width: 950px) {
      #content {
        display: block;
        height: auto;
      }
      #windowtainer {
        padding: 0px;
        border-right: none;
        border-bottom: 5px solid #c20f00;
      }
      #chumproll {
        border-top: 2px solid #c2c2c2;
        border-bottom: 2px solid #c2c2c2;
      }
    }
  
    @media (max-width: 550px){
      header {
        height: 50px;
      }
      h2, button {
        font-size: medium;
      }
    }
  </style>