index.html

<!doctypehtml>
    <title>The Witcher 3 Haircut Preview</title>
    <link href=./img/tw3favicon.png rel=icon type=image/x-icon>
    <link href=https://fonts.googleapis.com rel=preconnect>
    <link href=https://fonts.gstatic.com rel=preconnect crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nova+Square&family=PT+Sans&display=swap" rel=stylesheet>
    <link href=styles.css rel=stylesheet>
    <div class=mainContent>
        <h2 class=mainHeading>THE WITCHER 3: Haircut Preview!</h2>
        <p class=description>It's little difficult to check out different hairstyles in the game.<br>This website helps
            you preview them fast!
        <table>
            <tr>
                <td style=width:40%>
                    <form name=hair>
                        <h3 class=subHeading>HAIRCUT</h3>
                        <div><label class=container><input id=lgtbh name=hair type=radio value=lgtbh checked> Loosely
                                gathered, tied behind the head <span class=checkmark></span></label></div>
                        <div><label class=container><input id=sefpt name=hair type=radio value=sefpt> Shaved except for
                                a pony tail <span class=checkmark></span></label></div>
                        <div><label class=container><input id=lal name=hair type=radio value=lal> Long and loose <span
                                    class=checkmark></span></label></div>
                        <div><label class=container><input id=lnl name=hair type=radio value=lnl> Loose, not too long
                                <span class=checkmark></span></label></div>
                        <div><label class=container><input id=sossotpt name=hair type=radio value=sossotpt> Shaved on
                                the sides, short on top,and a pony tail <span class=checkmark></span></label></div>
                        <div><label class=container><input id=erc name=hair type=radio value=erc> The elven rebel cut
                                <span class=checkmark></span></label></div>
                    </form>
                <td style=width:50% rowspan=2><img id=preview src=./img/lgtbh_cs_C.png style=width:500px>
            <tr>
                <td>
                    <form name=musatche>
                        <h3 class=subHeading>MUSTACHE/BEARD</h3>
                        <div><label class=container><input id=cs name=mustache type=radio value=cs checked> Clean shaven
                                <span class=checkmark></span></label></div>
                        <div><label class=container><input id=fbts name=mustache type=radio value=fbts> Like a full
                                beard, trimmed short <span class=checkmark></span></label></div>
                        <div><label class=container><input id=bgsm name=mustache type=radio value=bgsm> A bushy goatee
                                and a short mustache, please <span class=checkmark></span></label></div>
                        <div><label class=container><input id=fmc name=mustache type=radio value=fmc> Friendly mutton
                                chops sound good <span class=checkmark></span></label></div>
                        <div><label class=container><input id=msp name=mustache type=radio value=msp> Want a mustache
                                and a soul patch <span class=checkmark></span></label></div>
                    </form>
        </table><br>
        <hr>
        <footer>
            <p class=footerText>By <a href=https://www.github.com/Karthikeshwar1 />Karthikeshwar</a>
        </footer>
        <script src=script.js></script>
    </div>