mirror of
https://github.com/EthanPisani/ethanpisani.com.git
synced 2025-07-02 18:15:18 -04:00
371 lines
9.5 KiB
HTML
371 lines
9.5 KiB
HTML
<!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>
|
|
|
|
<div class="container">
|
|
<label class="switch"
|
|
><input type="checkbox" id="checkbox" onchange="checkf()" />
|
|
<div></div> </label
|
|
>3d models
|
|
</div>
|
|
<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">
|
|
<img
|
|
class="t"
|
|
id="1"
|
|
src="../../static/img/butane.png"
|
|
alt="butane"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
loading="lazy"
|
|
src="../../3d/pent-2-ene"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="2"
|
|
src="../../static/img/pent-2-ene.png"
|
|
alt="pent-2-ene"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/hex-3-yne.png"
|
|
alt="hex-3-yne"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/benzene.png"
|
|
alt="benzene"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/propan-2-ol.png"
|
|
alt="propan-2-ol"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/ethanal.png"
|
|
alt="ethanal"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/1-methoxypropane.png"
|
|
alt="1-methoxypropane"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/ethanoic_acid.png"
|
|
alt="ethanoic_acid"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/pentan-2-one.png"
|
|
alt="pentan-2-one"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/propyl_ethanoate.png"
|
|
alt="propyl_ethanoate"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/n-methylbutan-2-amine.png"
|
|
alt="n-methylbutan-2-amine"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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">
|
|
<img
|
|
class="t"
|
|
id="im"
|
|
src="../../static/img/n_n-dimethylpropanamide.png"
|
|
alt="n_n-dimethylpropanamide"
|
|
/>
|
|
<iframe
|
|
class="hide"
|
|
id="if"
|
|
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>
|