-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
216 lines (214 loc) · 11.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NaF vs KF</title>
<meta name="description" property="og:description" content="An infographic comparing the properties of NaF vs. KF"/>
<meta property="og:image" content="https://raw.githubusercontent.com/Tom-the-Bomb/atomic-solids-infographic/main/assets/atom.png"/>
<link rel="icon" type="image/x-icon" href="./assets/atom.svg"/>
<link rel="stylesheet" href="./styles/styles.css"/>
<link rel="stylesheet" href="./styles/background.css"/>
</head>
<body>
<header>
<h1>Structures and Properties</h1>
<h2>NaF vs KF</h2>
</header>
<main>
<div id="section-1">
<div class="container">
<h3>
<span>Type:</span> IONIC SOLID
</h3>
<p>
<i>Sodium fluoride</i> and <i>potassium fluoride</i>
are both <b>ionic solids</b> that form simple cubic body lattice structures with their respective ions
occupying octahedral coordination sites.
</p>
<iframe
title="Sodium Fluoride"
frameborder="0"
allowfullscreen
mozallowfullscreen="true"
webkitallowfullscreen="true"
allow="autoplay; fullscreen; xr-spatial-tracking"
xr-spatial-tracking
execution-while-out-of-viewport
execution-while-not-rendered
web-share
src="https://sketchfab.com/models/4afe01167ede483ab10b451efe421452/embed?autospin=1&autostart=1&ui_theme=dark">
</iframe>
</div>
<div class="container">
<h3>BONDING</h3>
<p>
Ionic solids are held together by strong <b>ionic bonds</b>
caused by the electrostatic forces of attraction between
the oppositely charged ions. These ions are created as the metal loses
electrons to become a cation while the non-metal gains those electrons to become an anion.
</p>
<img
class="img-shadow"
id="ionic-bonding-img"
src="./assets/ionic-bond.svg"
alt="bonding"
/>
</div>
</div>
<div id="section-2">
<div class="container">
<h3><span>Bond Strength:</span> FACTORS</h3>
<div id="div-factors">
<img class="img-shadow" id="factors-img" src="./assets/bonds.svg" alt="bonding"/>
<ol>
<li>
<h4>Ionic Charge</h4>
<p>
Both compounds have the same ionic charge as they are both composed of one 1+ ion and one 1- ion,
so this does not play a major role in comparing their bond strengths.
</p>
</li>
<li>
<h4>Interionic distance</h4>
<p>
This is the primary differentiating factor between the bond strengths of KF and NaF.
While both compounds have F- as the anion, K has 3 shells as an ion
while Na as an ion only has 2 shells and hence is smaller,
leading to a reduced distance between the ions and a higher charge density,
resulting in NaF having stronger bonds.
</p>
</li>
</ol>
</div>
</div>
<div class="container" id="properties-section">
<div id="properties-header">
<h3><span>Properties:</span> NaF</h3>
<h3><span>Properties:</span> KF</h3>
</div>
<div id="properties-div">
<div class="properties">
<div class="property">
<h3 class="property-header">
<div>Melting Point</div>
<div class="values">
<img src="./assets/melt.svg" alt="melt"/>
<div>
993°C
</div>
</div>
</h3>
<p>
<i>Sodium fluoride</i> has a high melting point of 993°C
as it is held together by strong ionic bonds that require a lot of energy input to break apart,
and consequently melting it.
</p>
</div>
<div class="property">
<h3 class="property-header">
<div>Melting Point</div>
<div class="values">
<img src="./assets/melt.svg" alt="melt"/>
<div>
858°C
</div>
</div>
</h3>
<p>
<i>Potassium fluoride</i> also has a high melting point of 858°C,
which is slightly lower than NaF's melting point as it has a lesser charge density,
meaning it is held together by relatively weaker (but still strong) ionic bonds.
</p>
</div>
</div>
<div class="properties">
<div class="property">
<h3 class="property-header">
<div>Solubility</div>
<div class="values">
<img src="./assets/solubility.svg" alt="melt"/>
<div>
Good
</div>
</div>
</h3>
<p>
<i>Sodium fluoride</i> is composed of ions (charged particles)
that the polar water molecules are attracted to and will pull apart,
hence dissolving the solid into its dissociated ions in the water,
leading to its excellent solubility.
</p>
</div>
<div class="property">
<h3 class="property-header">
<div>Solubility</div>
<div class="values">
<img src="./assets/solubility.svg" alt="melt"/>
<div>
Good
</div>
</div>
</h3>
<p>
<i>Potassium fluoride</i> is also composed of ions that will undergo dissociation
induced by the polar water molecules, hence giving it good solubility in water.
</p>
</div>
</div>
<div class="properties">
<div class="property">
<h3 class="property-header">
<div>Conductivity</div>
<div class="values">
<img src="./assets/conductivity.svg" alt="melt"/>
<div>
Good<sup>*</sup>
</div>
</div>
</h3>
<p>
<i>Sodium fluoride</i> has good conductivity when <b>dissolved</b> or <b>melted</b><sup>*</sup>
as its consitutent ions become free allowing them to
move around and freely carry electric charge.
</p>
</div>
<div class="property">
<h3 class="property-header">
<div>Conductivity</div>
<div class="values">
<img src="./assets/conductivity.svg" alt="melt"/>
<div>
Good<sup>*</sup>
</div>
</div>
</h3>
<p>
<i>Potassium fluoride</i>, is also similar to sodium fluoride as it too
has ions that are locked in solid state and cannot conduct electricity
but will get freed up when <b>molten</b> or <b>dissolved</b><sup>*</sup> as their rigid bonds become broken.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
Made by <a href="https://github.com/Tom-the-Bomb/atomic-solids-infographic">Tom the Bomb</a> 2024 |
<a href="https://github.com/Tom-the-Bomb/atomic-solids-infographic/blob/main/README.md">References</a>
</footer>
<div id="atoms">
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
<img src="./assets/spinning-atom.svg" alt=""/>
</div>
</body>
</html>