Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>layout seven</title>
        <style>
            :root{
                /* backgrounds */
                --bodybg: url("https://file.garden/aKM6cgV5eixaX8Eq/0211.gif");
                --navbg: url("https://file.garden/aKM6cgV5eixaX8Eq/tcoun2.gif");
                --listbg: url("https://file.garden/aKM6cgV5eixaX8Eq/tumblr_5e3e3cab218dc9d1c369613712ecd115_4cfd06cd_75.gif");
            }
            @font-face{
                font-family: one;
                src: url("https://file.garden/aKM6cgV5eixaX8Eq/rainyhearts.ttf");
            }
            *{
                /* default styling */
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: one;
            }
            body{
                background: var(--bodybg);
            }
            .container{
                position: relative;
                width: 700px;
                height: 100vh;
                margin: 0 auto;
                display: grid;
                grid-template-areas:
                "h h h h h h"
                "n n m m m m"
                "n n 1 1 2 2"
                ". . 3 3 3 3"
                "f f f f f f";
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: repeat(5, 1fr);
                gap: 10px;
            }
            header, nav, main, section, footer {
                border: 1px solid;
                background: white;

            }
            header{
                grid-area: h;
                grid-column: 1/ 7;
                position: relative;
                background: none;
                border: none;
                height: 150px;
            }
            @font-face{
                font-family: two;
                src: url("https://file.garden/aKM6cgV5eixaX8Eq/KINKIE__.TTF");
            }
            header h1{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: two;
                font-size: 4em;
                background: linear-gradient(white 30%, pink);
                background-clip: text;
                -webkit-text-fill-color:transparent;
                -webkit-text-stroke:0.7px hotpink;
            }
            nav{
                grid-area: n;
                border-radius: 20px 20px 0 0;
                background: url("https://file.garden/aKM6cgV5eixaX8Eq/tcoun2.gif");
                border: 10px pink solid;
                outline: 3px white ridge;
                box-shadow: inset 0 0 0 7px #ffffa8;
            }
            nav h2{
                text-align: center;
                color: hotpink;
            }
            menu{
                list-style-position: inside;
                margin: 0 5px;
                list-style-image: var(--listbg);
            }
            menu li{
                background: pink;
                margin-bottom: 10px;
                padding: 5px;
                text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
                border-radius: 20px 40px 0 20px;
                transition: all 0.3s;
            }
            menu li:hover{
                transform: scale(0.9);
                cursor: pointer;
                background: #f393c3;
                transition: all 0.3s;
            }
            main{
                grid-area: m;
                border:10px solid pink;
                box-shadow: inset 0 0 0 7px #ffffa8;
                outline: 3px white ridge;
                border-radius: 20px 20px 0 0;
                background: #f5f5d0;
                color: hotpink;
                text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
            }
            main p{
                margin: 10px;
                text-indent: 40px;
            }
            .one {
                grid-area: 1;
                grid-row: 3/4;
                grid-column: 3/5;
            }
            .two{
                grid-area: 2;
                grid-row: 3/4;
                grid-column:5/7 ;
            }
            .one, .two{
                border-radius: 20px;
                border:10px solid pink;
                box-shadow: inset 0 0 0 7px #ffffa8;
                outline: 3px #ffffa8 groove;
                background: #f5f5d0;
                color: hotpink;
                text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
                padding: 5px;
                text-align: center;
            }
            .three{
                grid-area: 3;
                grid-row: 4 /5;
                grid-column: 3/ 7;
                height: max-content;
                text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
                background: none;
                border: none;
            }
            footer{
                grid-area: f;
                grid-row: 5/5;
                position: absolute;
                bottom: -80px;
                height: 100px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: none;
                border: none;
                backdrop-filter: blur(4px);
                text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
                border-top: 2px hotpink dashed;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>Site title</h1>
            </header>
            <nav>
                <h2>navigation</h2>
                <menu>
                    <li>link</li>
                    <li>link</li>
                    <li>link</li>
                    <li>link</li>
                </menu>
                <p style="text-align:center; margin-top:30px;">put something here</p>
            </nav>
            <main>
                <p>
                    Pie toffee marzipan cotton candy apple pie cake shortbread chupa chups. Tart pastry pie pastry donut fruitcake croissant. Halvah lollipop liquorice jelly-o tiramisu muffin. Biscuit candy danish bonbon cupcake caramels. Chocolate bar caramels cheesecake chupa chups marzipan. Cake gummi bears jelly-o shortbread gingerbread jelly beans. Cake sesame snaps gummi bears lollipop gummi bears icing biscuit. Powder cake pastry jelly bear claw danish. Chupa chups chocolate cake pastry jelly-o halvah cake danish bear claw caramels. Jelly beans apple pie jelly cake sweet roll icing.
                </p>
            </main>
            <section class="one">
                Dragée liquorice sesame snaps muffin pastry biscuit gummi bears. Chocolate cake ice cream gummies toffee sugar plum cake. Wafer croissant topping chocolate sesame snaps biscuit. Lemon drops candy gummies soufflé liquorice.
            </section>
            <section class="two">
                Pudding liquorice powder bonbon tart jelly beans gingerbread. Muffin caramels bear claw bonbon caramels pudding muffin brownie icing. Lemon drops pie lemon drops biscuit topping.
            </section>
            <section class="three">
                <marquee behavior="alternate">write something here</marquee>
            </section>
            <footer>
                <p>ur site here || 2025-forever and more</p>
            </footer>
        </div>
    </body>
</html>