New Tag 2

New Tag 2

by Deadly eyes

HTML

<div id="Game World">

<table>
    <caption>Spider Man and Penguin facts</caption>
    <tr>
        <td> </td>
        <th scope="col" class="spider">Spider</th>
        <th scope="col" class="penguin">Penguin</th>
    </tr>
    <tr>
        <th scope="row">Role</th>
        <td>Hero</td>
        <td>Villain</td>
    </tr>
    <tr>
        <th scope="row">Weapon</th>
        <td>Power Sword</td>
        <td>Havoc Staff</td>
    </tr>
    <tr>
        <th scope="row">Dark secret</th>
        <td>Expert florist</td>
        <td>Cries at romcoms</td>
    </tr>
</table>
</div>
<br>
<label for="food-choice">Choose a Favorite Food:</label>
<input list="food-lists" id="food-choice" name="food-choice" />

<datalist id="food-lists">
    <option value="Pizza">
    <option value="Hotdog">
    <option value="TacoBell">
    <option value="Roast Pig">
    <option value="Spanish Pie">
</datalist>
<br>
<form action="#">
  <fieldset>
    <legend>Select Creamy Flavor</legend>
    <input type="radio" id="radio">
    <label for="radio">Chessy</label>
     <input type="radio" id="radio2">
     <label for="radio2">Hot N Spicy</label>
  </fieldset>
</form>
<br>
<div>
<caption> Food Video </caption>
 <br>
<video controls
       src="//samplelib.com/lib/preview/mp4/sample-5s.mp4">
    <track default
           kind="captions"
           srclang="en"
           src="/media/examples/friday.vtt" />
    Sorry, your browser doesn't support embedded videos.
</video>
</div>
<img src="https://www.restobiz.ca/wp-content/uploads/2013/04/renovate-your-restaurant-777x400.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="map" href="https://i1.wp.com/chicagoreader.com/wp-content/uploads/2021/08/ChgoReader_RestaurantMap_vF2-FINAL-scaled.jpg?fit=1185%2C2560&ssl=1">
  <area shape="rect" coords="290,172,333,250" alt="Phone"...

CSS

caption {
    padding: 10px;
    caption-side: bottom;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-family: sans-serif;
    font-size: .8rem;
}

td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 7px 5px;
}

th {
    background-color: rgb(235, 235, 235);
}

td {
    text-align: center;
}

tr:nth-child(even) td {
    background-color: rgb(250, 250, 250);
}

tr:nth-child(odd) td {
    background-color: rgb(240, 240, 240);
}

.spider {
    font: 1.4rem molot;
    text-shadow: 1px 1px 1px #fff, 2px 2px 1px #000;
}

.penguin {
    font: 1.7rem rapscallion;
    letter-spacing: 3px;
    text-shadow: 1px 1px 0 #fff, 0 0 9px #000;
}
video {
    width: 250px;
}

video::cue { 
    font-size: 1rem;
}
a[href^="mailto"]::before {
    content: "📧 ";
}

a[href^="tel"]::before {
    content: "📞 ";
}