I did it: Complete! and I used CSS

HTML & CSS
196

Don’t be afraid. :slight_smile:

<!DOCTYPE html>
<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name=viewport content="width=device-width, initial-scale=1">
            <title>Radio List</title>
            <style>
                * { outline: dashed 1px #d00 } /* For visualisation purpose only, do remove!! */
                body {
                    max-width: 1200px;
                    width: 95%;     /* Responsive */
                    margin: 1em auto;   /* Centred. Wot no table?? */
                    font-size: 100%;     /* Reset */
                    background: #000;
                    color: #fff;
                }
                h1 { text-align: center }
                .wrapper {
                    color: #0059dd;
                    display: flex;
                    flex-flow: wrap;
                    justify-content: space-between;
                    list-style: none;
                    padding: 0;
                    counter-reset: radionum;
                }
                .wrapper li {
                    display: inline-block ;  /* Fall-back */
                    padding: 0 5% 100px;
                    flex: 1 1 14em;     /* Set flex basis, to set disired width, but allowing some stretching/squashing */
                }
                .wrapper li h2 {
                    counter-increment: radionum;
                    font-size: 2em;
                    margin-top: 0
                }
                .wrapper li h2::after { content: ' 'counter(radionum) } /* Add numbers */
                
                audio { width: 100% }
            </style>
            <!--This bit... Only if you want to support old versions of IE that don't do Flex-->
            <!--[if IE]><style> .wrapper { text-align: center } .wrapper li { width: 22%; text-align: left; min-width: 12em } </style><![endif]-->
        </head>
        <body>
            <h1>Page Title</h1>
            <ol class="wrapper">
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <li><h2>Radio</h2><audio controls="controls"></audio></li>
                <!--However many...-->
            </ol>
        </body>
</html>
1 Like