Description
Objective:
Turn the provided HTML and CSS files into separate top and side navigation bars.
Process:
-
Create a repository using provided html file (index.html, page2.html, page3.html).
-
Create a CSS folder and style.css file inside it.
-
Do not change the structure of the HTML at all.
-
Write css code to do the following things based on the demos we did in class.
-
Turn <nav> into a centered navigation list at the top of the page.
-
-
-
-
A background color should stretch the entire length of the page.
-
-
Turn <aside> into a side navigation bar on the right side of the page.
-
The side navigation should scroll with the page (hint: fixed position).
-
-
-
-
Both navigation bars should have not bullet points or underlines.
-
-
The following css declarations are all you need. Just find the right id to place them:
-
For Navigation:
For Sidebar:
background-color: blue;
position: fixed;
overflow: hidden;
right:0%;
float: left;
background-color: red;
width: 100%;
height: 100%;
position: relative;
width: 20%;
list-style-type: none;
list-style-type: none;
margin: 0;
text-align: center;
padding: 0;
padding: 0;
position: relative;
display: block;
left: 50%;
padding: 15px 0;
float: left;
color: #fff;
float: left;
text-decoration: none;
position: relative;
background-color: #000;
right: 50%;
display: block;
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
background-color: #000;
text-decoration: underline overline;