My Page

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <style>
    
    body{background: lightblue}
    
    .grid {
      display: grid; 
      margin: auto;
      border-radius: 5px;
      grid-template-areas:
      "topimage topimage"
      "head head"
      "warning warning"
      "side blinkietop"
      "side main"
      "side extra1"
      "side blinkiebottom"
      "foot foot";
      grid-template-columns: 1fr 4fr;
      gap: 5px;
      width: 85%;
      background-color: dodgerblue;
      padding: 3px;
      }
      
     topimage { 
        grid-area: topimage;
        
      background-color: white;
  padding: 10px;
  text-align: center;}
  
  
      header { 
        grid-area: head;
         border-radius: 5px;
      background-color: white;
  padding: 10px;
  text-align: center;}
  
  
   warning { 
        grid-area: warning;
        border-style: inset;
      background-color: white;
  padding: 10px;}
  
      aside { 
        grid-area: side;
         border-radius: 5px;
      background-color: white;
  padding: 10px;}
  
  blinkietop { 
        grid-area: blinkietop;
      background-color: white;
  padding: 10px;}
  
      main { 
        grid-area: main;
         border-radius: 5px;
      background-color: white;
  padding: 10px;}
  
  extra1 { 
        grid-area: extra1;
         border-radius: 5px;
      background-color: white;
  padding: 10px;}
  
   blinkiebottom { 
        grid-area: blinkiebottom;
      background-color: white;
  padding: 10px;}
  
      footer { 
        grid-area: foot;
         border-radius: 5px;
      background-color: white;
      padding: 10px;
  text-align: center;}
  
  #pagedoll {
  position: fixed;
  width: 15%;
  top: 50%;
  right:5%;
}
    </style>
  </head>
  
  <body>

<div class= "grid">
  
  <topimage>IMAGE GOES HERE</topimage>
  
  <header>navbar</header>
  
  <warning>warning!</warning>

<aside><a href="#">Link 1</a>
  <br>
  <a href="#">Link 1</a>
  <br>
  <a href="#">Link 1</a>
  <br>
  <a href="#">Link 1</a>
  <br>
  <a href="#">Link 1</a>
  <br>
  </aside>
  
   <blinkietop><p>blinkies</p></blinkietop>

<main></main>
  
  <extra1>extra stuff here!</extra1>
  
  <blinkiebottom><p>blinkies</p></blinkiebottom>
  
  <footer>footer</footer>

</div>
  
  <img id="pagedoll" src="IMAGE GOES HERE" alt="pagedoll- change sizing when needed">
  
  
  </body>
</html>