<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="nitDiv">
<div >
<nav > <form> <ul>
<li>Customer</li>
<li ><select class="nitInput">
<option value="volvo">Volvo</option> <option value="saab">Saab</option><option value="mercedes">Mercedes</option> <option value="audi">Audi</option>
</select></li>
<li>Product Family</li>
<li><select class="nitInput">
<option value="volvo">Volvo</option> <option value="saab">Saab</option><option value="mercedes">Mercedes</option> <option value="audi">Audi</option>
</select></li>
<li>Product Type</li>
<li><select class="nitInput">
<option value="volvo">Volvo</option> <option value="saab">Saab</option><option value="mercedes">Mercedes</option> <option value="audi">Audi</option>
</select></li>
<li>Part Number</li>
<li><select class="nitInput">
<option value="volvo">Volvo</option> <option value="saab">Saab</option><option value="mercedes">Mercedes</option> <option value="audi">Audi</option>
</select></li>
<li><button type="submit" class="nitButton">Apply</button></li>
</ul>
</form>
</nav>
</div>
<article>
<p><input type="text" class="nitInput" placeholder="Search by Part Number / Serial Number" style="min-width:290px; margin-top:80px"/>
<button type="submit" class="nitButton" style="background-color: #008CBA;">Search</button></p>
</article>
</div>
</body>
</html>
// Code goes here
/* Styles go here */
/* Place custom CSS styling for demoWidget widget at runtime in this file */
.widget-demowidget {
}
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 17px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
.nitDiv{
background-color: #f1f1f1;
overflow: auto;
}
.nitInput{
border-style: solid;
border-color: lightgray;
color: black;
padding: 7px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
.nitButton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 7px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}