Answer Happy

Question 1
1.1)
Create 3 components with Question 2, Question 3, Question 4
1.2)
Use the Question1.html and Question1.css to display the belowoutput
1.3)
When you click on Question2, display the below output fromQuestion2.html.
Same behavior for Question3 and Question 4.
Question1.css
table {
border-collapse:collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color:#4CAF50;
color: white;
}
body {
font-family: "Lato",sans-serif;
}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:#111;
overflow-x:hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 6px 6px32px;
text-decoration:none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 200px; /*Same as the width of the sidenav */
}
@media screen and(max-height: 450px) {
.sidenav {padding-top:15px;}
.sidenav a {font-size:18px;}
}
Question1.html
<div class="sidenav">
<a>Question2</a>
<a>Questoin3</a>
<a>Questoin4</a>
</div>
<div class="main">
<h2> </h2>
</div>
Question2 Questain3 Questoin3 Questoin4
What would you like to do?