Navigation Page
by twong17
HTML
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "newNavigation.css">
<title>
Linking Files
</title>
</head>
<body>
</body>
<div class="topnav">
<a href="incidentreportform.html">Incident Report Form</a>
<a href="search.html">Incident Seach Page</a>
</div>
<div class="header">
<h1 style = "font-family:courier; color: white">Incident Report Page</h1>
</div>
<div class="module top">
<h2>Skyscrapers</h2>
</div>
<div class="row">
<div class="column">
<h2>Random text that I'm gonna change later</h2>
<p>Blah blah blah</p>
</div>
</div>
</html>
CSS
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
background-image:url('https://i.postimg.cc/vB95Ff4D/image5.jpg');
background-size:100% 100%;
height:250px;
font: 20px Monaco, Mono-Space;
}
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}