diff options
| author | altaf-creator <athaalaa@gmail.com> | 2023-08-01 20:40:16 +0700 |
|---|---|---|
| committer | altaf-creator <athaalaa@gmail.com> | 2023-08-01 20:40:16 +0700 |
| commit | 31fad66b2e847e6532e89d958f158d605f16b4f0 (patch) | |
| tree | f6ad167a2dd182606d4c748e5dfcf3f1df68864e | |
| parent | dc83c08cc6ccfe9b888edb782f358dbe7170fa0d (diff) | |
Fix stuff, unfinished
| -rw-r--r-- | lessons/fisika/atom/atom.html | 6 | ||||
| -rw-r--r-- | lessons/fisika/atom/electron-config.html | 30 | ||||
| -rw-r--r-- | style.css | 20 |
3 files changed, 28 insertions, 28 deletions
diff --git a/lessons/fisika/atom/atom.html b/lessons/fisika/atom/atom.html index a15d8dc..831a5df 100644 --- a/lessons/fisika/atom/atom.html +++ b/lessons/fisika/atom/atom.html @@ -56,7 +56,7 @@ style="flex: 1 200px; margin: 30px; min-width: 0px; max-width: 600px;"> </div> <p class="subtitle">(picture on the left) An example of an atom symbol, (picture on the right) The format of - an atom symbol</p> + an atom symbol (FOR INDONESIA)</p> <h1 id="proton-electron-neutron-count">Determining the number of Protons, Electrons, and Neutrons</h1> <h2 id="proton-electron-neutron-count--protons-and-electrons">Protons and Electrons</h2> <p>If not electrically charged (will be discussed later), the proton and electron number will be the same as @@ -85,8 +85,8 @@ </div> <h1 id="ions">Ions</h1> Electron count will be added or subtracted by ion charge. <br> - If the ion charge is positive, subtract the electron count. <br> - If the ion charge is negative, add the electron count. For example: + If the ion charge is positive (cation / kation), subtract the electron count. <br> + If the ion charge is negative (anion), add the electron count. For example: <div class="flex" style="width: 100%;"> <img src="/assets/images/atoms/carbon_symbol_ion.svg" alt="" style="max-width: 200px !important; margin: 20px;"> diff --git a/lessons/fisika/atom/electron-config.html b/lessons/fisika/atom/electron-config.html index 31111d9..285ffc0 100644 --- a/lessons/fisika/atom/electron-config.html +++ b/lessons/fisika/atom/electron-config.html @@ -16,6 +16,8 @@ </head> <body> + + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> <a href="../" class="fixed-top-btn back-btn" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a> @@ -105,30 +107,20 @@ <h2 id="electron-config-based-on-shell--max">Maximum Electron</h2> <table> <tr> - <th>Shell</th> - <th>Maximum Electron</th> - </tr> - <tr> - <td>K</td> - <td>2</td> - </tr> - <tr> - <td>L</td> - <td>8</td> + <td colspan="2"> </td> + <td> </td> </tr> <tr> - <td>M</td> - <td>18</td> + <td> </td> + <td> </td> + <td> </td> </tr> <tr> - <td>N</td> - <td>32</td> + <td> </td> + <td> </td> + <td> </td> </tr> - <tr> - <td>...</td> - <td>...</td> - </tr> - </table> + </table> <h2 id="electron-config-based-on-shell--example">How to Determine Electron Count</h2> <ol> <li>Coming soon!</li> @@ -119,12 +119,18 @@ img { #main { margin-left: 360px; - padding: 20px; - padding-bottom: 3rem; - padding-left: clamp(20px, 200px, 200px); - padding-right: clamp(20px, 200px, 200px); + padding: 30px; + padding-left: 200px; + padding-right: 200px; transition: all .5s; z-index: 2; + display: flex; + place-content: center; + box-sizing: border-box; +} + +#main > section { + width: 100%; } #sidebar { @@ -299,7 +305,7 @@ img { .card { position: relative; - flex: 1 0 290px; + flex: 1 0 320px; background-color: var(--white-accent-bg); border-radius: 10px; box-sizing: border-box; @@ -555,8 +561,10 @@ li>a:hover { } #main { - padding: 20px; margin-left: 0; + padding-left: 0px; + padding-right: 0px; + padding: 30px; } #banner { |