22-01 Toni Designer Thread Coding

<div id="header"></div>

<div class="quote"><i>Velaris; City of Starlight, Court of Dreams</i></div>

<div class="tabs">
    <div class="tab">
       <input type="radio" id="2020" name="tab-group-1" checked="checked">
       <label for="2020" style="background-color:var(--color2);" title="2020">2020</label>

       <div class="content">
          <span class="title">2020</span>
            <table class="designer">
                <tbody>

                    <th class="title"><a href="#">Request Title & Link</a></th>
                    <th class="forumNumber">XX</th>
                    <tr>
                        <td class="links">
                            Layout: <a href="#">1</a>
                            <br>
                            Code: <a href="#">1</a>
                        </td>
                        <td class="approvals"><a href="#">link</a></td>
                    </tr>

                    <th class="title"><a href="#">Request Title & Link</a></th>
                    <th class="forumNumber">XX</th>
                    <tr>
                        <td class="links">
                            Layout: <a href="#">1</a>
                            <br>
                            Code: <a href="#">1</a>
                        </td>
                        <td class="approvals"><a href="#">link</a></td>
                    </tr>

                </tbody>
           </table>
       </div>
   </div>

    <div class="tab">
        <input type="radio" id="2021" name="tab-group-1">
        <label for="2021" style="background-color:var(--color2);" title="2021">2021</label>

        <div class="content">
            <span class="title">2021</span>
            <table class="designer">
                <tbody>

                    <th class="title"><a href="#">Request Title & Link</a></th>
                    <th class="forumNumber">XX</th>
                    <tr>
                        <td class="links">
                            Layout: <a href="#">1</a>
                            <br>
                            Code: <a href="#">1</a>
                        </td>
                        <td class="approvals"><a href="#">link</a></td>
                    </tr>

                    <th class="title"><a href="#">Request Title & Link</a></th>
                    <th class="forumNumber">XX</th>
                    <tr>
                        <td class="links">
                            Layout: <a href="#">1</a>
                            <br>
                            Code: <a href="#">1</a>
                        </td>
                        <td class="approvals"><a href="#">link</a></td>
                    </tr>

                    <th class="title"><a href="#">Request Title & Link</a></th>
                    <th class="forumNumber">XX</th>
                    <tr>
                        <td class="links">
                            Layout: <a href="#">1</a>
                            <br>
                            Code: <a href="#">1</a>
                        </td>
                        <td class="approvals"><a href="#">link</a></td>
                    </tr>

                </tbody>
           </table>
        </div>
    </div>

    <div class="tab">
        <input type="radio" id="2022" name="tab-group-1">
        <label for="2022" style="background-color:var(--color2);" title="2022">2022</label>

        <div class="content">
            <span class="title">2022</span>
            <table class="designer">
                <tbody>
                    <th class="title"><a href="#">Request Title & Link</a></th>
                    <th class="forumNumber">XX</th>
                    <tr>
                        <td class="links">
                            Layout: <a href="#">1</a>
                            <br>
                            Code: <a href="#">1</a>
                        </td>
                        <td class="approvals">link</td>
                    </tr>
                </tbody>
           </table>
        </div>
    </div>

</div>



<style type="text/css">
/** Color Variables **/
    * {
        --color1:#55A4D3;
        --color2:#91B3D0;
        --color3:#3788D3;
        --color4:#B8B6B4;
    }

#header {
width:500px;
text-align:center;
display:block;
height:353px; /** CHANGE TO ACCOMODATE IMAGE HEIGHT **/
position:relative;
margin:25px auto 10px auto;
background: url('https://i.ibb.co/CJWcnXG/tonidesignerheader.png') no-repeat; /** CHANGE ME TO UPDATE HEADER IMAGE **/
background-size: contain;
background-position: center;
}

.quote {text-align: center;color: var(--color1);font-size: 10px;letter-spacing: 2px;margin-bottom:10px;}table.designer {width: 100%;background-color: #161718;border-collapse:collapse;}td.links {width: 80%;background-color: #292929;padding-left: 5px;}td.approvals {width: 10%;background-color: #292929;text-align: center;}th.title {text-align: left;font-size: 11px;}th.forumNumber, th.due {text-align: center !important;font-size: 9px;}table.designer th {text-transform: uppercase;letter-spacing: 4px;padding: 5px 0px;color: var(--color1);}table.designer td {font-size: 10px;text-transform: uppercase;color: #ffffff;letter-spacing: 1px;padding: 5px;border-bottom: 1px dashed var(--color2);}table.designer a:link, table.designer a:visited {color:var(--color3);text-decoration: none;}table.designer a:hover {color: var(--color4);}.tabs {position: relative;width:500px;height: 500px;clear: both;margin: 0 auto 25px auto;}.tab {float: left;}.tab label {position: relative;width:166px;display:inline-block;height:15px;font-size: 9px;text-align: center;text-transform: uppercase;color:black !important;line-height: 17px;font-weight: bold;-webkit-transition: all 0.3s ease-in-out;}.tab label:hover {background-color: var(--color3) !important;color: var(--color4);}.tab [type=radio] {display: none;}.content {position:absolute;top:20px;left: 0;width:500px;height:485px;transition:0.5s ease-in-out;-webkit-transition:0.5s ease-in-out;opacity: 0;overflow: auto;}[type=radio]:checked ~ label {background: var(--color1) !important;color: #000000;z-index: 2;}[type=radio]:checked ~ label ~ .content {z-index: 1;opacity: 1;}.title {font-family:arial, sans serif;font-weight:bold;letter-spacing:2px;text-transform:uppercase;color:var(--color4);font-size:18px;display:block;text-align:center;}
</style>