sandolayout

<html>
<head>
<style>
    body {
        font-size: 10px;
font-family: tahoma;
letter-spacing: 1px;
line-height: 11px;
color:#f58e8e;
background: linear-gradient(90deg, transparent 24%,#FFFFFF 25%, #FFFFFF 30%, transparent 31%, transparent 39%,#FFFFFF 40%, #FFFFFF 45%, transparent 45%),linear-gradient(180deg, transparent 24%,#FFFFFF 25%, #FFFFFF 30%, transparent 31%, transparent 39%,#FFFFFF 40%, #FFFFFF 45%, transparent 45%);
background-size: 6em 6em;
background-color: #fcecf6;
opacity: 1;
  background-repeat:repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  min-height: 100vh;
    }

.header{
position: fixed;
margin-top: -505px;
margin-left: 16.5%;
z-index: 4;
}

h1{
  font-size: 40px;
  color:#f84a4a;
text-shadow: 4px 3px 0px rgba(255, 250, 240, 0.548);
font-family: MS 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  background-color: rgb(255, 228, 197);
  padding: 20px;
  border: 1px solid #fc4f94;
}

.sandwich{
background-image: url("images/strawsando-export.png");
background-color: rgb(248, 242, 242);
background-repeat: no-repeat;
background-size:contain;
border: 2px dotted rgb(255, 192, 75);
height: 450px;
width: 600px;
position: absolute;
z-index: 5;
}

.textcontainer{
    width: 180px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    word-wrap: break-word;
    overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #fb7185 #fff9f100;

}
.navbar {
    position:absolute;
    display: flex;
    justify-content: center;
    margin-top: 28%;
    padding: 14px;
    column-gap: 6px;
}
.nav-btn {
position: relative;
padding: 0 17px;
border-radius: 4px;
color: #f16767;
font-size: 12px;
 font-weight: bold;
  text-decoration: none;
letter-spacing: 1px;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
box-shadow: 1px 1px 3px rgba(223, 141, 141, 0.712);
transition: all 0.2s;
cursor: pointer;
background-color: rgb(255, 228, 197);
background-size: 20px 20px;
background-position: center;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
 }

</style>
</head>
<body>
<div class="header">
<h1>いちごサンド</h1>
</div>


<div class= "sandwich">
<div class="textcontainer">
<h2>HI!</h2>
<img src="https://dl.glitter-graphics.com/pub/989/989327l93at20bl8.gif"><br><br>
This is my strawberry sando pixel style layout!<br>
This is a super small site but would be cute for a basic blog/someone who feels overwhelmed with bigger pages.<br>
Here are some styling examples:<br>
<h3>Title three</h3>
<h3>Title four</h3>
Whipped cream divider<br><br>
<img src="images/whipp.png" width="160px">

</div>

</div>
<div class="navbar">
      <a href="#home" class="nav-btn button-home" onclick="showSection('home', event)">Home

      </a>
      <a href="#about" class="nav-btn button-about" onclick="showSection('about', event)">About</a>
      <a href="#more" class="nav-btn button-more" onclick="showSection('more', event)">Fruit</a>
      <a href="#more" class="nav-btn button-more" onclick="showSection('more', event)">Sandwich</a>
      <a href="#more" class="nav-btn button-more" onclick="showSection('more', event)">Friends</a>
</div>

</body>
</html>