222: layouts

Layouts

Layouts for your websites and webpages. If you need any help with editing these, just shoot me an email.

Trollian Myspace

Preview

A responsive Trollian Myspace page for all your needs.

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

Comes with:

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

HTML

      <div id="trollian">
        <header>
          <nav class="btncontainer">
            <a href="LINK HERE">-</a>
            <a href="LINK HERE">X</a>
          </nav>
        </header>

        <aside class="menubar">
          <button>Home</button>
          <button>Browse</button>
          <button>Search</button>
          <button>Troll</button>
          <button>Blog</button>
          <button>Bulletins</button>
          <button>Forum</button>
        </aside>

          <main id="windowtainer">
            <div>
              <section class="window">
                <h2>profileOwner</h2>
                <center>
                  <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="70%" style="filter: drop-shadow(0px 2px#e02413) drop-shadow(0px -2px#e02413) drop-shadow(2px 0px#e02413) drop-shadow(-2px 0px#e02413);">
                </center>
                <table style="width: 95%;">
                  <tr>
                    <th>Mood:</th>
                    <td>Lorem ipsum.</td>
                  </tr>
                </table>
              </section>

              <section class="window">
                <h2>PO's Interests</h2>
                <table>
                  <tr>
                    <th>General:</th>
                    <td>Lorem ipsum.</td>
                  </tr>
                  <tr>
                    <th>Music:</th>
                    <td>Lorem ipsum.</td>
                  </tr>
                  <tr>
                    <th>Games:</th>
                    <td>Lorem ipsum.</td>
                  </tr>
                  <tr>
                    <th>Television:</th>
                    <td>Lorem ipsum.</td>
                  </tr>
                  <tr>
                    <th>Movies:</th>
                    <td>Lorem ipsum.</td>
                  </tr>
                  <tr>
                    <th>Books:</th>
                    <td>Lorem ipsum.</td>
                  </tr>
                  <tr>
                    <th>Heroes:</th>
                    <td>Lorem ipsum.</td>
                  </tr>
                </table>
              </section>
            </div>

            <div>
              <section class="window">
                <h2>
                  PO's Blurbs
                </h2>
                <div class="loglist">
                  <b>About me:</b>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum turpis sed nisl ornare, nec venenatis mi pretium. Ut fringilla risus vel tincidunt gravida. Vestibulum ac ultrices eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque condimentum sodales lectus, vel venenatis mi efficitur non. Nam porttitor lacus ac augue ornare, vel blandit orci facilisis. Nullam sit amet nisl vel enim porttitor imperdiet eu consequat ligula. Etiam lectus justo, varius non purus et, semper sagittis nisi. Morbi euismod arcu ut nisl commodo accumsan. Sed ut viverra ipsum, at tempor felis. Mauris non ipsum quis neque pretium pulvinar at in eros. Etiam fringilla turpis nec metus convallis, in porttitor lectus mollis. Mauris fringilla ornare tincidunt. Aliquam porta finibus eleifend. </p>
                </div>

                <div class="loglist">
                  <b>Who I'd like to meet:</b>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum turpis sed nisl ornare, nec venenatis mi pretium. Ut fringilla risus vel tincidunt gravida. Vestibulum ac ultrices eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque condimentum sodales lectus, vel venenatis mi efficitur non. Nam porttitor lacus ac augue ornare, vel blandit orci facilisis. Nullam sit amet nisl vel enim porttitor imperdiet eu consequat ligula. Etiam lectus justo, varius non purus et, semper sagittis nisi. Morbi euismod arcu ut nisl commodo accumsan. Sed ut viverra ipsum, at tempor felis. Mauris non ipsum quis neque pretium pulvinar at in eros. Etiam fringilla turpis nec metus convallis, in porttitor lectus mollis. Mauris fringilla ornare tincidunt. Aliquam porta finibus eleifend. </p>
                </div>
              </section>

              <section class="window">
                <h2>
                  PO's ChumpRoll
                </h2>
                <div class="loglist">
                  <p><b>Displaying 6 of 11 chumps</b></p>
                  <section class="loglist chump" style="color: #e02413;">
                    <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
                    displayName
                  </section>
                  <section class="loglist chump" style="color: #e02413;">
                    <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
                    displayName
                  </section>
                  <section class="loglist chump" style="color:#e02413">
                    <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
                    displayName
                  </section>
                  <section class="loglist chump" style="color: #e02413;">
                    <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
                    displayName
                  </section>
                  <section class="loglist chump" style="color: #e02413;">
                    <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
                    displayName
                  </section>
                  <section class="loglist chump" style="color: #e02413;">
                    <img src="https://i.ibb.co/5WfgwBBs/pfp.png" width="100%" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
                    displayName
                  </section>
                </div>
              </section>

              <section class="window">
                <h2>
                  PO's Chump's Comments
                </h2>
                <div class="loglist" style="height: 500px;">
                  <p><b>Displaying 10 of 10 comments</b></p>
                  <section class="loglist">
                    <h2>displayName</h2>
                    <img src="https://i.ibb.co/5WfgwBBs/pfp.png" class="comment" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
                    <p>Here's a <span class="fakea">fake link</span>.</p>
                  </section>
                  <section class="loglist">
                    <h2>displayName</h2>
                    <img src="https://i.ibb.co/5WfgwBBs/pfp.png" class="comment" style="filter: drop-shadow(0px 2px #e02413) drop-shadow(0px -2px #e02413) drop-shadow(2px 0px #e02413) drop-shadow(-2px 0px #e02413);">
                    <p>Hi!</p>
                    <div class="loglist">
                      <p>Hello!!</p>
                      <b>By profileOwner</b>
                    </div>
                  </section>
                </div>
              </section>
            </div>
          </main>
      </div>

CSS

          /* Custom font */
          @font-face {
            font-family: typostuck;
            src: url('../../../../fonts/typostuck.woff') /* Download this file, and change the URL to wherever you placed the font woff. */
          }
          ::selection {
            background-color: #ff800050;
          }
          body {
            background-size: 70px;
            font-family: typostuck;
            margin: 20px;
            background-color: #000000;
            image-rendering: pixelated;
          }
          /* Trollian window */
          #trollian {
            border: 5px solid #810707;
            background-color: #4d4d4d;
            background-size: 50px;
            margin: auto;
            letter-spacing: 1.5px;
            border-radius: 20px 20px 10px 10px;
            max-width: 950px;
            background-size: 50px;
            position: relative;
          }
          .window {
            background-color: #ff5f84;
            scrollbar-color:#e02413 #cecece;
            scrollbar-width: 50px;
            padding: 5px;
            margin: 10px;
            margin-top: 45px;
            margin-bottom: 60px;
            min-height: 100px;
            border-image: url(imgs/windowborder.png); /* Download this file, and change the URL to wherever you placed it. */
            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 {
            padding: 5px;
            background-color:#e02413;
            border: 2px solid #810707;
            border-right: none;
            border-left: none;
            button {
              border-right: 2px solid #810707;
              color: #ffffff;
              border: none;
              padding: 5px;
            }
          }
          .menubar button:hover {
            color: #810707;
          }
          #windowtainer {
            display: grid;
            grid-template-columns: 35% 65%;
            overflow: auto;
            padding: 15px;
          }
          .btncontainer {
            position: absolute;
            right: 5px;
            margin-top: 20px;
            a {
              transition: 0.3s;
              text-decoration: none;
              color: #c2c2c2;
              border: 1.5px solid #c2c2c2;
              font-size: large;
              border-radius: 2px;
              text-align: center;
              padding: 5px;
              padding-left: 8px;
              margin: 5px;
            }
            a:hover {
              color: #d3d3d3;
              background-color: #00000020;
            }
          }
          .loglist {
            overflow: auto;
            border-radius: 10px;
            padding: 10px;
            margin: 5px;
            border: 2px solid #c2c2c2;
            background-color: #ffffff;
          }
          .chump {
            display: inline-block;
            width: 145px;
            margin: 1px;
            text-align: center;
            transition: 0.3s;
          }
          .chump:hover {
            background-color: #d3d3d370;
          }
          .comment {
            width: 30%;
            float: left;
            margin-right: 20px; 
          }
          header {
            border-radius: 10px 10px 0 0;
            width: 100%;
            height: 110px;
            background-image: url(imgs/trollianheader.png); /* Download this file, and change the URL to wherever you placed it. */
            background-size: cover;
          }
          /* Markup */
          table {
            text-align: left;
            border-spacing: 5px;
            border-radius: 10px;
            margin: 5px;
            border: 2px solid #c2c2c2;
            background-color:#e02413;
          }
          th, td {
            margin: 5px;
            border-radius: 10px;
            padding: 5px;
          }
          td {
            border: 2px solid #c2c2c2;
            background-color: #ffffff;
          }
          th {
            border: 2px solid #c2c2c2;
            background-color:#e02413;
            color: #ffffff;
          }
          b {
            color: #000000;
          }
          h2 {
            color: #ffffff;
            position: relative;
            border-radius: 10px;
            color: #ffffff;
            margin: 5px;
            border: 2px solid #c2c2c2;
            background-color: #ff2612;
            padding-left: 20px;
          }
          button {
            font-family: typostuck;
            font-weight: bold;
            cursor: pointer;
            font-size: 20px;
            background-color: #00000000;
          }
          /* For fake/unclickable links */
          .fakea {
            color: #0000FF;
            text-decoration: underline;
          }


          /*Responsive stuffs..*/
          @media (max-width: 950px) {
            body {
              margin: 0;
            }
            #windowtainer {
              padding: 0px;
            }
            .window {
              margin: 5px;
              margin-top: 45px;
              margin-bottom: 60px;
            }
          }
          @media (max-width: 820px) {
            #windowtainer {
              display: block;
              padding: 0px;
              border-right: none;
            }
          }
          @media (max-width: 550px){
            header {
              height: 60px;
            }
            .chump {
              width: 40%
            }
          }

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.

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

It isn't exactly accurate, but I had fun making it.

Comes with:

Pre-ripped image borders.
Pre-ripped header.
Buttons you can click.
CSS that ~~hopefully~~ doesn't clash with existing 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>
          <img title="Really shitty placeholder image." alt="Really shitty placeholder image." src="imgs/timelines.png" width="100%">
        </div>

      </main>

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

CSS

        /* Custom font */
        @font-face {
          font-family: typostuck;
          src: url(../../../../fonts/typostuck.woff); /* Download this file, and change the URL to wherever you placed the font woff. */
        }
        body {
          background-color: #1f1f1f;
          margin: 20px;
        }
        /* Trollian window */
        #trollian {
          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;
        }
        /* Trollian header and logo */
        #trollian header {
          border-radius: 10px 10px 0 0;
          width: 100%;
          height: 100px;
          background-image: url(imgs/trollianheader.png); /* Download this file, and change the URL to wherever you placed it. */
          background-size: cover;
        }
        /* Open and closing buttons */
        .menubar {
          background-color: #c2c2c2;
          padding: 5px;
          top: 0;
        }
        .btncontainer {
          position: absolute;
          right: 5px;
        }
        .btncontainer button {
          color: #c2c2c2;
          background-color: #00000000;
        }
        /* For the 2 column layout */
        #content {
          height: 600px;
          display: grid;
          grid-template-columns: 75% 25%;
        }
        /* Left column */
        #windowtainer {
          overflow: auto;
          padding: 15px;
          border-right: 5px solid #c20f00;
        }
        /* Left column content */
        .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(imgs/windowborder.png);  /* Download this file, and change the URL to wherever you placed it. */
          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; 
        }
        /* Message box */
        .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;
        }
        /* Styling for trollian boxes */
        #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;
        }
        /* Right column */
        #chumproll {
          background-color: #ff5f84;
          border: 2px solid #c2c2c2;
          border-top: none;
          border-bottom: none;
        }
        /* Pesterlogs */
        .loglist {
          overflow: auto;
          border-radius: 10px;
          padding: 10px;
          margin: 5px;
          border: 2px solid #c2c2c2;
          background-color: #ffffff;
        }
        /* Chumproll */
        #chumproll .loglist {
          height: 525px;
        }
      /*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;
          }
        }