<head>
W-3Schools
</head>
<body>
w3-schools.com
<h3>
The Worlds Largest Web Developer's Site
</h3>
<button>
Log In
</button>
<nav>
<ul>
<a href='#'><li>Tutorials<i class="fas fa-caret-down"></i></li></a>
<a href='#'><li>References<i class="fas fa-caret-down"></i></li></a>
<a href='#'><li>Examples<i class="fas fa-caret-down"></i></li></a>
<a href='#'><li>Exercises<i class="fas fa-caret-down"></i></li></a>
<a href='#'><li>Certificates</i></li></a>
<a href='#'><li style = float:right;><i class="fas fa-search"></i></li></a>
<a href='#'><li style = float:right;><i class="fab fa-facebook"></i></li></a>
<a href='#'><li style = float:right;><i class="fab fa-instagram"></i></li></a>
<a href='#'><li style = float:right;><i class="fab fa-linkedin-in"></i></li></a>
<a href='#'><li style = float:right;><i class="fas fa-adjust"></i></li></a>
<a href='#'><li style = float:right;><i class="fas fa-globe-asia"></i></li></a>
</ul>
</nav>
</div>
<div id='left-nav'>
<nav>
<h3>Heading</h3>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<h3>Heading</h3>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<h3>Heading</h3>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<h3>Heading</h3>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
<a>Link1</a>
</nav>
</div>
<main>
<div id=container>
<div id='table'>
</div>
</div>
</main>
</body>
box-sizing: border-box;
margin:0px;
padding:0px;
font-family:sans-serif;
}
body {
overflow:auto;
}
header {
height:80px;
width:100%;
background-color: lightgrey;
}
header h1 {
display:inline-block;
font-size:40px;
color:grey;
line-height: 80px;
}
header span {
color:green;
}
#log-in {
float:right;
height:80px;
width:1000px;
}
#log-in h3 ,button {
display:inline-block;
}
#log-in h3 {
font-size:20px;
font-weight:lighter;
letter-spacing: 5px;
line-height: 80px;
margin-right:10px;
position:relative;
left:330px;
}
#log-in button {
background-color:green;
font-size: larger;
color:white;
border:1px solid;
border-radius:5px;
font-size:25px;
position:relative;
left:330px;
padding:5px;
margin-right:10px;
}
#log-in button:hover {
background-color:black;
transition:2s;
}
header h1:hover {
color:green;
}
/*THis is all the code for the deader------------------
------------------------------------*/
#top-nav {
width:100%;
height:80px;
}
#top-nav nav ul {
list-style: none;
display:inline-block;
background-color:green;
width:100%;
height:60px;
}
#top-nav nav ul li {
display:inline-block;
font-size:25px;
margin-left:5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;
line-height:60px;
color:white;
}
#top-nav nav ul li a {
color:white;
}
#top-nav nav ul li:hover {
background-color:black;
}
/*all THIS IS THE TOP NAVIGTION CODE ------------------------------------>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/
#left-nav {
display:inline-block;
background-color:light-grey;
width:200px;
height:100%;
position:fixed;
overflow:scroll;
}
#left-nav h3 {
text-align: center;
font-size:20px;
background-color:green;
}
#left-nav a {
text-align:center;
display:block;
}
#left-nav a:hover {
background-color:grey;
}
#left-nav a:active {
background-color:green;
}
/*THIS IS ALL THE lEFT NAVIGATION CODE---------------------------------------------------------------------------------------->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
*/
#container {
width:1140px;
height:5000px;
background-color: cyan;
margin-left:200px;
}
#table {
height:500px;
width:100%;
background-color: lightpink;
}