Characters

Char. 1

Word of warning: If you chose to use Neocities as a host, note that people can see your updates! To avoid this, go to your settings and change your profile visibilty

Char. 2

Plug this into your header: This into your style sheet or between your style tags:

body {
  font-family:'Nunito', sans-serif;
  margin:0;
  background:black;
  font-family:"Bebas Neue";
  overflow-x:hidden;
  }
  
  p{
  padding-right:75vw;
  margin:0;
  }
  
  h1{
  font-size:15vmin;
  font-weight:800;
  color:#e09200;
  text-align:right;
  margin:0;
  }
  
  h2{
  font-size:10vmin;
  font-weight:600;
  color:#e09200;
  text-align:right;
  margin:0;
  }
  
  h3{
  font-size:25vh;
  line-height:20vh;
  background:black;
  color:white;
  padding:0;
  display:inline;
  }
  
  h4{
  text-align:right;
  color:#ffa880;
  margin:0;
  margin-right:1vw;
  padding:0;
  }
  
  h5{
  margin:0;
  padding:0;
  font-size:4vh;
  }
  
  button{
  width:18vw;
  height:4.5vh;
  margin:.1vw;
  border-radius:25px;
  color:black;
  background:#7a7aff;
  font-family:"Bebas Neue";
  border:none;
  }
  
  textarea{
  width:97%;
  background:black;
  color:white;
  border:1px solid #de7aff;
  }
  
  a{
  text-decoration:none;
  }
  
  a > div:hover,
  a > button:hover{
  transform:scale(1.05);
  color:white;
  }
  
  .barcontent{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow-y:auto;
  overflow-x:hidden;
  }
  
  .headertop{
  width:99vw;
  height:9vh;
  margin-bottom:1vh;
  background:#de7aff;
  color:black;
  text-align:right;
  vertical-align:bottom;
  top:0;
  }
  
  .headerbottom{
  width:99vw;
  height:10vh;
  margin:0;
  background:#7a7aff;
  color:black;
  text-align:right;
  border-bottom-left-radius:50px;
  margin-bottom:1vh;
  }
  
  .headeroverlay{
  width:75vw;
  height:19vh;
  position:absolute;
  top:0;
  right:0;
  z-index:1;
  background:black;
  color:white;
  border-bottom-left-radius:25px;
  }
  
  .headeroverlaywrapper{
  width:75vw;
  height:18.5vh;
  display:inline-flex;
  float:right;
  }
  
  .headeroverlaywrapperdivider{
  width:37vw;
  height:18.5vh;
  display:block;
  }
  
  .calwrapper{
  width:37vw;
  height:18.5vh;
  display:inline-flex;
  }
  
  .months{
  width:3vw;
  height:18.5vh;
  color:#ff837a;
  }
  
  .dayswrapper{
  display:block;
  }
  
  .calrow{
  width:34vw;
  margin:0;
  padding:0;
  }
  
  .calrow:after {
  content: "";
  clear:both;
  display:table;
  }
  
  .day{
  width:2vw;
  float:right;
  margin:0;
  }
  
  .day .active{
  background:#e09200;
  border-radius:10px;
  color:black!important
  }
  
  .day .inactive{
  background:#ff837a;
  border-radius:10px;
  color:black!important
  }
  
  .divider{
  height:9.25vh;
  width:37vw;
  }
  
  .buttons{
  width:37vw;
  display:inline-flex;
  }
  
  .bodytop{
  width:99vw;
  height:20vh;
  margin-bottom:1vh;
  background:#ff837a;
  color:black;
  text-align:right;
  vertical-align:bottom;
  top:0;
  border-top-left-radius:50px
  }
  
  .bodymiddle1{
  width:99vw;
  height:10vh;
  margin-bottom:1vh;
  background:#e09200;
  text-align:right;
  vertical-align:center;
  }
  
  .bodymiddle2{
  width:99vw;
  height:10vh;
  margin-bottom:1vh;
  background:#7a7aff;
  text-align:right;
  vertical-align:center;
  }
  
  .bodybottomrow{
  display:inline-flex;
  width:99vw;
  margin-bottom:1vh;
  z-index:-100;
  }
  
  .bodybottom1{
  width:39vw;
  height:24vh;
  margin:0;
  margin-right:1vw;
  background:#ffa880;
  color:black;
  text-align:right;
  border-bottom-left-radius:50px;
  }
  
  .bodybottom2{
  width:30vw;
  height:24vh;
  margin:0;
  margin-right:1vw;
  background:#e09200;
  color:black;
  }
  
  .bodybottom3{
  width:30vw;
  height:24vh;
  margin:0;
  background:#ff837a;
  color:black;
  border-bottom-right-radius:50px;
  }
  
  .bodybottom2 > .barcontent,
  .bodybottom3 > .barcontent{
  margin:0;
  margin-top:8.5vh;
  height:15.5vh;
  }
  
  .bodyoverlay{
  width:75vw;
  height:61vh;
  position:absolute;
  top:22.5vh;
  right:0;
  z-index:1;
  background:black;
  color:white;
  border-top-left-radius:25px;
  border-bottom-left-radius:25px;
  }
  
  .overlaycontent{
  height:39vh;
  width:73.5vw;
  margin:.5vw;
  overflow-y:auto;
  }
  
  .timelineheader{
  width:94vw;
  height:29.09vh;
  background:#7a7aff;
  border-top-right-radius:50px;
  padding-left:5vw;
  padding-top:.6vh;
  z-index:-1000;
  position:relative;
  margin-bottom:1vh;
  overflow:hidden;
  }
  
  .timelineoverlay1{
  width:80vw;
  height:12vh;
  position:absolute;
  top:118.5vh;
  left:0;
  z-index:1;
  background:black;
  color:white;
  border-top-right-radius:25px;
  margin-bottom:1vh;
  }
  
  .entrywrapper{
  width:99vw;
  height:flex;
  display:inline-flex;
  margin-bottom:1vh;
  }
  
  .timelineoverlay2{
  width:80vw;
  height:flex;
  left:0;
  top:0;
  position:relative;
  z-index:1;
  background:black;
  color:white;
  }
  
  .timelinealt1{
  width:19vw;
  height:flex;
  background:#de7aff;
  color:black;
  z-index:-1000;
  position:relative;
  }
  
  .timelinealt2{
  width:19vw;
  height:flex;
  background:#7a7aff;
  color:black;
  z-index:-1000;
  position:relative;
  }
  
  @media screen and (orientation:portrait){
    button{
    width:17.75vw;
    }
    
    .months,
    .dayswrapper,
    #headercontent{
    display:none;
    }
  }
  
  ::-webkit-scrollbar{
  width:1vw; 
  }
   
  ::-webkit-scrollbar-track{
  background-color:transparent;
  }
   
  ::-webkit-scrollbar-thumb{
  background-color:#7a7aff;
  border-radius:1vw;
  }

And this into your body:

<div class="headertop">
  <div class="barcontent" id="headercontent">
  <p>4: there are two active styles pre-programmed
  <p>12: you can add however many you want
  <p>14: or, if that sounds like a lot of work, you can change the color right in the HTML
  <p>15: don't forget unicode is great shorthand
  </div>
  </div>
  <a href="/index">
  <div class="headerbottom">
    <div class="barcontent" style="border-bottom-left-radius:50px;">
    <p>if you think the buttons are  cramped (fair), make entire divs links :)
    </div>
  </div>
  </a>
  
  <div class="headeroverlay">
  <div class="headeroverlaywrapper">
  
  <div class="headeroverlaywrapperdivider">
  
  <div class="calwrapper">
  <div class="dayswrapper">
  
  <div class="days">
    <div class="calrow">
      <div class="day">1</div>
      <div class="day">2</div>
      <div class="day">3</div>
      <div class="day"><span class="active">4</span></div>
      <div class="day">5</div>
      <div class="day">6</div>
      <div class="day">7</div>
      <div class="day">8</div>
      <div class="day">9</div>
      <div class="day">10</div>
      <div class="day">11</div>
      <div class="day"><span class="inactive">12</span></div>
      <div class="day">13</div>
      <div class="day"><span class="active" style="background:#ffa880">14</span></div>
      <div class="day">⦿</div>
      <div class="day">16</div>
      <div class="day">17</div>
      <div class="day">18</div>
      <div class="day">19</div>
      <div class="day">20</div>
      <div class="day">21</div>
      <div class="day">22</div>
      <div class="day">23</div>
      <div class="day">24</div>
      <div class="day">25</div>
      <div class="day">26</div>
      <div class="day">27</div>
      <div class="day">28</div>
      <div class="day">29</div>
      <div class="day">30</div>
      <div class="day">31</div>
    </div>
  </div>
  
  <div class="days">
    <div class="calrow">
      <div class="day">1</div>
      <div class="day">2</div>
      <div class="day">3</div>
      <div class="day">4</div>
      <div class="day">5</div>
      <div class="day">6</div>
      <div class="day">7</div>
      <div class="day">8</div>
      <div class="day">9</div>
      <div class="day">10</div>
      <div class="day">11</div>
      <div class="day">12</div>
      <div class="day">13</div>
      <div class="day">14</div>
      <div class="day">15</div>
      <div class="day">16</div>
      <div class="day">17</div>
      <div class="day">18</div>
      <div class="day">19</div>
      <div class="day">20</div>
      <div class="day">21</div>
      <div class="day">22</div>
      <div class="day">23</div>
      <div class="day">24</div>
      <div class="day">25</div>
      <div class="day">26</div>
      <div class="day">27</div>
      <div class="day">28</div>
      <div class="day">29</div>
    </div>
  </div>
  
  <div class="days">
    <div class="calrow">
      <div class="day">1</div>
      <div class="day">2</div>
      <div class="day">3</div>
      <div class="day">4</div>
      <div class="day">5</div>
      <div class="day">6</div>
      <div class="day">7</div>
      <div class="day">8</div>
      <div class="day">9</div>
      <div class="day">10</div>
      <div class="day">11</div>
      <div class="day">12</div>
      <div class="day">13</div>
      <div class="day">14</div>
      <div class="day">15</div>
      <div class="day">16</div>
      <div class="day">17</div>
      <div class="day">18</div>
      <div class="day">19</div>
      <div class="day">20</div>
      <div class="day">21</div>
      <div class="day">22</div>
      <div class="day">23</div>
      <div class="day">24</div>
      <div class="day">25</div>
      <div class="day">26</div>
      <div class="day">27</div>
      <div class="day">28</div>
      <div class="day">29</div>
      <div class="day">30</div>
      <div class="day">31</div>
    </div>
  </div>
  
  </div>
  
  <div class="months">
  Jan<br><br>
  Feb<br><br>
  Mar
  </div>
  
  </div>
  
  </div>
  
  <div class="headeroverlaywrapperdivider">
  
  <div class="divider"><h2>LCARS</h2></div>
  <div class="divider">
    <div class="row">
      <a href="/index"><button>home</button></a>
      <button style="background:#ffa880;">soc</button>
      <button style="background:#e09200;">host</button>
      <button>host</button>
    </div>
  </div>
  </div>
  
  </div>
  </div>
  
  <div class="bodytop">
    <div class="barcontent" style="border-top-left-radius:50px;">
    <p>         If you want to use the corner elements, you can style the content div in such a way that that corners are rounded as well. Unfortunately, that doesn't auto wrap the text. But you can keep it legible by adding blank spaces.
    </div>
  </div>
  <div class="bodymiddle1"></div>
  <div class="bodymiddle2"></div>
  <div class="bodymiddle1">
    <div class="barcontent">
      <p>These are just some little guys but you can use them too.<br>
      <p>For all entries in these left hand displays, make sure to use the p tag! If you don't, your text will be hidden behind the overlay on the right.
    </div>
  </div>
  <div class="bodybottomrow">
    <div class="bodybottom1"></div>
    <div class="bodybottom2">
      <div class="barcontent">
      <h5>Themes</h5>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
    <div class="bodybottom3">
      <div class="barcontent">
      <h5>Motifs</h5>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
  </div>
  
  <div class="bodyoverlay">
    <h1>Characters</h1>
    <div class="overlaycontent">
    <h2>Char. 1</h2>
    </div>
    </div>
    
    <div class="timelineheader"><h3>Timeline</h3></div>
    <div class="timelineoverlay1"></div>
    
    <div class="entrywrapper">
    <div class="timelineoverlay2">
    <h4>Chapter One</h4>
    <ul>
      <li>I'm and unorganized list
        <ul>
          <li>And I'm a list within a list</li>
          <li>To accomplish this, start a new list <u>before</u> closing the li tag</li>
        </ul>
      </li>
    </ul>
    </div>
    <div class="timelinealt1">2024.0414</div>
    </div>
    
    <div class="entrywrapper">
    <div class="timelineoverlay2">
    <h4>Chapter Two</h4>
    <ol>
      <li>I'm an organized list</li>
      <li>I'm proper organized, me</li>
    </ol>
    </div>
    <div class="timelinealt2">2024.0414</div>
    </div>
    
    <div class="entrywrapper">
    <div class="timelineoverlay2">
    Add however many of these you want!
    </div>
    <div class="timelinealt1"></div>
    </div>
    
    <div class="entrywrapper">
    <div class="timelineoverlay2">
    In whatever color you want!
    </div>
    <div class="timelinealt1"></div>
    </div>
    
    <div class="entrywrapper">
    <div class="timelineoverlay2">
    Unlike the body section, which needed to end somewhere, this can go on ad infinitum and are fully flexible
    </div>
    <div class="timelinealt2"></div>
    </div>