Fancy Title

Here's how to make an image:

This is a paragraph! Here's how you make a link: Neocities.

Here's how you can make bold and italic text.

Here's a post-it! Its height flexes based on its content.

Lorem Ipsum Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Paste this in your header

This in between your style tags, or in your stylesheet

*{
    box-sizing:border-box;
    }
    
    body{
    background-color:#E2B5BC;
    font-family:'Nanum Pen Script';
    font-size:3vmin;
    color:#4C5769;
    overflow-x:hidden;
    }
    
    h1{
    font-family:'Rock Salt';
    font-size:3vmin;
    }
    
    a{
    text-decoration:none;
    color:#4C5769;
    background:hsla(344, 34%, 64%, .75);
    }
    
    a:hover{
    font-style:italic;
    }
    
    textarea{
    width:95%;
    }
    
    .postit{
    width:15vw;
    min-height:10vh;
    background:#E7B696;
    -webkit-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -moz-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -ms-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -o-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    margin-top:2vw;
    }
    
    .curl{
    width:2vh;
    height:2vh;
    position:relative;
    top:0;
    left:0;
    float:left;
    background:linear-gradient(
    	135deg, 
    	#E2B5BC,
    	#E2B5BC 50%,
    	#C9895E 50%,
    	#E3A982 100%
    	);
    transition: all .5s ease;
    display:none;
    }
    
    .curl:before,
    .curl:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 12.5%;
    bottom: 5.8%;
    width: 70%;
    max-width: 300px;
    max-height: 100px;
    height: 55%;
    box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
    transform: skew(-10deg) rotate(-6deg);
    }
    
    .curl:after {
    left: auto;
    right: 5.8%;
    bottom: auto;
    top: 14.16%;
    transform: skew(-15deg) rotate(-84deg);
    }
    
    #nav{
    margin-left:-10vw;
    font-family:'Rock Salt';
    font-size:3vmin;
    text-align:right;
    }
    
    #nav:hover{
    box-shadow:none;
    }
    
    #nav:hover > .curl{
    display:initial;
    }
    
    #note{
    float:right;
    margin:2vw;
    height:flex;
    margin:1vw;
    }
    
    .container{
    width:97vw;
    height:97vh;
    display:inline-flex;
    margin:0 auto;
    }
    
    .cover{
    width:30vw;
    height:80vh;
    background:#E7B696;
    background-image:url('https://64.media.tumblr.com/8dd6385cb8037b7a50fed99e0f631e7b/ee1ef3a6b6893c11-25/s540x810/79ee609b095de687697d6ae74fc7b3eb61139ceb.pnj');
    background-size:450px;
    margin:auto 0;
    padding:0;
    }
    
    #left{
    border-top-left-radius:15px;
    border-bottom-left-radius:15px;
    margin-left:13.5vw;
    }
    
    #right{
    border-top-right-radius:15px;
    border-bottom-right-radius:15px;
    -webkit-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -moz-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -ms-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -o-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    }
    
    .postitpad{
    display:block;
    margin:0;
    }
    
    .titlebox{
    min-width:15vw;
    min-height:10vh;
    margin:-15vh 7.5vw;
    padding:5px;
    padding-bottom:1vh;
    background:#F2DFD9;
    outline:1px solid #4C5769;
    border-radius:25px;
    outline-offset:-3px;
    }
    
    .polaroid{
    width:20vw;
    height:20vw;
    background-image:url('https://www.w3schools.com/css/img_5terre.jpg');
    filter:grayscale(75%);
    background-size:cover;
    background-position:center center;
    border:10px solid white;
    border-bottom:30px solid white;
    -webkit-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -moz-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -ms-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    -o-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
    margin:0;
    margin-top:17vh;
    padding:0;
    transform:rotate(-10deg);
    z-index:0
    }
    
    #clip{
    max-width:60px;
    position:absolute;
    top:4vw;
    left:-1vw;
    z-index:1;
    transform:rotate(-90deg);
    }
    
    .binding{
    width:10vw;
    height:80vh;
    background-color: #353b4a;
    background-image: url("https://www.transparenttextures.com/patterns/classy-fabric.png");
    margin:auto 0;
    }
    
    .page{
    width:33vw;
    height:78vh;
    overflow-y:auto;
    overflow-x:hidden;
    background:linear-gradient(to bottom,white 29px,#00b0d7 1px);
    margin:1vh 0;
    margin-left:-5vw;
    background-size:100% 30px;
    line-height:31px;
    font-size:25px;
    vertical-align:bottom;
    position:relative;
    padding:0;
    padding-left:5%;
    border-radius:5px;
    }
    
    .page>header{
    height:10vh;
    width:115%;
    background:white;
    position:relative;
    top:0;
    left:-11%;
    }
    
    .page>header>h1{
    font-size:30px;
    line-height:60px;
    vertical-align:bottom;
    padding-left:10%;
    }
    
    @media screen and (orientation:portrait){
      body{
      overflow:hidden;
      }
      
      .postit{
      width:20vw;
      }
      
      #nav{
      height:3vh;
      margin-left:0;
      }
      
      .container{
      display:inline-block;
      overflow-x:hidden;
      height:100vh;
      padding-bottom:2vh;
      padding-top:7vh;
      }
      
      .cover{
      width:80vw;
      height:93vh;
      margin-left:10vw;
      }
      
      #left{
      background-image:none;
      background:#E2B5BC;
      height:25vh;
      width:100vw;
      margin:0 auto;
      display:inline-flex;
      justify-content:space-evenly;
      }
      
      .titlebox{
      margin:0;
      background:#FeDFD9;
      border-radius:0;
      outline:none;
      -webkit-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
      -moz-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
      -ms-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
      -o-box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
      box-shadow:3px 3px 3px rgba(0,0,0,.2),0px 0px 6px rgba(0,0,0,.2);
      }
      
      .polaroid{
      margin-top:2vh;
      }
      
      #clip{
      display:none;
      }
      
      .binding{
      display:none;
      }
      
      #right{
      padding-top:.3vh;
      }
      
      .page{
      width:75vw;
      height:91vh;
      margin-left:0;
      }
      
    }
    
    ::-webkit-scrollbar{
    width:2vw; 
    }
     
    ::-webkit-scrollbar-track{
    background-color:transparent;
    }
     
    ::-webkit-scrollbar-thumb{
    background-image:url('https://64.media.tumblr.com/03cfca9071ea779aa964724754be1c9d/b710e2ed2045851c-dc/s1280x1920/0ee6b8bbe605d4703212996b50034eaec77b5aac.pnj');
    background-size:contain;
    background-position:center center;
    background-repeat:repeat;
    }

And this in your body

<div class="container">
    <div class="cover" id="left">
    <div class="postitpad">
    <a href="/index">
      <div class="postit" id="nav">
      <div class="curl"></div>
      Home</div>
    </a>
    <a href="">
      <div class="postit" id="nav">
      <div class="curl"></div>
      Example
      </div>
    </a>
    </div>
    <div class="titlebox">
    <p>Here's how to make a list:</p>
    <ul>
      <li>First thing</li>
      <li>Second thing</li>
    </ul>
    </div>
    <div class="polaroid">
    <img id="clip" src="https://yesterweb.org/img/bb/paperclip.png">
    </div>
    </div>
    
    <div class="binding"></div>
    
    <div class="cover" id="right">
    <div class="page">
    <header><h1>Fancy Title</h1></header>
    Here's how to make an image:<br>
    <img style="float:left; width:20%;" src="https://images.vexels.com/media/users/3/202315/isolated/preview/7fb3c4ef9e3869af7d0985811efce923-small-leaf-doodle.png">
    <p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p>
    <p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>
    <div class="postit" id="note">
    Here's a post-it! Its height flexes based on its content.
    </div>
    <p>Lorem Ipsum
    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
    </div>
    </div>
    
    </div>