<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <script src="https://kit.fontawesome.com/134dd703dd.js" crossorigin="anonymous"></script>
    <title>Stewardle</title>
    <meta name="description" content="Test your F1 driver knowledge by guessing the F1 driver using the clues from your previous guesses! Inspired by Wordle, created by syhr."
</head>
<body>
    <h1>Stewardle</h1>
    <div class="board">
        <div class="row header">
            <div class="frame header"><div class="text">Driver</div></div>
            <div class="frame header"><div class="text">Geo</div></div>
            <div class="frame header"><div class="text">Team</div></div>
            <div class="frame header"><div class="text">Car<br>Num</div></div>
            <div class="frame header"><div class="text">Driver<br>Age</div></div>
            <div class="frame header"><div class="text">First<br>Year</div></div>
            <div class="frame header"><div class="text">Race<br>Wins</div></div>
        </div>
        <div class="row">
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
        </div>
        <div class="row">
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
        </div>
        <div class="row">
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
        </div>
        <div class="row">
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
        </div>
        <div class="row">
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
        </div>
        <div class="row">
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
            <div class="frame"></div>
        </div>
    </div>
    <div class="input">
        <div class="autocomplete" style="width:380px;">
            <input id="myInput" type="text" name="myCountry" placeholder="Driver">
        </div>
    </div>
    <div class="credits">
        <p style="margin-bottom: 0.25em">Inspired by <a href="https://www.nytimes.com/games/wordle/index.html" target="_blank">Wordle</a></p>
        <p style="margin-top: 0px">Created by <a href="https://sy.hr/" target="_blank">syhr</a></p>
        <a href="https://github.com/ssyyhhrr/stewardle" target="_blank"><i class="fa-brands fa-github"></i></a>
    </div>
</body>
<script src="./js/main.js"></script>
</html>