<script>
    import Logo from "$lib/img/topscorer_logo_web.png"
</script>

<div class="header">
    <img class="img" src={Logo} alt="logo">
    <span class="title">title</span>
</div>

<div class="heat">
    <form action="" method="post">
        <label for="name">Name</label>
        <input id="name" type="text">
        <label for="category">Category</label>
        <input id="category" type="text">
    </form>
</div>

<div class="surfer">
    <form action="" method="post">
        <label for="firstname">Firstname</label>
        <input id="firstname" type="text">
        <label for="lastname">Lastname</label>
        <input id="lastname" type="text">
        <label for="color">Color</label>
        <input id="color" type="text">
    </form>
    <button>+</button>
</div>

<style>
    .header {
        background-color: black;
        color: aliceblue;
        display: inline-flex
    }

    .header .img {
        height: 3rem;
    }

    .header .title {
        font-size: 3rem;
    }

    .heat {
        margin-top: 2px;
        margin-bottom: 2px;
        background-color: #111;
        color: lightcyan;
        display: flex;
    }

    .surfer {
        margin-top: 2px;
        margin-bottom: 2px;
        background-color: #111;
        color: lightcyan;
        display: flex;
    }

</style>