FanFic.Text Archive Layout

  <style>
  #pagecontent {
  height: auto;
  max-width: 820px;
  padding: 3px;
}

#content {
  background: url();
  height: auto;
  max-width: 820px;
  background-color: #F8F5F1;
  font-size: 17px;
  letter-spacing: 1px;
  border: 3px solid #221E1C;
  border-radius: 3px;
  float: center;
}

#fictxt {
  padding: 0px;
  font-size: 17px;
  letter-spacing: 1px;
  float: center;
  margin-right: 2%;
  margin-left: 2%;
}

#nav {
  border-bottom: 1px dashed #000;
  font-size: 22px;
}

body {
  background: url();
  background-color: #8D818C;
  color: #171412;
  font-size: 16px;
  font-family: "Georgia", serif;
  margin: 0 auto; /* centers the text */
  max-width: 1000px; /* defines the maximum width of your text */
  /*text-align:center;*/
}

hr.solid {
  border: 1px solid #5A5049;
}

.center {
  text-align: center;
  padding: 70px 0;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #903a44;
}
::-webkit-scrollbar-thumb {
  background: #450712;
}

p {
  margin-right: 5%;
  margin-left: 5%;
}

.h {
  border-bottom: 1px solid #000;
  padding: 5px;
  font-size: 29px;
  color: #F8F5F1;
  background-color: #2D434E;
}

li {
  display: inline-block;
  padding: 5px;
  font-size: 16px;
}

a:link {
  color: #CA2E55;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #CA2E55;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #6C969D;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: blueviolet;
  background-color: transparent;
  text-decoration: underline;
}

  </style>
  <body>
<center>
  <div id="pagecontent">
    <div id="content">
      <div class="h"><h>FanFic.Text Archive Layout</h></div>
      <div id="nav">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
      </div>
      <div id="fictxt">
        <p>
          <h1>Lorem Ipsum</h1>
        <h3>Chapter One</h3>
        <hr class="solid">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum ex nec turpis porttitor sagittis. Duis consequat elementum dignissim. Duis imperdiet, neque quis eleifend viverra, lectus sapien dignissim mi, sed fermentum elit velit at metus. Morbi enim ipsum, lacinia sit amet iaculis eget, semper eu erat. Quisque sollicitudin tortor at dictum imperdiet. Aliquam pulvinar arcu massa, et mattis lacus pharetra vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum condimentum tortor non nibh congue hendrerit.</p>

        <p>
In accumsan nisi augue, quis pulvinar ligula lacinia vel. Phasellus sodales augue ac massa ornare porttitor. Sed tempor aliquet nisi. Phasellus odio ligula, pellentesque in tortor in, malesuada consectetur turpis. Proin a aliquet tellus, vestibulum facilisis risus. Nullam malesuada viverra porttitor. Fusce et purus scelerisque, pretium nisl in, ullamcorper sem. Maecenas eget blandit felis, vitae vestibulum nulla. Nunc in venenatis erat. Nam tempor et nulla pretium iaculis. Morbi laoreet, lectus vitae tempus aliquet, velit nunc dignissim nunc, non ultricies sapien odio eget tellus.</p>

        <p>
Nam magna metus, varius non dolor nec, tincidunt eleifend massa. Nunc erat tortor, consequat at purus eget, vehicula ultricies nulla. Vivamus euismod, velit sed faucibus feugiat, eros tortor commodo eros, eu molestie risus orci pretium velit. Phasellus blandit, mi eget interdum vulputate, dolor urna ullamcorper sem, at gravida urna erat vitae sem. Etiam ornare mauris tortor, ac pellentesque mauris rutrum id. Nullam vel mauris quis nibh ullamcorper congue. Donec ex ligula, hendrerit fringilla libero in, imperdiet facilisis est. Integer ac iaculis massa, eu viverra neque. Cras nibh odio, imperdiet in metus id, pellentesque pulvinar justo. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum vel orci in auctor. Etiam neque tortor, rutrum eu volutpat eget, blandit ut mi. Vestibulum ullamcorper luctus urna nec lacinia. Nullam id dapibus sapien, non hendrerit tellus. Sed non porttitor orci.</p>
        <p>Aenean non viverra lectus. Donec arcu ex, porttitor sed scelerisque non, ultrices a nulla. Suspendisse euismod tincidunt arcu ac congue. Cras et urna purus. Vestibulum ac nisi egestas, feugiat lorem venenatis, luctus libero. Vivamus varius maximus nunc, non ultrices nunc laoreet a. Vivamus sed orci interdum, lacinia justo sit amet, ultrices eros. Fusce ullamcorper augue auctor elit laoreet sagittis. </p>

      <p> Suspendisse rutrum ultricies gravida. Praesent eget auctor nisl. Nam consequat blandit placerat. Nunc eleifend, augue id lobortis sagittis, mi urna consequat orci, eget congue risus nulla ut nulla. Proin a leo ac nulla iaculis vestibulum suscipit vitae tortor. Suspendisse lacinia aliquet leo, vitae placerat libero tempor in. Nam eu mi augue. Nunc imperdiet nibh nec eros posuere, sed dapibus augue porta. Ut elementum elit enim, id mollis nisi ornare quis. Sed mollis odio odio, quis lacinia felis tempor a.</p>

<p>Duis bibendum eros id lorem blandit sagittis. Vestibulum fermentum ipsum id augue consequat condimentum. Sed lorem ipsum, maximus ac porta quis, porttitor eget est. Suspendisse mattis accumsan ligula et volutpat. Vestibulum id elementum mi. Nullam ornare tristique consequat. Fusce cursus elit tellus, eu sodales lectus accumsan sit amet. </p>
      <p>To be continued...</p>
      <hr class="solid">
      <p><a href="#top">Back to top!</a></p>
    </div>
    </div>
  </div>
</center>
  </body>