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

It isn't xactly accurate, but I had fun making it. c|:) (That being said.. If anyone has the font for the canon window lmk!! I need it!!)

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.5%;">
            <span style="color: #000000;">⬤ ??</span><br>
            <span style="color: #a5a5a5;">⬤ ??</span>
          </div>
        </aside>
      </div>
    </div>

CSS

      <style>
        #trollian {
          /*Optional ->*/ margin: auto;
          font-family: 'Courier New', Courier, monospace;
          font-weight: bold;
          border-radius: 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: 20px;
          margin-top: 45px;
          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: 'Courier New', Courier, monospace;
          font-weight: bold;
          width: 90%;
          height: 29px;
          border: none;
        }
        #trollian header {
          border-radius: 10px;
          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: 'Courier New', Courier, monospace;
          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>