Creating one (only one) TAB

HTML & CSS
50

After all my ramblings, I almost forgot to give you what
you originally asked for - the page with nothing removed…

some-page-name.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Democratic Senate Seats</title>
<link href="https://fonts.googleapis.com/css?family=Courier+Prime" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet" media="screen">
<style media="screen">
body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
h1 {
   margin: 1.25rem 0;
   font: normal 2rem/2.2rem 'Special Elite', serif;
   text-align: center;
 }
#svgtab {
   position: relative;
   width: 11.5em; /* adjust value to suit the tab width */
   margin: auto;
 }
svg {
   display: block;
 }
#text {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translate( 0, -50% );
   background-color: transparent;
   font-family: 'Courier Prime';
   font-size: 1.4em; /* adjust value to suit the text width */
   font-weight: bold;
   text-align: center;
   color: #fff;
 }
main{
   max-width: 44em;
   margin: auto;
   font-family: 'Courier Prime';
 }
a {
   display: block;
   padding: 0.5em 0;
   background-color: #000;
   color: #fff;
   text-align: center;
 }
main table {
   font-size: 1.5em;
   font-weight: bold;
   background-color: #ddd;
   border-collapse: collapse;
 } 
main table td {
   border: 1px solid #000;
 }
main table td:nth-of-type(odd) {
   width: 6.25rem;
 } 
main table td:nth-of-type(even) {
   padding: 0.5rem;
 }
main table td img {
   display: block;
   width: 100%;
   height: auto;
 }
main table span {
   color:#f00;
   background-color: #fff;
 }
</style>
</head>
<body>
 <h1>Democratic Senate Seats in 2024</h1>
 <div id="svgtab">
  <svg viewBox="0 0 412 62" width="100%">
   <path d="M800 597 c-137 -47 -183 -84 -336 -270 -148 -182 -226 -240 -397
   -296 -37 -13 -67 -25 -67 -27 0 -2 928 -4 2063 -3 l2062 1 -80 27 c-180 63
   -249 114 -398 296 -63 77 -125 150 -138 162 -42 38 -142 93 -208 113 -61 19
   -98 20 -1250 20 l-1186 -1 -65 -22z" 
   transform="translate(0,62) scale(0.1,-0.1)"
   fill="#000"/>
  </svg>
  <div id="text">
   &mdash;Class 3&mdash;
  </div>
 </div>
 <main>
  <a href="https://fvap.gov/guide/appendix/state-elections">Click here for current Primary Dates</a>
  <table>
   <tr>
    <td><img src="https://i.postimg.cc/VNZchm0R/icon.png" alt="#$!@"></td>
    <td>West Virginia Flips the Senate
     <span>50/50 All dates are for the primaries</span>; the General Election is November 5, 2024.
    </td>
   </tr>
  </table>
 </main>
</body>
</html>

Better late than never. sunshine

1 Like