Pierrot / Circus tent layout

a website template
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The web site of website-templates-117</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    
    
    <style>
    
    
            .body-container {
  display: grid;
  grid-template-columns: 25% 50% 25% ;
}
    
    .my-menu a {
    display: inline-block;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-decoration: none;
    text-align: center;
    background: #760325;
    color: white;
    margin-bottom: 8px;
    margin-left: 15px;
    margin-top: 8px;
    font-weight: bold;
    font-size: 10px;
    position: relative;
    z-index: 1;
    border-radius: 6px;
}

.my-menu a::before {
    display: block;
    position: absolute;
    height: 10px;
    width: 100%;
    background: #B83628;
    content: " ";
    z-index: 1;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

}

.my-menu a:hover {
    background: #B83628;
}

.my-menu a:hover::before {
    background: #D14C43;
}

.menu-text {
    position: relative;
    z-index: 2;
}

    
    
    .Pierrot {
      
      margin-top:-400px !important;
      margin-left:840px !important;
    }
    
    
    </style>
    
    
  </head>
  <body style="background-image:url(https://file.garden/aV89VHSmtyzzclPu/tumblr_inline_ml80od3eya1qz4rgp540.gif); margins:auto;">
   
   <div class="body-container" style="margin:0px;">
   <div> </div>


<div>

<img src="https://file.garden/aV89VHSmtyzzclPu/circustenttop.png" style="width:100%;">


   <div style="background-color:#C5A998; background-image:url(https://file.garden/aV89VHSmtyzzclPu/tumblr_inline_n3jly0o7X81rx7gub.png); width:65%; height:500px; margin-left:125px; margin-top:-5px; border: solid 3px #C5A998;"> 
   
   
   
   <div class="my-menu">
    <a href=""><div class="menu-text">home</div></a>
    <a href=""><div class="menu-text">blog</div></a>
    <a href=""><div class="menu-text">gallery</div></a>
    <a href=""><div class="menu-text">about</div></a>
</div>

   <div style="width:100%; height:500px; overflow:scroll; scrollbar-color: #760325 #C5A99800;
  scrollbar-width: thin; "> 
   
   <div style="width:80%; height:auto; border: solid 2px  #C5A998; margin-left:35px; padding:10px; font-size:10px; color:#760325; margin-bottom:10px;"> <p> 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.  </p> </div>
   
   
      <div style="width:80%; height:auto; border: solid 2px  #C5A998; margin-left:35px; padding:10px; font-size:10px; color:#760325; margin-bottom:10px;"> <p> 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.  </p> </div>
   
   
   
      <div style="width:80%; height:auto; border: solid 2px  #C5A998; margin-left:35px; padding:10px; font-size:10px; color:#760325; margin-bottom:10px;"> <p> 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.  </p> </div>
   
      <div style="width:80%; height:auto; border: solid 2px  #C5A998; margin-left:35px; padding:10px; font-size:10px; color:#760325; margin-bottom:10px;"> <p> 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.  </p> </div>
   
   
      <div style="width:80%; height:auto; border: solid 2px  #C5A998; margin-left:35px; padding:10px; font-size:10px; color:#760325; margin-bottom:10px;"> <p> 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.  </p> </div>
   
   
   
      <div style="width:80%; height:auto; border: solid 2px  #C5A998; margin-left:35px; padding:10px; font-size:10px; color:#760325; margin-bottom:10px;"> <p> 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.  </p> </div>
   
   
   
   </div>
   
   
   

   

   
   
   
   </div>
   
   
<img src="https://file.garden/aV89VHSmtyzzclPu/circustentbottom.png" style="width:100%;">
   
   

   
   
   
   
   
</div>
   
   
   <div> </div>
   
            <img class="Pierrot" src="https://file.garden/aV89VHSmtyzzclPu/Pierrot_TFC-removebg-preview.png" style="width:150px;" >
   
   </div>
   

   
   
   
  </body>
</html>
Editor is loading...