<!DOCTYPE html>
<html>
  <head>
    <title>Ethan's Site</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static',filename='css/chem12cpt.css') }}"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static',filename='css/unit1.css') }}"
    />
    <meta name="msapplication-TileColor" content="#000000" />
    <meta name="theme-color" content="#000000" />
    <link
      rel="icon"
      href="{{ url_for('static',filename='img/favicon.ico') }}"
    />
    <meta name="robots" content="index,follow" />
  </head>
  <body>
    <div class="content">
      <h1>Chemistry 12 CPT</h1>

      <a href="../" class="button">Go Back</a>
      <br />
      <br />
      <div class="wrapper">
        <div class="first">
          <p>Alkane:</p>
          <p>Any hydrocarbon with only single bonds</p>
          <p>Example: <a href="/3d/butane/">butane</a></p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/butane/"
            title="butane"
          ></iframe>
        </div>
      </div>
      <br />
      <div class="wrapper">
        <div class="first">
          <p>Alkene:</p>
          <p>Any hydrocarbon with double bonds</p>
          <p>Example: <a href="/3d/pent-2-ene/">pent-2-ene</a></p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/pent-2-ene/"
            title="butane"
          ></iframe>
        </div>
      </div>
      <br />
      <div class="wrapper">
        <div class="first">
          <p>Alkyne:</p>
          <p>Any hydrocarbon with triple bonds</p>
          <p>Example: <a href="/3d/hex-3-yne/">hex-3-yne</a></p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/hex-3-yne/"
            title="butane"
          ></iframe>
        </div>
      </div>
      <br />
      <div class="wrapper">
        <div class="first">
          <p>Aromatic:</p>
          <p>
            Any hydrocarbon that contains benzene or benzene like properties
          </p>
          <p>Example: <a href="/3d/benzene/">benzene</a></p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/benzene/"
            title="benzene"
          ></iframe>
        </div>
      </div>
      <br />

      <div class="wrapper">
        <div class="first">
          <p>Alcohol:</p>
          <p>A hydrocarbon with a main hydroxyl (OH) branch</p>
          <p>Example: <a href="/3d/propan-2-ol/">propan-2-ol</a></p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/propan-2-ol/"
            title="propan-2-ol"
          ></iframe>
        </div>
      </div>
      <br />

      <div class="wrapper">
        <div class="first">
          <p>Aldehyde:</p>
          <p>
            A hydrocarbon with double bonded oxygen (=O), single bonded hydrogen
            (H)
          </p>
          <p>Example: <a href="/3d/ethanal/">ethanal</a></p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/ethanal/"
            title="ethanal"
          ></iframe>
        </div>
      </div>
      <br />

      <div class="wrapper">
        <div class="first">
          <p>Ether:</p>
          <p>A hydrocarbon with an oxygen (O) between two alkyl groups</p>
          <p>
            Example: <a href="/3d/1-methoxypropane/">1-methoxypropane</a>
          </p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/1-methoxypropane/"
            title="1-methoxypropane"
          ></iframe>
        </div>
      </div>
      <br />

      <div class="wrapper">
        <div class="first">
          <p>Carboxylic acid:</p>
          <p>
            A hydrocarbon with a carboxyl group (C(=O)OH) attached to an alkyl
            groups
          </p>
          <p>Example: <a href="/3d/ethanoic_acid/">ethanoic acid</a></p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/ethanoic_acid/"
            title="ethanoic_acid"
          ></iframe>
        </div>
      </div>
      <br />

      <div class="wrapper">
        <div class="first">
          <p>Ketone:</p>
          <p>
            A hydrocarbon with a double bonded oxygen (C=O) attached to two
            alkyl groups
          </p>
          <p>Example: <a href="/3d/pentan-2-one/">pentan-2-one</a></p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/pentan-2-one/"
            title="pentan-2-one"
          ></iframe>
        </div>
      </div>
      <br />

      <div class="wrapper">
        <div class="first">
          <p>Ester:</p>
          <p>
            A hydrocarbon with a double bonded oxygen and a single bonded oxygen
            (O-C=O) attached to two alkyl groups
          </p>
          <p>
            Example: <a href="/3d/propyl_ethanoate/">propyl ethanoate</a>
          </p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/propyl_ethanoate/"
            title="propyl_ethanoate"
          ></iframe>
        </div>
      </div>
      <br />

      <div class="wrapper">
        <div class="first">
          <p>Amine:</p>
          <p>
            A hydrocarbon with a bonded nitrogen (N) attached to 1 to 3 alkyl
            groups
          </p>
          <p>
            Example:
            <a href="/3d/n-methylbutan-2-amine/">n-methylbutan-2-amine</a>
          </p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/n-methylbutan-2-amine/"
            title="n-methylbutan-2-amine"
          ></iframe>
        </div>
      </div>
      <br />

      <div class="wrapper">
        <div class="first">
          <p>Aminde:</p>
          <p>
            A hydrocarbon with a bonded nitrogen with a double bonded oxygen
            (N-C=O) attached to 1 to 3 alkyl groups
          </p>
          <p>
            Example:
            <a href="/3d/n_n-dimethylpropanamide/"
              >n,n-dimethylpropanamide</a
            >
          </p>
        </div>
        <div class="second">
          <iframe
            loading="lazy"
            src="/3d/n_n-dimethylpropanamide/"
            title="n_n-dimethylpropanamide"
          ></iframe>
        </div>
      </div>
      <br />
    </div>
  </body>
  <script>
    function checkf() {
      var checkb = document.getElementById("checkbox");
      if (checkb.checked == true) {
        console.log("checked");
        var list = document.getElementsByClassName("t");
        console.log(list);
        for (var i = 0; i < list.length; i++) {
          var e = list[i];
          e.className = "hide";
        }
      }
    }
  </script>
</html>
