Recipe code

by enbette

HTML

<!doctype html>
<html>
  <head>
    <style></style>
  </head>

  <body id="mybody3">
    <img
      id="enabler0"
      src="https://i.imgur.com/dKYCtVc.png"
      class="rounded"
      style="
        position: absolute;
        top: 150px;
        left: 25px;
        width: 170px;
        height: 170px;
        outline-color: #d4afff;
      "
    />
    <img
      id="enabler1"
      src="https://i.imgur.com/f2GsZev.png"
      class="rounded"
      style="
        position: absolute;
        top: 310px;
        left: 160px;
        width: 170px;
        height: 170px;
        outline-color: #fff8af;
      "
    />
    <img
      id="enabler2"
      src="https://i.imgur.com/IKMiQ0t.png"
      class="rounded"
      style="
        position: absolute;
        top: 170px;
        left: 310px;
        width: 160px;
        height: 160px;
        outline-color: #ffc2af;
      "
    />
    <img
      id="enabler3"
      src="https://i.imgur.com/eRLh0JD.jpeg"
      class="rounded"
      style="
        position: absolute;
        top: 270px;
        left: 480px;
        width: 180px;
        height: 180px;
        outline-color: #aff6ff;
      "
    />

    <div
      id="txtbox0"
      class="mytextbox"
      style="
        opacity: 0;
        display: none;
        overflow: auto;
        position: absolute;
        width: 436px;
        height: 415px;
        top: 85px;
        left: 126px;
        margin-right: -230px;
        margin-bottom: -319px;
        text-align: left;
      "
    >
      <img
        class="closePanel"
        src="https://i.imgur.com/bUaRtpR.png"
        style="position: absolute; width: 30px; left: 396px"
      />
      <img
        src="https://i.imgur.com/dKYCtVc.png"
        style="width: 300px; height: 300px; display: none"
      />
      <h3 class="recipeH3">Pecan pie:</h3>
      <span class="recipeSpan">
        <h2 class="recipeH2" style="font-size: 1.1em">Crust (makes 2):</h2>
        2 1/2 cups all purpose flour, 1 teaspoon...

CSS

#mybody3{width:688px;height:500px;; 
        background-image: url('https://i.imgur.com/Izs7IcP.png');background-repeat: no-repeat;}
      .mytextbox{
          background-color: #ffebdc;
          
          
      }
      .mytextbox::-webkit-scrollbar {
          width: 8px;
      }

      /* The area behind scrollbar */
      .mytextbox::-webkit-scrollbar-track {
          background: transparent;
          border-radius: 10px;
      }

      /* Customize the bar moving inside the tracker */
      .mytextbox::-webkit-scrollbar-thumb {
          background-color: #ffa1de; 
          border-radius: 5px;
      }

      /* Scrollbar reacts to hover */
      .mytextbox::-webkit-scrollbar-thumb:hover {
          background-color: #ed732e;
      }
      .rounded {
        outline-style:solid;
        outline-width: 15px;
        
        object-fit: cover;
        border-radius: 50%;
      }
      .rounded:hover {
        cursor: pointer;
        outline-style:solid;
         outline-color:#ed732e !important;
        outline-width: 15px;
        
        object-fit: cover;
        border-radius: 50%;
      }
      .recipeSpan{
        font-family: 'Verdana';
        color: #782a00; 
        font-size: 0.8em;
      }
      .recipeH3{
        font-family: 'Verdana';
        font-style:italic; 
        color: #682602; 
      }
      ul li{
        font-family: 'Verdana';
        font-size: 0.9em;
        color: #682602;
      }
      ul li::marker {
        content: '- ';
        color: red;
        font-size: 1.5em;
      }