Happylent Feedback

by paulftw

HTML

<div>
    <h1>{{firstname}}, help us improve Happylent!</h1>
    
    <p>Some time ago you bought {{count}} meals of Happylent and we'd love to know what you think of it.</p>
    
    <p>Please rate your experience:</p>
    
    <ul class=quiz>
        <li>
            <table><tr><td>
            <span class="number one">
                <a href="http://happylent.com.au/poll/{id}?r1">
                    &#9733;&#x2606;&#x2606;&#x2606;&#x2606;
                </a>
            </span>
            </td><td>
            <a href="http://happylent.com.au/poll/{id}?r1">
                Still a lot of work to be done.
            </a>
                </td></tr></table>
        </li>

        <li>
            <table><tr><td>
            <span class="number two">
                <a href="http://happylent.com.au/poll/{id}?r2">
                    &#9733;&#9733;&#x2606;&#x2606;&#x2606;
                </a>
            </span>
            </td><td>
            <a href="http://happylent.com.au/poll/{id}?r2">
                I expected more, but can see some potential.
            </a>
                </td></tr></table>
        </li>

        <li class=disabled>
            <table><tr><td>
                <span class="number three">
                    &#9733;&#9733;&#9733;&#x2606;&#x2606;
            </td><td>
                </span> No sitting on the fence in this poll
                </td></tr></table>
        </li>

        <li>
            <table><tr><td>
            <span class="number four">
                <a href="http://happylent.com.au/poll/{id}?r4">
                    &#9733;&#9733;&#9733;&#9733;&#x2606;
                </a>
            </span>
            </td><td>
            <a href="http://happylent.com.au/poll/{id}?r4">
                Pretty good, some minor tweaks and it'll be perfect.
            </a>
                </td></tr></table>
        </li>

        <li>
            <table><tr><td>
            <span class="number five">
                <a...

CSS

h1 {
    font-size: 24px;
}

.quiz {
    list-style: none,
}

.quiz, .quiz > li {
    margin: 0;
    padding: 0;
}

.quiz > li {
    margin: 2px;
    font-size: 16px;
    display: block;
}

.quiz table {
    width: 100%;
    max-width: 500px;
}

.quiz table tr {
    border: 1px solid #ccc;
    border-radius:2px;
    display: block;
}

.quiz table td {
  padding: 0;
}

.quiz > li  .number {
    font-size: 16px;
    background-color: #eee;
    height: 32px;
    line-height: 32px;
    width: 96px;
    display: inline-block;
    text-align: center;
    margin: 4px;
    border-radius: 2px;
}

.quiz > li.disabled {
    color: #999;
}

.quiz > li a {
    text-decoration: none;
}

.quiz > li  .number a {
    text-decoration: none;
}

.quiz > li  .number.one {
    background-color: rgba(255, 50, 50, 0.1);
}

.quiz > li  .number.two {
    background-color: rgba(255, 255, 0, 0.2);
}

.quiz > li  .number.four {
    background-color: rgba(150, 255, 0, 0.2);
}

.quiz > li  .number.five {
    background-color: rgba(25, 255, 25, 0.3);
}

.quiz > li  .number.five a {
    
    text-decoration: none;
}