Here is my html code: Periodictable H Hydrogen He Helium Li Lithium Be Beryllium B Boron C Carbon N Nitrogen O Oxygen F Fluorine Ne Neon Na Sodium Mg Magnesium Al Aluminum Si Silicon P Phosphorus S Sulfur Cl Chlorine Ar Argon K Potassium Ca Calcium Sc Scandium Ti Titanium v Vanadium Cr Chromium Mn Manganese Sb Antimony Te Tellurium I Iodine Xe Xenon Cs Cesium Ba Barium La Lanthanum Ce Cerium Pr Praseodymium Nd Neodymium Pm Promethium Sm Samarium Eu Europium Gd Gadolinium Tb Terbium Dy Dysprosium Ho Holmium Er Erbium Tm Thulium Yb Ytterbium Lu Lutetium Here is lecturers review: There are some requirements missing from the submission, listed below: ●There should be a point where the table loses its structure, at which point it will be replaced by an image of the periodic table. To implement this consider using media queries to display the image when the screen size changes to a certain dimension. ● Create at least one breakpoint which triggers a change in the styling of the web page If you are having any. The above requirement can also be applied using media queries Please help amend according to lecturers comment. with css styling on amended
Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodictable</title>
<link href="myStyle.css" rel="stylesheet">
</head>
<body>
<div class="periodic-table">
<div class="row header">
<div class="element"> </div> <!-- placeholder for empty space in top-left corner -->
<div class="element"><br> H<br> Hydrogen</div>
<div class="element"><br> He<br> Helium</div>
<div class="element"><br> Li<br> Lithium</div>
<div class="element"><br> Be<br> Beryllium</div>
<div class="element"><br> B<br> Boron</div>
<div class="element"><br> C<br> Carbon</div>
<div class="element"><br> N<br> Nitrogen</div>
<div class="element"><br> O<br> Oxygen</div>
<div class="element"><br> F<br> Fluorine</div>
<div class="element"><br> Ne<br> Neon</div>
<div class="element"><br> Na<br> Sodium</div>
<div class="element"><br> Mg<br> Magnesium</div>
<div class="element"><br> Al<br> Aluminum</div>
<div class="element"><br> Si<br> Silicon</div>
<div class="element"><br> P<br> Phosphorus</div>
</div>
<div class="row">
<div class="element"><br> S<br> Sulfur</div>
<div class="element"><br> Cl<br> Chlorine</div>
<div class="element"><br> Ar<br> Argon</div>
<div class="element"><br> K<br> Potassium</div>
<div class="element"><br> Ca<br> Calcium</div>
<div class="element"><br> Sc<br> Scandium</div>
<div class="element"><br> Ti<br> Titanium</div>
<div class="element"><br> v<br> Vanadium</div>
<div class="element"><br> Cr<br> Chromium</div>
<div class="element"><br> Mn<br> Manganese</div>
</div>
<div class="row">
<div class="element"><br> Sb<br> Antimony</div>
<div class="element"><br> Te<br> Tellurium</div>
<div class="element"><br> I<br> Iodine</div>
<div class="element"><br> Xe<br> Xenon</div>
<div class="element"><br> Cs<br> Cesium</div>
<div class="element"><br> Ba<br> Barium</div>
<div class="element"><br> La<br> Lanthanum</div>
<div class="element"><br> Ce<br> Cerium</div>
<div class="element"><br> Pr<br> Praseodymium</div>
</div>
<div class="row">
<div class="element"><br> Nd<br> Neodymium</div>
<div class="element"><br> Pm<br> Promethium</div>
<div class="element"><br> Sm<br> Samarium</div>
<div class="element"><br> Eu<br> Europium</div>
<div class="element"><br> Gd<br> Gadolinium</div>
<div class="element"><br> Tb<br> Terbium</div>
<div class="element"><br> Dy<br> Dysprosium</div>
<div class="element"><br> Ho<br> Holmium</div>
<div class="element"><br> Er<br> Erbium</div>
<div class="element"><br> Tm<br> Thulium</div>
<div class="element"><br> Yb<br> Ytterbium</div>
<div class="element"><br> Lu<br> Lutetium</div>
</div>
</body>
</html>
Here is lecturers review:
There are some requirements missing from the submission, listed below:
●There should be a point where the table loses its structure, at which point it will be replaced by an image of the periodic table.
To implement this consider using media queries to display the image when the screen size changes to a certain dimension.
● Create at least one breakpoint which triggers a change in the styling of
the web page If you are having any.
The above requirement can also be applied using media queries
Please help amend according to lecturers comment. with css styling on amended
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
