111 lines
4.4 KiB
HTML
111 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link href="css/reset.css" rel="stylesheet">
|
||
<link href="css/infographic.css" rel="stylesheet">
|
||
<link rel="top" href="/" title="Job Bautista's personal website">
|
||
<link rel="up" href="./" title="Infographics about chemical elements - Job Bautista">
|
||
<title>Lithium</title>
|
||
</head>
|
||
<body>
|
||
<article>
|
||
<div id="infographic">
|
||
<header>
|
||
<h1 id="igTitle"><span id="igT1">Lithium (Li)</span><br /><span id="igT2">Atomic #3</span> <span id="igT3">Group</span> #1</h1>
|
||
<p>Soft, silvery-white, lightest alkali metal.</p>
|
||
</header>
|
||
<br />
|
||
<figure>
|
||
<img src="media/lithium.jpg" alt="Lithium floating in oil" />
|
||
<figcaption>Lithium floating in oil</figcaption>
|
||
</figure>
|
||
<div id="content">
|
||
<section id="igWord">
|
||
<h2>Word</h2>
|
||
<section class="subsection" id="igHS">
|
||
<h3>Pronunciation</h3>
|
||
<p>/ˈlɪθiəm/ (LITH-ee-əm)</p>
|
||
</section>
|
||
<section class="subsection" id="igRO">
|
||
<h3>Appearance</h3>
|
||
<p>silvery-white</p>
|
||
</section>
|
||
</section>
|
||
<section id="igChemProp">
|
||
<h2>Chemical properties</h2>
|
||
<section class="subsection" id="igGC">
|
||
<h3>Phase at STP</h3>
|
||
<p>Solid</p>
|
||
</section>
|
||
<section class="subsection" id="igTT">
|
||
<h3>Melting point</h3>
|
||
<p>453.65 K (180.50 °C, 356.90 °F) </p>
|
||
</section>
|
||
<section class="subsection" id="igCP">
|
||
<h3>Boiling point</h3>
|
||
<p>1603 K (1330 °C, 2426 °F)</p>
|
||
</section>
|
||
<section class="subsection" id="igFS">
|
||
<h3>Density</h3>
|
||
<p>0.534 g/cm3 (near room temperature), 0.512 g/cm3 (liquid, melting point)</p>
|
||
</section>
|
||
<section class="subsection" id="igLL">
|
||
<h3>Atomic Weight</h3>
|
||
<p>6.94 amu</p>
|
||
</section>
|
||
</section>
|
||
<section id="igHistEty">
|
||
<h2>History and etymology</h2>
|
||
<section class="subsection" id="igLR">
|
||
<h3>Etymology</h3>
|
||
<p>Came from the Greek word λιθoς lithos, meaning stone</p>
|
||
</section>
|
||
<section class="subsection" id="igLF">
|
||
<h3>Discovered</h3>
|
||
<p>Johan August Arfwedson (1817)</p>
|
||
</section>
|
||
<section class="subsection" id="igSL">
|
||
<h3>First isolation</h3>
|
||
<p> William Thomas Brande (1821)</p>
|
||
</section>
|
||
<section class="subsection" id="igCH">
|
||
<h3>Isotopes</h3>
|
||
<p>6Li (stable), 7Li (stable)</p>
|
||
</section>
|
||
</section>
|
||
<section id="igQuantum">
|
||
<h2>Quantum</h2>
|
||
<section class="subsection" id="igAP">
|
||
<h3>Electron configuration</h3>
|
||
<p>1s2 2s1</p>
|
||
</section>
|
||
<section class="subsection" id="igRC">
|
||
<h3>Orbital diagram</h3>
|
||
<p>1s[↑↓] 2s[↑]</p>
|
||
</section>
|
||
<section class="subsection" id="igAF">
|
||
<h3>Quantum numbers of the last electron</h3>
|
||
<p>n=2, l=0, Ml=0, Ms=+0.5</p>
|
||
</section>
|
||
</section>
|
||
</div>
|
||
<footer>
|
||
<h2>About this infographic</h2>
|
||
<section class="part" id="original">
|
||
<h3 class="title"><a href="http://webaim.org/resources/designers/">Original infographic</a></h3><br />
|
||
<p><span class="copyright">©2011 WebAIM.<br />©2020 Job Bautista.</span></p>
|
||
</section>
|
||
<section class="part" id="newversion">
|
||
<h3 class="title">Navigate to:</h3>
|
||
<p><a href="helium.html" rel="prev"><‐‐ Helium</a>   <a href="Beryllium.html" rel="next">Beryllium ‐‐></a></p>
|
||
</section>
|
||
<a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fjobbautista.neocities.org%2Finfographics%2Fchemical-elements%2Fcss%2Finfographic.css&profile=css3svg&usermedium=all&warning=2&vextwarning=&lang=en" target="_parent" title="infographic.css valid!"><img style="border:0;width:120px;height:42px" src="/cssvalidated.svg" alt="infographic.css valid!" /></a>
|
||
<a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fjobbautista.neocities.org%2Finfographics%2Fchemical-elements%2Fcss%2Freset.css&profile=css3svg&usermedium=all&warning=2&vextwarning=&lang=en" target="_parent" title="reset.css valid!"><img style="border:0;width:120px;height:42px" src="/cssvalidated2.svg" alt="reset.css valid!" /></a>
|
||
</footer>
|
||
</div>
|
||
</article>
|
||
</body>
|
||
</html>
|