Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>index - unit 4 list intro</title>
        <style>
            ul{
                list-style-type: square;
                background-color: silver;
                padding: 1%;
            }

            ol{
                list-style-type: cjk-decimal;
                background-color: gold;
                padding: 1%;
            }

            li{
                background-color: skyblue;
                margin: 1%;
            }

            table{
                background-color: darkslategray;
            }
            thead{
                background-color: oldlace;
            }

            tfoot{
                background-color: oldlace;
            }

            tbody{
                background-color: salmon;
            }

            th{
                color: navy;
            }

            td{
                color: red;
            }

        </style>
    </head>
    <body>
        <header>
            <h1>2020-21 NFL Playoff Picture</h1>
        </header>

        <nav>

        </nav>

        <article>
            <h2>Packers Number 1 Seed</h2>

            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul><!--End  outer most UL-->

            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ol>

            <table>
                <thead>
                    <tr><!--open table head row-->
                        <th>
                            Player
                        </th>
                        <th>
                            Pass Yds
                        </th>
                        <th>
                            Yds/Att
                        </th>
                        <th>
                            Att
                        </th>
                        <th>
                            Cmp
                        </th>
                        <th>
                            Cmp%
                        </th>
                        <th>
                            TD
                        </th>
                        <th>
                            INT
                        </th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td>
                            Averages
                        </td>
                        <td>
                            Averages
                        </td>
                        <td>
                            Averages
                        </td>
                        <td>
                            Averages
                        </td>
                        <td>
                            Averages
                        </td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>row 1 cell 1</td>
                        <td>row 1 cell 2</td>
                        <td>row 1 cell 3 more data in here</td>
                        <td>row 1 cell 4</td>
                        <td>row 1 cell 5</td>
                    </tr>
                    <tr>
                        <td>row 2 cell 1</td>
                        <td>row 2 cell 2</td>
                        <td>row 2 cell 3</td>
                        <td>row 2 cell 4</td>
                        <td>row 2 cell 5</td>
                    </tr>
                    <tr>
                        <td>row 3 cell 1</td>
                        <td>row 3 cell 2</td>
                        <td>row 3 cell 3</td>
                        <td>row 3 cell 4</td>
                        <td>row 3 cell 5</td>
                    </tr>
                </tbody>
            </table>

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida libero nec velit congue, in faucibus mauris lobortis. Nullam tincidunt in eros dignissim congue. Integer pulvinar lobortis ultricies. Sed justo nisl, vulputate in tellus et, lobortis pellentesque arcu. Praesent at augue id nunc scelerisque congue aliquet condimentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In in mi tincidunt, auctor urna eu, vestibulum nisi. Nunc purus tellus, efficitur sit amet dui vitae, venenatis dictum justo. Phasellus vitae molestie dui. Integer maximus tristique enim at efficitur. Cras tempus ex nec metus imperdiet molestie.
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida libero nec velit congue, in faucibus mauris lobortis. Nullam tincidunt in eros dignissim congue. Integer pulvinar lobortis ultricies. Sed justo nisl, vulputate in tellus et, lobortis pellentesque arcu. Praesent at augue id nunc scelerisque congue aliquet condimentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In in mi tincidunt, auctor urna eu, vestibulum nisi. Nunc purus tellus, efficitur sit amet dui vitae, venenatis dictum justo. Phasellus vitae molestie dui. Integer maximus tristique enim at efficitur. Cras tempus ex nec metus imperdiet molestie.
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida libero nec velit congue, in faucibus mauris lobortis. Nullam tincidunt in eros dignissim congue. Integer pulvinar lobortis ultricies. Sed justo nisl, vulputate in tellus et, lobortis pellentesque arcu. Praesent at augue id nunc scelerisque congue aliquet condimentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In in mi tincidunt, auctor urna eu, vestibulum nisi. Nunc purus tellus, efficitur sit amet dui vitae, venenatis dictum justo. Phasellus vitae molestie dui. Integer maximus tristique enim at efficitur. Cras tempus ex nec metus imperdiet molestie.
            </p>
        </article>

        <article>
            <h2>Subhead</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida libero nec velit congue, in faucibus mauris lobortis. Nullam tincidunt in eros dignissim congue. Integer pulvinar lobortis ultricies. Sed justo nisl, vulputate in tellus et, lobortis pellentesque arcu. Praesent at augue id nunc scelerisque congue aliquet condimentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In in mi tincidunt, auctor urna eu, vestibulum nisi. Nunc purus tellus, efficitur sit amet dui vitae, venenatis dictum justo. Phasellus vitae molestie dui. Integer maximus tristique enim at efficitur. Cras tempus ex nec metus imperdiet molestie.
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida libero nec velit congue, in faucibus mauris lobortis. Nullam tincidunt in eros dignissim congue. Integer pulvinar lobortis ultricies. Sed justo nisl, vulputate in tellus et, lobortis pellentesque arcu. Praesent at augue id nunc scelerisque congue aliquet condimentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In in mi tincidunt, auctor urna eu, vestibulum nisi. Nunc purus tellus, efficitur sit amet dui vitae, venenatis dictum justo. Phasellus vitae molestie dui. Integer maximus tristique enim at efficitur. Cras tempus ex nec metus imperdiet molestie.
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida libero nec velit congue, in faucibus mauris lobortis. Nullam tincidunt in eros dignissim congue. Integer pulvinar lobortis ultricies. Sed justo nisl, vulputate in tellus et, lobortis pellentesque arcu. Praesent at augue id nunc scelerisque congue aliquet condimentum ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In in mi tincidunt, auctor urna eu, vestibulum nisi. Nunc purus tellus, efficitur sit amet dui vitae, venenatis dictum justo. Phasellus vitae molestie dui. Integer maximus tristique enim at efficitur. Cras tempus ex nec metus imperdiet molestie.
            </p>
        </article>
        <footer>
            <p>
                Footer text!
            </p>
        </footer>
    </body>
</html>