Axolotls' Website

I didn't say the websites were gonna be good

<!DOCTYPE html>
<html>
<head>
  <title>Axolotls's Website</title>
  <link rel="icon" type="image/x-icon" href="images/favicontinytest.png">
  <meta charset="utf-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&amp;display=swap" rel="stylesheet">

   <style>

    content{
        position:relative;
    }

    code{
        font-family: 'Comic Sans MS', cursive;
        font-weight: bolder;
        font-size: 2em;

        /*you can do any kind of gradient you want with this code chunk*/
        background-image: linear-gradient( #E3E3FF, #DFF2FD, #E2FCE6, #FCFADE, #FFEEE2, #FFDBDB);
        color: transparent;
        background-clip: text;
        display: inline-block;
        z-index: 100;
        position:relative;
    }

        .rect {
        position: absolute;
        border-radius: 25px;
        }

        .rect:nth-child(1) {
        top: 60%;
        left: 0%;
        width: 100%;
        height: 42%;
        background: rgba(141, 212, 202, 0.2); /* rgba supports TRANSPARENCY*/
        }
        .rect:nth-child(2) {
        top: 47%;
        left: 30%;
        width: 76%;
        height: 100%;
        background: rgba(139, 35, 134, 0.2);
        }
        .rect:nth-child(3) {
        top: 5%;
        left: 47%;
        width: 40%;
        height: 30%;
        background: rgba(159, 81, 95, 0.2);
        }
        .rect:nth-child(4) {
        top: 84%;
        left: 0%;
        width: 20%;
        height: 80%;
        background: rgba(159, 0, 0, 0.2); /* rgba supports TRANSPARENCY*/
        }
        .rect:nth-child(5) {
        top: 50%;
        left: 55%;
        width: 38%;
        height: 72%;
        background: rgba(0, 159, 0, 0.2);
        }
        .rect:nth-child(6) {
        top: 30%;
        left: 44%;
        width: 100%;
        height: 65%;
        background: rgba(0, 0, 159, 0.2);
        }



   </style>

</head>
<body>

<div class = "content"> 


    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
    <p>I didn't say the websites were gonna be <strong>good</strong></p>
  <pre><code>
    the code for the actual website is gonna
    go in here! super cool and stuff.
    This is just a test block  
    &lt;!DOCTYPE html&gt;
        &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;Axolotls's Website&lt;/title&gt;
             &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;images/favicontinytest.png&quot;&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
        &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&amp;amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
</code></pre>
</div>


</body>
</html>